<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此函数在关掉时调用
alert("真的想关掉吗!");
obj.show();
return true;
//false永远关不得，true或者不返回时可以关掉
});
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:"面板内容",
height:100},
{region:"center",
xtype:"grid",
title:"学生信息管理",
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>设置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});//延迟加载
//从下到上执行，addListener可以用on代替
//。在调用addListener方法的代码中，第一个参数表示事件名称，第二个参数表示事件处理器或整个响应函数
}
function myPanle1(){
new Ext.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</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>面板主区域</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>网站后台管理系统!</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("请确认","是否真的要删除指定的内容",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")
{
//执行数据保存操作
} else if(button=="no")
{
//不保存数据
} else
{
//取消当前操作
}
}
function saveorno(){
Ext.Msg.show({
title:'保存数据',
msg: '你已经作了一些数据操作，是否要保存当前内容的修改？',
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子元素中的内容"}
] }
);
}
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//表示在执行展开折叠时是否应用动画效果
},
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
] }
);
}
function table1(){
var panel=new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:500,
height:200,
layout:"table",
layoutConfig: {
columns: 3
},
items:[{title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
{title:"子元素2",html:"这是子元素2中的内容",colspan:2},
{title:"子元素3",html:"这是子元素3中的内容"},
{title:"子元素4",html:"这是子元素4中的内容"}
] }
);
}
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开源产品及团队",
height:150,
width:600,
sorable:true,
columns:[{header:"项目名称",dataIndex:"name"},
{header:"开发团队",dataIndex:"organization"},
{header:"网址",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:"开发团队",dataIndex:"organization",sortable:true},//sortable:true排序
{header:"网址",dataIndex:"homepage"}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
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:"开发团队",dataIndex:"organization",sortable:true},
{header:"网址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
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:"开发团队",dataIndex:"organization",sortable:true},
{header:"网址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
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:"开发团队",dataIndex:"organization",sortable:true},
{header:"网址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
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>