extjs4学习笔记大全

Jethro · 发表于 2011-6-4 15:26

本帖最后由 Jethro 于 2011-6-4 15:48 编辑

ExtJS4学习笔记(一)---window的创建

Extjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4中创建一个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>窗口实例--www.51myit.com</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
<script type="text/jscript">
Ext.require('Ext.window');
Ext.onReady(function(){
Ext.create('Ext.Window',{
width:400,
height:230,
//X,Y标识窗口相对于父窗口的偏移值。
x:10,
y:10,
plain: true,
//指示标题头的位置,分别为 top,bottom,left,right,默认为top
headerPosition: 'left',
title: 'ExtJS4 Window的创建，头在左'
}).show();
Ext.create('Ext.Window',{
width:400,
height:230,
x:500,
y:10,
plain: true,
//指示标题头的位置,分别为 top,bottom,left,right,默认为top
headerPosition: 'right',
title: 'ExtJS4 Window的创建，头在右'
}).show();
Ext.create('Ext.Window',{
width:400,
height:230,
x:10,
y:300,
plain: true,
//指示标题头的位置,分别为 top,bottom,left,right,默认为top
headerPosition: 'bottom',
title: 'ExtJS4 Window的创建，头在底'
}).show();
var win = Ext.create('Ext.Window',{
width:400,
height:230,
x:500,
y:300,
plain: true,
//指示标题头的位置,分别为 top,bottom,left,right,默认为top
headerPosition: 'top',
title: 'ExtJS4 Window的创建'
});
win.show();
});
</script>
</head>
<body>
</body>
</html>

复制代码

Jethro · 发表于 2011-6-4 15:30

本帖最后由 Jethro 于 2011-6-4 15:47 编辑

ExtJS4学习笔记(二)---HBox的使用
要使用HBox布局方式，首先的熟悉下一下几个主要属性：

一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。

1、top（默认）：排列于容器顶端。

2、middle：垂直居中排列于容器中。

3、stretch：垂直排列且拉伸义填补容器高度

4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。

二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。

三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。

1、start（默认）：组件在容器左边

2、center：组件在容器中间

3、end：组件在容器的右边

实例代码：

一、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=gb2312" />
<title>HBox实例--www.51myit.com</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="hbox.js"></script>
</head>
<body>
</body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</html>

复制代码

hbox.js代码：

