组件

最新推荐文章于 2024-09-05 14:01:36 发布

阿洲

最新推荐文章于 2024-09-05 14:01:36 发布

阅读量622

点赞数

文章标签： html 扩展 ui ext 工具工作

组件

一个Ext JS的应用程序的UI是由一个或许多部件称为组件小号。所有组件的子类Ext.Component类，允许他们参与自动化生命周期管理，包括实例，渲染，大小和定位，并破坏。Ext JS的开箱即提供广泛的有用成分，任何组件都可以很容易地扩展，以创建一个自定义组件。

在组件层次结构

一个容器是一个特殊的组件类型，可以包含其他组件。一个典型的应用是由许多嵌套组件在一个树形结构，被称为组件层次结构。容器负责管理子女的组件的生命周期，其中包括创建，渲染，大小和定位，并破坏。一个典型的应用程序的组件层次结构的顶部，它具有其他容器和/或内部嵌套组件开始与视口：

组件层次结构

子组件被添加到一个容器，使用容器的项目配置属性。这个例子使用Ext.create 实例两个小组小号，然后将这些面板作为一个视口的子组件：

 
            VAR  childPanel1 = 分机。创建（“Ext.panel.Panel”，{ 
                标题：“子面板1' ， 
                HTML：“一个小组” 
            }）; 
              
            VAR  childPanel2 = 分机创建（“Ext.panel.Panel”，{ 
                标题：“儿童面板2' ， 
                HTML：“另一个小组” 
            }）; 
              
            分机。创建（“Ext.container.Viewport，{ 
                项目：[ childPanel1，childPanel2 ] 
            }）;

容器使用布局管理器的大小和位置的子组件。对于布局和容器的更多信息，请参阅布局和容器指南。

见的集装箱为例，演示，展示如何将组件添加到容器使用的项目配置工作。

XTypes和懒惰的实例

每一个组件都有一个象征性的名字叫做的xtype。对于的例子Ext.panel.Panel有一个“面板” 的xtype。组件的API文档中列出的的xtype所有组件的小号。上面的例子显示如何添加已实例化的组件 s到一个 Container 。然而，在一个大型应用程序，这是不理想的，因为不是所有的部件需要马上被实例化，并根据应用程序是如何使用某些组件可能永远不会被实例化。例如使用一个标签面板的应用程序，只需要每个标签如果当用户点击每个标签上要呈现的内容。这是其中的xtype中派上用场，允许配置容器的孩子面前，而不是实例，直到容器决定是必要的。

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

分机。创建（'Ext.tab.Panel“ ， { 
    renderTo  分机。getBody （），
    高度： 100 ，
    宽度： 200 ，
    项目： [ 
        { 
            / /显式定义该组件配置的xtype 
            / /告诉容器（在这种情况下，标签面板）
            / /实例化一个Ext.panel.Panel当它认为必要
            的xtype ： '小组' ，
            标题： “标签，
            HTML ： “第一个标签” ，
            听众： { 
                渲染： 函数（ ） 
                    { EXT 。MessageBox中。警报（“提炼一个人， “标签之一是渲染。' ）; 
                
            } } 
        }，
        { 
            / /这个组件配置不具有的xtype自'小组'是默认的
            / /所有组件的xtype在容器中配置
            的标题： “两个选项卡' ，
            HTML ： “第二个选项卡” ，
            听众： { 
                渲染： 函数（） 
                    { EXT 。MessageBox中。警报（“提炼一个' ， '上两人呈现“ ）; 
                } 
            } 
        } 
    ] 
}）;

运行这个代码结果在第一个标签的立即发出警报。发生这种情况，因为它是默认激活的标签，所以它的集装箱标签面板的实例，并立即呈现它。

懒惰渲染1

第二个选项卡提醒没有得到显示，直到标签被点击。这表明，不会呈现，直到需要的，因为render事件不火，直到标签被激活的标签。

懒惰渲染2

对于一个工作演示中看到懒惰的实例为例

显示和隐藏

所有组件有内置的显示和隐藏方法。默认的CSS方法，用来隐藏组件是“显示：无”，但是这是可以改变使用hideMode配置：

面板=  分机。创建（'Ext.panel.Panel“ ， { 
    renderTo  分机。getBody （），
    标题： “测试” ，
    HTML ： '小组' ，
    hideMode ： '能见度'， / /使用CSS的visibility属性显示和隐藏此组件
}）;

面板。 

面板。

浮动组件

浮动组件的位置以外的文件流使用CSS绝对定位，不参与其容器的布局。默认情况下，如某些组件窗口小号浮，但使用浮动配置任何组件都可以进行浮动。

面板=  分机创建（“Ext.panel.Panel' ， { 
    宽度： 200 ，
    高度： 100 ，
    浮动： 真， / /此面板绝对定位的浮动组件
    标题： “测试” ，
    HTML ： 测试小组“ 
}）;

