ext组件化编程（grid与form数据交互）

最新推荐文章于 2024-09-12 12:36:01 发布

原创最新推荐文章于 2024-09-12 12:36:01 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#编程 #EXT #框架 #工作

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用组件化编程方式实现grid与form间的数据交互，并提供了代码示例，包括验证年龄、设置form面板、定义窗口等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好久没用ext了，工作中要用到，想想这次用组件化编程方式吧。因为，之前的写法太垃圾了。个人认为组件化的好处是，相对降低对象的生命周期，其它方面的暂时没考虑到——没好好学过js，就学用框架。当然，回顾还是看别人的代码。一番寻找，找到了dojochina的一个例子。

该实例实现了grid与form间的数据交互，所有数据均为临时存储。代码如下：

/**
 * 扩展验证
 */
Ext.apply(Ext.form.VTypes, {
    'age':function(_v){
    if(/^\d+$/.test(_v))
    {
     var _age = parseInt(_v);
    
     if(_age < 200)
      return true;
    }
   },
   'ageText':'该选项必须输入,例如:24',
   'ageMask':/[0-9]/i
 });
/**
 * 定义form
 */
 PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, {
     constructor: function(){
         PersonInfoFormPanel.superclass.constructor.apply(this, [{
             baseCls: "x-plain",
             buttonAlign: "right",
             labelWidth:30 ,
             defaultType: "textfield",
             defaults: {
                 anchor: "95%"
                 //labelStyle: "text-align:right"//设定后文本框和标签占据同一区域
             },
             items: [{
                 fieldLabel: "姓名",
                 name: "name"
             }, {
                 fieldLabel: "年龄",
                 name: "age",
                 vtype: "age"//验证年龄（通过vtype类型来验证）
             }, {
                 xtype: "combo",
                 mode: "local",//本地数据
                 readOnly: true,
                 fieldLabel: "性别",
                 displayField: "sex",//显示下拉框的内容
                 triggerAction: "all",//在选择时，显示所有的项
                 value: "男",//默认值
                 store: new Ext.data.SimpleStore({
                     fields: ["sex"],
                     data: [["男"], ["女"]]
                 }),
                 name: "sex"//绑定字段
             }]
         
         
         }])
     },
     //---以下为PersonInfoFormPanel类对外提供的方法---
     getValues: function(){
         if (this.getForm().isValid()) 
             return new Ext.data.Record(this.getForm().getValues());
         else 
             throw new Error("验证没有通过");//自定义异常
     },
     setValues: function(_r){
         this.getForm().loadRecord(_r);
     },
     reset: function(){
         this.getForm().reset();
     }
     
     
 });
/**
 * 定义window
 */
 baseWindow = Ext.extend(Ext.Window, {
     form: null,
     constructor: function(){
         this.form = new PersonInfoFormPanel();//实例化PersonInfoFormPanel类
         baseWindow.superclass.constructor.apply(this, [{
             modal: true,
             resizable: false,
         	 plain: true,
         	 width:350,
	         items:this.form,
	         buttonAlign:'right',
	         closeAction:'hide',
	         bodyStyle:{'padding':'10px 0 10px 10px'},
             items: this.form,
             buttons: [{
                 text: "确 定",
                 handler:this.onSubmitClick,//提交事件调用
                 scope: this
             }, {
                 text: "取 消",
                 handler:this.onCancelClick,//取消事件调用
                 scope: this
             
             }]
         }]);
         //给insertWindow对象添加事件（事件冒泡）
         this.addEvents("submit");
     },
    //提交事件处理函数
    onSubmitClick: function(){
        try {
            //发布事件
            this.fireEvent("submit", this, this.form.getValues());//调用PersonInfoFormPanel类中自定义的方法getValues
            this.close();
            
        } 
        catch (_err) {
            Ext.Msg.alert("系统提示", _err.description);//扑捉自定义错误或异常
        }
    },
    //取消事件处理函数
    onCancelClick: function(){
        this.close();
    },
    //重置与隐藏事件处理函数
    close: function(){
        this.form.reset();
        this.hide();
    }
    
});
/**
 * 增加人员窗口
 */
