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') ...{   
   
        // 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 : ''

                    });

                }

当然也可以在开始时，就调用来导入数据