慢慢开始接触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代码不太简洁,但比较好维护,不太容易出错