Benney Blog

Ext.Ajax.request({
    url: 'gen-invoice-grid.php',
    // send additional parameters to instruct server script
    params: {
        startDate: Ext.getCmp('start-date').getValue(),
        endDate: Ext.getCmp('end-date').getValue()
    },
    // process the response object to add it to the TabPanel:
    success: function(xhr) {
        var newComponent = eval(xhr.responseText); // see discussion below
        myTabPanel.add(newComponent); // add the component to the TabPanel
        myTabPanel.setActiveTab(newComponent);
    },
    failure: function() {
        Ext.Msg.alert("Grid create failed", "Server communication failure");
    }
});

var helpWindow = Ext.create('Ext.Window', {
        title: 'Source code',
        width: 920,
        height: 500,
        closeAction: 'hide',
        renderTpl: [
                   ],
        listeners: {
            render: function(w) {
                Ext.Ajax.request({
                    url: 'dragdropzones.js',
                    success: function(r) {
                        w.body.dom.value = r.responseText;
                    }
                });
            }
        }
    });
// 또는 
Ext.Ajax.request({
    url: 'gen-invoice-grid.php',
    // send additional parameters to instruct server script
    params: {
        startDate: Ext.getCmp('start-date').getValue(),
        endDate: Ext.getCmp('end-date').getValue()
    },
    // process the response object to add it to the TabPanel:
    success: function(xhr) {
        var newComponent = eval(xhr.responseText); // see discussion below 여기에 주목 ㅋㅋ
        myTabPanel.add(newComponent); // add the component to the TabPanel
        myTabPanel.setActiveTab(newComponent);
    },
    failure: function() {
        Ext.Msg.alert("Grid create failed", "Server communication failure");
    }
});
</pre>
<br />

// 최초 소스에 Model을 정의한 부분이 있는데 이부분을 밖으로 빼주니 잘 동작한다.
Ext.define('FeedViewer.App', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.FeedViewer',
    height:600,
    initComponent: function(){
        // feed model 정의
        Ext.define('Feed', {
            extend: 'Ext.data.Model',
            fields: ['title', 'pgm']
        });
		
        // viewport item set
        Ext.apply(this, {
            layout: 'border',
            //padding: 5,
            items: [ this.createFeedPanel()]
        });
       
        this.callParent(arguments);
    },

///////////////////////////////////////////
 // feed model 정의
Ext.define('Feed', {
    extend: 'Ext.data.Model',
    fields: ['title', 'pgm']
});

Ext.define('FeedViewer.App', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.FeedViewer',
    height:600,
    initComponent: function(){
         // viewport item set
        Ext.apply(this, {
            layout: 'border',
            //padding: 5,
            items: [ this.createFeedPanel()]
        });
       
        this.callParent(arguments);
    },

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

console.log($("div:first")[0]);  // div중 첫번째
console.log($("div:last")[0]);  // div중 마지막
console.log($("div").find("img")); // div중 img태그
console.log($("div").find("img").eq(6));  // div하위에 7번째 img태그를 찾는다. jQuery 객체리턴한다.
console.log($("div").find("img").eq(6)[0]); // 이 경우 실제 내용이 출력된다.
console.log($("div").find("img")[6]); // 위와 동일
------------------
console.log($("div").find("img").first());     // div하위의 첫번째 img tag 만약 div묶음이 2개라면 2개를 리턴
// 그러나 아래와 같이 처리하면 2개의 묶음중 첫번째만 처리한다. 뭔지..
$("div").find("img").first().src = 'gg.gif'; // 이 경우 div묶음중 첫번째 만 처리한다.
-----------------
console.log($("div").find("img:eq(0)")[0]);  // div 하위에 첫번째 img tag
console.log($("div").find("img:eq(0)")[1]);  // 위와 동일하다 단 div 중 img태그가 존재하는 두번째 div
-------------------
// only-child의 사용법
// $("p:only-child")  -> 이경우 p태그를 모두 찾는다 . 이는 바람직한 사용법이 아닌듯.. 아래처럼하자
// $("div p:only-child") -> 이렇게 하면 div 이하에 p태그가 하나있는 것을 찾는다.
// $("div img:only-child") -> div아래 img태그가 하나 있는것.
------------------
console.log($("div img:eq(3)"));  // div 아래있는 img태그 중 4번째 넘을 찾아온다.
----------------------------------------------
// nth-child 
// div 아래 img태그가 3개이상인 것중 3번째를 찾아온다.  
console.log($("div img:nth-child(3)"));

// img:gt(2)  -> img tag중 4번째부터 찾아온다. 즉 2->3이고 3보다 큰경우
console.log($("img:gt(2)");
// img:lt(4) -> img tag중 5번째 미만인 것들만 찾아온다. 즉 img tag의 첫번째부터 4번째까지 찾아온다.