Benney Blog

store: Ext.create('Ext.data.TreeStore', {
 	model: 'ForumBrowser.Forum',
    root: {
        expanded: true
    },
    proxy: {
    	actionMethods: {   	// Post방식으로 변경..      
			create: 'POST',         
			destroy: 'DELETE',         
			read: 'POST',        
			update: 'POST'     
		}, 
        type: 'ajax',		// 'jsonp' : cross domain지원된다. 단 get방식만 지원한다. 2000byte지원
        url: '/smpl/forum/forums-remote.jsp',
        reader: {
            type: 'json',
            root: 'children'
        },
        success: function ( result, request) { 	// 여기서 이부분은 실행되지 않는다.
			var textArea = Ext.get('log').dom;
			textArea.value += result.responseText + "\n"; 
			Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText); 		
			//doJSON(result.responseText);
		},      //실패 시에 수행될 콜백 함수
		failure: function ( result, request) { // 여기서 이부분은 실행되지 않는다.
			Ext.MessageBox.alert('Failed', 'Successfully posted form: '+result.date); 
		} ,
		listeners: {	// 서버쪽 호출의 실패를 리스너를 통해 확인.
			// 서버쪽 프로그램 호출시실패할 경우.
    		exception: function(proxy, type, action, options, response, arg){
    			//alert('서버호출 에러 :'+ proxy.url);
    			Ext.MessageBox.alert('Failed', '서버호출 에러 :'+ proxy.url); 
				// your error handling code
				console.error(" Exception: \nProxy: %1.o \nType: %s \nAction: %s \nOptions: %1.o \nResponse: %1.o \nArguments: %1.o ",proxy, type, action, options, response, arg);
           	}
            //single: true,
            //scope: this
        }

    },
    setExtraParam: function (name, value){	// 파라메터세팅시 사용
    	this.proxy.extraParams = this.proxy.extraParams || {};  
		this.proxy.extraParams[name] = value;  
		this.proxy.applyEncoding(this.proxy.extraParams);  
	}
})

< 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
			
			
        });

    

// 아래의 함수에서 전달받는 인자는 extjs에 정의된 인자들이다 . 이렇게 extjs가 
// 정의하고 전달하는 인자가 무엇인지 궁금할 경우 arguments를 아래 처럼 이용하면 
// 좋을 듯 하다.
/**
 *** Grid에 renderer를 설정한다. 위치는 onReady밖에 있어도 상관없음.
 *** 아래 함수는 Grid내 column의 renderer에서 호출하게 된다. 기본 7개 인자넘김.
 *** Ext.grid.column.Column 참고할 것.
 */	
function renderTopic(value, p, record, rowIndex , colIndex , store, view) {
	for(var i=0; i< arguments.length; i++)
   		console.log(arguments[i]);
    		//console.log(rowIndex, colIndex, store.data.items[0], view);
		//console.log( view);
        	return Ext.String.format(
            	'{0}{1} Forum',
            	value,
            	record.data.forumtitle,
            	record.getId(),
            	record.data.forumid
        );
}