PDA

View Full Version : MVC Store data loading



Black Moon
24 Oct 2013, 5:18 AM
Hi All!

There's custom store - has flag = data loaded


Ext.define('QB.Store.Lstore', {
extend: 'Ext.data.Store',
loaded: false,
remoteFilter: true,
pageSize: 50,

constructor: function (cfg) {
var me = this;

me.callParent(arguments);
me.on({ load: function () { me.loaded = true; }
})
},

load: function (options) {
var me = this;
if (!me.loaded) {
return me.callParent([options]);
}
}
)


Controller has ref on this store


stores: [ 'Lstore'],


Views can be windows or tabpanels. And some views has grids with Lstore on it.

Some function call - show view (with grid and Lstore):


showSomeView: function()
{
var view = Ext.widget('someview');
---do something---
view.close();
}


Executing showSomeView:
1st time - data loads from server into grid through Lstore.
2nd time - data again loads from server into grid through Lstore.
.................
n time - data again loads from server into grid through Lstore.

But data needed to be loaded only in 1st executing. In other case - need to to use loaded data.

Seems that store creates new instance each time with view(grid) creating, and not store previous flag( flag loaded).

How hold store loaded state (may be use view hide instead of view close, or there's ext built-in store loaded flag)?

Scott-1
24 Oct 2013, 9:50 AM
Get the store from the Ext.data.StoreManager instead of being like

store : 'moneytracking.ExpectedSales'
vs
store: Ext.getStore('moneytracking.ExpectedSales')

That might break the reloading, You should not need that flag in your code.

Black Moon
25 Oct 2013, 12:11 AM
Get the store from the Ext.data.StoreManager instead of being like

store : 'moneytracking.ExpectedSales'
vs
store: Ext.getStore('moneytracking.ExpectedSales')

That might break the reloading, You should not need that flag in your code.


I just use your way (
store : 'moneytracking.ExpectedSales') of store definition in grid.
More detailed code:

Stores


Ext.define('QB.Store.Lstore', {
extend: 'Ext.data.Store',
loaded: false,
remoteFilter: true,
pageSize: 50,

constructor: function (cfg) {
var me = this, obj = {};

me.callParent(arguments);

me.on({ load: function () { me.loaded = true; }
})
},

load: function (options) {
var me = this;
if (!me.loaded) {

return me.callParent([options]);
}
})

Ext.define('QB.store.Users', {
extend: 'QB.Store.Lstore',
model: 'QB.model.User',
proxy: { url: '/admin/getusers' }
});


Controller


Ext.define('QB.controller.Admin', {
extend: 'QB.controller.Base',

models: [ 'User' ],
stores: [ 'Users'],
views: [ 'user.List'],

init: function () {
var me = this;

me.getConnsStore().on({ exception: me.onException, scope: me });
me.getUsersStore().on({ exception: me.onException, scope: me });

me.control({
'toolbar [action=users]': {
click: me.showUsers
}
});
},

showUsers: function () {
var me = this, tab = me.centerRegion.child('#usertab');
if (!tab) {
var grid = Ext.widget('userlist')
tab = me.centerRegion.add({ title: '????????????', itemId: 'usertab', layout: 'fit', items: [grid] });
}
tab.show();
},



And view (with store)



Ext.define('QB.view.user.List', {
extend: 'QB.Common.Bargrid',
requires: ['QB.Common.Imagecolumn'],
alias: 'widget.userlist',
columns: [{ xtype: 'rownumberer', resizable: true, width: 28 },
{ text: '?????', dataIndex: 'login', width: 200 },
{ text: '???????', dataIndex: 'lastname', width: 200 },
{ text: '???', dataIndex: 'firstname', width: 200 },
{ text: '????????', dataIndex: 'middlename', width: 200 },
{ xtype: 'checkcolumn', text: '??????????', dataIndex: 'locked', align: 'center' },
{ xtype: 'imagecolumn', text: '?????????????', dataIndex: 'isadmin', img: '/content/admin16.png' }],
stateId: 'usrgrid',
store: 'Users',

initComponent: function () {
var me = this;

me.tbarConfig = {
enable: true,
enableSearch: true,
kind: 'default',
minChars: 3,
items: ['-',
{
text: '??????',
iconCls: 'icon-xml',
action: 'import'
}]
}

me.callParent(arguments);
me.store.load();
}


After view shown - need to load data into view grid or show loaded ones (checking by Lstore load method)..

Scott-1
25 Oct 2013, 5:53 AM
Could not exactly reproduce the issue but this what I used the store has a different proxy, not sure if this helps. The store once loaded should not need to be loaded again unless explicitly called.
Store code


Ext.define('QB.store.LStore', {
extend: 'Ext.data.Store',
model : 'QB.model.User',
storeId: 'LStore',
autoLoad: true,
proxy: {
type: 'rest',
api: {
create : null,
read : 'User/read',
update : null,
destroy : null
}
}
});

View Code


Ext.define('QB.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userList',
name: 'userList',
itemId: 'userList',
columns: [{ xtype: 'rownumberer', resizable: true },
{ text: 'login', dataIndex: 'login' },
{ text: 'Last Name', dataIndex: 'lastname' },
{ text: 'First Name', dataIndex: 'firstname' },
{ text: 'Middle Name', dataIndex: 'middlename' }//,
//{ xtype: 'checkcolumn', text: 'Locked', dataIndex: 'locked', align: 'center' },
//{ xtype: 'imagecolumn', text: 'isadmin', dataIndex: 'isadmin', img: '/content/admin16.png' }
],
store: 'LStore',
initComponent: function() {
this.callParent(arguments);
}
});


Initial app.js file


Ext.application({
requires: [
'Ext.container.Viewport',
'Ext.panel.Panel',
'Ext.grid.Panel'
],
name: 'QB',
appFolder: 'TestArea',
controllers: [ 'Admin' ],
stores: [ ],
config : {
autoCreateViewport: true
},
launch: function() {
console.log('Start launch');
Ext.create('Ext.container.Viewport', {
itemId: 'baseViewPort',
defaults : {
margins: '0 0 10 0' //top, right, bottom, left
},
items: [
{
xtype: 'userList', //Customized Panel
},
{
xtype:'button',
action: 'show',
text : 'Show'
},
{
xtype:'button',
action: 'hide',
text : 'Hide'
}
]
});
}
});


Controller


Ext.define('QB.controller.Admin', {
extend: 'Ext.app.Controller',


models: [ 'User' ],
stores: [ 'LStore'],
views: [ 'user.List'],


init: function() {
console.log('Start Admin controller');
var me = this;
me.control({
'#baseViewPort button[action=show]' : {
'click' : me.showGrid
},
'#baseViewPort button[action=hide]' : {
'click' : me.hideGrid
}
});
},
showGrid: function(button){
console.log('Show Button Clicked');
var grid = button.up().items.get('userList');
grid.show();
},
hideGrid: function(button){
console.log('Hide Button Clicked');
var grid = button.up().items.get('userList');
grid.hide();
}
});

Black Moon
25 Oct 2013, 6:04 AM
You use autoload=true. so data loads on app start. My store load data only if showGrid called.

Scott-1
25 Oct 2013, 6:34 AM
Try switch autoLoad to false and then modify the following



showGrid: function(button){
console.log('Show Button Clicked');
var grid = button.up().items.get('userList');
if (grid.getStore().getCount() <= 0){
grid.getStore().load();
grid.getView().refresh();
}
grid.show();
}