ExtJs中的Grid具體操做(筆記及心得)

一.基本操做步驟

1. var cm=new Ext.grid.ColumnModel([ //對列的定義，cm是它的簡寫，做爲真個表格的列模式，須要首先建立的
   {header:'編號',dataIndex:'id',sortable:true}, //header是表的首部顯示文本。dataIndex是列對應的記錄集字段,sortable表示列是否可排序，可能還會用到的參數：renderer列的渲染函數，format格式化信息
   
   {header:'名稱',dataIndex:'name'},
   {header:'描述',dataIndex:'descn'}
   ]);
2. var data=[
   ['1','name1','descn1'], //5組具體的數據，每組數據分別對應每一列
   ['2','name2','descn2'],
   ['3','name3','descn3'],
   ['4','name4','descn4'],
   ['5','name5','descn5']
   ];
3. //store用來建立一個數據存儲對象，是GridPanel必備的屬性
   var store=new Ext.data.Store({
   proxy:new Ext.data.MemoryProxy(data), //是指獲取數據的方式
   reader:new Ext.data.ArrayReader({},[ //是指如何解析這一堆數據，ArrayReader就是解析數組的
   {name:'id'},
   {name:'name'},
   {name:'descn'}
   ])
   });
   store.load();//要執行一次，以對數據初始化，很重要
4. var grid=new Ext.grid.GridPanel({
   autoHeight:true,
   renderTo:'grid', //要渲染的地方(就是在哪裏顯示)
   enableColumnMove:false,//設置是否能夠拖放列
   enableColumnResize:false,//設置是否能夠改變列的大小
   stripeRows:true,//斑馬線效果
   store:store,
   cm:cm,
   autoExpandColumn:'descn', //能夠制定列的寬度自動伸展。只能制定一列的id
   viewConfig:{
   forceFit:true //每列自動充滿Grid
   }
   });

注：Ext中 renderer通常用於Grid中對列模型的渲染上 其詳細信息記錄在 Ext.grid.ColumnModel 中的 setRenderer( Number col, Function fn ) 方法裏

renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){

}

含有的參數的介紹：

1.value是當前單元格的值

2.cellmeta裏保存的是cellId單元格id，id是列號，css是這個單元格的css樣式。

3.record是這行的全部數據，你想要什麼，record.data["id"]這樣就得到了。

4.rowIndex是行號，不是從頭往下數的意思，而是計算了分頁之後的結果。

5.columnIndex列號。

6.store，這個厲害，實際上這個是你構造表格時候傳遞的ds，也就是說表格裏全部的數據，你均可以隨便調用，唉，太厲害了。

 

二. 經常使用的屬性：

1.sortable:true,//sortable設爲排序

2.enableColumnMove:false,//設置是否拖放列

3.enableColumnResize:false,//設置是否改變列大小

4.stripeRows:true, //每列是不是斑馬線分開

5.loadMask:true, //加載時有加載的圖標

6.autoExpandColumn:'要自定義寬度的id' //能夠制定列的寬度自動伸展。只能制定一列的id,因此要在前面指定的列先寫好id

7.viewConfig:{
forceFit:true //每列自動充滿Grid
}

8.sortInfo: {field: "name", direction: "ASC"}//在原來的前提下，加此行：field表明排序列名，direction表明排序方式(ASC是升序，DESC是降序)

9.renderer: Ext.util.Format.dateRenderer('Y-m-d')

//這裏須要添加的renderer屬性的值設置爲Ext.util.Format.dateRenderer。這是爲咱們提供的格式

10.type:'date',dateFormat: 'Y-m-dTH:i:s'//type是reader解析時把這一列做爲日期類型處理，dateFormat是把獲得的字符串轉換成相應的日期格式

10-2.在寫數據的時候要：'1970-01-15T02:58:04',//添加一列時間的數據，格式要和下面設置的dateFormat同樣

11.new Ext.grid.RowNumberer(), //自動顯示行號

12.<input type="button" id="remove" value="刪除第 二行" />//新建按鈕，id="remove"

Ext.get('remove').on('click', function() {//得到id，執行點擊事件

store.remove(store.getAt(1));//store.getAt(a)是找到要找的那行的內容,a從0開始(及第一行就是0)，該代碼表示刪除改行的信息

grid.view.refresh();//清除一行信息，最左邊顯示的行的id從新編號

});

