Question

当我使用列布局时，我看不到我的labelFields 我的字段在cols中，但没有标签

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]
            }           
        ]
    });

Answer 1

由于您使用ColumnLayout替换了FormPanel的默认布局 - FormLayout，因此您看不到标签。

来自FormPanel文档：

默认情况下，配置FormPanel with layout：'form'使用 Ext.layout.FormLayout布局管理器，哪些样式和呈现字段和标签正确。嵌套时 a。中的其他容器 FormPanel，你应该确保任何后代容纳输入的容器 Fields使用Ext.layout.FormLayout 布局经理。

所以，在列布局中嵌套带有布局的容器：'form'，你就可以看到标签

了

Answer 2

他们习惯于在列布局中实现字段，就像这样......

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%'
          }]
      }]
  }]
});

试试并告诉我它是否适合你...

EXTJS，应用布局时出现问题

2 个答案: