Think of Ext2.0 (1)

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