Как фильтровать магазин или данные в сенчане?

Question

У меня есть dataview, который отображает данные json из магазина.

 
    Ext.define('app.view.Abouttest', { 
     extend: 'Ext.Panel', 
     xtype: 'abouttest',
 

config: { 
      title: 'Player Info', 
      iconCls: 'user', 
      layout: 'vbox', 
      scrollable: true, 
      height: 800, 
      fullscreen: false, 

      items: [ 
       { 
        docked: 'top', 
        xtype: 'toolbar', 
        id: 'toolbarId', 
        title: 'Player Info' 
       }, 
       { 
        xtype: 'dataview', 
        store: 'Articles', 
        itemTpl: '<div>{content}</div>', 
        height: 400 
       } 
      ] 
     } 
}); 
</pre> 
 

это модель и магазин, который также используется в вложенном списке в другой точке зрения:
 

<pre> 
Ext.define('app.model.Article', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: [ 
     'id', 
     {name: 'parent', type: 'int'}, 
     {name: 'title', type: 'string'}, 
     {name: 'content', type: 'string'} 
     ] 
    } 
}); 

Ext.define('app.store.Articles', { 
    extend: 'Ext.data.Store', 

    requires: ['app.model.Article'], 

    config: { 
     model: 'app.model.Article', 
     autoLoad: true, 

     proxy: { 
      type: 'ajax', 
      url: 'resources/json/articles.json', 
      noCache: false, 
      enablePagingParams: false,   
      reader: { 
      type: "json", 
      rootProperty: 'pages' 
      } 
     } 
    } 
}); 
</pre> 
 

Какого код может быть добавлена ​​к представлению Abouttest для фильтрации данных хранилища для отображения одной записи на основе по его ID?
 

Вот окончательный вариант зрения
 

<pre> 
Ext.define('app.view.Abouttest', { 
    extend: 'Ext.Panel', 
    xtype: 'abouttest', 

config: { 
      title: 'Player Info', 
      iconCls: 'user', 
      layout: 'vbox', 
      scrollable: true, 
      height: 800, 
      fullscreen: false, 

      items: [ 
       { 
        docked: 'top', 
        xtype: 'toolbar', 
        id: 'toolbarId' 
       }, 
       { 
        xtype: 'dataview', 
        store: 'Articles', 
        itemTpl: '<div>{content}</div>', 
        height: 400 
       } 
      ] 
     }, 
     initialize: function(eOpts) { 

     var store = Ext.getStore('Articles'); 

     if (store.loading) { 
      store.on('load', function() { 

      store.filterBy(function(rec) { 
      return rec.get('id') === '246'; 
      });      

     }); 
     } 
     } 
}); 
</pee> 

Answer 1

Я бы фильтровать вид из контроллера, но если вы хотите, чтобы отфильтровать его с точки зрения вы можете сделать это путем добавления или один из этих методов с точки зрения и называя их:

filterById: function(recordId) { 
    var store = Ext.getStore('Articles'); 
    if (recordId) { 
     store.filterBy(function(rec) { 
      return rec.get('id') === recordId; 
     }); 
    } else { 
     store.clearFilter(); 
    } 
} 

ИЛИ (получение магазин от компонента вместо непосредственно)

filterById: function(recordId) { 
    var store = this.down('dataview').getStore(); 
    if (recordId) { 
     store.filterBy(function(rec) { 
      return rec.get('id') === recordId; 
     }); 
    } else { 
     store.clearFilter(); 
    } 
} 

Успехов, Роб

EDIT: добавлен полный пример ...

Хорошо, окончательная попытка;)

• Перейти к http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html
• открыть консоль JavaScript
• Затем вставьте следующий ниже фрагмент

