Question

ExtJS:点击左边tree菜单，右边显示数据

问题:我想点击左边的子节点后，右边出现这个子节点的页面
//创建treePanel容器
var treePanls = new Ext.create('Ext.tree.Panel', {
store: store,//导入名为store的tree
rootVisible: false,//根目录隐藏
enableDD: false, //拖拽节点
listeners: {//监听事件怎么也获取不到Click事件
click: function (node, e) {
alert(node.id);
}
}
//创建tree菜单，tree菜单是手动绑定的
var store = Ext.create('Ext.data.TreeStore', {
//rootVisible: false,
//text:'sdfs',
root: {//根属性
expanded: true,//是否展开菜单
children: [{//子属性
text: "个人办公",//文本
expanded: true,
children: [{
text: '我发起的',
leaf: true//无十字图标显示
}, {
text: '我处理的',
leaf: true
}
//创建tab面板
var tab = new Ext.TabPanel({
region: 'center',
deferredRender: false,
activeTab: 0,
});
//布局中间代码
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: {
title: '默认面板',
html: '3333'

Answer 1

Ext.onReady(function() {
    //只给leaf为true的节点加data，否则会与父节点展开事件发生冲突
    var store = Ext.create("Ext.data.TreeStore", {
        root:{
            expanded:true,
            children:[ {
                text:"detention",
                data:"html1.html",
                leaf:true
            }, {
                text:"homework",
                expanded:true,
                children:[ {
                    text:"book report",
                    data:"html2.html",
                    leaf:true
                }, {
                    text:"alegrbra",
                    data:"html3.html",
                    leaf:true
                } ]
            }, {
                text:"buy lottery tickets",
                data:"html4.html",
                leaf:true
            } ]
        }
    });
    Ext.create("Ext.tree.Panel", {
        store:store,
        rootVisible:false,
        listeners:{
            itemclick:function(v, r) {
                if (r.raw.data) {
                    //获取节点的data的值
                    alert(r.raw.data);
                }
            }
        },
        renderTo:Ext.getBody()
    });
});

在后面的面板中加一个panel，设置其html为

<iframe id="target" style="width:100%;height:100%;border:none;"></iframe>

再修改刚才的itemclick事件

document.getElementById('target').src = r.raw.data;