`

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;
  }

});

 

 

 

分享到：
| js数组
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs中的formPanel以及表单的应用

    在工具方面，ExtJS 提供了一些实用的工具类，如`Ext.Ajax`用于处理Ajax请求，`Ext.util.Format`包含各种格式化函数，例如日期格式化，以及`Ext.MessageBox`用于弹出消息框等。 综上所述，了解并掌握ExtJS中的...

    ExtJs4.0 表单提交Demo

    Ext.Ajax是ExtJs中的一个核心类，负责处理异步的Ajax请求。通过它，开发者可以轻松地向服务器发送GET、POST等HTTP请求，接收响应数据，并处理相应的回调函数。在表单提交场景下，Ext Ajax提供了方便的API进行数据的...

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中，我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据，并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术，尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    ExtJS改变默认字体大小的几种方式

    ExtJS 是一个流行的JavaScript框架，用于构建富客户端应用程序。它提供了丰富的组件库，包括按钮、表格、窗口等，使得开发者可以构建出具有复杂交互和美观界面的应用。在使用ExtJS时，有时我们需要根据用户需求或...

    ExtJs中表单formPanel的横向布局

    本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局，即在一个表单中元素能够按照列分布，形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...

    extJs中关于formPanel动态添加组件的验证问题

    在EXT JS这个强大的JavaScript框架中，FormPanel是用于创建表单的重要组件，它...通过理解EXT JS的API和验证机制，结合源码分析和实用工具，开发者可以有效地应对这类挑战，创建出功能强大且用户体验良好的Web应用。

    formpanel extjs

    extjs formpanel学习，秘诀，笔记

    FCKeditor结合extjs实例

    标题 "FCKeditor结合extjs实例" 描述的是一个实际项目中使用的技术组合，涉及到的主要是两个前端富文本编辑器库：FCKeditor 和 ExtJS。这个实例表明在开发企业级网站时，如何将这两者有效地整合以实现复杂的用户界面...

    Extjs4添加tooltip

    Extjs4的textfield控件竟然没有tooltip悬浮提示，这应该算是个bug吧。网上查了很多，也没有方案。后来自己通过查询并整理出这个方案，终于实现了。 思想如下： 在textfield渲染时注册mouseover事件，然后在其中调用...

    ExtJs 动态添加表单

    在ExtJS中，我们可以使用`Ext.container.Container`类来创建一个容器，然后设置布局为`form`，以便容纳表单字段。例如： ```javascript var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items...

    轻松搞定Extjs 带目录

    - FormPanel类用于封装表单。 - 各种表单输入元素的配置和使用。 #### 14. 表单验证与提示 - 提供了表单验证机制，确保输入数据的正确性。 - 悬停提示（Tooltip）组件，增强用户体验。 #### 15. 表单布局与初始化...

    简单的两种Extjs formpanel加载数据的方式

    在ExtJS中，`Ext.form.Panel`（或简称为`formpanel`）是一种非常重要的组件，用于创建表单来收集用户输入的数据。本文将详细介绍两种在ExtJS formpanel中加载数据的方法，以供开发者参考。 ### 方法一：使用`...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 需要修改大量代码，主要是因为 ExtJS4 配备了一类新的系统，不向后兼容。在 ExtJS 3 里生成表的几个框架组件，ExtJS4 大多生成 div，这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid ...

    EXTJS修改颜色实例源码

    在提供的实例源码中，我们看到的是如何在 EXTJS 中修改颜色的示例，具体涉及到 EXTJS 的 FormPanel 和 ComboBox 组件，以及自定义事件处理。 1. **FormPanel**： - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单...

    批量上传文件 EXTJS文件上传 上传组件

    EXTJS的上传组件通常是基于EXTJS的FormPanel和FileField组件构建的，FileField组件可以设置为多选模式，从而支持批量选择文件。 首先，我们需要创建一个EXTJS的FormPanel实例，其中包含一个配置为`multiple: true`...

    extjs上传全代码

    1. **EXTJS FormPanel**: 这是EXTJS中用于创建表单的组件，可以包含各种表单元素，如文本框、按钮等。在文件上传场景中，FormPanel通常用于封装文件输入字段。 2. **FileField组件**: 这是EXTJS中的一个特殊表单...

    ExtJS笔记----FormPanel的使用

    NULL 博文链接：https://lucky16.iteye.com/blog/1490278

    asp.net下extjs完整实例

    用户可以通过EXTJS的FormPanel进行预订操作，提交表单数据到ASP.NET的服务器端方法，处理预订逻辑并返回响应。 EXTJS还支持Ajax通信，这与ASP.NET的MVC模式或Web Forms模式都非常契合。EXTJS的Ajax请求可以调用ASP...

    Extjs实现的聊天室

    使用ExtJS的FormPanel和TextArea组件可以轻松创建这些元素，并通过监听事件来处理用户的输入和发送行为。 WebSocket的实现通常涉及到后端服务器的配置。服务器端需要使用支持WebSocket的库，如Node.js的`ws`库，...

Magicbox
Global site tag (gtag.js) - Google Analytics