ExtJs4(5)——左边树，右边表结构

先上图：

这部分没什么好说的，直接上代码吧

PageVar.js

var pageVar={}; //----------------------------------------与tree相关的参数设置---------------------------------------- pageVar.addNodePanelTitle = '添加节点'; //增加节点窗口 pageVar.treeTitle = '常数项'; //树的标题 pageVar.treeStoreUrl = '/platForm/testData/sysConst/tree-data.json'; //树的Store的url pageVar.treeNodeIdColumn = 'SYSCST_ID'; //树节点的Id列的名称 pageVar.treeNodeFidColumn = 'SYSCST_FID'; //树的父节点的Id列的名称 pageVar.onClickID=0; pageVar.buttons = [ //树的按钮 { text: '增加结点', minWidth: 70, id: 'addNode', disabled: false, handler: function() { //点击后，将弹出一个窗口，需要填入所需的内容。根据所填内容生成子结点 if( addNodePanel == null ) { addNodePanel = new AddNodePanel(); } addNodePanel.show(); } },{ text: '删除', id: 'deleteNode', disabled: false, minWidth: 70, handler: function() { deleteNode( pageVar.fatherNode ); } },{ text: '修改', id: 'modifyNode', disabled: false, minWidth: 70, handler: function() { var modifyText = function(btn, text) { if( btn == 'ok' ) { if ( text != null && text.trim() != '' ) { pageVar.currentNode.raw.text = text; } else { Ext.MessageBox.prompt('提示', '输入值不能为空，请重新输入该结点的名称:',showResultText); } } }; Ext.MessageBox.prompt('修改结点信息', '请输入该结点的新名称:', modifyText); } }]; //----------------------------------------与grid相关的参数设置---------------------------------------- pageVar.alertPanelTitle = '添加/修改菜单'; //弹出新增/修改窗口的标题 pageVar.gridTitle = '常数项设置'; //表的标题 pageVar.winTitle = '配置常数项'; //整体窗口的标题 pageVar.ajaxRequestUrl = ''; //连接ajax的url pageVar.gridStoreUrl = 'tree-grid.json'; //表的Store的url pageVar.gridStoreRootName = 'sys_const'; pageVar.gridModelName = 'const'; //其中数字1代表有效，0代表无效 pageVar.bButtons = [ 1, 1, 1, 1 ]; //bButtons[0]为添加按钮，bButtons[1]为修改，bButtons[2]为查询，bButtons[3]为删除; //gird的columns pageVar.columns = [ {text:'常数信息ID', width:100, dataIndex:'SYSCST_ID', hidden: true}, {text:'常数编码', width:100, dataIndex:'SYSCST_CODE', hidden: false}, {text:'常数节点父ID', width:100, dataIndex:'SYSCST_FID', hidden: true}, {text:'顺序号', width:100, dataIndex:'SYSCST_NO', hidden: false}, {text:'文字编号', width:100, dataIndex:'SYSCST_CHARNO', hidden: false}, {text:'常数名称', width:100, dataIndex:'SYSCST_NAME', hidden: false}, {text:'常数SN', width:100, dataIndex:'SYSCST_SN', hidden: false}, {text:'常数级别', width:100, dataIndex:'SYSCST_LEV', hidden: false}, {text:'常数说明', width:100, dataIndex:'SYSCST_NOTE', hidden: false}, {text:'文字项1', width:100, dataIndex:'SYSCST_TEXT1', hidden: false}, {text:'文字项2', width:100, dataIndex:'SYSCST_TEXT2', hidden: false}, {text:'数字项1', width:100, dataIndex:'SYSCST_NUM1', hidden: false}, {text:'数字项2', width:100, dataIndex:'SYSCST_NUM2', hidden: false}, //{text:'更新标志', width:100, dataIndex:'SYSCST_UPFLAG', hidden: false}, { xtype: 'templatecolumn', text: '更新标志', flex: 1, sortable: true, dataIndex: 'SYSCST_UPFLAG', align: 'center', width:150, //add in the custom tpl for the rows tpl: Ext.create('Ext.XTemplate', '{SYSCST_UPFLAG:this.formatFlag}', { formatFlag: function(v) { if (v == 0) { return '允许'; } else { return '不允许'; } } }) }, //{text:'插入标志', width:100, dataIndex:'SYSCST_INFLAG', hidden: false}, { xtype: 'templatecolumn', text: '插入标志', flex: 1, sortable: true, dataIndex: 'SYSCST_INFLAG', align: 'center', width:150, //add in the custom tpl for the rows tpl: Ext.create('Ext.XTemplate', '{SYSCST_INFLAG:this.formatFlag}', { formatFlag: function(v) { if (v == 0) { return '允许'; } else { return '不允许'; } } }) }, // {text:'删除标志', width:100, dataIndex:'SYSCST_DELFLAG', hidden: false}, { xtype: 'templatecolumn', text: '删除标志', flex: 1, sortable: true, dataIndex: 'SYSCST_DELFLAG', align: 'center', width:150, //add in the custom tpl for the rows tpl: Ext.create('Ext.XTemplate', '{SYSCST_DELFLAG:this.formatFlag}', { formatFlag: function(v) { if (v == 0) { return '允许'; } else { return '不允许'; } } }) }, {text:'备注', width:100, dataIndex:'SYSCST_REMARK', hidden: false}, // {text:'可见状态', width:100, dataIndex:'SYSCST_STATE', hidden: false} { xtype: 'templatecolumn', text: '可见状态', flex: 1, sortable: true, dataIndex: 'SYSCST_STATE', align: 'center', width:180, //add in the custom tpl for the rows tpl: Ext.create('Ext.XTemplate', '{SYSCST_STATE:this.formatFlag}', { formatFlag: function(v) { if (v == 1) { return '超级用户可见'; } else { return '一般用户可见'; } } }) } ]; //grid中Store的模型 Ext.define(pageVar.gridModelName,{ extend: 'Ext.data.Model', fields: [ 'SYSCST_ID', //常数信息ID 'SYSCST_CODE', //常数编码 'SYSCST_FID', //常数节点父ID 'SYSCST_NO', //顺序号 'SYSCST_CHARNO', //文字编号 'SYSCST_NAME', //常数名称 'SYSCST_SN', //常数SN 'SYSCST_LEV', //常数级别 'SYSCST_NOTE', //常数说明 'SYSCST_TEXT1', //文字项1 'SYSCST_TEXT2', //文字项2 'SYSCST_NUM1', //数字项1 'SYSCST_NUM2', //数字项2 'SYSCST_UPFLAG', //更新标志 'SYSCST_INFLAG', //插入标志 'SYSCST_DELFLAG', //删除标志 'SYSCST_REMARK', //备注 'SYSCST_STATE' //可见状态 ] }); //--------------------------Panel参数设置----------------------------- pageVar.SRC_LOC_Y = 5; //Panel中item项的起始点的x pageVar.SRC_LOC_X = 5; //Panel中item项的起始点的y pageVar.EACH_DIST_Y = 30; //上下两个Item之间的距离 pageVar.FIELD_WIDTH = 60; //item项的默认长度 pageVar.vWidth=210; //标签的整体宽度 pageVar.vFieldW=210; //标签空白内容的宽度 pageVar.LABEL_WIDTH = 90; //item项的标签的默认宽度 pageVar.vOneLineWidth = 2 * pageVar.vWidth; //一行只放置一个标签时，标签的长度 pageVar.vPanelW = pageVar.vOneLineWidth + 65; //--------------------------开始函数----------------------------- function initPage(){ initLocalExt(); tree_grid = new TreeGrid(); }
alertPanelTree.js

