Sencha-概念-Components(组件）（官网文档翻译7）-优快云博客

本文深入探讨了 Sencha Touch 中的组件与容器，包括组件的基本特性、能力、实例化、配置、使用 xtype 创建组件、配置组件、组件间的对接、销毁组件以及容器的特殊功能，如添加、删除子组件、指定布局等。通过实例展示了如何创建、配置和管理组件，以及如何利用容器组织和布局子组件。

Sencha-概念-Components(组件）（官网文档翻译7）

在煎茶触摸交互的可视化类的组成部分。在煎茶触摸的每一个组件是Ext.Component，这意味着他们可以在所有的子类：

渲染自己的页面上使用模板
显示和隐藏自己在任何时间
中心在屏幕上
启用和禁用

他们还可以做一些更先进的东西：

浮在上面其他组件（窗口，消息框和覆盖）
与动画在屏幕上改变大小和位置
的船坞内的组件本身（有用的工具栏）
对齐到其他组件，让自己四处拖动，其内容可滚动更多

什么是集装箱？

创建的每个组件，都具有上述所有能力，但应用程序是由大量的组件，通常嵌套彼此的。容器是一样的部件，但除了以上的能力，他们也可以让你呈现，并安排他们内部的子组件。大多数应用程序有一个顶层容器称为视口，占据了整个屏幕。在这里面，子组件，例如在邮件应用程序的视口容器的两个孩子可能是一个邮件列表和邮件预览窗格。

容器提供以下额外功能：

添加子组件的实例化和运行时间
删除子组件
指定布局

布局确定的子组件的布局应在屏幕上。在我们的邮件应用程序的例子中，我们使用一个HBox布局，使我们可以固定邮件列表的左边缘的屏幕，并允许在预览窗格中占据了剩下的。有几个布局在煎茶触摸，这些都有助于你达到你想要的应用程序结构进一步解释说，在布局指南。

实例化组件

创建组件相同的方法在煎茶触摸的所有其他类-使用Ext.create。下面是我们如何可以创建一个小组：

var panel =Ext.create('Ext.Panel',{
    html:'This is my panel'});

这将创建一个面板的实例，配置了一些基本的HTML内容。Panel是一个简单的组件，可以使HTML，也包含其他项目。在这种情况下，我们已经创建了一个面板的实例，但它不会显示在屏幕上，但因为项目不被实例化后，立即呈现。这使我们能够创建一些组件和移动它们在渲染和解雇他们，这是一个很好的处理速度比移动渲染后。

要显示此面板在屏幕上，现在我们可以简单地把它添加的全球视口：

Ext.Viewport.add(panel);

面板容器，这意味着它们可以包含其它组件，布局安排。现在，让我们回顾上面的例子中，这个时候创建一个面板有两个子组件和一个HBox布局：

var panel =Ext.create('Ext.Panel',{
    layout:'hbox',

    items:[{
            xtype:'panel',
            flex:1,
            html:'Left Panel, 1/3rd of total size',
            style:'background-color: #5E99CC;'},{
            xtype:'panel',
            flex:2,
            html:'Right Panel, 2/3rds of total size',
            style:'background-color: #759E60;'}]});Ext.Viewport.add(panel);

这一次，我们创建了3个面板-创建第一个是像以前一样，但内部两个声明为inline使用的xtype。xtype就是一个便捷的方式，不走通过Ext.create，并指定完整的类名的过程中，而不是你可以只需要提供的xtype为对象的类里面，框架将创建你的组件创建组件。

我们还指定了布局的顶级面板 - hbox的在这种情况下，这将根据每个孩子的“柔性”父面板的水平宽度。例如，如果上面的父面板为300px阔，那么第一个孩子将被弯曲，因为第一个给定的挠曲：1和第二柔性：2 100px宽和第二为200px。

配置组件

当你创建一个新的组件，你可以通过在配置选项。对于一个给定的组件的所有的配置类文档页的“配置选项”一节中列出。当你实例化组件，您可以通过任意数量的配置选项，并修改任何人在任何点后。例如，我们可以很容易地修改HTML内容的小组创建后：

//we can configure the HTML when we instantiate the Componentvar panel =Ext.create('Ext.Panel',{
    fullscreen:true,
    html:'This is a Panel'});//we can update the HTML later using the setHtml method:
