ext editGridPanel 动态头和数据
很久没有写技术文章了 杯具....最近一段时间没有心思去忙乎这些
最近正好在做一个Ext 项目
后台数据是从oracle agile 中抓取出来的
先看看截图吧
http://dl.iteye.com/upload/attachment/230205/8ed37c84-df4c-3091-b170-7d880848aaa3.jpg
editGridPanel 中的 ColumnModel 只是一个数据所以我们当然可以做成动态的
http://dl.iteye.com/upload/attachment/230207/bdf82173-8b14-31b5-8ad9-f0025b10c0a0.jpg
首先我们如果需要些一个 死的动态头 肯定是这样定义的
//我只是举个例子
var colModel=new Ext.data.ColumnModel({ header:'列1', dataIndex:'name' },{header:'列1', dataIndex:'name2'}, {header:'列1', dataIndex:'name3'}, {header:'列1', dataIndex:'name4'} );
OK那么行啊我们后台就可以传过来这样的数据
http://dl.iteye.com/upload/attachment/230220/60b7714d-3c54-3a3d-83f8-caa185e91821.jpg
我的后台是这样写的
然后我们通过一个Ajax 请求 得到这个json 数组
然后通过遍历这个 对象
就可以创建自己的一个动态头了
var configCol;
configCol.push({});
// Ajax start 请求显示头信息var headerUrl = contextPath + "/BatchHandleAction!findAllData.action";// 动态 Aajax 请求表格数据Ext.Ajax.request( {url : headerUrl,method : 'POST',params : {operationType : selectOpertionTypeVal,start : 0,limit : 100,status : selectStatusVal},success : function(rs, request) {if (isCollapse) {heigthGrid = document.documentElement.clientHeight - 60;} else {heigthGrid = document.documentElement.clientHeight - 250;}if (editGridPanel != null) {editGridPanel.destroy();}// 判断是否是同一个提交 是则不请求var result = rs.responseText;// 拿到结果集，此时为字符串var json = Ext.util.JSON.decode(result);// 将字符串转换为json类型sm = new Ext.grid.CheckboxSelectionModel();configCol = [ new Ext.grid.RowNumberer(), sm ];var dataIndex;var header;var editor;var type;arr = new Array();arr = oNumID;// alert(oNumID);configCol.push( {id : oNumID,header : 'Number',width : defaultColWidth,renderer : function(value, metatdata, record, rowIndex,colIndex, store) {return "<a href='" + record.data.url+ "' target='blank'>" + value + "</a>"},dataIndex : oNumID});// 添加一个 排序列configCol.push( {id : 'sortColumn',dataIndex : 'sortColumn',header : 'sortByEdit',sortable : true});var count = 0;// 组装表头for ( var i = 0; i < json.fields.length; ++i) {dataIndex = json.fields.dataIndex;header = json.fields.header;editor = json.fields.Editable;type = json.fields.Type;arr = dataIndex;// 如果此列是可编辑的列if (editor == 'Y') {// 判断可编辑的 控件是什么if ('MultiText' == type) {defaultColWidth = defaultColWidth * 2;editor = new Ext.form.TextField( {autoCreate : {tag : "textarea",rows : 4,autocomplete : "off"}});} else if ('List' == type) {editor = new Ext.form.ComboBox( {});} else if ('Date' == type) {editor = new Ext.form.DateField( {format : 'y-m-d'});} else {editor = new Ext.form.TextField();}configCol.push( {header : header,dataIndex : dataIndex,width : defaultColWidth,editor : editor});} else {configCol.push( {id : dataIndex,renderer : function(value) {return "<div class='desc'>" + value+ "</div>";},width : defaultColWidth,header : header,dataIndex : dataIndex})}count++;}// 添加批量审批驳回 下拉configCol.push( {header : 'operation',dataIndex : 'operation',editor : new Ext.form.ComboBox( {allowBlank : false,selectOnFocus : true,mode : 'local',triggerAction : 'all',editable : false,store : new Ext.data.SimpleStore( {data : [ [ "Approve" ], [ "Reject" ] ],fields : [ "value" ]}),name : 'approreject',displayField : 'value',listeners : {'select' : function() {// 设置// 批量审批驳回按钮可用btnApproveReject.enable();}}})});;arr = 'msg';// baseId = 'msg';arr = 'url';configCol.push( {id : 'url',width : defaultColWidth,header : 'url',dataIndex : 'url'});configCol.push( {id : 'msg',width : defaultColWidth,header : 'Update Message',dataIndex : 'msg'});// 设置表格表头cm = new Ext.grid.ColumnModel(configCol);// 设置默认可以排序cm.defaultSortable = true;}
页:
[1]