Sencha touch 开发系列：移动应用开发之组件

玩好ST那么就必须了解 ST中的所有组件，组件的基本方法，事件，和一些属性，如果复写组件，你还必须了解组件是如何创建的，需要深读源码。

那么怎样去看各组件的方法，事件，属性及源码呢？

请打开：http://docs.sencha.com/touch/2-0/



点击上面的齿轮，你可以看到ST所有的API，你再点Component，在右边你可以看到所有的组件，你可以从字面意思去认识知。

然后，一个个玩玩，知道各组件是干啥的，想想适用于啥场景。

好，那们我如何玩组件呢？

看图：



点开Ext.Toolbar,这时你将打开Toolbar的API页



看到上面的红线标记了吗？

最上面有config（属性，配置），methods（组件的方方法），Events(组件的事件)

Code Editor Live Preview （代码编辑器，即时预览）这可时学习ST的利器，以后你大多数测试和尝试都可以通过它来完成。

右边则是 Toolbar组件的源码，和它的继承关系（初学者可以先不去看）

这个时候，你可点击Code Editor去玩ST的组件了

他有一些实例代码在，你可以去掉，对着Config配置去测试，玩一些配置，或添加一些监听事件，或调用一些方法。

var toolbarTest=Ext.create('Ext.Container', {
fullscreen: true,
items: [
{
xtype : 'toolbar',
docked: 'top',
title: 'hello 刘江'
} ,
{xtype:'button',text:'test2',handler:function(){
alert("hello 刘江");
}},
{xtype:'button',text:'test2',action:'custome'}
]
});
//动态添加第二个按钮的事件
toolbarTest.down("button[action=custome]").on("tap",function(){
//周用toolbar的方法，改变title
toolbarTest.down("toolbar").setTitle("Hello Sencha touch!");
});

　　看备注，是如何添加事件的，是如何调用方法的？

你可以复制到Code Editor去跑跑！

学习法方我基本就是这样，等你把所有组件都玩了一下，看到他的基本效果后，基本可以往下学了.....

作者：Louja

出处：http://html5mob.cnblogs.com 同步在：http://html5mob.com

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。