panel.setHtml('Some new HTML');//we can retrieve the current HTML using the getHtml method:Ext.Msg.alert(panel.getHtml());//alerts "Some new HTML"

每个配置有一个getter方法和setter方法 - 这些都是自动生成的，并始终遵循相同的模式。例如，配置名为“HTML”将接收getHtml和setHtml方法，一个配置的缺省的类型，将收到getDefaultType和setDefaultType方法，，等。

使用的xtype

xtype就是一个简单的方法来创建组件，而无需使用完整的类名。这是非常有用的，当创建一个包含子组件的容器。一个xtype就是一个简单的快捷方式指定一个组件-例如，你可以使用的xtype：“面板”，而不是输入Ext.panel.Panel。

使用范例：

Ext.create('Ext.Container',{
    fullscreen:true,
    layout:'fit',

    items:[{
            xtype:'panel',
            html:'This panel is created by xtype'},{
            xtype:'toolbar',
            title:'So is the toolbar',
            docked:'top'}]});

列表xtypes

这是可在煎茶触摸2的所有xtypes的列表中：

的xtype类
--------------------------------------
actionsheet             Ext.ActionSheet
audio                   Ext.Audio
button                  Ext.Button
component               Ext.Component
container               Ext.Container
image                   Ext.Img
label                   Ext.Label
loadmask                Ext.LoadMask
map                     Ext.Map
mask                    Ext.Mask
media                   Ext.Media
panel                   Ext.Panel
segmentedbutton         Ext.SegmentedButton
sheet                   Ext.Sheet
spacer                  Ext.Spacer
title                   Ext.Title
titlebar                Ext.TitleBar
toolbar                 Ext.Toolbar
video                   Ext.Video
carousel                Ext.carousel.Carousel
carouselindicator       Ext.carousel.Indicator
navigationview          Ext.navigation.View
datepicker              Ext.picker.Date
picker                  Ext.picker.Picker
pickerslot              Ext.picker.Slot
slider                  Ext.slider.Slider
thumb                   Ext.slider.Thumb
tabbar                  Ext.tab.Bar
tabpanel                Ext.tab.Panel
tab                     Ext.tab.Tab
viewport                Ext.viewport.Default

DataView的组件
---------------------------------------------
dataview                Ext.dataview.DataView
list                    Ext.dataview.List
listitemheader          Ext.dataview.ListItemHeader
nestedlist              Ext.dataview.NestedList
dataitem                Ext.dataview.component.DataItem

表单组件
---------------------------------------------
checkboxfield           Ext.field.Checkbox
datepickerfield         Ext.field.DatePicker
emailfield              Ext.field.Email
field                   Ext.field.Field
hiddenfield             Ext.field.Hidden
input                   Ext.field.Input
numberfield             Ext.field.Number
passwordfield           Ext.field.Password
radiofield              Ext.field.Radio
searchfield             Ext.field.Search
selectfield             Ext.field.Select
sliderfield             Ext.field.Slider
spinnerfield            Ext.field.Spinner
textfield               Ext.field.Text
textareafield           Ext.field.TextArea
textareainput           Ext.field.TextAreaInput
togglefield             Ext.field.Toggle
urlfield                Ext.field.Url
fieldset                Ext.form.FieldSet
formpanel               Ext.form.Panel

将组件添加到容器

正如我们上面提到的，容器是特殊的组件，可以有子组件的布局安排。上面的代码示例显示了如何创建一个面板与2子面板内已定义的，但很容易在运行时也这样做：

