日期:2014-05-16  浏览次数:20391 次

Ext的viewport的问题
我想点根1的时候,中间的页面换成另个panel,点根2的时候也换一个
代码:[code=JScript][/code]
  Ext.onReady(function(){
   
   
var root=new Ext.tree.TreeNode({
id:'root',
text:'树的根'
});
 
root.appendChild(new Ext.tree.TreeNode({
id:'c1',
text:"根1"}));
 
root.appendChild(new Ext.tree.TreeNode({
id:'c2',
text:"根2"  
}));
 
var tree=new Ext.tree.TreePanel({
title:'管理',
region:'west',
root:root,
width:100
});
   
var viewport=new Ext.Viewport({
layout:'border',
items:[{
region:'north',
height:60,
contentEl:'Ndiv'
},{
region:'south',
contentEl:'Sdiv'
},tree,{
region:'center',
id:'center',
html:'欢迎XXX'  
}]
});
 
 
   
  });

------解决方案--------------------
JScript code
  Ext.onReady(function () {

                var store = Ext.create('Ext.data.TreeStore', {
                    root: {
                        expanded: true,
                        children: [{
                            text: "c1",
                            url:'http://www.baidu.com',
                            leaf: true
                        }, {
                            text: "c2",
                            url:'http://www.gougou.com',
                            leaf: true
                        }]
                    },
                    text:'root' 
                });

                var tree = Ext.create('Ext.tree.Panel', {
                    title: 'Simple Tree',
                    width: 200,
                    height: 150,
                    store: store,
                    region: 'west',
                    rootVisible: false,
                    listeners:{
                        itemclick:function(view,record){
                            var panel = Ext.getCmp("center");
                            var loader = panel.getLoader();    
                            alert(record.raw.url);
                            loader.load({url:record.raw.url});
                        }
                    }
                });


                var viewport = Ext.create('Ext.container.Viewport', {
                    layout: 'border',
                    items: [{
                        region: 'north',
                        height: 60,
                        html: 'Ndiv'
                    }, {
                        region: 'south',
                        height: 60,
                        html: 'Sdiv'
                    },
                    tree,
                    {
                        region: 'center',
                        id: 'center',
                       autoLoad:'http://www.hao123.com'
                    }]
                });


            });