欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ExtJS 配置和表格控件使用

 更新時(shí)間：2009年09月16日 00:07:54   作者：  
ExtJS時(shí)一套AJAX控件,本人認(rèn)為它是目前我見過最好最美的JS控件庫(kù)，所以非常有學(xué)習(xí)和使用價(jià)值，如果你還沒有接觸過ExtJS或者壓根對(duì)其不感興趣，那么沒有必要看下去了

3.6 表格分頁(yè)
Grid控件對(duì)性能要求較高，如果在一個(gè)Grid里面顯示上千條記錄，效率會(huì)有明顯下降，所以必須考慮分頁(yè)問題。
1、為Grid添加分頁(yè)工具條：在前面代碼的基礎(chǔ)上修改grid代碼：
復(fù)制代碼 代碼如下:

var grid1=new Ext.grid.GridPanel({
renderTo:"grid1",
stripeRows:true,//斑馬線效果
loadMask:true,
store: store1,
height:200,
cm:cm,
viewConfig:{
forceFit:true
},
bbar:new Ext.PagingToolbar({
pageSize:10,
store: store1,
displayInfo:true,
displayMsg:'顯示第{0}條到{1}條記錄,一共{2}條',
emptyMsg:"沒有記錄"
})
});

2、效果圖如圖6所示：
6
圖6 添加分頁(yè)工具條
3、如果要真正實(shí)現(xiàn)分頁(yè)，還需要通過后臺(tái)腳本獲得分頁(yè)數(shù)據(jù)，這部分在此不再給出
四、可編輯表格控件——EditorGrid
EditorGrid可以直接在表格里面執(zhí)行添加、刪除、修改、查找等功能，然后一次性保持。還有可以動(dòng)態(tài)修改某個(gè)單元格，這些單元格我們先暫時(shí)不能為空，保存時(shí)會(huì)進(jìn)行檢測(cè)，為空就無(wú)法保存，驗(yàn)證信息會(huì)給予提示。
4.1 制作一個(gè)簡(jiǎn)單的EditorGrid
1、定義列，代碼如下：
復(fù)制代碼 代碼如下:

var cm=new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'id',width:40,editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)},
{header:'名稱',dataIndex:'name',width:180,editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'時(shí)間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);

2、定義grid,注意此時(shí)是EditorGridPanel.
復(fù)制代碼 代碼如下:

var grid1=new Ext.grid.EditorGridPanel({
renderTo:"grid1",
store: store1,
height:200,
clicksToEdit:1,
cm:cm
});

3、默認(rèn)情況下，需要雙擊單元格才能激活編輯器，從而進(jìn)行修改，不過，也可以給Grid配置clickToEdit:1，這樣就可以單擊單元格激活編輯器，從而進(jìn)行修改，如圖7所示：
7
圖7 通過單擊修改單元格
五、屬性表格——PropertyGrid
屬性表格擴(kuò)展自EditorGridPanel,所以可以直接編輯右邊的內(nèi)容，注意：只有右邊的，即使你單擊左邊的單元格，編輯器也會(huì)出現(xiàn)在右邊。
定義的方法如下：
復(fù)制代碼 代碼如下:

<script type="text/javascript"><!--
Ext.onReady(function(){
var grid=new Ext.grid.PropertyGrid({
title:"屬性表格",
autoHeight:true,
width:400,
renderTo:'grid1',
source:{
"名字":"薛敬明",
"創(chuàng)建時(shí)間":new Date(Date.parse('12/15/2009')),
"是否有效":false,
"版本號(hào)":.01,
"描述":"估計(jì)沒有啥說(shuō)的"
}
});
});
// --></script>

效果圖如圖8所示：
8
六、分組表格——Group
分組表格就是在普通表格的基礎(chǔ)上，根據(jù)某一列的數(shù)據(jù)將表格中的數(shù)據(jù)分組顯示的表格控件。
1、首先定義一組數(shù)據(jù)
復(fù)制代碼 代碼如下:

var data=[
['1','male','name1','desn1'],
['2','male','name2','desn1'],
['3','female','name3','desn1'],
['4','male','name4','desn1'],
['5','female','name5','desn1'],
['6','male','name6','desn1'],
['7','male','name7','desn1']
];

2、創(chuàng)建表格的列信息
復(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:'sex',width:180},
{header:'名稱',dataIndex:'name',width:200},
{header:'描述',dataIndex:'desn',width:200}
]);

