2011-05-23 27 views
5

Tenemos un panel de cuadrícula ExtJS que ha crecido hasta incluir demasiadas columnas (imo), por lo que estoy buscando incluir algunos datos en "sub-filas" de la fila principal. Me gusta:ExtJS Grid Panel - ¿Múltiples "filas" por fila?

Data1 | Data2 | Data3 | Data4 | Datos5
    Algunos datos adicionales que abarcan
Datos1 | Data2 | Data3 | Data4 | Dato5
    algunos datos adicionales que se extiende por

Soy consciente de la expander plugin, pero no necesitaría ampliar la funcionalidad/colapso y siempre necesitará los sub-filas abierta.

¿Alguna idea o idea?

Gracias de antemano.

Respuesta

16

Si está usando ExtJS-4,

// ... 
var rowBodyFeature = Ext.create('Ext.grid.feature.RowBody', { 
    getAdditionalData: function(data, rowIndex, record, orig) { 
     var headerCt = this.view.headerCt, 
     colspan = headerCt.getColumnCount(); 
     return { 
      rowBody: "HELLO WORLD!", // do something with record 
      rowBodyCls: this.rowBodyCls, 
      rowBodyColspan: colspan 
     }; 
    } 
}); 

Ext.create('Ext.grid.Panel', { 
    // ... 
    features: [rowBodyFeature] 
    // ... 
}); 

Si se utiliza ExtJS-3, probar:

new Ext.grid.GridPanel({ 
    //... 
    viewConfig: { 
     enableRowBody: true, 
     getRowClass: function(record, rowIndex, p, store) { 
      p.body = 'HELLOW WORLD: ' + record.get('attribute'); 
      return 'x-grid3-row-expanded'; 
     } 
    } 
+0

Puede encontrar más documentación, incluyendo ejemplos, aquí [(4.2.1 ExtJS)] (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.feature.RowBody) –

0

Lo que necesita hacer es implementar una cuadrícula anidada utilizando el complemento de expansión. En el evento de clic o expandir, puede usar la ID de su fila como clave para cargar las sub-filas.

Cuestiones relacionadas