Saludos
Estoy realizando una web app con Sencha Touch 2, pueden verla en
Webapp, el error lo voy a describir con un ejemplo:
1. Usar el filtro y escribir la palabra 'Redds', nos arroja 1 solo item
2. Escribir cualquier número en el textfield
3. Quitar el filtro usando el icono a lado derecho o eliminando la palabra
Si todo se hizo correctamente notarán que el número escrito anteriormente no está en el item 'Redds', si no en el primer item, que en este caso es 'Poker'.
Alguno tiene alguna idea del porqué sucede esto?
Estos son los archivos que uso para crear la lista:
List.js(Vista que contiene el DataView)
Código PHP:
Ext.define('DEMO.view.product.List', {
extend: 'Ext.DataView',
xtype: 'product-list',
requires: ['DEMO.view.product.ListItem'],
config: {
items:[
{
xtype: 'toolbar',
docked: 'top',
items: [
{xtype: 'spacer'},
{
xtype: 'searchfield',
placeHolder: 'Buscar...'
},
{xtype: 'spacer'}
]
}
],
xtype: 'dataview',
useComponents: true,
cls: 'product-list',
store: 'Product',
defaultType: 'product-list-item'
}
});
ListItem.js(Componente[DataItem] para cada item de la lista)
Código PHP:
Ext.define('DEMO.view.product.ListItem', {
extend: 'Ext.dataview.component.DataItem',
requires: ['DEMO.view.product.QuantityComponent'],
xtype: 'product-list-item',
config: {
cls: 'product-list-item',
dataMap: {
getImage: {
setSrc: 'img'
},
getName: {
setHtml: 'name'
},
getQuantity: {
setQuantityComponent: ''
}
},
image: {
docked: 'left'
},
name: {
cls: 'x-name'
},
quantity: {},
layout: {
type: 'vbox'
}
},
applyImage: function(config){
return Ext.factory(config, Ext.Img, this.getImage());
},
updateImage: function(newImage, oldImage) {
if (newImage) {
this.add(newImage);
}
if (oldImage) {
this.remove(oldImage);
}
},
applyName: function(config){
return Ext.factory(config, Ext.Component, this.getName());
},
updateName: function(newName, oldName) {
if (newName) {
this.add(newName);
}
if (oldName) {
this.remove(oldName);
}
},
applyQuantity: function(config) {
return Ext.factory(config, DEMO.view.product.QuantityComponent, this.getQuantity());
},
updateQuantity: function(newQuantity) {
if (newQuantity) {
this.add(newQuantity);
}
}
});
QuantityComponent.js(Componente aparte, para el textfield de cada item)
Código PHP:
Ext.define('DEMO.view.product.QuantityComponent', {
extend: 'Ext.Panel',
config: {
quantityComponent: '',
cls: 'quantity-component'
},
updateQuantityComponent: function() {
this.add([
{
xtype: 'numberfield',
label: 'Cantidad',
maxLength: 5,
stepValue: 1,
placeHolder: '0',
clearIcon: false,
labelWidth: 85,
labelCls: 'quantity-component-label-qty'
}
]);
}
});
Global.js(Controlador para los eventos de búsqueda)
Código PHP:
Ext.define('DEMO.controller.Global', {
extend: 'Ext.app.Controller',
config: {
refs: {
Searcher: 'searchfield'
},
control: {
Searcher: {
clearicontap: 'onClearSearcherList',
keyup: 'onSearchInList'
}
}
},
onSearchInList: function(searcher){
var p = Ext.apply({}, {}, {
searcher: searcher,
store: searcher.getParent().getParent().getStore()
});
try{
if(Validate.isEmpty(p.searcher, p.store) || !Validate.isStore(p.store))
return;
var store = Ext.getStore(p.store),
value = p.searcher.getValue();
store.clearFilter();
if(value){
var filters = [];
filters.push({
property: 'name',
value : value
});
store.clearFilter();
store.filter(filters);
store.load();
}
}
catch(Exc){
Tools.fireExc(Exc);
}
},
onClearSearcherList: function(searcher){
var p = Ext.apply({}, {}, {
store: searcher.getParent().getParent().getStore()
});
try{
if(Validate.isStore(p.store)){
Ext.getStore(p.store).clearFilter();
}
}
catch(Exc){
Tools.fireExc(Exc);
}
}
});
De antemano gracias.