[原]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样式中自带的几个内容，还有一些，大家有兴趣可以自行查看，这两个就到这里，基本的容器组件了
作者：jjx0224 发表于2013-9-23 17:17:25
原文链接
阅读：208 评论：0
查看评论