Extjs4에서 패널의 간단한 사용

Ext.onReady(function(){
	Ext.QuickTips.init();
	Ext.create('Ext.panel.Panel',{
	    title: '[01] [Ext.panel.Header]',
	    width: 500,
	    bodyPadding : 10,// 
	    height: 400,
	    hideCollapseTool:false,
	    collapsible :true,
	    //animCollapse : false,// 
	    //frame : true,// 
	    autoLoad:'/Learning-extjs4.0/lesson/26/ass.html',// null 
	    html: '
[02] 
',// 
	    autoScroll:true,// 
	    closable:true,// 
	    closeAction:'destroy',// [destroy|hide]
		bodyStyle: {
		    background: '#ffc'
		},	    
	    renderTo: 'demo',
	    tbar: [
		  { xtype: 'button', text: '[03] ' }
		],
		bbar: [
		  { xtype: 'button', text: '[04]  ' }
		],
		dockedItems: [{
		    xtype: 'toolbar',
		    dock: 'bottom',
		    ui: 'footer',
		    items: [
		        { xtype: 'component', flex: 1 },
		        { xtype: 'button', text: '[05] ',
		        	handler:function(b){
		        		b.up("panel").removeAll(true)// 
		        	}
		        }
		    ]
		}],
		tools:[{
		    type:'refresh',
		    qtip: ' '
		},{
		    type:'help',
		    qtip: ' '
		},{
			id:'next',
		    handler: function(event, toolEl, panel){
		    	panel.up("panel").insert(0,{
		    			xtype:'panel',
		    			width:100,
		    			height:100,
		    			bodyStyle: {
						    background: 'red'
						}
		    		}) 
		    }
		}]		
	});
});
/**
	close
    collapse
    down
    expand
    gear
    help
    left
    maximize
    minimize
    minus
    move
    next
    pin
    plus
    prev
    print
    refresh
    resize
    restore
    right
    save
    search
    toggle
    unpin
    up
*/