首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

请问一个extjs布局有关问题

2012-03-25 
请教一个extjs布局问题!这是index页面的代码,页面采用extjs viewport来布局的。西面版显示的是树形菜单,中

请教一个extjs布局问题!
这是index页面的代码,页面采用extjs viewport来布局的。
西面版显示的是树形菜单,中心区域是tabpanel

JScript code
//index.jsvar viewport = new Ext.Viewport({                        layout : 'border',                        items : [                                /** 北面板, 定义在 north.js */                                northRegion,                                /** 南面板, 定义在 south.js */                                southRegion,                                /** 西面板, 定义在 west.js */                                westRegion,                                /** 中心面板 ******************************* */                                centerRegion                                /**东面板,定义在 east.js**///                                eastRegion                                ]                    });//center.jsvar centerRegion = new Ext.TabPanel({            region : 'center',            deferredRender : false,            activeTab : 7,            enableTabScroll : true,            listeners : {                remove : function(tp, c) {                    c.hide();                }            },            autoDestroy : false,            items : [                welcomePanel,welcomePanel2,welcomePanel3,welcomePanel4,                 welcomePanel5,welcomePanel6,welcomePanel7,welcomePanel8,                 welcomePanel9,welcomePanel10,welcomePanel11            ]        });//west.js// 定义并构造西部面板/** *********浏览器树菜单start*********** */var rootNode = new Ext.tree.AsyncTreeNode({            text : "根",            id : "0",            expanded : true        });var myTree = new Ext.tree.TreePanel({            root : rootNode,            loader : new Ext.tree.TreeLoader({                        dataUrl : "/Ext/tree"                    }),//            width : 200,//            autoHeight : true            height:600        });myTree.on("beforeload", function(node) {            myTree.loader.baseParams.id = node.id;        });myTree.on("click", function(node) {            Ext.Ajax.request({                        url : "/Ext/tree",                        params : {                            id : 1                        },                        success : function(res) {                            var r = Ext.decode(res.responseText);                            // alert(r);                        }                    });        });// tree.render(Ext.get("tree_div"));/** *********浏览器树菜单end*********** */var westRegion = {    region : 'west',    id : 'west-panel',    iconCls : 'tabs',    title : '节点浏览器',    split : true,    width : 200,    minSize : 175,    maxSize : 400,    autoScroll: true,    border:false,    collapsible : true,    margins : '0 0 0 5',    layout : 'column',    layoutConfig : {        animate : true    },    items : [{        items : myTree    }    ]};


现在我想通过左侧的菜单栏来控制中心区域的tabpanel,就是说点击菜单栏中的一项,就会切换不同的tabpanel来显示在中心区域。希望大家帮忙看看怎么做,有没有更适合这种需求的布局方式?

[解决办法]
JScript code
 var inStoreTree=new Ext.tree.TreePanel({       root:inStoreRootNode,       rootVisible:false,//是否显示根节点          autoScroll:true,          autoHeight:true,        border:false,       split: true,          width:200,          lines:true//节点之间连接的横竖线    });   inStoreTree.on('click', treeClick);//给inStoreTree添加treeClick方法function treeClick(node, e) {       if(node.isLeaf()){           var main=Ext.getCmp('main');//main就是右边主面板的id        main.add({         xtype:'panel',         title:node.attributes.text,         id:'tab'+node.attributes.id,         autoScroll:true,         autoLoad:{url:node.attributes.url,scripts:true},        closable:true     }).show();       }   }//说明下,我的treenode是直接写死的,在前台就指定了url,你的treenode如果是从后台加载的话,就可以在点击节点的时候,获取url属性就可以了。
[解决办法]
好久没看着东西了都忘了啊呵呵。

热点排行