extjsgrid批量選中

1. extjs 里Ext.grid.CheckboxSelectionModel多選框

處理這種來需求一般都源是加一個列表，把選中的統一列到此選擇列表裡面，還可以刪除操作等；
如果不想要建立一個選擇列表，還是得按照這種思路，得把勾選過的數據保存到數組里，保存每行的id和checked屬性，提交時就能完成所需提交，此外，每次換頁都得讀取這個checked屬性set到selectModel里去。
因為remote請求數據，如果不這么做，本地不保存的話，又不能直接打勾請求數據，修改服務端checked屬性，肯定是不可以換頁回來還能看到勾選的。

2. ExtJS grid reload store後, 默認選中reload store之前選中的行

定義一個array，修改前將選擇的行保存下來，提交後，從array中讀取，恢復選擇。
var selarr = new Array();
//保存選擇
var records = gridpanel.getSelectionModel().getSelection();
selarr.splice(0);
for (var i in records) {
selarr.push(records[i].index);
}

//恢復選擇
for (var i = 0; i < selarr.length; i++) {
gridpanel.getSelectionModel().select(selarr[i], true);
}

3. Extjs4.0中 在 grid.Panel里添加復選框，但是如何可以取消那個可以全選的總的那個復選框

先根據類名把一組元素找出來，然後第一個元素就是那個你要去掉的復選框，對第一個元素設置樣式就行了，代碼如下。思路是這樣的，我用的是Extjs6

//把頭部的復選框去掉

var check = grid.getEl().select('div.x-column-header-text-wrapper');

check.elements[0].style.display = "none";

4. Extjs中Grid中實現多選，相當於按著Ctrl鍵實現多選

var csm=new Ext.grid.CheckboxSelectionModel({
//重寫CheckboxSelectionModel里的onMouseDown方法
onMouseDown : function(e, t){
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
if(!this.mouseHandled && row){
var index = row.rowIndex;
this.selectRow(index, true);
}
this.mouseHandled = false;
}
});

5. extjs gridpanel不能選中多行

第一、這個來sm，必須在ColumnModel和Gridpanel里都有自，而且是同一個，而且也不能和其他Gridpanel共用同一個SM。
第二、要想多選必須點復選框而不能點行。
第三、如果你的grid行支持拖拽那麼也不能多選，這是Extjs的一個問題，貌似沒法解決。
第四、如果以上三種都不行，你在選行的時候按住Shift或是ctrl就可以了！

6. ExtJS grid表頭如何增加下拉項

extjs自己提供復選框列

//checkbox列

varfilecheckbox=newExt.grid.CheckboxSelectionModel();

//GridPanel