上面的代码中实例化一个小组，但不会呈现它。通常一个组件都有一个指定的renderTo配置，或作为一个子组件加入容器，但在浮动元件的情况下，这些都不需要。浮动组件是自动呈现文档正文中第一次被称为他们的表演方法：

面板。

这里有一些其他的配置和方法，使浮动组件相关的说明：

拖动 -允许在屏幕上拖动一个浮动组件。
阴影 -定制浮动组件的阴影的外观。
alignTo（） -对齐浮动组件到一个特定的元素。
院（所） -中心在其集装箱的浮动组件。

为浮动组件功能的工作演示，看到浮动面板为例。

创建自定义组件

成分或延期

创建一个新的UI类时，必须决定是否应该拥有这个类的一个实例组件，或延长该组件。

它建议延长最近的基类所需的功能。这是因为自动化的生命周期管理的Ext JS提供，其中包括在需要时自动渲染，自动调整大小和定位时，通过适当的布局管理器管理组件，自动销毁去除从集装箱。

这是比较容易写一个新的类，它是一个组件，可以采取一个新的类，其中有一个Ext JS的组件在组件层次结构，而不是它的地方，然后有从外面来呈现和管理。

子类

等级制度，可以很容易地扩展现有的组件。下面的示例创建一个子类Ext.Component不增加任何额外的功能：

分机定义（“My.custom.Component' ， { 
    延长： “Ext.Component' 
}）;

模板方法

Ext JS的使用模板方法模式，委托给子类的行为，这是具体的，只有到该子。

这个意思是每类在继承链“贡献”组件的生命周期中一块额外的逻辑的某些阶段。每个类实现其自身的特殊行为，同时允许继承链中的其他类别，继续贡献自己的逻辑。

一个例子是渲染功能。渲染是一个私有方法中定义的组件的超类， AbstractComponent是负责发起渲染组件的生命周期阶段。 渲染不能被覆盖，但它调用的OnRender在加工过程中，让子类的实现添加的OnRender 方法执行类特定的处理。每天的OnRender方法之前，必须调用它的父“ 的OnRender “贡献”，其额外的逻辑方法。

下面的图表说明了运作的OnRender模板方法。

render 方法被称为（这是由容器的布局管理器来完成）。这种方法可能无法覆盖，由分机基类实现。它呼吁this.onRender这是在当前子类的实现（如果实现）。调用父类的版本，它调用其超类版本等，最终，每个类都有贡献其功能，控制返回到渲染功能。

模板模式

这里是一个组件的子类实现的OnRender方法为例：

    
         调用父类的OnRender方法

        / /执行额外的渲染任务。
    
} } ）;

重要的是要注意，许多模板方法也有一个相应的事件。例如render 事件被触发后，组件被渲染。当子类，但是，它是使用模板方法的重要阶段，在执行类的生命周期和逻辑事件，它是必不可少的。事件可能会被编程暂停，或可能会停止处理程序。

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

由构造initComponent调用此方法。它是用来初始化数据，建立配置，并附加事件处理程序。
beforeShow 调用此方法前显示组件。
onShow 允许除了显示操作的行为。调用父类的onShow后，该组件将是可见的。
afterShow 调用此方法后的组件显示。
onShowComplete 调用此方法后afterShow方法是完整
onHide 允许的行为除了隐藏操作。调用父类的onHide后，该组件将被隐藏。
afterHide 这种方法被调用后，该组件已被隐藏
的OnRender 允许的行为除了呈现阶段。调用父类的OnRender后，该组件的元素存在。在这个阶段，可以执行额外的DOM处理，完成所需的组件结构。
afterRender 允许除了渲染后的行为是完整的。组件的元素将在这一阶段已根据配置样式，将有任何配置添加CSS类名，并会在配置的知名度和配置的启用状态。
onEnable 允许除了启用操作行为。调用父类的onEnable后，组件将被启用。
onDisable 允许的行为除了禁用操作。调用父类的onDisable后，该组件将被禁用。
onAdded 允许的行为除了当一个组件被添加到容器中。在此阶段，该组件在父容器的子项的集合。后的ownerCt引用调用的超的onAdded的，将是目前的，如果用一个ref配置，将设置refOwner。
onRemoved 允许的行为除了当一个组件从它的父容器中删除。在这个阶段，组件已删除从其父容器的子项的集合，但已不被破坏（如果父容器的autoDestroy为true，则将这将破坏，或者如果在删除通话是通过1 truthy第二个参数）。调用父类的onRemoved后，的ownerCt的refOwner将不存在。
onResize 允许除了调整操作行为。
onPosition 允许添加的位置操作行为。
的OnDestroy 允许的行为除了破坏操作。调用父类的OnDestroy后，组件将被销毁。
beforeDestroy 组件被销毁之前调用此方法。
afterSetPosition 这种方法被调用后，已设置组件的位置。
afterComponentLayout 组件的布局后，调用此方法。
beforeComponentLayout 组件奠定了之前调用此方法。