Ext.onReady(function(){
var d1 = Ext.create('Ext.Panel',{
title:'HBox 顶对齐，且组件在容器的左边',
frame:true,
width:600,
height:100,
items:[{
anchor:'100%',
layout: {
type:'hbox',
padding:'10',
pack:'start',
align:'top'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}]
})
d1.render('d1');
var d2 = Ext.create('Ext.Panel',{
title:'HBox 垂直对齐，且组件在容器的右边',
frame:true,
width:600,
height:100,
items:[{
anchor:'100%',
layout: {
type:'hbox',
padding:'10',
align:'middle',
pack:'end'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}]
})
d2.render('d2');
var d3 = Ext.create('Ext.Panel',{
title:'HBox 垂直水平居中，并且所有控件高度为最高控件的高度',
frame:true,
width:600,
height:100,
items:[{
anchor:'100%',
layout: {
type: 'hbox',
padding:'5',
align:'stretchmax',
pack:'center'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Small Size'
},{
xtype:'button',
scale: 'medium',
text: 'Medium Size'
},{
xtype:'button',
scale: 'large',
text: 'Large Size'
}]
}]
})
d3.render('d3');
})
Ext.onReady(function(){
var d1 = Ext.create('Ext.Panel',{
title:'HBox 顶对齐，且组件在容器的左边',
frame:true,
width:600,
height:100,
items:[{
anchor:'100%',
layout: {
type:'hbox',
padding:'10',
pack:'start',
align:'top'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}]
})
d1.render('d1');
var d2 = Ext.create('Ext.Panel',{
title:'HBox 垂直对齐，且组件在容器的右边',
frame:true,
width:600,
height:100,
items:[{
anchor:'100%',
layout: {
type:'hbox',
padding:'10',
align:'middle',
pack:'end'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}]
})
d2.render('d2');
var d3 = Ext.create('Ext.Panel',{
title:'HBox 垂直水平居中，并且所有控件高度为最高控件的高度',
frame:true,
width:600,
height:100,
items:[{
anchor:'100%',
layout: {
type: 'hbox',
padding:'5',
align:'stretchmax',
pack:'center'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Small Size'
},{
xtype:'button',
scale: 'medium',
text: 'Medium Size'
},{
xtype:'button',
scale: 'large',
text: 'Large Size'
}]
}]
})
d3.render('d3');
})

复制代码

最后是效果图：

另外多种的布局方式，大家自己尝试就OK了。

Jethro · 发表于 2011-6-4 15:35

本帖最后由 Jethro 于 2011-6-4 15:46 编辑

ExtJS4学习笔记(三)---VBox的使用

要使用VBox布局方式，首先的熟悉下一下几个主要属性：

一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。

1、left（默认）：排列于容器左侧。

2、center ：控件在容器水平居中。

3、stretch：控件横向拉伸至容器大小

4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。

二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。

三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。

1、start（默认）：组件在容器上边

2、center：组件在容器中间

3、end：组件在容器的下边

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=gb2312" />
<title>VBox---www.51myit.com</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="vbox.js"></script>
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
}
</style>
</head>
<body>
</body>
</html>

复制代码

vbox.js：代码太大，论坛限制发贴字数，请下载附件包。

vbox.rar (1.89 KB, 下载次数: 16)

Jethro · 发表于 2011-6-4 15:37

本帖最后由 Jethro 于 2011-6-4 15:46 编辑

ExtJS4学习笔记(四)---Grid的使用

Extjs4 Grid创建还是比较容易的，难记、难理解的地方，也就是数据的获取。下面，就创建一个最简单的Grid组件，后面，我们会逐渐丰富这个Grid的功能。

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>Grid-www.51myit.com</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="grid.js"></script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

复制代码

grid.js：

Ext.require([
'Ext.grid.*',
'Ext.data.*'
]);
Ext.onReady(function(){
Ext.define('MyData',{
extend: 'Ext.data.Model',
fields: [
//第一个字段需要指定mapping，其他字段，可以省略掉。
{name:'UserName',mapping:'UserName'},
'Sex',
'Age',
'XueHao',
'BanJi'
]
});
//创建数据源
var store = Ext.create('Ext.data.Store', {
model: 'MyData',
proxy: {
//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type: 'ajax',
url: 'mydata.json',
reader: {
type: 'json',
root: 'items',
//totalProperty : 'total'
}
},
autoLoad: true
});
//创建Grid
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columns: [
{text: "姓名", width: 120, dataIndex: 'UserName', sortable: true},
{text: "性别", flex: 1, dataIndex: 'Sex', sortable: false},
{text: "年龄", width: 100, dataIndex: 'Age', sortable: true},
{text: "学号", width: 100, dataIndex: 'XueHao', sortable: true},
{text: "班级", width: 100, dataIndex: 'BanJi', sortable: true}
],
height:400,
width:480,
x:20,
y:40,
title: 'ExtJS4 Grid示例',
renderTo: 'demo',
viewConfig: {
stripeRows: true
}
})
})
Ext.require([
'Ext.grid.*',
'Ext.data.*'
]);
Ext.onReady(function(){
Ext.define('MyData',{
extend: 'Ext.data.Model',
fields: [
//第一个字段需要指定mapping，其他字段，可以省略掉。
{name:'UserName',mapping:'UserName'},
'Sex',
'Age',
'XueHao',
'BanJi'
]
});
//创建数据源
var store = Ext.create('Ext.data.Store', {
model: 'MyData',
proxy: {
//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type: 'ajax',
url: 'mydata.json',
reader: {
type: 'json',
root: 'items',
//totalProperty : 'total'
}
},
autoLoad: true
});
//创建Grid
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columns: [
{text: "姓名", width: 120, dataIndex: 'UserName', sortable: true},
{text: "性别", flex: 1, dataIndex: 'Sex', sortable: false},
{text: "年龄", width: 100, dataIndex: 'Age', sortable: true},
{text: "学号", width: 100, dataIndex: 'XueHao', sortable: true},
{text: "班级", width: 100, dataIndex: 'BanJi', sortable: true}
],
height:400,
width:480,
x:20,
y:40,
title: 'ExtJS4 Grid示例',
renderTo: 'demo',
viewConfig: {
stripeRows: true
}
})
})

复制代码

mydata.json：当然，你也可以使用任意服务端程序返回json数据（asp?.net?java还是php，看你的爱好了）

