Ext学习2——主页面

        学习Ext 组件使用， 做一个管理系统的index主界面

            1.   使用布局组件Ext.Viewport，将页面分为上，左，右，中，分别使用属性region 的north，west，east和center

            2.    在上面 north 板块，显示系统共用操作和欢迎信息

            3.    在左边 west 板块，使用 Ext.tree.Panel 组件显示用户功能菜单信息

            4.    在右边 east 板块，显示通知信息

            5.    在中心内容  center  板块，使用 Ext.panel.Panel 组件，内部存放一个 iframe，默认显示主页信息

            6.   实现 tree 与 center中的iframe互动，当点击tree中不同的菜单，iframe显示不同页面。

 

代码如下

Ext.onReady(function() {

			var fcstore = Ext.create('Ext.data.TreeStore', {
				fields : [ 'nodeId', 'text', 'children', 'url' ],
				proxy : {
					type : "ajax",
					url : xmname + "/login/loadfunction.json",
					reader : {
						type : "json"
					},
					listeners : {
						exception : function(theproxy, response, operation,
								options) {
							//异常处理
							// /handleException(response);
						}
					}
				},
				root : {
					expanded : true,
					text : "My Root"
				},
				autoLoad : false,
			});

			var treex = Ext.create('Ext.tree.Panel', {
				region : 'west',
				collapsible : true,
				frame : true,
				store : fcstore,
				autoShow : false,
				height : 430,
				width : 250,
				rootVisible : false,
				useArrows : true,
				listeners : {
					'itemclick' : tree_event
				}
			});

			var contents = Ext
					.create(
							'Ext.panel.Panel',
							{
								frame : true,
								region : 'center',
								defaults : {
									autoScroll : true,
									margin : '0 0 0 0'
								},
								layout : {
									type : 'hbox',
									align : 'stretch'
								},
								id : "pn_content",
								title : "主页",
								anchor : '90%',
								loadMask : '页面加载中...',
								html : "<iframe src='"
										+ xmname
										+ "/CommonControl.config?page=/main.jsp'  id='fr_content' name='fr_content' width='100%' height='200' frameBorder=0></iframe>",
								listeners : {
									'afterrender' : content_loaded
								}
							});

			function content_loaded() {
				Ext.get('fr_content').dom.height = document.body.scrollHeight - 30;
			}

			var northPanel = {
				frame : true,
				region : 'north',
				height : 28,
				margin : '0 0 0 0',
				defaults : {
					margin : '0 0 0 0',
					border : 0
				},
				layout : {
					type : 'hbox',
					align : 'stretch'
				},
				items : [ {
					border : false,
					flex : 11,
					xtype : 'label',
					style : {
						fontSize : '14',
						fontWeight : 'bold',
					},
					text : "欢迎管理系统",
					listeners : {
						'afterrender' : panel_loaded
					}
				}, {
					border : false,
					text : "系统通知",
					xtype : 'label',
					style : {
						fontSize : '14',
						fontWeight : 'bold',
						cursor : 'pointer'
					},
					flex : 1
				}, {
					border : false,
					text : "修改密码",
					xtype : 'label',
					style : {
						fontSize : '14',
						fontWeight : 'bold',
						cursor : 'pointer'
					},
					flex : 1
				}, {
					border : false,
					text : "系统导航",
					xtype : 'label',
					style : {
						fontSize : '14',
						fontWeight : 'bold',
						cursor : 'pointer'
					},
					flex : 1
				}, {
					border : false,
					text : "退出系统",
					xtype : 'label',
					style : {
						fontSize : '14',
						fontWeight : 'bold',
						cursor : 'pointer'
					},
					listeners : {
						click : {
							element : 'el', // bind to the underlying el
											// property on the panel
							fn : function() {
								Ext.Ajax.request({
									url : xmname + '/login/userExit.json',
									method : 'POST',
									success : function(response, options) {
										window.location = xmname;
									},
									failure : function(response, options) {
										window.location = xmname;
									}
								});
							}
						}
					},
					flex : 1
				} ],
			};

			var viewport = Ext.create("Ext.Viewport", {
				layout : {
					type : 'border',
					padding : 3
				},
				defaults : {
					split : true,
					border : 0,
				},
				items : [ northPanel, treex, {
					frame : true,
					region : 'east',
					title : '消息栏',
					collapsible : true,
					width : 250,
					collapsed : true,
					items : []
				}, contents ],
				listeners : {
					'afterrender' : treefc_load
				}

			});

			function treefc_load(panel, event) {
			}

			function tree_event(node, event) {
				if (event.data.children && event.data.children.length > 0) {
					return;
				}
				if (contents.showid && event.data.nodeId == contents.showid) {
					return;
				}
				Ext.get('fr_content').dom.src = xmname + event.data.url;
				contents.setConfig('title', event.data.text);
				contents.showid = event.data.nodeId;
			}
			;

			function panel_loaded(panel, event) {
				Ext.Ajax.request({
					url : xmname + '/login/getUserinfo.json',
					method : 'POST',
					success : function(response, options) {
						var o = Ext.decode(response.responseText);
						if (o && o.success) {
							panel.setText("来自" + o.loginDto.orgname + "的操作员: "
									+ o.loginDto.username
									+ ",欢迎您使用系统");
						} else {
							// /handleException(response);
						}
					},
					failure : function(response, options) {
						Ext.MessageBox.alert('错误', '服务器出现错误请稍后再试！');
					},
					listeners : {
						exception : function(theproxy, response, operation,
								options) {
							// handleException(response);
						}
					}
				});
			}
			;

			var firebugWarning = function() {
				var cp = Ext.create('Ext.state.CookieProvider');
				if (window.console && window.console.firebug
						&& !cp.get('hideFBWarning')) {
					var tpl = Ext
							.create(
									'Ext.Template',
									'<div id="fb" style="border: 1px solid #FF0000; background-color:#FFAAAA; display:none; padding:15px; color:#000000;"><b>Warning: </b> Firebug is known to cause performance issues with Ext JS. <a href="#" id="hideWarning">[ Hide ]</a></div>');
					var newEl = tpl.insertFirst('all-demos');

					Ext.fly('hideWarning').on('click', function() {
						Ext.fly(newEl).slideOut('t', {
							remove : true
						});
						cp.set('hideFBWarning', true);
					});
					Ext.fly(newEl).slideIn();
				}
			};

			var hideMask = function() {
				Ext.get('loading').remove();
				Ext.fly('loading-mask').animate({
					opacity : 0,
					remove : true,
					callback : firebugWarning
				});
			};

			Ext.defer(hideMask, 250);
		});


function relogin(){
	this.location = xmname;
}

结果展现如图：