ext的table布局的例子(個人覺得目前最適用的布局方法)

 

周末對ext布局進行了研究，發現以前覺得比較麻煩的東西，現在看來十分簡單。ext的使用不是特別困難，但是如何才可以保證ext可以滿足各種變態的頁面需求的同時又可以使開發人員不去接觸一堆一堆的js呢？這個問題肯定是個難題。

   還是貼點代碼。下面的代碼實現了利用table模式布局FormPanel。解決了在非form模式下label不能顯示的問題，但是還是存在問題，例如通常情況下“開始日期”和“結束日期”一般只佔一個column，也就是兩個元素各佔半個column。

 

這是主要代碼，原始碼是網上轉載來的。

 

<script type="text/javascript">    function getBodyWidth(){        return document.body.clientWidth-15;    }        function func_submit_onclick(){        alert('hello');    }    var _bodyWidth = getBodyWidth();//var _bodyWidth=900;    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,//width:_bodyWidth+30,            layout:'table',             style:'height:100%',//bodyStyle: 'padding:8px 0 0 0;' ,    //上－右－下－左            layoutConfig: {columns:_columns},            title:'TableForm',            defaults:{border:false,bodyStyle: 'padding:8px 0 0 0;',  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:2,items:{xtype:'hidden',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());    });             </script>

 

我打算擴充用於三種介面顯示，1：全屏的行列顯示；2：局部地區的行列顯示；3：嵌套於其他容器（比如window）的行列顯示；

第一種方式