Sencha touch 开发系列:组件之容器

本来这一篇打算讲ST2最值得骄傲的MVC，有同学感觉太快了，所以我再插入一篇专讲容器（Container），因为几乎每个ST应用都会用到这玩意。它非常重要。

容器也是由组件派生而来。

为什么我说每个应用都会用到容器呢？

因为就连我们ST应用的顶层全局组件Ext.Viewport（每个应用的所有内容都包含在我们的Ext.Viewport这个全局容器下）也是由Container派生而来的。

在ST中有好几个容器组件，如：panel,tabpanel,carousel,dataview,list,formpanel等！

各种容器作用都不一样，这需要我们在熟悉各种容器后， 根据实际业务需求而选择。

比如，页面上让你显示一个数据列表，你不应该选先carousel而应该选择list或者dataview

所谓容器就是它的内部可以包含一些其他组件的组件，它可以添加，删除子组件或者可指定一个布局去显示子组件。

容器的创建

Ext.create("Ext.Panel",{html:'我是一个容器'});

你可以通过ST的一个静态方法Ext.create来创建任何一个类，组件或容器。

你可以将上面代码放在Code editor中，并预览他！

你的结果应该会和我一样，一片空白。呵呵.....

这是因为，你只创建一个容器并未让他显示.

我们需要将它添加到全局的Viewport中或者全屏去显示它

var panel=Ext.create("Ext.Panel",{html:'我是一个容器'});

Ext.Viewport.add(panel);

或者

Ext.create("Ext.Panel",{html:'我是一个容器',fullscreen:true});

你可以在我们的code editor中去测试他们。

容器还有添加组件的方法

如:

var panel=Ext.create("Ext.Panel",{html:'我是一个容器'});

Ext.Viewport.add(panel);

panel.add({xtype:'button',text:'我是一个按钮'});



当然你还可以移除组件

如:

panel.removeAt(0);

还有一些容器组件的应用，我们将在后面的实例中一一介 绍，如dataview,list,formpanel,tabpanel......