[ExtJS学习笔记]第七节 Extjs的组件components及其模板事件方法学习

本文地址：http://blog.csdn.net/sushengmiyan/article/details/38487519

本文作者：sushengmiyan

-------------------------------------------------------------资源链接-----------------------------------------------------------------------

翻译来源  Sencha Cmd官方网站： http://www.sencha.com/products/extjs/up-and-running/concepts-components/

------------------------------------------------------------------------------------------------------------------------------------------------

一个EXT JS的应用程序的UI用户界面是有一个或者多个部件构成的组件。所有的组件都是Ext.Component类的子类，允许它们参与自动化生命周期管理包括实例化，渲染，大小，定位还有销毁。Ext JS提供了一系列有用的组件，任何组件可以很容易地扩展到创建一个定制的组件。

组件的继承关系

容器是一个特殊的组件类型，它可以包含其他组件。一个典型的应用程序是有许多嵌套的组件像树状结构哪有的组件继承结构。容器负责管理他们的子组件的生命周期，包含创建，渲染，大小还有位置和销毁。一个典型的应用程序的组件继承从顶层的Viewport开始，它还有其它的容器嵌套在里面。

子组件通过使用容器的items配置增加到容器中，下面的例子使用Ext.create()创建初始化了两个面板，然后作为Viewport的子组件增加到Viewport中。

var childPanel1 = Ext.create('Ext.panel.Panel', {
    title: 'Child Panel 1',
    html: 'A Panel'
});

var childPanel2 = Ext.create('Ext.panel.Panel', {
    title: 'Child Panel 2',
    html: 'Another Panel'
});

Ext.create('Ext.container.Viewport', {
    items: [ childPanel1, childPanel2 ]
});

容器使用布局管理器来管理组件的大小还有位置，想要获取关于布局的更多信息，请访问 布局和容器指南

XTypes和懒加载

每一个组件都有一个符号名叫做xtype。像Ext.panel.Panel就有一个xtype名叫做‘panel’， 组件的API文档 列出了所有的组件的xtype。上面的例子展示了如何增加一个已经存在的组件到一个容器中。然而，在大型的应用程序中，着不是理想的，因为不是所有的组件都要被实例化，一些组件可能永远不需要被初始化，这取决于你的应用程序。例如，一个使用tab
panel的应用程序只需要获取用户点击之后的那个tab的内容。这就是xtypes派上用处的地方通过允许容器的孩子在前置进行配置，需要的时候才进行实例化。

下面的示例代码演示了懒实例化和呈现一个使用选项卡面板的容器的子组件。每个标签都有一个事件侦听器，显示一个警告标签时呈现。

Ext.create('Ext.tab.Panel', {
        renderTo: Ext.getBody(),
        height: 100,
        width: 200,
        items: [
            {
                // Explicitly define the xtype of this Component configuration.
                // This tells the Container (the tab panel in this case)
                // to instantiate a Ext.panel.Panel when it deems necessary
                xtype: 'panel',
                title: 'Tab One',
                html: 'The first tab',
                listeners: {
                    render: function() {
                        Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');
                    }
                }
            },
            {
                // xtype for all Component configurations in a Container
                title: 'Tab Two',
                html: 'The second tab',
                listeners: {
                    render: function() {
                        Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');
                    }
                }
            }
        ]
    });

允许这段代码，会立即产生第一个tab的alert弹出框。这个发生是因为这是默认的tab页签，所以容器就立即调用病实例化容器的Tab Panel。

第二个tab框直到点击的时候才会弹出，这就显示了需要的时候才会渲染，就是说tab页签激活的时候才会通知render事件。

显示和隐藏

所有的组件都是在show和hide方法中构造的。用来隐藏组件的默认的css方法是“display:none”但是通过hidemode配置的时候就有所变化了：

var panel = Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Test',
        html: 'Test Panel',
        hideMode: 'visibility' // use the CSS visibility property to show and hide this
component
    });

    panel.hide(); // hide the component

    panel.show(); // show the component

浮动组件