13.var sm = new Ext.grid.CheckboxSelectionModel();//新建複選框的對象，使用的時候直接寫 'sm'

14.Ext.grid.RowSelectionModel({singleSelect:true})//設置行是否能夠按shift多選（true爲不能夠）

15.只選一行執行

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"));

}

}); //點擊一行，就輸出該行的信息

16.表格視圖

var grid = new Ext.grid.GridPanel({

//設置各類監聽器可看作控制器

height: 80,

width: 450,

renderTo: 'grid',

store: new Ext.data.Store({

autoLoad: true,

proxy: new Ext.data.MemoryProxy(data),

reader: new Ext.data.ArrayReader({}, meta)

}),

columns: meta

});//表格定義過小的話，本身默認產生滾動條

grid.getView().scrollToTop();//滾動條滾動到最上面

grid.getView().focusCell(0, 0);//焦點定位在第一行的第一列

17.本身定義，改變GridView的初始參數

viewConfig: {

columnsText: '顯示的列',

scrollOffset: 30,//表示表格右側爲滾動條預留的寬度

sortAscText: '升序',

sortDescText: '升序',

forceFit: true //表格自動延展每列的長度，使內容充滿整個表格

}

18.Grid添加分頁工具條

var grid = new Ext.grid.GridPanel({

renderTo: 'grid',

autoHeight: true,

store: store,

cm: cm,

                       

 

bbar: new Ext.PagingToolbar({

pageSize: 10, //每頁顯示信息的條數

store: store,

displayInfo: true, //是否顯示數據信息

displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共{2} 條', //在displayInfo有效的前提上，{0}{1}{2}中的數據會本身替換掉

emptyMsg: "沒有記錄" //沒有數據時顯示的信息

})

});

store.load();

 

19.經過後臺獲取分頁數據

var store = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({url:'09_02_01.jsp'}), //直接經過Http訪問數據

reader: new Ext.data.JsonReader({

totalProperty: 'totalProperty', //對應JSP代碼中返回的totalProperty，就是數據的總數

root: 'root' //root對應的JSP代碼中的返回的root，也就是一個包含返回數據的數組

}, [

{name: 'id'},

{name: 'name'},

{name: 'descn'}

])

});

以及要改變store.load();爲：

store.load({params:{start:0,limit:10}}); //初始化時經過傳參數去得到但願獲得的那部分數據，start指示從第幾條數據開始顯示，limit指從start開始一共幾條數據

20.可編輯表格控件——EditorGrid

var cm = new Ext.grid.ColumnModel([{

header: '編號',

dataIndex: 'id',

editor: new Ext.grid.GridEditor( //每列添加editor屬性，裏邊的屬性都是徹底同樣的TextField

new Ext.form.TextField({//TextField的方式是隨意修改單元格

allowBlank: false //表示不容許輸入空值

})

)

}, {

……

})

)

}]);

還有要改變的：

var grid = new Ext.grid.EditorGridPanel({

autoHeight: true,

renderTo: 'grid',

clicksToEdit:1,//要編輯單元格時點擊的次數，默認是雙擊

store: store,

cm: cm

});

添加和刪除行：

(表示出如今表的頂部新建一行工具條)

tbar: new Ext.Toolbar(['-', {

text: '添加一行',

handler: function(){ //handler定義按鈕被按下時要執行的內容

var p = new Record({

id:'',

name:'',

descn:''

});

grid.stopEditing();

store.insert(0, p);//新建一行

grid.startEditing(0, 0);//激活第一行第一列的編輯狀態,及新建後焦點默認選在上面

}

}, '-', {

text: '刪除一行',

handler: function(){

Ext.Msg.confirm('信息', '肯定要刪除？',function(btn){

if (btn == 'yes') {

var sm = grid.getSelectionModel();

var cell = sm.getSelectedCell();

var record = store.getAt(cell[0]);

store.remove(record); //刪除一行

}

});

}

}, '-'])

});

保存數據:

