`
xiongmao3
  • 浏览: 42819 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

EXT2.0 override方法的一个问题发现 及自我救赎 及等待救赎(非水)

    博客分类:
  • Ext
阅读更多
不知道怎么用标题来描述清除这个问题....  成吉思汗.....
被误导的兄弟,到别的帖子去散散心吧~~

-------------------------------------------------------------
EXT 2.0 是这样做组件扩展比如
Ext.grid.GridPanel = Ext.extend(Ext.Panel, {});

【背景】
项目的前台框架完全复制了EXT 2.0 的extend机制来建立自己的组件体系
下面代码中,My 可认为等同于 Ext

【问题代码】

--------------------类的代码----------------------------------
My.widgetA = My.extend(My.baseWidget,{
    ...

    testArray : [],                  //新的属性

    testFunc  : function(text){      //新的方法
        this.testArray.push(text);
    },

    ...
});


--------------------应用该类的页面的局部代码----------------------
var widget1 = new My.widgetA();
var widget2 = new My.widgetA();

widget1.testFunc("a");
widget1.testFunc("b");
debugger;
widget2.testFunc("c");
debugger;



【问题描述】

在第一个断点处,跟踪,发现 widget1.testArray = ["a","b"]
在第二个断点处,跟踪,发现 widget2.testArray 并不是预期中的 ["c"],而是 ["a","b","c"]

发现,若页面上存在N(N>1)个相同的组件时,如果新的扩展属性的类型是Array或Object,那么该属性在new的时候时创建的不是一个实例,而是一个引用。。。它们指向了同一个地方...

【自我救赎】
1、发现问题的第一感觉,太阳,抄都抄不对,,,

2、
  于是测试EXT自己的组件

  在ext-all-debug.js中 Ext.grid.GridPanel 定义里,增加testArray、testFunc,在EXT自带的 array-grid.html 中创建两个grid,如 局部代码 中一样的调用testFunc,结果发现问题相同!

3、
   在以前应用EXT时,曾发现 Ext.apply在复制对象的时候,如果对象的属性是Object,那么复制的新对象中,该属性是一个引用而不是一个实例。
   于是怀疑是不是EXT的 extend、override方法中复制的不彻底,EXT的override 方法:
        override : function(origclass, overrides){
            if(overrides){
                var p = origclass.prototype;
                for(var method in overrides){
                    p[method] = overrides[method];
                }
            }
        },
  


做了一个简单的修改后,override 方法如下:
        override : function(origclass, overrides){
            if(overrides){
                var p = origclass.prototype;

                for(var method in overrides){
                    if(overrides[method] instanceof Array){
                        p[method] = [].concat(overrides[method]);
                    }
                    else{
                        p[method] = overrides[method];
                    }
                }
            }
        },

再次测试 array-grid.html,发现问题木有啦!

4、测试过程中,发现了另外一个解决办法,
--------------------类的代码----------------------------------
My.widgetA = My.extend(My.baseWidget,{
    ...

    //testArray : [],                  //新的属性   不明确定义 testArray属性

    testFunc  : function(text){      //新的方法
        this.testArray = this.testArray ||[];    //用时再初始化
        this.testArray.push(text);
    },

    ...
});



【后记及发帖目的】

项目一直采用EXT2.0做前台框架,并没有随EXT版本升级,力求稳定
所以不知道同样的问题,在3.0里面是不是还算问题

没有看到类似的问题,不知道是不是有达人提出并解决过类似的问题
有知道的兄弟,跟帖发链接啊

另外本人比较懒也比较笨 能解决问题 走走水路也无妨
所以宁愿多尝试 在可能的地方用可能的方式多测试 能解决就成
不愿从技术的根本去用理论和系统的方法来求证...
所以很多时候 知其然不知其所以然  -_-||

在调试这个问题的时候,是做了决心,看了下EXT的extend 方法的,结果当然很晕
JE上有篇帖好像是讲这个的 记得当时也很晕
所以对自己说 这个有牛人做出来就可以啦 我们只用


----------------------------------------------------------
                    H  E  L  P !!!
----------------------------------------------------------

1、到底是不是override实现的问题
2、对于属性类型为Array,我的解决方法有没有什么问题和隐患
3、如果属性类型是Object,该如何解决

我尝试了如下代码,结果错误抛在Ext.grid.GridPanel的onRender方法中的var view = this.getView();
执行后跟踪,发现view 是一个空对象,猜测和我的代码实现有关:
        override : function(origclass, overrides){
            if(overrides){
                var p = origclass.prototype;

                for(var method in overrides){
                    if(overrides[method] instanceof Array){
                        p[method] = [].concat(overrides[method]);
                    }else if(typeof overrides[method] =='object'){
                        p[method] = {};
                        Ext.apply(p[method] , overrides[method]);
                    }
                    else{
                        p[method] = overrides[method];
                    }
                }
            }
        },
分享到:
评论

相关推荐

    ext js 4.1apply && override

    `Ext.apply`是Ext JS框架中的一个核心方法,主要用于对象的属性合并。此方法能够将一个或多个对象的属性复制到目标对象中,从而实现对象之间的扩展和覆盖。 ##### 1. 基本用法 `Ext.apply`的基本语法如下: ```...

    Ext一些方法的重写

    除了`Ext.extend()`,`Ext`库还提供了一些其他与继承和方法重写相关的工具,比如`mixins`(混入)机制,它允许一个类“借用”另一个类的属性和方法。通过`Ext.mixin`,我们可以创建可复用的代码模块,然后在多个类...

    EXT dojochina Ext方法重写.rar

    EXT dojochina Ext方法重写是一个关于EXT.js框架中函数重写的专题。EXT.js是一个流行的JavaScript库,用于构建富客户端应用,它提供了丰富的组件、布局管理和数据绑定机制。在EXT.js中,方法重写是一种常见的实践,...

    静态(static)方法重写(override)

    - **隐藏而非重写**:当子类中声明了一个与父类中相同的静态方法时,实际上是在子类中定义了一个新的方法,这个新方法会“隐藏”掉父类中的同名方法。这种现象被称为方法的隐藏,而不是重写。 - **调用规则**:...

    Retrofit2.0 Demo

    本项目"Retrofit2.0 Demo"是一个实际应用示例,结合了Okhttp作为网络底层库,Gson作为数据解析库,为开发者提供了一套完整的网络请求解决方案。 首先,我们要理解Retrofit2.0的核心概念。Retrofit通过注解方式定义...

    Android中Retrofit2.0的使用Demo

    在Android应用开发中,网络请求是必不可少的一部分,而Retrofit2.0则是一个非常流行的、由Square公司开发的网络请求库。它通过简洁的接口设计,使得网络调用变得直观且易于管理。在这个Demo中,开发者展示了如何集成...

    EasyExcel2.0工具类

    总的来说,EasyExcel 2.0结合SpringBoot 2.0提供了一个强大而易用的解决方案,使得在Java环境中处理Excel变得轻而易举。通过简单的配置和编程,开发者可以快速实现Excel的导入导出功能,极大地提高了工作效率。

    springboot2.0整合Shiro

    SpringBoot 2.0 整合 Apache Shiro 是一个常见的安全框架集成,它为Web应用程序提供了用户认证和授权的功能。SpringBoot的优雅简洁与Shiro的强大安全特性相结合,可以简化开发过程,使得权限管理变得更加高效和便捷...

    springboot2.0整合quartz

    接下来,我们创建一个`Job`类,实现`org.quartz.Job`接口,并重写`execute`方法,这是执行定时任务的核心代码: ```java import org.quartz.Job; import org.quartz.JobExecutionContext; import org.quartz....

    基于REST的webservice规范2.0版本

    1. **客户端支持**:JAX-RS 2.0引入了一个更加强大的客户端API,使得开发者能够更轻松地构建客户端应用程序来调用RESTful服务。 2. **资源类和方法**:JAX-RS 2.0增强了资源类和方法的支持,包括更灵活的路径匹配...

    Ext.DatePicker yearmonth

    1. **创建Override**:首先,我们需要创建一个新的类,这个类将覆盖`Ext.picker.Date`或`Ext.DatePicker`的原有方法,以更改年份和月份下拉框的位置。 2. **修改模板**:EXTJS的组件大多基于XTemplate,所以要改变...

    Override错误已解决

    - `@Override` 注解用于标记一个子类中的方法,以表明该方法是覆盖了父类中的同名方法。如果该方法实际上并未覆盖父类中的任何方法,则不应该使用此注解。 #### 三、解决方案 1. **更新 JDK 版本**: - 确保安装...

    Ext grid panel 滚动条位置不变

    在前端开发领域,特别是在使用Ext JS框架时,保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下,这一功能可以确保用户在数据刷新后仍然停留在之前查看的位置,提供更好的用户体验。 ####...

    Retrofit2.0+OkHttp网络请求

    本教程将深入探讨Retrofit2.0和OkHttp在网络请求中的应用,以及如何在实际项目中实现一个简单的网络请求Demo。 **Retrofit2.0** 是Square公司推出的一个类型安全的HTTP客户端,它允许开发者通过注解接口来定义网络...

    selenium2.0_中文帮助文档

    下面是一个简单的示例代码,展示了如何使用Selenium WebDriver启动Firefox浏览器并访问Google首页: ```java package org.openqa.selenium.example; import org.openqa.selenium.By; import org.openqa.selenium....

    RxJava2.0(初学者教程+实用操作符总结及原理简析)

    RxJava2.0 是一个强大的响应式编程库,尤其在Android开发中被广泛使用。它引入了一种新的处理异步数据流的方式,通过观察者模式和一系列操作符,简化了事件处理和数据管理。本教程将针对初学者,详细介绍如何入门...

    ext仿windows操作系统窗体嵌入桌面问题

    `createFoodWindow`函数是新添加的方法,用于创建一个名为“食物信息管理”的窗口。首先,通过`this.app.getDesktop()`获取到桌面对象,然后检查是否存在ID为`'bogus' + src.windowId`的窗口,如果不存在,就使用`...

    ejb2.0与ejb3.0的区别

    - **EJB 2.0**:需要为每个实体Bean定义一个Home接口,用于创建和查找Bean实例。 - **EJB 3.0**:取消了Home接口的需求,简化了实体Bean的创建和查找过程。 #### 五、其他变化 - **EJB 3.0**:提供了轻量级的支持,...

    override abstract virtual interface比较

    在 C# 编程语言中,override、abstract、virtual、interface 是四个关键字,它们之间存在着紧密的联系,我们经常会遇到 override、abstract、virtual 这三个关键字的使用,而 interface 则是一种特殊的抽象类。...

    Ext继承和扩展写的例子。

    例如,如果你发现`Ext.grid.Panel`的默认行为不满足需求,你可以扩展它,添加一个新的行为: ```javascript Ext.override(Ext.grid.Panel, { // 添加或修改的方法 }); ``` 在提供的文件`xyearcombobox.js`中...

Global site tag (gtag.js) - Google Analytics