То, что вы, вероятно, забыли, это создать экземпляр вашего магазина. Простое определение не создает его. Когда вы добавляете хранилище в контроллер (приложение также является контроллером), «сохраняет» конфигурацию, он автоматически создается. Кнопки либо очищают фильтр, либо добавляют простой фильтр по идентификатору. Обычно вы не должны делать этого в представлении, но этот фрагмент является просто доказательством концепции. Я предложил бы использовать соответствующую модель MVC в Сенча Touch,

I (на самом деле) надеюсь, что это ответ на ваш вопрос

Ext.define('app.model.Article', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: [ 
      'id', { 
       name: 'parent', 
       type: 'int' 
      }, { 
       name: 'title', 
       type: 'string' 
      }, { 
       name: 'content', 
       type: 'string' 
      } 
     ] 
    } 
}); 

Ext.define('app.store.Articles', { 
    extend: 'Ext.data.Store', 

    requires: ['app.model.Article'], 

    config: { 
     model: 'app.model.Article', 
     // autoLoad: true, 

     data: [{ 
      id: 1, 
      parent: null, 
      title: 'First article', 
      content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat impedit quaerat reiciendis eveniet soluta commodi.' 
     }, 
     { 
      id: 2, 
      parent: null, 
      title: 'Second article', 
      content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat impedit quaerat reiciendis eveniet soluta commodi.' 
     }, 
     { 
      id: 3, 
      parent: null, 
      title: 'Third article', 
      content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat impedit quaerat reiciendis eveniet soluta commodi.' 
     }] 
     // proxy: { 
     // type: 'ajax', 
     // url: 'resources/json/articles.json', 
     // noCache: false, 
     // enablePagingParams: false,   
     // reader: { 
     //  type: "json", 
     //  rootProperty: 'pages' 
     // } 
     // } 
    } 
}); 

Ext.create('app.store.Articles', { 
    storeId: 'Articles' 
}); 


Ext.define('app.view.Abouttest', { 
    extend: 'Ext.Panel', 
    xtype: 'abouttest', 

    config: { 
     title: 'Player Info', 
     iconCls: 'user', 
     layout: 'vbox', 
     scrollable: true, 
     height: 800, 
     fullscreen: false, 

     items: [{ 
      docked: 'top', 
      xtype: 'toolbar', 
      id: 'toolbarId', 
      title: 'Player Info', 
      items: [{ 
       xtype: 'spacer' 
      },{ 
       xtype: 'button', 
       text: 'clear filter', 
       handler: function(button) { 
        button.up('abouttest').down('dataview').getStore().clearFilter(); 
       } 
      },{ 
       xtype: 'button', 
       text: 'inline filter', 
       handler: function(button) { 
        button.up('abouttest').down('dataview').getStore().filterBy(function(rec) { 
         return rec.get('id') === 1; 
        }); 
       } 
      }, 
      { 
       xtype: 'button', 
       text: 'component filter', 
       handler: function(button) { 
        button.up('abouttest').filterFoo(); 
       } 
      }] 
     }, { 
      xtype: 'dataview', 
      store: 'Articles', 
      itemTpl: '<h1>{title}</h1><div>{content}</div>', 
      height: 400 
     }] 
    }, 

    filterFoo: function() { 
     this.down('dataview').getStore().filterBy(function(rec) { 
      return rec.get('id') === 1; 
     }); 
    } 
}); 

Ext.Viewport.removeAll(); 

Ext.Viewport.add({ 
    xtype: 'abouttest' 
}); 

Answer 2

Вы можете добавить фильтр в магазин

Ext.define('app.store.Articles', { 
    extend: 'Ext.data.Store', 

    requires: ['app.model.Article'], 

    config: { 
     model: 'app.model.Article', 
     autoLoad: true, 
     sorters: 'content', 
     filters: [{ 
        property: 'id', 
       }], 
     proxy: { 
      type: 'ajax', 
      url: 'resources/json/articles.json', 
      noCache: false, 
      enablePagingParams: false,   
      reader: { 
      type: "json", 
      rootProperty: 'pages' 
      } 
     } 
    } 
});