第五章-ExtJs-layout

layout

本章任务

1.layout

 

var app = {};

Ext.onReady(function() {

			/**
			 * 根节点
			 */
			var _root = new Ext.tree.AsyncTreeNode({

						text : 'root',
						expanded : true
					});

			/**
			 * 子节点
			 */
			var _loader = new Ext.tree.TreeLoader({

						dataUrl : './ch04.jsp'
					});
			
			/**
			 * add tablePanel
			 */
			app.addTab = function(obj){
				
				//get compant by id
				var tab = Ext.getCmp(obj.id);
				//exits
				if(tab){
					_center.setActiveTab(tab);
				}else{
					
				var newTab = new Ext.Panel({
					id:obj.id,
					title:obj.text
				});
				
				newTab.html='<iframe src=\'a.html\' width="100%" height="100%" frameborder="0" scrolling="no"></iframe>'
				
				_center.add(newTab);
			   _center.setActiveTab(newTab);
				}
				
			};
			
			/**
			 * region in center
			 */
			var _center = new Ext.TabPanel({
				region : 'center',
				contentEl : 'center-div'
			});
			
			var _border = new Ext.Viewport({

						layout : 'border',
						items : [{
									region : 'north',
									collapsible : true,
									contentEl : 'north-div',// positon to
															// north-div
									html : '<h1>north</h1>'
								}, {
									region : 'west',
									collapsible : true,
									contentEl : 'west-div',
									width : 200,
									root : _root,
									loader : _loader,
									rootVisible : true,
									listeners : {
										click : function(_element) {
											//alert(parent);
											//parent.mainFrame.location.href = 'a.html';
											app.addTab(_element);
										}
									},
									xtype : 'treepanel'
								},_center, {
									region : 'east',
									collapsible : true,
									contentEl : 'east-div',
									html : '<h1>east</h1>'
								}, {
									region : 'south',
									collapsible : true,
									contentEl : 'south-div',
									html : '<h1>south</h1>'
								}]
					});

		})

 

本章目标

1. 理解layout