Think of Ext2.0

Ext2.0的选择需要冒很大的风险，确实Ext在界面上能够有很大的提升，但是客户端机器的性能和网络方面的制约，再加上Ext本身没有很好的实现工具支持。从编码角度来说，可能需要花费更多的时间，这相对于直接的Web开发。如果项目中缺少美工，又对访问性能或并发量不是特别的要求的Web开发，可以考虑使用，譬如说安全设备的控制界面。当然项目组成员必须忍受大量javascript编码。

一般来说，Ext使用如下：

Ext 作为前台，Spring-Hibernate-Stucts作为整体的控制层，json-lib作为两者的交互。

当然后台是什么无所谓了，主要就是json字符串的拼凑

流程稍微记录了一下，后面有些不想写了，所以逻辑有些混乱。

1. Json-Lib

导入依赖库

commons-beanutils.jar

commons-collections-3.1.jar

commons-lang-2.1.jar

commons-logging.jar

ezmorph-1.0.4.jar

json-lib-2.2-jdk15.jar

测试Bean类

测试代码

Think of Ext2.0JSONObject jsonBean = JSONObject.fromObject(new TestBean());
Think of Ext2.0 System.out.println(jsonBean);
Think of Ext2.0
Think of Ext2.0 List list = new ArrayList();
Think of Ext2.0 list.add(new TestBean());
Think of Ext2.0 list.add(new TestBean());
Think of Ext2.0
Think of Ext2.0 JSONArray jsonList = JSONArray.fromObject(list);
Think of Ext2.0 System.out.println(jsonList);
Think of Ext2.0

输出：

{"date1":"111","date2":10}

[{"date1":"111","date2":10},{"date1":"111","date2":10}]

正式使用再做一下字符串处理

2. Ext使用

将整个Ext2.0的目录导入到MyEclipse中去

Docs可以全部删去，example 也可删去部分

只保留examples根目录下的内容

在examples\examples.js中的开头修改成

Ext.BLANK_IMAGE_URL = 'ext-2.0/resources/images/default/s.gif';

将指向Ext网站的s.gif文件指向本地

添加 ext-fix.js 修正radio等Form控件从json数据获取信息时，工作不正常的问题

在使用Ext项目中将所有的文件的编码调到UTF-8，这包括js文件和页面文件。因为Ext核心使用UTF-8编码，在表单提交和Grid时表现得比较明显。

使用Ext时，在页面文件的<head></head>中加入下面内容

Think of Ext2.0<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Think of Ext2.0 <title>Forms</title>
Think of Ext2.0 <link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css"/>
Think of Ext2.0
Think of Ext2.0 <!-- GC -->
Think of Ext2.0 <!-- LIBS -->
Think of Ext2.0
Think of Ext2.0 <script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
Think of Ext2.0 <!-- ENDLIBS -->
Think of Ext2.0
Think of Ext2.0 <script type="text/javascript" src="ext-2.0/ext-all.js"></script>
Think of Ext2.0 <script type="text/javascript" src="ext-2.0/build/locale/ext-lang-zh_CN.js"></script>
Think of Ext2.0 <script type="text/javascript" src="ext-2.0/ext-fix.js"></script>
Think of Ext2.0 <!-- Common Styles for the examples -->
Think of Ext2.0 <link rel="stylesheet" type="text/css" href="ext-2.0/examples/examples.css"/>
Think of Ext2.0 <script type="text/javascript" src="ext-2.0/examples/examples.js"></script>
Think of Ext2.0

这一部分可以制作页面模板

每个独立的页面 再加入自己独特的js逻辑，以dynamic.js为例

Think of Ext2.0<script type="text/javascript" src="dynamic.js"></script>

如果页面需要div的话，就加入即可。

3. Form

表单制作包括提交和数据内容的填充

制作Ext Form表单， 可以使用Ext form builder来简化一些操作。

Ext Form Builder同样使用Ext开发

Think of Ext2.0

首先添加一个Form Panel

然后将所需要的Form控件拖到Form Panel上即可

选择Show/Edit JSON就可以看到生成表单所需要的javascript语句

1) 表单提交

Think of Ext2.0

制作上面的这个表单

两个Edit，一个Combo和一个Radio，代码中有些布局信息也可以使用Form Builder来制作，但是Form Builder不支持%的布局方式，可以手工改写生成界面的json来达到效果。

表单提交时，使用各个控件name值作为请求参数

这里的控件都有些布局信息,可以忽略

l Edit控件

}

如果需要填写默认值的话，加入value参数即可

