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>

Ext JS4序列教程之一：Layout布局相关推荐

ExtJS 4.2 教程-08：布局系统详解
ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用 ...
ExtJS中layout布局详解
layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种,现一一举例: 1.absolute根据字面意思就知道,是根 ...
Springboot 使用thymeleaf模板layout布局
使用layout布局前应该在pom文件中导入thymeleaf(dialect)依赖:如下 <properties><project.build.sourceEncoding> ...
Android开发中遇到的问题(二)——新建android工程的时候eclipse没有生成MainActivity和layout布局...
2019独角兽企业重金招聘Python工程师标准>>> 一.新建android工程的时候eclipse没有生成MainActivity和layout布局最近由于工作上的原因,开始学 ...
一天搞定CSS：支持IE的Layout布局--16
1.BFC和Layout区别: BFC和Layout的作用是一样的,只是对浏览器的支持不同而已. BFC- -标准浏览器所具有的 Layout- -IE浏览器所具有的 BFC详解地址:http://b ...
EasyUI中layout布局的简单使用
场景效果布局选项(Layout Options) 名称类型描述默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签 ...
【-】WebKit Layout (布局)
WebKit 在渲染页面之前,需要确定各个元素的位置.大小,而这个过程就是layout(布局).下面,我们对layout的主要过程进行一番说明. 一.FrameView::layout方法 Frame ...
php layout布局文件,layout（布局） - jQuery EasyUI中文文档 - EasyUI中文站
Layout(布局) 使用$.fn.layout.defaults重写默认值对象. 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽 ...
WPF教程六：布局之Grid面板（转）
WPF教程六:布局之Grid面板 Grid:网格面板 Grid顾名思义就是"网格",以表格形式布局元素,对于整个面板上的元素进行布局,它的子控件被放在一个一个事先定义好的小格子里面 ...

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

Ext JS4序列教程之一：Layout布局相关推荐

最新文章

热门文章

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

Ext JS4序列教程之一 ：Layout布局相关推荐

最新文章

热门文章

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

Ext JS4序列教程之一：Layout布局相关推荐