Ext3.1.1(一) Panel

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qwkxq/article/details/56831211

Ext.onReady(function(){//当dom加载完后执行
            var win = new Ext.Window({  
                title : "Ext.Window",  
                contentEl:"win",//主体显示的html元素，也可以写为el:"win"
                resizable : false,  
                width : 350,  
                height : 300,  
                html : "Hi, my name is Ext.Window!",
                /* 1.closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口
                       hide,关闭后，只是hidden窗口
				2.closable:true在右上角显示小叉叉的关闭按钮，默认为true
				3.constrain：true则强制此window控制在viewport，默认为false
				4.modal:true为模式窗口，后面的内容都不能操作，默认为false
				5.plain：//true则主体背景透明，false则主体有小差别的背景色，默认为false */
                closable:true,
                constrain:true,
                plain:true,
                //button
                buttonAlign : "center",  
                buttons : [{text:"setTitle"},{text:"close"}],
                items:new Ext.TabPanel({
                      activeTab:0,//当前标签为第1个tab（从0开始索引）
                      border:false,//显示tab边框
                      items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口中"}]//TabPanel中的标签页，以后再深入讨论
                 }),  
            });  
            win.show();  
            
            //panel组件      
            var p=new Ext.Panel({
	            title:"面板",
	            width:500,
	            height:300,
	            //当floating=true时，要么手动设置panel位置，要么指定x,y
	            //否则panel将以使坐标为负数的方式隐藏
	            x: 10,
    			y: 10,
	            html:"这是一个面板",
	            renderTo:"panel",//渲染的html元素id
    			frame: true,//圆角边框
	            collapsible:true,//是否有收缩框
	            
	            //工具栏配置
	            tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏
		        bbar:[{text:"按钮1"},{text:"按钮2"}],  //底部工具栏
		        buttons:[{text:"按钮1",
		        	//按钮1添加事件
		        	handler:function(){Ext.MessageBox.alert("我是按钮1","我是通过底部按钮1激发出来的弹出框！")}
		        },{text:"按钮2"}], //footer部工具栏
		        //标题栏的工具栏
		        //id共有如下的值，平时按照需要添加，没必要全部添加
		        /*
		        toggle (collapsable为true时的默认值)
		        ,close,minimize,maximize,restore,gear,pin,unpin,right
				,left,up,down,refresh,minus,plus,help,search,save,print
		        */
		        tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了");p.destroy();}}],
	            
	            //拖动配置
	            floating: true,//true,要拖动到其它地方必须。
	            draggable:true,//允许拖动
	            //设置拖动的参数
	            draggable: {
			        insertProxy: false,//拖动时不虚线显示原始位置
			
			        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());
          				}
			        },
			        endDrag : function(e){
			            this.panel.setPosition(this.x, this.y);//移动到最终位置
			        }
    			}
            });
            //p.setPosition(0,0);//设置flotating=true需要手动设置一下panel的位置，否则panel会以负坐标的方式隐藏
        });