Ext.require([ 'Ext.grid.*', 'Ext.toolbar.Paging', 'Ext.data.*' ]); //用来修改和添加的菜单 Ext.define('NodePanel', { extend : 'Ext.form.Panel', layout: 'absolute', //该panel的布局 defaultType: 'textfield', //该panel中Item项的默认类型 border: false, //是否显示边框 frame: true, //是否显示帧 height: 150, //该panel的高度 autoScroll: true, //允许当内容超出高度时，自动产生滚动条 initComponent: function() { //节点类型 pageVar.isChildStore = eval("[{'value':'0', 'text':'子结点'},{'value':'1', 'text':'兄弟节点'}]"); var isChildStore = Ext.create('Ext.data.Store', { fields: ['value', 'text'], data:pageVar.isChildStore }); var SRC_LOC_Y = 0; //Panel中item项的起始点的x var SRC_LOC_X = 5; //Panel中item项的起始点的y var EACH_DIST_Y = 30; //上下两个Item之间的距离 var FIELD_WIDTH = 60; //item项的默认长度 var LABEL_WIDTH = 70; //item项的标签的默认宽度 var count = -1; //用来记录panel中的行数，便于排版 this.items = [ //为该panel添加内容 { xtype: 'textfield', fieldLabel: '节点名称', allowBlank: false, id: 'nodeName', fieldWidth: 150, width: 150, labelWidth: LABEL_WIDTH, x: SRC_LOC_X, y: SRC_LOC_Y + EACH_DIST_Y * ( ++count ), anchor: '-5' }, { xtype: 'textfield', fieldLabel: '节点ID', allowBlank: false, id: 'nodeId', fieldWidth: 150, labelWidth: LABEL_WIDTH, width: 150, x:SRC_LOC_X, y: SRC_LOC_Y + EACH_DIST_Y * ( ++count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { store: isChildStore, queryMode: 'local', displayField: 'text', valueField: 'value', xtype: 'combobox', fieldLabel: '节点类型', allowBlank: false, id: 'isChild', fieldWidth: 150, width: 150, labelWidth: LABEL_WIDTH, x: SRC_LOC_X, y: SRC_LOC_Y + EACH_DIST_Y * ( ++count ), anchor: '-5' } ]; this.callParent(arguments); } }); //添加节点的Panel var addNodePanel = null; AddNodePanel = Ext.extend(Ext.util.Observable,{ alertWin : null, alertPanel : null, field : null, //放置弹出窗口需要的变量 constructor:function() { this.alertPanel = new NodePanel; this.alertWin = Ext.create('Ext.window.Window', { modal:true, title: pageVar.addNodePanelTitle, layout: 'fit', width: 230, height: 200, items: this.alertPanel , constrain:true, shrinkWrap:3, autoScroll: true, closeAction:'hide', buttons: [ //在窗口中增加按钮 { text: '确定', minWidth:70, scope:this, handler: this.save }, { text: '取消', minWidth: 70, scope:this, handler: this.cancel }] }); }, //关闭窗口 cancel:function(){ this.alertWin.hide(); }, //展示窗口 show: function() { this.reset(); this.alertWin.show(); }, //重置窗口 reset: function() { if ( this.field == null ) { this.initialField(); } this.field.var_nodeName.setValue(''); this.field.var_nodeId.setValue(''); this.field.var_isChild.setValue(''); this.alertWin.show(); }, //初始化field initialField: function() { this.field = {}; this.field.var_nodeName = Ext.getCmp( 'nodeName' ); this.field.var_nodeId = Ext.getCmp( 'nodeId' ); this.field.var_isChild = Ext.getCmp( 'isChild' ); }, //保存新建的节点 save:function() { if( this.field == null ) { this.initialField(); } //新建节点 var newNode = { text: this.field.var_nodeName.getValue(), id: this.field.var_nodeId.getValue(), leaf: true }; if( this.field.var_isChild.getValue() == 0 ) { //判断新增的节点时选中节点的子结点还是兄弟节点，0为子结点，1为兄弟节点 if ( pageVar.currentNode.isLeaf() ) { pageVar.currentNode.raw.leaf = false; //如果选中节点为叶子节点的话，使其变成非叶子节点 } pageVar.currentNode.appendChild( newNode ); } else { pageVar.currentNode.parentNode.appendChild( newNode ); } this.alertWin.hide(); } });
alertPanelGrid.js

