ExtJS 테이블 레이아웃에서 필드 레이블을 표시하지 않거나 패딩을 추가하지 않습니다.

Question

필드 수가 많고 동적 인 formPanel이되는 양식이 있습니다.

구성 요소를 배치하는 것이 더 쉽기 때문에 테이블 레이아웃을 선택했지만 어떤 이유로 기본 설정이 적용되지 않고 필드에 레이블이 표시되지 않습니다. 이 때문에 ExtJS에 올바르게 필드의 레이블을 렌더링하지 table을 할 레이아웃을 정의하고 있기 때문에 문제가

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

:

내가 좋아하는 구성을 설정했습니다.

각 열에서 Ext.Container으로 필드를 감싸고 패널의 레이아웃을 form으로 지정하십시오. 그렇게하면 ExtJS가 라벨을 올바르게 렌더링 할 것입니다.