En una aplicación Ext JS 4 MVC, ¿cuál debería ser el responsable de cargar las tiendas?

Question

Considere una aplicación compleja donde tiene una lógica de filtrado personalizada y diferentes modos de carga; demora la carga cuando está oculta, no carga cuando está oculta, pero carga cuando se muestra y vuelve a cargar cuando se modifican los filtros personalizados, etc.

¿Qué parte de la aplicación mvc debería cargar y cómo conectarla?

Answer 1

Nunca encontré una respuesta definitiva sobre esto de Sencha cuando comencé con MVC, pero puedo decirles lo que he estado haciendo para algunas aplicaciones con éxito.

Creo y cargo mis tiendas según cómo se utilizan. Eso parece haber dividido en tres categorías diferentes para mí:

1. tiendas que se aplican a toda la aplicación

2. tiendas que se aplican a todas las instancias de una vista

3. tiendas que están vinculados a una única vista ejemplo

1. Tiendas th al aplicarse a toda la aplicación

Por lo general tienen un controlador "principal" que maneja el marco de mi aplicación, cosas como la navegación mediante el teclado, el menú principal, etc.

tiendas que caen en la primera categoría por encima de vaya en esta matriz stores del controlador "Principal". Si estas tiendas no dependen de otra tienda, simplemente las hago autoLoad: true y termino con ellas. Pero en los casos en que dependen de otros datos de tiendas, entonces agrego un agente de escucha al almacén principal para cargar el almacén dependiente dentro del evento del padre onLoad.

Un ejemplo de algunas de las tiendas que encuentro en esta primera categoría son tiendas de referencia que utilizo en cuadros combinados en toda la aplicación, generalmente en diferentes tipos de vistas. Estos generalmente se configuran con autoLoad: true y luego nunca los vuelvo a cargar para la sesión de ese usuario.Cada vez que necesito un cuadro combinado que utiliza la tienda de referencia, puedo configurarlo de la siguiente manera:

{ 
    xtype: 'combobox', 
    allowBlank: false, 
    forceSelection: true, 
    store: Ext.getStore('SomeReferenceStore'), 
    queryMode: 'local', // this makes sure the store doesn't reload 
    valueField: 'id', 
    displayField: 'name' 
} 

Para dar un ejemplo de dos tiendas que ambos caen en la primera categoría, uno de los cuales depende de otro:

En una de mis aplicaciones que tienen un número dinámico de permisos de usuario, cuando un usuario entra en la aplicación que necesitan a buscar a los diferentes permisos y modificar el modelo User para incluir un campo booleano para cada uno de estos diferentes permisos:

Ext.define('MyApp.controller.Main', { 
    extend: 'Ext.app.Controller', 

    models: [ 
     'User', 
     'Reference', 
     // etc... 
    ], 

    stores: [ 
     'CurrentUser', 
     'PermissionRef', // this is "autoLoad: true" 
     // etc... 
    ], 

    init: function() { 
     var me = this;  

     // update the user model and load the user 
     me.getPermissionRefStore().on('load', function(store, records) { 
      var model = me.getUserModel(), 
       fields = model.prototype.fields.getRange(); 

      // append the permissions onto the User model fields 
      Ext.each(records, function(permission) { 
       fields.push({ 
        name: permission.get('name'), 
        type: 'bool', 
       }); 
      }); 

      // update the user model with the permission fields 
      model.setFields(fields); 

      // load the current user 
      me.getCurrentUserStore().load(); 

      // other stuff... 

     }); 

     // other stuff... 

    } 

}); 

Con esto, cada vez que necesito una referencia para el usuario y los permisos que éste tiene a su disposición simplemente me llamo:

var user = Ext.getStore('CurrentUser').first(); 

veces un punto de vista también será dependiente de una tienda que se está cargando. Por ejemplo mis elementos del menú principal se determinan mediante una tabla de base de datos, en ese caso me gustaría incluir un onLoad oyente la misma manera (dentro de la función del controlador init):

// create the menu once we know what menu items are available 
me.getMenuStore().on('load', function(store) { 
    me.getViewport().add(Ext.widget('mainpanel'));    
}); 

El MyApp.store.Menu sí se configuraría con autoLoad: true.

2. Las tiendas que se aplican a todas las instancias de una vista

puedo crear y cargar estos al igual que la primera categoría sólo me los pusieron en la vista específicastores gama de controlador en lugar de la "principal" Controlador stores array.

Entonces es el mismo concepto básico, algunos son autoLoad: true algunos no lo son si dependen de los datos de otra tienda.

Para los que no son autoLoad: true se cargan en algún lugar dentro de la función init del controlador o como resultado de un evento que se desencadena.

3. Las tiendas que están atados a un solo punto de vista ejemplo

Aquí puedo ir contra la corriente MVC, pero realmente no hay mejor lugar para una tienda que se aplica a una sola instancia de una ver luego dentro de la vista en sí.

En la mayoría de los casos ni siquiera poner estas tiendas en serie del controlador de vista stores. Simplemente los creo y los cargo dentro de la función initComponent de la vista. Como resultado de esto, cuando se destruye la vista, ya no hay más referencia a la tienda, por lo que la tienda también se destruirá. Eso ayuda a adelgazar los recursos para las tiendas que podrían crearse muchas veces.

Por ejemplo, supongamos que tiene un MyApp.view.UnicornWeightGrid que extiende un gridpanel y muestra el peso progresivo de un unicornio a lo largo del tiempo. Un usuario puede abrir una UnicornWeightGrid para todos los unicornios en el reino para propósitos de comparación y de referencia cruzada. Habrá tantas instancias diferentes de la UnicornWeightStore ya que son instancias de la UnicornWeightGrid.

La vista podría definirse así:

Ext.define('MyApp.view.UnicornWeightGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.unicornweight', 
    requires: [ 
     'MyApp.model.UnicornWeight' 
    ], 
    closable: true,  
    initComponent: function() { 
     var me = this; 

     me.store = Ext.create('Ext.data.Store', { 
      model: 'MyApp.model.UnicornWeight', 
      proxy: { 
       type: 'ajax', 
       url: 'unicorns/weight', 
       extraParams: { 
        name: me.unicornName 
       } 
      } 
     }); 

     me.store.load(); 
    }); 
}); 

Entonces cada vez que queremos conseguir un diferente UnicornWeightGrid simplemente podemos llamar:

var grid = Ext.widget('unicornweight', { 
    unicornName: someUnicornNameVariable 
}); 

myTabPanel.add(grid); 

Cualquier onLoad oyentes que necesito en tiendas que se definen en una vista, también adjunto dentro de la vista. Entonces realmente no necesito una referencia en ningún otro lado.

Dicho todo esto, de ninguna manera es la única manera de configurar sus tiendas.

He encontrado que esta es la forma más manejable de manejar tiendas consistentemente al crear algunas aplicaciones ExtJS "MVC" diferentes, pero a veces lo hago de manera diferente también en casos "especiales".

Debe tener en cuenta que "MVC" es un patrón de diseño bastante flexible, se define e implementa de manera diferente en casi todos los marcos que he utilizado. Entonces puedes hacer lo que sea que funcione mejor para ti.

Answer 2

Debe poner la lógica para cargar la tienda dentro del controlador para la cuadrícula que mostrará esta tienda. Los puse en el controlador del evento afterrender.