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

来源：互联网发布：比价神器软件下载编辑：程序博客网时间：2024/05/20 19:30

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>

0 1

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

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