55. GridPanel中getSelectionModel詳解

轉自：https://blog.csdn.net/qq_29663071/article/details/50728429

本文導讀：Ext.grid.GridPanel繼承自Panel，其xtype爲grid，包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列彙總、單元格編輯等實用功能。 當咱們須要獲取選擇的數據時，就須要用到getSelectionModel方法。下面介紹GridPanel中getSelectionModel的操做。

1、Ext.grid.GridPanel

主要配置項：

store：表格的數據集
columns：表格列模式的配置數組，可自動建立ColumnModel列模式
autoExpandColumn：自動充滿表格未用空間的列，參數爲列id，該id不能爲0
stripeRows：表格是否隔行換色，默認爲false
cm、colModel：表格的列模式，渲染表格時必須設置該配置項
sm、selModel：表格的選擇模式，默認爲Ext.grid.RowSelectionModel
enableHdMenu：是否顯示錶頭的上下文菜單，默認爲true
enableColumnHide：是否容許經過標題中的上下文菜單隱藏列，默認爲true

loadMask：是否在加載數據時顯示遮罩效果，默認爲false
view：表格視圖，默認爲Ext.grid.GridView
viewConfig：表格視圖的配置對象
autoExpandMax：自動擴充列的最大寬度，默認爲1000
autoExpandMin：自動擴充列的最小寬度，默認爲50
columnLines：是否顯示列分割線，默認爲false
disableSelection：是否禁止行選擇，默認爲false
 

enableColumnMove：是否容許拖放列，默認爲true
enableColumnResize：是否容許改變列寬，默認爲true
hideHeaders：是否隱藏表頭，默認爲false
maxHeight：最大高度
minColumnWidth：最小列寬，默認爲25
trackMouseOver：是否高亮顯示鼠標所在的行，默認爲true

主要方法：

getColumnModel()：取得列模式
getSelectionModel()：取得選擇模式
getStore()：取得數據集
getView()：取得視圖對象
reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel )：使用一個新的數據集和列模式從新配置表格組件

 

2、getSelectionModel獲取選擇的行能夠進行以下操做

 

JScript 代碼    複製

var model = grid.getSelectionModel(); model.selectAll();//選擇全部行  model.selectFirstRow();//選擇第一行  model.selectLastRow([flag]);//選擇最後一行,flag爲正的話保持當前已經選中的行數,不填則默認false  model.selectNext();//選擇下一行  model.selectPrevious();//選擇上一行  model.selectRange(tartRow,ndRow, [Boolean keepExisting] );//選擇範圍間的行  model.selectRow(row);//選擇某一行  model.selectRows(rows);//選擇指定一些行,傳遞數組如[1,3,5],則分別選擇1,3,5行  model.clearSelections();//清空全部選擇  model.deselectRange( startRow, endRow );//取消從startrow到endrow的記錄的選擇狀態  model.deselectRow(row);//取消指定行的記錄 grid.getSelected().id //獲得選中的行的標識   var getSelect=function (grid, col) { //獲取選中grid的列  var st="";  for (var i = 0; i < grid.getSelectionModel().getSelections().length; i++)  {  st+=grid.getSelectionModel().getSelections()[i].get("'"+col+"'")+",";  } }

grid.getSelectionModel的全部操做

   1. var model = grid.getSelectionModel();  
   2. model.selectAll();//選擇全部行  
   3. model.selectFirstRow();//選擇第一行  
   4. model.selectLastRow([flag]);//選擇最後一行,flag爲正的話保持當前已經選中的行數,不填則默認false  
   5. model.selectNext();//選擇下一行  
   6. model.selectPrevious();//選擇上一行  
   7. model.selectRange(tartRow,ndRow, [Boolean keepExisting] );//選擇範圍間的行  
   8. model.selectRow(row);//選擇某一行  
   9. model.selectRows(rows);//選擇指定一些行,傳遞數組如[1,3,5],則分別選擇1,3,5行  
  10.   
  11.   
  12. model.clearSelections();//清空全部選擇  
  13. model.deselectRange( startRow, endRow );//取消從startrow到endrow的記錄的選擇狀態  

  14. model.deselectRow(row);//取消指定行的記錄

extjs獲取Grid中某一行某一列的值

選中某一行，var record = grid.getSelectionModel().getSelection();
一行的全部數據都在record裏面
具體某一列：record.get("列名-dataIndex")

extjs獲取store的值

grid.getStore().each(function(record){
var value = record.get("field_name");
});
store 中each()方法的使用應在load完使用，確切的說應該在on('load')事件中使用，
不懂就看一下下面的例子吧！。。。