PDA

View Full Version : Empty store



pontoffeltier
29 Jul 2014, 4:50 AM
Hey ho
I have a grid.Panel which doesn't load any data. In my controller, the store looks fine, in the view it's empty...
I should say, that my ExtJS-Knowledge is limited at best ;)
I removed some of the code so this won't get too overwhelming.




Model & store:

Ext.define('Shopware.apps.MyApp.model.mytab.Mytab', {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
api: {
read : '{url action=getMytab}',
//destroy: '{url action=deleteMytab}'
update: '{url action=saveMytab}'
},
reader: {
type: 'json',
root: 'data',
totalProperty:'total'
}
},




fields: [
//{block name="backend/myapp/model/mytab/mytab/fields"}{/block}
{ name: 'id', type: 'int', useNull: true },
{ name: 'name', type: 'string' },
{ name: 'somenumber', type: 'float' }
]
});


Ext.define('Shopware.apps.MyApp.store.mytab.Mytab', {
extend: 'Ext.data.Store',
model: 'Shopware.apps.MyApp.model.mytab.Mytab',
storeId: 'mytabStore',
autoLoad: false,
proxy: {
type: 'ajax',
api: {
read : '{url action=getMytab}',
update: '{url action=saveMytab}'
},
reader: {
type: 'json',
root: 'data'
}
}
});




Controller:

Ext.define('Shopware.apps.MyApp.controller.Mytab', {
extend: 'Enlight.app.Controller',
views: [
'mytab.Panel', 'mytab.Grid', 'mytab.Form'
],
stores: [ 'mytab.Mytab' ],
models: [ 'mytab.Mytab' ],




refs: [
{ ref: 'window', selector: 'myapp-window' },
{ ref: 'grid', selector: 'myapp-mytab-grid' },
{ ref: 'form', selector: 'myapp-mytab-form' },
{ ref: 'deleteButton', selector: 'button[action=remove]' }
],




messages: {
saveEntryTitle: '{s name=form/message/save_entry_title}Save entry{/s}',
saveEntrySuccess: '{s name=form/message/save_entry_success}Saved.{/s}',
saveEntryError: '{s name=form/message/save_entry_error}Could not be saved.{/s}'
},




mainWindow: null,




/**
*
*/
init: function () {
var me = this;

me.callParent(arguments);
}
});


App:

Ext.define('Shopware.apps.MyApp', {
extend: 'Enlight.app.SubApplication',




bulkLoad: true,
loadPath: '{url action=load}',
controllers: ['Main', 'Mytab'],




views: [
'mytab.Panel', 'mytab.Grid', 'mytab.Form'
],




/**
* This method will be called when all dependencies are solved and
* all member controllers, models, views and stores are initialized.
*/
launch: function() {
var me = this;

me.controller = me.getController('Main');
return me.controller.mainWindow;
}
});


Window:

Ext.define('Shopware.apps.MyApp.view.main.Window', {
extend: 'Enlight.app.Window',
alias: 'widget.myapp-window',
cls: Ext.baseCSSPrefix + 'myapp',




layout: 'fit',
width: 1100,
height:'90%',
title: '{s name=window/title}My App{/s}',




/**
*
*/
initComponent: function() {
var me = this;




Ext.applyIf(me, {
items: me.getItems()
});




me.callParent(arguments);
},




loadTitle: function(model, record) {
var me = this, title = 'myApp', data = {};
title = new Ext.Template(title).applyTemplate(data);
me.setTitle(title);
},




/**
* Creates the fields sets and the sidebar for the detail page.
* @return Array
*/
getItems: function() {
var me = this;
return [{
xtype: 'tabpanel',
activeTab: 0,
items: [{
xtype: 'myapp-mytab'
}]
}];
}
});


Panel:

Ext.define('Shopware.apps.MyApp.view.mytab.Panel', {
extend: 'Ext.panel.Panel',
alias: 'widget.myapp-mytab',
layout: 'border',
title: '{s name=panel/title}Mytab{/s}',




/**
*
*/
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: me.getItems()
});
me.callParent(arguments);
},




