学步园

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

返回