{
"items": [
{
"UserName": "李彦宏",
"Sex": "男",
"Age":25,
"XueHao":00001,
"BanJi":"一班"
},
{
"UserName": "马云",
"Sex": "男",
"Age":31,
"XueHao":00002,
"BanJi":"二班"
},
{
"UserName": "张朝阳",
"Sex": "男",
"Age":30,
"XueHao":00003,
"BanJi":"一班"
},
{
"UserName": "朱俊",
"Sex": "男",
"Age":28,
"XueHao":00004,
"BanJi":"一班"
},
{
"UserName": "丁磊",
"Sex": "男",
"Age":29,
"XueHao":00005,
"BanJi":"二班"
},
{
"UserName": "李国军",
"Sex": "男",
"Age":30,
"XueHao":00006,
"BanJi":"二班"
},
{
"UserName": "王志宝",
"Sex": "男",
"Age":25,
"XueHao":00007,
"BanJi":"一班"
}
]
}
{
"items": [
{
"UserName": "李彦宏",
"Sex": "男",
"Age":25,
"XueHao":00001,
"BanJi":"一班"
},
{
"UserName": "马云",
"Sex": "男",
"Age":31,
"XueHao":00002,
"BanJi":"二班"
},
{
"UserName": "张朝阳",
"Sex": "男",
"Age":30,
"XueHao":00003,
"BanJi":"一班"
},
{
"UserName": "朱俊",
"Sex": "男",
"Age":28,
"XueHao":00004,
"BanJi":"一班"
},
{
"UserName": "丁磊",
"Sex": "男",
"Age":29,
"XueHao":00005,
"BanJi":"二班"
},
{
"UserName": "李国军",
"Sex": "男",
"Age":30,
"XueHao":00006,
"BanJi":"二班"
},
{
"UserName": "王志宝",
"Sex": "男",
"Age":25,
"XueHao":00007,
"BanJi":"一班"
}
]
}

复制代码

Extjs4 Grid组件的数据需要几点注意。

第一，就是数据类型，我们可以指定数据类型，比如：

var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});

复制代码

数据类型分为以下几种：

1、auto（默认）
2、string
3、int
4、float
5、boolean
6、date

第二：Ext.data.Model，示例中，只指定了一个mapping，那么第一个mapping是必须要指定的，从第二个开始，我们就不需要再去指定mapping了，Extjs很聪明，他会根据数据来判断需要的mapping。

Jethro · 发表于 2011-6-4 15:39

本帖最后由 Jethro 于 2011-6-4 15:45 编辑

ExtJS4学习笔记(五)---Grid分页

Grid组件，当数据量很大的时候，就需要分页显示，本文介绍如何实现Extjs4 Grid的分页功能。

先看THML代码:

<!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>Paging Grid-www.51myit.com</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="paing.js"></script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

复制代码

这里引用的JS文件，都是相对于Extjs4整个目录的。如果已经将JS和CSS文件剥离并分目录放置了，那么一定要注意修改bootstrap.js。

JS代码：

Ext.require([
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.data.*'
]);
Ext.onReady(function(){
Ext.define('MyData',{
extend: 'Ext.data.Model',
fields: [
'title','author',
//第一个字段需要指定mapping，其他字段，可以省略掉。
{name:'hits',type: 'int'},
'addtime'
]
});
//创建数据源
var store = Ext.create('Ext.data.Store', {
//分页大小
pageSize: 50,
model: 'MyData',
//是否在服务端排序
remoteSort: true,
proxy: {
//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type: 'ajax',
url: 'mydata.asp',
reader: {
root: 'items',
totalProperty : 'total'
},
simpleSortMode: true
},
sorters: [{
//排序字段。
property: 'hits',
//排序类型，默认为 ASC
direction: 'DESC'
}]
});
//创建Grid
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columns: [
{text: "标题", width: 120, dataIndex: 'title', sortable: true},
{text: "作者", flex: 200, dataIndex: 'author', sortable: false},
{text: "点击数", width: 100, dataIndex: 'hits', sortable: true},
{text: "添加时间", width: 100, dataIndex: 'addtime', sortable: true}
],
height:400,
width:520,
x:20,
y:40,
title: 'ExtJS4 Grid 分页示例',
disableSelection: true,
loadMask: true,
renderTo: 'demo',
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: "没有数据"
})
})
store.loadPage(1);
})
Ext.require([
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.data.*'
]);
Ext.onReady(function(){
Ext.define('MyData',{
extend: 'Ext.data.Model',
fields: [
'title','author',
//第一个字段需要指定mapping，其他字段，可以省略掉。
{name:'hits',type: 'int'},
'addtime'
]
});
//创建数据源
var store = Ext.create('Ext.data.Store', {
//分页大小
pageSize: 50,
model: 'MyData',
//是否在服务端排序
remoteSort: true,
proxy: {
//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type: 'ajax',
url: 'mydata.asp',
reader: {
root: 'items',
totalProperty : 'total'
},
simpleSortMode: true
},
sorters: [{
//排序字段。
property: 'hits',
//排序类型，默认为 ASC
direction: 'DESC'
}]
});
//创建Grid
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columns: [
{text: "标题", width: 120, dataIndex: 'title', sortable: true},
{text: "作者", flex: 200, dataIndex: 'author', sortable: false},
{text: "点击数", width: 100, dataIndex: 'hits', sortable: true},
{text: "添加时间", width: 100, dataIndex: 'addtime', sortable: true}
],
height:400,
width:520,
x:20,
y:40,
title: 'ExtJS4 Grid 分页示例',
disableSelection: true,
loadMask: true,
renderTo: 'demo',
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: "没有数据"
})
})
store.loadPage(1);
})

