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

声明：这个并不是所谓发明创举，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);
　　}
　}