[원] 센차 터치의 패널과 타블판.

최근에 senchatouch 프로젝트를 하고 있기 때문에 공부하면서 개발하고 기록하면서 테스트 코드를 다음과 같이 기록합니다.
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
의견 보기