Think of Ext2.0

最新推荐文章于 2024-10-09 15:12:06 发布

weixin_34032779

最新推荐文章于 2024-10-09 15:12:06 发布

阅读量85

点赞数

文章标签： json javascript ux ViewUI

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);

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" />

< script type ="text/javascript" src ="ext-2.0/adapter/ext/ext-base.js" ></ script >

< 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 >

< 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 " >

< div class = " x-tab " title = " Hello World 1 " >

< p > Hello... </ p >

</ div >

< div class = " x-tab " title = " Hello World 2 " >

< p > ... World !</ p >

</ 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

weixin_34032779

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