[Ext JS]Ext JS组件、容器与布局| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]Ext JS组件、容器与布局

## Ext JS组件、容器与布局
### 组件 （Components）
基于Ext JS的应用的UI由组件（Component）组成。这和绝大部分界面开发语言的概念是类似的。
Ext JS使用的是面向对象的概念， 有组件类与组件实例的概念，组件实例也常简称为组件。组件类之间可以有继承关系。
Ext JS的所有组件类都继承自 Ext.Component父类，这些类的组件可以自动参与组件的生命周期，包括：初始化、渲染、调整大小、定位以及销毁。
Ext JS提供了很多现成的组件， 也可以继承这些组件扩展新的组件类型。
从是否可以在页面上直接看到组件来分，可以将组件分为狭义的和广义的两种：
狭义的组件对应页面具体的显示元素，比如：Text（输入框）、Button（按钮）、Combobox （下拉单）。
广义的组件除了实际的页面元素之外， 还包括这些页面元素放置的容器。
在Ext JS中 Ext.Component是组件的根类，Ext.container.Container继承自Ext.Component，是容器的根类。
Ext.button.Button 按钮组件类，继承自Ext.Component
Ext.form.field.Base，表单元素的基类，子类包括 Ext.form.field.Text、
Ext.form.field.ComboBox等
类结构如下：
![](/upload/picture/2022-10-11/upload_d14b58cb97dcc997d95007486eb344d5.png)
### 容器（Container）
容器（Container）是一种特殊类型的组件（Component），容器可以包含其他的组件。
最常使用的容器类是Panel（面板），面板也有多种类型，比如：
Ext.panel.Panel： 面板基类
Ext.grid.Panel ： 网格面板
Ext.tab.Panel：标签页面板
Ext.form.Panel： 表单面板
对于一个典型的Ext JS 应用，容器以及组件的层级结构如下图：
![](/upload/picture/2022-10-11/upload_6ba1f1b93105d17d3599012f93592626.png)
顶层是Viewport(视口)，视口属于容器类，是Ext.container.Container的子类，相当于一个页面。
Viewport里面放置Ext.tab.Panel和Ext.form.Panel等面板
面板里面防止具体的组件， 也可以嵌套面板。
面板和容器中通过items选项配置子元素，也可以通过add()方法在容器初始化之后添加。
组件的创建与显示
创建
即时创建，使用Ext.create() 创建
需要的时候再实例化，在items中配置xtype
显示
所有的组件都内置了show和 hide方法。
hide使用的是CSS的＂display:none”机制实现的，　通过hideMode配置修改隐藏的方式。
### 布局（Layout）
容器中可以放置多个组件，也可以嵌套多层容器，这些子组件的位置和大小如何控制呢？ 答案就是通过容器的布局来管理。
布局的内部机制：
调用容器的updateLayout方法：
计算容器组件的大小和位置，更新DOM。
updateLayout方法是递归执行，每个容器的子组件都有这个方法，一直调用到最底层。
注意： 一般不需要显示调用updateLayout。
当容器的大小发生改变，或是添加或移除子组件时会触发re-layout。
如果不需要框架自动布局，设置 suspendLayout:true 不自动布局， 通过调用updateLayout()方法触发布局。 该方式可能使用在复杂组件的悲剧，从性能考虑禁用自动布局。
设置的代码如下：
//  暂停自动布局containerPanel.suspendLayout = true;// 触发布局containerPanel.updateLayout();

子组件的布局使用 Ext.layout.container.Container 的子类。
组件也可以包含子组件，组件布局类似容器布局，同样布局是布局子Item的大小和位置。组件布局使用 componentLayout配置项。
大部分组件是自动布局，一般不需要配置 componentLayout，除非需要客制化布局。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]Ext JS组件、容器与布局

网站导航