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