{

text: '保存',

handler: function(){

var m = store.modified.slice(0);//做用是複製store.modified。保證其原始數據不受影響

var jsonArray = [];

Ext.each(m, function(item) {//做用是遍歷m，並對每項分別調用fn函數

jsonArray.push(item.data);

});

Ext.lib.Ajax.request(

'POST',

'11_03_01.jsp',

{success:function(response){

Ext.Msg.alert('信息',response.responseText, function(){

store.reload();

}); //success是請求成功後返回的信息

},failure:function(){

Ext.Msg.alert("錯誤", "與後臺聯繫的時候出現了問題");

}}, //failere是請求失敗後返回的信息

'data=' + encodeURIComponent(Ext.encode(jsonArray))

);

}

驗證數據:

var m = store.modified.slice(0);

for (var i = 0; i < m.length; i++) {

var record = m[i];//得到被修改的每行數據

var fields = record.fields.keys;//表示一共幾行

for (var j = 0; j < fields.length; j++) {

var name = fields[j];//列名

var value = record.data[name];//單元格的數值

var colIndex = cm.findColumnIndex(name);//列號

var rowIndex = store.indexOfId(record.id);//行號

var editor = cm.getCellEditor(colIndex).field;//colIndex使用的編輯器

if (!editor.validateValue(value)) {

Ext.Msg.alert('提示', '請確保輸入的數據正確。', function(){

grid.startEditing(rowIndex, colIndex);

});

return;

}

}

21.屬性表格——PropertyGrid(只要兩個值:key和value,即:列的名稱和具體的值)

var grid = new Ext.grid.PropertyGrid({

title: '屬性表格',

autoHeight: true,

width: 300,

renderTo: 'grid',

source: {

"名字": "不告訴你",

"建立時間": new Date(Date.parse('12/15/2007')),

"是否有效": false,

"版本號": .01,

"描述": "嗯，估計沒啥可說的"

}

});

禁止對屬性進行編輯：(只能看不能動)

grid.on("beforeedit", function(e){

e.cancel = true;

return false;

});

獲取屬性表格的值：

Ext.Msg.alert('名字', grid.store.getById('名字').get('value')); //彈出警告框，是對應key所對應的value

設置時間選擇：

customEditors: {

'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))

}//TimeField，能夠本身再source中設置開始的時間（如：Start Time：‘10:00 AM’）

22.表格分組：

var store = new Ext.data.GroupingStore({

reader: reader,

data: data,

groupField: 'sex', //按性別分組

sortInfo: {field: 'id', direction: "ASC"}//如何排序的對象，分組後，每組按id進行升序排列顯示

});

view: new Ext.grid.GroupingView(),//得到Ext.grid.GroupingView的實例

grid.getView().expandAllGroups(); //展開因此分組

grid.getView().collapseAllGroups();//摺疊全部分組

grid.getView().toggleAllGroups();//自動判斷分組的狀態

23.能夠拖拉調整大小的表格：

var rz = new Ext.Resizable(grid.getEl(), {

wrap: true, //在構造Resizable時自動在制定的id的外邊包裹一層div

minHeight:100, //限制改變的最小的高度

maxHeight:200,

pinned:false, //控制可拖動區域的顯示狀態，false是鼠標懸停在拖拉區域上纔出現

handles: 's'//設置拖拉的方向（n,s,e,w,all...）

});

rz.on('resize', grid.syncSize, grid);//註冊事件(做用:將調好的大小傳個scope執行)

24.能夠拖拉行，在同一個表中拖動

enableDragDrop: true//設置容許拖動行

設置DropTarget：

var ddrow = new Ext.dd.DropTarget(grid.container, {

ddGroup : 'GridDD',

copy : false,//拖動是否帶複製屬性

notifyDrop : function(dd, e, data) { //對應的函數處理拖放事件

// 選中了多少行

var rows = data.selections;

// 拖動到第幾行

var index = dd.getDragData(e).rowIndex;

if (typeof(index) == "undefined") {

return;

}

// 修改store

for(i = 0; i < rows.length; i++) {

var rowData = rows[i];

if(!this.copy) store.remove(rowData);

store.insert(index, rowData);

}

}

});

25.表格與右擊菜單

 

var contextmenu = new Ext.menu.Menu({

id: 'theContextMenu',

items: [{

text: '查看詳情',

handler: function(){

寫點擊後要執行的函數，能夠相似於：//Ext.Msg.alert('詳情','ExtJs的表格右擊事件');

}

}]

});

grid.on("rowcontextmenu", function(grid, rowIndex, e){

e.preventDefault();//防止瀏覽器彈出默認的右鍵菜單

grid.getSelectionModel().selectRow(rowIndex);//調用

contextmenu.showAt(e.getXY());//右擊顯示如今本身的菜單

});