`
李宏喜
  • 浏览: 119556 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext4使用总结(四)Ext4跨命名空间 引用

 
阅读更多
调用端Ext的加载配置
     Ext.Loader.setConfig({
        enabled: true,
        paths : {
            'CommonView.common.plugin' : '../common/plugin'
        }
});

在公用的命名域内,可以做action,event,logic等的处理,如下图:



在plugin中的controller文件夹中的CommonController中,可以定义如下的页面引用:
    refs : [
        { ref : 'displayItem',selector: '#displayItem'}
    ]

displayItem,引用了不同命名空间中的view中的组件的ID,客户端调用代码如下:
{
    xtype:'container',
    id:'displayItem',
    layout:'fit'
}

客户端,调用公用组件中的Controller,代码如下:
{
   var companentController = this.getController('CommonView.common.plugin.controller.CommonController')
  companentController .init(); 
  companentController.displayItem();
}


需要特别说明的是:

this.getController('CommonView.common.plugin.controller.CommonController'),
如果组件的Controller中的这个方法,被调用多次,这里就返回多个CommonController,
就可能造成,组件事件的一次触发,就会被CommonController响应多次,因为有多个CommonController实例。我认为方法getController()应该是一个工厂方法。

我们只需要在调用端的Controller的init方法,初始化公用组件的Controller,使得公用组件Controller,成为调用端Controller的一个类成员变量,在调用端的Controller代码如下:
   commonController:null,
   init:function(application) {
        this.commonController  =   this.getController('CommonView.common.plugin.controller.CommonController');
        this.commonController.init();
   }
   

我们可以在组件CommonController中的方法displayItem中创建
common plugin中的common view,并add到客户端的ID为displayItem的容器中,代码如下:
    function displayItem() {
       var displayItem = this.getDisplayItem()
       var commonView = Ext.create('CommonView.common.plugin.view.CommonView');
       displayItem.removeAll();
       displayItem.add(commonView);
    }
    

这样,我们就可以把通用组件commonView以及这个组件的处理逻辑,增加到调用端指定的ID为displayItem的Container中。
需要特别注意的是,客户端调用common plugin的controller、view时的路径:

CommonView.common.plugin.controller.CommonController
CommonView.common.plugin.view.CommonView
总之,如果想在多处复用这个公用的组件CommonView,和这个组件的逻辑,只需要在调用端,按照指定路径,跨命名域引入组件。
     Ext.Loader.setConfig({
        enabled: true,
        paths : {
            'CommonView.common.plugin' : '../common/plugin'
        }
});

并在调用端的View中的需要这个组件的地方写,如下代码:
{
    xtype:'container',
    id:'displayItem',
    layout:'fit'
}

最后,很感谢黄灯桥老师,写了《Ext JS 权威指南》这本书,带给我非常多的启发!
  • 大小: 6.4 KB
0
0
分享到:
评论

相关推荐

    EXT dojochina Ext命名空间别名.rar

    总结起来,EXT dojochina Ext命名空间别名是EXT JS开发中的一种重要技术,它关乎代码的组织结构和可维护性。通过合理的命名空间设计和别名使用,可以提升代码的可读性和项目的整体质量。在dojochina社区的相关讨论和...

    Ext实现java的面向对象实例

    例如,`Ext.alias('namespace.MyApp', 'myApp')`后,我们就可以使用`myApp`代替`MyApp`来引用这个命名空间下的类。 9. **类别名**:类别名是类的简短别名,用于减少代码中的字面量。使用`alias`配置项定义,例如`...

    Ext3.0官方实例

    自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了.  主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口...

    最正宗的ext帮助文档

    自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了. 主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口),...

    EXT教程EXT用大量的实例演示Ext实例

    Ext的基础知识点包括元素获取方法Ext.get、动态生成HTML的DomHelper和Template、以及数据处理相关的Ext.data命名空间中的proxy和reader系列。Ext对JSON格式的支持也很到位,提供了方便的API来加载和解析JSON数据。 ...

    ext 强大的js类库

    自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了.  主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一...

    4.0Ext 概述

    例如,按钮相关的类在Ext4中被分类到src/button/包下,通过新的命名空间进行区分。同时,使用`alternateClassName`属性来支持Ext3遗留项目的平滑过渡。 **新型类系统** Ext4引入了一种新型的类系统,它基于...

    Ext2.0 javascript类库.rar

    自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了. 主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口)...

    Ext 开发指南 学习资料

    8.4. Ext.data命名空间 8.4.1. proxy系列 8.4.1.1. 人畜无害MemoryProxy 8.4.1.2. 常规武器HttpProxy 8.4.1.3. 洲际导弹ScriptTagProxy 8.4.2. reader系列 8.4.2.1. 简单易行ArrayReader 8.4.2.2. 灵活轻便...

    EXT2.0中文教程

    8.4. Ext.data命名空间 8.4.1. proxy系列 8.4.1.1. 人畜无害的MemoryProxy 8.4.1.2. 常规武器HttpProxy 8.4.1.3. 洲际导弹ScriptTagProxy 8.4.2. reader系列 8.4.2.1. 简单易行ArrayReader 8.4.2.2. 灵活轻便...

    ext js 2.2

    自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了. 主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口)...

    EXT文档 不下后悔.doc

    4. **EXT命名空间和类的创建**: - 使用`Ext.namespace()`定义命名空间,例如`CjExt.test`,以避免全局变量冲突。 - `CjExt.test.Person`类的创建展示了EXT构造函数和`Ext.apply()`方法的应用,用于初始化对象属性...

    .net EXT学习资料与源码

    自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了.  主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口...

    ext 4.0 好东西

    自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了. 主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口),...

    EXT架构学习文档

    在使用 EXT 时,需要引用基础的 CSS 和 JavaScript 文件,如 `ext-all.css`、`ext-base.js` 和 `ext-all.js`。EXT 还提供了按需加载的机制,允许开发者根据应用需求只引入必要的组件。 EXT 还内置了一些动画效果,...

    Ext Js.rar

    可以自己写扩展,自己定义命名空间。web应用可能感觉太大。不过您可以根据需要按需加载您想要的类库就可以了。 主要包括三个大的文件:ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减....

    ext-3.0-rc3

    自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了. 主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口)...

    Ext中文教程.最好的Ext学习资料

    - **命名空间**:通过命名空间管理代码,可以避免全局变量冲突,提高代码的可维护性。 - **配置选项**:配置是Extjs中一个重要的概念,它用于设置组件的属性和行为。 - **Ext.apply()与Ext.applyIf()**:这两个函数...

    ExtJs4新类库特性详解及JS新语法扩展.docx

    类应组织在命名空间(包)下,如`MyCompany.data.CoolProxy`。常量使用全大写字母表示,如`Ext.MessageBox.YES`。 - **源文件组织**:类名与源文件路径匹配,如`Ext.util.Observable.js`。所有类应存储在`src`目录...

    myExt

    从给定的文件信息来看,这里涉及到的是...在使用Ext JS时,正确的文件结构、资源引用以及合理的命名空间设计是项目成功的关键。同时,理解并熟练掌握Ext JS的初始化流程和组件使用方式,对于高效地开发应用至关重要。

Global site tag (gtag.js) - Google Analytics