extjs - examples - sencha touch download

Mostrando un subconjunto limitado de(o un registro individual de) una tienda en Ext.DataView

Question

En Sencha Touch, a menudo necesito tener un panel Ext.DataView que contenga un pequeño subconjunto de registros o incluso un solo registro de la colección en la tienda.

Por ejemplo, podría tener un Model for Car que tenga miles de registros de automóviles en su tienda app.stores.cars , pero quiero mostrar un subconjunto más pequeño de estos elementos (por ejemplo, solo autos deportivos ) en mi lista de datos DataSportsCars mientras también se muestra el más grande juego completo de autos en mi lista de datos DataView .

Mi primer pensamiento fue usar múltiples tiendas. Así que tendría una tienda principal para la gran lista de todos los autos, y una segunda tienda con un filtro para mi subconjunto de autos deportivos. Sin embargo, ahora la actualización de un modelo de una tienda no actualiza automáticamente el registro en la otra tienda, por lo que se frustra el uso de DataView ya que los cambios no se actualizan en todas partes en la página al actualizar los registros.

Mi segundo intento fue sobrescribir el método collectData en DataView, que sonaba exactamente como lo que collectData :

var card = new Ext.DataView({
store: app.stores.cars,
collectData: function(records, startIndex){
// map over the records and collect just the ones we want
var r = [];
for( var i=0; i<records.length; i++ )
if( records[i].data.is_sports_car )
r.push( this.prepareData(records[i].data, 0, records[i]) );
return r;
},
tpl: new Ext.XTemplate([
''<tpl for=".">'',
''<div class="car">{name}</div>'',
''</tpl>''
]),
itemSelector: ''div.car''
});

Un ejemplo completo se puede encontrar aquí .

Pero, aunque está documentado que puedo / debo anular este método, a Sencha Touch realmente no le gusta cuando te metes con la longitud de la matriz devuelta por collectData, así que esto fue un callejón sin salida.

¿Cómo lidian otros con mostrar / actualizar múltiples colecciones de los mismos registros?

ACTUALIZACIÓN Hubo un error que impedía que collectData funcionara como se esperaba. El error ya se solucionó en Sencha Touch 1.1.0.

Answer 1

Como está escrito en el comentario:

He usado tu democode con la última versión de Sencha Touch y he abierto todo con Google Chrome. En la versión actual, el error es fijo. (Versión 1.1)

Answer 2

Uso las funciones de "filtro" en la Tienda. No modifica el DataView (utilizo una lista).

Aquí hay un fragmento en el que agruparé programas con una categoría que se ajusta a una expresión regular. (Tengo programas con un campo de categoría)

MyApp.stores.Programs.filter(function(object) {
var regex = new RegExp(filterValue, ''i'');
return object.data.category.search(regex) >= 0; // found match
});

Puedes borrar el filtro así:

MyApp.stores.Programs.clearFilter(false);

Esto actualizará DataView (uso una lista) inmediatamente (es increíble).

De modo que dentro de su filtro podría filtrar los autos deportivos, o los autos de cierto precio, o lo que sea.

Espero que ayude...

Answer 3

podría usar filtros para obtener un subconjunto de los datos asociados a esa tienda.

yourstore.filter(''name'', ''Joseph'');

También debe definir ''raíz'' como una función para que siempre devuelva una matriz. Los lectores en sencha tocan asume que siempre obtendrás una matriz como respuesta, pero no es verdad si tienes una JSON con una sola entrada, prueba algo como esto:

root: function(data) {
if (data) {
if (data instanceof Array) {
return data;
} else {
return [data];
}
} 

El código completo para la tienda podría ser así:

YourApp.ViewName = new Ext.data.Store({
model: ''YourApp.models.something'',
proxy: {
type: ''scripttag'',
url: ''http://somerandomurl/service/json'',
extraParams: {
param1: ''hello''
},
reader: {
type: ''json'',
root: function(data) {
if (data) {
if (data instanceof Array) {
return data;
} else {
return [data];
}
}
}
}
},
});

Espero eso ayude.

Answer 4

Para mi comprensión de Sencha Touch, este no es el mejor enfoque. Si todavía puede ser bueno para el rendimiento, debe usar una segunda tienda "esclava", con datos en línea (http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Store) que puede completar automáticamente desde la tienda principal con el subconjunto de información que desea mostrar cuando ocurre un evento en la tienda principal, es decir, evento de carga.

Si quieres tratar con una sola tienda, una solución que puedo imaginar es usar una xtemplate con la etiqueta "tpl if" en la vista de datos en la que quieras mostrar solo cierta información http://docs.sencha.com/touch/1- 1 / #! / Api / Ext . para escribir registros vacíos Tal vez, también mejor solución, podría ser utilizar una función de filtro personalizado dentro de xtemplate, para poner un CSS con visibilidad oculta en los elementos que no desea ver.