//this is the Panel we'll be adding belowvar aboutPanel =Ext.create('Ext.Panel',{
    html:'About this app'});//this is the Panel we'll be adding tovar mainPanel =Ext.create('Ext.Panel',{
    fullscreen:true,

    layout:'hbox',
    defaults:{
        flex:1},

    items:{
        html:'First Panel',
        style:'background-color: #5E99CC;'}});//now we add the first panel inside the second
mainPanel.add(aboutPanel);

在这里，我们创建了三个评估小组在总。首先，我们的aboutPanel，我们可能会使用一个小的应用程序告诉用户。然后，我们创建一个名为mainPanel中，已经包含了第三委员会在其项目配置，一些虚拟文本（“委员会”）。最后，我们添加的第一个面板调用添加方法mainPanel中，到第二次。

在这种情况下，我们给我们的mainPanel中另一个hbox的布局，但我们也推出了一些默认值。这些小组中的每一项，所以在这种情况下，内mainPanel中的每一个孩子会得到一个Flex：1配置。这样做的效果是，当我们第一次呈现在屏幕上内mainPanel中只有一个孩子，因此，孩子需要提供给它的全宽。虽然，一旦mainPanel.add线被称为，aboutPanel呈现它的内部，并也给出一个flex 1，这将导致它与第一面板的同时接收的整个宽度的一半的mainPanel中。

同样，它很容易从容器中删除项目：

mainPanel.remove(aboutPanel);

这条线后运行一切又回来了是怎么回事，“第一个孩子”面板再次mainPanel中的全宽内。

显示和隐藏组件

在煎茶触摸的每一个组件可以显示或隐藏着一个简单的API。继续上面的例子mainPanel中，在这里我们可以将其隐藏：

mainPanel.hide();

这将隐藏mainPanel中的本身和它里面的所有子组件。再次显示组件是可以预见的：

mainPanel.show();

同样，这将恢复的mainPanel中的知名度和它里面的所有子组件。

活动

所有元件的火灾事件，您可以聆听并采取行动。例如，当输入到一个文本字段，它的“变”事件被触发。您可以侦听该事件，只需通过一个监听器配置：

Ext.create('Ext.form.Text',{
    label:'Name',
    listeners:{
        change:function(field, newValue, oldValue){
            myStore.filter('name', newValue);}}});

每次在文本字段值的变化，“变”事件被触发叫我们所提供的功能。在这种情况下，我们过滤了商店中键入它的名称，但我们可以提供任何其他功能。

很多的事件被解雇的煎茶触摸成分，让您可以方便地挂接到大部分的应用程序的行为方面。他们还可以指定组件后，已创建。

例如，让我们说你有一个仪表盘，民意调查为实时更新，但你不希望它轮询如果仪表板是不可见的，你可以简单地挂接到仪表板的显示和隐藏事件：

dashboard.on({
    hide:MyApp.stopPolling,
    show:MyApp.startPolling
});

这很容易钩到您的整个应用程序的行为像这样，在这种情况下延长电池使用寿命。被解雇的其他有用的事件是：

每个组件都有他们开火的事件在他们的类文件的完整列表。

对接

煎茶触摸有能力停靠其他容器中的组件。例如，我们可以使用一个hbox的布局，并要放在顶端的一面旗帜-对接为我们提供了一个简单的方法来做到这一点，而不必巢的容器内彼此：

布局指南“有一个充分的讨论的对接和所有其他布局选项。

销毁组件

由于大多数移动设备的内存量是有限的，往往是一个好主意，破坏当你知道你将不再需要它们更多的部件。这不是你应该考虑的第一件事情，当你创建一个应用程序，但它是一个很好的方法来优化您的用户得到的经验，当你把应用程序投入生产。销毁组件是很容易的：

mainPanel.destroy();

这将删除mainPanel中的DOM，并删除它的任何事件侦听器上设置了具体的DOM元素。它也将摧毁任何情况下，委员会内部使用，并调用所有的子组件的破坏。在组件被销毁其所有的儿童也将消失，这将不再是在DOM中，任何对它的引用将不再有效。

posted on 2012-12-26 20:39 CW.Liu 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/cheman/archive/2012/12/26/2834714.html