1、Using Components in Sencha Touch 2作者：一夕 QQ：944281625本系列文章为翻译文章，翻译自 API 文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。What is a Component?在 ST2 中，那些我们可见的类几乎都是组件，他们都是 Ext.Component 的子类，这就意味着他们都必将有以下的功能：1. 可以利用 template 在页面上渲染自己。2. 随意的显示或者隐藏自己。3. 可以将自己放置到屏幕的中间。4. 可以改变自己是否可用。除此之外，他们还能实现一些比较高级的功能：1.
2、漂浮在其他组件上面。2. 带有动画效果的来改变自己的大小和位置。3. 将其他组件停靠在自己的内部。4. 和其他组件对齐，或者允许被拖拽等。What is a Container?我们创建的每一个组件都包括了上面的这些功能，但是我们的一个应用程序通常有很多的组件组成，并且会经常的嵌套。Container 其实也是一个 Component，只不过它是比较特殊的 Component，就像一个容器一样，可以放置其他的组件在它里面。大多数的应用程序都有一个顶级的 Container，叫做 Viewport，它将占满这个屏幕。其他的组件都会作为它的子组件，被填充到 Viewport 中。Container
3、 里面有一些函数，可以帮助我们实现我们的逻辑：包括组件的添加和移除，还有整个 Container 的布局等等。Layout，也就是布局，决定了各个组件在一个容器里面的位置。关于 Layout 的讲解，可以参考我翻译的其他文章。Instantiating Components在 ST2 中，组件的创建和其他类的创建，可以使用相同的方法：Ext.create。下面我们就来看看，如何创建一个简单的 panel：var panel = Ext.create(Ext.Panel, html: This is my panel);上面的代码将创建一个 panel 的实例，只包括了最简单的 HTML 内容。
4、panel 只是一个最简单的组件，它可以渲染 HTML 内容，并且可以作为其他组件的容器。虽然我们创建了一个 Panel 的实例，但是它并不会马上在屏幕上显示出来，那是因为在我们实例化之后，并不会马上渲染。这就允许我们可以创建一些其他的组件，然后将他们放置到 panel 中，然后开始渲染，这样比渲染完之后再放置组件会快很多的。我们可以利用全局的变量 Viewport 来将上面创建的组件显示在屏幕上：Ext.Viewport.add(panel);其实 panel 也是一个容器，现在让我们来看看 panel 这个容器的简单用法吧：var panel = Ext.create(Ext.Panel,
5、 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);我们创建了一个 panel 容器，它的布局方式是 hbox 的，它包括了两个子项（通过 items来设置的） ，最后将 panel
6、显示在屏幕上了。这个例子还是比较简单了，我就不详细解释了，主要说说它的渲染或者说是加载过程吧：首先创建一个 panel 容器，然后通过 xtype 创建两个子组件（xtype 是创建组件的一个快捷方式，就相当于 create 的简写） ，然后我们指定 panel 容器的布局，也就是这两个 item在容器中的位置。最后我们开始将整个容器渲染。Configuring Components其实，我们在定义一个组件的时候，可以在 config 中进行我们需要的配置，这样，在创建组建的时候，就会按照我们配置好的组件进行渲染了。不过有时候，我们同样可以对定义的组件进行修饰，下面我们就来看一些简单的例子：/
7、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:alert(panel.getHtml(); /
8、alerts “Some new HTML“对于每一个 config 都有相应的 getter 和 setter 方法，来从外部改变我们的 config 项，具体的 config 项，可以在 api 文档中自行查找。Using xtype上面我们已经简单实用了 xtype，下面我们就来详细的讲解一下 xtype 吧。我们在创建 class 的时候，我们必须要给 create 传入类名的完整名字，但是我们使用xtype 的话，就不需要了，我们只需要告诉框架他的 xtype 是什么，框架就会自动为我们创建的。我们在 Container 中使用的时候，就会显得格外简单了，看下面的例子：Ext.cre
9、ate(Ext.Container, fullscreen: true,layout: fit,items: xtype: panel,html: This panel is created by xtype,xtype: toolbar,title: So is the toolbar,dock: top);我们只需要告诉框架，我们的 xtype 是什么，如果是我们自己定义的 xtype 的话，需要在前面 requires 中引入。这样就非常方便的实现了创建，其实这些都是框架给我们封装好的。List of xtypesxtype Class- -actionsheet Ext.ActionS
10、heetaudio Ext.Audiobutton Ext.Buttoncomponent Ext.Componentcontainer Ext.Containerimage Ext.Imglabel Ext.Labelloadmask Ext.LoadMaskmap Ext.Mapmask Ext.Maskmedia Ext.Mediapanel Ext.Panelsegmentedbutton Ext.SegmentedButtonsheet Ext.Sheetspacer Ext.Spacertitle Ext.Titletitlebar Ext.TitleBartoolbar Ext.
11、Toolbarvideo Ext.Videocarousel Ext.carousel.Carouselcarouselindicator Ext.carousel.Indicatornavigationview Ext.navigation.Viewdatepicker Ext.picker.Datepicker Ext.picker.Pickerpickerslot Ext.picker.Slotslider Ext.slider.Sliderthumb Ext.slider.Thumbtabbar Ext.tab.Bartabpanel Ext.tab.Paneltab Ext.tab.
12、Tabviewport Ext.viewport.DefaultDataView Components-dataview Ext.dataview.DataViewlist Ext.dataview.Listlistitemheader Ext.dataview.ListItemHeadernestedlist Ext.dataview.NestedListdataitem Eponent.DataItemForm Components-checkboxfield Ext.field.Checkboxdatepickerfield Ext.field.DatePickeremailfield
13、Ext.field.Emailfield Ext.field.Fieldhiddenfield Ext.field.Hiddeninput Ext.field.Inputnumberfield Ext.field.Numberpasswordfield Ext.field.Passwordradiofield Ext.field.Radiosearchfield Ext.field.Searchselectfield Ext.field.Selectsliderfield Ext.field.Sliderspinnerfield Ext.field.Spinnertextfield Ext.f
14、ield.Texttextareafield Ext.field.TextAreatextareainput Ext.field.TextAreaInputtogglefield Ext.field.Toggleurlfield Ext.field.Urlfieldset Ext.form.FieldSetformpanel Ext.form.PanelAdding Components to Containers正如我们上面提到的，Container 是比较特殊的组件，因为它可以作为容器来放置其他的组件的。我们在上面的例子里面创建了两个 panel 然后添加到一个 panel 中，其实我们也
15、可以这样实现的：/this is the Panel well be adding belowvar aboutPanel = Ext.create(Ext.Panel, html: About this app);/this is the Panel well 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 ad
16、d the first panel inside the secondmainPanel.add(aboutPanel);我想大家看代码就明白是什么意思了。首先我们创建了一个 aboutPanel，然后我们创建了一个 mainPanel，其中已经包括了一个子组件，然后我们通过 add 函数向 mainPanel中添加我们创建的 aboutPanel。同样我们也可以使用 remove 函数将组件从容器中移除：mainPanel.remove(aboutPanel);Showing and Hiding Components在 ST2，我们可以轻松的显示或者隐藏一个组件的：mainPanel.hi
17、de();我们隐藏了 mainPanel 组件，它内部的组件也会被隐藏。mainPanel.show();同样，在显示组件的时候，也会是内部的子组件显示出来。Events每一个组件可能触发一定的事件的，我们可以对这些事件进行监听，然后在触发事件的时候实现我们需要的逻辑功能的。例如，当一个 Text field 输入的时候，都会触发它的change 事件。我们可以通过配置 listeners 来实现事件的监听。Ext.create(Ext.form.Text, label: Name,listeners: change: function(field, newValue, oldValue) m
18、yStore.filter(name, newValue););每一次，当 text field 的内容改变的时候，都将触发 change 事件，此时将调用我们定义的函数了。ST2 的组件可以触发很多的事件的，我们可以在这些事件中定义好我们的逻辑，实现我们的应用程序需要的功能。当我们的组件创建之后，我们同样可以指定这些事件的。例如：假如我们有个仪表盘来实时显示投票，但是我们并不想当它不可见时还进行监听，那么我们可以这样做：dashboard.on(hide: MyApp.stopPolling,show: MyApp.startPolling);每一个组件都有一系列的事件，你可以查看相关的 a
19、pi 文档的。DockingST2 中，我们可以将组件停靠在容器的某些位置，例如，我们可以使用 hbox 布局，将一个标题放置在顶部：Destroying Components我们的 ST2 是专门为移动设备开发的框架，所以我们一定要考虑的就是移动设备有限的内存空间。当我们不需要一个组件的时候，将它销毁就显得十分有必要了。销毁一个组件的代码很简单的：mainPanel.destroy();这将吧 mainPanel 从 DOM 中移除，并且移除它所设置的事件监听，以及自组件，并调用子组件的 destroy 方法来销毁子组件。一旦销毁之后，在 DOM 中就不再存有它了，所以任何指向它的引用都是非法的了。
