/** * 功能主程序类 */ Ext.define('com.RolePanel', { extend : 'Ext.panel.Panel', xtype : 'com-role-grid', initComponent : function() { var self = this; var store = new Ext.data.Store({ autoLoad : true, proxy : { type : 'ajax', url : 'roleAction!list.action', reader : { type : 'json', root : 'rows' } }, model : 'com.RolePanel.Mode', writer : new Ext.data.JsonWriter(), listeners : { 'load' : function(store, records) { if (records) { if (roleGridPanel.getSelectionModel().getSelection().length <= 0) { roleGridPanel.getSelectionModel() .select(records[0]); self.authFormPanel.loadRecord(records[0]); } } } } }); var roleGridPanel = new Ext.grid.Panel({ region : 'center', columnLines : true, store : store, loadMask : true, columns : [{ text : '编号', sortable : true, dataIndex : 'cid', locked : true, hidden : true }, { text : '角色名称', dataIndex : 'cname', flex : 5 }, { text : '备注', dataIndex : 'cdesc', flex : 5 }, { text : 'ctype', dataIndex : 'ctype', hidden : true }, { text : '拥有权限', dataIndex : 'authIds', hidden : true // renderer : function(value, metaData, record) // { // if (record.raw.authNames) { // return Ext.String.format( // '<span title={0}>{1}</span>', // record.raw.authNames, // record.raw.authNames); // } // } }], bbar : Ext.create('Ext.PagingToolbar', { store : store, displayInfo : true, beforePageText : '第', afterPageText : '页,共{0}页', displayMsg : '共{2}个', emptyMsg : "没有记录" }), tbar : [{ text : '增加', scope : this, iconCls : 'Add', handler : function() { roleGridPanel.getSelectionModel() .deselectAll(); self.authFormPanel.form.reset(); } }, { text : '删除', scope : this, iconCls : 'Delete', handler : function() { this.openDelete(self); } }], forceFit : true }); this.roleGridPanel = roleGridPanel; roleGridPanel.getSelectionModel().on('selectionchange', function(t, sMode) { if (sMode[0]) { self.authFormPanel.loadRecord(sMode[0]); } }, this); var storeRoleAuth = Ext.create('Ext.data.TreeStore', { // autoLoad : true, proxy : { type : 'ajax', url : "authAction!authTreeRecursive.action" }, fields : ['id', 'text', 'leaf', 'checked'], root : { id : '0', text : 'root', lazyLoad : true } }); var authTree = new Ext.tree.Panel({ width : 400, height : 450, autoScroll : true, animate : true, containerScroll : true, rootVisible : false, store : storeRoleAuth, listeners : { 'expand' : function(p) { var node = p.getSelectedNode(); if (!node) self.refresh(p.getRootNode()); else { self.refresh(node); } } } }); authTree.on('checkchange', function(node, checked) { node.checked = checked; if (node.parentNode.id.length != 1) { self.setParentNode(node.parentNode, checked, self); node.expand(); } if (node.hasChildNodes()) self.setChildNode(node, checked, self); }, authTree); self.authTree = authTree; var authFormPanel = new Ext.form.Panel({ title : '角色编辑', region : 'east', split : true, collapsible : true, border : false, items : [{ fieldLabel : '编号', name : 'id', hidden : true }, { xtype : 'textfield', allowBlank : false, fieldLabel : '角色名称', name : 'name', emptyText : '角色名称' }, { xtype : 'textfield', fieldLabel : '备注', name : 'desc' }, { xtype : 'textfield', name : 'authIds', fieldLabel : '权限Id', hidden : true, listeners : { 'change' : function(authId) { var root = authTree.getRootNode(); root.eachChild(function(child) { child.checked = false; child.set('checked', false); authTree.fireEvent('checkchange', child, false); }); var authIds = authId.getValue(); if (authIds) { Ext.each(authIds.split(","), function( authId) { self.setNodeChecked(authId, root, self); }); } } } }, { xtype : 'fieldset', autoHeight : true, title : '权限', width : '100%', items : authTree }], tbar : [{ text : '保存', iconCls : 'icon-save', scope : this, handler : function() { self.saveRoleAuth(self); } }] }); self.authFormPanel = authFormPanel; Ext.apply(this, { layout : 'border', border : 0, items : [roleGridPanel, authFormPanel] }); this.callParent(); }, setNodeChecked : function(nodeId, node, self) { if (nodeId == node.data.id) { node.checked = true; node.set('checked', true); self.authTree.fireEvent('checkchange', node, true); return false; } else if (node.hasChildNodes()) { node.eachChild(function(child) { var result = self.setNodeChecked(nodeId, child, self); if (!result) return false; }); } return true; }, setChildNode : function(node, checked, self) { node.expand(); node.eachChild(function(child) { child.checked = checked; child.set('checked', checked); if (child.hasChildNodes()) self.setChildNode(child, checked, self); }); }, setParentNode : function(node, checked, self) { var childNoChecked = false; node.checked = checked; node.eachChild(function(child) { if (!child.checked) { childNoChecked = true; return false; } }); node.set('checked', childNoChecked ? (checked ? false : checked) : checked); if (node.parentNode != null) self.setParentNode(node.parentNode, checked, self); }, openDelete : function(self) { var selection = self.roleGridPanel.getSelectionModel().getSelection()[0]; if (selection) { Ext.MessageBox.confirm('提示', '你确定要删除"' + selection.raw.cname + '"吗?', function(resu) { if (resu == 'yes') { Ext.Ajax.request({ url : 'userAction!delete.action', params : { ids : selection.raw.cid }, success : function(response, options) { var jsonResult = Ext.JSON .decode(response.responseText); if (jsonResult.success) self.roleGridPanel.getStore() .reload(); Ext.Msg.alert('提示', jsonResult.msg); }, failure : function(response, options) { var jsonResult = Ext.JSON .decode(response.responseText); Ext.Msg.alert('失败', jsonResult.msg); } }); } }); } else { Ext.MessageBox.alert('提示', '请选择你要删除的数据'); } }, saveRoleAuth : function(self) { var result = self.authFormPanel.form.getFieldValues(); var root = self.authTree.getRootNode(); var authIds = []; root.eachChild(function(child) { self.getChildNodeAuth(child, authIds, self); }); self.authFormPanel.form.findField('authIds') .setValue(authIds.join(',')); self.authFormPanel.form.submit({ url : "roleAction!save.action", method : 'POST', success : function(f, action) { var result = action.result; if (result.success) { self.roleGridPanel.getStore().load(); } else { Ext.Msg.alert('错误', result.message); } }, failure : function(f, action) { Ext.Msg.alert('错误', resp.responseText); } }); }, getChildNodeAuth : function(node, authIds, self) { if (node.data.checked) authIds.push(node.data.id); if (node.hasChildNodes()) node.eachChild(function(child) { self.getChildNodeAuth(child, authIds, self); }); } }); /** * 用户数据MODE */ Ext.define('com.RolePanel.Mode', { extend : 'Ext.data.Model', fields : [{ name : 'id', type : 'string' }, { name : 'name', type : 'string' }, { name : 'desc', type : 'string' }, { name : 'type', type : 'string' }, { name : 'authIds', type : 'string' }, { name : 'authNames', type : 'string' }] });
java 返回树对象字段:
public class TreeNode implements java.io.Serializable { private static final long serialVersionUID = 1L; private String id; private String text;// 树节点名称 private String iconCls;// 前面的小图标样式 private List<TreeNode> children;// 子节点 private boolean leaf = false; private boolean expanded = true;// 是否展开(true,false) private String checked = null; private Object attachment; }
相关推荐
TreePanel的checkbox节点操作及父子节点联动的演示DEMO
TreePanel的checkbox节点操作及父子节点联动的演示DEMO,前面那个有Bug,选中子节点时,没能选择父节点。 这个版本修正了
可实现选中父节点,自动选中子节点,选中子节点,自动遍历选中父节点
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
ext.net
博文链接:https://jfp.iteye.com/blog/178889
关于TreePanel的一些文档,有点杂,不过内容比较多
通过java 访问数据库而生成节点 子节点的 ID 与 父节点的关系为“父节点id_子节点id”此id为数据库中的id 同理“父节点id_子节点id_子子节点id”,因此加载树时将node.id做为参数 通过split("_"),根据数据的长度就...
treepanel 和 tabpanel 合在一起使用,可直接使用
通过数据库进行后台对treepanel的增删改查。供初学者参考学习。
4、在工程中找到“main.js”文档,该文档中是控制应用显示GridPanel和TreePanel示例的开关 5、在IE的地址栏输入“http://localhost:8080/GridPanel”之后回车 6、如果一切正常,你会看到可以分页的表格;调整main.js...
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
NULL 博文链接:https://yjzagan2003.iteye.com/blog/1110742
4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他...
EXT 教材 TreePanel基本使用
var mytree new Ext tree TreePanel { el : "container" animate : true title : "简单Extjs动态树" collapsible : true enableDD : true enableDrag : true rootVisible : true ...
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果。 在 ...