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......

 

 

 

 

posted @ 2012-07-10 18:12  HTML5MOB  阅读(1174)  评论(0编辑  收藏  举报