代码之家  ›  专栏  ›  技术社区  ›  Marouane Gazanayi

EXTJS,应用布局时出现问题

  •  2
  • Marouane Gazanayi  · 技术社区  · 16 年前

    当我使用列布局时,我看不到我的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]
                }           
            ]
        });
    
    2 回复  |  直到 16 年前
        1
  •  4
  •   moQuez    16 年前

    它们是我用来在列布局中实现字段的方式,就像这样。。。

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

        2
  •  5
  •   ob1    16 年前

    因为用ColumnLayout替换了FormPanel的默认布局FormLayout,所以看不到标签。

    从FormPanel文档:

    布局:'form'使用 对字段和 标签正确。筑巢时 容器内的附加容器 FormPanel,您应该确保 承载输入的子体容器 字段使用Ext.layout.FormLayout 布局管理器。