/** * ERP项目gridpanel样式5:sysNavigation专用treegrid */ Ext.define('erp.view.core.grid.SysTreeGrid',{ extend: 'Ext.tree.Panel', alias: 'widget.erpSysTreeGrid', region: 'south', layout : 'fit', id: 'treegrid', emptyText : $I18N.common.grid.emptyText, useArrows: true, rootVisible: false, singleExpand: true, saveNodes: [], updateNodes: [], deleteNodes: [], lockable: true, cls: 'custom', store: Ext.create('Ext.data.TreeStore', { storeId: 'systreestore', fields: [{"name":"sn_id","type":"string"}, {"name":"sn_displayname","type":"string"}, {"name":"sn_parentid","type":"string"}, {"name":"sn_url","type":"string"}, {"name":"sn_tabtitle","type":"string"}, {"name":"sn_detno","type":"number"}, {"name":"sn_isleaf","type":"bool"}, {"name":"sn_showmode","type":"string"}, {"name":"sn_deleteable","type":"bool"}, {"name":"sn_using","type":"bool"}, {"name":"sn_logic","type":"bool"}, {"name":"sn_caller","type":"string"}, {"name":"sn_addurl","type":"string"}, {"name":"sn_limit","type":"bool"}], root : { text: 'root', id: 'root', expanded: true } }), columns : [ { "header" : "ID", "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_id", "align" : "left", "xtype" : "treecolumn", "readOnly" : false, "hidden" : true, "text" : "ID" }, { "header" : "描述", "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_displayname", "align" : "left", "xtype" : "treecolumn", "readOnly" : false, "hidden" : false, "width" : 260.0, "text" : "描述", "editor" : { "xtype" : "textfield" } }, { "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_parentid", "align" : "left", "xtype" : "treecolumn", "readOnly" : false, "hidden" : true, "width" : 0.0, "text" : "父节点ID" }, { "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_url", "align" : "left", "readOnly" : false, "hidden" : false, "width" : 400.0, "text" : "链接", "editor" : { "xtype" : "textfield" } }, { "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_detno", "align" : "center", "readOnly" : false, "hidden" : false, "width" : 40.0, "text" : "顺序", "editor" : { "xtype" : "numberfield" } }, { "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_isleaf", "align" : "left", "xtype" : "checkcolumn", "readOnly" : false, "hidden" : false, "width" : 60.0, "text" : "是否
叶节点", "headerCheckable" : false, "editor" : { "cls" : "x-grid-checkheader-editor", "xtype" : "checkbox" } }, { "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_deleteable", "align" : "left", "xtype" : "checkcolumn", "readOnly" : false, "hidden" : false, "width" : 60, "text" : "允许
删除", "headerCheckable" : false, "editor" : { "cls" : "x-grid-checkheader-editor", "xtype" : "checkbox" } }, { "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_using", "align" : "left", "xtype" : "checkcolumn", "readOnly" : false, "hidden" : false, "width" : 60.0, "text" : "是否
启用", "headerCheckable" : false, "editor" : { "cls" : "x-grid-checkheader-editor", "xtype" : "checkbox" } }, { "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_limit", "align" : "left", "xtype" : "checkcolumn", "readOnly" : false, "hidden" : false, "width" : 60.0, "text" : "启用
权限", "headerCheckable" : false, "editor" : { "cls" : "x-grid-checkheader-editor", "xtype" : "checkbox" } },{ "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_logic", "align" : "left", "xtype" : "checkcolumn", "headerCheckable" : false, "readOnly" : false, "hidden" : false, "width" : 0, "text" : "允许
扩展", "editor" : { "cls" : "x-grid-checkheader-editor", "xtype" : "checkbox" } }, { "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_caller", "align" : "left", "readOnly" : false, "hidden" : false, "width" : 120.0, "text" : "页面Caller", "editor" : { "xtype" : "textfield" } }, { "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_showmode", "align" : "left", "readOnly" : false, "hidden" : false, "width" : 80.0, "text" : "打开模式", "editor" : { "cls" : "x-grid-checkheader-editor", "xtype" : "combo", "store" : Ext.create('Ext.data.Store', { fields : [ 'display', 'value' ], data : [ { "display" : "选项卡模式", "value" : 0 }, { "display" : "弹出框式", "value" : 1 }, { "display" : "空白页", "value" : 2 }, { "display" : "窗口模式", "value" : 3 } ] }), "displayField" : 'display', "valueField" : 'value', "queryMode" : 'local', "value" : 0 }, "renderer" : function(val){ var rVal = "选项卡模式"; val = val || 0; switch (Number(val)) { case 0: rVal = "选项卡模式";break; case 1: rVal = "弹出框式";break; case 2: rVal = "空白页";break; case 3: rVal = "窗口模式";break; } return rVal; } }, { "dbfind" : "", "cls" : "x-grid-header-1", "summaryType" : "", "dataIndex" : "sn_addurl", "align" : "left", "readOnly" : false, "hidden" : false, "width" : 120.0, "text" : "扩展路径", "editor" : { "xtype" : "textfield" } }], plugins: Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }), tbar: ['->',{ iconCls: 'tree-add', cls: 'x-btn-gray', text: $I18N.common.button.erpAddButton, handler: function(){ var treegrid = Ext.getCmp('treegrid'); var items = treegrid.selModel.selected.items; if(items.length > 0 && items[0].isLeaf() == true){ if(items[0].data['sn_id'] == null || items[0].data['sn_id'] == ''){ warnMsg('如果在该节点下添加子节点,需先保存该节点,是否保存?', function(btn){ if(btn == 'yes'){ if(items[0].data['sn_displayname'] == null || items[0].data['sn_displayname'] == ''){ showError('请先描述该节点'); return; } else { items[0].data['leaf'] = false; items[0].data['cls'] = 'x-tree-cls-parent'; items[0].data['sn_isleaf'] = false; treegrid.saveNodes.push(items[0]); treegrid.saveNode(); } } else if(btn == 'no'){ return; } }); } else { items[0].data['leaf'] = false; items[0].data['cls'] = 'x-tree-cls-parent'; items[0].data['sn_isleaf'] = false; items[0].dirty = true; var o = { sn_parentid: items[0].data['sn_id'], sn_isleaf: true, cls: "x-tree-cls-node", parentId: items[0].data['sn_id'], leaf: true, detno: 0, sn_detno: 0, sn_deleteable: true, deleteable: true, allowDrag: true, showMode: 0, sn_logic: 0, sn_limit: 1 }; items[0].appendChild(o); items[0].expand(true); } } else { var record = treegrid.getExpandItem(); var detno = null; if(record){ if(record.childNodes.length==0){ detno = 1; } else { detno = record.childNodes[record.childNodes.length-1].data.detno + 1; } var o = { sn_parentid: record.data['sn_id'], sn_isleaf: true, cls: "x-tree-cls-node", parentId: record.data['sn_id'], sn_deleteable: true, deleteable: true, leaf: true, detno: detno, sn_detno: detno, allowDrag: true, showMode: 0, sn_logic: 0, sn_limit: 1 }; record.appendChild(o); } } } },'-',{ iconCls: 'tree-add', cls: 'x-btn-gray', text: '添加根节点', handler: function(){ var me=this; var save = new Array(); treegrid = Ext.getCmp('treegrid'); var o = { sn_id: -1, sn_displayname: '新添加的根节点', sn_url: '', sn_detno: 0, sn_isleaf:'F', sn_tabtitle: '', sn_parentid: 0, sn_deleteable: 'F', sn_using: 0, sn_limit: 1, sn_showmode: 0, sn_logic: 0, sn_caller:'', sn_addurl:'', }; save[0] = Ext.JSON.encode(o); if(save.length > 0 ){ Ext.Ajax.request({ url : basePath + 'ma/addRootSysNavigation.action', params: { save: unescape(save.toString().replace(/\\/g,"%")) }, callback : function(options,success,response){ var res = new Ext.decode(response.responseText); /*activeTab.setLoading(false);*/ if(res.success){ me.saveNodes = []; } else if(res.exceptionInfo){ showError(res.exceptionInfo); } } }); } treegrid.getRootNode().appendChild(o); nodes = treegrid.store.tree.root.childNodes; treegrid.saveNodes = []; Ext.each(nodes, function(){ treegrid.checkChild(this); }); treegrid.saveNode(); } },'-',{ iconCls: 'tree-delete', cls: 'x-btn-gray', text: $I18N.common.button.erpDeleteButton, handler: function(){ var treegrid = Ext.getCmp('treegrid'); var items = treegrid.selModel.selected.items; if(items.length > 0){ if(items[0].isLeaf() == true){ if(items[0].data['sn_id'] != null && items[0].data['sn_id'] != ''){ if(items[0].data['sn_deleteable'] == true){ warnMsg('确定删除节点[' + items[0].data['sn_displayname'] + "]?", function(btn){ if(btn == 'yes'){ treegrid.deleteNode(items[0]); } else if(btn == 'no'){ return; } }); } else { showError('该节点不允许删除!'); } } else { items[0].remove(true); } } else { if(items[0].data['sn_id'] != null || items[0].data['sn_id'] != ''){ if(items[0].data['sn_deleteable'] == true){ Ext.each(items[0].childNodes, function(){ if(this.data['sn_deleteable'] == false){ showError('该节点有不可删除子节点,无法删除该节点!'); return; } }); warnMsg('确定删除节点[' + items[0].data['sn_displayname'] + ']及其子节点?', function(btn){ if(btn == 'yes'){ treegrid.deleteNode(items[0]); } else if(btn == 'no'){ return; } }); } else { showError('该节点不允许删除!'); } } else { items[0].remove(true); } } } else { var record = treegrid.getExpandItem(); if(record){ if(record.childNodes.length == 0){ if(record.data['sn_id'] != null && record.data['sn_id'] != ''){ if(record.data['sn_deleteable'] == true){ warnMsg('确定删除节点[' + record.data['sn_displayname'] + ']?', function(btn){ if(btn == 'yes'){ treegrid.deleteNode(record); } else if(btn == 'no'){ return; } }); } else { showError('该节点不允许删除!'); } } else { record.remove(true); } } } } } },'-',{ iconCls: 'tree-save', cls: 'x-btn-gray', text: $I18N.common.button.erpSaveButton, handler: function(){ var treegrid = Ext.getCmp('treegrid'), nodes = treegrid.store.tree.root.childNodes; treegrid.saveNodes = []; Ext.each(nodes, function(){ treegrid.checkChild(this); }); treegrid.saveNode(); } },'->'], bodyStyle:'background-color:#f1f1f1;', initComponent : function(){ Ext.override(Ext.data.AbstractStore,{ indexOf: Ext.emptyFn }); this.callParent(arguments); this.getTreeGridNode({parentId: 0}); this.view.onItemClick = function() { return true; }; }, listeners: {//滚动条有时候没反应,添加此监听器 scrollershow: function(scroller) { if (scroller && scroller.scrollEl) { scroller.clearManagedListeners(); scroller.mon(scroller.scrollEl, 'scroll', scroller.onElScroll, scroller); } } }, getTreeGridNode: function(param){ var me = this; var activeTab = me.getActiveTab(); activeTab.setLoading(true); Ext.Ajax.request({//拿到tree数据 url : basePath + 'ma/lazyTree.action', params: param, callback : function(options,success,response){ var res = new Ext.decode(response.responseText); activeTab.setLoading(false); if(res.tree){ var tree = res.tree; Ext.each(tree, function(t){ t.sn_id = t.id; t.sn_parentid = t.parentId; t.sn_displayname = t.text; t.sn_isleaf = t.leaf; t.sn_detno = t.detno; t.sn_tabtitle = t.text; t.sn_url = t.url; t.sn_deleteable = t.deleteable; t.sn_using = t.using; t.sn_limit = t.data.sn_limit; t.sn_showmode = t.showMode; t.sn_logic = t.data.sn_logic; t.sn_caller = t.data.sn_caller; t.sn_addurl=t.data.sn_addurl; t.data = null; }); me.store.setRootNode({ text: 'root', id: 'root', expanded: true, children: tree }); Ext.each(me.store.tree.root.childNodes, function(){ this.dirty = false; }); me.setParentNodes(me.store.tree.root, true); } else if(res.exceptionInfo){ showError(res.exceptionInfo); } } }); }, setParentNodes: function(record, isExpand){ var tree = this, grid = tree.ownerCt.down('grid'), data = new Array(), nodes = record.childNodes; Ext.each(nodes, function(node){ data.push({ sn_id: node.get('sn_id'), sn_displayname: node.get('sn_displayname'), sn_detno: node.get('sn_detno'), sn_addurl:node.get('sn_addurl') }); }); grid.store.loadData(data); }, checkChild: function(record){ var me = this; console.log(record.data['leaf']); if(!record.data['leaf']){ if(record.childNodes.length > 0){ if(record.data['sn_id'] == null || record.data['sn_id'] == ''){ warnMsg('如果在节点' + record.data['sn_id'] + '下添加子节点,需先保存该节点,是否保存?', function(btn){ if(btn == 'yes'){ if(items[0].data['sn_displayname'] == null || items[0].data['sn_displayname'] == ''){ showError('请先描述该节点'); return; } else { me.saveNodes.push(items[0]); me.saveNode(); } } else if(btn == 'no'){ return; } }); } Ext.each(record.childNodes, function(){ me.checkChild(this); }); } } else { if(record.dirty){ if(record.data['sn_id'] == null || record.data['sn_id'] == ''){ me.saveNodes.push(record); } else { me.updateNodes.push(record); } } } }, saveNode: function(){ var me = this; me.getUpdateNodes(); var save = new Array(); var update = new Array(); var index = 0; Ext.each(me.saveNodes, function(){ if(this.data.sn_displayname != null && this.data.sn_displayname != ''){ if(this.data.sn_tabtitle == null || this.data.sn_tabtitle == ''){ this.data.sn_tabtitle == this.data.sn_displayname; } if(this.data.sn_deleteable == null || this.data.sn_deleteable == ''){ this.data.sn_deleteable == 'T'; } var o = { sn_id: this.data.sn_id, sn_displayname: this.data.sn_displayname, sn_url: this.data.sn_url, sn_detno: this.data.sn_detno, sn_isleaf: this.data.sn_isleaf ? 'T' : 'F', sn_tabtitle: this.data.sn_tabtitle, sn_parentid: this.data.sn_parentid, sn_deleteable: this.data.sn_deleteable ? 'T' : 'F', sn_using: this.data.sn_using ? 1 : 0, sn_limit: this.data.sn_limit ? 1 : 0, sn_showmode: this.data.sn_showmode || 0, sn_logic: this.data.sn_logic ? 1 : 0, sn_caller: this.data.sn_caller, sn_addurl: this.data.sn_addurl }; save[index++] = Ext.JSON.encode(o); } }); index = 0; Ext.each(me.updateNodes, function(){ if(this.data.sn_displayname != null && this.data.sn_displayname != ''){ if(this.data.sn_tabtitle == null || this.data.sn_tabtitle == ''){ this.data.sn_tabtitle == this.data.sn_displayname; } if(this.data.sn_deleteable == null || this.data.sn_deleteable == ''){ this.data.sn_deleteable == 'T'; } var o = { sn_id: this.data.sn_id, sn_displayname: this.data.sn_displayname, sn_url: this.data.sn_url, sn_detno: this.data.sn_detno, sn_isleaf: this.data.sn_isleaf ? 'T' : 'F', sn_tabtitle: this.data.sn_tabtitle, sn_parentid: this.data.sn_parentid, sn_deleteable: this.data.sn_deleteable ? 'T' : 'F', sn_using: this.data.sn_using ? 1 : 0, sn_limit: this.data.sn_limit ? 1 : 0, sn_showmode: this.data.sn_showmode || 0, sn_logic: this.data.sn_logic ? 1 : 0, sn_caller: this.data.sn_caller, sn_addurl: this.data.sn_addurl }; update[index++] = Ext.JSON.encode(o); } }); var grid = me.ownerCt.down('grid'), other = new Array(); grid.store.each(function(){ if(this.dirty) other.push(this.data); }); if(save.length > 0 || update.length > 0 || other.length > 0){ var activeTab = me.getActiveTab(); activeTab.setLoading(true); Ext.Ajax.request({ url : basePath + 'ma/saveSysNavigation.action', params: { save: unescape(save.toString().replace(/\\/g,"%")), update: unescape(update.toString().replace(/\\/g,"%")), other: unescape(Ext.JSON.encode(other).toString().replace(/\\/g,"%")) }, callback : function(options,success,response){ var res = new Ext.decode(response.responseText); activeTab.setLoading(false); if(res.success){ me.saveNodes = []; me.updateNodes = []; me.getTreeGridNode({parentId: 0}); } else if(res.exceptionInfo){ showError(res.exceptionInfo); } } }); } }, getExpandItem: function(root){ var me = this; if(!root){ root = this.store.tree.root; } var node = null; if(root.childNodes.length > 0){ Ext.each(root.childNodes, function(){ if(this.isExpanded()){ node = this; if(this.childNodes.length > 0){ var n = me.getExpandItem(this); node = n == null ? node : n; } } }); } return node; }, deleteNode: function(record){ var me = this; if(record){ var activeTab = me.getActiveTab(); activeTab.setLoading(true); Ext.Ajax.request({ url : basePath + 'ma/deleteSysNavigation.action', params: { id: Number(record.data['sn_id']) }, callback : function(options,success,response){ var res = new Ext.decode(response.responseText); activeTab.setLoading(false); if(res.success){ record.remove(true); } else if(res.exceptionInfo){ showError(res.exceptionInfo); } } }); } }, getUpdateNodes: function(root){ var me = this; if(!root){ root = this.store.tree.root; me.updateNodes = []; } if(root.childNodes.length > 0){ Ext.each(root.childNodes, function(){ if(this.dirty){ if(this.data['sn_id'] != null && this.data['sn_id'] != ''){ me.updateNodes.push(this); } } if(this.data['leaf'] == false && this.childNodes.length > 0){ me.getUpdateNodes(this); } }); } else { if(root.dirty){ if(root.data['sn_id'] != null && root.data['sn_id'] != ''){ me.updateNodes.push(root); } } } }, getActiveTab: function(){ var tab = null; if(Ext.getCmp("content-panel")){ tab = Ext.getCmp("content-panel").getActiveTab(); } if(!tab){ var win = parent.Ext.ComponentQuery.query('window'); if(win.length > 0){ tab = win[win.length-1]; } } if(!tab && parent.Ext.getCmp("content-panel")) tab = parent.Ext.getCmp("content-panel").getActiveTab(); if(!tab && parent.parent.Ext.getCmp("content-panel")) tab = parent.parent.Ext.getCmp("content-panel").getActiveTab(); return tab; }, /** * treegrid用到了checkcolumn时,由于其store的差异,根据recordIndex不能直接得到record, * 采用下面的方法可以在点击checkbox时,得到当前的record,再进而就可以修改checkbox的check属性等... */ getRecordByRecordIndex: function(recordIndex, node){ var me = this; if(!node){ node = this.store.tree.root; me.findIndex = 0; me.findRecord = null; } if(me.findRecord == null){ if(node.childNodes.length > 0 && node.isExpanded()){ Ext.each(node.childNodes, function(){ if(me.findIndex == recordIndex){ me.findRecord = this; me.findIndex++; } else { me.findIndex++; me.getRecordByRecordIndex(recordIndex, this); } }); } else { if(me.findIndex == recordIndex){ me.findRecord = node; } } } }, checkRecord: function(record, dataIndex, checked){ var me = this; if(record.childNodes.length > 0){ Ext.each(record.childNodes, function(){ this.set(dataIndex, checked); me.checkRecord(this, dataIndex, checked); }); } } });