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类
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()); 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); if(this.trackResetOnLoad)...{ 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()]; for (var i=0; i < group.length; i++ ) ...{ if(group[i].__ext_field) ...{ group[i].__ext_field.setValue(group[i].value == values[id]); if(this.trackResetOnLoad)...{ group[i].__ext_field.originalValue = group[i].__ext_field.getValue(); } } } } else ...{ field.setValue(values[id]); if(this.trackResetOnLoad)...{ 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, layout : 'form', border : false, items : [...{ style : 'margin-top:5px', xtype : 'radio', fieldLabel : '性别', boxLabel : '男', name : 'sex', checked : true, inputValue : 'M', anchor : '95%' }] }
, ...
{ columnWidth : .25, layout : 'form', labelWidth : 0, labelSeparator : '', hideLabels : true, border : false, items : [...{ style : 'margin-top:5px', xtype : 'radio', fieldLabel : '', boxLabel : '女', name : 'sex', inputValue : 'F', anchor : '95%' }] }
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('失败', '抱歉'); this.disabled = false; } }); } } }
,
保存按钮将表单信息提交给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文件内容
<%
@ page language
=
"
java
"
contentType
=
"
text/html; charset=UTF-8
"
pageEncoding
=
"
UTF-8
"
%>
<%
out.print(
"
{success:true,data:{"name":'你好',"age":'131',education:3,sex:'F'}}
"
);
%>
取消按钮从formget.jsp中获取这个字符串信息，来填充表单
buttons : [...
...
{ text : '取消', handler : function() ...{ 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字符串
<%
@ page language
=
"
java
"
contentType
=
"
text/html; charset=UTF-8
"
pageEncoding
=
"
UTF-8
"
%>
<%
//
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:["; 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 += "]}"; response.getWriter().write(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中获取数据
var
ds
=
new
Ext.data.Store(
...
{ proxy: new Ext.data.HttpProxy(...{url:'grid.jsp'}), reader: new Ext.data.JsonReader(...{ totalProperty: 'totalProperty', root: 'root' }, [ ...{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, store: ds, 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信息
修改如下：
var
grid
=
new
Ext.grid.GridPanel(
...
{ el: 'grid', width:600, ds: ds, cm: cm, 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' }], bbar: new Ext.PagingToolbar(...{ pageSize: 10, store: ds, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "你好" }) }
);
在GridPanel添加在Grid上的Toolbar，Toolbar上添加三个按钮，并为Add Something添加单击事件onItemClick。
单击事件
var
win;
function
onItemClick(item)
...
{ //alert(item.text); if (!win) ...{ 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'} ]) }); var simpleForm = new Ext.FormPanel( ...{ el : 'hello-tabs', labelAlign : 'left', title : '你好', buttonAlign : 'right', bodyStyle : 'padding:5px', width : 600, frame : true, labelWidth : 80, items : [...{ xtype : "textfield", fieldLabel : "Text", name : "textvalue" }], items : [...{ layout : 'column', border : false, labelSeparator : ':', items : [ ...{ columnWidth : .5, layout : 'form', border : false, items : [...{ xtype : 'textfield', fieldLabel : '姓名', name : 'name', anchor : '90%' }] }, ...{ columnWidth : .5, layout : 'form', border : false, items : [...{ xtype : 'textfield', fieldLabel : '年龄', name : 'age', anchor : '90%' }] }, ...{ columnWidth : .5, layout : 'form', border : false, items : [...{ 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%' }] }, ...{ columnWidth : .25, layout : 'form', border : false, items : [...{ style : 'margin-top:5px', xtype : 'radio', fieldLabel : '性别', boxLabel : '男', name : 'sex', checked : true, inputValue : 'M', anchor : '95%' }] }, ...{ columnWidth : .25, layout : 'form', labelWidth : 0, labelSeparator : '', hideLabels : true, border : false, items : [...{ style : 'margin-top:5px', xtype : 'radio', fieldLabel : '', boxLabel : '女', name : 'sex', inputValue : 'F', anchor : '95%' }] } ] }] }); win = new Ext.Window( ...{ el : 'hello-win', layout : 'fit', width : 500, height : 300, closeAction : 'hide', plain : true, items : simpleForm, 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('失败', '抱歉'); this.disabled = false; } }); } } }, ...{ text : '取消', handler : function() ...{ simpleForm.form.load( ...{ url : 'formget.jsp', method : 'get', params : '' }); } }] }); 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
>
</
div
>
</
div
>
</
div
>
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, width : 600, height : 250, plain : true, 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%' } }) }, ...{ xtype : "panel", title : "Personal", body : new Ext.ux.ManagedIFrame( ...{ autoCreate : ...{ id:'person2', // 设置访问的名称 src : 'grid.html', frameBorder : 0, cls : 'x-panel-body', width : '100%', height : '100%' } }) } ] }
);
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页内容改变的效果
Ext.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