最近在弄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样式中自带的几个内容,还有一些,大家有兴趣可以自行查看,这两个就到这里,基本的容器组件了