sencha touch之panel和tabpanel

最近在弄senchatouch的项目，所以边学习边开发，边记录，直接记录下test code如下：

Panel：

Ext.application({
name:'itKingApp',

launch: function(){

var panel=Ext.create('Ext.Panel',{
fullscreen:true,
id:'myPanel',
style:'color:red',
html:'主面板'
});
Ext.Viewport.add(panel)

// Ext.get 取得的是dom对象
var panel_dom=Ext.get('myPanel');

// Ext.ComponentManager 取得的是sencha组件
var panel_component=Ext.ComponentManager.get('myPanel');

// image 显示一张图片
var img=Ext.create('Ext.Img',{
//src:'resources/images/welcome.png',//相对路径
src:'http://www.baidu.com/img/bdlogo.gif',//绝对路径
width:'500px',
height:'500px'
});

var subPanel=Ext.create('Ext.Panel',{
id:'subPanel',
style:'color:green',
fullscreen:true,
html:'子面板',
items:[img]
});

panel_component.add(subPanel);

}
});

没什么好说的，很简单，API直接可以查看其它配置选项的含义，下面是TabPanel：

Ext.application({
name : 'itKingApp',

launch : function() {

var tabPanel = Ext.create('Ext.TabPanel', {
fullscreen : true,
id : 'myPanel',
ui:'dark',
tabBarPosition : 'top',

defaults : {
styleHtmlContent : false
},

items : [{
title : '主页',
iconCls : 'home',
html : '主页'
},
{
title : '联系人',
iconCls : 'user',
html : '联系人'
},
{
title:'定位',
iconCls:'locate'
},
{
title:'添加',
iconCls:'add'
},
{
title:'地图',
iconCls:'maps'
}
],
centered:false
});
Ext.Viewport.add(tabPanel)

}

});

唯一可以说的就是iconCls，这是senchatouch样式中自带的几个内容，还有一些，大家有兴趣可以自行查看，这两个就到这里，基本的容器组件了