3、創(chuàng)建數(shù)據(jù)存儲(chǔ)對(duì)象
復(fù)制代碼 代碼如下:

var store1= new Ext.data.GroupingStore({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'sex'},
{name:'name'},
{name:'desn'}
]),
groupField:'sex',
sortInfo:{field:'id',direction:"ASC"}
});
store1.load();

4、設(shè)計(jì)分組設(shè)計(jì)表格
復(fù)制代碼 代碼如下:

var grid1=new Ext.grid.GridPanel({
store: store1,
height:300,
cm:cm,
view:new Ext.grid.GroupingView(),
renderTo:"grid1"
});

5、代碼清單如下，效果圖如圖9所示。
復(fù)制代碼 代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>分組表格控件</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 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:'sex',width:180},
{header:'名稱',dataIndex:'name',width:200},
{header:'描述',dataIndex:'desn',width:200}
]);

var data=[
['1','male','name1','desn1'],
['2','male','name2','desn1'],
['3','female','name3','desn1'],
['4','male','name4','desn1'],
['5','female','name5','desn1'],
['6','male','name6','desn1'],
['7','male','name7','desn1']
];

var store1= new Ext.data.GroupingStore({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'sex'},
{name:'name'},
{name:'desn'}
]),
groupField:'sex',
sortInfo:{field:'id',direction:"ASC"}
});
store1.load();
var grid1=new Ext.grid.GridPanel({
store: store1,
height:300,
cm:cm,
view:new Ext.grid.GroupingView(),
renderTo:"grid1"
});
});

// --></script>
</head>
<body>
<form id="form1" runat="server">
<div id="grid1">

</div>
</form>
</body>
</html>

9

圖9 分組表格

六、可拖放的表格

首先我們看圖10的效果圖：

10

圖10 可拖放的表格

注意圖10四周的藍(lán)色細(xì)條，把鼠標(biāo)放到上面，就可以用拖放改變表格的高度和寬度，實(shí)現(xiàn)這一效果并不難，也不需要對(duì)寫好的Grid做大的修改，只要在原先的基礎(chǔ)上添加如下代碼：

復(fù)制代碼 代碼如下:

var rz=new Ext.Resizable('grid1',{
wrap:true,
minHeight:100,
pinned:true,
handles:'all'
});
rz.on('resize',grid1.syncSize,grid1);

注意：
(1) Resizable必須放在render之后，否則就會(huì)出現(xiàn)問題；
(2) handles:'all'代表可以向所有放心拖動(dòng)表格
七、Grid與右鍵菜單
Grid提供了四個(gè)與右鍵菜單相關(guān)的事件：
（1） contextmenu:全局性的右鍵事件；
（2）cellcontextmenu:單元格上的右鍵事件
（3）rowcontextmenu:行上的右鍵事件
（4）headercontextmenu:表頭的右鍵事件
以下代碼我們實(shí)現(xiàn)一個(gè)行上的右鍵事件，代碼清單如下，效果圖如11所示
復(fù)制代碼 代碼如下:

var contextmenu=new Ext.menu.Menu({
id:'theContextMenu',
items:[{
text:'查看詳情',
handler:function(){
}
}]
});
grid1.on("rowcontextmenu",function(grid,rowIndex,e){
e.preventDefault();
grid1.getSelectionModel().selectRow(rowIndex);
contextmenu.showAt(e.getXY());
});

11

圖11 右鍵菜單

相關(guān)文章

最新評(píng)論