Ext 에서 table 방식 으로 FormPanel 을 배치 합 니 다.

주말 에 ext 구 조 를 연구 한 결과 예전 에 비교적 번 거 로 웠 던 것 을 발 견 했 는데 지금 은 매우 간단 해 보인다.ext 의 사용 은 그리 어렵 지 않 지만 어떻게 해야만 ext 가 각종 변태 적 인 페이지 수 요 를 만족 시 킬 수 있 는 동시에 개발 자 들 로 하여 금 한 무더기 의 js 를 접촉 하지 않 게 할 수 있 습 니까?이 문 제 는 틀림없이 어 려 운 문제 일 것 이다.   코드 를 붙 이 든 가.아래 코드 는 table 모드 를 이용 하여 FormPanel 을 레이아웃 합 니 다.비 form 모드 에서 label 이 표시 할 수 없 는 문 제 를 해 결 했 지만 문제 가 존재 합 니 다. 예 를 들 어 일반적인 상황 에서 '시작 날짜' 와 '종료 날짜' 는 보통 하나의 column 만 차지 합 니 다. 즉, 두 요소 가 각각 반 개의 column 을 차지 합 니 다.

    function getBodyWidth(){
        return document.body.clientWidth-15;
    }
    
    function func_submit_onclick(){
        alert('hello');
    }
    var _bodyWidth = getBodyWidth();
    var _columns = 3 * 2;
    var _perWidth = _bodyWidth/_columns;
    
    Ext.onReady(function(){
        
        Ext.QuickTips.init();
        var tableForm=new Ext.FormPanel({
            name:'tableForm',
            id:'tableForm',
            frame:true,
            layout:'table', 
            style:'height:100%',
            layoutConfig: {columns:_columns},
            title:'TableForm',
            defaults:{border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:75,width:_perWidth*2,height:30} 
        });
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:1,width:_perWidth,items:{xtype:'datefield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:1,width:_perWidth,labelAlign:'center',items:{xtype:'datefield',fieldLabel:'to',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:4,width:_perWidth*4,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        
        tableForm.addButton({text:'submit',handler:func_submit_onclick});
        tableForm.addButton({text:'cancel'});
        
        tableForm.render(Ext.getBody());
    });