您的位置：首页 > Web前端 > JavaScript

EXTJS 学习总结（2） Ext.Panel

2009-12-07 15:14 387 查看

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
*/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航