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

posted @ 2008-05-23 21:05  meetrice  阅读(912)  评论(0)  编辑  收藏  举报