extjs动态树 动态grid 动态列
浏览数：56 /
时间：2015年06月09日
由于项目需要做一个动态的extjs树、列等等，简而言之，就是一个都是动态的加载功能，
自己琢磨了半天，查各种资料，弄了将近两个星期，终于做出来了
首先，想看表结构，我的这个功能需要主从两张表来支持
代码目录表：
CREATE TABLE SYS_T01_CODECONTENT ( ID NUMBER NOT NULL, PID NUMBER NOT NULL, TABLENAME VARCHAR2(50 BYTE), ZH_CN VARCHAR2(200 BYTE), ENABLE CHAR(1 BYTE) );
代码结构表：
CREATE TABLE FTGM.SYS_T01_CODESTRUCT ( ID NUMBER, TABLENAME VARCHAR2(20 BYTE), COLUMNS VARCHAR2(20 BYTE), ZH_CN VARCHAR2(20 BYTE), ENABLE CHAR(1 BYTE), PRECISION NUMBER, TYPE VARCHAR2(20 BYTE) );
然后是程序部分了，
最开始先加载一个树
<script> Ext.onReady(function () { Ext.BLANK_IMAGE_URL = ‘Scripts/ExtJS/resources/images/default/s.gif‘; Ext.QuickTips.init(); //异步加载根节点 var root = new Ext.tree.AsyncTreeNode({ text: ‘所有表‘, draggable: false, id: ‘0‘ }); //加载数据 var treeloader = new Ext.tree.TreeLoader({ dataUrl: ‘CodeManager.aspx?opt=GetTree‘ }); //树 var tree = new Ext.tree.TreePanel({ rootVisible: true, layout: ‘fit‘, width: document.documentElement.clientWidth * 0.2, height: document.documentElement.clientHeight, autoScroll: true, renderTo: ‘tree‘, animate: true, enableDD: false, title: ‘代码目录表‘, root: root, loader: treeloader }); //双击事件 tree.on("dblclick", function (node) { //节点ID node = node.id; //全局变量 var data; //grid中取出的字段对象 var field = Array(); //form表单item var items = ‘‘; var value = ‘‘; var params = ‘‘; var rowVal = ‘‘; //添加动态列 这里才是加载动态grid的关键 var addColumn = function () { this.fields = ‘‘; //列文件解析对象 this.columns = ‘‘; //列文件列头对象 this.addColumns = function (name, caption) { //私有函数 if (this.fields.length > 0) { this.fields += ‘,‘; } if (this.columns.length > 0) { this.columns += ‘,‘; } this.fields += ‘{name:"‘ + name + ‘"}‘; this.columns += ‘{header:"‘ + caption + ‘",dataIndex:"‘ + name + ‘",width:100,sortable:true}‘; }; }; var createGrid = function () { //赋值给列 var cm = new Ext.grid.ColumnModel(eval(‘([‘ + data.columns + ‘])‘)); //默认排序 cm.defaultSortable = true; //数据字段 var fields = eval(‘([‘ + data.fields + ‘])‘); //加载数据源 var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ method: ‘GET‘, url: "CodeManager.aspx?opt=GetData&&node=" + node + "" }), reader: new Ext.data.JsonReader({ totalProperty: "total", root: "rows", fields: fields, successProperty: ‘success‘ }) }); //重新加载数据 store.load({ params: { start: 1, limit: 20} }); //分页工具栏 var pagingBar = new Ext.PagingToolbar({ displayInfo: true, emptyMsg: "没有数据显示", displayMsg: "显示从{0}条数据到{1}条数据，共{2}条数据", store: store, pageSize: 20 }); }); </script>
在树的代码部分加载grid
var grid = new Ext.grid.GridPanel({ title: "代码结构表", cm: cm, id: "content_panel", renderTo: "content", frame: true, border: true, layout: "fit", width: document.documentElement.clientWidth * 0.8, height: document.documentElement.clientHeight, store: store, pageSize: 20, viewConfig: { forceFit: true }, bbar: pagingBar, tbar: [ { text: ‘新增‘, id: ‘btn_add‘, iconCls: ‘newIcon‘, handler: function Add() { $("#win_new").html(""); items = ""; for (var i = 0; i < grid.colModel.config.length; i++) { field = grid.colModel.config[i]; items += "{fieldLabel: ‘" + field.header + "‘,name: ‘" + field.dataIndex + "‘,id: ‘" + field.dataIndex + "‘,width: 180},"; } //截取以逗号结尾之前的部分 items = "[" + items.substring(0, items.lastIndexOf(‘,‘)) + "]"; //将字符串转换成JSON对象 items = eval(items); //新增表单 var form = new Ext.form.FormPanel({ //创建表单面板 labelAlign: ‘center‘, //水平对齐方式 layout: ‘form‘, //布局模式 id: ‘form_xg‘, //设置ID labelWidth: 100, //宽度 frame: true, //是否显示frame defaultType: ‘textfield‘, //默认文本类型 defaults: { allowBlank: false }, //默认是否允许为空 autoHeight: true, //自适应高度 autoWidth: true, //自适应宽度 bodyStyle: ‘padding:0 0 10px 30px;‘, //设置窗体样式 items: items }); //新增窗体 var win_new = new Ext.Window({ el: ‘win_new‘, layout: ‘form‘, resizable: false, title: ‘<center>新增代码结构</center>‘, constrain: true, constrainHeader: true, animateTarget: ‘target‘, modal: false, autoScroll: true, autowidth: true, autoHeight: true, closeAction: ‘hide‘, defaultType: ‘textfield‘, items: [form], buttonAlign: ‘center‘, defaultButton: ‘0‘, buttons: [ { text: ‘确定‘, align: ‘center‘, handler: function () { //遍历新增表单 value = ""; form.items.each(function (item, index, length) { value += item.initialConfig.name + ":"; value += "‘" + Ext.getCmp(item.initialConfig.id).getValue() + "‘,"; }); value = "{" + value.substring(0, value.lastIndexOf(‘,‘)) + "}"; Ext.Ajax.request({ url: "CodeManager.aspx?opt=New&&node=" + node + "&&codeStruct=" + value + "", method: "POST", async: false, success: function (response) { if (response.responseText != 0) { Ext.Msg.alert("提示信息", "添加成功！"); win_new.hide(); grid.store.reload(); } else { Ext.Msg.alert("提示信息", "添加失败！"); } }, failure: function () { win_new.hide(); Ext.Msg.alert("提示信息", "惟一字段数据重复或数据为空！"); } }); } } , { text: ‘取消‘, align: ‘center‘, tooltip: ‘退出并关闭当前窗口‘, handler: function () { win_new.hide(); } } ] }); win_new.show(); } }, { text: ‘修改‘, id: ‘btn_sub‘, iconCls: ‘modIcon‘, handler: function Modify() { var rows = grid.getSelectionModel().getSelections(); if (rows.length == 0) { Ext.Msg.alert("提示信息", ‘请至少选择一条记录‘); return; } $("#win_update").html(""); items = ""; for (var i = 0; i < grid.colModel.config.length; i++) { field = grid.colModel.config[i]; items += "{fieldLabel: ‘" + field.header + "‘,name: ‘" + field.dataIndex + "_update‘,id: ‘" + field.dataIndex + "_update‘,width: 180},"; } //截取以逗号结尾之前的部分 items = "[" + items.substring(0, items.lastIndexOf(‘,‘)) + "]"; //将字符串转换成JSON对象 items = eval(items); //修改表单 var form = new Ext.form.FormPanel({ //创建表单面板 labelAlign: ‘center‘, //水平对齐方式 layout: ‘form‘, //布局模式 id: ‘form_modify‘, //设置ID labelWidth: 100, //宽度 frame: true, //是否显示frame defaultType: ‘textfield‘, //默认文本类型 defaults: { allowBlank: false }, //默认是否允许为空 autoHeight: true, //自适应高度 autoWidth: true, //自适应宽度 bodyStyle: ‘padding:0 0 10px 30px;‘, //设置窗体样式 items: items }); //表单循环 form.items.each(function (item) { var rec = rows[0].json; //数据结构循环 for (var key in rec) { if (item.id == (key + "_update")) { Ext.getCmp(key + "_update").setValue(rec[key]); }; } }); //修改窗体 var win_update = new Ext.Window({ el: ‘win_update‘, layout: ‘form‘, resizable: false, title: ‘<center>修改结构表信息</center>‘, constrain: true, constrainHeader: true, animateTarget: ‘target‘, modal: false, autoScroll: true, autowidth: true, autoHeight: true, closeAction: ‘hide‘, defaultType: ‘textfield‘, items: [form], buttonAlign: ‘center‘, defaultButton: ‘0‘, buttons: [ { text: ‘确定‘, align: ‘center‘, handler: function () { //遍历修改表单,获取表单的值 value = ""; form.items.each(function (item) { value += item.initialConfig.name + ":"; value += "‘" + Ext.getCmp(item.initialConfig.id).getValue() + "‘,"; }); value = "{" + escape(value.substring(0, value.lastIndexOf(‘,‘))) + "}"; rowVal = ‘‘; var name = rows[0].json; for (var key in name) { rowVal += key + ":" + name[key] + ","; } rowVal = "{" + escape(rowVal.substring(0, rowVal.lastIndexOf(‘,‘))) + "}"; Ext.Ajax.request({ url: "CodeManager.aspx?opt=Modify&&node=" + node + "&&codeStruct=" + value + "&&rowVal=" + rowVal + "", method: "POST", async: false, success: function (response) { if (response.responseText != 0) { Ext.Msg.alert("提示信息", "修改成功！"); win_update.hide(); grid.store.reload(); } else { win_update.hide(); Ext.Msg.alert("提示信息", "修改失败！"); } }, failure: function () { win_update.hide(); Ext.Msg.alert("提示信息", "修改的数据不符合规范！"); } }); } } , { text: ‘取消‘, align: ‘center‘, tooltip: ‘退出并关闭当前窗口‘, handler: function () { win_update.hide(); } } ] }); win_update.show(); } }, { text: ‘删除‘, id: ‘btn_del‘, iconCls: ‘delIcon‘, handler: function Delete() { //获取行对象 var rows = grid.getSelectionModel().getSelections(); if (rows.length == 0) { Ext.Msg.alert("提示信息", ‘请至少选择一条记录‘); return; } //遍历选中行 rowVal = ‘‘; var name = rows[0].json; for (var key in name) { rowVal += key + ":" + name[key] + ","; } rowVal = "{" + rowVal.substring(0, rowVal.lastIndexOf(‘,‘)) + "}"; Ext.Msg.confirm(‘请确认‘, ‘您确定要删除这些信息吗?‘,function (button, text) { if (button == "yes") { Ext.Ajax.request({ url: "CodeManager.aspx?opt=Del&&node=" + node + "&&rowVal=" + rowVal + "", method: "POST", async: false, buttons: { yes: ‘确定‘, no: ‘取消‘ }, success: function (response) { if (response.responseText != 0) { Ext.Msg.alert("提示信息", "删除成功！"); grid.store.reload(); } else { Ext.Msg.alert("提示信息", "删除失败！"); } } }); } }); } } ] }); }; //请求列、节点，返回列和数据 var params = { "node": node, "opt": "GetColumn" }; Ext.Ajax.request({ //回传请求 url: "CodeManager.aspx", //回传地址 params: params, //回传参数 success: function (response, option) { if (response.responseText == "") { return; } data = new addColumn(); //JSON格式化返回结果（字符串类型）转换成JSON对象 var res = Ext.util.JSON.decode(response.responseText); //循环JSON对象,取出特定列 for (var i = 0; i < res.length; i++) { var rec = res[i]; data.addColumns(rec.COLUMNS, rec.ZH_CN); } //清除代码表 $("#content").html(‘‘); $("#win_new").html(‘‘); createGrid(); }, failure: function () { Ext.Msg.alert("消息", "查询出错，请打开数据库查看数据表名是否正确?", "谢谢"); } }); });
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
