Ext初级入门

Ext.onReady(function(){
	var panel = new Ext.Panel({
        //el:'text',
        title:'MyPanel',
        collapsible:true,//可收缩
        floating:true,//可浮动
        draggable:true, //可拖拽
        html :'aaaaa',
        pageX :100,
        pageY :50,
        width: 500,
        height:300,
        titleCollapse: true,
        frame: true,//圆角边框
//        renderTo:Ext.getBody(),
        draggable: {
         insertProxy: true,//拖动时不虚线显示原始位置

         onDrag : function(e){
             var pel = this.proxy.getEl();
             this.x = pel.getLeft(true);
             this.y = pel.getTop(true); //获取拖动时panel的坐标

            var s = this.panel.getEl().shadow;
             if (s) {
                 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); //shadow的realign方法的四个参数，改变shadow的位置大小属性
             }
         },
         endDrag : function(e){
             this.panel.setPosition(this.x, this.y);
         }
         },
         tbar:[{text:"button1"},{text:"button2"}], //顶部工具栏
         bbar:[{text:"button1"},{text:"button2"}],  //底部工具栏
         buttons:[{text:"button1"},{text:"button2"}] //footer部工具栏
	});
	
	var tabs = new Ext.TabPanel({
	   renderTo: document.body,
	   height:100,
	   buttons:[{text:"back"},
	   	
	   		{text:"next"}]
	});
	
	tabs.add({
	   title:'title1',
	   html:'你好',
	   closable:true
	});
	
   tabs.add({
       title:'title2',
       html:'html2',
       closable:true
    });
    tabs.activate(0);
});