复制代码

关于数据，任何服务端都可以，只要返回相应的数据就可以了。这里简单使用ASP代码做了一些测试用的数据，但是这些测试代码包含了参数接收、基本判断以及分页方法。具体情况具体实施，这些代码只作为抛砖引玉的作用。

ASP代码：

<%
Response.ContentType = "text/html"
Response.Charset = "UTF-8"
%>
<%
'返回JSON数据,自定义一些测试数据。。
'这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
'由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
start = Request("start")
limit = Request("limit")
If start = "" Then
start = 0
End If
If limit = "" Then
limit = 50
End If
sorts = Replace(Trim(Request.Form("sort")),"'","")
dir = Replace(Trim(Request.Form("dir")),"'","")
Dim counts:counts=300
'注意，这里的counts相当于Rs.RecordCount,也就是记录总数。
Dim Ls:Ls = Cint(start) + Cint(limit)
If Ls >= counts Then
Ls = counts
End If
Echo("{")
Echo("""total"":")
Echo(""""&counts&""",")
Echo("""items"":[")
For i = start+1 To Ls
Echo("{")
Echo("""title"":""newstitle"&i&"""")
Echo(",")
Echo("""author"":""author"&i&"""")
Echo(",")
Echo("""hits"":"""&i&"""")
Echo(",")
Echo("""addtime"":"""&Now()&"""")
Echo("}")
If i<Ls Then
Echo(",")
End If
Next
Echo("]}")
Function Echo(str)
Response.Write(str)
End Function
%>
<%
Response.ContentType = "text/html"
Response.Charset = "UTF-8"
%>
<%
'返回JSON数据,自定义一些测试数据。。
'这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
'由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
start = Request("start")
limit = Request("limit")
If start = "" Then
start = 0
End If
If limit = "" Then
limit = 50
End If
sorts = Replace(Trim(Request.Form("sort")),"'","")
dir = Replace(Trim(Request.Form("dir")),"'","")
Dim counts:counts=300
'注意，这里的counts相当于Rs.RecordCount,也就是记录总数。
Dim Ls:Ls = Cint(start) + Cint(limit)
If Ls >= counts Then
Ls = counts
End If
Echo("{")
Echo("""total"":")
Echo(""""&counts&""",")
Echo("""items"":[")
For i = start+1 To Ls
Echo("{")
Echo("""title"":""newstitle"&i&"""")
Echo(",")
Echo("""author"":""author"&i&"""")
Echo(",")
Echo("""hits"":"""&i&"""")
Echo(",")
Echo("""addtime"":"""&Now()&"""")
Echo("}")
If i<Ls Then
Echo(",")
End If
Next
Echo("]}")
Function Echo(str)
Response.Write(str)
End Function
%>

复制代码

最后，来张效果图：

Jethro · 发表于 2011-6-4 15:43

本帖最后由 Jethro 于 2011-6-4 15:45 编辑

ExtJS4学习笔记(六)---多表头Grid
做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。

上一笔记讲的是如何实现Grid的分页功能，本文在此基础上做出修改，达到多表头Grid+分页功能。

先看下效果图：

实现代码如下：

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>GroupHeaderGrid-www.51myit.com</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="group-header.js"></script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

复制代码

group-header.js：

Ext.require([
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.util.*',
'Ext.data.*'
]);
Ext.onReady(function(){
Ext.define('MyData',{
extend: 'Ext.data.Model',
fields: [
'title','author',
//第一个字段需要指定mapping，其他字段，可以省略掉。
{name:'hits',type: 'int'},
'addtime'
]
});
//创建数据源
var store = Ext.create('Ext.data.Store', {
//分页大小
pageSize: 50,
model: 'MyData',
//是否在服务端排序
remoteSort: true,
proxy: {
//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type: 'ajax',
url: 'mydata.asp',
reader: {
root: 'items',
totalProperty : 'total'
},
simpleSortMode: true
},
sorters: [{
//排序字段。
property: 'hits',
//排序类型，默认为 ASC
direction: 'DESC'
}]
});
//创建Grid
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columnLines: true,
columns: [{
text:"基本信息",
columns:[
{text: "标题", width: 120, dataIndex: 'title', sortable: true},
{text: "作者", width: 200, dataIndex: 'author', sortable: false},
{text: "点击数", width: 100, dataIndex: 'hits', sortable: true}]
},
{text: "添加时间", width: 100, dataIndex: 'addtime', sortable: true}
],
height:400,
width:520,
x:20,
y:40,
title: 'ExtJS4 多表头Grid带分页示例',
disableSelection: true,
loadMask: true,
renderTo: 'demo',
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: "没有数据"
})
})
store.loadPage(1);
})
Ext.require([
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.util.*',
'Ext.data.*'
]);
Ext.onReady(function(){
Ext.define('MyData',{
extend: 'Ext.data.Model',
fields: [
'title','author',
//第一个字段需要指定mapping，其他字段，可以省略掉。
{name:'hits',type: 'int'},
'addtime'
]
});
//创建数据源
var store = Ext.create('Ext.data.Store', {
//分页大小
pageSize: 50,
model: 'MyData',
//是否在服务端排序
remoteSort: true,
proxy: {
//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type: 'ajax',
url: 'mydata.asp',
reader: {
root: 'items',
totalProperty : 'total'
},
simpleSortMode: true
},
sorters: [{
//排序字段。
property: 'hits',
//排序类型，默认为 ASC
direction: 'DESC'
}]
});
//创建Grid
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columnLines: true,
columns: [{
text:"基本信息",
columns:[
{text: "标题", width: 120, dataIndex: 'title', sortable: true},
{text: "作者", width: 200, dataIndex: 'author', sortable: false},
{text: "点击数", width: 100, dataIndex: 'hits', sortable: true}]
},
{text: "添加时间", width: 100, dataIndex: 'addtime', sortable: true}
],
height:400,
width:520,
x:20,
y:40,
title: 'ExtJS4 多表头Grid带分页示例',
disableSelection: true,
loadMask: true,
renderTo: 'demo',
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: "没有数据"
})
})
store.loadPage(1);
})

复制代码

JS代码要注意的地方：

1、记得载入'Ext.util.*',

2、二级表头必须指定宽度，如果不指定的话，会提示错误。如图所示，红框里的项，必须要指定宽度。

服务端代码，这里使用ASP编写，具体解释请参考前一篇文章。

<%
Response.ContentType = "text/html"
Response.Charset = "UTF-8"
%>
<%
'返回JSON数据,自定义一些测试数据。。
'这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
'由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
start = Request("start")
limit = Request("limit")
If start = "" Then
start = 0
End If
If limit = "" Then
limit = 50
End If
sorts = Replace(Trim(Request.Form("sort")),"'","")
dir = Replace(Trim(Request.Form("dir")),"'","")
Dim counts:counts=300
'注意，这里的counts相当于Rs.RecordCount,也就是记录总数。
Dim Ls:Ls = Cint(start) + Cint(limit)
If Ls >= counts Then
Ls = counts
End If
Echo("{")
Echo("""total"":")
Echo(""""&counts&""",")
Echo("""items"":[")
For i = start+1 To Ls
Echo("{")
Echo("""title"":""newstitle"&i&"""")
Echo(",")
Echo("""author"":""author"&i&"""")
Echo(",")
Echo("""hits"":"""&i&"""")
Echo(",")
Echo("""addtime"":"""&Now()&"""")
Echo("}")
If i<Ls Then
Echo(",")
End If
Next
Echo("]}")
Function Echo(str)
Response.Write(str)
End Function
%>

复制代码

Jethro · 发表于 2011-6-4 15:53

ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid）
发布时间：2011-05-21 来源：mhzg 作者：佚名点击：
项目开发中，Grid组件少不了搜索功能，在Extjs4中，搜索组件以插件的形式出现，而且实现也非常简单，搜索组件位于examples/ux/form目录下，JS文件是SearchField.js。

Grid加载搜索功能，要注意的是：

1、开启延迟加载，即Ext.Loader.setConfig({enabled: true});

2、设置插件的目录：Ext.Loader.setPath('Ext.ux', '../../examples/ux'); ，需要注意，插件所在目录一定要正确，否则加载失败，就实现不了所要功能了。

效果图：

初始加载

输入查询条件后

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>SearchGrid-www.51myit.com</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style type="text/css">
#search-results a {
color: #385F95;
font:bold 11px tahoma, arial, helvetica, sans-serif;
text-decoration:none;
}
#search-results a:hover {
text-decoration:underline;
}
#search-results p {
margin:3px !important;
}
.search-item {
font:normal 11px tahoma, arial, helvetica, sans-serif;
padding:3px 10px 3px 10px;
border:1px solid #fff;
border-bottom:1px solid #eeeeee;
white-space:normal;
color:#555;
}
.search-item h3 {
display:block;
font:inherit;
font-weight:bold;
color:#222;
}
.search-item h3 span {
float: right;
font-weight:normal;
margin:0 0 5px 5px;
width:100px;
display:block;
clear:none;
}
/*这里要注意这两张图片的路径要正确*/
.x-form-clear-trigger {
background-image: url(../../resources/themes/images/default/form/clear-trigger.gif);
}
.x-form-search-trigger {
background-image: url(../../resources/themes/images/default/form/search-trigger.gif);
}
</style>
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="searchgrid.js"></script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

复制代码

SearchGrid.js：代码太长，请下载附件。

SearchGrid.rar (1.64 KB, 下载次数: 14)

代码完成了Grid组件异步加载信息、分页和搜索功能，可以满足一般使用情况了。

服务端代码，由于使用测试数据，这里只使用了最简单的方法来实现搜索效果，实际操作中，需要将查询条件置于SQL语句中，达到搜索效果。

SearchGrid.asp：

<%
Response.ContentType = "text/html"
Response.Charset = "UTF-8"
%>
<%
'返回JSON数据,自定义一些测试数据。。
'这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
'由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
start = Request("start")
limit = Request("limit")
'查询时获取的参数。
query = Request("query")
If start = "" Then
start = 0
End If
If limit = "" Then
limit = 50
End If
sorts = Replace(Trim(Request.Form("sort")),"'","")
dir = Replace(Trim(Request.Form("dir")),"'","")
'测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。
If query = "newstitle" Then
Echo("{")
Echo("""total"":")
Echo("""1")
Echo(""",""items"":[")
Echo("{")
Echo("""title"":""newstitle""")
Echo(",")
Echo("""author"":""author""")
Echo(",")
Echo("""hits"":""100""")
Echo(",")
Echo("""addtime"":"""&Now()&"""")
Echo("}")
Echo("]}")
Else
Dim counts:counts=300
'注意，这里的counts相当于Rs.RecordCount,也就是记录总数。
Dim Ls:Ls = Cint(start) + Cint(limit)
If Ls >= counts Then
Ls = counts
End If
Echo("{")
Echo("""total"":")
Echo(""""&counts&""",")
Echo("""items"":[")
For i = start+1 To Ls
Echo("{")
Echo("""title"":""newstitle"&i&"""")
Echo(",")
Echo("""author"":""author"&i&"""")
Echo(",")
Echo("""hits"":"""&i&"""")
Echo(",")
Echo("""addtime"":"""&Now()&"""")
Echo("}")
If i<Ls Then
Echo(",")
End If
Next
Echo("]}")
End If
Function Echo(str)
Response.Write(str)
End Function
%>
<%
Response.ContentType = "text/html"
Response.Charset = "UTF-8"
%>
<%
'返回JSON数据,自定义一些测试数据。。
'这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
'由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
start = Request("start")
limit = Request("limit")
'查询时获取的参数。
query = Request("query")
If start = "" Then
start = 0
End If
If limit = "" Then
limit = 50
End If
sorts = Replace(Trim(Request.Form("sort")),"'","")
dir = Replace(Trim(Request.Form("dir")),"'","")
'测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。
If query = "newstitle" Then
Echo("{")
Echo("""total"":")
Echo("""1")
Echo(""",""items"":[")
Echo("{")
Echo("""title"":""newstitle""")
Echo(",")
Echo("""author"":""author""")
Echo(",")
Echo("""hits"":""100""")
Echo(",")
Echo("""addtime"":"""&Now()&"""")
Echo("}")
Echo("]}")
Else
Dim counts:counts=300
'注意，这里的counts相当于Rs.RecordCount,也就是记录总数。
Dim Ls:Ls = Cint(start) + Cint(limit)
If Ls >= counts Then
Ls = counts
End If
Echo("{")
Echo("""total"":")
Echo(""""&counts&""",")
Echo("""items"":[")
For i = start+1 To Ls
Echo("{")
Echo("""title"":""newstitle"&i&"""")
Echo(",")
Echo("""author"":""author"&i&"""")
Echo(",")
Echo("""hits"":"""&i&"""")
Echo(",")
Echo("""addtime"":"""&Now()&"""")
Echo("}")
If i<Ls Then
Echo(",")
End If
Next
Echo("]}")
End If
Function Echo(str)
Response.Write(str)
End Function
%>

复制代码

至此，带搜索功能的Grid就全部完成了。

Mark.Yao · 发表于 2011-6-10 15:51

Ext.tree的分页请问有例子么.谢谢

岁月无声 · 发表于 2011-6-16 10:25

楼主厉害，希望以后有更多的4.0例子，我一定关注你的空间

reg2011 · 发表于 2011-6-17 20:48

<!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>窗口实例--www.51myit.com</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
<script type="text/jscript">
Ext.require('Ext.window');
Ext.onReady(function(){
  Ext.create('Ext.Window',{
width:400,
height:230,
//X,Y标识窗口相对于父窗口的偏移值。
x:10,
y:10,
plain: true,
//指示标题头的位置,分别为 top,bottom,left,right,默认为top
headerPosition: 'left',
title: 'ExtJS4 Window的创建，头在左'
  }).show();

  Ext.create('Ext.Window',{
width:400,
height:230,
x:500,
y:10,
plain: true,
//指示标题头的位置,分别为 top,bottom,left,right,默认为top
headerPosition: 'right',
title: 'ExtJS4 Window的创建，头在右'
  }).show();

  Ext.create('Ext.Window',{
width:400,
height:230,
x:10,
y:300,
plain: true,
//指示标题头的位置,分别为 top,bottom,left,right,默认为top
headerPosition: 'bottom',
title: 'ExtJS4 Window的创建，头在底'
  }).show();
  var win = Ext.create('Ext.Window',{
width:400,
height:230,
x:500,
y:300,
plain: true,
//指示标题头的位置,分别为 top,bottom,left,right,默认为top
headerPosition: 'top',
title: 'ExtJS4 Window的创建'
  });
  win.show()
这是神马;
});
</script>
</head>

<body>
</body>
</html>

hxy · 发表于 2011-7-25 10:35

呵呵，等着就等着....

jinchang · 发表于 2011-7-29 10:09

啊...刚回来啊...

芷馨 · 发表于 2011-7-29 10:10

谢谢分享了!

芷馨 · 发表于 2011-7-29 10:55

老大,我好崇拜你哟

紫衿 · 发表于 2011-8-10 10:50

激动了就不好办了..

fl · 发表于 2011-8-16 10:11

呵呵　　我傻了‘～～哈哈

走就走吧 · 发表于 2011-8-18 13:45

看起来好~~像啊~~~~~

东逝水 · 发表于 2011-10-16 11:05

reg2011 发表于 2011-6-17 20:48
窗口实例--www.51myit.com

学习学习下。。。

lwqhp22 · 发表于 2011-10-31 09:11

本帖最后由 lwqhp22 于 2011-10-31 09:12 编辑

楼主厉害，希望以后有更多的4.0例子，我一定关注你的空间

全力兔子 · 发表于 2012-3-8 20:58

很棒的例子学习

悄悄豆 · 发表于 2012-3-15 16:26

非常的感谢。为什么WINDOW的例子在IE里可以显示，在FIREFOX里不显示。还有修改anchor没有变化。希望楼主再多发些例子。{:soso_e100:}

帐号		自动登录	找回密码
密码			成为会员

extjs4学习笔记大全

评分

相关帖子