浮动组件是通过css绝对路径将文档放置在外的，并且不在参与组件的容器的布局的。有些组件像Windows是默认的浮动，所有的组件都可以通过配置来实现浮动：

var panel = Ext.create('Ext.panel.Panel', {
    width: 200,
    height: 100,
    floating: true, // make this panel an absolutely-positioned floating component
    title: 'Test',
    html: 'Test Panel'
});

上述代码初始化了一个panel，但是没有渲染。正常情况下，一个组件或者有一个renderTo配置或者当做一个子组件增加到组件的容器中，但是当是浮动组件的时候，都不需要了。浮动组件会在第一次调用show方法的时候被渲染

panel.show(); // render and show the floating panel

下面有一些对浮动组件来说可以进行配置的一些方法

1.draggable:可以拖动屏幕周围浮动组件。

2.shadow:定制的外观浮动组件的影子。

3.alignTo:将浮动组件指定到特定的元素。

4.center() 将组件浮动到组件的中心

创建自定义组件

成分或者扩展

当创建一个新的UI类的时候，该类必须做出决定是否应该拥有一个组件的一个实例,或扩展组件

根据功能需要继承一个最近的基类是被推荐的。这是因为EXT JS提供的自动生命周期管理包含了当需要的时候自动渲染，自动大小，自动调整位置当通过布局管理的时候，也会自动的从容器中移除和销毁。

通过组建创建新类比较容易，不推荐使用一个新的类拥有一个组件在外部去渲染和管理。

子类

类系统 让扩展extjs框架变得非常容易。Ext.Base是所有Ext JS类的构建块,原型和这个类的静态成员被其他类继承。

尽管你可以再低水平的情况下增加一个方法，但是开发人员在通常情况下会想通过高一点的继承链来开始。

下面这个例子创建了一个Ext.Component的子类：

Ext.define('My.custom.Component', {
    extend: 'Ext.Component',

    newMethod : function() {
       //...
    }
});

这个例子创建了一个新的类‘My.custom.Component’，它继承了Ext.Component的所有方法属性等。

模板方法

EXT JS使用 模板方法模式 代表子类，行为。

这意味着，在继承链中的每一个类都可能贡献一个额外的逻辑组件的生命周期中的某些阶段。每一个类实现自己的独有的行为，并且允许其他继承自这个类的实现自己特有的逻辑。

典型例子就是 渲染 方法，render 是定义在Component类中的一个方法，它对初始化组件的呈现阶段生命周期负责。render不能被重写，但是可以调用onRender方法在处理子类实现的时候可以调用来实现自己的特有属性方法。每一个onRender方法必须调用父类的onRender方法在贡献自己额外逻辑的时候。

下面的表格展示了onRender模板方法的功能。

render方法被调用（通过布局管理器来实现的）。这个方法不能被重写也是通过Ext基类实现的，它调用this.onRender方法，这个方法实现了当前子类（如果被实现了的话）。这个就调用父类的版本，以此类推。最终，每个类贡献了自己的功能，控制返回render方法。

下面是一个组件子类实现onRender的例子：

Ext.define('My.custom.Component', {
    extend: 'Ext.Component',
    onRender: function() {
        this.callParent(arguments); // call the superclass onRender method

        // perform additional rendering tasks here.
    }
});

需要值得注意的是，许多模板方法都有自己对应的事件，例如渲染事件，是在渲染事件出发的时候执行。然而，当子泪花的时候，它必须使用模板方法在重要声明周期阶段执行类逻辑而不是事件。事件可以通过编程来停止或者暂停。

下面是一些子类可以实现的组件的模板方法：

initComponent:这个方法被类构造方法唤醒，用来初始化数据，设置属性，附加事件处理。

beforeShow:在组件显示之前被调用

onShow: 允许添加行为操作，在超类的onShow方法被调用之后就组件就可见了。

afterShow: 方法在组件被显示之后调用。

onShowComplete:这个方法在afterShow完成之后被调用

onHide:在隐藏的时候可以增加一些操作，调用超类的onHide方法之后，组件就看不见了。

afterHide:组件隐藏之后的事件处理

