1.常用的参数：

//配置参数(只列举部分常用参数)1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false4.bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]7.buttonAlignooter中按钮的位置，枚举值为："left","right","center",默认为right8.collapsible：设为true，显示右上角的收缩按钮，默认为false9.draggable:true则可拖动，但需要你提供操作过程，默认为false10.html:主体的内容11.id：id值，通过id可以找到这个组件，建议一般加上这个id值12.width：宽度13.height：高度13.title:标题14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.15.applyTo：（id）呈现在哪个html元素里面16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现17.renderTo：（id）呈现在哪个html元素里面

//关于这三个参数的区别(个人认为：applyTo和RenderTo强调to到html元素中，contentEl则是html元素到ext组件中去)：

2.可拖动的panel 实现详解：

//下面创建一个允许拖动的panel，但是拖动的结果不能保存var p=new Ext.Panel({    title: 'Drag me',    x: 100,    y: 100,    renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置    floating: true,//true    frame: true,//圆角边框    width: 400,    height: 200,    draggable:true}).show();//在这里也可以不show（）但是还不能拖到其他的地方，我们需要改写draggable：draggable: {        insertProxy: false,//拖动时不虚线显示原始位置        onDrag : function(e){            var pel =this.proxy.getEl();            this.x = pel.getLeft(true);            this.y = pel.getTop(true);//获取拖动时panel的坐标        },        endDrag : function(e){            this.panel.setPosition(this.x, this.y);//移动到最终位置        }    }实现了可保存的拖动，如图：拖动的时候阴影还在原位置，我们再在draggable中的onDrag事件中添加代码：var s =this.panel.getEl().shadow;            if (s) {                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());            }//shadow的realign方法的四个参数，改变shadow的位置大小属性

var p=new Ext.Panel({    title: 'Drag me',    x: 100,    y: 100,    renderTo: Ext.getBody(),    floating: true,    frame: true,    width: 400,    height: 200,    draggable: {        insertProxy: false,        onDrag : function(e){            var pel =this.proxy.getEl();            this.x = pel.getLeft(true);            this.y = pel.getTop(true);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);        }    }})

panel工具栏

//添加下面的代码到panel配置参数中tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}],//id控制按钮，handler控制相应的事件