panel的一些属性

id：id值，通过id可以找到这个组件，建议一般加上这个id值,

applyTo：（id）呈现在哪个html元素里面

contentEl：（id）呈现哪个html元素里面，把el内的内容呈现

renderTo：（id）呈现在哪个html元素里面

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

extjs中的Panel组件。

//html代码


<div id="container">

</div>



//js代码


var p = new Ext.Panel({

title: 'My Panel',//标题


collapsible:true,//右上角上的那个收缩按钮，设为false则不显示


renderTo: 'container',//这个panel显示在html中id为container的层中


width:400,

height:200,

html: "<p>我是内容，我包含的html可以被执行！</p>"//panel主体中的 内容，可以执行html代码


});


最后这个可拖动的panel的代码为：

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

}

}

})