目录

1. 介绍

　　1.1 说明

　　1.2 组件分类

　　1.3 组件名称

　　1.4 组件结构

2. 组件的创建方式

　　2.1 Ext.create()创建

　　2.2 xtype创建

1. 介绍

1.1 说明

ExtJS的强大功能之一是提供了非常丰富的组件，包括grid(表格)、panel(面板)、form(表单)、button(按钮)、progressBar(进度条)等等。

一个的ExtJS 4应用程序的UI界面，就是由一个或多个组件组成。

这里将会介绍组件的分类、名称、结构以及创建方式。

1.2 组件分类

按照组件展现形式，ExtJS 4.2的组件大概分为以下几类：

1) 容器：容器是一种特殊类型的组件，可以包含其他容器或组件，并制定子组件的大小和位置。ExtJS布局中的层次结构就是容器嵌套容器、容器嵌套组件的方式层层嵌套。包括的容器有：form(表单)、panel(面板)、tab(Tab标签)、viewport(自适应窗口)、window(窗口)等等。

2) 表单组件：指适用于form(表单)容器的子组件，包括：Checkbox、ComboBox、Date Field,、HTML Editor,、Label、Text Field等等。

3) 菜单和工具栏：菜单和工具栏常常一起使用，菜单包括的组件有：CheckItem(切换复选框)、ColorPicker(颜色选择器)、DatePicker(日期选择器)等。

4) 图表：实现数据的可视化。包括的组件有：Area(堆叠区域图)、Bar(条形图)、Column(柱状图)、Gauge(仪表图)、Line(线图)、Pie(饼图)、Radar(雷达图)、Scatter(散点图)。

5) 其他：除了上述分类外，还有一些零散的单独组件。如：button(按钮)、progressBar(进度条)、single(滑动条)等等。

1.3 组件名称

想调用组件，就需要知道组件的名字；在ExtJS中组件包含ClassName和xtype两种名字。

Class ：类名；ExtJS采用命名空间的方式定义了所有的类，其中也包括了组件。如form(表单)的Class为Ext.form.Panel，表示Ext → form 命名空间下的Panel组件。

xtype ：每个组件有一个名为'xtype'的符号名，也可理解为组件的简称，并且组件的'xtype'为全局唯一性。如Ext.panel.Panel的xtype为panel；Ext.form.Panel的xtype为form。

部分组件class和xtype列表

1.4 组件结构

组件分类中的容器、form字段、工具条、菜单等都有各自一套的层次结构，也可理解为组件的继承关系。

如Ext.form.Panel(表单)的继承关系如下：

此处可得知

① Ext.form.Panel(表单) 继承自 Ext.panel.Panel(面板)；

② Ext.panel.Panel(面板) 继承自 Ext.container.Container(容器基类)；

③ Ext.container.Container(容器基类) 继承自 Ext.Component(组件记录)；

容器的层次结构：

2. 组件的创建方式

组件的创建主要分2种：

1) 一种是通过Ext.create()方法直接创建组件的实例。

2) 通过组件的xtype来配置组件。

2.1 Ext.create(name, [config]) ：返回所创建的组件实例

参数：

①name {string} ：组件的class全名、别名或备用名。

②config {object} 可选：创建组件时的配置信息；如组件的高度、宽度、标题等信息。

返回值：

{object} 返回组件的实例。

示例：

// 以下三种返回的结果一样

// 备用名

var window = Ext.create('Ext.Window', {

    width: 600,

    height: 800,

    ...

});

// 完整的类名

var window = Ext.create('Ext.window.Window', {

    width: 600,

    height: 800,

    ...

});

 // 别名

var window = Ext.create('widget.window', {

    width: 600,

    height: 800,

    ...

});

2.2 直接通过xtype配置

可在容器的items属性中，使用xtype配置子组件，而不采用 Ext.create() 方法。

如在一个Tab标签容器包含2个子标签页，2个子标签页可以通过xtype来配置：

Ext.create('Ext.tab.Panel', {

    renderTo: Ext.getBody(),

    height: 100,

    width: 200,

    items: [

        { xtype: 'panel',title: 'TabA',html: 'The tab A'},

        { xtype: 'panel',title: 'TabB',html: 'The tab B'},

    ]

});

// 等同于

Ext.create('Ext.tab.Panel', {

    renderTo: Ext.getBody(),

    height: 100,

    width: 200,

    items: [

        Ext.create('Ext.panel.Panel', {

            title: 'TabA',

            html: 'The tab A'

        }),

        Ext.create('Ext.panel.Panel', {

            title: 'TabB',

            html: 'The tab B'

        }),

    ]

});