<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-3.3.1\resources\css/ext-all.css" />
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.3.1/ext-all.js"></script>
<script type="text/javascript">
function fn()
{
var win=new Ext.Window({title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source</h1>'});
win.on("beforedestroy",function(obj){//beforedestroy此函數(shù)在關(guān)掉時調(diào)用
alert("真的想關(guān)掉嗎!");
obj.show();
return true;
//false永遠(yuǎn)關(guān)不得，true或者不返回時可以關(guān)掉
});
win.show();
}
function button(){
var b=new Ext.Button({
text:"添加",
pressed:true,
heigth:30,
handler:Ext.emptyFn
});
b.render("dd");
//b.show();
}
function view(){
var v = new Ext.Viewport({
layout:"border",
items:[{region:"north",
title:"面板",
html:"面板內(nèi)容",
height:100},
{region:"center",
xtype:"grid",
title:"學(xué)生信息管理",
store:troe,
cm:colM,
store:store,
autoExpandColumn:3
}
]
});
v.render("dd");
}
function pan()
{
var obj={width:300,height:200,items:[ {title:"面板1",height:50,html:'Hello,easyjf open source'},
{title:"面板2",height:40},
{title:"面板3",height:40}]};
var panel=new Ext.Panel(obj);
panel.render("dd");//<div id="dd"> </div>設(shè)置id
}
function pan2()
{
var obj={renderTo:"dd2",title:"hello",width:300,height:200,html:'Hello,easyjf open source'};
var panel=new Ext.Panel(obj);
//renderTo:"dd2" 添加id
}
function myout(){
alert(2);
}
function myclick(){
Ext.get("in").addListener("click",function(){alert(4);});
Ext.get("in").addListener("click",function(){alert(5);});
Ext.get("in").on("click",function(){alert(6);});
Ext.get("in").on("click",myout,this,{delay:2000});//延遲加載
//從下到上執(zhí)行，addListener可以用on代替
//。在調(diào)用addListener方法的代碼中，第一個參數(shù)表示事件名稱，第二個參數(shù)表示事件處理器或整個響應(yīng)函數(shù)
}
function myPanle1(){
new Ext.Panel({
renderTo:"hello",
title:"面板頭部header",
width:300,
height:200,
html:'<h1>面板主區(qū)域</h1>',
tbar:[{text:'頂部工具欄topToolbar'}],
bbar:[{text:'底部工具欄bottomToolbar'}],
buttons:[{text:"按鈕位于footer"}]
});
}
function myPanle2(){
new Ext.Panel({
renderTo:"hello",
title:"面板頭部header",
width:300,
height:200,
html:'<h1>面板主區(qū)域</h1>',
tools:[{
id:"save"},
{id:"help",
handler:function(){Ext.Msg.alert('help','please help me!');}
},
{id:"close",
handler:function(){
Ext.get("hello").hide();
}
}],
tbar:[{pressed:true,text:'刷新'}]
});
}
function myPanle3(){
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:'保存',
handler:function(){
alert("保存成功");
}
}
]
});
}
function myview(){
new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[{title:"面板",
html:"",
bbar:[{text:"按鈕1"},
{text:"按鈕2",handler:function(){
alert("保存成功");
}}]
}]
});
}
function myview2(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:[
{title:"面板",
region:"north",
height:50,
html:"<h1>網(wǎng)站后臺管理系統(tǒng)!</h1>"
},
{title:"菜單",
region:"west",
width:200,
collapsible:true,
html:"菜單欄"
},
{
xtype:"tabpanel",
region:"center",
items:[{title:"面板1"},
{title:"面板2"}]
}
]
});
}
var i=0;
function newWin()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true});
win.show();
}
function onnewWin(){
Ext.get("btn").on("click",newWin);
}
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();
}
function wingroup(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
}
function tishi(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("請注意","這是ExtJS的提示框");
});
}
function extconfirm1(){
Ext.MessageBox.confirm("請確認(rèn)","是否真的要刪除指定的內(nèi)容",function(button,text){
//alert(button);
//alert(text);
if(button=="yes"){
alert("是");
}else if(button=="no"){
alert("否");
}
});
}
function extconfirm2(){
Ext.MessageBox.prompt("輸入提示框","請輸入你的新年愿望:",function(button,text){
if(button=="ok"){
alert("你的新年愿望是:"+text);
}
else alert("你放棄了錄入!");
});
}
function save(button)
{
if(button=="yes")
{
//執(zhí)行數(shù)據(jù)保存操作
} else if(button=="no")
{
//不保存數(shù)據(jù)
} else
{
//取消當(dāng)前操作
}
}
function saveorno(){
Ext.Msg.show({
title:'保存數(shù)據(jù)',
msg: '你已經(jīng)作了一些數(shù)據(jù)操作，是否要保存當(dāng)前內(nèi)容的修改？',
buttons: Ext.Msg.YESNOCANCEL,
fn: save,
icon: Ext.MessageBox.QUESTION});
}
function panel22(){
new Ext.Panel({
renderTo:"hello",
width:400,
height:200,
layout:"column",
items:[{columnWidth:.5,
title:"面板1"},
{columnWidth:.5,
title:"面板2"}]
});
}
function panel33(){
new Ext.Viewport({
layout:"border",
items:[
{region:"north",
height:50,
title:"頂部面板"},
{region:"south",
height:50,
title:"底部面板"},
{region:"center",
title:"中央面板",html:'qqqqqq'},
{region:"west",
width:100,
title:"左邊面板"},
{region:"east",
width:100,
title:"右邊面板"}
]
});
}
function panel44(){
new Ext.Panel({
renderTo:"hello",
title:"容器組件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:100},
{title:"列2",width:200},
{title:"列3",width:100},
{title:"列4"}
]
}
);
}
function panel55(){
new Ext.Panel({
renderTo:"hello",
title:"容器組件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",columnWidth:.2},
{title:"列2",columnWidth:.3},
{title:"列3",columnWidth:.3},
{title:"列4",columnWidth:.2}
]
}
);
}
function panel55fit(){
new Ext.Panel({
renderTo:"hello",
title:"容器組件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素",html:"這是1子元素中的內(nèi)容"}
] }
);
}
function form2(){
new Ext.Panel({
renderTo:"hello",
title:"容器組件",
width:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
// hideLabels:true,//隱藏輸入提示如姓名，地址，電話等
items:[
{fieldLabel:"請輸入姓名",name:"name"},
{fieldLabel:"請輸入地址",name:"address"},
{fieldLabel:"請輸入電話",name:"tel"}
] }
);
}
function form3(){
new Ext.form.FormPanel({
renderTo:"hello",
title:"容器組件",
width:300,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"請輸入姓名",name:"name"},
{fieldLabel:"請輸入地址",name:"address"},
{fieldLabel:"請輸入電話",name:"tel"}
] }
);
}
function zhedie(){
new Ext.Panel({
renderTo:"hello",
title:"容器組件",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true//表示在執(zhí)行展開折疊時是否應(yīng)用動畫效果
},
items:[{title:"子元素1",html:"這是子元素1中的內(nèi)容"},
{title:"子元素2",html:"這是子元素2中的內(nèi)容"},
{title:"子元素3",html:"這是子元素3中的內(nèi)容"}
] }
);
}
function table1(){
var panel=new Ext.Panel({
renderTo:"hello",
title:"容器組件",
width:500,
height:200,
layout:"table",
layoutConfig: {
columns: 3
},
items:[{title:"子元素1",html:"這是子元素1中的內(nèi)容",rowspan:2,height:100},
{title:"子元素2",html:"這是子元素2中的內(nèi)容",colspan:2},
{title:"子元素3",html:"這是子元素3中的內(nèi)容"},
{title:"子元素4",html:"這是子元素4中的內(nèi)容"}
] }
);
}
function table2(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon','www.jdon.com'],
[4, 'springside', 'springside','www.springside.org.cn'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產(chǎn)品及團隊",
height:150,
width:600,
sorable:true,
columns:[{header:"項目名稱",dataIndex:"name"},
{header:"開發(fā)團隊",dataIndex:"organization"},
{header:"網(wǎng)址",dataIndex:"homepage"}],
store:store,
autoExpandColumn:2
});
}
function table3(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon','www.jdon.com'],
[4, 'springside', 'springside','www.springside.org.cn'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var colM=new Ext.grid.ColumnModel([{header:"項目名稱",dataIndex:"name",sortable:true},
{header:"開發(fā)團隊",dataIndex:"organization",sortable:true},//sortable:true排序
{header:"網(wǎng)址",dataIndex:"homepage"}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產(chǎn)品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
}
function showUrl(value)
{
return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";
}
function table4(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon','www.jdon.com'],
[4, 'springside', 'springside','www.springside.org.cn'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var colM=new Ext.grid.ColumnModel([{header:"項目名稱",dataIndex:"name",sortable:true},
{header:"開發(fā)團隊",dataIndex:"organization",sortable:true},
{header:"網(wǎng)址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產(chǎn)品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
}
function table5(){
var data=[{id:1,
name:'EasyJWeb',
organization:'EasyJF',
homepage:'www.easyjf.com'},
{id:2,
name:'jfox',
organization:'huihoo',
homepage:'www.huihoo.org'},
{id:3,
name:'jdon',
organization:'jdon',
homepage:'www.jdon.com'},
{id:4,
name:'springside',
organization: 'springside',
homepage:'www.springside.org.cn'}
];
var store=new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]});
var colM=new Ext.grid.ColumnModel([{header:"項目名稱",dataIndex:"name",sortable:true},
{header:"開發(fā)團隊",dataIndex:"organization",sortable:true},
{header:"網(wǎng)址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產(chǎn)品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
}
function table6(){
var store=new Ext.data.Store({
url:"hello.xml",
reader:new Ext.data.XmlReader({
record:"row"},
["id","name","organization","homepage"])
});
var colM=new Ext.grid.ColumnModel([{header:"項目名稱",dataIndex:"name",sortable:true},
{header:"開發(fā)團隊",dataIndex:"organization",sortable:true},
{header:"網(wǎng)址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產(chǎn)品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
store.load();
}
Ext.onReady(function(){
});
</script>
</head>
<body>
<input id="btnAlert" type="button" value="alert框" />
<div id="hello"> </div>
<div id="dd2"> </div>
<div id="dd"> </div>
<input type="button" value="alert" id="in"/>
<input id="btn" type="button" name="add" value="新窗口" />
<input id="btnToBack" type="button" name="add" value="放到后臺" />
<input id="btnHide" type="button" name="add" value="隱藏所有" />
</body>
</html>