sdbrk
2014-05-05 16:38:03
Extjs动态生成表头
var cm = [{
header : "编号",
dataIndex : "id",
width : 65
}, {
header : "名称",
dataIndex : "name",
width : 65
}, {
header : "路径",
dataIndex : "url",
width : 65
}]
var colModel = new Ext.grid.ColumnModel({
columns : cm
});
var fd = ["id", "name", "url"];
var store = new Ext.data.JsonStore({
fields : fd
})
var grid = new Ext.grid.GridPanel({
cm : colModel,
store : store,
tbar : [{
xtype : "combo",
id : 'my_combo',
triggerAction : "all",
store : ["新增列","更换列"],
mode : 'local',
resizable : true,
editable: false,
lazyRender : true,
width : 100
},"-",{
text : "生成",
icon : "images/icons/add.png",
cls : "x-btn-text-icon",
handler : function() {
var temp = Ext.getCmp('my_combo').getValue();
if(temp == null || temp == "") return;
var newfd="";
var newcm="";
if(temp == "新增列"){//在原有列的基础上追加新的列
newfd = fd;
newcm = cm;
var res = {//要添加的列信息,可以动态获取
fields : [{
name : "sex"
}],
columns : [{
header : '性别',
dataIndex : "sex",
width : 65
}]
};
var fields = res.fields;
var columns = res.columns;
for (var i = 0; i < fields.length; i++) {//自己可以写控制不重复追加
newfd.push(fields[i]);
newcm.push(columns[i]);
}
}else if(temp == "更换列"){//更换表格中所有的列
var res = {//要更换的列信息,可以动态获取
fields : ["number", "age", "address"],
columns : [{
header : '号码',
dataIndex : "number",
width : 80
},{
header : '年龄',
dataIndex : "age",
width : 80
},{
header : '地址',
dataIndex : "address",
width : 80
}]
};
newfd = res.fields;
newcm = res.columns;
}
// 重新绑定store及column
newStore = new Ext.data.JsonStore({
fields : newfd
});
var newColumnModel = new Ext.grid.ColumnModel(newcm);
grid.reconfigure(newStore , newColumnModel);//使用新的Store和ColumnModel并刷新
//列变动之后,就可以做数据的加载了,加载的就是对应新的列的数据了。
}
}]
})
var myWin = new Ext.Window({
title:"动态改变ColumnModel",
width : '600',
height : 500,
frame : true,
layout : 'fit',
items : [grid]
});
myWin.show();
由最代码官方编辑于2016-6-26 9:46:17
猜你喜欢
请下载代码后再发表评论
相关代码
- 网上寻求到的聊天代码,用的技术是extjs,jetty8
- 原 ExtJS4.2.1 MVC登录小示例,不带数据库,静态判定
- js前端框架Extjs项目实例
- extjs4 tree使用实例
- 证 EXTJS入门教程及其框架搭建
- 精 ExtJS开发网页在线聊天源码
- 原 java+extjs+SWFUpload实现的多文件上传demo源码实例,可以显示进度条
- extjs后台简单布局例子
- 原 extjs读取解析后端json格式数据并显示条形图
- extjs4 单文件上传实例
- extjs4 grid java使用实例
- 原证 Extjs2.0搭建的一个简易后台管理系统demo教程,能更换主题,可直接不用部署在Tomcat上就能运行
最近下载
最近浏览
chongminzheng LV1
2024年7月13日
msstat LV5
2023年11月9日
fellowfun LV12
2023年4月28日
1358849392 LV21
2022年11月11日
fy0088 LV2
2022年9月25日
ttttt111
2022年6月24日
暂无贡献等级
zhuchengqi
2022年4月18日
暂无贡献等级
微信网友_5862509096882176 LV1
2022年3月7日
白墨雪Hiya
2021年12月15日
暂无贡献等级
45436683 LV8
2021年11月19日




