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将是你的利器。