PDA

View Full Version : Referencing existing stores for using within ComboBox



MSB
24 Oct 2013, 1:34 AM
I'm trying to make a combobox use an existing data store,
I'm only interested in one field from the store in particular but filtering it is not the issue.

I'm working on a Dashboard,
within the Dashboard window is a Panel,
the Panel has three childs: (1) a title bar, (2) a toolbar, (3) a chart
the toolbar has one child: the ComboBox

The Data Model and Store are defined in seperate js files,

I am trying to use the same store ( a copy would work too ) for the ComboBox than the one the Chart is using.
All of my attempts have failed and most of them resulted in the error: Cannot call method getProxy of undefined.

Here is the code for the Panel:

The commented code with the tbar is a static way that I have found that works, now my aim is to make it dynamic. The field I am aiming for is YearMonth and is stored as a String.


Ext.define('view.panel.DashboardStatisticsPanel', {
extend : 'Ext.panel.Panel',
alias : 'widget.DashboardStatisticsPanel',
requires : [
'Ext.layout.container.Column',
'view.chart.LocationStatisticsPerMonth'
],
plain: true,
border: false,
layout: {
type: 'hbox',
padding: '10 10 10 10'
},



items: [{
xtype: 'panel',
layout: 'fit',
border: true,
flex: 1,
items: [{
xtype: 'panel',
layout: 'anchor',
border: true,
overflowX: 'scroll',
height: 400,


dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'label',
text: 'Select Date',
padding: '0 0 0 10'
},


{
xtype: 'combobox',
displayField: 'YearMonth',
emptyText: 'Select Date ',
queryMode: 'local',
padding: '0 0 0 10',
store: function (btn) {
btn.up('panel').down('LocationStatisticsPerMonthChart').getStore();
},
valueField: 'YearMonth',

}]
}]
/*tbar: [{


text: 'September Only',
handler: function (btn) {
var store = btn.up('panel').down('LocationStatisticsPerMonthChart').getStore();
store.clearFilter();
Ext.defer(function (btn) {
store.filter("Month", 9);
}, 300);
}





}]*/,
items: [{
xtype: 'LocationStatisticsPerMonthChart',
itemId: 'LocationStatisticsPerMonthChart',
anchor: '2000, -10',
//height: 400,
// width: 2000,
}]

}],
dockedItems: [{
xtype: 'TitleToolbar',
dock: 'top',
title: Resources.t('RegistrationsPerUnit'),
items: ['->', {
iconCls: 'iconRefresh',
itemId: 'refresh',
scope: this,
handler: function (btn) {
var store = btn.up('panel').down('LocationStatisticsPerMonthChart').getStore();
//store.removeAll();
store.load();
}
}]
}]


}]


});

If any additional code is required I can provide it on demand.
I thank anyone willing to help me out here.

Salakar
25 Oct 2013, 3:22 AM
Hello, Have you tried using
Ext.data.StoreManager.lookup('myStoreNameHere');

?

Thanks

MSB
20 Nov 2013, 3:21 AM
Your suggestion at least helped me in the right direction I believe, however when I want to filter for distinct records it would seem I have no other option but to use the collect() function.
Right now it seems I am having trouble loading the array returned by collect back into my store.

In the code snippet I provided I have attempted three different approaches, so far none of them have worked.
Any insights, pointers or suggestions would be greatly appreciated.
my current code:


xtype: 'combobox',
id: 'filterbox',
displayField: 'YearMonth',
emptyText: 'Select Date ',
queryMode: 'local',
padding: '0 0 0 10',
//store: [],
valueField: 'YearMonth',
listeners: {
afterrender: function () {


//option 1
this.store = Ext.getStore('StatisticsStore').collect('YearMonth');


//option 2
/*Ext.define('Time', {
extend: 'Ext.data.Model',
fields: [
{ name: 'YearMonth', type: 'string' },

]
});
var filterstore = Ext.create('Ext.data.Store', {
model: 'Time',
data: Ext.getStore('StatisticsStore').collect('YearMonth'),
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});*/
alert(' rendered');
},
expand: function () {

//option 3
// this.store.loadData(Ext.getStore('StatisticsStore').collect('YearMonth'));
//this.store.refresh;
alert(' expanded');

}
},
listConfig: {
listeners: {

itemclick: function (list, record) {
Ext.getStore('StatisticsStore').filter('YearMonth', record.get('YearMonth'));
}
}
}


}]
}],

MSB
27 Nov 2013, 2:21 AM
I have since devised my own workaround to my problem;
I extended my store with a new function distinctStore() that returns a new MixedCollection with only distinct elements from my original store.

I then used this new method within an event listener for the expand event of my comboBox.
This way I would load the data from the cache instead of pulling it up from the database again.

For people that are interested:


getDistinctStore: function (distinctKey) {//info: store is a json store


var map = new Ext.util.MixedCollection();

var record;
this.data.each(function (rec) {
record = { distinctKey: rec.get(distinctKey) };
if (map.getByKey(record.distinctKey)== undefined) {
map.add(record.distinctKey, rec);
}
});
return map;
},

patel.kartikv
3 Jan 2014, 12:59 PM
you could change your option 2 in below manner

//I have kept variables from my example.. please replace them according to your one

var store2 = new Ext.data.ArrayStore({ autoDestroy: true, fields: [ 'profitcenter', ] }); store.on('load', function(){ store2.loadData(store.collect("profitcenter")); });[

this is working for me