哪个类来扩展

选择最佳的类来扩展主要是一个效率的问题，基类必须提供哪些功能。一直有一种倾向，总是延长任何UI组件集时需要提供和管理Ext.Panel。

面板类有许多功能：

边境
头
头工具
页脚
页脚按钮
顶部的工具栏
底部的工具栏
包含和管理子组件

如果这些都没有必要，然后用面板是一个资源的浪费。

元件

如果所需的UI组件不包含任何其他组件，也就是说，如果它只是封装了一些HTML的形式执行的要求，然后扩展Ext.Component是适当的。例如，下面的类是一个组件包装HTML图像元素，并允许设置和获取图像的SRC属性。加载图像时，也触发一个负载事件：

分机定义（“Ext.ux.Image' ， { 
    延长： “Ext.Component' ， / /子类Ext.Component
    别名： “widget.managedimage' ， / /这部分将有一个“managedimage'的xtype 
    autoEl ： { 
        标签： “图” ，
        SRC ： 分机。BLANK_IMAGE_URL ，
        CLS ： “我的管理形象” 
    }，

    / /添加自定义处理的OnRender阶段。
    / /添加一个'负荷'监听到  
           
        
          
    

    的onLoad ： 函数（） { 
        。fireEvent （“负载” ， 这）; 
    }

    setSrc ： 功能（SRC ） { 
         （这一点。呈现） { 
            此。EL 。DOM 。SRC = SRC ; 
        }  否则 { 
            SRC = SRC ; 
        } 
    }

    getSrc  功能（SRC ） { 
        返回 本。EL 。DOM 。SRC | 当前 的src ; 
    
} } ）;

用法：

图像=  分机创建（“Ext.ux.Image ）;

分机。创建（“Ext.panel.Panel” ， 
    标题： “图像面板” ，
    身高： 200 ，
    renderTo ： 分机，。getBody （），
    项目： [ 图片] 
}）

形象。上（'负荷' ， 函数（） { 
    控制台。日志（“加载图像：' ，形象。getSrc （））; 
}）;

形象。setSrc （“http://www.sencha.com/img/sencha-large.png ）;

工作演示，看到托管的形象的例子。这个例子是仅用于演示目的，应使用管理中的一个现实世界的应用程序的图像- “ Ext.Img类。

容器

如果所需的UI组件是包含其它组件，但并不需要一个额外的功能，前面提到的任何小组，然后Ext.container.Container的是相应的类来扩展。在容器级别，重要的是要记住这是被用来渲染和管理子组件的布局。

容器有下列额外的模板方法：

onBeforeAdd 此方法被调用前添加一个新的子组件。它是通过新的组件，可以用来修改的组件，或准备以某种方式的集装箱。返回false，中止的加法运算。
onAdd 这种方法被调用后已添加一个新的组件。它是通过它已被添加的组件。这种方法可用于更新任何内部结构，这可能取决于子项的状态。
onRemove 这种方法被调用后，一个新的组件已被删除。它是通过组件已被删除。这种方法可用于更新任何内部结构，这可能取决于子项的状态。
beforeLayout 调用此方法前集装箱奠定了（呈现如有必要），其子组件。
afterLayout 这种方法被调用的集装箱后，已经奠定了（并作出必要的话）其子组件。

面板

如果所需的UI组件必须有一个头，页脚，或工具栏，然后Ext.Panel相应的类来扩展。

重要：面板是一个容器。重要的是要记住这是被用来渲染和管理子组件的布局。

通常是高度特定应用扩展Ext.Panel类和一般用在其他UI组件总额（一般容器，或表单域）配置的布局，并提供手段来操作控制手段所包含的元件，在tbar BBAR。

面板有下列额外的模板方法：

afterCollapse 这种方法被调用后面板折叠。
afterExpand 小组扩大后调用此方法
onDockedAdd 这种方法被调用后，停靠的项目被添加到小组
onDockedRemove 停靠的项目后调用此方法是从小组中删除

阿洲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件

组件一个Ext JS的应用程序的UI是由一个或许多部件称为组件小号。所有组件的子类Ext.Component类，允许他们参与自动化生命周期管理，包括实例，渲染，大小和定位，并破坏。Ext JS的开箱即提供广泛的有用成分，任何组件都可以很容易地扩展，以创建一个自定义组件。在组件层次结构一个容器是一个特殊的组件类型，可以包含其他组件。一个典型的应用是由许多嵌套组件在一个树形
复制链接

扫一扫