extjs动态树 动态grid 动态列

由于项目需要做一个动态的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 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("消息", "查询出错，请打开数据库查看数据表名是否正确?", "谢谢");
                    }
                });
            });