title: ExtJS-3, Ext.grid.GridPanel, muti-row checkboxes: how do I submit all checked items at once?
body: <p>I'm using ExtJS3 and 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). </p>
  
  <p>How do I change the following code to make the submit button send all of the rows at one time?</p>
  
  <pre><code>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()) {
  
  
                  Ext.Msg.show({
                    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();
                          conn.request({
                            url: '$nroot/index.php/imaging/image/',
                                params: {
                              action: 'delete',
                                  node: sel.data.node,
                                  mgmtip: sel.data.ip
                                  },                            
                                success: function(resp,opt) {
                                dataGrid.getStore().remove(sel);
                              },
                                failure: function(resp,opt) {
                                Ext.Msg.alert('Error','Unable to image server - check debug logs');
                              }
                            });
                        }
                      }
                    });
                }
              }
            }               
            ],
     store: dataStore,
     columns: [                  
               checkBoxSelMod,
               { 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); }
       }      
  })});
  </code></pre>
  
  <p>When I change the code from getSelected to getSelections it returns this on page load: </p>
  
  <pre><code>item type is invalid for AcceptItem action
  </code></pre>
  
  <p>I can't find any examples that show multi-select with submit for GridPanels. Is there one I can reference?</p>
  
  <p>EDIT, based on the solutions below I've modified the code to work as follows:</p>
  
  <pre><code>              var sels = sm.getSelections();
                if (sels.length &gt; 0) {
                  var ips = [], nodes = [];
                  Ext.each(sels, function(sel) {
                             ips.push(sel.get('ip'));
                             nodes.push(sel.get('node'));
                           });
  
                  Ext.Msg.show({
                    title: 'Image Machine?',
                        buttons: Ext.MessageBox.YESNO,
                        msg: 'Continue with imaging (no undo!) process for servers: '+nodes.join(",")+'?',
                        fn: function(btn){
                        if (btn == 'yes'){
                          Ext.each(sels, function(sel) {
                                     var conn = new Ext.data.Connection();
                                     conn.request({
                                       url: '$nroot/index.php/imaging/image/',
                                           params: {
                                         node: sel.get('node'),
                                             mgmtip: sel.get('ip')
                                             },                            
                                           success: function(resp,opt) {
                                           dataGrid.getStore().remove(sel);
                                         },
                                           failure: function(resp,opt) {
                                           Ext.Msg.alert('Error','Unable to image server - check debug logs');
                                         }
                                       });
                                   })
                            }
                      }
                    });
                }
              }
  </code></pre>