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

未经允许请勿转载：程序喵 » 【ExtJs4.1】TreePanel获得选中叶子的id和文本