ExtJS 之compositefield的使用_ExtJS

用ExtJS编写Label+TextBox的时候，发现用 xtype:'Label', 会出现以上label和'textfield'在控件上对不齐的问题。用compositefield就能解决这个问题。

ExtJS 之compositefield的使用_ExtJS_02

注意这个label只有在layout是form的情况下才能显示出来：

fieldLabel : String

The label text to display next to this Component (defaults to '').

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

 

  1. Ext.onReady( 
  2. function(){ 
  3. var f=new Ext.form.FormPanel({ 
  4. title:"test", 
  5. width:600, 
  6. height:150, 
  7. bodyStyle:"padding:6px", 
  8. labelAlign:'left', 
  9. layout:'form',   //warning
  10. frame:true, 
  11. items: [{ 
  12.     xtype: 'compositefield', 
  13.     id:'phone', 
  14.     fieldLabel: 'Telephone', 
  15.     labelWidth: 220, 
  16.     items: [ 
  17.         { 
  18.             xtype     : 'textfield', 
  19.             flex     : 1 
  20.         },{ 
  21.             xtype: 'displayfield', 
  22.             value: '-' 
  23.         }, 
  24.         { 
  25.             xtype     : 'textfield', 
  26.             flex      : 1 
  27.         },{ 
  28.             xtype: 'displayfield', 
  29.             value: '-' 
  30.         }, 
  31.         { 
  32.             xtype     : 'textfield', 
  33.             flex      : 1 
  34.         } 
  35.     ] 
  36. }] 
  37. }); 
  38.  
  39. f.render(Ext.getBody()); 
  40. } 
  41. );