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

        }

    }

})