ExtJS 配置和表格控件使用第1/2頁(yè)
更新時(shí)間：2009年09月16日 00:07:54 作者：
ExtJS時(shí)一套AJAX控件,本人認(rèn)為它是目前我見(jiàn)過(guò)最好最美的JS控件庫(kù)，所以非常有學(xué)習(xí)和使用價(jià)值，如果你還沒(méi)有接觸過(guò)ExtJS或者壓根對(duì)其不感興趣，那么沒(méi)有必要看下去了
ExtJS是一套完整的RIA解決方案，也因?yàn)楣δ芡暾斐闪薳xt-all.js有400多k,由于是基于JS和CSS的功能實(shí)現(xiàn)，對(duì)客戶端機(jī)器性能也有一定的要求，即不支持IE6以下的版本。如果您的項(xiàng)目對(duì)網(wǎng)頁(yè)響應(yīng)時(shí)間有嚴(yán)格的限制，或者客戶端操作系統(tǒng)過(guò)于陳舊，一定不要選擇ExtJS。
本文主要是介紹ExtJS的下載和配置以及一些簡(jiǎn)單的使用方法。目前最新版本為3.0，但是本文主要介紹2.2版本。
一、ExtJS下載以及配置
1、下載地址：www.extjs.com/(這是官網(wǎng)，大家可以選擇自己喜歡的版本下載)
2、配置過(guò)程，假設(shè)下載后的目錄為Ext,我們?cè)谠撃夸浵陆⑽覀冏约旱哪夸汳yExample(該目錄用于存放你自己寫(xiě)的代碼)，配置過(guò)程如下：
(1) 新建一個(gè)頁(yè)面文件Helloworld.html
(2) 在<head>和</head>之間添加如下代碼：
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('HelloWorld','Hello World');
})
</script>
(3) 這里注意<script></script>不能用</script>取代
(4) js的導(dǎo)入順序不要更改
(3) 如果彈出一個(gè)HelloWorld的對(duì)話框，則代表配置成功。
二、表格控件Grid的使用
EXT中的表格功能非常強(qiáng)大，包括排序、緩存、拖動(dòng)、隱藏某一列、自動(dòng)顯示行號(hào)、列匯總、單元格編輯等使用功能。我們首先介紹如何制作一個(gè)簡(jiǎn)單的Grid。
1、創(chuàng)建表格的列信息：
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'desn'}
]);
2、添加數(shù)據(jù)信息：
var data=[
['1','name1','desn1'],
['2','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','desn1']
];
3、創(chuàng)建數(shù)據(jù)存儲(chǔ)對(duì)象：
var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'}
])
});
ds.load();//這個(gè)相當(dāng)?shù)闹匾?
.
4、表格的列模型定義好了，原始數(shù)據(jù)和數(shù)據(jù)的轉(zhuǎn)換也已經(jīng)完成，剩下的只需要把它們裝配在一起，我們的Grid就創(chuàng)建成功了。
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});
5、注意：Ext.grid.Grid的renderTo屬性指示EXT將表格渲染到什么地方，所以，在HTML里應(yīng)該有一個(gè)<div id='grid'></div>與之對(duì)應(yīng)。
6、所有代碼清單如下(已通過(guò)測(cè)試)：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Grid.aspx.cs" Inherits="Ext_example_Grid" %>
<!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 id="Head1" runat="server">
<title>Grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'desn'}
]);
var data=[
['1','name1','desn1'],
['2','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','desn1']
];
var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'}
])
});
ds.load();
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});
});
// --></script>
</head>
<body>
<form id="form1" runat="server">
<div id="grid">
</div>
</form>
</body>
</html>
實(shí)驗(yàn)效果圖如圖1所示
圖1 一個(gè)簡(jiǎn)單的Grid
三、表格控件Grid的功能詳解
第二部分簡(jiǎn)單介紹了如何創(chuàng)建簡(jiǎn)單的Grid，本章將對(duì)Grid的功能進(jìn)行詳細(xì)的分析。
3.1 部分屬性功能
1、默認(rèn)情況下，Grid是可以拖放列，也可以改變列的寬度，如果要禁用這兩個(gè)功能，在定義Grid對(duì)象時(shí)分別設(shè)置enableColumnMove和enableColumnResize為false即可。
2、如果希望顯示斑馬線效果，可以加上stripeRows:true
3、Grid還支持一種讀取數(shù)據(jù)時(shí)的遮罩和提示功能，設(shè)置屬性loadMask:true,在store.load()完成之前一直會(huì)顯示"Loading…"
3.2 自主決定每列的寬度
1、如果要定義寬度，只要設(shè)置該列的width屬性即可，如下面的代碼所示。效果圖如圖2所示。
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id',width:60},
{header:'名稱',dataIndex:'name',width:180},
{header:'描述',dataIndex:'desn',width:200}
]);
圖2 自定義每列的寬度
2、這樣需要自己去計(jì)算每列的寬度，如果想讓每列自動(dòng)填滿Grid,只需要viewConfig中的forceFit即可。使用forceFit后，Grid會(huì)根據(jù)你在cm里設(shè)置的width按比例分配，非常智能。實(shí)現(xiàn)代碼如下：
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑馬線效果
loadMask:true,
store: ds,
height:600,
cm:cm,
viewConfig:{
forceFit:true
}
});
3、我們也可以考慮autoExpandColumn,它可以讓指定列的寬度自動(dòng)伸展，從而填充整個(gè)表格。代碼如下
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑馬線效果
loadMask:true,
store: ds,
height:600,
cm:cm,
autoExpandColumn:'desn'
// viewConfig:{
// forceFit:true
// }
});
注意：autoExpandColum只能指定一列的id,注意，必須是id,原來(lái)我們?cè)O(shè)置的cm里面都沒(méi)有id,現(xiàn)在為了使用autoExpandColumn,要給cm的desn設(shè)置id.于是在渲染時(shí)desn就可以自動(dòng)延伸，否則會(huì)出錯(cuò)。
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id',width:60},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);
3.3 讓Grid支持按列排序
在EXT中可以很方便地實(shí)現(xiàn)排序功能，只需要在定義列模型時(shí)增加sortable屬性，如下面代碼所示：
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id',width:60,sortable:true},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);
效果圖如圖3所示
圖3 按列排序效果
3.4 顯示時(shí)間類型數(shù)據(jù)
盡管返回的JSON里都是數(shù)字和字符串，但是在EXT中我們同樣可以從后臺(tái)取得日期類型的數(shù)據(jù)，然后交給Grid進(jìn)行格式化。
1、首先定義一組數(shù)據(jù)，其中最后一列是日期格式的數(shù)據(jù)。
var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];
2、接著我們?cè)趓eader里面增加一行配置，除了設(shè)置name以外，還設(shè)置了type和dateFormat兩個(gè)屬性。代碼如下：
var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});
3、同樣的，我們還需要在cm里面增加一行配置：
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id',width:60,sortable:true},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'時(shí)間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
4、代碼詳細(xì)信息如下所示，效果圖如圖4所示。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id',width:60,sortable:true},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'時(shí)間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];
var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});
store1.load();
var grid1=new Ext.grid.GridPanel({
renderTo:"grid1",
stripeRows:true,//斑馬線效果
loadMask:true,
store: store1,
height:200,
cm:cm,
viewConfig:{
forceFit:true
}
});
});
// --></script>
</head>
<body>
<form id="form1" runat="server">
<div id="grid1">
</div>
</form>
</body>
</html>
圖4 具有時(shí)間數(shù)據(jù)的Grid
3.5 自動(dòng)顯示行號(hào)和復(fù)選框
實(shí)際上，行號(hào)和復(fù)選框都是renderer的延伸。當(dāng)然，復(fù)選框的功能要復(fù)雜得多。
1、自動(dòng)顯示行號(hào)：修改列模型cm,加入RowNumberer對(duì)象；
2、復(fù)選框：我們創(chuàng)建一個(gè)CheckboxSelectionModel()
3、詳細(xì)代碼如下，效果圖如圖5所示
var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'編號(hào)',dataIndex:'id',width:40,sortable:true},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'時(shí)間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
圖5 自動(dòng)行號(hào)以及復(fù)選框效果圖
本文主要是介紹ExtJS的下載和配置以及一些簡(jiǎn)單的使用方法。目前最新版本為3.0，但是本文主要介紹2.2版本。
一、ExtJS下載以及配置
1、下載地址：www.extjs.com/(這是官網(wǎng)，大家可以選擇自己喜歡的版本下載)
2、配置過(guò)程，假設(shè)下載后的目錄為Ext,我們?cè)谠撃夸浵陆⑽覀冏约旱哪夸汳yExample(該目錄用于存放你自己寫(xiě)的代碼)，配置過(guò)程如下：
(1) 新建一個(gè)頁(yè)面文件Helloworld.html
(2) 在<head>和</head>之間添加如下代碼：
復(fù)制代碼 代碼如下:
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('HelloWorld','Hello World');
})
</script>
(3) 這里注意<script></script>不能用</script>取代
(4) js的導(dǎo)入順序不要更改
(3) 如果彈出一個(gè)HelloWorld的對(duì)話框，則代表配置成功。
二、表格控件Grid的使用
EXT中的表格功能非常強(qiáng)大，包括排序、緩存、拖動(dòng)、隱藏某一列、自動(dòng)顯示行號(hào)、列匯總、單元格編輯等使用功能。我們首先介紹如何制作一個(gè)簡(jiǎn)單的Grid。
1、創(chuàng)建表格的列信息：
復(fù)制代碼 代碼如下:
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'desn'}
]);
2、添加數(shù)據(jù)信息：
復(fù)制代碼 代碼如下:
var data=[
['1','name1','desn1'],
['2','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','desn1']
];
3、創(chuàng)建數(shù)據(jù)存儲(chǔ)對(duì)象：
復(fù)制代碼 代碼如下:
var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'}
])
});
ds.load();//這個(gè)相當(dāng)?shù)闹匾?
4、表格的列模型定義好了，原始數(shù)據(jù)和數(shù)據(jù)的轉(zhuǎn)換也已經(jīng)完成，剩下的只需要把它們裝配在一起，我們的Grid就創(chuàng)建成功了。
復(fù)制代碼 代碼如下:
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});
5、注意：Ext.grid.Grid的renderTo屬性指示EXT將表格渲染到什么地方，所以，在HTML里應(yīng)該有一個(gè)<div id='grid'></div>與之對(duì)應(yīng)。
6、所有代碼清單如下(已通過(guò)測(cè)試)：
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Grid.aspx.cs" Inherits="Ext_example_Grid" %>
<!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 id="Head1" runat="server">
<title>Grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'desn'}
]);
var data=[
['1','name1','desn1'],
['2','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','desn1']
];
var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'}
])
});
ds.load();
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});
});
// --></script>
</head>
<body>
<form id="form1" runat="server">
<div id="grid">
</div>
</form>
</body>
</html>
實(shí)驗(yàn)效果圖如圖1所示
圖1 一個(gè)簡(jiǎn)單的Grid
三、表格控件Grid的功能詳解
第二部分簡(jiǎn)單介紹了如何創(chuàng)建簡(jiǎn)單的Grid，本章將對(duì)Grid的功能進(jìn)行詳細(xì)的分析。
3.1 部分屬性功能
1、默認(rèn)情況下，Grid是可以拖放列，也可以改變列的寬度，如果要禁用這兩個(gè)功能，在定義Grid對(duì)象時(shí)分別設(shè)置enableColumnMove和enableColumnResize為false即可。
2、如果希望顯示斑馬線效果，可以加上stripeRows:true
3、Grid還支持一種讀取數(shù)據(jù)時(shí)的遮罩和提示功能，設(shè)置屬性loadMask:true,在store.load()完成之前一直會(huì)顯示"Loading…"
3.2 自主決定每列的寬度
1、如果要定義寬度，只要設(shè)置該列的width屬性即可，如下面的代碼所示。效果圖如圖2所示。
復(fù)制代碼 代碼如下:
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id',width:60},
{header:'名稱',dataIndex:'name',width:180},
{header:'描述',dataIndex:'desn',width:200}
]);
圖2 自定義每列的寬度
2、這樣需要自己去計(jì)算每列的寬度，如果想讓每列自動(dòng)填滿Grid,只需要viewConfig中的forceFit即可。使用forceFit后，Grid會(huì)根據(jù)你在cm里設(shè)置的width按比例分配，非常智能。實(shí)現(xiàn)代碼如下：
復(fù)制代碼 代碼如下:
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑馬線效果
loadMask:true,
store: ds,
height:600,
cm:cm,
viewConfig:{
forceFit:true
}
});
3、我們也可以考慮autoExpandColumn,它可以讓指定列的寬度自動(dòng)伸展，從而填充整個(gè)表格。代碼如下
復(fù)制代碼 代碼如下:
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑馬線效果
loadMask:true,
store: ds,
height:600,
cm:cm,
autoExpandColumn:'desn'
// viewConfig:{
// forceFit:true
// }
});
注意：autoExpandColum只能指定一列的id,注意，必須是id,原來(lái)我們?cè)O(shè)置的cm里面都沒(méi)有id,現(xiàn)在為了使用autoExpandColumn,要給cm的desn設(shè)置id.于是在渲染時(shí)desn就可以自動(dòng)延伸，否則會(huì)出錯(cuò)。
復(fù)制代碼 代碼如下:
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id',width:60},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);
3.3 讓Grid支持按列排序
在EXT中可以很方便地實(shí)現(xiàn)排序功能，只需要在定義列模型時(shí)增加sortable屬性，如下面代碼所示：
復(fù)制代碼 代碼如下:
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id',width:60,sortable:true},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);
效果圖如圖3所示
圖3 按列排序效果
3.4 顯示時(shí)間類型數(shù)據(jù)
盡管返回的JSON里都是數(shù)字和字符串，但是在EXT中我們同樣可以從后臺(tái)取得日期類型的數(shù)據(jù)，然后交給Grid進(jìn)行格式化。
1、首先定義一組數(shù)據(jù)，其中最后一列是日期格式的數(shù)據(jù)。
復(fù)制代碼 代碼如下:
var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];
2、接著我們?cè)趓eader里面增加一行配置，除了設(shè)置name以外，還設(shè)置了type和dateFormat兩個(gè)屬性。代碼如下：
復(fù)制代碼 代碼如下:
var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});
3、同樣的，我們還需要在cm里面增加一行配置：
復(fù)制代碼 代碼如下:
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id',width:60,sortable:true},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'時(shí)間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
4、代碼詳細(xì)信息如下所示，效果圖如圖4所示。
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id',width:60,sortable:true},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'時(shí)間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];
var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});
store1.load();
var grid1=new Ext.grid.GridPanel({
renderTo:"grid1",
stripeRows:true,//斑馬線效果
loadMask:true,
store: store1,
height:200,
cm:cm,
viewConfig:{
forceFit:true
}
});
});
// --></script>
</head>
<body>
<form id="form1" runat="server">
<div id="grid1">
</div>
</form>
</body>
</html>
圖4 具有時(shí)間數(shù)據(jù)的Grid
3.5 自動(dòng)顯示行號(hào)和復(fù)選框
實(shí)際上，行號(hào)和復(fù)選框都是renderer的延伸。當(dāng)然，復(fù)選框的功能要復(fù)雜得多。
1、自動(dòng)顯示行號(hào)：修改列模型cm,加入RowNumberer對(duì)象；
2、復(fù)選框：我們創(chuàng)建一個(gè)CheckboxSelectionModel()
3、詳細(xì)代碼如下，效果圖如圖5所示
復(fù)制代碼 代碼如下:
var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'編號(hào)',dataIndex:'id',width:40,sortable:true},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'時(shí)間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
圖5 自動(dòng)行號(hào)以及復(fù)選框效果圖
您可能感興趣的文章:
- Android自定義DataGridView數(shù)據(jù)表格控件
- 在web中js實(shí)現(xiàn)類似excel的表格控件
- 最棒的Angular2表格控件
- ASP.NET Table 表格控件的使用方法
- 左側(cè)是表頭的JS表格控件(自寫(xiě),網(wǎng)上沒(méi)有的)
- Android自定義表格控件滿足人們對(duì)視覺(jué)的需求
- jquery miniui 教程 表格控件 合并單元格應(yīng)用
- JQuery FlexiGrid的asp.net完美解決方案 dotNetFlexGrid-.Net原生的異步表格控件
- javascript表格控件：Chgrid，簡(jiǎn)化型
- 詳解能在多種前端框架下使用的表格控件
相關(guān)文章
ExtJS4 表格的嵌套 rowExpander應(yīng)用
今天做一個(gè)grid，里面的數(shù)據(jù)需要帶明細(xì)，思來(lái)想去還是搞個(gè)表格嵌套吧,需要的朋友可以參考下2014-05-05
Extjs4 GridPanel的主要配置參數(shù)詳細(xì)介紹
主要配置項(xiàng)：store：表格的數(shù)據(jù)集、columns：表格列模式的配置數(shù)組，可自動(dòng)創(chuàng)建ColumnModel列模式等等2013-04-04
EXTJS FORM HIDDEN TEXTFIELD 賦值 使用value不好用的問(wèn)題
用了一個(gè)方法解決了此問(wèn)題，但是老是感覺(jué)這樣解決了很不爽，各位有沒(méi)有遇到過(guò)這種問(wèn)題，請(qǐng)指點(diǎn)一下。2011-04-04
ExtJS Ext.MessageBox.alert()彈出對(duì)話框詳解
Ext.MessageBox是一個(gè)工具類，他繼承自O(shè)biect對(duì)象，用來(lái)生成各種風(fēng)格的信息提示對(duì)話框，Ext.Msg是該類的別名，使用Ext.MessageBox和用Ext.Msg效果是一樣的，而后者提供了更簡(jiǎn)單的方式。2010-04-04
關(guān)于extjs treepanel復(fù)選框選中父節(jié)點(diǎn)與子節(jié)點(diǎn)的問(wèn)題
實(shí)現(xiàn)帶有復(fù)選框的樹(shù),選中父節(jié)點(diǎn)時(shí)，選中所有子節(jié)點(diǎn)。取消所有子節(jié)點(diǎn)時(shí)，才能取消根節(jié)點(diǎn),感興趣的朋友可以了解下本文2013-04-04
接下來(lái)為大家介紹下GridPanel的幾種樣式及選擇模式分類介紹，感興趣的朋友可以參考下哈2013-04-04
前段學(xué)了小胖的GTGrid，很方便實(shí)用。最近在學(xué)習(xí)Extjs.做了個(gè)CRUD的Demo,包括Extjs版和GTGrid版，做的比較粗糙，希望對(duì)大家有一些幫助。2009-07-07
一個(gè)簡(jiǎn)單的Ext.XTemplate的實(shí)例代碼
把省份與城市以樹(shù)的形式輸出的Ext.XTemplate的實(shí)例代碼，需要的朋友可以參考下2012-03-03
extjs4 treepanel動(dòng)態(tài)改變行高度示例
本文為大家介紹下extjs4 treepanel如何動(dòng)態(tài)改變行高度，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-12
Extjs在exlipse中設(shè)置自動(dòng)提示的方法
spket最好用了，而且它還支持ext，安裝起來(lái)很簡(jiǎn)單.....2010-04-04