/**
* Creates the fields sets and the sidebar for the detail page.
* @return Array
*/
getItems: function() {
var me = this;
return [{
xtype: 'myapp-mytab-grid',
region: 'west',
width: '50%'
}, {
xtype: 'myapp-mytab-form',
region: 'center'
}];
}
});


Grid:

Ext.define('Shopware.apps.MyApp.view.mytab.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myapp-mytab-grid',




store: Ext.data.StoreManager.lookup('mytabStore'),




border: false,
viewConfig: {
emptyText: '{s name=grid/empty_text}No values{/s}'
},




initComponent: function() {
var me = this;




Ext.applyIf(me, {
dockedItems: me.getToolbar(),
columns: me.getColumns()
});




me.addEvents(
'delete'
);




me.callParent(arguments);
},




getColumns: function() {
var me = this;
return [{
header: '{s name=grid/columns/name}Name{/s}',
dataIndex: 'name',
flex: 2
}, {
header: '{s name=grid/columns/somenumber}somenumber{/s}',
dataIndex: 'somenumber',
flex: 2
}];
},




getToolbar: function() {
var me = this;
return {
xtype: 'toolbar',
dock: 'bottom',
border: false,
cls: 'shopware-toolbar',
items: [{
text: '{s name=grid/options/add}Add item{/s}',
cls: 'secondary small',
action: 'add'
}, {
text: '{s name=grid/options/remove}Remove item{/s}',
cls: 'secondary small',
disabled: true,
action: 'remove'
}]
};
},
});

mitchellsimoens
29 Jul 2014, 7:01 AM
In your grid you have this line:


store: Ext.data.StoreManager.lookup('mytabStore'),

remember, when a file is downloaded by the browser it will be evaluated so this line is getting evaluated long before any instance is being created so it's likely returning null. You should use a string instead and it will resolve the store when an instance of that grid is being created:


store: 'mytabStore',

pontoffeltier
29 Jul 2014, 7:42 AM
I tried that but I got a buffer-error.

mitchellsimoens
29 Jul 2014, 8:02 AM
Buffer error?

pontoffeltier
29 Jul 2014, 8:19 PM
Sry, didn't have my code at hand to retry.
I changed the store to a string, now I get this error:

Uncaught TypeError: Cannot read property 'buffered' of undefined

skirtle
29 Jul 2014, 10:17 PM
You've got that store listed in a stores array of your controller, which will force the storeId. Try:


store: 'mytab.Mytab'

Alternatively, create the store instance yourself, then the storeId you've configured won't be blown away.

pontoffeltier
29 Jul 2014, 11:02 PM
store: 'mytab.Mytab'

gives me the same error. What would your alternative look like? Because when I try to do something like this

console.log(Ext.data.StoreManager.lookup('mytabStore'));
console.log(Ext.data.StoreManager.lookup('mytab.Mytab'));
console.log(Ext.data.StoreManager.lookup('Shopware.apps.MyApp.store.mytab.Mytab'));

in the initComponent of my grid, they all return 'undefined' - same goes for me.getStore(...)

skirtle
29 Jul 2014, 11:25 PM
Whack this in the console for a list of valid store ids:


Ext.data.StoreManager.collect('storeId');

My guess is your odd namespaces are confusing it.

You could just create the store directly, so that it gets the storeId you configured:


new Shopware.apps.MyApp.store.mytab.Mytab();

Note that if you use storeId you're effectively committing to a singleton store. Any sorting, filtering, etc. will be shared between all views that use the store. It's usually better to use an alias instead. See:

http://www.sencha.com/blog/top-support-tips-june-2013

pontoffeltier
30 Jul 2014, 10:51 PM
Thanks for all your help
The solution to my problem was in the apps.js - in the part of the code I did not post -.-
I had a list of contollers and when I changed the order of those controllers to match the order of my tabs and changed the store.autoLoad to true it suddenly worked...

Anyway, thanks :) I really appreciate the fast help here :)

*dramaticTerminatorMoment*
I'll be back