varfileGrid=newExt.grid.GridPanel({

store:fileStore,

columns:[

newExt.grid.RowNumberer(),//顯示列數

filecheckbox,//顯示復選框列

{//其他顯示列}]

//省略其他屬性

});

這樣你就可以而得到一個復選框，可以進行單選、全選了

如果你想自己定義的話，也可以

//定義filters

varfilters=newExt.ux.grid.GridFilters({

//

encode:encode,//jsonencodethefilterquery

local:local,//defaultstofalse(remotefiltering)

filters:[{

type:'numeric',

dataIndex:'id'

},{

type:'string',

dataIndex:'company',

disabled:true

},{

type:'numeric',

dataIndex:'price'

},{

type:'date',

dataIndex:'date'

},{

type:'list',

dataIndex:'size',

options:['small','medium','large','extralarge'],

phpMode:true

},{

type:'boolean',

dataIndex:'visible'

}]

});

//

//

//thefiltertypes(

varcreateColModel=function(finish,start){

varcolumns=[{

dataIndex:'id',

header:'Id',

//=true

//tousestore'sfield'stypeproperty(iftypepropertynot

//'auto'which

//GridFilterswillassumetobe'StringFilter'

filterable:true

//,filter:{type:'numeric'}

},{

dataIndex:'company',

header:'Company',

id:'company',

filter:{

type:'string'

//

//,disabled:true

}

},{

dataIndex:'price',

header:'Price',

filter:{

//type:'numeric'//

}

},{

dataIndex:'size',

header:'Size',

filter:{

type:'list',

options:['small','medium','large','extralarge']

//,phpMode:true

}

},{

dataIndex:'date',

header:'Date',

renderer:Ext.util.Format.dateRenderer('m/d/Y'),

filter:{

//type:'date'//

}

},{

dataIndex:'visible',

header:'Visible',

filter:{

//type:'boolean'//

}

}];

returnnewExt.grid.ColumnModel({

columns:columns.slice(start||0,finish),

defaults:{

sortable:true

}

});

};

然後

vargrid=newExt.grid.GridPanel({

colModel:createColModel(4),

plugins:[filters],

//這兩個屬性是重點，加上去就可以了

});

效果看圖片。

建議你去下載官方的源代碼，然後看其中的例子。

裡面有一個就是如何自定義這個的

7. extjs grid 獲取當前選中行的上一行數據

在 ExtJS 中處理 GridPanel 的操作時，要獲取選中行的數據，可以通過以下步驟實現。

首先，確保在 GridPanel 創建時隱藏一個編號列，以便通過 ID 直接查詢所需數據。若未設置編號列，可使用以下方法查找選中項在 store 中的行號。

使用 `grid.getSelectionModel().getSelections()` 方法獲取選中的項。

對於已設置編號列的情況：

javascript
var seletedGird = grid.getSelectionModel().getSelections();
var rowid = seletedGird[0].get('id');

若未設置編號列，則通過 store 的索引獲取選中項的行號：

javascript
var seletedGird = grid.getSelectionModel().getSelections();
var rowid = grid.getStore().indexOf(seletedGrid[0]);

在後台處理時，需確保與前端數據匹配。例如，刪除已選文件的步驟如下：

javascript
function deletefileItems() {
var gsm = fileGrid.getSelectionModel();
var rows = gsm.getSelections();
if (rows.length > 0) {
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var filePath = row.get('filePath');
Ext.Ajax.request({
// 省略後端請求代碼
});
}
} else {
Ext.Msg.alert('提示', '請選擇要刪除的記錄');
}
}

在獲取 Grid 中某一行的某一列值時，使用 `row.get('欄位名稱')` 可獲取對應欄位的值。

例如，要獲取某行的文件路徑值：

javascript
var filePath = row.get('filePath');

在 ExtJS 的 Grid 中，單擊單元格時，可以通過以下代碼獲取當前選中行的數據記錄：

javascript
var selModel = grid.getSelectionModel();
var record = selModel.getSelections();
for (var i = 0; i < record.length; i++) {
// 獲取記錄中特定欄位的值，例如姓名
var name = record[i].data.name;
}

若僅需獲取單個選中的記錄，代碼簡化為：

javascript
var record = selModel.getSelected();
var name = record.data.name;

以上方法展示了如何在 ExtJS 中高效地處理 GridPanel 的數據選擇與獲取操作。

8. ExtJS GridPanel 點擊行選中事件 有兩個gridPanel 選中前面表格的一行第二個表格的數據會根據選中值變化

大概思路是這樣的：內
var grid2 = new Ext.grid.GridPanel({
store: store2

});

var grid1 = new Ext.grid.GridPanel({
store: store1,

listeners: {
'rowclick': function(grid, rowIndex, e) {
store2.baseParams.xxxid= grid.getSelectionModel().getSelected().data['xxxid'];
store2.load({
容 params: {
.....
}
});
}

}
});

9. extjs如何獲取Grid中某一行某一列的值

Ext.grid.GridView.getCell( Number row, Number col )：取得指定單元格對應的td元素

例如：

varsStr=Ext.grid.GridView.getCell(0,0);

再給你一些常用的方法、屬性

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、Ext.grid.Column

主要配置項：

id：列id

header：表頭文字

dataIndex：設置列與數據集中數據記錄的對應關系，值為數據記錄中的欄位名稱。如果沒有設置該項則使用列索引與數據記錄中欄位的索引進行對應

width：列寬

align：列數據的對齊方式

hidden：是否隱藏列，默認為false

fixed：是否固定列寬，默認為false

menuDisabled：是否禁用列的上下文菜單，默認為false

resizable：是否允許改變列寬，默認為true

sortable：是否允許排序，默認為true

renderer：設置列的自定義單元格渲染函數

傳入函數的參數有：

value：數據的原始值

metadata：元數據對象，用於設置單元格的樣式和屬性，該對象包含的屬性有：

css：應用到單元格TD元素上的樣式名稱

attr：一個HTML屬性定義字元串，例如'style="color:blue"'

record：當前數據記錄對象

rowIndex：單元格的行索引

colIndex：單元格的列索引

store：數據集對象

xtype：列渲染器類型，默認為gridcolumn，其它可選值有booleancolumn、numbercolumn、datecolumn、 templatecolumn等

editable：是否可編輯，默認為true

editor：編輯器

groupName：

emptyGroupText：

groupable：

3、Ext.grid.ColumnModel

主要配置項：

columns：欄位數組

defaultSortable：是否進行默認排序，默認為false

defaultWidth：默認寬度

主要方法：

findColumnIndex( String col )：根據給定的dataIndex查找列索引

getColumnById( String id )：取得指定id對應的列

getColumnCount( Boolean visibleOnly )：取得列總數

getColumnHeader( Number col )：取得列的表頭

getColumnId( Number index )：取得列id

getDataIndex( Number col )：取得列對應的數據欄位名

getIndexById( String id )：取得列索引

getTotalWidth( Boolean includeHidden )

isCellEditable( Number colIndex, Number rowIndex )

isFixed()

isHidden( Number colIndex )

setColumnHeader( Number col, String header )

setColumnWidth( Number col, Number width, Boolean suppressEvent )

setDataIndex( Number col, String dataIndex )

setEditable( Number col, Boolean editable )

setEditor( Number col, Object editor )

setHidden( Number colIndex, Boolean hidden )

setRenderer( Number col, Function fn )

4、Ext.grid.AbstractSelectionModel

主要方法：

lock()：鎖定選擇區域

unlock()：解鎖選擇區域

isLocked()：當前選擇區域是否被鎖定

5、Ext.grid.CellSelectionModel

主要方法：

clearSelections( Boolean preventNotify )：清除選擇區域

getSelectedCell()：取得當前選擇的單元格，返回一數組，其格式：[rowIndex, colIndex]

hasSelection()：當前是否有選擇區域

select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] )：選擇指定單元格

