extjs 重构formPanel类

extjs  重构formPanel类

类渲染时都是使用html实现的.

/**
 * 开发平台表单组件
 */
Ext.ml.SysFormView = Ext.extend(Ext.form.FormPanel, {
    constructor: function (config) {
        arguments.callee.superclass.constructor.call(this,config);
        this.editmode=config.editmode;
        this.parentId=config.parentId;
       
        this.on("ready",this.formInit);
      
    },
    editmode:undefined,
    parentId:undefined,
    _values:undefined,
    _params:null,
    loadData:function(){  //重新设置loadData参数
        this._params=arguments;
        Ext.ml.SysFormView.superclass.loadData.apply(this,arguments);
    },
   reload:function(){  //重新加载表单为编辑状态,暂时只支持视图点击链接形式(新窗口打开或EXTTAB打开)
    var me =this;
    var id=me.formComponentId;
    var container=me.ownerCt;
    var _params=me._params;
    var openMode =me.openMode;
   
    ViewEngine.loadView(id,{editMode:1},function(view){
        view.title=me.title;
         container.remove(me);
        view.loadData.apply(view,_params);
         container.add(view);
          if(openMode=="ext-tab"){
             container.setActiveTab(view);          
          }
      container.doLayout();
     
    });
  },
  read:function(){  //查看状态
         var me =this;
    var id=me.formComponentId;
    var container=me.ownerCt;
    var _params=me._params;
    var openMode =me.openMode;
   
    ViewEngine.loadView(id,{editMode:0},function(view){
        view.title=me.title;
         container.remove(me);
        view.loadData.apply(view,_params);
         container.add(view);
          if(openMode=="ext-tab"){
             container.setActiveTab(view);          
          }
      container.doLayout();
     
    });
  },
  edit:function(){  //编辑状态
    var me =this;
        me.reload();
  },
    formInit:function(){
        var me  = this;
        this.initHiddenFormula();
        this.jqValidate();
        this._values=me.getFormValues();
        this.body.on("click",function(e,t){
             if (t.selectdialog=="selectdialog"||t.type=="dept"||t.type=="role"){
                 me.selectButtonHandler(t);
             }
         })
    },
    
    setFormValues: function (values) {
        var ownerView = this.ownerView;
        var me = this;
        var form = me.getForm();
        var formId = form.id;//me.formComponentId;
        this._values=values;
        for (var o in values) {
                $("form[id='" + formId + "'] input[name='" + o + "']").each(function () {
                    if ($(this).attr('type') == 'text' || $(this).attr('type') == 'hidden') {
                        $(this).attr('value', values[o]);
                    }
                    else if ($(this).attr('type') == 'radio' & $(this).attr('value') == values[o]) {
                        $(this).attr('checked', "checked");
                    }
                    else if ($(this).attr('type') == 'checkbox' & $(this).attr('value') == values[o]) {
                        $(this).attr('checked', "checked");
                    }
                });
            $("form[id='" + formId + "'] textarea[name='" + o + "']").each(function () {
                $(this).attr('value', values[o]);
             });
             $("form[id='" + formId + "'] select[name='" + o + "']").each(function () {
                $(this).attr('value', values[o]);
             });
              $("form[id='" + formId + "'] div[name='" + o + "']").each(function () {
                this.innerHTML=values[o];
            ///$(this).attr("html",values[o]);
             });
        }
       
    },
     setFormValuesByName: function (values) {
        var ownerView = this.ownerView;
        var me = this;
        var form = me.getForm();
        var formId = form.id;//me.formComponentId;
        for (var o in values) {
                $("form[id='" + formId + "'] input[name='" + o + "']").each(function () {
                    if ($(this).attr('type') == 'text' || $(this).attr('type') == 'hidden') {
                        $(this).attr('value', values[o]);
                    }
                    else if ($(this).attr('type') == 'radio' & $(this).attr('value') == values[o]) {
                        $(this).attr('checked', "checked");
                    }
                    else if ($(this).attr('type') == 'checkbox' & $(this).attr('value') == values[o]) {
                        $(this).attr('checked', "checked");
                    }
                });
            $("form[id='" + formId + "'] textarea[name='" + o + "']").each(function () {
                $(this).attr('value', values[o]);
             });
             $("form[id='" + formId + "'] select[name='" + o + "']").each(function () {
                $(this).attr('value', values[o]);
             });
        }
       
    },
    
    isFormValid: function()
    {
        var ownerView = this.ownerView;
        var me = this;
        var form = me.getForm();
        var formId = form.id;//me.formComponentId;
        if($('#'+formId)){
            if (!$("#"+formId).validationEngine('validate')) return false;
        }
        return true;
    },
    doClick:function(action,fn){
        if (this.actionManager){
            this.actionManager.action(action).on("click",fn);
        }
    },
    refreshHiddenFormula:function(){
        //刷新表单的隐藏公式
        //查找所有有 hiddenFormula 这个属性的节点,计算属性的值得出是否隐藏本节点.
        var me = this;

        me.body.select("[hiddenFormula]").each(function(el){
            var v=me.hiddenCtrl(el);
            el.setStyle("display",v);
        });
    },
    initHiddenFormula:function(){
        var me=this;
        //把所有td或者tr里面有hiddenFormula的,转换成在里面包一个DIV,hiddenFormula写到div里面(因为不能隐藏td)
        Ext.each(me.body.query("td[hiddenFormula]"),function(item){
            var div=document.createElement("div");
            div.setAttribute("hiddenFormula",item.getAttribute("hiddenFormula"));
            item.removeAttribute("hiddenFormula");
            $(item).wrapInner(div);
        });
    },
   jqValidate:function(){
                        
                       //调试designer-form-validator.js里的办法
                       //jqueryValidate(this.getForm().id,"${Parameters.editmode!''}");
                    this.jqueryValidate();
                    //初始化ntko附件管理控件
                        try {
                            initTab(this.getForm());
                            showFormUpload();
                            loadEmbededView(this.getForm());
                        } catch (e) {
                        }
     },
     jqueryValidate:function(){  //设置js验证
          var formId=this.getForm().id;
         var me = this;
      
         if($("#"+formId)){
      $("form[id='"+formId+"'] span[sType='multipletype']").each(function(){
          var name=$(this).attr('id');
           name=name.substr(12,name.length);
           multipletype(formId,name,$(this).attr('dataSource'),$(this).attr('localData'),$(this).attr('url'),$(this).attr('type'),$(this).attr('defaultValue'),$(this).attr('isFull'),$(this).attr('sClick'));
        });
        $('#'+formId).validationEngine();
          if(me.editmode!=""&&me.editmode=="0"){
            
             me.setFormDisabled();
            document.getElementById(formId).ondblclick=function(){
               me.reload();
            }
          }
         
          
         
          if(me.parentId!="undefined"){
             
              me.setValue("parentId",me.parentId);
           }
     }
   },
    //设置只读状态
    setFormDisabled:function(){
         var formId=this.getForm().id;
        $("form[id='"+formId+"'] input").each(function(){
            $(this).attr('disabled', "disabled");
        });
        $("form[id='"+formId+"'] textarea").each(function(){
            $(this).attr('disabled', "disabled");
        });
        $("form[id='"+formId+"'] select").each(function(){
            $(this).attr('disabled', "disabled");
        });
         $("form[id='"+formId+"'] select").each(function(){
            $(this).attr('disabled', "disabled");
        });
         $("form[id='"+formId+"'] a[selectdialog='selectdialog']").each(function(){
            $(this).attr('style', "display:none");
        });
    },
 clearFormDisabled:function(){//清空只读状态
     var formId=this.getForm().id;
   $("form[id='"+formId+"'] input").each(function(){
        $(this).removeAttr('disabled');
    });
    $("form[id='"+formId+"'] textarea").each(function(){
        $(this).removeAttr('disabled');
    });
    $("form[id='"+formId+"'] select").each(function(){
        $(this).removeAttr('disabled');
    });
     $("form[id='"+formId+"'] a[selectdialog='selectdialog']").each(function(){
            $(this).attr('style', "display:''");
        });
}, 
selectButtonHandler:function(a){  
   var formId=this.getForm().id;
    var buttonHander=$(a);
    var type=buttonHander.attr("type");
    var idField=buttonHander.attr("idField");
    var valField=buttonHander.attr("valField");
    var check=buttonHander.attr("check"); //当check==1时，表示可多选,否则0代表单选
    var winTitle="";    
     if(type=="dept"){
        //部门信息选择对话框
        winTitle="选择部门机构";
    }else if(type=="user"){
      winTitle="选择角色";
         //用户信息选择对话框
       // new userWin().show();
    }else if(type=="role"){
          //角色信息选择对话框
            winTitle="选择角色";
        //  new roleWin().show();
    }
    
         var loader = new Ext.tree.TreeLoader({
                         dataUrl : "${$servicePath}/orgManager.treeList"
                         } );
             loader.processResponse = function(response, node, callback){
              var json = response.responseText;
                 try {
            var json = eval("("+json+")");
            node.beginUpdate();
            var o = json.result;

            for(var i = 0, len = o.length; i < len; i++){
                var n = this.createNode(o[i]);
                if(n){
                    node.appendChild(n);
                }
            }
            node.endUpdate();
            if(typeof callback == "function"){
                callback(this, node);
            }
        }catch(e){
            this.handleFailure(response);
        }
            };
                    
  var tree = new Ext.tree.TreePanel(
   {
      rootVisible : false,
      autoHeight:true,
       loader: loader
    }
   );
    var root = new Ext.tree.AsyncTreeNode();
    tree.setRootNode(root);
    tree.loader.on("beforeload", function(loader, node)
       {
         loader.baseParams = {
                type:type,
                check:check};
        });
        
     var depWin =new Ext.ml.DialogBox({
         width:500,
         height:350,
         panel:tree,
         listeners:{
            ClickOK:function(){
                var text=tree.getSelectionModel().getSelectedNode().text;
                  var id=tree.getSelectionModel().getSelectedNode().id;
                  if(id==""){
                        alert("你选择的选项不正确，请重新选择!");
                   }
                   
            $("form[id='"+formId+"'] input[name='"+valField+"']").each(function(){
                        $(this).attr('value', text);
                });
            $("form[id='"+formId+"'] input[name='"+idField+"']").each(function(){
                        $(this).attr('value', id+"|"+text);
                });
              $("form[id='"+formId+"'] div[id='"+valField+"_span']").each(function(){  //为了兼容自动换行的输入框
                        $(this).html(text);
                });
                $("form[id='"+formId+"'] div[id='"+idField+"_span']").each(function(){//为了兼容自动换行的输入框
                      
                     $(this).html(id+"|"+text);
                });
              depWin.close();
            }
        }
     });
     depWin.show();
     root.expand();
 
},
setValue:function(name,value){  //比如:formPanel.setValue("fldName","这是名字");
    var o={};
     o[name]=value;
     this.setFormValuesByName(o);
},
  
isChanged:function(){  //判断表单内容是否改变,返回值为true或false
  var me = this;
  if(me.editmode!=""&&me.editmode=="0"){//只读状态,其他都是新增或编辑状态
       return false;
   }
          var isChanged = false;
          
        
        
        if(me._values!="undefined"){
            var oldValues=me._values;
            var newValues=me.getFormValues();
            for(var o in newValues){
                   if(o!=null&&oldValues[o]!=newValues[o]){
                       isChanged = true; 
                       break; 
                   }
            }
        
        }
        /*else{
       var formId=this.getForm().id;
        var form = document.getElementById(formId);
           for (var i = 0; i < form.elements.length; i++) { 
                var element = form.elements[i]; 
                var type = element.type; 
                if (type == "text"  || type == "textarea" ) { 
                if (element.value != element.defaultValue) {
                isChanged = true; 
                 break; 
                  } 
                }
                }
        }  */      
                    return isChanged;
  }

});