Ext.require([ 'Ext.grid.*', 'Ext.toolbar.Paging', 'Ext.data.*' ]); var modifyWin = null; //-------------------------------用来修改和添加的菜单的Panel的详细内容------------------------------- Ext.define('MyFormPanel', { extend : 'Ext.form.Panel', layout: 'absolute', //该panel的布局 defaultType: 'textfield', //该panel中Item项的默认类型 border: false, //是否显示边框 frame: true, //是否显示帧 autoScroll: true, //允许当内容超出高度时，自动产生滚动条 initComponent: function() { //更新标志 pageVar.SYSCST_UPFLAGStore = eval("[{'value':'0', 'text':'允许'},{'value':'1', 'text':'不允许'}]"); var SYSCST_UPFLAGStore = Ext.create('Ext.data.Store', { fields: ['value', 'text'], data:pageVar.SYSCST_UPFLAGStore }); //插入标志 pageVar.SYSCST_INFLAGStore = eval("[{'value':'0', 'text':'允许'},{'value':'1', 'text':'不允许'}]"); var SYSCST_INFLAGStore = Ext.create('Ext.data.Store', { fields: ['value', 'text'], data:pageVar.SYSCST_INFLAGStore }); //删除标志 pageVar.SYSCST_DELFLAGStore = eval("[{'value':'0', 'text':'允许'},{'value':'1', 'text':'不允许'}]"); var SYSCST_DELFLAGStore = Ext.create('Ext.data.Store', { fields: ['value', 'text'], data:pageVar.SYSCST_DELFLAGStore }); //可见状态 pageVar.SYSCST_STATEStore = eval("[{'value':'1', 'text':'admin用户可操作'}]"); var SYSCST_STATEStore = Ext.create('Ext.data.Store', { fields: ['value', 'text'], data:pageVar.SYSCST_STATEStore }); var count = -1; //用来记录panel中的行数，便于排版 this.items = [ //为该panel添加内容 { xtype: 'textfield', fieldLabel: '常数信息ID', allowBlank: false, disabled: true, id: 'SYSCST_ID', fieldWidth: pageVar.vFieldW, width: pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { xtype: 'textfield', fieldLabel: '常数编码', allowBlank: false, id: 'SYSCST_CODE', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width: pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X + pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { xtype: 'textfield', fieldLabel: '父ID', allowBlank: false, id: 'SYSCST_FID', fieldWidth: pageVar.vFieldW, width:pageVar.vWidth, disabled: false, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { xtype: 'textfield', fieldLabel: '顺序号', allowBlank: false, id: 'SYSCST_NO', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width:pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X +pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { xtype: 'textfield', fieldLabel: '文字编号', allowBlank: false, id: 'SYSCST_CHARNO', fieldWidth: pageVar.vFieldW, width:pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { xtype: 'textfield', fieldLabel: '常数名称', allowBlank: false, id: 'SYSCST_NAME', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width:pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X +pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { xtype: 'textfield', fieldLabel: '常数SN', allowBlank: false, id: 'SYSCST_SN', fieldWidth: pageVar.vFieldW, width:pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { xtype: 'textfield', fieldLabel: '常数级别', allowBlank: false, id: 'SYSCST_LEV', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width:pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X +pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { xtype: 'textfield', fieldLabel: '常数说明', allowBlank: false, id: 'SYSCST_NOTE', fieldWidth: pageVar.vFieldW, width:pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { xtype: 'textfield', fieldLabel: '文字项1', allowBlank: false, id: 'SYSCST_TEXT1', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width:pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X +pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { xtype: 'textfield', fieldLabel: '文字项2', allowBlank: false, id: 'SYSCST_TEXT2', fieldWidth: pageVar.vFieldW, width:pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { xtype: 'textfield', fieldLabel: '数字项1', allowBlank: false, id: 'SYSCST_NUM1', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width:pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X +pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { xtype: 'textfield', fieldLabel: '数字项2', allowBlank: false, id: 'SYSCST_NUM2', fieldWidth: pageVar.vFieldW, width:pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { store: SYSCST_UPFLAGStore, queryMode: 'local', displayField: 'text', valueField: 'value', xtype: 'combobox', fieldLabel: '更新标志', allowBlank: false, id: 'SYSCST_UPFLAG', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width:pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X +pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { store: SYSCST_INFLAGStore, queryMode: 'local', displayField: 'text', valueField: 'value', xtype: 'combobox', fieldLabel: '插入标志', allowBlank: false, id: 'SYSCST_INFLAG', fieldWidth: pageVar.vFieldW, width:pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { store: SYSCST_DELFLAGStore, queryMode: 'local', displayField: 'text', valueField: 'value', xtype: 'combobox', fieldLabel: '删除标志', allowBlank: false, id: 'SYSCST_DELFLAG', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width:pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X +pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { xtype: 'textfield', fieldLabel: '备注', allowBlank: false, id: 'SYSCST_REMARK', fieldWidth: pageVar.vFieldW, width:pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { store: SYSCST_STATEStore, queryMode: 'local', displayField: 'text', valueField: 'value', xtype: 'combobox', fieldLabel: '可见状态', allowBlank: false, id: 'SYSCST_STATE', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width:pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X +pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' } ]; this.callParent(arguments); } }); //-------------------------------弹出修改/添加窗口------------------------------- ModifyWin = Ext.extend(Ext.util.Observable,{ alertWin : null, alertPanel : null, field : null, //放置弹出窗口需要的变量 constructor:function() { this.alertPanel = new MyFormPanel; this.alertWin = Ext.create('Ext.window.Window', { modal:true, title: pageVar.alertPanelTitle, layout: 'fit', width: pageVar.vPanelW, height: pageVar.vPanelH, items: this.alertPanel , constrain:true, shrinkWrap:3, autoScroll: true, closeAction:'hide', buttons: [ //在窗口中增加按钮 { text: '保存', minWidth:70, id: 'savaButton', scope:this, handler:this.save }, { text: '重置', minWidth: 70, scope:this, handler: this.reset }, { text: '取消', minWidth: 70, scope:this, handler: this.cancel }] }); }, //关闭窗口 cancel:function(){ this.alertWin.hide(); }, //展示窗口 show: function() { this.alertWin.show(); }, //增加的窗口 add: function( item ) { //this.alertPanel.getForm().reset(); if ( this.field == null ) { this.initialField(); } var fid =item ; if ( fid == null ) { fid = ''; } //eval('this.field.var_' + pageVar.treeNodeFidColumn + '.setValue( fid );'); //设置父节点为现在所选节点的ID this.field.var_SYSCST_FID.setValue( fid ); this.field.var_SYSCST_ID.setValue(0); }, //保存所填内容 save:function() { if ( this.field == null ) { this.initialField(); } Ext.Ajax.request( { url:pageVar.ajaxRequestUrl, success:function(response,option){ var rs = Ext.decode(response.responseText); if(rs.success) { Ext.MessageBox.alert('提示',rs.msg); pageVar.store.load();//重新加载数据 this.alertWin.hide(); } else { Ext.MessageBox.alert('提示',rs.msg); } }, failure:function(response){ Ext.MessageBox.alert('提示','网络错误或连不到服务!'); }, scope:this, params : { oper : pageVar.Oper, //1: 查询， 2:添加， 3:修改， 4:删除 SYSCST_ID:this.field.var_SYSCST_ID.getValue(), //常数信息ID SYSCST_CODE:this.field.var_SYSCST_CODE.getValue(), //常数编码 SYSCST_FID:this.field.var_SYSCST_FID.getValue(), //常数节点父ID SYSCST_NO:this.field.var_SYSCST_NO.getValue(), //顺序号 SYSCST_CHARNO:this.field.var_SYSCST_CHARNO.getValue(), //文字编号 SYSCST_NAME:this.field.var_SYSCST_NAME.getValue(), //常数名称 SYSCST_SN:this.field.var_SYSCST_SN.getValue(), //SYSCST_SN SYSCST_LEV:this.field.var_SYSCST_LEV.getValue(), //常数级别 SYSCST_NOTE:this.field.var_SYSCST_NOTE.getValue(), //常数说明 SYSCST_TEXT1:this.field.var_SYSCST_TEXT1.getValue(), //文字项1 SYSCST_TEXT2:this.field.var_SYSCST_TEXT2.getValue(), //文字项2 SYSCST_NUM1:this.field.var_SYSCST_NUM1.getValue(), //数字项1 SYSCST_NUM2:this.field.var_SYSCST_NUM2.getValue(), //数字项2 SYSCST_UPFLAG:this.field.var_SYSCST_UPFLAG.getValue(), //更新标志 SYSCST_INFLAG:this.field.var_SYSCST_INFLAG.getValue(), //插入标志 SYSCST_DELFLAG:this.field.var_SYSCST_DELFLAG.getValue(), //删除标志 SYSCST_REMARK:this.field.var_SYSCST_REMARK.getValue(), //备注 SYSCST_STATE:this.field.var_SYSCST_STATE.getValue() //可见状态 } }); }, //初始化field initialField: function() { this.field = {}; this.field.var_SYSCST_ID = Ext.getCmp('SYSCST_ID'), //常数信息ID this.field.var_SYSCST_CODE = Ext.getCmp('SYSCST_CODE'), //常数编码 this.field.var_SYSCST_FID = Ext.getCmp('SYSCST_FID'), //常数节点父ID this.field.var_SYSCST_NO = Ext.getCmp('SYSCST_NO'), //顺序号 this.field.var_SYSCST_CHARNO = Ext.getCmp('SYSCST_CHARNO'), //文字编号 this.field.var_SYSCST_NAME = Ext.getCmp('SYSCST_NAME'), //常数名称 this.field.var_SYSCST_SN = Ext.getCmp('SYSCST_SN'), //SYSCST_SN this.field.var_SYSCST_LEV = Ext.getCmp('SYSCST_LEV'), //常数级别 this.field.var_SYSCST_NOTE = Ext.getCmp('SYSCST_NOTE'), //常数说明 this.field.var_SYSCST_TEXT1 = Ext.getCmp('SYSCST_TEXT1'), //文字项1 this.field.var_SYSCST_TEXT2 = Ext.getCmp('SYSCST_TEXT2'), //文字项2 this.field.var_SYSCST_NUM1 = Ext.getCmp('SYSCST_NUM1'), //数字项1 this.field.var_SYSCST_NUM2 = Ext.getCmp('SYSCST_NUM2'), //数字项2 this.field.var_SYSCST_UPFLAG = Ext.getCmp('SYSCST_UPFLAG'), //更新标志 this.field.var_SYSCST_INFLAG = Ext.getCmp('SYSCST_INFLAG'), //插入标志 this.field.var_SYSCST_DELFLAG = Ext.getCmp('SYSCST_DELFLAG'), //删除标志 this.field.var_SYSCST_REMARK = Ext.getCmp('SYSCST_REMARK'), //备注 this.field.var_SYSCST_STATE = Ext.getCmp('SYSCST_STATE') //可见状态 }, //载入item的内容到弹出窗口 load: function( item ) { if ( this.field == null ) { this.initialField(); } this.field.var_SYSCST_ID.setValue( item.get( 'SYSCST_ID' ) ); //常数信息ID this.field.var_SYSCST_CODE.setValue( item.get( 'SYSCST_CODE' ) ); //常数编码 this.field.var_SYSCST_FID.setValue( item.get( 'SYSCST_FID' ) ); //常数节点父ID this.field.var_SYSCST_NO.setValue( item.get( 'SYSCST_NO' ) ); //顺序号 this.field.var_SYSCST_CHARNO.setValue( item.get( 'SYSCST_CHARNO' ) ); //文字编号 this.field.var_SYSCST_NAME.setValue( item.get( 'SYSCST_NAME' ) ); //常数名称 this.field.var_SYSCST_SN.setValue( item.get( 'SYSCST_SN' ) ); //SYSCST_SN this.field.var_SYSCST_LEV.setValue( item.get( 'SYSCST_LEV' ) ); //常数级别 this.field.var_SYSCST_NOTE.setValue( item.get( 'SYSCST_NOTE' ) ); //常数说明 this.field.var_SYSCST_TEXT1.setValue( item.get( 'SYSCST_TEXT1' ) ); //文字项1 this.field.var_SYSCST_TEXT2.setValue( item.get( 'SYSCST_TEXT2' ) ); //文字项2 this.field.var_SYSCST_NUM1.setValue( item.get( 'SYSCST_NUM1' ) ); //数字项1 this.field.var_SYSCST_NUM2.setValue( item.get( 'SYSCST_NUM2' ) ); //数字项2 this.field.var_SYSCST_UPFLAG.setValue( item.get( 'SYSCST_UPFLAG' ) ); //更新标志 this.field.var_SYSCST_INFLAG.setValue( item.get( 'SYSCST_INFLAG' ) ); //插入标志 this.field.var_SYSCST_DELFLAG.setValue( item.get( 'SYSCST_DELFLAG' ) ); //删除标志 this.field.var_SYSCST_REMARK.setValue( item.get( 'SYSCST_REMARK' ) ); //备注 this.field.var_SYSCST_STATE.setValue( item.get( 'SYSCST_STATE' ) ); //可见状态 } });
treeGrid.js

Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '/ext410/examples/ux'); Ext.require([ 'Ext.tip.QuickTipManager', 'Ext.container.Viewport', 'Ext.layout.*', 'Ext.form.Panel', 'Ext.form.Label', 'Ext.grid.*', 'Ext.data.*', 'Ext.tree.*', 'Ext.selection.*', 'Ext.tab.Panel', 'Ext.ux.layout.Center' ]); //为String类添加trim函数 String.prototype.trim = function() { var reg = /^\s+(.*?)\s+$/; return this.replace(reg, "$1"); } //删除所选中表格中的数据 function deleteData(){ var myGrid = Ext.getCmp( 'myGrid' ); var record= myGrid.getSelectionModel().getSelection(); //取得选中的项 var idAll = ""; for(var i = 0; i < record.length; i++){ idAll += "'"+record[i].get( pageVar.treeNodeIdColumn )+"'"; if(i<record.length-1){ idAll = idAll + ","; } } Ext.Ajax.request( { url:pageVar.ajaxRequestUrl, success:function(response,option){ var rs = Ext.decode(response.responseText); if(rs.success) { Ext.MessageBox.alert('提示',rs.msg); pageVar.store.load();//重新加载数据 } else { Ext.MessageBox.alert('提示',rs.msg); } }, failure:function(response){ Ext.MessageBox.alert('提示','网络错误或连不到服务!'); }, scope:this, params : { oper : 4, //1: 查询， 2:添加， 3:修改， 4:删除 SYSCST_ID:idAll } }); } //展示grid的增加/修改窗口 function showWindow( btn ) { if(Ext.isEmpty(modifyWin)) { modifyWin = new ModifyWin(); } Ext.getCmp('savaButton').setDisabled( 0 ); //设置保存按钮为可用 var myGrid = Ext.getCmp( 'myGrid' ); var selected = myGrid.getSelectionModel().getSelection(); //取得选中的项 if ( btn == 'add' ) { //如果点击的不是添加按钮（详细或者修改按钮） pageVar.Oper=2; modifyWin.add( pageVar.onClickID ); } else { pageVar.Oper=3; if ( btn == 'detail' ) { Ext.getCmp('savaButton').setDisabled( 1 ); //设置保存按钮为不可用 } //为表格读取数据 modifyWin.load( selected[0] ); } modifyWin.show(); }; //创建弹出表单 TreeGrid = Ext.extend(Ext.util.Observable,{ winGrid : null, winTree : null, winPanel: null, viewPort: null, constructor:function() { this.loadStore(); //--------------------------------------- Grid部分 --------------------------------------- //设置整张表的Model为选择框模型 var selModel = Ext.create('Ext.selection.CheckboxModel', { listeners: { selectionchange: function(sm, selections) { //设置此按钮在表格中的项被选上时有效 pageVar.grid.down('#removeButton').setDisabled( ! pageVar.bButtons[3] || selections.length == 0 ); //设置只有在表格中的项只有一个被选上时才有效 pageVar.grid.down('#detailButton').setDisabled( ! pageVar.bButtons[1] || selections.length != 1 ); pageVar.grid.down('#modifyButton').setDisabled( ! pageVar.bButtons[2] || selections.length != 1 ); } } }); pageVar.grid = Ext.create('MyGridPanel',{ store: pageVar.store, id: 'myGrid', selModel: selModel, //表格模型 columns: pageVar.columns, title: pageVar.gridTitle, loadMask: true, region:'center' }); this.winGrid = pageVar.grid; this.winGrid.down('#addButton').setDisabled( ! pageVar.bButtons[0] ); //双击表格中的项就出现弹出修改窗口 this.winGrid.addListener( 'itemdblclick', this.dblclick ); //--------------------------------------- Tree部分 --------------------------------------- this.winTree = Ext.create('Ext.tree.Panel', { title: pageVar.treeTitle, layout: 'border', region:'west', border: true, split:true, margins: '2 0 5 5', width: 275, rootVisible: false, autoScroll: true, store: pageVar.treeStore }); this.winTree.getSelectionModel().on('select', function(selModel, record) { record.expand(); pageVar.currentNode = record; loadDataFromTree( pageVar.currentNode ); }); //-------------------------------------------- 整合部分 -------------------------------------------- this.winPanel = Ext.create( 'Ext.panel.Panel', { layout: 'border', title: pageVar.winTitle, region:'center', frame: true, items: [ this.winTree , this.winGrid ] }); this.viewPort= new Ext.Viewport({ layout : 'border', items : this.winPanel }); }, //双击grid事件：弹出修改窗口 dblclick : function() { if ( modifyWin == null ) { modifyWin = new ModifyWin(); } showWindow('modify'); }, //为树和grid载入store loadStore: function() { //树的store pageVar.treeStore = Ext.create('Ext.data.TreeStore', { root: { expanded: true }, proxy: { type: 'ajax', url: pageVar.treeStoreUrl } }); //表的store pageVar.store = Ext.create('Ext.data.Store', { pageSize: 50, model: pageVar.gridModelName, proxy: { type: 'ajax', url: pageVar.gridStoreUrl, reader: { root: pageVar.gridStoreRootName, totalProperty : 'total' } } }); pageVar.store.loadPage(1); }, //关闭窗口 cancel:function(){ this.viewPort.hide(); }, //展示窗口 show: function() { this.viewPort.show(); } });
treePubFun.js

