20140725

来源：互联网发布：网络招聘渠道有哪些编辑：程序博客网时间：2024/04/29 08:52
Ext完成了对页面的布局
var MainPanel, WestPanel, panel1, panel2, panel3, CenterPanel;Ext.onReady(Start);function Start() {// 创建MainPanelMainPanel = Ext.create('Ext.panel.Panel', {width : 1365,// 这么大刚好适应chrome浏览器height : 665,layout : 'border',renderTo : Ext.getBody(),title : 'Titansec 研发部  智恒彪'});// 创建WestPanel，布局为accordionWestPanel = Ext.create('Ext.panel.Panel', {width : '20%',region : 'west',title : '菜单',layout : 'accordion',margin : 5,layoutConfig : {titleCollapse : false,animate : true,activeOnTop : true}});// 创建webSiteStorevar webSiteStore = Ext.create('Ext.data.TreeStore', {root : {expanded : true,text : "根文件夹",children : [{id : "baidu",text : "baidu",expanded : true,children : [{id : "CSDN",text : "CSDN",leaf : true}]}, {id : "sina",text : "sina",expanded : true,children : [{id : "QQ",text : "QQ",leaf : true}]}]}});// 创建panel1,store为treeStorevar panel1 = Ext.create('Ext.tree.Panel', {title : '网站',store : webSiteStore,rootVisible : true,// 通过控制这个可以达到显示上好像有“多个根节点”的效果listeners : {/* * view:触发这个事件的对象，在这里是Ext.tree.Panel的实例panel1 index:选项的索引 * console.log(record.id); * result:Ext.data.Store.ImplicitModel-ext-gen1026-QQ * 属于选项的记录 * console.log(item.id);result:treeview-1014-record-QQ 选项元素 * console.log(record.raw.id);//result:QQ * raw:如果本模型是通过reader创建的,那么raw就是创建本模型的原始数据 */itemclick : function(view, record, item, index) {var n = CenterPanel.getComponent(record.raw.id);if (!n) { // 判断是否已经打开该面板   n = CenterPanel.add({'id' : record.raw.id,'title' : record.raw.text,closable : true, // 通过html载入目标页   html : '<iframe src=http://www.'+ record.raw.id+ '.com width=100% height=100% ></iframe>'});}CenterPanel.setActiveTab(n);}}});// 创建localStorevar localStore = Ext.create('Ext.data.TreeStore', {root : {expanded : true,text : "本地",children : [{id : "ClockByJS",text : "ClockByJS",leaf : true}, {id : "ClockByExt",text : "ClockByExt",leaf : true}]}});// 创建Panel2,store为localStorevar panel2 = Ext.create('Ext.tree.Panel', {title : '本地',store : localStore,rootVisible : true,listeners : {itemclick : function(view, record, item, index) {var n = CenterPanel.getComponent(record.raw.id);if (!n) { // 判断是否已经打开该面板   n = CenterPanel.add({'id' : record.raw.id,'title' : record.raw.text,closable : true, // 通过html载入目标页   html : '<iframe src='+ record.raw.id+ '.html width=100% height=100% ></iframe>'});}CenterPanel.setActiveTab(n);}}});CenterPanel = Ext.create('Ext.TabPanel', {margin : '5 5 5 5',// top,right,bottom,leftregion : 'center',// 因为它已经是center，再对其设置大小是无效的layout : 'fit',deferredRender : false,activeTab : 0,resizeTabs : true,minTabWidth : 115,tabWidth : 135,enableTabScroll : true,html : '<iframe src="http://www.baidu.com" width=100% height=100% ></iframe>'// 这里width=100%改成width:100%时不会生效});WestPanel.add(panel1);WestPanel.add(panel2);WestPanel.add(panel3);MainPanel.add(WestPanel);MainPanel.add(CenterPanel);}
0 0