Como obtener los seleccionados de una Grilla mediante Ext.grid.CheckboxSelectionModel

UPDATED: Actualice los links.

Magnifico...
Ahora...surge la duda.....como...mediante un cmapo en la Base de Datos ...cuando cargamos ese grid...esten marcados esos checkbox......

Es solo cuestión de ingeniarselas...ese campo en la BD tendría que ser INT de 0 o 1, y en la grilla crear una columna de tipo Checkboxs donde si está en 1 la bd, este checkeada como bien dices.

ACÁ

Hola, lo del CheckboxSelectionModel quedó completamente claro, sin embargo tengo un problema al tratar de añadir el plugin de Ext.ux.grid.RowEditor con este modo de selección, ya que este RowEditor tiene un método "initFields" donde requiere de que cada columna tenga un método getEditor, pero al parecer esta columna de checkBox no tiene este método, acá mi código:

Código: Seleccionar todo

/**
* Modelo de seleccion para los datos de la solicitud de embarque
*
* @type Ext.grid.CheckboxSelectionModel
* @name smSolEmbarque
*/
var smSolEmbarque = new Ext.grid.CheckboxSelectionModel();

/**
* Modelo de columnas para los datos de la solicitud de embarque
*
* @type Ext.grid.ColumnModel
* @name colModelSolEmbarque
*/
var colModelSolEmbarque= new Ext.grid.ColumnModel([
      smSolEmbarque,
      {header: strVersion, dataIndex: 'version', width: 50, sortable: true},
      {header: 'Cantidad', dataIndex: 'cantidad', width: 50, sortable: true},
      {header: 'No. de Equipo', dataIndex: 'parte', width: 150, sortable: true},
      {header: 'Estatus', dataIndex: 'estatus', width: 90, sortable: true},
      {header: 'Orden de Compra', dataIndex: 'ordenCompra', width: 100, sortable: true,
         editor: txtEdSolEmbarqueOrdenCompra},
      {header: 'Observaciones', dataIndex: 'observaciones', width: 200, sortable: true}
]);

/**
* Editor del grid
*
* @type Ext.ux.grid.RowEditor
* @name editorSolEmbarque
*/
var editorSolEmbarque = new Ext.ux.grid.RowEditor({
   listeners: {
      afteredit: function(roweditor, changes, record, rowIndex){
         fnModificarRegSolEmbarque(roweditor, changes, record);
      }
   }
});

/**
* Grid para mostrar los datos  del detalle de asignacion
* para la solicitud de embarque
*
* @type Ext.grid.GridPanel
* @name gridSolEmbarque
*/
var gridSolEmbarque = new Ext.grid.GridPanel({
   store: storeSolEmbarque,
   selModel: smSolEmbarque,
   colModel: colModelSolEmbarque,
   height: 500,
   autoWidth: true,
   bbar: pgtbSolEmbarque,
   loadMask: true,
   plugins: editorSolEmbarque,
   view: new Ext.grid.GroupingView({
      forceFit:true,
      groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
   }),
});

Esperó alguien se haya topado con esto, un saludo y gracias por su atención

Una disculpa, ya lo solucione era cuestion de modificar ese método "initFields" del RowEditor.

Código: Seleccionar todo


