//新增,修改窗体基类
PersonInfoWindow = Ext.extend(Ext.Window, {
form: null,
constructor: function() {
this.addEvents("submit");
this.form = new PersonInfoFormPanel();
//Ext.apply(this.form, {baseCls: "x-plain"});
PersonInfoWindow.superclass.constructor.call(this, {
plain: true,
width: 360,
modal: true, //模式窗体
onEsc: Ext.emptyFn,
closeAction: "hide",
items: [this.form],
buttons: [{
text: "确 定",
handler: this.onSubmitClick,
scope: this
}, {
text: "取 消",
handler: this.onCancelClick,
scope: this
}]
});
//alert(this.onSubmitClick);
},
close: function() {
//需要重写CLose方法,
//否则在窗体被关闭其实体会被释放
this.hide();
this.form.reset();
},
onSubmitClick: function() {
//alert(Ext.util.JSON.encode(this.form.getValues().data));
try {
this.fireEvent("submit", this, this.form.getValues());
this.close();
}
catch(_err) {
return;
}
},
onCancelClick: function() {
this.close();
}
});
基类写了之后，我们就可以使用继承的方法来编写新进和更新窗体了。
复制代码 代码如下:
//定义新增数据窗体
InsertPersonInfoWindow = Ext.extend(PersonInfoWindow, {
title: "添加"
});
//==============================================================================
复制代码 代码如下:
//定义编辑数据窗体
UpdatePersonInfoWindow = Ext.extend(PersonInfoWindow, {
title: "修改",
load: function(r) {
this.form.setValues(r);
}
});
为了区分新增和更新窗体，我们在其各自的实现类中为其指定了Title属性，另外在更新窗体类中需要另外添加一个用于加载待编辑数据的方法Load。
脚本部分算是完成了，下面看看如何在HTML中使用。HTML中的引用代码
复制代码 代码如下:
<script type="text/javascript">
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
Ext.BLANK_IMAGE_URL = "http://localhost:8080/ext-2.2/resources/images/default/s.gif";
Ext.apply(Ext.form.VTypes, {
"age": function(_v) {
if (/^\d+$/.test(_v)) {
var _age = parseInt(_v);
if ((_age > 0) && (_age < 200)) return true;
}
return false;
},
"ageText": "年龄必须在0到200之间",
"ageMask": /[0-9]/i
});
Ext.onReady(function() {
new PersonListGridPanel();
});
</script>
代码很简洁，也很清晰。只需要创建一个PersonListGridPanel即可，因为它自身包含了新增、修改的窗体对象，而新增和修改窗体中都使用到了负责数据编辑的PersonInfoFormPanel。
在PersonInfoFormPanel中使用了VTypes进行数据验证。
新增和修改窗体仅仅是界面，负责将用户在PersonInfoFormPanel中填写的数据传回到ListGrid中以便保存，或是将ListGrid中的数据传递到PersonInfoFormPanel中进行呈现，供用户编辑。
1