ext示例

最新推荐文章于 2021-06-14 10:23:56 发布

iteye_18223

最新推荐文章于 2021-06-14 10:23:56 发布

阅读量103

点赞数

文章标签： EXT HTML Ajax 项目管理 XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/examples.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script>
function showDialog(){
Ext.MessageBox.alert("hello","Hello World!!!");
}
function showForm(){
var win=new Ext.Window({
title:"hello",
width:300,
height:200,
html:'<h1>Hello World!!!</h1>'
});
win.show();
}
Ext.onReady(function(){
//创建一个面板
var obj={title:"HELLO",width:300,height:200,html:'<h1>Hello World!!!</h1>'};
var panel=new Ext.Panel(obj);
panel.render("hello");
//new Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello World!!!</h1>'});
//创建一个选项卡
var tabPanel=new Ext.TabPanel({
width:300,
height:200,
items:[
{title:"面板1",height:30,html:'content1'},
{title:"面板2",height:30,html:'content2'},
{title:"面板3",height:30,html:'content3'}
]
});
tabPanel.render("hello2");
//创建一个按扭
var b=new Ext.Button({
text:"添加",
pressed:true,
heigth:30,
handler:showDialog //Ext.emptyFn
});
b.render("hello3");
//添加事件监听
Ext.get("button1").addListener("click",showDialog);
// Ext.get("button1").on("click",showDialog); //addLinster方法的另外一个简写形式是on
// Ext.get("button2").addListener("click",showForm);
// Ext.get("button2").addListener("click",showForm);
Ext.get("button2").on("click",showForm,this,{delay:1000}); //事件延迟处理或事件处理缓存等功能
//事件预处理
var win=new Ext.Window({
title:"不能关闭的窗口",
height:200,
width:300
});
win.show();
win.on("beforedestroy",function(obj){
alert("想关闭我，这是不可能的!");
obj.show();
return false;
});
//扩展的Panel
new Ext.Panel({
renderTo:"hello4",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</h1>',
tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
//可刷新的Panel
new Ext.Panel({
renderTo:"hello5",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source!</h1>',
tbar:[{pressed:true,text:'刷新'}]
});
　//fit布局
new Ext.Panel({
renderTo:"hello6",
title:"容器组件",
layout:"fit",
width:500,
height:120,
items:[
{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}
]
});
//form布局
new Ext.Panel({
renderTo:"hello7",
title:"容器组件",
width:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
});
//使用FormPanel组件
new Ext.form.FormPanel({
renderTo:"hello8",
title:"容器组件",
width:300,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
});
//Accordion布局
new Ext.Panel({
renderTo:"hello9",
title:"容器组件",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[
{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
]
});
//Card布局
var cardPanel=new Ext.Panel({
renderTo:"hello10",
title:"容器组件",
width:500,
height:200,
layout:"card",
activeItem: 0,
layoutConfig: {
animate: true
},
items:[
{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
],
buttons:[{text:"切换",handler:changeTab}]
});
var i=1;
function changeTab(){
cardPanel.getLayout().setActiveItem(i++);
if(i>2)i=0;
}
//GridPanel布局
function showUrl(value){
return "<a href='http://"+value+"' target='blank'>"+value+"</a>";
}
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 store=new Ext.data.JsonStore({
// data:data,
// fields:["id","name","organization","homepage"]
//});
//用XML做数据源
//var store=new Ext.data.Store({
// url:"index.xml",
// reader:new Ext.data.XmlReader(
// {record:"row"},
// ["id","name","organization","homepage"]
// )
//});
var sm = new Ext.grid.CheckboxSelectionModel();
var colM=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//增加自动编号
sm,//勾选框
{header:"项目名称",dataIndex:"name",sortable:true},
{header:"开发团队",dataIndex:"organization",sortable:true},
{header:"网址",dataIndex:"homepage",sortable:true,renderer:showUrl}
]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello11",
title:"中国Java开源产品及团队",
height:150,
width:600,
//columns:[
// {header:"项目名称",dataIndex:"name"},
// {header:"开发团队",dataIndex:"organization"},
// {header:"网址",dataIndex:"homepage"}
//],这里使用cm属性
cm:colM,
sm:sm,
store:store,
autoExpandColumn:4
});
//可编辑表格
var editData=[
{id:1,name:'小王',email:'xiaowang@easyjf.com',sex:'男',bornDate:'1991-4-4'},
{id:1,name:'小李',email:'xiaoli@easyjf.com',sex:'男',bornDate:'1992-5-6'},
{id:1,name:'小兰',email:'xiaoxiao@easyjf.com',sex:'女',bornDate:'1993-3-7'}
];
var editStore=new Ext.data.JsonStore({
data:editData,
fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
});
var colM=new Ext.grid.ColumnModel([
{header:"姓名",dataIndex:"name", sortable:true,editor:new Ext.form.TextField()},
{header:"性别",dataIndex:"sex",editor:new Ext.form.ComboBox({transform:"sexList",triggerAction: 'all',lazyRender:true})},
{header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日'),editor:new Ext.form.DateField({format:'Y年m月d日'})},
{header:"电子邮件",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}
]);
var editGrid = new Ext.grid.EditorGridPanel({
renderTo:"hello12",
title:"学生基本信息管理",
height:200,
width:600,
cm:colM,
store:editStore,
autoExpandColumn:3
});
//修改后事件
function afterEdit(obj){
Ext.MessageBox.alert('提示',obj.record.get('name'));
}
editGrid.on("afteredit",afterEdit,this);
//Ajax取数据
var ajaxStore = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:"student?cmd=list"}),
reader:new Ext.data.JsonReader({
root:"result",
fields:["id","name","sex","bornDate","email"]
})
});

ajaxStore.load({params:{start:0,limit:15}});
var ajaxColM=new Ext.grid.ColumnModel([
{header:"姓名",dataIndex:"name", sortable:true,editor:new Ext.form.TextField()},
{header:"性别",dataIndex:"sex"},
{header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日'),editor:new Ext.form.DateField({format:'Y年m月d日'})},
{header:"电子邮件",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}
]);
var ajaxGrid = new Ext.grid.EditorGridPanel({
renderTo:"hello13",
title:"学生基本信息管理",
height:200,
width:600,
cm:ajaxColM,
store:ajaxStore,
autoExpandColumn:3
});
//目录树
var root=new Ext.tree.TreeNode({
id:"root",
text:"树的根",
href:'http://www.easyjf.com',
hreftarget:'blank'
});
root.appendChild(
new Ext.tree.TreeNode({id:"c1",text:"子节点",href:'http://www.easyjf.com',hreftarget:'blank'}),
new Ext.tree.TreeNode({id:"c1",text:"子节点",href:'http://www.easyjf.com',hreftarget:'blank'}),
new Ext.tree.TreeNode({id:"c1",text:"子节点",href:'http://www.easyjf.com',hreftarget:'blank'})
);
var tree=new Ext.tree.TreePanel({
renderTo:"hello14",
root:root,
width:100,
height:200
});

});
</script>
</head>
<body>
<input type="button" id="button1" value="Show Dialog Box" >
<input type="button" id="button2" value="Show Window Form" >
<div id="hello3"> </div><br>
<div>
<div id="hello" style="float:left"> </div>
<div id="hello2" style="float:left"> </div>
<div id="hello3" style="float:left"> </div>
<div id="hello4" style="float:left"> </div>
<div id="hello5" style="float:left"> </div>
<div id="hello6" style="float:left"> </div>
<div id="hello7" style="float:left"> </div>
<div id="hello8" style="float:left"> </div>
<div id="hello9" style="float:left"> </div>
<div id="hello10" style="float:left"> </div>
<div id="hello11" style="float:left"> </div>
<div id="hello12" style="float:left"> </div>
<div id="hello13" style="float:left"> </div>
<div id="hello14" style="float:left"> </div>
</div>
<select id="sexList">
<option>男</option>
<option>女</option>
</select>

</body>
</html>

iteye_18223

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext示例

ExtJS function showDialog(){ Ext.MessageBox.alert("hello","Hello World!!!"); } function showForm(){ var win=new Ext.Window({ ...
复制链接

扫一扫