initFields: function(){
        var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
        this.removeAll(false);
        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
            var c = cm.getColumnAt(i);
         ed = typeof(c.getEditor) == 'undefined' ? null : c.getEditor();


donde modifique la línea de:

Código: Seleccionar todo

ed = typeof(c.getEditor) == 'undefined' ? null : c.getEditor();

un saludo y espero haber podido ayudar a alguien más… aca una captura de pantalla:

buenas, sabes tengo un problema con tu ejemplo, lo adapte a mi grilla, y me deja seleccionar solo 1, y si es q selecciono una fila, si hago click en el checkbox me tira un error.

Código: Seleccionar todo

var sm = new Ext.grid.CheckboxSelectionModel();

serv_canal_mercado = Ext.extend(serv_canal_mercadoUi, {
    initComponent: function() {
        serv_canal_mercado.superclass.initComponent.call(this);
      this.grilla.on('beforerender',this.agregar_columnas,this);
      this.rest.on('beforerender', this.agregar_columnas2, this);
      this.att.on('beforerender', this.agregar_columnas3, this);
      var grilla = Ext.getCmp('grilla');
      Ext.getCmp('combo').addListener('select', function(combo, record){
         grilla.enable();         
         Ext.getCmp('btnNuevoServicio').enable();
         Ext.getCmp('restriccion').getStore().removeAll();
         Ext.getCmp('atributo').getStore().removeAll();
         Ext.getCmp('atributo').disable();
         Ext.getCmp('restriccion').disable();
         Ext.getCmp('btnGuardarServicio').enable();
         var dato = Ext.getCmp('combo').getValue();
         Ext.StoreMgr.lookup('ServicioCanalMercadoDS').load({
            params: { valor : dato}
         })   
      });
      Ext.getCmp('btnNuevaRestriccion').addListener('click', function(){
         alert("nueva restriccion");
      });
      Ext.getCmp('btnGuardarRestriccion').addListener('click', function(rec){
      var selectedKeys = [];
      sm.each(function(rec){
         selectedKeys.push(rec.get('Nombre'));
      });
      
      var win = new Ext.Window({
         title: 'Seleccionados'
         , closable: true
         , resizable: false
         , html: 'Los seleccionados son:<br>'+selectedKeys
         , width: 400
         , height: 200
      });
      win.show();      
      })
      grilla.on('rowclick', function(){
      Ext.getCmp('restriccion').getStore().removeAll();
         Ext.getCmp('atributo').getStore().removeAll()
         Ext.getCmp('atributo').enable();
         Ext.getCmp('restriccion').enable();         
         var registro = grilla.getSelectionModel().getSelected();         
         var dato = registro.get('nombre');//nombre del servicio
         var dato2 = registro.get('mercado');//nombre del mercado
         var dato1 = Ext.getCmp('combo').getValue();         
         Ext.StoreMgr.lookup('AtributosDS').load({
            params: { valor : dato,
                    valor1 : dato1,
                    valor2 : dato2
            }
         })
         Ext.StoreMgr.lookup('RestriccionDS').load({
            params: {valor : dato,
                   valor1 : dato1}
         })
      });   
      Ext.getCmp('btnCargarRestriccion').addListener('click', function(){
         Ext.MessageBox.alert('Estado', 'apretaste boton cargar restriccion');
        });   
      Ext.getCmp('btnNuevoAtributo').addListener('click', function(){
         Ext.MessageBox.alert('Estado', 'apretaste boton nuevo atributo ');
         var registro = grilla.getSelectionModel().getSelected();
         var u = new Ext.getCmp('atributo').store.recordType({
            idCanal : registro.get('idCanal'),
         mercado : registro.get('mercado'),
            idAtributo: '',
            idServicio : registro.get('idServicio')         
        });
         var grid = Ext.getCmp('atributo');
         grid.stopEditing();
         grid.store.insert(0, u);   
         grid.getView().refresh();
         grid.getSelectionModel().selectRow(0);
         grid.startEditing(0);   
      });
      Ext.getCmp('btnGuardarAtributo').addListener('click', function(){
         Ext.MessageBox.alert('Estado', 'apretaste boton guardar atributo');
      });
      Ext.ComponentMgr.get('btnGuardarServicio').addListener('click', function(){
         Ext.MessageBox.confirm('Confirmar', 'Está seguro que desea guardar los datos?', guardar);
      })
      
   },
   agregar_columnas: function() {
    var cm =  new Ext.grid.ColumnModel([
   
      {
        xtype: 'gridcolumn',
        dataIndex: 'nombre',
        header: 'Nombre',
        sortable: true,
        width: 80,
        editor: {
            xtype: 'combo',
            store: 'ServicioDS',
            listClass: 'x-combo-list-small',
            displayField: 'nombre',
            triggerAction: 'all'
        }
       },{
        xtype: 'gridcolumn',
        header: 'Mercado',
      sortable: true,
      width: 60,
      dataIndex: 'mercado',
      editor: {
         xtype: 'combo',
         store: 'MercadoDS',
         listClass: 'x-combo-list-small',
         displayField: 'mercado',
         triggerAction: 'all'
      }
      },
      {
      xtype: 'gridcolumn',
      header: 'Descripción',
      sortable: true,
      width: 120,
      dataIndex: 'descripcion',
      editor: {
         xtype: 'textfield'
      }
      },
      {
      xtype: 'checkcolumn',
      header: 'Activo',
      sortable: true,
      width: 50,
      dataIndex: 'activo',
      editor: {
         xtype: 'checkbox'
      }
      },
      {
      xtype: 'checkcolumn',
      header: 'Via OPSC',
      sortable: true,
      width: 60,
      dataIndex: 'viaOPSC',
      editor: {
         xtype: 'checkbox'
      }
      },
      {
      xtype: 'checkcolumn',
      header: 'MSISDN',
      sortable: true,
      width: 60,
      dataIndex: 'requiereMSISDN',
      editor: {
         xtype: 'checkbox'
      }
      },
      {
      xtype: 'checkcolumn',
      header: 'Codigo Bolsa',
      sortable: true,
      width: 80,
      dataIndex: 'requiereCodigoBolsa',
      editor: {
         xtype: 'checkbox'
      }
      },
      {
      xtype: 'checkcolumn',
      header: 'Plataforma',
      sortable: true,
      width: 80,
      dataIndex: 'requierePlataforma',
      editor: {
         xtype: 'checkbox'
      }
      },
      {
      xtype: 'checkcolumn',
      header: 'Manda SMS',
      sortable: true,
      width: 80,
      dataIndex: 'mandaSMS',
      editor: {
         xtype: 'checkbox'
      }                  
      }
    ]);
    this.grilla.reconfigure(this.grilla.getStore(), cm);
    this.grilla.selModel = new Ext.grid.CheckboxSelectionModel();
  },
   agregar_columnas2: function(){      
      var cm =  new Ext.grid.ColumnModel([
      sm,
      {
            xtype: 'gridcolumn',
            dataIndex: 'nombre',
            header: 'Nombre',
            sortable: true,
            width: 150,
            editor: {
            xtype: 'textfield'
            }
                },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'descripcion',
                        header: 'Descripción',
                        sortable: true,
                        width: 300,
                        editor: {
                            xtype: 'textfield'
                        }
                    },
                    {
                        xtype: 'gridcolumn',
                        header: 'Data Usuario',
                        sortable: true,
                        width: 130,
                        dataIndex: 'dataUsuario',
                        editor: {
                            xtype: 'textfield'
                        }
                    },
                    /*{
                        xtype: 'checkcolumn',
                        header: 'Estado',
                        sortable: true,
                        width: 50,
                        dataIndex: 'boolean',
                        editor: {
                            xtype: 'checkbox'
                        }
                    }*/
         ]);
         this.rest.reconfigure(this.rest.getStore(), cm);
         this.rest.selModel = new Ext.grid.CheckboxSelectionModel();   
   },
    agregar_columnas3: function(){      
      var cm =  new Ext.grid.ColumnModel([
      sm,
       /*{
                        xtype: 'checkcolumn',
                        header: 'Estado',
                        sortable: true,
                        width: 40,
                        editor: {
                            xtype: 'checkbox',
                            boxLabel: 'BoxLabel'
                        }
                    },*/
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'nombre',
                        header: 'Nombre',
                        sortable: true,
                        width: 100,
                        editor: {
                            xtype: 'textfield'
                        }
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'valor',
                        header: 'Valor',
                        sortable: true,
                        width: 100,                       
                        editor: {
                            xtype: 'textfield'
                        }
                    },
                    {
                        xtype: 'gridcolumn',
                        header: 'Descripción',
                        sortable: true,
                        width: 300,
                        dataIndex: 'descripcion',
                        editor: {
                            xtype: 'textfield'
                        }
                    }
           
      ]);
      this.att.reconfigure(this.att.getStore(), cm);
      this.att.selModel = new Ext.grid.CheckboxSelectionModel();   
      },
  });

