에 extjs 내가 (이 아래의 "수용"하는 뷰/패널 참조) 카테고리별로 항목을 필터링하려면 다음 Xtemplate을 사용하고 빈 행

Question

를 필터링 xtemplate , 적어도 부분적으로).

나는 다음 저장소에 저장 한 :

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를 사용하고 null로 필터링 해 보았습니다. 그러나이 중 어느 것도 트릭을 수행하지 못했습니다.

Answer 1

보기가 잘 작동합니다. 각 레코드에 대한 행이 표시됩니다. 필터링 된 저장소를 목록에 추가해야합니다.

Sencha Touch documentation에서 Ext.util.Filter을 살펴보십시오.

이렇게하면 문제가 해결됩니다.