Ext组件的基本使用
1、组件概念
所谓组件,简单来说,就是指可以复用的应用程序组成部件。Ext最大特点,就是拥有一个庞大、功能齐全、结构及层次分明的组件体系,并在组件的基础上进一步封装出各种实用的控件。我们在开发的时候,只需要直接使用这些组件及控件,就可以创建出丰富多彩的应用程序界面。比如说窗口、树、表格、选项板、工具栏、菜单等都是可以直接复用的组件及控件。
Ext组件是由 Component其及子类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。我们学习及使用Ext,其实也就是学习Ext组件/控件的各种功能及使用方法。
组件的基本使用:组件定义,组件初始化,组件渲染(显示)。
2、组件XType
Ext中,每一个组件都有一个类来定义,比如说按钮组件的类是Ext.Button类,窗口控件的类是Ext.Window,树控件的类是Ext.tree.TreePanel。除了可以通过类名来标识某一种组件以外,Ext还提出了一个xtype的概念,我们可以理解为组件类名的缩写,比如说Ext.tree.TreePanel类对应的类缩写名称为treepanel。当一个组件创建了以后,我们可以通过组件的getXType()方法来得到这个组件的xtype值,还可以通过getXTypes()方法来得到这个组件所属的所有类名,比如:component/box/field/textfield。
xtype的主要作用是通过在配置选项中指定xtype方的组件使用法,来实现组件的延迟初始化。
xtype只能用于定义子元素。顶级元素必须使用new 类名来明确初始化。
3、组件配置选项
配置选项是Ext组件非常重要的特性,在大多数Ext组件中,都支持在构造函数中传递一个对象作为参数,在这个对象中包含组件的详细描述信息,比如多高、多宽、有多少子元素等等,Ext就是根据这些参数来创建组件对象的。
配置选项在组件初始化的时候使用。
4、组件属性
所属就是指组件对象的一些内在特性,从面向对象的角度来说,属性就是用来描述对象的具体状态的。
一个对象最基本的成员就是属性与方法。当我们创建并初始化了一个组件以后,他在内存里面就表现为一个对象,这个对象也就具有了自己特定的属性信息。
我们可以在程序中直接访问这些属性来得到这个组件对象的特定信息。比如说,我们要判断一个组件是否处隐藏,可以通过下面的的代码:
if(panel.hidden){
//doSomething
}
这里panel.hidden的hidden就是panel对象的属性。
属性从是否可以改变其值这一点来看,可以分为只读属性以及可读写的属性两种。由于可以通过方法(也就是动作)来直接改变对象的状态信息,因此,Ext组件中的大多数属性都是只读的,在API中通过Read-only来进行标注,这一点一定要注意。
由于是动态语言,因此即使是只读属性,你仍然可以使用panel.hidden=true这样的语句来改变他的值,但是却达不到把组件隐藏的效果,而且会造成组件工作的不正常,因此我们不能随便改写标注为只读属性的值。比如,我们要隐藏一个组件对象,应该通过panel.hide()方法来进行。
在查看API的时候,每一个组件都有Public Properties这一节,这里面就会列出了这个组件所具有各种公开属性。
5、组件的方法
组件的另外一个重要特性:方法,也就是对象的动作。大部分的类都有自己的的方法,方法主要用来改变或读取组件的状态,让组件执行指定的动作等。我们在使用Ext的时候,经常需要进行控件的交互,动态改变组件的相关信息,这时就需要调用组件的相关方法。
组件的方法在API方法中的Public Method一节只进行了详细的介绍。下面我们来看看每一个组件所共有的部分方法:
在编写Ext应用的过程中,我们经常需要查询API,看看这个组件有哪些方法,需要传递什么样的参数,返回什么样的结果,返回结果的类型等等。因此,大家对API一定要熟悉才行。
6、另外,组件还定义了一系列的事件,可以通过监听这些事件来实现交互程序开发。
分享到:
相关推荐
### Ext组件概述与初学者指南 #### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架,用于构建桌面级Web应用程序。它提供了大量的组件和工具,使得开发者能够快速且高效地构建用户界面。对于初学者而言,理解...
### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...
【Ext组件转化成JSF】是指将基于ExtJS的组件转换为JavaServer Faces (JSF)框架中的组件,以便在JSF应用中使用。ExtJS是一个强大的JavaScript库,提供了丰富的用户界面组件,而JSF是一种Java Web应用程序开发框架,...
EXT组件和控件是Sencha EXT JS框架的核心部分,它提供了丰富的用户界面元素,用于构建交互式的Web应用程序。EXT Grid是EXT JS中的一个关键组件,主要用于展示和操作表格数据。这个“EXT 组件和控件的 视频教程”很...
"EXT 中文手册.pdf"是EXT组件库的中文版文档,对于初学者来说是一份宝贵的参考资料。手册通常会详细介绍EXT的安装步骤、基本概念、组件使用方法以及事件处理等核心内容。通过阅读这份手册,新手可以理解EXT的架构,...
此文档包含了EXTjs最基本的组件类型的总结
使用EXT Color Change组件,开发人员需要熟悉EXT的API和MVC(Model-View-Controller)架构。在EXT的应用中,首先需要导入相关的类库,然后创建组件实例,并将它添加到布局中。例如,创建一个颜色选择器组件的基本...
- `ext-core-debug.js`和`ext-core.js`:这些是ExtJS的核心库,包含基本的DOM操作、事件处理和一些基础组件,对于只需要使用一小部分功能的项目很有用。 3. **其他文件**: - `CHANGES.txt`:记录了ExtJS从上一...
在EXT JS中,表单组件不仅包含基本的输入字段,还支持复杂的输入类型和验证机制。 1. `form`:`Ext.FormPanel`是EXT JS中的表单面板,它是一个容器,可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交...
在IT行业中,组件是构建用户界面的基本元素,它们允许开发者以模块化的方式处理复杂的交互和设计。"ext下拉多选组件multicombo"是一种专为EXTJS框架设计的组件,EXTJS是一个强大的JavaScript库,用于创建桌面级的富...
这个文件夹包含CSS样式文件、图片和其他必要的图形元素,用于美化EXT组件的外观。开发者可以根据项目需求自定义这些资源,以适应特定的品牌风格或界面设计。 "adapter"文件夹则包含EXT与其他JavaScript库或框架适配...
本篇文章将深入探讨Ext表单组件中的checkbox,以及如何利用源码和相关工具进行定制和优化。 1. **复选框的基本概念** 复选框在用户界面中常用于让用户从多个选项中选择一个或多个。在Ext JS中,复选框是`Ext.form....
本文主要介绍EXT2树组件的使用,包括从底层的JSON数据生成到表现层的渲染。 首先,EXT2的树组件(TreePanel)是通过JavaScript实现的,它依赖于EXT库提供的类和方法。在示例代码中,我们创建了一个新的TreePanel...
它提供了丰富的组件库,涵盖了从基本的按钮、表单元素到复杂的网格、图表等各类控件。然而,在实际开发中,我们往往需要根据项目需求定制特定的控件。"Ext自定义控件库"正是这样一个资源集合,包含了开发者封装的...
本文将深入探讨Ext window的使用,以及如何通过源码理解和定制这些组件。 1. **Ext.Window基础知识** Ext.Window是Ext JS中的一个类,继承自Ext.container.Container,它创建了一个可以在页面上自由移动和调整大小...
在“ext6演示了基本的ext6组建的使用”这个项目中,开发者可能通过一系列的示例文件展示了EXT6的核心功能和基本组件的用法。以下是一些关键知识点: 1. **JSON-Decode.html**:此文件可能涉及到JSON数据解析。EXT6...
FCKEditor通常会被封装成一个EXT组件,以便在EXT的布局中使用。这涉及到创建一个新的EXT类,继承自EXT的基础组件,并实现与FCKEditor交互的方法。 集成步骤可能包括以下几点: 1. **引入FCKEditor资源**:下载并...