提交时也是使用最新的value值来提交的

l Radio控件

Radio使用inputValue来作为提交值，接收时也使用这个值

l Combo控件

Combo控件获取信息的Json字符串格式

]}

这里使用combo.jsp来返回这些信息

Think of Ext2.0<%@ page language="java" contentType="text/html; charset=UTF-8"
Think of Ext2.0 pageEncoding="UTF-8"%>
Think of Ext2.0<%
Think of Ext2.0
Think of Ext2.0response.setCharacterEncoding("UTF-8");
Think of Ext2.0
Think of Ext2.0String json = "{totalProperty:100,root:[";
Think of Ext2.0
Think of Ext2.0json += "{retrunValue:1, displayText:'中文1'},"
Think of Ext2.0+"{retrunValue:2, displayText:'中文2'},"
Think of Ext2.0+"{retrunValue:3, displayText:'中文3'},"
Think of Ext2.0+"{retrunValue:4, displayText:'中文4'},"
Think of Ext2.0+"{retrunValue:5, displayText:'中文5'},"
Think of Ext2.0+"{retrunValue:6, displayText:'中文6'}]}";
Think of Ext2.0
Think of Ext2.0response.getWriter().write(json);
Think of Ext2.0
Think of Ext2.0%>

获取的数据源

'totalProperty' json中记录的总数量

'root' json中数据开头的标示

'retrunValue' 和'displayText' 为数据对象的字段名称, 其中'retrunValue'为int类型

从combo.jsp中获取json数据将组装成定义数据源类型

Combo使用这个数据源

Combo的值为"retrunValue"，显示使用"displayText"

当然最后不要忘记将ds进行load

l 保存按钮将表单信息进行提交

保存按钮将表单信息提交给test.jsp，我们将所有的请求参数打印出来，并返回结果信息

Think of Ext2.0<%
Think of Ext2.0
Think of Ext2.0 request.setCharacterEncoding("UTF-8");
Think of Ext2.0

打印处来的例子

age=dfgg

name=ddfgdfg

sex=M

education=3

返回参数也必须是json字符串，success表示操作成功，或失败

action.result.data会取=后的值

Think of Ext2.0

2) 表单接收信息

只需要返回和表单相符的JSON字符串

{success:true,data:{"name":'你好',"age":'131',education:3,sex:'F'}}

formget.jsp文件内容

Think of Ext2.0<%@ page language="java" contentType="text/html; charset=UTF-8"
Think of Ext2.0 pageEncoding="UTF-8"%>
Think of Ext2.0<%
Think of Ext2.0
Think of Ext2.0out.print("{success:true,data:{"name":'你好',"age":'131',education:3,sex:'F'}}");
Think of Ext2.0
Think of Ext2.0%>
Think of Ext2.0
Think of Ext2.0

取消按钮从formget.jsp中获取这个字符串信息，来填充表单

