tablas - recorrer tabla javascript

¿Cómo se definen las diferentes tiendas para cada editor de combobox de celda en una grilla?

Question

Necesito implementar una grilla, usando extjs 4.2.1. Esta grilla tendrá el complemento cellEditing y en las columnas tendré muchos campos de texto y comboboxes.

Mi problema es para un caso particular. Tengo una columna para países (por ejemplo). El editor de columnas será un combobox con una tienda con países. El siguiente cuadro combinado será ciudades del país seleccionado en el mismo índice de fila. Cuando defino esa tienda, esta columna permanecerá en la misma tienda y no sé esto.

En la fila 0, selecciono USA y tengo que cargar ciudades de EE. UU. En el siguiente combo. En la fila 1, selecciono el país del Reino Unido y tengo que cargar las ciudades del Reino Unido, pero si vuelvo a la fila 0 y selecciono las ciudades de EE. UU., Quiero ver las ciudades de EE. UU. Y no las del Reino Unido.

¿Cómo puedo definir tiendas diferentes para cada celda combinada?

Answer 1

Debe definir su tienda una vez como

Ext.define(''MyApp.city.Store'',{
extend:''Ext.data.Store'',
//all properties which you need
});

y deberías crear una instancia de ello para una celda de la ciudad como

cityStore = Ext.create(''MyApp.city.Store'');

Answer 2

Ext.grid.plugin.CellEditing configurar la cuadrícula con el complemento Ext.grid.plugin.CellEditing que permite la edición de la celda de cuadrícula. Como editor de columna de la ciudad, usará Ext.form.field.ComboBox . Cuando el usuario ingresa al modo de edición en la celda de la columna de la ciudad, filtra la tienda de combobox del editor. Información sobre el país seleccionado que necesita para filtrar el cuadro combinado de ciudad que obtiene al editar el registro de fila.

1. En primer lugar, debe configurar el editor de columna de ciudad con la instancia Ext.form.field.ComboBox que se usará para la edición:

   var comboCities = Ext.create(''Ext.form.field.ComboBox'', {
   store: storeCities,
   queryMode: ''local'',
   displayField: ''name'',
   valueField: ''name''
   });

   Y en la definición de columnas de cuadrícula:

   columns: [
   ...
   {
   header: ''City'',
   dataIndex: ''city'',
   editor: comboCities,
   },
   ...
   ]

2. En segundo lugar, debe agregar al Ext.grid.plugin.CellEditing configuración del complemento beforeedit para el evento beforeedit . En este oyente puede determinar qué columna comenzar a editar. Si la columna de edición es la columna de la ciudad, puede obtenerla editando la información del registro de fila sobre el país seleccionado y comboCities tienda de comboCities . Entonces, en la tienda filtrada solo habrá ciudades para el país seleccionado.

   Por ejemplo, la configuración del complemento en la configuración de la cuadrícula debe ser:

   {
   ...
   plugins: [
   Ext.create(''Ext.grid.plugin.CellEditing'', {
   clicksToEdit: 1,
   listeners: {
   beforeedit: function(editor, e) {
   // detrmine which column start editing
   if (e.colIdx == 2) {
   // get information about selected country from editin row record
   var selectedCountry = e.record.get(''country'');
   // filter store with cities
   storeCities.clearFilter();
   storeCities.filter(''country'', selectedCountry);
   }
   }
   }
   })
   ],
   ...
   }

Mira el violín en vivo con el ejemplo de configuración: https://fiddle.sencha.com/#fiddle/2bj