Ext JS4序列教程之一 ：Layout布局

1、序言

EXT JS4序列教程主要讲解WEB开发中一些常用的组件，例如Tree,Grid,Combobox,form等，EXT JS4的出现为广大程序员带来了福音，我们可以用较少的代码，实现很炫丽的效果，我在很多项目的架构中都使用EXT JS作为核心的WEB框架，配合jQuery框架，大家很容易实现一个用户体验很不错的软件系统（我们称之为高大上，哈哈哈）。EXT JS自推出以来，其性能就饱受开发的砰击，在EXT JS4以前的版本，性能确实不是很好，不过比起jQuery Easy UI，那还是要好很多的，从EXT JS4.2以后的版本开始，性能还是很不错的，代码也比较精简，结构清晰，纯面像对象的语法，BUG也较EXT JS4.1少了很多，相对比较稳定，EXT JS4推出了MVC模式的设计风格，使得代码结构更加清晰，可读性更好，非常类似于使用JAVA SWING和C# WinForm开发，但如果没有接触过AJAX框架的程序员，第一次使用EXT JS4会碰到各种各样的问题，本教程教从零开始讲解EXT JS4,从客户端到服务器都有完整的代码，服务端使用SSH框架，用注解方式进行开发，抛弃了繁锁的配置文件（我本人相当讨厌配置文件，在我设计的架构中，配置文件几乎为零）。关于源码，由于Google无法访问（IT业的一大悲剧），大家可以到CSDN上下载。

         本文从实际应用出发，讲解与WEB系统开发息息相关的实例，EXTJS功能很丰富，由有时间的原因，我不会所有的功能都讲到（我都是利用业余时间写教程，目前在一家公司担任高级架构师，工作很忙，我写教程主要是在互联网上和大家一起分享自己的开发经验），大家按照本套系列教程来逐步开发代码，可以实现一个功能比较完整的WEB系统。本教程后端使用的架构为Struts2+Hibernate4+Spring4，后续我将会逐一介绍SSH架构的搭建。关于ASP.NET的教程，会在后续推出。

 

作者：山人

                                                                                                                                              2014/11/14于北京

 

 

1、 Layout布局

ExtJS的布局有很多，主要有accordion、border、column、hbox等，本教程我们会用到accordion、border、column三种布局。这三个布局是Ext JS里面比较牛X的布局了，可以实现比较复杂的软件主界面，实际开发中，主要也是用这类布局。用这三类布局，我们可以开发出类似于Eclipe的透视图，Visual Stdio的视窗布局等，本章我们用EXT JS实现一个上、左、中的布局，效果如下：

 

好了，接下来是大家比较关心的部份了，那就是这个效果怎么用代码实现。

 

第一步：我们需要在JSP中引入Ext JS4的类库。

<%@ page pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%-- 样式文件，加载全部样式 --%>
<link rel="stylesheet" type="text/css" href="<%=path%>/javascript/extjs-4.1.0/resources/css/ext-all.css" />
<%-- ext js 文件 --%>
<script type="text/javascript" src="<%=path%>/javascript/extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript" src="<%=path%>/javascript/extjs-4.1.0/ext-lang-zh_CN.js"></script>

 

注意，大家可以把EXT JS类库定义在一个JSP中，当其他页面要引用的时候，可以使用JSP的包含动作将类库引入，这样也符合代码重用的目的，同时要把ext-lang-zh_CN.js这个文件引进来，这个是Ext JS的语言文件，用来汉化EXT JS，大家看吧，EXT JS还是很重视中国市场的，至少iPhone 6的首发国家没有中国。

 

接下来讲解几个EXT JS的函数，第一个函数是页面加载函数，我们后续的代码都要写在这个方法里面，这个函数用来初始化EXT JS，当页面加载的时候，会自动触发这个函数，代码如下：

