How to filter a store or dataview in sencha touch?

0
votes

I've got a dataview that displays json data from a store. 

    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>




this is the model and the store which is also used in a nested list in another view:



<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>




What code can be added to the Abouttest view to filter the store data to display one record based on its ID?



Here is the final version of the view


<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>
2
extjssencha-touch
Filtering can be accomplished by adding a initialize function to the the filtering when the store loads. – AlanP

2 Answers

0
votes

I would filter the view from a controller, but when you want to filter it from the view you can do so by adding either one of these methods to the view and calling them:

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

OR (getting the store from the component instead of directly)

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

Good luck, Rob

EDIT: added complete example...

Ok, final try ;)

What you probably forgot is to instantiate your store. Just defining it does not instantiate it. When you add a store to a controller's (the app is also a controller) 'stores' config it gets instantiated automatically. The buttons either clear the filter or add a simple filter on ID. You shouldn't normally do this in the view though, this snippet is just a proof of concept. I would suggest using the proper MVC model in Sencha Touch

I (really) hope this answers your question

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'
});
0
votes

You can add filter to your store 

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'
          }
        }
    }
});