Posted on 2009-07-17 23:31
月下孤城 阅读(2375)
评论(6) 编辑 收藏 所属分类:
extjs
近期一个项目前台采用了extjs框架，经过一段时间的编码，对extjs面向对象也有了一定的了解。以下通过FormPanel扩展对表单对象中常用代码段进行了通用提取，并以此实践ext面向对象的继承，希望对刚接触的朋友有所帮助。
1.实现类构造方法:
1
/**//*
2
* 默认表单类
3 * add by daiqiang
4
* */
5Ext.ux.DefaultFormPanel = function(config){
6
/*FormPanel submit按钮url*/
7 this.subBtnUrl = config.subBtnUrl;
8
/*submit按钮url提交参数*/
9 this.subBtnParams = config.subBtnParams?config.subBtnParams:
{};
10 /*submit提交完成后回调方法*/
11 this.subBtnCallbackFun = config.subBtnCallbackFun;
12 /*submit 显示文本*/
13 this.subBtnText = config.subBtnText? config.subBtnText:'保存';
14 /*
15 * 重置按钮定制方法
16 * 【主要针对表单状态为'修改'(非'新增')时,
17 * 提交表单数据可能含隐藏字段,
18 * 若用reset方法将把隐藏字段值也一并清掉。
19 * 考虑这种情况需自定义表单重置方法】
20
* */
21 this.resetBtnFun = config.resetBtnFun;
22
23 Ext.ux.DefaultFormPanel.superclass.constructor.call(this, config);
24}
实现类构造方法中先初始化属性变量，然后调用继承类的构造方法，实现构造方法的继承扩展。
2.使用Ext.extend方式实现父类方法、属性的继承扩展.
1Ext.extend(Ext.ux.DefaultFormPanel,Ext.form.FormPanel,{
2 frame:true,
3 defaultType: 'textfield',
4 labelAlign:'right',
5 bodyStyle:'padding:5px 5px 0',
6 layout : 'form',
7 buttonAlign : 'center',
8 autoHeight:true,
9 initComponent:function(){
10 /*初始化提交、重置按钮*/
11 var oprBtns = [
12 {
13 text :this.subBtnText,
14 id:'subFormBtn',
15 handler :function(){
16 this.getForm().submit({
17 url:this.subBtnUrl,
18 params:this.subBtnParams,
19 clientValidation: true,
21 method:'post',
22 success:function(form, action){
23// Ext.Msg.alert("Success", action.result.msg);
24 Ext.Msg.alert("信息", action.result.msg);
25 //执行回调函数
26 if(this.subBtnCallbackFun){
27 this.subBtnCallbackFun(this);
28 };
29 }.createDelegate(this),
30 failure: function(form, action){
31 switch (action.failureType){
32 case Ext.form.Action.CLIENT_INVALID:
33// Ext.Msg.alert("Failure", "Form fields may not be submitted with invalid values");
34 Ext.Msg.alert("错误", "提交的表单数据无效,请检查!");
35 break;
36 case Ext.form.Action.CONNECT_FAILURE:
37// Ext.Msg.alert("Failure", "Ajax communication failed");
38 Ext.Msg.alert("错误", "服务器连接失败,请稍后再试!");
39 break;
40 case Ext.form.Action.SERVER_INVALID:
41// Ext.Msg.alert("Failure", action.result.msg);
42 Ext.Msg.alert("错误", action.result.msg);
43 }
44 }.createDelegate(this)
45 });
46 }.createDelegate(this)
47 },
48 {
49 text:'重置',
50 id:'resetFormBtn',
51 handler:function(){
52 if(this.resetBtnFun){
53 this.resetBtnkFun(this);
54 }else{
55 this.getForm().reset();
56 }
57 }.createDelegate(this)
58 }
59 ];
60
61 if(this.buttons){
62 for(var i=0;i<oprBtns.length;i++){
63 this.buttons.push(oprBtns[i]);
64 }
65 }else{
66 this.buttons = oprBtns;
67 }
68
69 Ext.ux.DefaultFormPanel.superclass.initComponent.apply(this, arguments);
70 }
71})
Ext.
extend(
Function subclass,
Function superclass,
[Object overrides] )，参数分别对应'子类对象','父类对象','覆盖扩展父类方法属性'。
2-8行是对FormPanel的默认设置。接下来就是对ext 组件方法initComponent的覆盖实现(
了解ext组件生命周期详情点这里),该方法中主要实现默认的提交、重置
按钮操作。注意在29行代码success属性方法后加了个createDelegate(this)方法，这主要是success方法中引用了类属性this.subBtnCallbackFun,而success方法中的scope(域)
和当前类的scope不同，故通过
Function类中的
createDelegate转化到当前域中。处理完自定义操作后别望了回调父类该方法，完成FormPanel的初始化工作。
3.调用代码片段
代码执行后会弹出一个包含'新增','重置'按钮表单的窗口.点击新增按钮后会执行一系列流程:表单效验通过->发送subBtnUrl到后台接受数据->后台数据接受调用回调方法，最后alert('回调方法');提示一个表单新增操作完成。
---------------------
月下孤城
mail:eagle_daiqiang@sina.com