ExtJs只从更新以来，时时刻刻都在改变，例如，3.3用习惯了，4.0以后的也不一定很牛B，4.0以后的内容和思想有些已经生成，而有些却是强制这我们IT人的思想，
3.3之间的获得Tree文本id方式：例如
tree.on("click",function(node,event){
alert("您点击了"+node.text);
});
c1.on("click",function(node,event){
alert("您点击了"+event.X);
});而在4.0以后的方式如下，4.0以后使用了数据源的形式加载数据，而没有了treeLoader等方式，扩展了view而不知ui，
以下是4.1做的例子，获得id和文本
Ext.onReady(function(){
// 创建一个树形控件的数据源store，4.1方式与之前版本用法不同
var _store = Ext.create('Ext.data.TreeStore', {
// 创建代理
/* proxy: {
type: 'ajax', // 代理类型
method:"POST", // 提交方式
url: 'get-nodes.php' //路径
},*/
root: {
expanded: true,
text:'树的根',
children: [
{ text: "第一个节点"},
{ text: "第二个节点", expanded: true,
children: [
{ text: "第二个节点的第一个叶子", leaf: true ,id:'node1'},
{ text: "第二个节点的第二个叶子", leaf: true}
]},
{ text: "第三个节点的叶子", leaf: true }
]
},
folderSort: true, // 排序
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
// 创建一个属性面板
var _tree=new Ext.tree.TreePanel({
animate:true, // 动画效果
title:'我是一棵树',
rootVisible:true, // 是否显示根节点，默认为true。
autoScroll:true, // 自动滚动条，默认false
height:600,
border:true, // 边框Number/String
collapsible:true, // 可收缩展开
lines:true, // 是否显示树线，默认为true
userArrows:true, // 是否在树中使用Vista样式箭头，默认为false
store: _store, //加载树形数据源
renderTo: Ext.getBody(),
// 视图配置项
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop', // 可以拖拽
enableDrag:true, // 拖拽
enableDrop:true, // 节点接受拖动
appendOnly: true
}
},
listeners: {
//双击事件显示饼图
'itemclick': {
fn: function(view, record, item, index, e){
if (record.isLeaf()) {
var nodeId = record.raw.id;//获取点击的节点id
var nodeText = record.raw.text;//获取点击的节点text
alert(nodeId);
}
},
},
'dblclick': {
element: 'body',
fn: function(view, record, item, index, e){
//alert('doubleclick');
}
},
//加载时获取链接
'load':function(treestore, node, records, successful, options) {
if(Ext.isEmpty(records)){
return;
}
}
}
//selModel: new Ext.tree.DefaultSelectionModel() // 树的选择模式，默认为Ext.tree.DefaultSelectionModel
//loader: new Ext.tree.TreeLoader() // 树节点的加载器，默认为Ext.tree.TreeLoader
});
// 西部，树形控件显示
var grid_item = new Ext.Panel({
title: '功能菜单',
region: 'west', // 方向
split: true, // 分割符
collapsible: true, // 可收缩展开
width: 200,
minWidth:180, // 最小
maxWidth:300, // 最大
items:[
_tree // 增加一个树控件
]
});
//中间
var center_item = new Ext.Panel({
title: '报表显示',
region: 'center', // 方向
collapsible: true //折叠
});
new Ext.Viewport({
layout: "border", // border布局
items: [ grid_item, center_item]
});
});
