日期:2014-05-16 浏览次数:20430 次
Ext.onReady(function(){
//1.创建异步树
//1>定义加载器,设置参数dataUrl
//2>定义根节点,设置文本及信息
//3>定义面板,在renderTo时把树加载到页面中
//2.支持xml数据的加载 使用httpProxy,加载时解析xml
// var xmltree = new Ext.tree.TreePanel({
// el : 'treeContainer'
// });
// var proxy = new Ext.data.HttpProxy({
// url : 'http://localhost:81/ext/treexml.php'
// });
// proxy.load(null, {
// read : function(xmlDocument) {
// parseXmlAndCreateNodes(xmlDocument);
// }
// }, function() {
// xmltree.render();
// });
//3.树的拖放(Drog && Drop)
//1>增加enableDD:true则可以对树节点进行拖放
//2>使用beforemovenode方法,对操作后,后台方法进行处理
//4.树的排序(Sorting)
//1>使用new Ext.tree.TreeSorter方法排序树
//2>树在排序时默认使用text属性,可以重写sortType方法,修改要排序的字段
//5.编缉树
//1>使用TreeEditor方法编缉树
//2>用beforecomplete进行后台数据处理
//6.选择模式
//1>treePanel.selModel 事件 selectionchange 事件对选中节点进行处理
//2>设置tree的selModel:new Ext.tree.MultiSelectionModel(),可以进行选择多行
//7.右键菜单
//1>定义菜单,存放菜单功能 memu
//2>定义树的contextmenu事件,事件主要菜单显示menu.show
//3>处理菜单事件各功能 (如删除只能处理,非多选择)
//8.过虑
//1>定义过虑器 treeFilter
//2>定义过虑方法treeFilter.filter(value,attr,startNode),三个参数,过虑的值,过虑属性,开始节点
//9.其它特征
//1>树特征
// @lines 线是否显示
// @hlcolor 拖放时浙变色
//2>节点特征
// @checked: true,是否选择
// @href:"",连接地址
// @draggable: false,是否可拖动
// @qtip:"test",提示 涉及tip类
//10.操作数据
//@expandAll 展开树
//@collapseAll折叠树
//@expandPath 根据路径展开 xpatch 写法 /rootID/id
//@getNodeById 根据id取节点
//11.其它方法(节点方法)
//@findChild 查找当前节点下子元素属性值
//@编沥技巧 子元素下每个节点的price属性值+1
// root.eachChild(function(currentNode) {
// currentNode.attributes.price += 30;
// });
//12树的事件处理
//1>checkchange 在处理选择框时,ie在选中父节点时,可以默认选择或触发子节点动作
//2>beforeappend 在增加节点时,可以返回true或false,选择是否增加节点
//13.状态管理:处理是否记住前一个节点.
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//tree.on('expandnode', function(node) {
// Ext.state.Manager.set("treestate", node.getPath());
// });
//var treeState = Ext.state.Manager.get("treestate");
//if (treeState)
// tree.expandPath(treeState);
//定义加载器
var treeLoader = new Ext.tree.TreeLoader({
dataUrl:"./asynTreeData.js"
});
//定义根节点
var treeNode = new Ext.tree.AsyncTreeNode({text:"根目录",id:"0"})
//定义树面板
var treePanel = new Ext.tree.TreePanel({
loader:treeLoader,
root:treeNode,
renderTo:"treeContainer",
enableDD:true,
// selModel:new Ext.tree.MultiSelectionModel()
lines:false,
hlcolor:"ff00ff",
trackMouseOver:true
});
//拖放后事件处理
treePanel.on("beforemovenode",function(tree,node,oldParent,newParent,index){
//后台操作
// Ext.Ajax.request({
// url : 'http://localhost/node-move.php',
// params : {
// nodeid : node.id,
// newparentid : newParent.id,
// oldparentid : oldParent.id,
// dropindex : index
// }
// });
//debug info
// console.debug("node Text:" + node.text + ";oldParnet text:" + oldParent.text
// + ";newParent text:" + newParent.text + ";index:" + index);
});
//排序
new Ext.tree.TreeSorter(treePanel,{
forderSort:true,
dir:"asc",
sortType:function(node){
return node.attributes.id;
}
});
// //编缉
// var editTree = new Ext.tree.TreeEditor(treePanel);
// //处理编缉完成后
// editTree.on("beforecomplete",function(editor,oldValue,orginalValue){
// console.debug("orginalValue Text:" + oldValue.text + ";orginalValue text:" + orginalValue.text)
// });
//选择模式
treePanel.selModel.on("selectionchange",function(selModel,node){
//console.debug("node.id = " + node.length);
var curNode = node.findChild('text', "Youngster");
// console.debug(curNode);
});
//右键菜单
var deleteHandler = function(){
treePanel.getSelectionModel().getSelectedNode().remove();//不能定义选择模式为多选择
};
var sortHandler = function(){
treePa