Ext.Panel
var panel = new Ext.Panel({
//该panel的ID号 一般加上留着查找备用
id:'panelteset',
//
x: 100,
y: 100,
// 标题
title:'panel',
// 将panel绑定到dom中的固定id元素中
renderTo:'panel',
// 设置panel全部阴影 ，否则为1px边框
frame:false,
// 拖拽时设置是否浮动
floating: true,
// 自动加载内容 html页面只能加载 <body></body>
autoLoad:"http://localhost/exttest.php",
// autoLoad:{url:'http://www.bianceng.cn/webkf/Extjs/201011/20412.htm',scripts:true},
// panel通过右上角的倒三角可以收缩
collapsible:true,
// 点击标题栏的任何部分均能收缩
titleCollapse:true,
// 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
tools:[{id:'save'},{id:'minimize'},{id:'maximize'},{id:'close',handler:function(){alert('确定要关闭？');}}],
// 工具栏 看绑定事件
tbar:[{'text':'顶部工具栏1',handler:function(){Ext.MessageBox.alert('顶部工具栏1点击','通过handler绑定事件');}},
{'text':'顶部工具栏2'}],
bbar:[{'text':'底部工具栏1'},{'text':'底部工具栏2'}],
// 当panel中内容溢出时 是否出现滚动条
autoScroll:true,
// autoShow:true,
// 位于panel中footer位置的底部按钮
buttons:[{text:"按钮位于footer",handler:function(){alert(1);}}],
// 决定底部按钮的布局
buttonAlign:'left',
// 允许panel拖拽
// draggable:true,
// 重写dragable 使其保存拖拽结果 好像写程序时不需要拖拽
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大小
width:500,
height:300,
// panel中的填充内容
html:"<input type='text' value='1111111'></input>"
});
//该panel的ID号 一般加上留着查找备用
id:'panelteset',
//
x: 100,
y: 100,
// 标题
title:'panel',
// 将panel绑定到dom中的固定id元素中
renderTo:'panel',
// 设置panel全部阴影 ，否则为1px边框
frame:false,
// 拖拽时设置是否浮动
floating: true,
// 自动加载内容 html页面只能加载 <body></body>
autoLoad:"http://localhost/exttest.php",
// autoLoad:{url:'http://www.bianceng.cn/webkf/Extjs/201011/20412.htm',scripts:true},
// panel通过右上角的倒三角可以收缩
collapsible:true,
// 点击标题栏的任何部分均能收缩
titleCollapse:true,
// panel工具栏
// id控制 按钮，handler控制相应的事件
// id的枚举值为：
// toggle (collapsable为true时的默认值)
// close
// minimize
// maximize
// restore
// gear
// pin
// unpin
// right
// left
// up
// down
// refresh
// minus
// plus
// help
// search
// save
tools:[{id:'save'},{id:'minimize'},{id:'maximize'},{id:'close',handler:function(){alert('确定要关闭？');}}],
// 工具栏 看绑定事件
tbar:[{'text':'顶部工具栏1',handler:function(){Ext.MessageBox.alert('顶部工具栏1点击','通过handler绑定事件');}},
{'text':'顶部工具栏2'}],
bbar:[{'text':'底部工具栏1'},{'text':'底部工具栏2'}],
// 当panel中内容溢出时 是否出现滚动条
autoScroll:true,
// autoShow:true,
// 位于panel中footer位置的底部按钮
buttons:[{text:"按钮位于footer",handler:function(){alert(1);}}],
// 决定底部按钮的布局
buttonAlign:'left',
// 允许panel拖拽
// draggable:true,
// 重写dragable 使其保存拖拽结果 好像写程序时不需要拖拽
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大小
width:500,
height:300,
// panel中的填充内容
html:"<input type='text' value='1111111'></input>"
});
具体的设置使用时可以查找 个人觉得写程序的会基本的几个属性设置和事件的绑定就行