9、窗口基本应用
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)
});
10、窗口分组
var i=0;
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.onReady(function(){
mygroup = new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
});
11、对话框
Ext的对话都封装在Ext.MessageBox类,该类还可以简写Ext.Msg
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("请注意","这里是ExtJS的提示框");
});
});
12、Ext.MessageBox除了alert外,Ext还包含confirm,prompt,progress,wait等对话框
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){
alert(button);
alert(text);
});
});
});
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){
if(button=="yes"){
alert("删除成功");
}
if(button=="no"){
alert("删除不成功");
}
});
});
});
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("输入提示框","请输入你新年愿望:",function(button,text){
if(button=="ok"){
alert("你新年的愿望是:"+text);
}
else alert("你放弃了录入");
});
});
});
13、layout布局
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
width:400,
height:200,
layout:"column",
items:[{columnWidth:.5,title:"面板1"},
{columnWidth:.5,title:"面板2"}]
});
});
14、Border区域布局
Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:100,
title:"顶部面板"},
{region:"south",
height:50,
titl:"底部面板"},
{region:"center",
title:"中央面板"},
{region:"west",
width:100,
title:"左边面板"},
{region:"east",
width:100,
title:"右边面板"} ]
});
})
(来源:http://www.iomo.cn)