`
sp42
  • 浏览: 147326 次
  • 来自: Canton
文章分类
社区版块
存档分类
最新评论

组件的管理与XType

阅读更多
   早在Ext 1.x的时候就有Ext.ComponentMgr这个类了,但那时仅是一个雏形,到Ext 2.0的时侯才作为重要的成员,参与到组件的对象模型中。

      Ext将页面中的组件的创建、渲染和销毁抽象成为组件的对象模型。全部的组件均支持延时渲染(lazy.rendering)即有需要的情况才会真正地渲染。

      在加载JS文件时,也就是定义类的时候,每个主要的组件类如:GridPanel、Panel和DataView都会把自己注册登记到组件管理器中(Component Manager)。注册登记的那个名字叫做“xtype”。

      浏览2.0例子的代码你或许会发现就有“xtype”的配置项。XType配置项代表着这个对象属于哪个组件类型,而到时(渲染时)就会调用相关的构造器(constructor)。整个过程无须手工调控,均由ComponentMgr对象内部控制。总得来说,用字面化对象(object literal)的方式定义了一个组件实例的功能,不失为一种便捷的做法(handy shortcut)。

      另外你只要在服务端生成JSON便可动态加载这些组件。由于Ext为全体组件提供注册登记的维护,我们可方便地使用Ext.getCmp(COMPONENTID)来访问页面上任意一个组件,这样的好处是不要考虑这些组件实例之引用所在的位置,就可各组件间相互操作。譬如,我们需要从Window的实例中获取GridPanel的引用,你可以从组件管理器中获取组件的引用,免于查找那个Window实例的变量。

      虽然Ext.getCmp看起来优点不少,但我建议你谨慎使用和避免过于滥用。事因这样会强制将几个语义上不同的几个类捆绑在一起,组合成一个比较“笼统”的类。如在标准的面向对象的实践中或实现一个观察者模式的时候,采用Ext.getCmp作为一种设计的方案就不太适宜了。
分享到:
评论

相关推荐

    Ext js Xtype

    ### Ext JS Xtype详解 ...综上所述,Xtype是Ext JS框架中组件管理和实例化的基石。掌握Xtype的概念和使用方法,将极大地提升开发效率和组件的复用性,使开发者能够快速构建出功能丰富、界面美观的Web应用程序。

    ExtJS的xtype列表

    `xtype` 是ExtJS中的一个重要概念,它是组件类的简写形式,用于在配置对象中声明组件类型,使得代码更加简洁。理解并掌握ExtJS的各种`xtype`可以帮助开发者快速构建复杂的用户界面。 1. **基本组件**: - `button`...

    Ext组件描述,各个组件含义

    ### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...

    ExtJS 组件扩展

    3. **错误地new**:对于UI组件,ExtJS提供了一种称为xtype的机制,通过xtype可以实现组件的懒加载和延迟渲染,从而提高应用程序的整体性能。但在实际开发过程中,经常可以看到开发者直接使用`new`关键字创建组件实例...

    EXTjs组件.pdf

    EXTjs组件是构建EXTJS应用程序的核心元素,它们是基于Ext.Component的子类,具备自动化的生命周期管理,包括创建、渲染、尺寸调整、定位和销毁等关键功能。组件是EXTJS中可交互的部件,可以是按钮、表格、面板等,...

    EXT中xtype的含义分析

    `xtype`允许开发者以一种轻量级的方式引用和使用组件,而不是直接实例化完整的类对象,从而提高了性能和内存管理效率。在深入理解`xtype`之前,我们首先需要对EXT的基本组件体系有所了解。 EXT是一个JavaScript的富...

    Extjs 年月日时分秒组件

    6. **布局管理**:组件可以轻松地与其他UI元素一起在布局中使用,如表格、面板或窗口,因为它遵循ExtJS的布局管理机制。 在压缩包中的"Ext年月日时分秒组件"可能包含了源码、示例、文档和样式文件。通过查看这些...

    Ext组件转化成JSF

    转化后的组件可以在JSF环境中正常使用,允许开发者利用Ext组件的强大功能,同时利用JSF的服务器端处理和生命周期管理。这种方式使得开发者能够结合两种框架的优点,创建出具有丰富用户体验的Web应用,而无需从头编写...

    ext 颜色改变组件

    EXT Color Change组件通过与EXT其他组件的协同工作,可以构建出功能强大的颜色管理界面。在实际开发中,结合CSS3和JavaScript,可以进一步优化组件的交互效果,提升用户体验。 标签“ext color”表明这个话题主要...

    ext js 培训资料

    1. Container特性:提供容器级别的布局管理和组件管理。 2. 两大类容器:布局容器和简单容器。 3. 容器配置、属性、方法和事件:用于管理内部组件和容器本身的布局。 九、总结 EXT JS的学习主要集中在组件的使用和...

    Ext中表单中各种组件的布局

    #### 默认布局与平行分列布局 在Ext中,默认情况下表单采用的是平铺布局,即表单项按顺序垂直排列。这种布局简单明了,适用于大多数场景。然而,在某些情况下,我们可能希望将表单项按照一定的规则并排放置,这时就...

    Ext JS PPT教程

    - 组件方法:包括公开方法和私有方法,用于组件的交互和管理。 6. **组件事件和处理**: - 事件响应机制:当用户执行特定操作时,组件会触发事件,监听者接收到事件后执行相应操作。 - Ext对传统事件的封装和...

    extjs6.5快速开始.pdf

    - **Items数组**: 用于添加子组件到容器,如`[ { xtype: 'panel', title: 'Tab 1', iconCls: 'fa-home' }, { xtype: 'panel', title: 'Tab 2', iconCls: 'fa-user' } ]`。 - **子组件配置**: 每个子组件可以通过配置...

    ExtJS快速入门指南.pdf

    组件XType部分讲述了如何通过XType来快速定义和初始化ExtJS组件。组件应用部分则展示了如何在实际项目中应用这些组件,组件配置选项部分给出了如何通过配置选项定制组件属性。组件属性和组件方法分别介绍了在ExtJS中...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在实际项目中,结合`jq`库(可能是jQuery的简写),可以方便地处理DOM操作,与EXTJS的组件交互,进一步增强动态加载的效果,比如添加动态加载的动画、错误处理等。 总结来说,`Ext.Panel`和`TreePanel`在EXTJS中是...

    ExtJS中editable-column-tree组件的使用 示例

    这种功能在需要对树形结构的数据进行实时修改的场景下非常实用,例如在组织架构管理、文件系统操作或者层级关系的配置界面等。 要实现`editable-column-tree`,首先需要创建一个基本的`Ext.tree.Panel`实例,然后...

    ext常用操作

    - `xtype: 'textarea'`,多行文本输入框组件。 - `xtype: 'combobox'`,下拉列表组件。 - `xtype: 'htmleditor'`,富文本编辑器组件。 21. **inputType** 属性 - 输入类型。 - 示例:`inputType: 'password'`...

Global site tag (gtag.js) - Google Analytics