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日