周末對ext布局進行了研究，發(fā)現(xiàn)以前覺得比較麻煩的東西，現(xiàn)在看來十分簡單。ext的使用不是特別困難，但是如何才可以保證ext可以滿足各種變態(tài)的頁面需求的同時又可以使開發(fā)人員不去接觸一堆一堆的js呢？這個問題肯定是個難題。
還是貼點代碼。下面的代碼實現(xiàn)了利用table模式布局FormPanel。解決了在非form模式下label不能顯示的問題，但是還是存在問題，例如通常情況下“開始日期”和“結(jié)束日期”一般只占一個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>