一、下载地址
http://download.csdn.net/detail/huangzebiao007/6812229
http://download.csdn.net/detail/huangzebiao007/6812251
二、第一个小例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
buttons:[{text:"确定"},{text:"取消"}]
}).show();
});
</script>
</head>
<body>
</body>
</html>
Ext.onReady 可能是你接触的第一个也可能是在每个页面都要使用的方法。这个方法会在DOM 加载全部完毕后，保证页面内的所有元素能被Script 引用之后调用。
三、组件的渲染和事件的触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: "but",//Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});
});
</script>
</head>
<body>
<div id="but"></div>
</body>
</html>对某个事物源添加事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("but").on("click",handleButton,this,{delay:2000});
});
function handleButton(){
alert("处理事件");
}
</script>
</head>
<body>
<input type="button" id="but" value="click me" />
</body>
</html>
四、常用布局
1、Border布局，把容器分成东西南北中几大区域，容器中的元素可以通过region属性来指定子元素放置在容器中的什么位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>2、Column布局，把子元素按列排放，通过columnWidth及width属性来指定子元素的所占的列宽度。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
// 所有列都以百分数配置 -- 他们总和必须为1
Ext.create('Ext.panel.Panel', {
title: 'Column Layout - Percentage Only',
width: 350,
height: 250,
layout:'column',
items: [{
title: 'Column 1',
columnWidth: 0.25
},{
title: 'Column 2',
columnWidth: 0.55
},{
title: 'Column 3',
columnWidth: 0.20
}],
renderTo: Ext.getBody()
});
// 参数 width 与 columnWidth 混用 -- 所有columnWidth值之和必须为1.
// 第一列会占用宽度120px, 而后两列会填满容器剩下的宽度.
Ext.create('Ext.Panel', {
title: 'Column Layout - Mixed',
width: 350,
height: 250,
layout:'column',
items: [{
title: 'Column 1',
width: 120
},{
title: 'Column 2',
columnWidth: 0.7
},{
title: 'Column 3',
columnWidth: 0.3
}],
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>3、Form布局，容器中的元素包括标题及组件内容两项值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "FormLayout Panel",
layout: 'form',
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, {
fieldLabel: 'DOB',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}]
});
});
</script>
</head>
<body>
</body>
</html>
4、Fit布局，子元素填充整个容器区域。
五、ExtJs常用的组件和容器的介绍，extJs的学习本质上就是对这些组件的学习
1、面板Ext.panel.Panel（xtype:panel）
面板由以下几个部分组成，一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var panel1 = Ext.create('Ext.panel.Panel', {
width:400,
height:200,
collapsible:true,//折叠面板
closable:true,//出现关闭面板的标志，如果不设置closeAction,则默认是destroy,无法再show出来,如果是hide,则能再显示出来
closeAction:"hide",//默认是destroy
title:"面板头部header",
html:'<h1>面板主区域</h1>',
items:[{xtype:"button",text:"按钮1"},{xtype:"button",text:"按钮2"}],
tbar:[{text:'顶部工具栏'}],
bbar:[{text:'底部工具栏'}],
buttons:[{text:"按钮位于footer"}],
renderTo: Ext.getBody()
});
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: "but",//Ext.getBody(),
handler: function() {
panel1.show();
}
});
});
</script>
</head>
<body>
<div id="but"></div>
</body>
</html>
一个更实际的用法是一个Panel被创建用于放置一些字段而不被渲染，但会作为容器的一个组成部分而存在
<script type="text/javascript">
Ext.onReady(function(){
var filterPanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5, // 避免Panel中的子元素紧邻边框
width: 300,
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}],
renderTo: Ext.getBody()
});
});
</script> <script type="text/javascript">
Ext.onReady(function(){
var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Results',
width: 600,
height: 400,
renderTo: Ext.getBody(),
layout: {
type: 'vbox', // 子元素垂直布局
align: 'stretch', // 每个子元素宽度充满子容器
padding: 5
},
items: [{ // 指定一个grid子元素
xtype: 'grid',
columns: [{header: 'Column One'}], // 只配置一列显示，没有数据
store: Ext.create('Ext.data.ArrayStore', {}), // 设置一个没有数据的store
flex: 1 // 占用容器的1/3高度 (在以 Box 为布局中)
}, {
xtype: 'splitter' //一个分割器在两个子组件之间
}, { // Details 面板作为一个配置进来的Panel (没有用xtype指定，默认是 'panel').
title: 'Details',
bodyPadding: 5,
items: [{
fieldLabel: 'Data item',
xtype: 'textfield'
}], // 表单元素(文本域)
flex: 2 // 占用容器的2/3高度 (在以 Box 为布局中)
}]
});
});
</script>2、浏览器窗口Ext.container.Viewport(xtype:viewport)
Viewport渲染自身到网页的documet body区域， 并自动将自己调整到适合浏览器窗口的大小，在窗口大小发生改变时自动适应大小。 一个页面中只能创建一个Viewport.
简单的后台模板示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true, id:"1"},
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true, id:"2"},
{ text: "alegrbra", leaf: true, id:"3"}
] },
{ text: "buy lottery", leaf: true, id:"4"}
]
}
});
var treePanel1 = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree2',
width: 150,
store: store,
rootVisible: true,
});
treePanel1.on('itemclick', function(view,record) {
Ext.Msg.alert('信息提示', record.data.id);
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
height:50
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
items:[{xtype:"button",text:"click me",handler: function() {
alert('You clicked the button!');
}},{
xtype:treePanel1
}],
width: 150
// 这里通常可以使用 TreePanel 或者 AccordionLayout布局的导航菜单
}, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel本身没有title属性
activeTab: 1, // 配置默认显示的激活面板
items: [{
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
},{
title: 'Default Tab2',
html: 'The second tab\'s content. Others may be added dynamically'
},]
}]
});
});
</script>
</head>
<body>
</body>
</html>
3、窗口Ext.window.Window(xtype:window)
一个指定的打算作为一个应用程序窗口的面板，默认窗口是浮动的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
draggable : true,//是否可以拖动
maximizable: true//最大化
}).show();
});
</script>
</head>
<body>
</body>
</html>
4、对话框 Ext.MessageBox 别名 ‘ Ext.Msg’
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
function alertDialog(){
Ext.MessageBox.alert("友情提示","这是浏览器定义的信息提示框");
}
function confirmDialog(){
var ret=Ext.Msg.confirm("删除确认","是否真的要删除该记录?",function(btuuon){
alert(btuuon+"选择结果:"+(btuuon=="yes"?"是":"否"));
});
}
function inputDialog(){
Ext.MessageBox.prompt("姓名输入","请输入你的姓名:",function(button,text){
if(button=="ok"){
alert(button+"你输入的是:"+text);
}else{
alert(button+"你放弃了录入!");
}
});
}
Ext.onReady(function(){
alertDialog();
//confirmDialog();
//inputDialog();
});
</script>
</head>
<body>
</body>
</html>
5、表格Ext.grid.Panel(xtype:gridpanel, grid)
Grid是在客户端上显示大量的表格数据的极佳方式。它本质上是一个超级统计表<table>， GridPanel使其更容易地进行获取、排序和筛选大量的数据。
Grid是由两个主要部分组成的 - 一个含有全部数据的store和一个要进行渲染列的集合。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
header: 'Name',
dataIndex: 'name',
//sortable: true,//排序
//hideable: false,//隐藏
flex: 1,//占用剩余的宽度
field: 'textfield'//在线编辑
},
{
header: 'Email',
dataIndex: 'email',
flex: 1,
//hidden: true//初始化时是隐藏
renderer: function(value) {//改变单个单元格的渲染
//var cls = 'my-class', text = 'Some text'; var s = Ext.String.format('<div class="{0}">{1}</div>', cls, text);
//s 现在是字符串: '<div class="my-class">Some text</div>'
return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
}
},
{
header: 'Phone',
dataIndex: 'phone',
flex: 1,
field: {
xtype: 'textfield',
allowBlank: false//非空
}
//width: 100//固定宽度
}
],
//以下两个属性配置好后才能在线编辑 cellmodel是列编辑器，rowmodel是行编辑器
//rowmodel当我们单击每个行的行， 编辑器将会出现，并使我们能够编辑每个我们有指定编辑器的列。
//cellmodel则只能一个一个点击
//selType: 'cellmodel',
//plugins: [
// Ext.create('Ext.grid.plugin.CellEditing', {
// clicksToEdit: 1
// })
//],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>
分组
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var store = Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['name', 'seniority', 'department'],
groupField: 'department',
data: {'employees':[
{ "name": "Michael Scott", "seniority": 7, "department": "Management" },
{ "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
{ "name": "Jim Halpert", "seniority": 3, "department": "Sales" },
{ "name": "Kevin Malone", "seniority": 4, "department": "Accounting" },
{ "name": "Angela Martin", "seniority": 5, "department": "Accounting" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'employees'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Seniority', dataIndex: 'seniority' }
],
features: [{ftype:'grouping'}],
width: 200,
height: 275,
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>
6、表单Ext.form.Panel（xtype:form）
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// 将会通过 AJAX 请求提交到此URL
url: 'save-form.jsp',
// 表单域 Fields 将被竖直排列, 占满整个宽度
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// 重置 和 保存 按钮.
buttons: [{
text: '重置',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: '保存',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('保存成功', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('操作失败', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});save-form.jsp下面的内容
{success:true}
442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
