Ext JS4序列教程之一 ：Layout布局
2014-11-14 17:51
330 查看
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的类库。
注意，大家可以把EXT JS类库定义在一个JSP中，当其他页面要引用的时候，可以使用JSP的包含动作将类库引入，这样也符合代码重用的目的，同时要把ext-lang-zh_CN.js这个文件引进来，这个是Ext
JS的语言文件，用来汉化EXT JS，大家看吧，EXT JS还是很重视中国市场的，至少iPhone 6的首发国家没有中国。
接下来讲解几个EXT JS的函数，第一个函数是页面加载函数，我们后续的代码都要写在这个方法里面，这个函数用来初始化EXT JS，当页面加载的时候，会自动触发这个函数，代码如下：
第二个函数是创建EXTJS对象实例的函数，EXT JS4基本上是完全面象对象的写法了。这与EXT JS4以前的版本有不一致的地方，以前的版本可以使用new关键字创建对象，但是在EXT
JS4中这么写的话，会有各种各样的问题，所以，我们还是按照EXT JS4官方的例子来写。
第二步：创建左侧面板
第三步：创建顶部面板
第四步：创建中间面板
细心的朋友们大概看到了，创建中间面板和创建左、顶部面板有不一样的地方，那就是对象的包名由Ext.panel.Panel变成了mainTabPanel，mainTabPanel这个面板是我们自定义的一个面板组件，因为中间的面板我们需要使用tab选项卡来布局界面，以便容纳更多的功能界面在中间面板中，下面我们来定义一个mainTabPanel：
第五步：创建容器视图
视图布局我们采用border布局的方式，代码如下：
好了，到此为止，我们的border布局就大功告成了，下面附上完整的代码：
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 布局容器 Layout Container@GTK+ 2.0 中文教程连载
- [转载]ASP.NET MVC3 系列教程 – 新的Layout布局系统
- ASP.NET MVC3 系列教程 – 新的Layout布局系统
- OpenCart之布局(Layout)教程
- ASP.NET MVC3 系列教程 – 新的Layout布局系统
- Android基础教程(二)之五大布局对象---FrameLayout,LinearLayout ,AbsoluteLayout,RelativeLayout,TableLayout.
- ASP.NET MVC3 系列教程 – 新的Layout布局系统
- Android开发教程 --- 布局(线性布局 Linear Layout )(相对布局 Relative Layout)
- Android基础教程之五大布局对象------FrameLayout,LinearLayout,AbsoluteLayout,RelativeLayout,TableLayout
- OpenCart之布局(Layout)教程
- Android开发教程 --- 布局(线性布局 Linear Layout )(相对布局 Relative Layout)
- Android开发视频教程之九（Activity布局初步一：LinearLayout和TableLayout）
- Android基础教程(二)之五大布局对象—FrameLayout,LinearLayout ,AbsoluteLayout,RelativeLayout,TableLayout
- Android基础教程(二)之五大布局对象---FrameLayout,LinearLayout ,AbsoluteLayout,RelativeLayout,TableLayout.
- 无废话ExtJs 入门教程十六[页面布局：Layout]
- ASP.NET MVC3 系列教程 – 新的Layout布局系统
- 【Android 开发教程】TableLayout表格布局
- Zend Framework教程-Zend_Layout-布局\助手Layout
- 自己开发的web快速开发平台教程(1)，布局(Layout)的使用教程
- Android 用style 简化 layout 布局文件（简单教程， So easy）