6、Ext.grid.RowSelectionModel

主要配置項：

singleSelect：是否單選模式，默認為false，即可以選擇多條數據

主要方法：

clearSelections( [Boolean fast] )：清除所有選擇區域

deselectRange( Number startRow, Number endRow )：取消范圍內的行選擇

deselectRow( Number row, [Boolean preventViewNotify] )：取消指定行的選擇狀態

each( Function fn, [Object scope] )：遍歷所有選擇行，並調用指定函數。當前被選行將傳入該函數中

getCount()：得到選擇的總行數

getSelected()：得到第一個被選記錄

getSelections()：得到所有被選記錄的數組

hasNext()：判斷當前被選行之後是否還有記錄可以選擇

hasPrevious()：判斷當前被選行之前是否還有記錄可以選擇

hasSelection()：是否已選擇了數據

isIdSelected( String id )：判斷指定id的記錄是否被選擇

isSelected( Number/Record index )：判斷指定記錄或記錄索引的數據是否被選擇

selectAll()：選擇所有行

selectFirstRow()：選擇第一行

selectLastRow( [Boolean keepExisting] )：選擇最後行

keepExisting：是否保持已有的選擇

selectNext( [Boolean keepExisting] )：選擇當前選擇行的下一行

selectPrevious( [Boolean keepExisting] )：選擇當前選擇行的上一行

selectRange( Number startRow, Number endRow, [Boolean keepExisting] )：選擇范圍內的所有行

selectRecords( Array records, [Boolean keepExisting] )：選擇一組指定記錄

selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] )：選擇一行

row：行索引

selectRows( Array rows, [Boolean keepExisting] )：選擇多行

rows：行索引數組

7、Ext.grid.CheckboxSelectionModel

主要配置項：

singleSelect：是否單選模式，默認為false，即可以選擇多條數據

checkOnly：是否只能通過點擊checkbox列進行選擇，默認為false

sortable：是否允許checkbox列排序，默認為false

width：checkbox列的寬度，默認為20

8、Ext.grid.RowNumberer

主要配置項：

header：行號列表頭顯示的內容

width：列寬，默認為23

9、Ext.grid.GridView

主要配置項：

enableRowBody：是否包含行體

sortAscText：表格標題菜單中升序的文字描述

sortDescText：表格標題菜單中降序的文字描述

columnsText：表格標題菜單中列對應的文字描述

autoFill：是否自動擴展列以充滿整個表格，默認為false

forceFit：是否強制調整表格列寬以適用表格的整體寬度，防止出現水平滾動條，默認為false

主要方法：

focusCell( Number row, Number col )：將焦點移到指定單元格

focusRow( Number row )：將焦點移動指定行

getCell( Number row, Number col )：取得指定單元格對應的td元素

getHeaderCell( Number index )：取得指定表頭對應的td元素

getRow( Number index )：取得指定行對應的tr元素

getRowClass( Record record, Number index, Object rowParams, Store store )：得到附加到表格行上的樣式名

record：當前行的數據記錄對象

index：當前行的索引

rowParams：渲染時傳入到行模板中的配置對象，通過它可以為行體定製樣式，該對象只在enableRowBody為true時才生效，可能的屬性 如下：

body：渲染到行體中的HTML代碼片段

bodyStyle：應用到行體tr元素style屬性的字元串

cols：應用到行體td元素colspan屬性的值，默認為總列數

store：表格數據集

refresh( [Boolean headersToo] )：刷新表格組件

scrollToTop()：滾動表格到頂端

實戰

1：讓gridpanel的滾動條自動滾動到最後一條記錄(動態插入數據)：

grid.getView().focusRow(vehiclePassInfoGrid.getStore().getCount()-1);

2:清除gridpanel中有行被選擇的狀態：

grid.getSelectionModel().clearSelections();

10. extjs 雙擊grid 一行 把這行的全部信息顯示在彈出來的表單中 這個操作怎麼實現高分求解

//grid1定義的grid
var record = grid1.getSelectionModel().getSelected();//獲得當前選中行的數據源
if(record){
window.show();//顯示window窗口
form1.getForm().loadRecord(record);//window中的form載入數據源
//form1定義的form
//form1中的控制項的名字要與數據源的屬性名對應，自動顯示在form中了
}