点击west树节点在center打开一个页面
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif'; Ext.onReady( function() { Ext.QuickTips.init(); //页面的上部分 var northPanel = new Ext.Panel( { title : "百通天下中小企业信息化管理平台",//实际应用中,通常去掉该属性。 region : 'north',//北部,即顶部,上面 contentEl : 'north-div',//面板包含的内容 split : false, border : false,//当面板内容超出面板大小时,是否显示边框 collapsible : false,//是否可以收缩,默认不可以收缩,即不显示收缩箭头 //collapsed:true,//初始化是否显示, 默认是显示 height : 60 }); //左边菜单 var westPanel = new Ext.Panel( { title : '左边菜单',//面板名称 region : 'west',//该面板的位置,此处是西部 也就是左边 split : true,//为true时,布局边框变粗 ,默认为false border : false, collapsible : true, collapsed : false,//初始化是否显示, 默认是显示 width : 150, minSize : 10,//最小宽度 maxSize : 300, layout : 'accordion', layoutConfig : { //布局 titleCollapse : true, animate : true, activeOnTop : false }, items : [ { title : '模块管理', contentEl : 'moduleTree'//子面板包含的内容,contentEl 的值日通常是一个div ID },{ title : '数据字典', contentEl : 'dictTypeTree'//子面板包含的内容,contentEl 的值日通常是一个div ID } ] }); //页面的右边 var eastPanel = new Ext.Panel( { region : "east", title : "右边", collapsible : true, collapsed : false, //collapsed:true,//是否显示 split : true, width : 225, minSize : 175, maxSize : 400, layout : "fit", margins : "0 5 0 0", layout : "accordion", iconCls : "my-toolPanelIcon", layoutConfig : { animate : true } }); //页面的底部 var southPanel = new Ext.Panel( { title : '底部面板', region : "south", split : true, height : 80, minSize : 60, maxSize : 150, collapsible : true, collapsed : false, contentEl : "footer", title : "底栏", margins : "0 0 0 0" }); //页面的中间面板 var centerPanel = new Ext.Panel( { region : 'center',//中间 主显示面板 activeTab : 0, enableTabScroll : true, border : false, items : [ { id : 'HomePage', title : '首页', iconCls : 'home', contentEl : 'hp',//显示的内容,hp 是div ID closable : false, layout : 'fit', resizeEl: 'center-iframe' } ] }); var viewport = new Ext.Viewport( { layout : 'border',//布局,必须是border loadMask : true, items : [ northPanel, //上 westPanel,//左 centerPanel,//中 eastPanel,//右 southPanel //下 ] }); var Tree = Ext.tree; var tree = new Tree.TreePanel( { el : 'moduleTree', autoScroll : true, animate : true, enableDD : true, containerScroll : true, loader : new Tree.TreeLoader( { dataUrl : './module/getTreeListData.html' }) }); var root = new Tree.AsyncTreeNode( { text : 'Module Ext Tree', draggable : false, id : 'source' }); tree.setRootNode(root); tree.render(); root.expand(); var n; tree.on('click', function(node, event) { //Ext.get('center-iframe').dom.src = node.attributes.href; //Ext.get('center-iframe').load({url:node.attributes.href}); centerPanel.load({url:node.attributes.href,title:'text'}); }); });


4545
Copyright © 2007-2008 ® 版权所有

1个回答

[url]http://yourgame.iteye.com/blog/252853[/url]

请下载示例
中间布局用cardlayout

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问