ExtJS表佈局不顯示字段標籤或添加填充

我有一個表單，它有許多不同的字段，最終將成爲一個動態的formPanel。ExtJS表佈局不顯示字段標籤或添加填充

我選擇了表格佈局，因爲它更容易佈置組件，但由於某些原因，默認設置不適用，並且任何字段都沒有顯示字段標籤。

我已經設置了類似的配置：

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


    } 


});

來源

2011-09-19 pm13

「f」類的來源是什麼 –

這是一個css類，取自另一個文件：.f {font-size：10pt; font-weight：bold; } – pm13

它是什麼代碼。嘗試刪除它，看看它是否有幫助 –

的問題是，因爲你定義的佈局是table，因此ExtJS的無法正確渲染領域的標籤。

在每列中，用Ext.Container包裝您的字段，並給面板佈局form。這將告訴ExtJS正確渲染標籤。

來源

2011-09-19 12:41:29 JamesHalsall

除非您需要工具欄或標題，否則請勿使用Ext.Panel。應該使用Ext.Container。 –

歡呼米切爾，更新了我的答案 – JamesHalsall

ExtJS表佈局不顯示字段標籤或添加填充

回答

相關問題