动态生成Ext GUI及绑定事件

Ext元素对应的Bean转Json

pom.xml

        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>1.4</version>
        </dependency>

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
public class BeanToJsonTool {
    
    public static String toJsonUseGoogleAPI(Object bean){
        Gson gson = new GsonBuilder().serializeNulls().create();
        return gson.toJson(bean);
    }

}

AJax取得Json数据格式返回

Json对象转Ext GUI

Ext.onReady(function(){
    var  elements = eval(jsonDatas );
     var simple = Ext.create('Ext.form.Panel', {
             id : "myForm",
            url:'xxx.action',
            frame:true,
            title: 'Simple Form',
 
            bodyStyle:'padding:5px 5px 0',
            width: 600,
            fieldDefaults: {
                msgTarget: 'side',
                labelWidth: 120//75
            }
           ,items: elements  //方法一，直接将对象赋值给items,前提是jsonDatas的属性含有Ext元素对应的属性，否则用方法二
     });

//方法二,解析Json数据，添加Ext元素所需要的属性

function parseJson(formObj){
    var  elements = eval(jsonDatas );
    
    for( var i=0;i<elements.length;i++){
        var jsonObj = elements[i];
        if (  jsonObj.type =='button'){
            formObj.add( createBtn( jsonObj )  );
        }
        if (  jsonObj.type =='text'){
            formObj.add( createTextField( jsonObj )  );
        }
    }
}

    parseJson( simple );

    //绑定事件

     bindEvents();

function bindEvent( extObj,events ) {
    
    for(var i=0;i<events.length;i++){
        var event = events[i];           
        if ( event.eventName == "change") {
             extObj.on("click",function(){

                 var ev = getEvent("click",events); //这是关键，需在on("click",function(){})里面的位置，绑定方法执行时才获取对应的事件执行

                var functionStr = ev.functionStr;
                var functionNames = getFunctions( ev.functionNames );
                if ( functionNames != "" ) {
                    if ( functionStr ){
                        eval( functionStr );
                     }
                    eval( functionNames );
                 }
            });
       }

     ... ...

}

function getEvent(eventName,events){
    var obj = null;
    for(var i=0;i<events.length;i++){
        var event = events[i];
        if ( event.eventName == eventName) {
            obj=event;
            break;
        }
    }
    return obj;
}

function getFunctions(functionNames){
    var  rtv = "";
    if ( functionNames ){
        for( var j=0;j< functionNames.length; j++ ) {
            rtv = rtv+ functionNames[j] +"();";
        }
    }
    return rtv;
}