ExtJS XTemplate фильтр пустую строку

Question

Я использую следующий XTemplate, чтобы отфильтровать элементы по категории (см вид/панель, в которой он «размещенный» ниже):

itemTpl: new Ext.XTemplate(
    '<tpl for=".">', 
     '<tpl if="category === \'vegetable\'">', 
      '<a href="" target="">{str}</a>', 
     '</tpl>', 
    '</tpl>'), 

и фильтрует, как и ожидалось (хорошо , по крайней мере частично).

Я следующий магазин:

Ext.define("Produce.store.List", { 
    extend: 'Ext.data.Store', 
    alias: 'store.List', 
    config: { 
     model: 'Produce.model.Food', 
     sorters: 'category', 
     grouper: function(record) { 
      return record.get('category')[0]; 
     }, 
     data: [ 
     { category: 'fruit', str: 'tomato'}, 
     { category: 'fruit', str: 'green bean'}, 
     { category: 'vegetable', str: 'celery'}, 
     { category: 'vegetable', str: 'sprouts'}, 
     { category: 'fruit', str: 'squash'}, 
     { category: 'fruit', str: 'snap peas'}, 
     { category: 'vegetable', str: 'rhubarb'}, 
     { category: 'vegetable', str: 'cabbage'} 

     ] 
    } 
}); 

XTemplate отображается в следующем виде/панели:

Ext.define('Produce.view.Vegetable', { 
    extend: 'Ext.tab.Panel', 
    requires: ['Produce.model.Food'], 
    config: { 
     tabBar: { 
      docked: 'top', 
      ui: 'neutral', 
      layout: { 
       pack: 'center' 
      } 
     }, 
     items: [{ 
      title: 'Produce', 
      layout: Ext.os.deviceType == 'Phone' ? 'fit' : { 
       type: 'vbox', 
       align: 'center', 
       pack: 'center' 
      }, 
      cls: 'demo-list', 
      items: [{ 
       width: Ext.os.deviceType == 'Phone' ? null : 300, 
       height: Ext.os.deviceType == 'Phone' ? null : 500, 
       xtype: 'list', 
       store: 'List', 
     itemTpl: new Ext.XTemplate(
     '<tpl for=".">', 
      '<tpl if="category === \'vegetable\'">', 
       '<a href="" target="">{str}</a>', 
      '</tpl>', 
     '</tpl>'), 
       variableHeights: false 
      }] 
    } 
}); 

Когда я запускаю это только овощи в магазине отображаются на панели - что здорово - но также отображаются пустые строки, где элементы фруктов были отфильтрованы в визуализированном списке, что не очень удобно. (Точно так же в моем «фруктовом» представлении фрукты отображаются по желанию, но там, где есть овощи, появляются ряды заготовок).

Как я могу избавиться от этих пустых строк (это проблема, так как фрукты и овощи в моем списке предназначены для того, чтобы приложение работало, и представляют собой заполнение для представления гораздо большего числа записей, которые будут классифицированы для моего фактического приложения). Я пробовал использовать Ext.IsEmpty и фильтрацию по нулевому значению, но ни один из них не сделал этого.

Answer 1

View работает хорошо: он показывает строку для каждой записи. Вы должны попытаться добавить в список фильтрованный магазин.

Посмотрите на Ext.util.Filter в Sencha Touch documentation.

Это решит вашу проблему!