20140725

Ext完成了对页面的布局

var MainPanel, WestPanel, panel1, panel2, panel3, CenterPanel;
Ext.onReady(Start);
function Start() {
	// 创建MainPanel
	MainPanel = Ext.create('Ext.panel.Panel', {
				width : 1365,// 这么大刚好适应chrome浏览器
				height : 665,
				layout : 'border',
				renderTo : Ext.getBody(),
				title : 'Titansec 研发部  智恒彪'
			});

	// 创建WestPanel，布局为accordion
	WestPanel = Ext.create('Ext.panel.Panel', {
				width : '20%',
				region : 'west',
				title : '菜单',
				layout : 'accordion',
				margin : 5,
				layoutConfig : {
					titleCollapse : false,
					animate : true,
					activeOnTop : true
				}
			});
	// 创建webSiteStore
	var 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为treeStore
	var 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);
			}
		}
	});

	// 创建localStore
	var 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为localStore
	var 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,left
		region : '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);

}