onRender:渲染的时候执行的事件

afterRender:渲染完成之后可以增加的额外操作。在你这个阶段，组件的元素已经根据配置或者css雷鸣增加了类型，并且将会被配置可见性和启用状态。

onEable:组件可用性，调用超类的这个事件的时候，组件就可以使用了

onDisable:组件不可用处理的时候的事件。

onAdded:当组件被增加的时候，组件被增加到容器的时候。在这个阶段，组件在父类容器的子条目集合中，当调用超类的这个方法之后，容器就是被展现，如果有引用，引用也会被设置。

onRemoved:被移除的时候的事件。这时候，组件以及从父容器之中移除了，但是还没有销毁。调用超类的这个方法之后，容器就不会被展现了。

onResize:大小变化的时候的调用事件

onPosition:位置变化的时候调用的事件

onDestroy:销毁的时候的事件

beforeDestroy:销毁之前

afterSetPosiotion:设置位置之后

afterComponentLayout:组件布局之后

beforeComponentLayout:组件布局之前

我们该扩展哪个类

选择一个最好的继承类是一个效率的问题，功能基类必须要提供的。有一种趋势就是总是继承Ext.panel.Panel当你设置UI组件的时候，这些组件需要被渲染和管理的时候。

Panel类有如下能力：

Boder

Header

Header Tools

Footer

Footer Buttons

Top toolbar

Buttom toolbar

Containig and managing child Components

如果这些不需要，那么使用Panel类就是一种资源浪费。

组件

如果需要的组件UI不需要包含其他组件，那就是，如果只是封装HTML执行某种形式的需求，那么扩展Ext.Component是合适的。举例来说，下面这个类是一个组件包装了HTML的图片元素，允许通过图片的src属性来设置和获取。在加载的时候也会有方法被触发。

Ext.define('Ext.ux.Image', {
    extend: 'Ext.Component', // subclass Ext.Component
    alias: 'widget.managedimage', // this component will have an xtype of 'managedimage'

    autoEl: {
        tag: 'img',
        src: Ext.BLANK_IMAGE_URL,
        cls: 'my-managed-image'
    },

    // Add custom processing to the onRender phase.
    // Add a 'load' listener to the element.
    onRender: function() {
        this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
        this.callParent(arguments);
        this.el.on('load', this.onLoad, this);
    },

    onLoad: function() {
        this.fireEvent('load', this);
    },

    setSrc: function(src) {
        if (this.rendered) {
            this.el.dom.src = src;
        } else {
            this.src = src;
        }
    },

    getSrc: function(src) {
        return this.el.dom.src || this.src;
    }
});

使用如下：

var image = Ext.create('Ext.ux.Image');

Ext.create('Ext.panel.Panel', {
    title: 'Image Panel',
    height: 200,
    renderTo: Ext.getBody(),
    items: [ image ]
});

image.on('load', function() {
    console.log('image loaded: ', image.getSrc());
});

image.setSrc('http://www.sencha.com/img/sencha-large.png');

这只是一个例子给展示而已，你想使用的话，应该结合实际应用程序来设计。

Container容器

如果组件包含其他组件，那么就选容器比较适合了。在面板级别，需要重点记忆的是，Ext.layout.container.Container不是用来被渲染和管理子组件的。

容器拥有下面这些方法：

onBeforeAdd:子组件增加的时候这个方法被调用。通过了新组件,可以用来修改组件,或准备容器。返回false中止添加操作。

onAdd:组件被增加完成的时候调用。它是通过组件已被添加。这种方法可以用于更新任何内部结构可能依赖于状态的子元素。

onRemove:它是通过组件已被添加。这种方法可以用于更新任何内部结构可能依赖于状态的子元素。

beiforeLayout:这个方法被调用之前容器已经制定了(如果需要)并呈现它的子组件。

afterLayout:调用该方法后,集装箱已经制定了(如果需要)并呈现它的子组件。

Panel面板

如果UI界面需要头信息，底部信息，工具条，那么Ext.panel.Panel就是一个合适的选择。

