Ext的面向对象设计(如何建立一个继承Ext控件的"类")

    本文基于Ext-2.0.2版本

    声明：这个并不是所谓发明创举，Ext 2.0 的example中的示例都基于这样的设计。在此，我列出一两种融入了我目前所使用的.net框架的实现。

    优点：这样的设计得到的是一个个包含各种特性的对象，也就是说，只要页面引入相应的js文件，我们便可以直接获取到这个对象。比如，我设计了一个弹出窗口，它包含了某张表完整的增删改差的功能，那么我可以在任何需要用到它的地方产生这个窗口，而无须写另外的实现，仅需要一行代码（类似于c#.net的用户控件了）。

    首先，先列出一个关于store的定义吧：

KeStore.js

KeStore = function(data){
        KeStore.superclass.constructor.call(this, {
                remoteSort: true,
                data: data,
                reader: new Ext.data.JsonReader
                ({}, [
                        {name: 'MId', type: 'int'},
                        {name: 'KId'},
                        {name: 'KName'},
                        {name: 'IndexDirectory'}
                ])
        });
}

Ext.extend(KeStore, Ext.data.Store);

    当我们页面引入KeStore.js后，就可以直接在js里面产生相应的对象了，var ks = new KeStore(data);，这里的data为你所获得的数据。可能很多人会关心如何更新它数据的问题，使用ks.loadData(data);方法可以更新它的数据。那么，现在的问题在于如何获取data（符合定义的Json数据）的问题了：这个在前面json json-rpc 如何在项目中便宜引入Ajax框架 （Joyrock开源项目） 这篇文章中，介绍了怎么利用Joyrock开源项目的动态链接库文件，远程调用后台业务逻辑，并得到数据的过程。

    还有另一种方式更新ks的数据，而无须用到Joyrock项目的东东：

TopicStore = function(tid){
    TopicStore.superclass.constructor.call(this, {
        remoteSort: true,
        proxy:new Ext.data.HttpProxy({    url:'http://localhost:2433/KDG/PersonplatManager/JsonData/PersonplatData.aspx?typeId=' + tid}),
        reader: new Ext.data.JsonReader({
               totalProperty : 'totalCount',
               root : 'root',
               id : 'KdgPointId'
           },[
               {name: 'KdgPointId'},
               {name: 'KdgTitle'},
               {name: 'KdgKeyWord'},
               {name: 'KdgLabel'},
               {name: 'Remark'},
               {name: 'IsAvailible', type: 'int'},
               {name: 'StatusId', type: 'int'}
           ])
    });

    this.setDefaultSort('KdgPointId', 'desc');
};

Ext.extend(TopicStore, Ext.data.Store, {
    loadData : function(typeId){
        this.proxy = new Ext.data.HttpProxy({    url:'http://localhost:2433/KDG/PersonplatManager/JsonData/PersonplatData.aspx?typeId=' + typeId});
        this.load();
    },
    loadQuery : function(typeId, kdg_kd, kdg_tt, kdg_con){
        var url = 'http://localhost:2433/KDG/PersonplatManager/JsonData/PersonplatData.aspx?typeId=' + typeId;
        
        if(kdg_kd != "")
            url += '&KdgKeyWord=' + kdg_kd;
        if(kdg_tt != "")
            url += '&KdgTitle=' + kdg_tt;
        if(kdg_con != "")
            url += '&KdgContent=' + kdg_con;
        
        this.proxy = new Ext.data.HttpProxy({    url: url});
        this.load();
    }
});

    在新建TopicStore对象时候，就需要传入一个参数，TopicStore ts = new TopicStore(3);，更新数据，写了两个方法，loadData()与loadQuery()。在需要更新时候，调用这两个方法，并对应地传递参数即可。

    如此我们可以定义这样一个可编辑的表格了：

KtindexEditGrid.js

