ExtJS Table Layout не отображает метки поля или не добавляет отступы

Question

У меня есть форма, которая имеет несколько различных полей и в конечном итоге станет динамической формой Панели.

Я выбрал макет таблицы, поскольку компоненты проще разметить, но по какой-то причине настройки по умолчанию не применяются, и для каких-либо полей не отображаются метки полей.

Я установил конфигурацию как:

SearchForm = Ext.extend(Ext.FormPanel, {
 id: 'myForm'
 ,title: 'Search Form'
 ,frame:true     
 ,waitMessage: 'Please wait.'
 ,labelWidth:80,
 buttonAlign:'center'
 ,initComponent: function() {    
     var config = {                 
        items: [{
            layout:{
                type:'table',
                columns:5
            },
            defaults:{
                //width:150,
                bodyStyle:'padding:20px'
            },               
                items:[{
                        xtype: 'label',
                        name: 'dateLabel',
                        cls: 'f',
                        text: "Required:"                   
                    },
                    {
                        xtype: 'datefield',
                        fieldLabel: "From Date",  
                        value: yesterday,
                        width: 110,
                        id: 'date1'                                             
                    },
                    {
                        xtype: 'datefield',
                        fieldLabel: "To Date",                      
                        id: 'date2',
                        width: 110,
                        value: yesterday                    

            },
            {
                xtype: 'displayfield', value: '  ',
                height:12,
                colspan:2
                }

            ],
            buttons: [{
                text: 'Submit',
                id: "submitBtn",                    
                handler: this.submit,
                scope: this

            },{
                text: 'Reset',
                id: "resetBtn",
                handler: this.reset,
                scope: this                     
            }
            ] 
        }]};

        // apply config
        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);

        SearchForm.superclass.initComponent.apply(this, arguments);


    }


});

Answer 1

Проблема в том, что вы определяете макет как table, следовательно, ExtJS неправильно отображает метки полей.

В каждом столбце оберните поля с Ext.Container и дайтепанель макета form.Это скажет ExtJS правильно отображать метки.