[原]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 查看评论