我有一个显示商店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 :(得分：0)
我会从控制器中过滤视图，但是当你想从视图中过滤它时，可以通过向视图中添加其中一种方法并调用它们来实现：
filterById: function(recordId) {
var store = Ext.getStore('Articles');
if (recordId) {
store.filterBy(function(rec) {
return rec.get('id') === recordId;
});
} else {
store.clearFilter();
}
}
OR（从组件而不是直接获取商店）
filterById: function(recordId) {
var store = this.down('dataview').getStore();
if (recordId) {
store.filterBy(function(rec) {
return rec.get('id') === recordId;
});
} else {
store.clearFilter();
}
}
编辑：添加了完整的示例......
好的，最后一次尝试;）
您可能忘记的是实例化您的商店。只是定义它不会实例化它。当您将商店添加到控制器（该应用程序也是一个控制器）时，“存储”配置会自动实例化。按钮可清除过滤器或在ID上添加简单过滤器。你通常不应该在视图中这样做，这个片段只是一个概念证明。我建议在Sencha Touch中使用适当的MVC模型
我（真的）希望这能回答你的问题
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'
});
答案 1 :(得分：0)
您可以向商店添加过滤器
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'
}
}
}
});