//找到该节点下的第一个叶子节点 var findFirstLeaf = function( root ) { while ( root.childNodes.length > 0 ) { root = root.firstChild; } return root; } //判断该节点是否有下一个兄弟节点（所有同一高度的节点），若没有，则返回-1 var getNextSibling = function( currentNode ) { while ( currentNode.parentNode ) { //保证节点为root节点的子孙节点 if( currentNode != currentNode.parentNode.lastChild ) { return findFirstLeaf( currentNode.nextSibling ); } currentNode = currentNode.parentNode; }; return -1; } //找到该节点下的最后一个叶子节点 var findLastLeaf = function( root ) { while ( root.childNodes.length > 0 ) { root = root.lastChild; } return root; } //判断该节点是否有上一个兄弟节点（所有同一高度的节点），若没有，则返回-1 var getPreSibling = function( currentNode ) { while ( currentNode.parentNode ) { //保证节点为root节点的子孙节点 if( currentNode != currentNode.parentNode.firstChild ) { return findLastLeaf( currentNode.previousSibling ); } currentNode = currentNode.parentNode; }; return -1; }; //为grid载入所选node的信息 function loadDataFromTree( node ) { alert('loadData'); var currentStore = pageVar.store; currentStore.rejectChanges(); var totalCount = currentStore.getTotalCount(); for ( idx = 0; idx < totalCount; idx ++ ) { var record = currentStore.getAt( idx ); var id = record.get( pageVar.treeNodeIdColumn ); //所选项的id，自动生成时需要改变 var fid = record.get( pageVar.treeNodeFidColumn ); if ( id != node.getId() && fid != node.getId() ) { currentStore.remove( record ); idx --; totalCount --; } } }; //扩展该节点 function expandNode( node ) { var c = node; while ( c.parentNode ) { //该节点的父节点存在 c.parentNode.expand(); c = c.parentNode; } }; //删除node节点 function deleteNode( node ) { node.remove(); };
tree-data.json

