2011-05-04 17 views
25

¿Es posible cambiar la tienda de la grilla en ExtJS 4?ExtJS 4 Cambiar la tienda de la grilla sobre la marcha

Por ejemplo, he dos modelos:

User = Ext.define('User',{ 
    extend: 'Ext.data.Model', 
    [...], 
    hasMany: 'Product' 
}); 

Product = Ext.define('Product',{ 
    extend: 'Ext.data.Model', 
    [...] 
}); 

y dos rejillas. La primera rejilla está vinculada con la tienda que utiliza User modelo y carga datos JSON anidados de back-end, como

{ 
    users: [{ 
    id: 1, 
    products: [ 
     {id: 1}, 
     {id: 2} 
    ] 
    }, { 
    id: 2, 
    products: [ 
     {id: 3}, 
     {id: 4}, 
     {id: 5} 
    ] 
    }] 
} 

Todo lo que quiero conseguir es cuando se hace clic en la fila de la primera rejilla, la segunda rejilla debe mostrar productos del usuario, sin conexión al servidor. Todo lo que sé es que user.products(); devuelve un objeto Ext.data.Store. Así que la idea es cambiar de tienda de segunda rejilla a user.products();, pero no hay tal método grid.setStore() :-)

Gracias de antemano

Respuesta

35

creo que una mejor solución sería:

 grid1.on('itemclick', function(view, record) { 
     grid2.reconfigure(record.products()); 
    ); 
+1

'reconfigure' hace mucho más que volver a vincular una tienda. Si uno tiene dos tiendas de estructura idéntica pero simplemente quiere cambiar la tienda de respaldo por una grilla, necesitan obtener 'Ext.grid.View' de la tienda llamando a' getView' y llamar al método 'bindStore' con la nueva tienda. –

+2

@jMerliN Recomendaría eso porque va en contra de la API y es posible que vea algunos errores extraños. Puedo ver un problema potencial que surge cuando 'grid.getStore()! = Grid.getView(). Store' No he ejecutado el caso de uso, pero' grid.store.load() 'no desencadenaría una actualización de la vista. 'reconfigure' está diseñado para permitir que la grilla cambie las tiendas y no hay demasiados gastos generales. – pllee

19

Usted está buscando en las tiendas por el camino equivocado. Una tienda se adjunta a la cuadrícula para siempre, por lo tanto, no hay grid.setStore(). NO cambias una tienda por una grilla, sino que cambias los DATOS en la tienda para esa grilla.

Ahora, solución a su problema: Tiene razón con la parte que ya tiene una instancia de almacenamiento con sus datos. es decir; user.products(). Aún así, tendrás que crear una tienda para tu grilla. Sin embargo, esta tienda no tendrá ningún dato. Ahora, cuando necesita mostrar información de productos, necesita cargar la tienda de la grilla con datos. Se puede utilizar:

  • carga()
  • loadData()
  • loadRecord()

para cargar datos en su tienda. En su caso, usted puede hacer lo siguiente:

myStore = user.products(); 
grid.getStore().loadRecords(myStore.getRange(0,myStore.getCount()),{addRecords: false}); 
+0

Muchas gracias, eso es exactamente lo que necesito – sunsay

+5

Cambiar las tiendas en las cuadrículas es una ocurrencia común. grid.reconfigure se puede usar para cambiar el modelo de tienda o columna. También addRecords se establece por defecto en "falso". – pllee

3

respuesta de Abdel Olakara me ayudó cuando lo necesitaba para actualizar los datos en algo que didn' t tiene reconfigure (clase personalizada que hereda de Ext.form.FieldSet).

Pero no necesita especificar addRecords o el rango para getRange, porque los valores predeterminados nos tienen cubiertos en este caso.

Esto significa que puede hacer:

myStore = user.products(); 
grid.getStore().loadRecords(myStore.getRange()); 
9

Si desea adjuntar una tienda a una parrilla después de la red ha sido creado, puede utilizar el método bindStore().

var store = user.products(); 
grid.getView().bindStore(store); 

Alternativamente, también puede utilizar la carga(), loadData() métodos, loadRecords(), y copia los datos en su tienda.

+0

Gracias @sasha, 'bindStore()' funciona perfectamente. –

Cuestiones relacionadas