周末對ext布局進行了研究，發現以前覺得比較麻煩的東西，現在看來十分簡單。ext的使用不是特別困難，但是如何才可以保證ext可以滿足各種變態的頁面需求的同時又可以使開發人員不去接觸一堆一堆的js呢？這個問題肯定是個難題。
還是貼點代碼。下面的代碼實現了利用table模式布局FormPanel。解決了在非form模式下label不能顯示的問題，但是還是存在問題，例如通常情況下“開始日期”和“結束日期”一般只占一個column，也就是兩個元素各占半個column。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"><!-- GC -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
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());
});
</script>
</body>
</html>