重要的是:一个面板是一个容器。重要的是要记住,布局是用于呈现和管理子组件。

这类扩展Ext.panel。面板通常非常特定于应用程序的,一般用于聚合其他UI组件(通常是容器,或表单字段)配置布局,并提供操作手段所包含的组件通过控制tbar bbar。

面板拥有如下的模板方法：

afterCollapse:当折叠的时候被调用

afterExpand:当展开的时候被调用

onDockedAdd:当停靠的时候调用

ondockedRemove当停靠移除的时候调用。

[ExtJS学习笔记]第七节 Extjs的组件components及其模板事件方法学习

时间： 2024-10-01 04:55:33

[ExtJS学习笔记]第七节 Extjs的组件components及其模板事件方法学习的相关文章

[ExtJS学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试

本文地址: http://blog.csdn.net/sushengmiyan/article/details/38479079 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站:    http:

[ExtJS学习笔记]第五节 使用fontawesome给你的web应用增加友好图标

本文地址: 本文作者:sushengmiyan -------------------------------------------------资源链接-------------------------------------------------------- FontAwesome glyph编码:http://fortawesome.github.io/Font-Awesome/cheatsheet/ 使用图标美化按钮: http://blog.csdn.net/jfok/articl

[ExtJS学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

GDI+学习笔记（七）保存简单图像

请尊重本人的工作成果,转载请留言,并说明转载地址,谢谢.地址如下: http://blog.csdn.net/fukainankai/article/details/27710883 前几节中,我们利用GDI+在窗口中绘制了各种各样的图形.图像,这一节,我们将会将这些图像保存成简单图像.所谓简单图像,指的是bmp/jpg/png等图像或者单帧的gif图像.保存成多帧的gif图像稍微复杂一点,本节中暂时不做说明.保存成动态的tiff文件也比较简单,但这里也不做说明,下次有机会和gif一起介绍. 另

Spring3.0官网文档学习笔记（七）--3.4.2

3.4.2 依赖与配置的细节 3.4.2.1  Straight values (primitives, Strings, and so on) JavaBeans PropertyEditors被用来转换这些value到实际的类型.? <bean id="myDataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close"> <

Android学习笔记（七）——显示对话框窗口

显示对话框窗口 1.创建Dialog1项目,在activity_main.xml文件中添加一个Button: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:l

Servlet学习笔记（七）—— JSP概述

1.Servlet两个缺陷: ①所有HTML标签必须包在Java字符串中,使得发送HTTP响应十分繁琐: ②所有文本和HTML标签都必须进行硬编码,即使对表示层做极其微小的修改,也需要重新编译. 2.注释: (1)JSP备注:<% %>,不会发送到浏览器,不能嵌套 (2)HTML备注:<!-- -->,不被容器处理,直接发送到浏览器,用途之一是标识JSP页面.在处理带有许多JSP片段的应用程序时,开发者通过查看HTML源代码,可以轻松查出某个HTML代码部分生成了那个JSP页面.

汇编入门学习笔记 （七）—— dp，div，dup

疯狂的暑假学习之  汇编入门学习笔记 (七)--  dp,div,dup 参考: <汇编语言> 王爽 第8章 1. bx.si.di.和 bp 8086CPU只有4个寄存器可以用 "[...]" 中进行单元寻址. bp:除了默认的段地址是ss,其他与bx一样. 它们所有正确的组合 mov ax,[bx] mov ax,[si] mov ax,[di] mov ax,[dp] mov ax,[bx+si] mov ax,[bx+di] mov ax,[bp+si] mov a

疯狂Android讲义 - 学习笔记（七）

第8章 Android数据存储与IO  Java IO的数据存储可以移植到Android应用开发上来,Android系统还提供了一些专门的IO API. Android系统内置了SQLite数据库,SQLite是轻量级的,没有后台进程,整个数据库对应一个文件,这样可以非常方便的在不同设备之间移植.Android为访问SQLite提供了大量便捷的API. 8.1 使用SharedPreferences 适用于保存简单格式的数据. 8.1.1 SharedPreferences 与 Editor S