ExtJS GridPanel动态加载列
2012-08-20 11:19
316 查看
要实现动态更改GridPanel的列就必须先了解固定列是怎么弄出来的。GridPanel的列可以通过new Ext.grid.ColumnModel(columns)来创建,而这里的columns是一个JavaScript数组。由此可知,如果能够动态的更改这里的columns岂不OK了?
现在要求前3列是固定的,其后的列是根据所选中树节点的不同而不同。如果去为每一个节点创建一个新的GridPanel,一会让其hide,一会又让其show,那要写多少个啊…况且后面的几个动态列是要从数据库中查的。
那么我先创建一个有3个元素(固定列)的数组cm,在节点的点击事件中向服务器发送请求,在服务器端查询该节点下的动态列并返回数据。由于我的列不但要是动态的,而且这些列的编辑方式也要是动态的,如只能输入数据的input,多选的checkbox,单选的radio等等,所以我的返回数据还要带上标识值,根据这些值为其创建不同的editor,最后将其逐一push到cm中去。
虽然列已经有了,但是GridPanel上还是不会显示的,还需要调用一下GridPanel的reconfigure()将其重新绑定,reconfigure()方法接收两个参数,一个是store,一个是ColumnModel,因为节点被点击后GridPanel里面要显示的是当前节点下的数据,所以这里的store也同样需要重新绑定,绑定的时候在其baseParams中指定新的参数。
好了,列是动态的了,数据也显示出来了,点一下分页就又挂了!原来是忘了给PagingToolbar重新绑定store了,这些在GridPanel的API中都是有提示的。
现在要求前3列是固定的,其后的列是根据所选中树节点的不同而不同。如果去为每一个节点创建一个新的GridPanel,一会让其hide,一会又让其show,那要写多少个啊…况且后面的几个动态列是要从数据库中查的。
onTreeNodeClick:function(n){ var grid = this.grid; //根据传递过来的node,ajax请求服务器获取对应的动态列 Ext.Ajax.request({ url:"sample.cfc?method=getDynColumn", params:{node:n.id}, success:function(response, option){ //固定列 var cm = [ {header:"编号", mapping:"id", dataIndex:"id", width:65, menuDisabled:true}, {header:"名称", mapping:"name", dataIndex:"name", width:65, menuDisabled:true}, {header:"路径", mapping:"url", dataIndex:"url", width:65, menuDisabled:true} ]; var fd = ["id", "name", "url", "classID"]; var res = Ext.util.JSON.decode(response.responseText); var columns = res.columns; var fields = res.fields; var types = res.types; //判断具体使用哪种方式进行数据编辑,1为input,2为checkbox,3为radio for (var i = 0; i < types.length; i++) { var edit = null; fd.push(fields[i].name); if (types[i].type == 1) { edit = new Ext.form.TextField(); } else { if (types[i].type == 2) { edit = new Ext.ux.form.LovCombo({ store:new Ext.data.JsonStore({ method:"GET", url:"sample.cfc?method=getComboboxData", root:"data", totalProperty:"totalCount", id:"id", autoLoad:true, fields:["id", "text"]}), valueField:"id", displayField:"text", triggerAction:"all", editable:false }); } else { edit = new Ext.form.ComboBox({ store:new Ext.data.JsonStore({method:"GET", url:"sample.cfc?method=getComboboxData", root:"data", totalProperty:"totalCount", id:"id", autoLoad:true, fields:["id", "text"]}), valueField:"id", displayField:"text", triggerAction:"all", editable:false }); } } columns[i].editor = edit; cm.push(columns[i]); } //重新绑定store及column grid.reconfigure( new Ext.data.JsonStore({ url:"sample.cfc", root:"data", baseParams:{method:"getGridData", node:n.id}, totalProperty:"totalCount", id:"id", fields:fd }), new Ext.grid.ColumnModel(cm)); //重新加载数据 var store = grid.getStore(); grid.getBottomToolbar().bind(store); store.load({params:{start:0, limit:5}}); }}); }
那么我先创建一个有3个元素(固定列)的数组cm,在节点的点击事件中向服务器发送请求,在服务器端查询该节点下的动态列并返回数据。由于我的列不但要是动态的,而且这些列的编辑方式也要是动态的,如只能输入数据的input,多选的checkbox,单选的radio等等,所以我的返回数据还要带上标识值,根据这些值为其创建不同的editor,最后将其逐一push到cm中去。
虽然列已经有了,但是GridPanel上还是不会显示的,还需要调用一下GridPanel的reconfigure()将其重新绑定,reconfigure()方法接收两个参数,一个是store,一个是ColumnModel,因为节点被点击后GridPanel里面要显示的是当前节点下的数据,所以这里的store也同样需要重新绑定,绑定的时候在其baseParams中指定新的参数。
好了,列是动态的了,数据也显示出来了,点一下分页就又挂了!原来是忘了给PagingToolbar重新绑定store了,这些在GridPanel的API中都是有提示的。
相关文章推荐
- Extjs 4 tabpanel动态加载reconfigure的grid
- ExtJS GridPanel动态加载列
- ExtJs 实现动态加载grid完整示例
- [EXTJs]TabPanel动态生成,加载组件时,组件不能正常显示的解决办法
- EXTJS中Gridpanel加载checkbox的使用方法
- ExtJs 实现动态加载grid完整示例
- ExtJS动态改变grid的store的url地址,重新加载grid的数据
- ExtJS 4.1 TabPanel动态加载页面并执行脚本
- Extjs3.2+Json lib动态树与GridPanel简单展现
- ExtJS4.X TreeStore,TreePanel 动态加载菜单和Tab页
- Extjs4.2 TreePanel+Asp.net mvc 动态加载节点
- Extjs 动态改变grid的store加载路由
- EXTJS学习系列提高篇:第一篇(转载)作者殷良胜,用EXT2.2+vs.2008.net+C#动态生成GridPanel
- extjs在panel中动态添加模板并加载数据
- ExtJs 实现动态加载grid完整示例
- 在写extjs中一个panel里放了3个grid,但就是不显示页面,后台给出数据,前台也有加载数据
- Extjs 动态改变grid的store加载路由
- extjs treepanel 动态的加载节点,选中父节点时,同时选中下面的子节点
- Extjs中左边treepanel右边panel动态加载jsp页面