insertWindow = Ext.extend(baseWindow, {
    title: "新增人员"
});
/**
 * 修改人员窗口
 */
updateWindow = Ext.extend(baseWindow, {
    title: "修改人员",
    load: function(_r){
        this.form.setValues(_r);
    }
});
/**
 * 人员列表
 */
PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {
    _window: null,
    _updateWin: null,
    constructor: function(_url){
        this._window = new insertWindow();//insertWindow对象引用
        this._updateWin = new updateWindow();//updateWindow对象引用
        PersonListGridPanel.superclass.constructor.apply(this, [{
            renderTo: Ext.getBody(),
            width:325 ,
            height:200 ,
            frame: true,
            autoScroll:true,
            layout: "form",
            //工具栏
            tbar: [{
                text: "添加人员",
                handler: function(){
                    this._window.show();
                },
                scope: this
            }, "-", {
                text: "修改人员",
                handler: function(){
                    this._updateWin.show();
                    try {
                        this._updateWin.load(this.getSelected());
                    } 
                    
                    
                    catch (_err) {
                        Ext.Msg.alert("系统提示", _err.description);
                        this._updateWin.close();
                    }
                },
                scope: this
            }, "-", {
                text: "删除",
                handler: this.onRemovePerson,
                scope: this
            }],
            enableColumnMove: false,
            //列模板
            columns: [{
                header: "姓名",
                menuDisabled: true,
                dataIndex: "name"
            }, {
                header: "年龄",
                menuDisabled: true,
                dataIndex: "age"
            }, {
                header: "性别",
                menuDisabled: true,
                dataIndex: "sex"
            }],
            //内存数据
           store: new Ext.data.Store({
	         proxy: new Ext.data.MemoryProxy([['张三','24','男'],['李四','23','女'],['王五','25','男'],['赵六','27','女'],['木易','26','男']]),
	         reader:new Ext.data.ArrayReader({},['name','age','sex']),
	         autoLoad:true
	        }),
            /*store: new Ext.data.JsonStore({
                autoLoad: true,
                url: _url,
                fields: ["name", "age", "sex"]
            }),*/
            //选中模板
            selModel: new Ext.grid.RowSelectionModel({
                singleSelect: true,
                listeners: {
                    "rowselect": {
                        fn: this.onRowSelected,
                        scope: this
                    }
                }
            })
        
        }]);
        //添加事件
        this.addEvents("rowselect");
        //事件订阅
        this._window.on("submit", this.onInsertWinSubmit, this);
        this._updateWin.on("submit", this.onUpdateWinSubmit, this);
    },
    //----- 以下为自定义方法---------
    //获得选中的记录
    getSelected: function(){
        var _sm = this.getSelectionModel();
        if (_sm.getCount() == 0) 
            throw new Error("你没有选中任何记录,请选择一条记录后重试");
        return _sm.getSelected();
    },
    //插入一条记录
    insert: function(_r){
        this.getStore().add(_r);
    },
    //更新选中的记录
    update: function(_r){
        try {
            var _rs = this.getSelected();
            var _data = _rs.data;
            for (var _i in _data) {
                _rs.set(_i, _r.get(_i));
            };
            _rs.commit();
        } 
        catch (_err) {
        
        }
        
    },
    //删除选中的记录
    remove: function(){
        try {
            var _rs = this.getSelected();
            Ext.Msg.confirm("系统提示", "你确定删除吗?", function(_btn){
                if (_btn == "yes") 
                    this.getStore().remove(_rs);
            }, this);
        } 
        catch (_err) {
            Ext.Msg.alert("系统提示", _err.description);
        }
    },
    //-------以下为自定义事件处理函数------------
    //添加事件
    onInsertWinSubmit: function(_win, _r){
        this.insert(_r);
    },
    //修改事件
    onUpdateWinSubmit: function(_win, _r){
        this.update(_r);
    },
    //删除事件
    onRemovePerson: function(){
        this.remove();
    },
    //选中事件
    onRowSelected: function(_sel, _index, _r){
        this.fireEvent("rowselect", _r);//发布事件
    }
    
})