KtindexEditGrid = function(){
    
        // 列模型的定义
        var fm = Ext.form;
        var cm = new Ext.grid.ColumnModel([
                new Ext.grid.RowNumberer(),{
                       id:'MId',
                       align: 'right',
                       header: "关联序号",     // 表头
                       dataIndex: 'MId',            // 表数据字段
                       width: 80,
                       editor: new fm.TextField({
                               allowBlank: false,  // 是否允许为空
                               disabled : true       // 是否允许更改，true意味着你无法修改当前单元格的值
                       })
                },{
                       header: "知识类序号",
                       dataIndex: 'KId',
                       width: 80,
                       editor: new fm.TextField({
                               allowBlank: false,
                               disabled : true
                       })
                },{
                       header: "知识类名称",
                       dataIndex: 'KName',
                       width: 130,
                       editor: new fm.TextField({
                               allowBlank: false,
                               disabled : true
                       })
                },{
                       header: "索引目录",
                       dataIndex: 'IndexDirectory',
                       width: 160,
                       editor: new fm.TextField({
                               allowBlank: false
                       })
                }
        ]);
    
        // 底部Toolbar上的元素
        var kdgTypeIdHide = new fm.Hidden({id:'kdgTypeId'});  // 隐藏域
        var kdgTypeName = new fm.TextField({ disabled:true,width:120,id:'kdgTypeName' });
        var indexDir = new fm.TextField({ width:150,id:'indexDir'});
    
        // json-rpc 获取数据
        // KdgPoints是一个.ashx(一般程序文件)，它调用后台业务逻辑，得到DataTable，
        // 经过处理后返回符合json格式的数据
        var kdgPointAshx = new KdgPoints();
        var obData = kdgPointAshx.Get_KdgType_IndexDir_Mapping('');

       // 这里用到了前面定义的store了
        var store = new KeStore(obData);
    
        // 基类结构的定义
        KtindexEditGrid.superclass.constructor.call(this, {
                store: store,       // 数据源
                region:'center',
                cm: cm,             // 列模型
                bbar: [{              // 底部Toolbar，若想改为顶部，使用tbar属性
                        text: '知识类名称',
                        tooltip: '点击左边树更改文本框数值'
                },kdgTypeName,{
                        text: '索引目录',
                        tooltip: '索引文件放置目录'
                },indexDir,{
                        text: '新增',
                        tooltip: '添加关联',
                        handler: newRecord
                },{
                        text: '保存',
                        tooltip: '保存可编辑Grid的修改',
                        handler: save
                },kdgTypeIdHide]
        });

       // 上面handler属性会回调相应的函数，这个为了阐述方便，截断了....   在文章下半部分放上来
});

Ext.extend(KtindexEditGrid, Ext.grid.EditorGridPanel);  // 继承定义

    页面包含KtindexEditGrid.js后，便可以新建它的对象了。你可以将它作为items的一部分，添加到Ext布局里面去，同样调用render('grid-example')直接绘制到<div>上。

    剩下的就是回调函数的一些补充了：

/* ---------------------------- 新增事件 ----------------------------- */
    function newRecord()
    {
        if(kdgTypeIdHide.getValue() == '')
        {
            Ext.MessageBox.show({
                title:'提示',
                msg: '知识类不能为空,请单击左边树节点,设置它的值',
                buttons: Ext.Msg.OK
            });
            return;
        }
        
        if(indexDir.getValue() == '')
        {
            Ext.MessageBox.show({
                title:'提示',
                msg: '索引目录不能为空,请输入',
                buttons: Ext.Msg.OK
            });
            
            indexDir.focus();
            return;
        }
        
        Ext.MessageBox.confirm('提示', '确定添加记录?',doNewRecord);
    }
    
    function doNewRecord(btn)
    {
        if(btn == 'yes')
        {
            var kdgId = kdgTypeIdHide.getValue();
            var dir = indexDir.getValue();
            
            var jsonData = { 'KId':kdgId, 'IndexDirectory':dir }
            
            // json-rpc
            var kdgPointAshx = new KdgPoints();
            var flag = kdgPointAshx.Insert_KdgType_IndexDir_Mapping(jsonData);
            
            if(flag == true)
                Ext.MessageBox.show({
                    title:'提示',
                    msg: '保存成功',
                    buttons: Ext.Msg.OK
                });
            else
                Ext.MessageBox.show({
                    title:'提示',
                    msg: '保存失败',
                    buttons: Ext.Msg.OK
                });
            
            var data = kdgPointAshx.Get_KdgType_IndexDir_Mapping(kdgId);
            store.loadData(data);
        }
    }

 

    如果真的需要大量的用到Ext，Joyrock将是你的利器。