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


用户名：	密码：
	飞诺网	加入收藏

飞诺网网站开发 VBScript ASP Asp.net Jsp php XML CGI-Perl 搜索引擎 ajax web技术

.net系列教程 .net实例 .Net技术文档

您当前的位置：飞诺网 >> .net >> .net实例

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

www.diybl.com 时间： 2008-04-29 作者：佚名编辑：本站点击： [ 评论 ]

本文基于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将是你的利器。