View Full Version : Two Ext.list.ListView using the same store

29 Jun 2010, 10:25 PM

I've got two lists using the same store. But I want to display different views.
If I use DataViews it's simple using different templates, but how to customize the ListView template to display only wished rows.

A good sample for my request is a shopping cart.
The first ListView contains the list of values and the second ListView is the cart.
My idea is to add a field "cart" with the number of items in the cart.
Default is "0" -> the item will not be displayed in the cart.
Set the field to "1" or more will display the item in the cart and in the list of values it will be highlighted to show that one or more items of the article were added to the cart.

So I think I can't solve this by using a store filter, because this would take effect in both lists.
I thougt about customizing the template with a '<tpl if="cart &gt; 0"></tpl>', but I don't know how to access the value of cart in the template? The problem is, that I need this value outside the row to whether display the row or not.

I also thought about using two stores synchronizing each other, but I don't know how to do that.

I hope it's understandable and you are able to help me with this problem.
Thanks, eztam!

2 Oct 2010, 6:00 AM
I have the same requirement - a single store with multiple ListViews that display different sets of records by filtering the store data differently.

I was really hoping that DataView (or ListView) would include some filtering capability. Reading the DataView source code though, it assumes it is displaying the whole store. E.g. if I'm reading DataView.onUpdate() correctly, it assumes that the index of a record in the store corresponds to the index of an on-screen element. So, I don't think it would be easy to alter DataView.

I wonder if the answer is to implement a "FilteredStore" which wraps a real store and provides a filtered view of it. Perhaps there's already such a thing?

2 Oct 2010, 10:25 AM
Here's a store wrapper function which works for me. It creates a new object ("Wrapper") whose prototype is the store, so that method invocations on the wrapper object fall through to the store by default. However, it overrides certain methods so as to apply the filter before the method is run.

It's pretty filthy - you'll need to override whichever store functions you use. I didn't have to change any Ext code, but is there a better way?

Javascript OO still makes my head hurt.

function filterStore (store, filter) {
function Wrapper () {
this.filtering = false; // guards against recursion
Wrapper.prototype = store;

Wrapper.prototype.wrap = function (store, fnname, suspendevents) {
var t = this;
t[fnname] = function () {
var storefn = store[fnname];

if (!t.filtering) {
store.suspendEvents(false); // prevent recursion via events handlers

t.filtering = true;
store.filter.apply(store, filter);

if (!suspendevents) // sometimes we need the events fired by the store method

var r = storefn.apply(store, arguments);

if (t.filtering) {
t.filtering = false;


return r;

var wrapper = new Wrapper();

// DataView calls these
wrapper.wrap(store, 'getRange', true);
wrapper.wrap(store, 'indexOf', true);
wrapper.wrap(store, 'getCount', true);
wrapper.wrap(store, 'getAt', true);

// my code calls these
wrapper.wrap(store, 'indexOfId', true);
wrapper.wrap(store, 'remove', false);
wrapper.wrap(store, 'add', false);

return wrapper;

var lv = new Ext.list.ListView({
store: filterStore(store, [ 'category', 'book' ]),

14 Jul 2011, 6:47 AM
Has this kind of functionality been added to the Ext core? I find myself constantly using this pattern and it seems like it should be a built-in feature.

26 Oct 2011, 12:54 AM
See this solution, http://www.sencha.com/forum/showthread.php?152057-Custom-proxy-to-read-from-another-store
(http://www.sencha.com/forum/showthread.php?152057-Custom-proxy-to-read-from-another-store) i would say it's a bit more elegant and robust.
it involves a custom proxy that can read data from another store.