<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>panel.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
// 定义顶部工具栏
var topToolbar = new Ext.Toolbar(
{
buttons:[
{
text:"新建",
icon:"../ext/resources/images/default/dd/drop-add.gif",//按钮前加图片
cls:"x-btn-text-icon",//为图片预留位置，不然会把文字覆盖掉。
handler:function(){
Ext.Msg.alert("","新建文件！");
}
},
{
xtype:"tbsplit"//分隔符(tbseparator(-),tbspacer(空格),tbfill(->),tbsplit(带菜单，会显示一个向下的箭头)
},
{
text:"打开"
},
{
xtype:"tbspacer"//显示在右边
},
{
text:"保存"
},
{
text:"退出"
}
]
}
);
// 定义底部工具栏
var bottomToolBar = new Ext.Toolbar(
{
buttons:[
"->",
{
text:"上一步",
icon:"../ext/resources/images/default/dd/drop-add.gif",//按钮前加图片
cls:"x-btn-text-icon",//为图片预留位置，不然会把文字覆盖掉。
handler:function(){
Ext.Msg.alert("","回到上一步操作！");
}
},
"->",
{
text:"下一步",
icon:"../ext/resources/images/default/dd/drop-yes.gif",
cls:"x-btn-text-icon",
handler:function(){
Ext.Msg.alert("","进入下一步操作！");
}
},
"->",
{
text:"退出"
}
]
}
);
// 定义一个面板。面板由标题栏、顶部工具栏、底部工具栏、footer(放置确定、取消之类的按钮)、面板区域组成。
var panel = new Ext.Panel(
{
title:"面板标题",
width:"800",//面板宽度
titleCollapse:true,//标题可以收缩
collapsible:true,//面板可以收缩
html:"installing and starting the script debuggerusing the script debugger with microsoft® visual studio™ 98 in general, you should not install the script debugger if you have already installed visual studio 98 or any of its component products such as microsoft® visual interdev™ or microsoft® visual j++™. visual studio includes its own debugger that you can use to debug scripts and java components. if you install the script debugger after installing any visual studio products and you will no longer be able to start the visual studio debugger in response to errors reported by internet explorer 4.0.using the correct version microsoft script debugger works with microsoft internet explorer 4.0 or with internet information server 4.0. because the script debugger is designed to be generic across script hosts, setup does not check for specific versions of products being installed, so you must ensure that you are running the correct versions of these products. if you attempt to use the script debugger with earlier versions of internet explorer (such as internet explorer 3.0 or the platform preview release of internet explorer 4.0), or with earlier versions of internet information server, the debugger will not work and could disrupt iis service.uninstalling previous versions of the script debugger if you installed the script debugger for internet explorer 3.0, you must uninstall that version before proceeding with this installation.uninstalling iis if you uninstall internet information server 4.0, the uninstall process will also remove the script debugger, even if you installed the script debugger separately. you can reinstall the script debugger by running the iis installation and choosing to install just the script debugger.",//面板显示的内容
renderTo:"mydiv",//面板放置位置。
tbar:topToolbar,
bbar:bottomToolBar,
// 标题栏右侧可以放置一排按钮，像最大化，最小化，关闭等。通常是图标，没有文字。
//下面的id(通过id显示相应的图标)可以是这些：toggle,close,mimimize,maximize,gear,pin,unpin,right,left,up,down,refresh,minus,plus,
//help,search,save,print
tools:[
{
id:"refresh",//刷新
handler:function(e,toolEl,p){//toolEl:按钮本身，p:panel
// 从指定的位置获取数据，script为true表示执行script脚本。
p.getUpdater().update({url:"http://www.baidu.com",script:true});
}
},
{
id:"up",
handler:function(e,toolEl,p){
p.collapse(true);//收缩面板
}
},
{
id:"down",
handler:function(e,toolEl,p){
p.expand(true);//展开面板
}
},
{
id:"help",
handler:function(e,toolEl,p){
Ext.Msg.alert("提醒","版权所有，侵权必究！");
}
},
{
id:"maximize",//最大化
handler:function(e,toolEl,p){
//
}
}
,{
id:"close",
handler:function(e,toolEl,p){
p.hide();//隐藏面板
}
}
]
}
);
});
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
ext--panel
经和洽
类似资料：