Think of Ext2.0buttons : [
Think of Ext2.0...

当然也可以在开始时，就调用来导入数据

4. Grid

Think of Ext2.0

Grid所需要的json字符串

{totalProperty:100,root:[{id:1,name:'二月DD1',descn:'descn1'},{id:2,name:'二月DD2',descn:'descn2'},{id:3,name:'二月DD3',descn:'descn3'},{id:4,name:'二月DD4',descn:'descn4'},{id:5,name:'二月DD5',descn:'descn5'},{id:6,name:'二月DD6',descn:'descn6'},{id:7,name:'二月DD7',descn:'descn7'},{id:8,name:'二月DD8',descn:'descn8'},{id:9,name:'二月DD9',descn:'descn9'},{id:10,name:'二月DD10',descn:'descn10'}]}

Grid.jsp 根据起始值和限制数量决定返回json字符串

Think of Ext2.0<%@ page language="java" contentType="text/html; charset=UTF-8"
Think of Ext2.0 pageEncoding="UTF-8"%>
Think of Ext2.0<%
Think of Ext2.0//response.setCharacterEncoding("UTF-8");
Think of Ext2.0String start = request.getParameter("start");
Think of Ext2.0String limit = request.getParameter("limit");

获取数据时，如此访问grid.jsp文件

grid.jsp?start=1&limit=10

Grid使用

Grid中字段定制

Think of Ext2.0var cm = new Ext.grid.ColumnModel([

Header 显示名称

dataIndex 从ds查找字段

width 字段宽度

sortable 是否允许排序

Grid中使用数据源的定义，从grid.jsp中获取数据


定义GridPanel创建Grid

el为grid.html中id为grid的div块

ds 数据源

cm grid显示列定义

bbar bottom toolbal下面的工具栏

这里使用分页控件

最后ds导入时候，使用参数进行过滤

ds.load({params:{start:0,limit:10}});

扩展一下，将上面的Form放入到grid中来

在Grid上添加一个工具栏，通过单击工具栏中Add Something按钮，弹出上面的Form信息

Think of Ext2.0

修改如下：

在GridPanel添加在Grid上的Toolbar，Toolbar上添加三个按钮，并为Add Something添加单击事件onItemClick。

单击事件

Think of Ext2.0var win;

唯一需要注意的是保存和取消按钮需要加入Ext.Window做控制，并且要注意FormPanel和Ext.Windows所要渲染的div块，并且这些块必须在grid.html中进行定义

Think of Ext2.0<div id="hello-win" class="x-hidden">
Think of Ext2.0 <div class="x-window-header">Hello Dialog</div>
Think of Ext2.0 <div id="hello-tabs">
Think of Ext2.0 <!-- Auto create tab 1 -->
Think of Ext2.0 <div class="x-tab" title="Hello World 1">
Think of Ext2.0 <p>Hello...</p>
Think of Ext2.0 </div>
Think of Ext2.0 <!-- Auto create tab 2 -->
Think of Ext2.0 <div class="x-tab" title="Hello World 2">
Think of Ext2.0 <p>... World!</p>
Think of Ext2.0 </div>
Think of Ext2.0 </div>
Think of Ext2.0</div>
Think of Ext2.0

5. Tree

Think of Ext2.0

直接使用Ext例子

Tree所需要的json字符串

[{id:300,text:'01',cls:'task-folder',children:[{id:'2',text:'01-01',leaf:true, cls:'task'},{id:'3',text:'01-02',children:[{id:'4',text:'01-02-01',leaf:true},{id:'5',text:'01-02-02',leaf:true}]},{id:'6',text:'01-03',leaf:true}]},{id:'7',text:'02',leaf:true}]

text"-->显示的文本
"id"-->id值 ，单击事件时可以使用

"leaf"-->Boolean值，如果"叶子"是真的话，则不能包含子节点Children nodes

"cls"-->选用的样式，通常在这里选定图标

"href"-->指定的url，还有一个"hrefTarget"的属性

children -〉表示子节点信息

在Record.css中自定了两个定义的css，task和task-folder

.task .x-tree-node-icon {

background-image:url(icons/cog.png) ;

}

.task-folder .x-tree-node-icon{

background-image:url(icons/folder_go.png) !important;

}

Json字符串中就使用了这个值

Tree使用如下，相对比较简单

Think of Ext2.0var Tree = Ext.tree;
Think of Ext2.0


6. Layout

Think of Ext2.0

左边为树型控件，右边为TabPanel，显示的页面

当左边树型控件被点击后，右边的所有的Tab进行变化，访问与树型列表id相对应的页面内容

l 布局使用

布局一般使用Viewport

var viewport = new Ext.Viewport({

只要注意region和el即可

region:'north',

el:'north-div',

el和contentEl的区别

el是第一层div， contentEl一般指向更内部的div

l Tab使用

普通的Tab访问未有无法显示js的问题

{

title: 'Ajax Tab 1',

autoLoad:{url:'grid.html',scripts:true}

}

所以就使用了Ext论坛中提供的一个Iframe的扩展 Ext.ux.ManagedIFrame

使用时将miframe.js文件导入即可

l 树型控件

要给树型控件添加单击事件

单击后，通过查找ManagedIFrame形成的Tab页的id，并且将其属性src改变来达到Tab页内容改变的效果

Think of Ext2.0Ext.get('person').dom.src = 'grid.html?selectedid='+node.id;

参考：

Ext2_0 form使用实例 - 天晓得的专栏 - CSDNBlog

Ext 2_0布局实例

[2_0][SOLVED] Best practices for getting - saving form data - Ext JS Forums

[EXT Develop Log]--comboBoxradioFix it! - kkbear - JavaEye技术网站

ext学习-tree组件-在线阅读-新书城

对《Ext2_0 form使用实例》的一点补充 - 天晓得的专栏 - CSDNBlog

用Ext 2_0 combobox 做的省份和城市联动选择框 - 天晓得的专栏 - CSDNBlog

关于ext和struts的交互 - Allen_CD_China - JavaEye技术网站

从Java 类产生json(json-lib) - windfree - BlogJava

学习EXT第XX天

流氓临远, 没人性土豆's ext tutorial

And Others, I can't remember

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode