자바스크립트/Ext JS2011. 5. 20. 13:03
< script type="text/javascript" src="/js/bootstrap.js">< / script>
    < script type="text/javascript">
    	// 어플리케이션의 뼈대를 만들어보자. 좌측에 트리가 있고
    	// 우측에 그리드가 있이도록 빼대만 만들어보자.
    	// 이하는 실행 순서를 로그로 찍어본것이다.
		// 각각의 컴포넌트는 자신이 가지고 있는 자식 컴포넌
		// 트가 있다면 실행시키고 그 자식 컴포넌트는 자신이 
		// 실행된 후 this.callParent()를 콜하여 자신을 가지고 있는
		// 부모 컴포넌트가 계속 실행되도록 한다. 해서 여기서는 callParent가 
		// 가장 중요하다고 할 수 있다.
		//ForumBrowser.Main Start...   
		//ForumBrowser.ForumList Start..
		//ForumBrowser.ForumList End1..
		//ForumBrowser.ForumList End2..
		//ForumBrowser.TopicContainer Start..
		//ForumBrowser.TopicContainer End1..
		//ForumBrowser.TopicContainer End2..
		//ForumBrowser.Main End...
    	Ext.define('ForumBrowser.TopicContainer', {
		    extend: 'Ext.container.Container',		// container상속
		    alias: 'widget.topiccontainer',
		    title: 'Loading...',
		    initComponent: function(){
		    	console.log('ForumBrowser.TopicContainer Start..');
		        Ext.apply(this, {
		           layout: 'border',
		           items: [{
		           			id:'topA',
			                text: 'Preview Pane',
                    		iconCls: 'icon-preview',
                    		region: 'center'
			            },{
			            	id:'topB',
		                split: true,
		                height: 300,
		                region: 'south',
		                itemId: 'preview',
		                title: 'View Topic',
		                bodyPadding: 10,
		                tpl: '{title}

Post details here.' }] }); console.log('ForumBrowser.TopicContainer End1..'); this.callParent(); } }); Ext.define('ForumBrowser.ForumList', { // 걍이름 extend: 'Ext.tree.Panel', alias: 'widget.forumlist2', // widget로 시작해야함. 호출시에는 widget을 빼고 호출. rootVisible: false, lines: false, minWidth: 200, initComponent: function(){ // 여기서 구현하자. console.log('ForumBrowser.ForumList Start..'); Ext.apply(this, { }); console.log('ForumBrowser.ForumList End1..'); this.callParent(); } }); Ext.define('ForumBrowser.Main', { extend: 'Ext.container.Viewport', alias: 'widget.main0', initComponent: function(){ console.log("ForumBrowser.Main Start..."); Ext.apply(this, { layout: 'border', itemId: 'main', items: [{ id:'forum001', xtype: 'forumlist2', // widget.forumlist call region: 'west', width: 300, title: 'Forums', split: true, margins: '5 0 5 5' }, { region: 'center', xtype: 'tabpanel', id:'tab001', margins: '5 5 5 0', minWidth: 400, border: false, tabBar: { border: true }, items: { // parent itemId: 'topic', xtype: 'topiccontainer' } }] }); this.callParent(); console.log("ForumBrowser.Main End..."); } }); Ext.onReady(function(){ Ext.QuickTips.init(); new ForumBrowser.Main(); // app call });




Posted by 1 베니94

댓글을 달아 주세요