View Full Version : Ext.grid.GridPanel, muti-row checkboxes: how do I submit all items at once?

20 Jan 2012, 11:17 AM
I have a Ext.grid.GridPanel where each row has a checkbox on the left. At the top there are two buttons: 'refresh' and 'submit'. I want to be able to select multiple rows and submit all of them in one click of the submit button. As it is right now when I select multiple rows and hit submit it will submit the first one, then remove that item from the grid, and I have to hit submit again (the formerly checked rows are still checked).

How do I change the following code to make the submit button send all of the rows at one time?

var dataStore = new Ext.data.SimpleStore({ fields: [
{name: 'node'},
{name: 'ip'},
{name: 'groups'}
var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel();
var dataGrid = new Ext.grid.GridPanel ({
renderTo: document.body,
clickstoEdit: 2,
selModel : checkBoxSelMod,
xtype: 'grid',
layout: 'fit',
sm: new Ext.grid.CheckboxSelectionModel(),
tbar: [
text: 'Refresh',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_refresh.png',
cls: 'x-btn-text-icon',
handler: function() {
window.location = '$nroot/index.php/imaging/index';},
scope: this,
text: 'Submit Machine(s)',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_add.png',
cls: 'x-btn-text-icon',
handler: function() {
var sm = dataGrid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()) {

title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for server: '+sel.data.node+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
node: sel.data.node,
mgmtip: sel.data.ip
success: function(resp,opt) {
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
store: dataStore,
columns: [
{ id: 'node', header: "Node", width: 150, sortable: true, dataIndex: 'node'},
{ id: 'ip', header: "IP", width: 120, sortable: false, dataIndex: 'ip'},
{ id: 'groups', header: "Groups", width: 100, sortable: true, dataIndex: 'groups'},
stripeRows: true,
autoExpandColumn: 'node',
listeners: {
render: function(){ this.store.loadData(dataList); }

20 Jan 2012, 11:50 AM
instead of getSelected use getSelection. This will return an array

20 Jan 2012, 12:01 PM
When I do that I get the following in Firebug:

sm.getSelection is not a function

var sel = sm.getSelection();

20 Jan 2012, 12:05 PM
Odd... http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection

20 Jan 2012, 12:30 PM
Odd... http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection

I'm using Ext3 for this code. I do have the v4 libraries on the same site, can I switch the script loader and have all of the code work without changing anything?

20 Jan 2012, 12:32 PM
Your posting in the Ext JS 4 forum and not, they aren't just interchangeable. For Ext JS 3, try getSelections http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.RowSelectionModel-method-getSelections

20 Jan 2012, 12:44 PM
Whoops, I didn't see that there was a separate forum for ext3. Should I repost this in that forum?

When I change it to getSelections it returns this on page load:

item type is invalid for AcceptItem action

I can't find any examples that show multi-select with submit for GridPanels. Is there one I can reference?

20 Jan 2012, 1:29 PM
I've moved the topic to the Ext3 forum: http://www.sencha.com/forum/showthread.php?175579-Ext.grid.GridPanel-muti-row-checkboxes-how-do-I-submit-all-items-at-once&p=718442#post718442