У меня есть представление данных, которое отображает данные 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>

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>
0
AlanP 3 Янв 2014 в 06:10

2 ответа

Лучший ответ

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

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

Удачи, Роб

РЕДАКТИРОВАТЬ: добавлен полный пример ...

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

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

Я (правда) надеюсь, что это ответит на ваш вопрос

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
Rob Boerman 6 Янв 2014 в 23:06

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

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'
          }
        }
    }
});
0
Dibish 3 Янв 2014 в 13:45