Ext.onReady(function() {………}

 

第二个函数是创建EXTJS对象实例的函数，EXT JS4基本上是完全面象对象的写法了。这与EXT JS4以前的版本有不一致的地方，以前的版本可以使用new关键字创建对象，但是在EXT JS4中这么写的话，会有各种各样的问题，所以，我们还是按照EXT JS4官方的例子来写。

Ext.create('Ext.panel.Panel',{…})

第二步：创建左侧面板

/**
	*定义顶左侧面板
	*/
    var leftPanel = Ext.create('Ext.panel.Panel', {
                            region : 'west',
                            title : '导航栏',
                            width : 230,
                            layout : 'accordion',
						   split:true,
                            collapsible : true//是否可以折叠收缩
     });

第三步：创建顶部面板

/**
	*创建顶部面板
	*/
    var topPanel = Ext.create('Ext.panel.Panel', {
                            region : 'north',
                            height : 55
    });

 

第四步：创建中间面板

/**
	*创建中间面板
	*/
    var centerPanel = Ext.create('mainTabPanel', {
                            region : 'center',
                            layout : 'fit',
                            tabWidth : 120,
                            items : [{
                                title : '首页'
                            }]
    });

 

细心的朋友们大概看到了，创建中间面板和创建左、顶部面板有不一样的地方，那就是对象的包名由Ext.panel.Panel变成了mainTabPanel，mainTabPanel这个面板是我们自定义的一个面板组件，因为中间的面板我们需要使用tab选项卡来布局界面，以便容纳更多的功能界面在中间面板中，下面我们来定义一个mainTabPanel：

/**
	*定义右侧面版
	*/
	Ext.define('mainTabPanel', {
		extend: 'Ext.tab.Panel',
		//重写页面加载方法，在该方法中，定义一个iframe，用来装载JSP页面
		loadPage:function(url,id,title,icon,reload){
			var tab = this.getComponent(id);
			if(tab){
				this.setActiveTab(tab);
				var p = this.add(new Ext.panel.Panel({
						id:id,
						title:title,
						closable:true,
						icon:icon,
						html:'<iframe src="' + url + '"width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>'
					
				}));
				this.setActiveTab(p);
			}
		}
	 });

 

第五步：创建容器视图

视图布局我们采用border布局的方式，代码如下：

  /**
		* 创建视图
		*/
		Ext.create('Ext.container.Viewport', {
					layout : 'border',
					renderTo : Ext.getBody(),
					items : [ topPanel, leftPanel, centerPanel ]
				});
		});

 

好了，到此为止，我们的border布局就大功告成了，下面附上完整的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="include/Ext4Lib.jsp"></jsp:include>
<title>功能菜单</title>
<script type="text/javascript">
Ext.onReady(function() {
	/**
	*定义右侧面版
	*/
	Ext.define('mainTabPanel', {
		extend: 'Ext.tab.Panel',
		//重写页面加载方法，在该方法中，定义一个iframe，用来装载JSP页面
		loadPage:function(url,id,title,icon,reload){
			var tab = this.getComponent(id);
			if(tab){
				this.setActiveTab(tab);
				var p = this.add(new Ext.panel.Panel({
						id:id,
						title:title,
						closable:true,
						icon:icon,
						html:'<iframe src="' + url + '"width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>'
					
				}));
				this.setActiveTab(p);
			}
		}
	 });
	
	/**
	*创建顶部面板
	*/
    var topPanel = Ext.create('Ext.panel.Panel', {
                            region : 'north',
                            height : 55
    });
    /**
	*定义顶左侧面板
	*/
    var leftPanel = Ext.create('Ext.panel.Panel', {
                            region : 'west',
                            title : '导航栏',
                            width : 230,
                            layout : 'accordion',							split:true,
                            collapsible : true//是否可以折叠收缩
     });
    /**
	*创建中间面板
	*/
    var centerPanel = Ext.create('mainTabPanel', {
                            region : 'center',
                            layout : 'fit',
                            tabWidth : 120,
                            items : [{
                                title : '首页'
                            }]
    });
	/**
	* 创建视图
	*/
	Ext.create('Ext.container.Viewport', {
			layout : 'border',
			renderTo : Ext.getBody(),
			items : [ topPanel, leftPanel, centerPanel ]
		});
	});
</script>
</head>
<body></body>
</html>