Extjs 如何在sencha touch中过滤存储或数据视图？_Extjs_Sencha Touch

Extjs 如何在sencha touch中过滤存储或数据视图？
extjs sencha-touch
Extjs 如何在sencha touch中过滤存储或数据视图？,extjs,sencha-touch,Extjs,Sencha Touch,我有一个dataview，它显示存储区中的json数据。 Ext.define('app.view.Abouttest', { extend: 'Ext.Panel', xtype: 'abouttest', config: { title: 'Player Info', iconCls: 'user', layout: 'vbox', scrollable:
我有一个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>

Ext.define（'app.view.aboutset'{
扩展：“Ext.Panel”，
xtype:“Aboutettest”
<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>

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

config:{
标题：“玩家信息”，
iconCls:'用户'，
布局：“vbox”，
可滚动：对，
身高：800，
全屏：假，
项目：[
{
停靠：“顶部”，
xtype:'工具栏'，
id:'工具栏id'，
标题：“玩家信息”
},
{
xtype:“数据视图”，
商店：'物品'，
itemTpl:“{content}”，
身高：400
}
]
}
});

这是另一个视图中嵌套列表中使用的模型和存储：

Ext.define（'app.model.Article'{
扩展：“Ext.data.Model”，
配置：{
字段：[
“id”，
{name:'parent'，type:'int'}，
{name:'title'，type:'string'}，
{name:'content'，type:'string'}
]
}
});
Ext.define（'app.store.Articles'{
扩展：“Ext.data.Store”，
需要：['app.model.Article']，
配置：{
模型：“app.model.Article”，
自动加载：对，
代理：{
键入：“ajax”，
url:'resources/json/articles.json'，
诺卡奇：错，
enablePagingParams:false，
读者：{
键入：“json”，
rootProperty:“页面”
}
}
}
});

可以向Abouttest视图添加哪些代码来过滤存储数据，以便根据其ID显示一条记录
这是视图的最终版本

Ext.define（'app.view.aboutset'{
扩展：“Ext.Panel”，
xtype:“Aboutettest”，
配置：{
标题：“玩家信息”，
iconCls:'用户'，
布局：“vbox”，
可滚动：对，
身高：800，
全屏：假，
项目：[
{
停靠：“顶部”，
xtype:'工具栏'，
id:'工具栏id'
},
{
xtype:“数据视图”，
商店：'物品'，
itemTpl:“{content}”，
身高：400
}
]
},
初始化：函数（eOpts）{
var store=Ext.getStore（'Articles'）；
if（存储加载）{
store.on（'load'，function（）{
存储过滤器（功能（rec）{
返回rec.get（'id'）='246'；
});                    
}); 
}
}
});
我会从控制器中筛选视图，但当您想从视图中筛选视图时，可以通过向视图中添加以下方法之一并调用它们来实现：
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'
          }
        }
    }
});

或者（从组件而不是直接获取存储）
祝你好运，
抢劫
编辑：添加了完整的示例
好的，最后一次尝试；）

去
打开javascript控制台
将下面的代码片段粘贴到其中

你可能忘记了实例化你的商店。仅仅定义它并不能实例化它。当您将存储添加到控制器（应用程序也是控制器）的“存储”配置时，它会自动实例化。这些按钮要么清除过滤器，要么在ID上添加一个简单的过滤器。不过，您通常不应该在视图中这样做，这段代码只是一个概念证明。我建议在SenchaTouch中使用适当的MVC模型
我（真的）希望这能回答你的问题
Ext.define（'app.model.Article'{
扩展：“Ext.data.Model”，
配置：{
字段：[
“id”{
名称：'父'，
键入：“int”
}, {
姓名：'头衔'，
键入：“字符串”
}, {
名称：'内容'，
键入：“字符串”
}
]
}
});
Ext.define（'app.store.Articles'{
扩展：“Ext.data.Store”，
需要：['app.model.Article']，
配置：{
模型：“app.model.Article”，
//自动加载：对，
数据：[{
id:1，
父项：null，
标题:"第一篇文章",，
内容：“知识产权”是一种权利，是一种精英的权利。它是一种平等的解决方案
},
{
id:2，
父项：null，
标题:"第二条",，
内容：“知识产权”是一种权利，是一种精英的权利。它是一种平等的解决方案
},
{
id:3，
父项：null，
标题:"第三条",，
内容：“知识产权”是一种权利，是一种精英的权利。它是一种平等的解决方案
}]
//代理：{
//键入：“ajax”，
//url:'resources/json/articles.json'，
//诺卡奇：错，
//enablePagingParams:false，
//读者：{
//键入：“json”，
//rootProperty:“页面”
//   }
// }
}
});
Ext.create（'app.store.Articles'{
storeId:“文章”
});
Ext.define（'app.view.aboutset'{
扩展：“Ext.Panel”，
xtype:“Aboutettest”，
配置：{
标题：“玩家信息”，
iconCls:'用户'，
布局：“vbox”，
可滚动：对，
身高：800，
全屏：假，
项目：[{
停靠：“顶部”，
xtype:'工具栏'，
id:'工具栏id'，
标题：“玩家信息”，
项目：[{
xtype:“间隔器”
},{
xtype:'按钮'，
文本：“清除过滤器”，
处理程序：函数（按钮）{
button.up（'AboutSet'）.down（'dataview'）.getStore（）.clearF
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'
});

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