function guardar(btn){
var primaryKey = 'idServicio';
var grilla = Ext.getCmp('grilla');
if(btn=='no'){
}
else{
   var gridMask = new Ext.LoadMask(grilla.getEl(), {msg: 'Guardando los cambios...'});
         gridMask.show();
         var records = grilla.getStore().getModifiedRecords();
         if(!records.length){
            gridMask.hide();
            Ext.MessageBox.alert('Estado', 'No se ha realizado ningun cambio ');
            return;
         }
         var data = [];
         Ext.each(records, function(r, i) {
           var o = r.getChanges();
           if(r.data.newRecord) {
               o.newRecord = true;
           }
               o[primaryKey] = r.get(primaryKey);
               data.push(o);
       }, this);
            var o = {
            url: 'php/guardar_servicioCanalMercado.php',
            method : 'POST',
            scope: this,
            timeout : 100000,
            params:{               
               data: Ext.encode(data)
            },
            callback : function(options, succes, response){
               gridMask.hide();
               var json = Ext.util.JSON.decode(response.responseText);
               if(json.success){
                  var store = grilla.getStore();
                  store.commitChanges();
                  store.reload();   
               }else{                  
                  Ext.MessageBox.show({
                  title: 'Error',
                  msg: json.mensaje,
                  buttons: Ext.MessageBox.OK,
                  icon: Ext.MessageBox.ERROR                  
               });
               }
               }
            };
               Ext.Ajax.request(o);         
         }   
}


this.grid is undefined, ese es el error q me tira, pero no se q esta mal.
casi al final del archivo estan las definiciones de las grillas

Que tal.

Es posible que solo selecciones un checkbox a la vez? es decir que no me permita activar dos checkbox, solo uno.

Buscando un poco en la API... singleSelect.