2010-08-11 59 views
2

當我與一列布置工作,我看不到我的labelFields 我的字段是的cols,但沒有標籤EXTJS,應用佈局問題時

var familyNameTextField = new Ext.form.TextField({ 
     fieldLabel : 'Ville', 
     allowBlank:false, 
     id : 'familyName' 
    }); 
    var myData = [['EDF','EDF'],['GDF','GDF']]; 

    //The text field for the First Name 
    var firstNameTextField = new Ext.form.ComboBox({ 
     fieldLabel: 'State', 
     hiddenName:'state', 
     store: new Ext.data.ArrayStore({ 
      fields: ['abbr', 'state'], 
      data : myData // from states.js 
     }), 
     valueField:'abbr', 
     displayField:'state', 
     typeAhead: true, 
     mode: 'local', 
     triggerAction: 'all', 
     emptyText:'Select a state...', 
     selectOnFocus:true, 
     width:190 
    }); 
    //The text field for the First Name 
    var demarcheField = new Ext.form.TextField({ 
     fieldLabel : 'Démarche', 
     allowBlank:false, 
     id : 'demarche' 
    }); 
    //Button to show the MessageBox 
    var showMessageBoxBouton = new Ext.Button({ 
     text:'Say Hello', 
     handler:showMessageBox //The function that will be called when the button is clicked 
    }); 
    //The form that will contain all our components 
    var myForm = new Ext.FormPanel({ 
     labelWidth: 115, 
     frame:true, 
     title: 'Personal informations', 
     bodyStyle:'padding:5px 5px 0', 
     width: 900, 
     autoScroll:true, 
     layout:'column', 
     items: [{ 
       items:[ 
        familyNameTextField 
       ] 
      }, 
      { 
       items:[firstNameTextField] 
      }, 
      { 
       items:[demarcheField] 
      }, 
      { 
       items:[showMessageBoxBouton] 
      }   
     ] 
    }); 

回答

4

。 ..

var form = new Ext.FormPanel({ 
    labelAlign: 'top', 
    items: [{ 
     layout:'column', 
     defaults: { 
     columnWidth: 0.5 
     }, 
     items:[{ 

      layout: 'form', 
      items: [{ 
       xtype:'textfield', 
       fieldLabel: 'Top Left', 
       name: 'first', 
       anchor:'95%' 
      }, { 
       xtype:'textfield', 
       fieldLabel: 'Bottom Left', 
       name: 'third', 
       anchor:'95%' 
      }] 
     },{ 
      layout: 'form', 
      items: [{ 
       xtype:'textfield', 
       fieldLabel: 'Top Right', 
       name: 'last', 
       anchor:'95%' 
      },{ 
       xtype:'textfield', 
       fieldLabel: 'Bottom Right', 
       name: 'email', 
       anchor:'95%' 
      }] 
     }] 
    }] 
}); 

試試吧,告訴我,如果你的作品...

+0

Thnx哥們兒!它的工作:) – 2010-08-13 08:26:33

5

你看不到因爲你用ColumnLayout替換了FormPanel的默認佈局--FormLayout。

從FormPanel中的文檔:

默認情況下,FormPanel中與佈局配置 :「形式」使用的 Ext.layout.FormLayout佈局管理器, 其風格和正確呈現的字段和 標籤。當在 FormPanel中嵌套 附加容器時,您應確保任何主機輸入 字段使用Ext.layout.FormLayout 佈局管理器的後代容器。

所以,鳥巢容器與佈局:「形式」列布局裏面,你會在這裏看到他們這樣,我用來實現字段列布局是這樣的標籤

+0

日Thnx很多!!!!! – 2010-08-13 08:27:14