{ text: '.', children: [{ text:'1', id:'SYSCST_CODE0', expanded: true, children:[{ text:'1-1', id:'SYSCST_CODE1', leaf:true },{ text:'1-2', id:'SYSCST_CODE2', leaf:true },{ text:'1-3', id:'SYSCST_CODE3', leaf:true }] },{ text:'2', id:'SYSCST_CODE4', children:[{ text:'2-1', id:'SYSCST_CODE5', leaf:true }] },{ text:'3', id:'SYSCST_CODE6', children:[{ text:'3-1', id:'SYSCST_CODE7', children:[{ text:'3-1-1', id:'SYSCST_CODE8', leaf:true }] },{ text:'3-2', id:'SYSCST_CODE9', leaf:true }] }] }
tree-grid.json

{ "sys_const": [ { "SYSCST_ID":"SYSCST_ID0", "SYSCST_CODE":"SYSCST_CODE0", "SYSCST_FID":"SYSCST_FID0", "SYSCST_NO":"SYSCST_NO0", "SYSCST_CHARNO":"SYSCST_CHARNO0", "SYSCST_NAME":"SYSCST_NAME0", "SYSCST_SN":"SYSCST_SN0", "SYSCST_LEV":"SYSCST_LEV0", "SYSCST_NOTE":"SYSCST_NOTE0", "SYSCST_TEXT1":"SYSCST_TEXT10", "SYSCST_TEXT2":"SYSCST_TEXT20", "SYSCST_NUM1":"SYSCST_NUM10", "SYSCST_NUM2":"SYSCST_NUM20", "SYSCST_UPFLAG":"SYSCST_UPFLAG0", "SYSCST_INFLAG":"SYSCST_INFLAG0", "SYSCST_DELFLAG":"SYSCST_DELFLAG0", "SYSCST_REMARK":"SYSCST_REMARK0", "SYSCST_STATE":"SYSCST_STATE0" }, { "SYSCST_ID":"SYSCST_ID1", "SYSCST_CODE":"SYSCST_CODE1", "SYSCST_FID":"SYSCST_ID0", "SYSCST_NO":"SYSCST_NO1", "SYSCST_CHARNO":"SYSCST_CHARNO1", "SYSCST_NAME":"SYSCST_NAME1", "SYSCST_SN":"SYSCST_SN1", "SYSCST_LEV":"SYSCST_LEV1", "SYSCST_NOTE":"SYSCST_NOTE1", "SYSCST_TEXT1":"SYSCST_TEXT11", "SYSCST_TEXT2":"SYSCST_TEXT21", "SYSCST_NUM1":"SYSCST_NUM11", "SYSCST_NUM2":"SYSCST_NUM21", "SYSCST_UPFLAG":"SYSCST_UPFLAG1", "SYSCST_INFLAG":"SYSCST_INFLAG1", "SYSCST_DELFLAG":"SYSCST_DELFLAG1", "SYSCST_REMARK":"SYSCST_REMARK1", "SYSCST_STATE":"SYSCST_STATE1" }, { "SYSCST_ID":"SYSCST_ID2", "SYSCST_CODE":"SYSCST_CODE2", "SYSCST_FID":"SYSCST_FID2", "SYSCST_NO":"SYSCST_NO2", "SYSCST_CHARNO":"SYSCST_CHARNO2", "SYSCST_NAME":"SYSCST_NAME2", "SYSCST_SN":"SYSCST_SN2", "SYSCST_LEV":"SYSCST_LEV2", "SYSCST_NOTE":"SYSCST_NOTE2", "SYSCST_TEXT1":"SYSCST_TEXT12", "SYSCST_TEXT2":"SYSCST_TEXT22", "SYSCST_NUM1":"SYSCST_NUM12", "SYSCST_NUM2":"SYSCST_NUM22", "SYSCST_UPFLAG":"SYSCST_UPFLAG2", "SYSCST_INFLAG":"SYSCST_INFLAG2", "SYSCST_DELFLAG":"SYSCST_DELFLAG2", "SYSCST_REMARK":"SYSCST_REMARK2", "SYSCST_STATE":"SYSCST_STATE2" }, { "SYSCST_ID":"SYSCST_ID3", "SYSCST_CODE":"SYSCST_CODE3", "SYSCST_FID":"SYSCST_ID0", "SYSCST_NO":"SYSCST_NO3", "SYSCST_CHARNO":"SYSCST_CHARNO3", "SYSCST_NAME":"SYSCST_NAME3", "SYSCST_SN":"SYSCST_SN3", "SYSCST_LEV":"SYSCST_LEV3", "SYSCST_NOTE":"SYSCST_NOTE3", "SYSCST_TEXT1":"SYSCST_TEXT13", "SYSCST_TEXT2":"SYSCST_TEXT23", "SYSCST_NUM1":"SYSCST_NUM13", "SYSCST_NUM2":"SYSCST_NUM23", "SYSCST_UPFLAG":"SYSCST_UPFLAG3", "SYSCST_INFLAG":"SYSCST_INFLAG3", "SYSCST_DELFLAG":"SYSCST_DELFLAG3", "SYSCST_REMARK":"SYSCST_REMARK3", "SYSCST_STATE":"SYSCST_STATE3" }, { "SYSCST_ID":"SYSCST_ID4", "SYSCST_CODE":"SYSCST_CODE4", "SYSCST_FID":"SYSCST_ID0", "SYSCST_NO":"SYSCST_NO4", "SYSCST_CHARNO":"SYSCST_CHARNO4", "SYSCST_NAME":"SYSCST_NAME4", "SYSCST_SN":"SYSCST_SN4", "SYSCST_LEV":"SYSCST_LEV4", "SYSCST_NOTE":"SYSCST_NOTE4", "SYSCST_TEXT1":"SYSCST_TEXT14", "SYSCST_TEXT2":"SYSCST_TEXT24", "SYSCST_NUM1":"SYSCST_NUM14", "SYSCST_NUM2":"SYSCST_NUM24", "SYSCST_UPFLAG":"SYSCST_UPFLAG4", "SYSCST_INFLAG":"SYSCST_INFLAG4", "SYSCST_DELFLAG":"SYSCST_DELFLAG4", "SYSCST_REMARK":"SYSCST_REMARK4", "SYSCST_STATE":"SYSCST_STATE4" }, { "SYSCST_ID":"SYSCST_ID5", "SYSCST_CODE":"SYSCST_CODE5", "SYSCST_FID":"SYSCST_ID4", "SYSCST_NO":"SYSCST_NO5", "SYSCST_CHARNO":"SYSCST_CHARNO5", "SYSCST_NAME":"SYSCST_NAME5", "SYSCST_SN":"SYSCST_SN5", "SYSCST_LEV":"SYSCST_LEV5", "SYSCST_NOTE":"SYSCST_NOTE5", "SYSCST_TEXT1":"SYSCST_TEXT15", "SYSCST_TEXT2":"SYSCST_TEXT25", "SYSCST_NUM1":"SYSCST_NUM15", "SYSCST_NUM2":"SYSCST_NUM25", "SYSCST_UPFLAG":"SYSCST_UPFLAG5", "SYSCST_INFLAG":"SYSCST_INFLAG5", "SYSCST_DELFLAG":"SYSCST_DELFLAG5", "SYSCST_REMARK":"SYSCST_REMARK5", "SYSCST_STATE":"SYSCST_STATE5" }, { "SYSCST_ID":"SYSCST_ID6", "SYSCST_CODE":"SYSCST_CODE6", "SYSCST_FID":"SYSCST_FID6", "SYSCST_NO":"SYSCST_NO6", "SYSCST_CHARNO":"SYSCST_CHARNO6", "SYSCST_NAME":"SYSCST_NAME6", "SYSCST_SN":"SYSCST_SN6", "SYSCST_LEV":"SYSCST_LEV6", "SYSCST_NOTE":"SYSCST_NOTE6", "SYSCST_TEXT1":"SYSCST_TEXT16", "SYSCST_TEXT2":"SYSCST_TEXT26", "SYSCST_NUM1":"SYSCST_NUM16", "SYSCST_NUM2":"SYSCST_NUM26", "SYSCST_UPFLAG":"SYSCST_UPFLAG6", "SYSCST_INFLAG":"SYSCST_INFLAG6", "SYSCST_DELFLAG":"SYSCST_DELFLAG6", "SYSCST_REMARK":"SYSCST_REMARK6", "SYSCST_STATE":"SYSCST_STATE6" }, { "SYSCST_ID":"SYSCST_ID7", "SYSCST_CODE":"SYSCST_CODE7", "SYSCST_FID":"SYSCST_ID6", "SYSCST_NO":"SYSCST_NO7", "SYSCST_CHARNO":"SYSCST_CHARNO7", "SYSCST_NAME":"SYSCST_NAME7", "SYSCST_SN":"SYSCST_SN7", "SYSCST_LEV":"SYSCST_LEV7", "SYSCST_NOTE":"SYSCST_NOTE7", "SYSCST_TEXT1":"SYSCST_TEXT17", "SYSCST_TEXT2":"SYSCST_TEXT27", "SYSCST_NUM1":"SYSCST_NUM17", "SYSCST_NUM2":"SYSCST_NUM27", "SYSCST_UPFLAG":"SYSCST_UPFLAG7", "SYSCST_INFLAG":"SYSCST_INFLAG7", "SYSCST_DELFLAG":"SYSCST_DELFLAG7", "SYSCST_REMARK":"SYSCST_REMARK7", "SYSCST_STATE":"SYSCST_STATE7" }, { "SYSCST_ID":"SYSCST_ID8", "SYSCST_CODE":"SYSCST_CODE8", "SYSCST_FID":"SYSCST_ID7", "SYSCST_NO":"SYSCST_NO8", "SYSCST_CHARNO":"SYSCST_CHARNO8", "SYSCST_NAME":"SYSCST_NAME8", "SYSCST_SN":"SYSCST_SN8", "SYSCST_LEV":"SYSCST_LEV8", "SYSCST_NOTE":"SYSCST_NOTE8", "SYSCST_TEXT1":"SYSCST_TEXT18", "SYSCST_TEXT2":"SYSCST_TEXT28", "SYSCST_NUM1":"SYSCST_NUM18", "SYSCST_NUM2":"SYSCST_NUM28", "SYSCST_UPFLAG":"SYSCST_UPFLAG8", "SYSCST_INFLAG":"SYSCST_INFLAG8", "SYSCST_DELFLAG":"SYSCST_DELFLAG8", "SYSCST_REMARK":"SYSCST_REMARK8", "SYSCST_STATE":"SYSCST_STATE8" }, { "SYSCST_ID":"SYSCST_ID9", "SYSCST_CODE":"SYSCST_CODE9", "SYSCST_FID":"SYSCST_ID6", "SYSCST_NO":"SYSCST_NO9", "SYSCST_CHARNO":"SYSCST_CHARNO9", "SYSCST_NAME":"SYSCST_NAME9", "SYSCST_SN":"SYSCST_SN9", "SYSCST_LEV":"SYSCST_LEV9", "SYSCST_NOTE":"SYSCST_NOTE9", "SYSCST_TEXT1":"SYSCST_TEXT19", "SYSCST_TEXT2":"SYSCST_TEXT29", "SYSCST_NUM1":"SYSCST_NUM19", "SYSCST_NUM2":"SYSCST_NUM29", "SYSCST_UPFLAG":"SYSCST_UPFLAG9", "SYSCST_INFLAG":"SYSCST_INFLAG9", "SYSCST_DELFLAG":"SYSCST_DELFLAG9", "SYSCST_REMARK":"SYSCST_REMARK9", "SYSCST_STATE":"SYSCST_STATE9" }] }