之前項目有個模塊要求用樹形解決，附帶要實現checkbox,增刪修改以及copy/cut/paste等等功能；因爲之前寫的人用了xloadTree，其他功能都實現了，但是客戶要求要有cookie功能，實現不了麻煩啊～正巧現在在學習用Ext,發現Ext的tree本身就很強大基本的功能都可以實現。Ext.onReady(function() { Ext.QuickTips.init(); Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var onConfirmDelete = function(btn) { if (btn == 'yes') { var treePanel = Ext.getCmp('treepanel'); treePanel.el.mask('刪除中', 'x-mask-loading'); var selNode = treePanel.getSelectionModel().getSelectedNode(); Ext.Ajax.request({ url : 'organ!del.do', params :
{ organId : selNode.id }, success : function(response, opts) { treePanel.el.unmask(); var responseJson = Ext .decode(response.responseText); if (responseJson.success === true) { selNode.remove(); } else { Ext.Msg .alert('An error occured with the server.');
} } }); } } var onDelete = function() { var treePanel = Ext.getCmp('treepanel'); var selNode = treePanel.getSelectionModel().getSelectedNode(); if (selNode) { Ext.MessageBox.confirm('是否確定?', '請確定刪除目錄' + selNode.attributes.text, onConfirmDelete) } } var onCompleteAdd
= function(treeEditor, newValue, oldValue) { var treePanel = Ext.getCmp('treepanel'); var selNode = treePanel.getSelectionModel().getSelectedNode(); if (newValue.length > 0) { Ext.Ajax.request({ url : 'organ!save.do', params : { 'organInfo.name' : newValue,
'organInfo.pid' : selNode.id }, success : function(response, opts) { treePanel.el.unmask(); var responseJson = Ext .decode(response.responseText); if (responseJson.success !== true) { Ext.Msg.alert('An error occured with the server.'); treeEditor.editNode.remove();
} else { treeEditor.editNode.setId(responseJson.data[0].id); } } }); } else { treeEditor.editNode.remove(); } } var onAddNode = function() { var treePanel = Ext.getCmp('treepanel'); var selNode = treePanel.getSelectionModel().getSelectedNode(); if (!this.treeEditor)
{ this.treeEditor = new Ext.tree.TreeEditor(treePanel, {}, { cancelOnEsc : true, completeOnEnter : true, selectOnFocus : true, allowBlank : false, listeners : { complete : onCompleteAdd } }); } selNode.leaf = false; selNode.expand(false, true, function() {
var newNodeCfg = { text : '', id : 'tmpNode', leaf : (selNode.id != '0'), checked : true } var newNode = selNode.insertBefore(newNodeCfg, selNode.firstChild); this.treeEditor.editNode = newNode; this.treeEditor.startEdit(newNode.ui.textNode); }, this); } var
onCompleteEdit = function(treeEditor, newValue, oldValue) { var treePanel = Ext.getCmp('treepanel') treePanel.el.mask('保存中', 'x-mask-loading'); var selNode = treePanel.getSelectionModel().getSelectedNode(); var editNode = treeEditor.editNode; var editNodeId
= editNode.id; Ext.Ajax.request({ url : 'organ!saveC.do', params : { 'organInfo.id' : editNodeId, 'organInfo.name' : newValue, 'organInfo.pid' : editNode.parentNode.id }, success : function(response, opts) { treePanel.el.unmask(); var responseJson = Ext.decode(response.responseText);
if (responseJson.success !== true) { editNode.setText(oldValue); Ext.Msg.alert('An error occured with the server.'); } }, failure : function(response, opts) { treePanel.el.unmask(); editNode.setText(oldValue); Ext.Msg.alert('An error occured with the server.');
} }); } var onEdit = function() { var treePanel = Ext.getCmp('treepanel'); var selectedNode = treePanel.getSelectionModel().getSelectedNode(); if (!this.treeEditor) { this.treeEditor = new Ext.tree.TreeEditor(treePanel, {}, { cancelOnEsc : true, completeOnEnter
: true, selectOnFocus : true, allowBlank : false, listeners : { complete : onCompleteEdit } }); } this.treeEditor.editNode = selectedNode; this.treeEditor.startEdit(selectedNode.ui.textNode); } var buildCtxMenu = function() { return new Ext.menu.Menu({ items
: [{ itemId : 'add', handler : onAddNode }, { itemId : 'edit', handler : onEdit, scope : onEdit }, { itemId : 'delete', handler : onDelete }] }); } var onCtxMenu = function(node, e) { node.select(); e.stopEvent(); if (!this.ctxMenu) { this.ctxMenu = buildCtxMenu();
} var ctxMenu = this.ctxMenu; var addItem = ctxMenu.getComponent('add'); var editItem = ctxMenu.getComponent('edit'); var deleteItem = ctxMenu.getComponent('delete'); addItem.setText('新建文件夾'); editItem.setText('重命名'); deleteItem.setText('刪除'); if (node.id
== '0') { addItem.enable(); deleteItem.disable(); editItem.disable(); } else { addItem.enable(); editItem.enable(); deleteItem.enable(); } ctxMenu.showAt(e.getXY()); }, var tree = new Ext.tree.TreePanel({ id : 'treepanel', autoScroll : true, animate : false,
enableDD : true, useArrows : true, plugins : [new Ext.ux.state.TreePanel()], loader : new WithubTreeLoader({ dataUrl : 'organ!newTree.do' }), root : { nodeType : 'async', id : '0', text : '組織結構', leaf : false, expanded : true }, listeners : { contextmenu :
onCtxMenu, } }); new Ext.Window({ height : 300, width : 300, layout : 'fit', border : false, title : 'Our first tree', items : tree }).show();});對應的save,del,newTree方法public String save() throws Exception { if(organInfo.getPid().equals("0")){ organInfo.setPid(null);
} String id = organInfoService.saveOrganInfo(organInfo); return json("[{id:"+id+"}]"); }public String del() throws Exception { List list = this.searchList(organId, new ArrayList()); StringBuffer sb = new StringBuffer(); sb.append(organId); if (list.size()
!= 0) { for (int i = 0; i < list.size(); i++) { sb.append(",").append(list.get(i)); } } organInfoService.delOrganInfo(sb.toString().split(",")); return json(); }public String newTree() throws Exception { StringBuffer sb = new StringBuffer(); List list; if(node.equals("0")){
list = organInfoService.getOrganInfoListByNull(); } else{ list= organInfoService.getOrganInfoByPidList(node); } int i = 0; sb.append("["); for(OrganInfo oi : list) { if (i != 0) { sb.append(","); } sb.append("{text:'").append(oi.getName()).append("',id:'").append(oi.getId()).append("'");
List listId = organInfoService.getOrganInfoByPidList(oi.getId()); if(listId.size() != 0) { sb.append(",leaf:false"); } else { sb.append(",leaf:true"); } sb.append(",checked: true"); sb.append("}"); i++; } sb.append("]"); return json(sb.toString()); }哦，對應tree的打開狀態的cookie記錄的控件//
vim: ts=4:sw=4:nu:fdc=4:nospell/*global Ext *//** * @class Ext.ux.state.TreePanel * * Ext.tree.TreePanel State Plugin *
* Usage:
var tree = new Ext.tree.TreePanel({
root:{
nodeType:'async'
,id:'root'
,text:'Root'
}
,loader: {
url:'get-tree.php'
}
,plugins:[new Ext.ux.state.TreePanel()]
});
* * @author Ing. Jozef Sakáloš * @copyright (c) 2009, by Ing. Jozef Sakáloš * @date
* @version 1.0 * @revision $Id: Ext.ux.state.TreePanel.js 676 2009-04-07 13:03:20Z jozo $ * * @license Ext.ux.state.TreePanel.js is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s)
do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * *
License details:
http://www.gnu.org/licenses/lgpl.html
* * @forum 64714 * @demo http://examples.extjs.eu/?ex=treestate * @download
* * @donate *
*/Ext.ns('Ext.ux.state');// dummy constructorExt.ux.state.TreePanel = function() {};Ext.override(Ext.ux.state.TreePanel, { /** * Initializes the plugin * @param {Ext.tree.TreePanel} tree * @private */ init:function(tree) { // install event handlers on TreePanel
tree.on({ // add path of expanded node to stateHash beforeexpandnode:function(n) { this.stateHash[n.id] = n.getPath(); } // delete path and all subpaths of collapsed node from stateHash ,beforecollapsenode:function(n) { delete this.stateHash[n.id]; var cPath
= n.getPath(); for(var p in this.stateHash) { if(this.stateHash.hasOwnProperty(p)) { if(-1 !== this.stateHash[p].indexOf(cPath)) { delete this.stateHash[p]; } } } } }); // update state on node expand or collapse tree.stateEvents = tree.stateEvents || []; tree.stateEvents.push('expandnode',
'collapsenode'); // add state related props to the tree Ext.apply(tree, { // keeps expanded nodes paths keyed by node.ids stateHash:{} // apply state on tree initialization ,applyState:function(state) { if(state) { Ext.apply(this, state); // it is too early
to expand paths here // so do it once on root load this.root.on({ load:{single:true, scope:this, fn:function() { for(var p in this.stateHash) { if(this.stateHash.hasOwnProperty(p)) { this.expandPath(this.stateHash[p]); } } }} }); } } // eo function applyState
// returns stateHash for save by state manager ,getState:function() { return {stateHash:this.stateHash}; } // eo function getState }); } // eo function init}); // eo override// eof以上基本實現了樹形的主要功能，右鍵，cookie記住打開的對象，新增新的子節點，直接修改節點名稱,刪除。
