<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>
分享到：
相关推荐
1.入门 2.ext事件处理 3.面板 4.工具栏 5.Viewport 6.窗口 7.对话框 内附：ext语法总结.txt
大量的ext和js示例，js怎么操div，添加删除，ext 用table做portal，js做portal，那来就可以用，决定让你着迷。
EXT 示例源码，深入浅出EXT JS开发 第二版
ext前台 与 resteasy后台结合
ext 实例 示例 实例 示例 ext 实例 示例 实例 示例
EXT教程示例代码，供EXT新手学习的好资料。
ext控件demo+中文API+ext教程.pdf 对于做ext开发很有帮助
EXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar
EXT dojochina 面板示例Ext.Panel.rar EXT dojochina 面板示例Ext.Panel.rar
最近空闲时间在学习Ext2.0框架，只有一个字的感叹“强”，我从未想到JS代码能够写出这么绚丽的Web页面出来，以前看到YUI，惊若天人，如今看到EXT2.0的东西，更是感觉震撼。
一个不错Ext Tree 自己去下个EXT2.0库吧
最新ext.net纯官方框架源码+示例，附带VS2008和VS2010项目文件，亲测可用。
Ext3.0使用示例
ext-js示例代码 ext-js示例代码 ext-js示例代码
ext4.0动态加载，使用json数据源，整个项目只有一个页面，js按照mvc模式搭建
环境：Window XP Sp3、IE 7、FireFox、Tomcat 6.0、Eclipse 3.3 使用步骤： 1、下载解压缩之后，使用IDE导入工程 2、使用IDE启动该应用 3、一一注释main.js中的演示方法，可以看到...阅读：本中心学习Ext框架开发的学员
ext江湖示例源码
本例采用PHP，json, sqlite,来显示一个EXT3.0的Grid,需要PHP环境，可以用xampp集成包。 部署后访问http://localhost/ExtSample/employee.php
EXT dojochina文本框示例Ext.form.TextField.rar
我的资源不需要积分 EXT2.0 GRID 示例 很实用