开发者博客:www.developsearch.com
根据我在EXT论坛上的观察,xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype,或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。
定义
xtype就是一个代表类(Class)的标识名字。
譬如,你有这个类,名字是Ext.ux.MyGrid。正常情况下你需要用这个名字来实例化这个类(创建类的对象)。
除了类名外,你还可以这样登记类的xtype:
1.
Ext.reg(
'mygrid'
, Ext.ux.MyGrid);
其中xtype是mygrid 而类名的一般形式是Ext.ux.MyGrid。上面的语句登记了新的xtype,换种说法说,xtype mygrid 与类 Ext.ux.MyGrid是连在一起的。
到底有什么好处?
试想一下,你手头上的是一个大型的项目,为了响应用户的操作,程序里面包含者大量的对象(windows、forms、grids)。用户点击图标或按钮,就会新建一个窗体,窗体里面又有grid,最终在屏幕上渲染出来。
嗯,我们回到Ext2.x之前的编码,那时候我们实例化所有对象是页面第一次加载后就进行的(程序代码第一次的运行)。在客户端内存中,Ext.ux.MyGrid类的对象已经存在,等待用户的点击。同样是这个grid,假设你上百个的实例,...是多么浪费宝贵的资源啊!很多grid其实用户未必会点击让它出现。
延时实例化
如果你使用xtype,那么在代码中的仅仅是一个用于配置的对象,像:
{xtype:'mygrid", border:false, width:600, height:400, ...}
消耗没有实例对象来得大。
嗯,用户点击按钮或图标会怎么样呢?Ext会辨认出它是一个准备要渲染的grid但不立刻实例化,Ext在ComponentMgr的帮忙下明白这么一回事:“如果我要实例化xtypemygrid的对象,我就知道要创建的实际是类Ext.ux.MyGrid的对象”。即如下列代码:
1.
create :
function
(config, defaultType){
2.
return
new
types[config.xtype || defaultType](config);
3.
}
等价于:
return new Ext.ux.MyGrid(config);
然后实例化grid,进行渲染和显示。谨记:需要的时候才实例化。
开发者博客:www.developsearch.com
相关推荐
`xtype` 与对应的`class` 关联,`class` 是组件的实际JavaScript类,包含组件的完整功能和行为。 以下是一些主要的ExtJS `xtype` 和其对应的`class`: 1. **面板(Panel)** - `xtype: 'panel'` 对应的类是 `Ext....
然而,通过使用`xtype`,只有当组件真正需要展示时,EXT才会根据`xtype`找到相应的类并实例化,降低了内存占用,并且提高了应用的响应速度。 EXT中的`ComponentMgr`是一个关键的管理器,它负责处理组件的注册和实例...
EXTJS 是一个流行的JavaScript框架,用于构建富...在EXTJS开发中,理解和熟练运用`xtype`、`Ext.QuickTips.init()`以及`vtype`能够帮助我们更高效地构建用户界面,提供更好的用户体验,同时确保数据的准确性和安全性。
组件之间的嵌套和组合,以及事件监听和处理,使得EXT能够构建出复杂的用户界面和业务逻辑。 EXT组件的属性、方法和事件是其功能实现的关键。例如,表格(Grid)组件支持数据的分页、排序和过滤,而表单(Form)组件...
以上就是ExtJS中一些主要的`xtype`及其对应组件的介绍。通过灵活组合这些组件,开发者可以创建出各种复杂的用户界面,满足不同业务需求。在实际开发中,可以根据具体应用场景选择合适的`xtype`,并根据需要配置其...
### ExtJS xtype 类型概述 在ExtJS框架中,`xtype`是一种用于标识特定组件类型的简短...以上是ExtJS中主要的`xtype`类型及其对应类的概述。通过对这些组件的理解和掌握,开发者可以更高效地构建复杂的Web应用程序。
以下是一些主要的`xtype`及其对应的组件类和功能的详细解释: 1. **基本组件** - `button`:`Ext.Button`,用于创建标准的按钮,可以包含文本、图标或两者都有。 - `splitbutton`:`Ext.SplitButton`,扩展了按钮...
这是一种简化的组件标识方式,使得开发者可以更方便地在配置文件或代码中指定组件类型,而无需完整地写出对应的类名。下面,我们将根据提供的内容对ExtJs中的各种`xtype`进行详细的解析。 #### 基本组件 - **`...
这是一个HTML文件,通常会包含一个基本的页面结构,以及引入Ext JS库的链接。它可能还会有一个`<script>`标签,用来加载`register.js`这个JavaScript文件,这是实现表单逻辑的核心。HTML中可能会有如下的结构: ```...
- 要在Grid中显示图片,我们需要创建一个自定义的列类型,这通常通过扩展EXT JS的Column类来实现。 - 自定义列需要重写`renderer`函数,这个函数负责将数据转化为可渲染的HTML。 3. **图片数据的处理** - 图片...
每个组件都是从`Ext.Component`类派生而来,并通过`xtype`属性进行标识。 组件体系主要包括以下几大类: - **基本组件**:如按钮、面板、进度条等。 - **工具栏组件**:如工具栏中的间隔、按钮等。 - **表单及字段...
本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单初始化 在Ext中创建一个表单面板通常涉及到设置其基本属性,例如宽度、高度、布局方式等。在这个...
例如,`textfield` 对应 `Ext.form.TextField`。 - 常见的 `xtype` 包括:`textfield`, `timefield`, `numberfield`, `datefield`, `combo` 和 `textarea`。 - 由于EXTJS组件的高度可复用性,这些字段可以灵活地应用...
EXT是Sencha公司开发的一个基于JavaScript的开源框架,主要用于构建富客户端Web应用程序。EXT Color Change Component,即EXT颜色改变组件,是EXT库中一个用于处理颜色选择和展示的UI组件,它提供了用户友好的界面,...
以下为该组件的一些核心属性及其含义: - **store**: 数据存储器,用于存放表格的数据源。 - **columns**: 列配置模型,可以通过配置来定义每列的显示方式,默认情况下采用`ColumnModel`格式。 - **...
### Ext.grid.GridPanel属性详析 #### 一、Ext.grid.GridPanel概述 `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。...
2. **扩展 ComboBox 类**:lovcombo 需要继承EXTJS的ComboBox类,通过`Ext.extend`方法实现。 3. **配置模板**:lovcombo 的下拉列表需要一个新的模板来显示复选框。我们可以使用`tpl`配置项来定义一个包含复选框的...
本文将详细介绍`xtype`的使用,以及其在ExtJS3组件体系中的重要性。 #### xtype详解 `xtype`(扩展类型)是ExtJS为每个组件定义的一种简短、易于记忆的类型标识符,它在创建组件时作为配置选项使用,使开发者能够...
总结,Ext.form.TextField是构建Web应用不可或缺的一部分,掌握其使用方法和配置选项,以及如何结合事件处理和源码分析,将有助于我们更高效地开发功能丰富的表单系统。通过深入学习和实践,我们可以创建出符合业务...