ExtJs4.1的TreePanel获得选中叶子的id和文本

查看原文：http://www.ibloger.net/article/212.html

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