1,前台Html <body> <form id="form1" runat="server"> <div id="container1"> </div> </form> </body> 2,Js文件 Ext.onReady(function() { //MsgShow(); //Panel用Button var btn1 = new Ext.Button({ id: 'btn1', repeat: false, type: 'button', text: '確定', width: 70, listeners: { 'click': function() { Ext.Msg.alert('Warning', 'Button Clicked!'); } } }); var p1 = new Ext.Panel({ title: 'My Panel', //标题 collapsible: true, //右上角上的那个收缩按钮,设为false则不显示 renderTo: 'container1', //这个panel显示在html中id为container的层中 width: 400, height: 200, bbar: [{ text: '底部工具栏bottomToolbar'}], tbar: [{ text: '顶部工具栏topToolbar'}], tools: //panel工具栏的定义 [ { id: "save" }, { id: "help" }, { id: "up" }, { id: "close", handler: function() { Ext.MessageBox.alert("工具栏按钮", "工具栏上的关闭按钮时间被激发了") } } //触发工具栏上按钮的事件 ], buttons: [btn1], //按钮集合,自动添加到footer中 titleCollapse: true, //设为true,则点击标题栏的任何地方都能收缩,默认为false. html: "<p>可执行html</p>"//panel主体中的内容,可以执行html代码 //如 插入新页面。html:'<iframe width="100%" height="100%" src="' + 插入页面Url + '" mce_src="' + 插入页面Url + '"' }); //创建可拖拽Panel var p2 = new Ext.Panel({ title: 'Drag me', renderTo: Ext.getBody(), //向Body注册该Panel floating: true, frame: true, x: 0, y: 250, width: 400, height: 200, draggable: { //※可拖动Panel要重写,draggable方法 insertProxy: false, //拖动Panel时,不用虚线显示Panel的原始位置 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; //获取panel的阴影 if (s) { s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); //重新设置阴影位置 } }, endDrag: function(e) { this.panel.setPosition(this.x, this.y); //停止拖动时设置panel位置 } } }); }); /*工具栏相关选择 //id控制按钮,handler控制相应的事件 //id的枚举值为: toggle (collapsable为true时的默认值) close minimize maximize restore gear pin unpin right left up down refresh minus plus help search save print */