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类
public class TestBean ...{
String date1 = "111";
int date2 = 10;
public String getDate1() ...{
return date1;
}
public void setDate1(String date1) ...{
this.date1 = date1;
public int getDate2() ...{
return date2;
public void setDate2(int date2) ...{
this.date2 = date2;
测试代码
JSONObject jsonBean = JSONObject.fromObject(new TestBean());
System.out.println(jsonBean);
List list = new ArrayList();
list.add(new TestBean());
JSONArray jsonList = JSONArray.fromObject(list);
System.out.println(jsonList);
输出：
{"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.form.BasicForm.prototype.setValues = function(values)...{
if(values instanceof Array)...{
for(var i = 0, len = values.length; i < len; i++)...{
var v = values[i];
var f = this.findField(v.id);
if(f)...{
if ( f.getEl().dom.type == 'radio' ) ...{
var group = this.el.dom.elements[f.getName()];
for (var i=0; i < group.length; i++ ) ...{
if(group[i].__ext_field) ...{
group[i].__ext_field.setValue(group[i].value == v);
if(this.trackResetOnLoad)...{
group[i].__ext_field.originalValue = group[i].__ext_field.getValue();
else
...{
f.setValue(v.value);
f.originalValue = f.getValue();
}else...{
var field, id;
for(id in values)...{
if(typeof values[id] != 'function' && (field = this.findField(id)))...{
if( field.getEl().dom.type == 'radio' ) ...{
var group = this.el.dom.elements[field.getName()];
group[i].__ext_field.setValue(group[i].value == values[id]);
field.setValue(values[id]);
field.originalValue = field.getValue();
return this;
Ext.form.Radio.prototype.onRender = function(ct, position) ...{
Ext.form.Radio.superclass.onRender.call(this, ct, position);
this.el.dom.__ext_field = this;
Ext.form.Radio.prototype.setValue = function(v) ...{
if(v === true || v === 'true' || v == '1' || v === false || v === 'false' || v == '0') ...{
// Select all radios of this group
var radios = this.el.up('form').select('input[type=radio]');
// Uncheck all other values
for(var i = 0; i < radios.elements.length; i++) ...{
if(radios.elements[i].__ext_field && radios.elements[i].__ext_field != this && radios.elements[i].name == this.el.dom.name)
radios.elements[i].__ext_field.checked = false;
// DOM checked is set by the browser
radios.elements[i].__ext_field.fireEvent("check", this, this.checked);
this.checked = (v === true || v === 'true' || v == '1');
if(this.el && this.el.dom) ...{
this.el.dom.checked = this.checked;
this.fireEvent("check", this, this.checked);
在使用Ext项目中将所有的文件的编码调到UTF-8，这包括js文件和页面文件。因为Ext核心使用UTF-8编码，在表单提交和Grid时表现得比较明显。
使用Ext时，在页面文件的<head></head>中加入下面内容
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="ext-2.0/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="ext-2.0/ext-fix.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="ext-2.0/examples/examples.css"/>
<script type="text/javascript" src="ext-2.0/examples/examples.js"></script>
这一部分可以制作页面模板
每个独立的页面 再加入自己独特的js逻辑，以dynamic.js为例
<script type="text/javascript" src="dynamic.js"></script>
如果页面需要div的话，就加入即可。
3. Form
表单制作包括提交和数据内容的填充
制作Ext Form表单， 可以使用Ext form builder来简化一些操作。
Ext Form Builder同样使用Ext开发
首先添加一个Form Panel
然后将所需要的Form控件拖到Form Panel上即可
选择Show/Edit JSON就可以看到生成表单所需要的javascript语句
1) 表单提交
制作上面的这个表单
两个Edit，一个Combo和一个Radio，代码中有些布局信息也可以使用Form Builder来制作，但是Form Builder不支持%的布局方式，可以手工改写生成界面的json来达到效果。
表单提交时，使用各个控件name值作为请求参数
这里的控件都有些布局信息,可以忽略
l Edit控件
columnWidth : .5,
layout : 'form',
border : false,
items : [...{
xtype : 'textfield',
fieldLabel : '姓名',
name : 'name',
anchor : '90%'
}]
如果需要填写默认值的话，加入value参数即可
提交时也是使用最新的value值来提交的
l Radio控件
columnWidth : .25,
style : 'margin-top:5px',
xtype : 'radio',
fieldLabel : '性别',
boxLabel : '男',
name : 'sex',
checked : true,
inputValue : 'M',
anchor : '95%'
}, ...{
labelWidth : 0,
labelSeparator : '',
hideLabels : true,
fieldLabel : '',
boxLabel : '女',
inputValue : 'F',
Radio使用inputValue来作为提交值，接收时也使用这个值
l Combo控件
Combo控件获取信息的Json字符串格式
...{totalProperty:100,root:[...{retrunValue:1, displayText:'中文1'},...{retrunValue:2, displayText:'中文2'},...{retrunValue:3, displayText:'中文3'},...{retrunValue:4, displayText:'中文4'},...{retrunValue:5, displayText:'中文5'},...{retrunValue:6, displayText:'中文6'}]}
这里使用combo.jsp来返回这些信息
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
response.setCharacterEncoding("UTF-8");
String json = "{totalProperty:100,root:[";
json += "{retrunValue:1, displayText:'中文1'},"
+"{retrunValue:2, displayText:'中文2'},"
+"{retrunValue:3, displayText:'中文3'},"
+"{retrunValue:4, displayText:'中文4'},"
+"{retrunValue:5, displayText:'中文5'},"
+"{retrunValue:6, displayText:'中文6'}]}";
response.getWriter().write(json);
%>
获取的数据源
var ds = new Ext.data.Store(...{
proxy: new Ext.data.HttpProxy(...{url:'combo.jsp'}),
reader: new Ext.data.JsonReader(...{
totalProperty: 'totalProperty',
root: 'root'
}, [
...{name: 'retrunValue', type: 'int'},
...{name: 'displayText'}
])
});
'totalProperty' json中记录的总数量
'root' json中数据开头的标示
'retrunValue' 和'displayText' 为数据对象的字段名称, 其中'retrunValue'为int类型
从combo.jsp中获取json数据将组装成定义数据源类型
Combo使用这个数据源
xtype:'combo',
store: ds,
valueField :"retrunValue",
displayField: "displayText",
mode: 'local',
forceSelection: true,
blankText:'请选择学历',
emptyText:'选择学历',
hiddenName:'education',
editable: false,
triggerAction: 'all',
allowBlank:false,
fieldLabel: '学历',
name: 'education',
anchor:'90%'
Combo的值为"retrunValue"，显示使用"displayText"
当然最后不要忘记将ds进行load
l 保存按钮将表单信息进行提交
buttons : [ ...{
text : '保存',
handler : function() ...{
if (simpleForm.form.isValid()) ...{
this.disabled = true;
simpleForm.form.doAction('submit', ...{
url : 'test.jsp',
method : 'post',
params : '',
success : function(form, action) ...{
Ext.Msg.alert('成功', action.result.data);
this.disabled = false;
//document.location.href = 'hello.html';
},
failure : function() ...{
Ext.Msg.alert('失败', '抱歉');
保存按钮将表单信息提交给test.jsp，我们将所有的请求参数打印出来，并返回结果信息
request.setCharacterEncoding("UTF-8");
try...{
String name;
java.util.Enumeration pNames=request.getParameterNames();
while(pNames.hasMoreElements())...{
name=(String)pNames.nextElement();
System.out.println(name+"="+request.getParameter(name));
}catch(Exception e)...{
System.out.print(e.toString());
out.print("{success:true, data:age=567}");
打印处来的例子
age=dfgg
name=ddfgdfg
sex=M
education=3
返回参数也必须是json字符串，success表示操作成功，或失败
action.result.data会取=后的值
2) 表单接收信息
只需要返回和表单相符的JSON字符串
{success:true,data:{"name":'你好',"age":'131',education:3,sex:'F'}}
formget.jsp文件内容
out.print("{success:true,data:{"name":'你好',"age":'131',education:3,sex:'F'}}");
取消按钮从formget.jsp中获取这个字符串信息，来填充表单
buttons : [
...
text : '取消',
simpleForm.form.load( ...{
url : 'formget.jsp',
method : 'get',
params : ''
当然也可以在开始时，就调用来导入数据
4. Grid
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字符串
//response.setCharacterEncoding("UTF-8");
String start = request.getParameter("start");
String limit = request.getParameter("limit");
try ...{
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
//String json = "{totalProperty:100,root:[";
for (int i = index; i < pageSize + index; i++) ...{
json += "{id:" + i + ",name:'二月DD" + i + "',descn:'descn" + i + "'}";
if (i != pageSize + index - 1) ...{
json += ",";
json += "]}";
//out.print(json);
} catch(Exception ex) ...{
获取数据时，如此访问grid.jsp文件
grid.jsp?start=1&limit=10
Grid使用
Grid中字段定制
var cm = new Ext.grid.ColumnModel([
...{header:'描述',dataIndex:'id'},
...{header:'姓名',width:100, sortable:true,dataIndex:'name'},
...{header:'描述',dataIndex:'descn'}
]);
Header 显示名称
dataIndex 从ds查找字段
width 字段宽度
sortable 是否允许排序
Grid中使用数据源的定义，从grid.jsp中获取数据
proxy: new Ext.data.HttpProxy(...{url:'grid.jsp'}),
...{name: 'id'},
...{name: 'name'},
...{name: 'descn'}
定义GridPanel创建Grid
var grid = new Ext.grid.GridPanel(...{
el: 'grid',
width:600,
ds: ds,
cm: cm,
bbar: new Ext.PagingToolbar(...{
pageSize: 10,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "你好"
})
grid.render();
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信息
修改如下：
tbar:[...{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add',
handler : onItemClick
}, '-', ...{
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',...{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}],
在GridPanel添加在Grid上的Toolbar，Toolbar上添加三个按钮，并为Add Something添加单击事件onItemClick。
单击事件
var win;
function onItemClick(item) ...{
//alert(item.text);
if (!win) ...{
var simpleForm = new Ext.FormPanel( ...{
el : 'hello-tabs',
labelAlign : 'left',
title : '你好',
buttonAlign : 'right',
bodyStyle : 'padding:5px',
width : 600,
frame : true,
labelWidth : 80,
xtype : "textfield",
fieldLabel : "Text",
name : "textvalue"
layout : 'column',
labelSeparator : ':',
items : [ ...{
fieldLabel : '年龄',
name : 'age',
xtype : 'combo',
store : ds,
valueField : "retrunValue",
displayField : "displayText",
mode : 'local',
forceSelection : true,
blankText : '请选择学历',
emptyText : '选择学历',
hiddenName : 'education',
editable : false,
triggerAction : 'all',
allowBlank : false,
fieldLabel : '学历',
name : 'education',
]
win = new Ext.Window( ...{
el : 'hello-win',
layout : 'fit',
width : 500,
height : 300,
closeAction : 'hide',
plain : true,
items :
simpleForm,
ds.load();
win.show(this);
唯一需要注意的是保存和取消按钮需要加入Ext.Window做控制，并且要注意FormPanel和Ext.Windows所要渲染的div块，并且这些块必须在grid.html中进行定义
<div id="hello-win" class="x-hidden">
<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">
<!-- Auto create tab 1 -->
<div class="x-tab" title="Hello World 1">
<p>Hello...</p>
</div>
<!-- Auto create tab 2 -->
<div class="x-tab" title="Hello World 2">
<p>... World!</p>
5. Tree
直接使用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使用如下，相对比较简单
var Tree = Ext.tree;
var tree = new Tree.TreePanel(...{
el:'tree-div',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader(...{
dataUrl:'record.jsp'
// set the root node
var root = new Tree.AsyncTreeNode(...{
text: 'Ext JS',
draggable:false,
id:'source'
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
6. Layout
左边为树型控件，右边为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文件导入即可
var tabs2 = new Ext.TabPanel( ...{
// renderTo: document.body,
region : 'center',
el : 'center-center', // 大的
//contentEl : 'center-center', // 小的
activeTab : 0,
height : 250,
defaults : ...{
autoScroll : true
items : [
xtype : "panel",
title : "Personal Assistant",
body : new Ext.ux.ManagedIFrame( ...{
autoCreate : ...{
id:'person', // 设置访问的名称
src : 'dynamic.html',
frameBorder : 0,
cls : 'x-panel-body',
width : '100%',
height : '100%'
title : "Personal",
id:'person2', // 设置访问的名称
src : 'grid.html',
l 树型控件
要给树型控件添加单击事件
tree.on('click', function(node) ...{
// do something
alert(node.id + ' was activated.');
Ext.get('person').dom.src = 'grid.html?selectedid='+node.id;
单击后，通过查找ManagedIFrame形成的Tab页的id，并且将其属性src改变来达到Tab页内容改变的效果
参考：
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