声明:这个并不是所谓发明创举,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);
}
}
优点:这样的设计得到的是一个个包含各种特性的对象,也就是说,只要页面引入相应的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);
}
}