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] }); });