Ext学习2——主页面

本文介绍如何使用ExtJS组件库构建管理系统界面,包括布局划分、菜单交互及内容展示等功能实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        学习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;
}


结果展现如图:

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值