面板Panel
面板Panel 是ExtJS 控件的基础，很高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式形成。
面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，它里面又可以包含各种其它组件。
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</h1>',
tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
});
运行该代码，可以得到如图所示的输出结果，清楚的表示出了面板的各个组成部分。
一般情况下，顶部工具栏或底部工具栏只需要一个，而面板中一般也很少直接包含按钮，一般会把面板上的按钮直接放到工具栏上面。比如下面的代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source!</h1>',
tbar:[{pressed:true,text:'刷新'}]
});
});
可以得到如图所示的效果，该面板包含面板Header，一个顶部工具栏及面板区域三个部分。
面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext 中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏，可以直接通过面板的tools 配置选项往面板头部加入预定义的工具栏选项。比如下面的代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source!</h1>',
tools:[{id:"save"},
{id:"help", handler:function(){Ext.Msg.alert('help','please help me!');}
},{id:"close"}],
tbar:[{pressed:true,text:'刷新'}]
});
})
点击help按钮会执行handler中的函数，显示一个弹出对话框，而点击其它的按钮不会有任何行为产生，因为没有定义他们的handler。
除了在面板头部加入这些已经定义好的工具栏选择按钮以外，还可以在顶部或底工具栏中加入各种工具栏选项。这些工具栏选项主要包括按钮、文本、空白、填充条、分隔符等。
代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source!</h1>',
tbar:[new Ext.Toolbar.TextItem('工具栏:'),
{xtype:"tbfill"},
{pressed:true,text:'添加'},
{xtype:"tbseparator"},
{pressed:true,text:'保存'}
]
});
});
Ext中的工具栏项目主要包含下面的类：
Ext.Toolbar.Button－按钮，xtype为tbbutton
TextItem－
Ext.Toolbar.Fill－
Separator－
Spacer－
SplitButton－
为了显示一个面板，我们需要在页面上添加一个，然后把Ext 控件渲染到这个div 上。VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。看下面的代码：
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[{title:"面板",
html:"",
bbar:[{text:"按钮1"},
{text:"按钮2"}]
}]
});
});
Viewport 不需要再指定renderTo，而我们也看到Viewport 确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改变。
Viewport 主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport 上常用的布局有fit、border 等，当然在需要的时候其它布局也会常用。看下面的代码：
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:[{title:"面板",
region:"north",
height:50,
html:"<h1>网站后台管理系统!</h1>"
},
{title:"菜单",
region:"west",
width:200,
collapsible:true,
html:"菜单栏"
},
{
xtype:"tabpanel",
region:"center", items:[{title:"面板1"},
{title:"面板2"}]
}
]
});
});
窗口Ext.Window
ExtJS 中窗口是由Ext.Window 类定义，该类继承自Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。看下面的代码：
var i=0;
function newWin()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true});
win.show();
}
Ext.onReady(function(){
Ext.get("btn").on("click",newWin);
});
页面中的html 内容：
<input id="btn" type="button" name="add" value="新窗口" />
执行上面的代码，当点击按钮”新窗口”的时候，会在页面中显示一个窗口，窗口标题为“窗口x”，窗口可以关闭，可以最大化，点击最大化按钮会最大化窗口，最大化的窗口可以还原
窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都在默认的组Ext.WindowMgr 中。窗口分组由类Ext.WindowGroup 定义，该类包括bringToFront、getActive、hideAll、sendToBack 等方法用来对分组中的窗口进行操作。
var i=0,mygroup;
function newWin()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true,
manager:mygroup});
win.show();
}
function toBack()
{
mygroup.sendToBack(mygroup.getActive());
}function hideAll()
{
mygroup.hideAll();
}
Ext.oReay(function(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
});
页面中的html 代码
<input id="btn" type="button" name="add" value="新窗口" />
<input id="btnToBack" type="button" name="add" value="放到后台" />
<input id="btnHide" type="button" name="add" value="隐藏所有" />
执行上面的代码，先点击几次”新窗口”按钮，可以在页面中显示几个容器，然后拖动这些窗口，让他们在屏幕中不同的位置。然后点”放到后台”按钮，可以实现把最前面的窗口移动该组窗口的最后面去，点击”隐藏所有”按钮，可以隐藏当前打开的所有窗口。
由于传统使用alert、confirm 等方法产生的对话框非常古板，不好看。因此，ExtJS 提供了一套非常漂亮的对话框，可以使用这些对话框代替传统的alert、confirm 等，实现华丽的应用程序界面。
Ext 的对话框都封装在Ext.MessageBox 类，该类还有一个简写形式即Ext.Msg，可以直接通过Ext.MessageBox 或Ext.Msg 来直接调用相应的对话框方法来显示Ext 对话框。看下面的代码：
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("请注意","这是ExtJS的提示框");
});
});
Html 页面中的内容：
<input id="btnAlert" type="button" value="alert框" />
除了alert 以外，Ext 还包含confirm、prompt、progress、wait 等对话框，另外我们可以根据需要显示自下定义的对话框。普通对话框一般包括四个参数，比如confirm 的方法签名为confirm ( String title, String msg, [Function fn], [Object scope] ) ，参数title 表示对话框的标题，参数msg 表示对话框中的提示信息，这两个参数是必须的；可选的参数fn 表示当关闭对话框后执行的回调函数，参数scope 表示回调函数的执行作用域。回调函数可以包含两个参数，即button 与text,button 表示点击的按钮，text 表示对话框中有活动输入选项时输入的文本内容。我们可以在回调函数中通过button 参数来判断用户作了什么什么选择，可以通过text 来读取在对话框中输入的内容。看下面的例子：
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){
alert(button);
alert(text);
});
});
});
因此，在实际的应用中，上面的代码可以改成如下的内容：
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){
if(button=="yes"){
//执行删除操作
alert("成功删除");
}
});
});
});
这样当用户点击对话框中的yes 按钮时，就会执行相应的操作，而选择no 则忽略操作。
下面再看看prompt 框，我们看下面的代码：
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("输入提示框","请输入你的新年愿望:",function(button,text){
if(button=="ok"){
alert("你的新年愿望是:"+text);
}
else alert("你放弃了录入!");
});
});
})
Html 页面：
<input id="btn" type="button" value="对话框" />
在实际应用中，可以直接使用MessageBox 的show 方法来显示自定义的对话框，如下
面的代码：
function save(button)
{
if(button=="yes")
{
//执行数据保存操作
} else if(button=="no")
{
//不保存数据
} else
{
//取消当前操作
}
}
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.Msg.show({
title:'保存数据',
msg: '你已经作了一些数据操作，是否要保存当前内容的修改？',
buttons: Ext.Msg.YESNOCANCEL,
fn: save,
icon: Ext.MessageBox.QUESTION});
});
})
点击”对话框”按钮可显示一个自定义的保存数据对话框，对话框中包含yes、no、cancel
三个按钮，可以在回调函数save 中根据点击的按钮执行相应的操作
