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