Extjs學習——簡單的Grid使用

Grid.js文件
Ext.onReady(function(){

var sm = new Ext.grid.CheckboxSelectionModel();

//這是ColumnModel的默認實現,在Grid中使用。 該類與一個列配置對象數組一起被初始化。
//dataIndex: grid中 Ext.data.Store 的Ext.data.Record 定義字段名稱...
//renderer(可選) 一個用來根據單元格數值,爲單元格產生HTML標籤的函數。 參見setRenderer. 如果不指定...

var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //自動顯示行號
sm,
{header:'編號',dataIndex:'id',width:50,sortable:true},
{header:'名稱',dataIndex:'name'},
{header:'顏色',dataIndex:'color'},
{header:'性別',dataIndex:'sex',renderer:renderSex}, //設置文字顏色和圖片
{header:'描述',dataIndex:'descn',renderer:renderDesc} //添加按鈕
]);


//數據
var data=[
['1','name1','#FBF8BF','男','descn1'],
['2','name2','#99CC99','男','descn2'],
['3','name3','#F5C0C0','女','descn3'],
['4','name4','#FFFFFF','男','descn4'],
['5','name5','#99CC99','女','descn5']
];
//Store類封裝了Record 對象的客戶端緩存,它負責向GridPanel 、ComboBox 或者DataView 這類組件提供數據輸入。

//Store對象將使用配置 的DataProxy的實現類來加載數據,除非你直接調用loadData 方法並傳入你的數據。

//Store對象不知道Proxy返回的數據的格式是什麼。

//Store對象使用它配置的 DataReader 的實現類從數據對象創建Record 實例。這些Record將被緩存,可以通過訪問函數訪問。

var store=new Ext.data.Store({
//proxy:new Ext.data.MemoryProxy(data),
proxy:new Ext.data.PagingMemoryProxy(data),//配置了分頁工具條時必須改成這句
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'color'},
{name:'sex'},
{name:'descn'}
])
});



var grid=new Ext.grid.GridPanel({
enableColumnMove:true, //True表示啓動對Column順序的拖拽,反之禁用
enableColumnResize:true, //設置爲false可以禁止這個表格的列改變寬度 (默認值爲 true).
stripeRows : true, //True表示使用不同顏色間隔行,默認爲false.
autoHeight: true,
loadMask:true, //讀取數據時的遮罩和提示功能,默認爲false
renderTo:'grid', //該值可以是一個節點的id、一個DOM節點或者一個已存在的元素, 組件將會被渲染到其中
store:store, //Grid使用Ext.data.Store 作爲自己的數據源(必需).
cm:cm, //由於展現grid的Ext.grid.ColumnModel對象,列定義的model (必需).
//sm:sm, //任何AbstractSelectionModel的子類都可以作爲grid的選擇模型(selection model)
sm:new Ext.grid.RowSelectionModel({singleSelect:true}), //只能選中其中一行
//bbar : Object/Array panel底部的工具欄。 可以是 Ext.Toolbar 對象
bbar:new Ext.PagingToolbar({ //創建分頁工具條
pageSize:3, //每頁顯示幾條數據
store:store,
displayInfo:true, //是否顯示數據信息
displayMsg: '顯示第 {0} 條到 {1} 條記錄,一共 {2} 條',
emptyMsg: "沒有記錄" //沒有數據時顯示的信息
}),

viewConfig:{ //一個用於gird ui 視圖的配置對象.Ext.grid.GridView中所有的配置項都可以設置...

forceFit:true, //Ture表示自動擴展或縮小列的寬度以適應grid的寬度,從而避免出現水平滾動條.

enableRowBody:true, //True表示在每一行的下面增加第二個TR元素,第二個TR元素用於在行數據的下面提供一個行主體
getRowClass: GetRowClass //重寫這個函數可以在展現的時候應用自定義的CSS類.
}

});



//getSelectionModel() : SelectionModel 返回grid的SelectionModel。
//getSelections() : Array 返回所有選中的記錄
grid.on('click', function() {
var selections = grid.getSelectionModel().getSelections();
for (var i = 0; i < selections.length; i++) {
var record = selections[i];
Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn"));
}
});

//使用配置的Reader從Proxy中加載Record緩存。
//如果配置了分頁工具條,那麼store.load就必須在Grid以後執行
store.load({params:{start:0,limit:3}});



});

function renderSex(value){
if(value=='男'){
return "<span style='color:red;font-weight:bold;'>紅男</span><img src='user_male.png' />";
}else{
return "<span style='color:green;font-weight:bold;'>綠女</span><img src='user_female.png' />";
}
}


function renderDesc(value,cellmeta,record,rowIndex,columnIndex,store){
var str="<input type='button' value='查看詳細信息' onclick='alert(\""+
"這個單元格的值是:"+value+"\\n"+"這個單元格的配置是:{cellId:"+
cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}\\n"+
"這個單元格對應行的record是:"+record+",一行的數據都在裏邊\\n"+
"這是第"+rowIndex+"行\\n"+
"這是第"+columnIndex+"列\\n"+
"這個表格對應的ext.data.Store在這裏:"+store+",隨便用吧!"+
"\")'>";
return str;
}

//改變每行的背景顏色
function GetRowClass(record,rowIndex,p,ds){
var cls = 'white-row';
switch (record.data.color) {
case '#FBF8BF' :
cls = 'yellow-row'
break;
case '#99CC99' :
cls = 'green-row'
break;
case '#F5C0C0' :
cls = 'red-row'
break;
}
return cls;
}

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>

<title>簡單的Grid使用</title>
<link href="../extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="Grid.css" rel="stylesheet" type="text/css" />
<script src="../extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../extjs/ext-all.js" type="text/javascript"></script>
<script src="PagingMemoryProxy.js" type="text/javascript"></script>
<script src="Grid.js" type="text/javascript"></script>
</head>
<body>

<script src="../ext-3.0.0/examples/shared/examples.js" type="text/javascript"></script>
<div id="grid">

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

Grid.css文件
.white-row{ background-color: white; }
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章