(入门篇11)using components in sencha touch 2

《(入门篇11)using components in sencha touch 2》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、UsingComponentsinSenchaTouch2作者：一夕QQ：944281625本系列文章为翻译文章，翻译自API文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。WhatisaComponent?在ST2中，那些我们可见的类几乎都是组件，他们都是Ext.Component的子类，这就意味着他们都必将有以下的功能：1.可以利用template在页面上渲染自己。2.随意的显示或者隐藏自己。3.可以将自己放置到屏幕的中间。4.可以改变自己是否可用。除此之外，他们还能实现一些比较高级的功能：1.漂浮在其他

2、组件上面。2.带有动画效果的来改变自己的大小和位置。3.将其他组件停靠在自己的内部。4.和其他组件对齐，或者允许被拖拽等。WhatisaContainer?我们创建的每一个组件都包括了上面的这些功能，但是我们的一个应用程序通常有很多的组件组成，并且会经常的嵌套。Container其实也是一个Component，只不过它是比较特殊的Component，就像一个容器一样，可以放置其他的组件在它里面。大多数的应用程序都有一个顶级的Container，叫做Viewport，它将占满这个屏幕。其他的组件都会作为它的子组件，被填充到Viewport中。Container里

3、面有一些函数，可以帮助我们实现我们的逻辑：包括组件的添加和移除，还有整个Container的布局等等。Layout，也就是布局，决定了各个组件在一个容器里面的位置。关于Layout的讲解，可以参考我翻译的其他文章。InstantiatingComponents在ST2中，组件的创建和其他类的创建，可以使用相同的方法：Ext.create。下面我们就来看看，如何创建一个简单的panel：varpanel=Ext.create('Ext.Panel',{html:'Thisismypanel'});上面的代码将创建一个panel的实例，只包括了最简单的HTML内容

4、。panel只是一个最简单的组件，它可以渲染HTML内容，并且可以作为其他组件的容器。虽然我们创建了一个Panel的实例，但是它并不会马上在屏幕上显示出来，那是因为在我们实例化之后，并不会马上渲染。这就允许我们可以创建一些其他的组件，然后将他们放置到panel中，然后开始渲染，这样比渲染完之后再放置组件会快很多的。我们可以利用全局的变量Viewport来将上面创建的组件显示在屏幕上：Ext.Viewport.add(panel);其实panel也是一个容器，现在让我们来看看panel这个容器的简单用法吧：varpanel=Ext.create('Ext.Pan

5、el',{layout:'hbox',items:[{xtype:'panel',flex:1,html:'LeftPanel,1/3rdoftotalsize',style:'background-color:#5E99CC;'},{xtype:'panel',flex:2,html:'RightPanel,2/3rdsoftotalsize',style:'background-color:#759E60;'}]});Ext.Viewport.add(panel);我们创建了一个panel容器，它的布局方式是hbox的，它包括了两个子项（通过items来设

6、置的），最后将panel显示在屏幕上了。这个例子还是比较简单了，我就不详细解释了，主要说说它的渲染或者说是加载过程吧：首先创建一个panel容器，然后通过xtype创建两个子组件（xtype是创建组件的一个快捷方式，就相当于create的简写），然后我们指定panel容器的布局，也就是这两个item在容器中的位置。最后我们开始将整个容器渲染。ConfiguringComponents其实，我们在定义一个组件的时候，可以在config中进行我们需要的配置，这样，在创建组建的时候，就会按照我们配置好的组件进行渲染了。不过有时候，我们同样可以对定义的组件进行修饰，下

7、面我们就来看一些简单的例子：/wecanconfiguretheHTMLwhenweinstantiatetheComponentvarpanel=Ext.create('Ext.Panel',{fullscreen:true,html:'ThisisaPanel'});//wecanupdatetheHTMLlaterusingthesetHtmlmethod:panel.setHtml('SomenewHTML');//wecanretrievethecurrentHTMLusingthegetHtmlmethod:alert(panel.getHtml(

8、));//alerts"Somenew