[책펌] 센차터치(Sencha Touch)에서 컨테이너에 컴포넌트를 삽입하는 두 가지 방법

- 출처: 센차터치2+폰갭 프로그래밍 –

* Container의 items속성을 사용하여 Component를 삽입

Ext.application({
	name: 'Sencha',
	requires: ['Ext.Panel'],
	launch: function(){
		Ext.create('Ext.Panel', {
			fullscreen: true,
			html: ['I am  Container'].join(" "),
			items: [{ //컴포넌트 삽입
				xtype: 'panel',
				style: 'background-color:white',
				html: ['I am Component<br> I am added'].join(' ')
			}]
		});
	}
});

* Component를 별도로 생성 후 Container에 add 하는 방식으로 삽입

Ext.application({
	name: 'Sencha',
	requires: ['Ext.Panel'],
	launch: function(){
		panel = Ext.create('Ext.Panel', {
			style: 'background-color:yellow',
			fullscreen: true,
			html: ['I amd Container'].join(" ")
		});
		childPanel = Ext.create('Ext.Panel', {
			fullscreen: true,
			xtype: 'panel',
			style: 'background-color:white',
			html: ['I am Conponent<br>', 'I am added'].join(' ')
		});
		panel.add(childPanel); //컴포넌트 삽입
		childPanel.setCentered(true);
		childPanel.setHtml('I am centered'); //html overwrite
	}
});