慢慢開始接觸Ext,防公司讓我搞這個,先做點準備,準備多少是多少.在網上搜了很多例子,無一例外的都是在items[]數組里去定義一些新的對象,就象下面代碼的上部分一樣,難以閱讀,看著那叫一個累,尤其是初學者,都不知道items里到底是什么對象,照著敲這些代碼還容易出錯,查了查ext文檔,發現組件類都有add方法,于是改了一個別人的例子,覺著好理解多了,并且便于調試多了.就在下面代碼的后一部分,相信這種寫法應該是搞面象對象編程人員比較喜歡的一種方式
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-2.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
//定義一個FormPanel
var fsf = new Ext.form.FormPanel({
title:"FormPanel2 ",
url:'',
frame:true,
width:350,
bodyStyle:'padding:5px 5px 0',
//height:120,
//defaultType:'textfield',
items:[
//定義兩個FieldSet
{
xtype:'fieldset',
checkboxToggle:true,
title:'User Information',
autoHeight:true,
defaultType:'textfield',
//defaults: {width: 210},
collapsed:true,
items :[
{fieldLabel: 'First Name',name: 'first', allowBlank:false},
{fieldLabel: 'Last Name',name: 'last'},
{fieldLabel: 'Company',name: 'company'},
{fieldLabel: 'Email',name: 'email', vtype:'email'}
]
},
{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
//defaults: {width: 210},
defaultType: 'textfield',
items :[
{fieldLabel: 'Home',name: 'home',value: '(888) 555-1212'},
{fieldLabel: 'Business',name: 'business'},
{fieldLabel: 'Mobile',name: 'mobile'},
{fieldLabel: 'Fax',name: 'fax'}
]
}
]
});
//new一個FieldSet
var fieldset = new Ext.form.FieldSet({
title: 'Phone Number',
collapsible: true,
autoHeight:true,
//defaults: {width: 210},
defaultType: 'textfield'
});
//new一個TextFiled,
var textFiled1 = new Ext.form.TextField();
textFiled1.fieldLabel="Home2";
textFiled1.name="home";
textFiled1.value="(888) 555-1212";
//textFiled添加到FieldSet
fieldset.add(textFiled1);
//Fieldset添加到FormPanel
fsf.add(fieldset);
fsf.render(document.body);
});
</script>
</head>
<body>
</body>
</html>
雖然這樣看起來js代碼不太簡潔,但比較好維護,不太容易出錯