PDA

View Full Version : TypeError: store is undefined



toffan
4 Sep 2014, 8:46 PM
Hi all,

I get TypeError: store is undefined




if (store.buffered && !store.remoteSort) {

this my code :

Store :


Ext.define('PHPExtJS.store.User', {
extend: 'Ext.data.Store',
model: 'PHPExtJS.model.User',
storeId:'Usr',
autoLoad: false,
remoteFilter: true,
autoSync: true,
proxy: {
type: 'rest',

api: {
create: 'User/create',
read: 'User/read',
update: 'User/update',
destroy: 'User/delete',
},

listeners: {
exception: function(proxy, response, options){
Ext.MessageBox.alert('Warning!', response.status + ": " + response.statusText + " " + response.responseText + "!");
//Ext.MessagesBox.alert('Error', response.status + ": " + response);
//console.log(response);
}
},

reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},

writer: {
type: 'json',
writeAllFields: true,
encode: true,
root: 'data'
},

// sends single sort as multi parameter
simpleSortMode: true,

// Parameter name to send filtering information in
//filterParam: 'query',

// The PHP script just use query=<whatever>

encodeFilters: function(filters) {
return filters[0].value;
}


}
});



Views :


Ext.define('PHPExtJS.view.User._grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.userGrid',
requires: [
'Ext.toolbar.Paging',
'Ext.grid.RowNumberer',
'Ext.grid.*',
'Ext.data.*',
'PHPExtJS.store.User',
],
iconCls: 'icon-grid',
title: 'User Management',
store: 'Usr',
loadMask: true,

initComponent: function() {
var me = this;

Ext.applyIf(me, {
columns: [
{
xtype: 'rownumberer',
width: 50,
sortable: false,
flex: false,
},

{
dataIndex: 'id',
text: 'ID',
flex:true,

hidden:true,


},

{
dataIndex: 'username',
text: 'USERNAME',
width:100,


},

{
dataIndex: 'name',
text: 'NAME',
flex:true,


},

],
viewConfig: {
emptyText: '<h3><b>No data found</b></h3>'
},
listeners: {
viewready: function() {
this.store.load();
},
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
'Search', {
xtype: 'textfield',
name: 'searchfield'
},
{
xtype: 'button',
action: 'search',
iconCls: 'icon-save',
text: 'Search'
},
{
xtype: 'button',
action: 'delete',
iconCls: 'icon-add',
text: 'Delete'
},
{
xtype: 'button',
action: 'create',
iconCls: 'icon-add',
text: 'Create'
}
]
},
{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true,
emptyMsg: 'No data to display',
store: this.store,
}
]

});

me.callParent(arguments);
}
});


View.Main :


var layoutExamples = [];
Ext.Object.each(getBasicLayouts(), function(name, example) {
layoutExamples.push(example);
});/*
Ext.Object.each(getCombinationLayouts(), function(name, example) {
layoutExamples.push(example);
});*/

var contentPanel = Ext.create('Ext.panel.Panel',{
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: layoutExamples,
renderTo: Ext.getBody()
});

var storeMaster = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'app/view/layout/tree-data.json'
}
});

var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Navigation',
region:'north',
split: true,
height: 700,
minSize: 150,
rootVisible: false,
autoScroll: false,
store: storeMaster
});

treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
/*
if (!detailEl) {
var bd = Ext.getCmp('details-panel').body;
bd.update('').setStyle('background','#fff');
detailEl = bd.createChild(); //create default empty div
}
detailEl.hide().update(Ext.getDom(record.getId() + '-details').innerHTML).slideIn('l', {stopAnimation:true,duration: 200});
*/
}
});

Ext.define('PHPExtJS.view.Main', {
extend: 'Ext.container.Container',
requires: [
'Ext.tab.Panel',
'Ext.layout.container.Border',
'Ext.util.History',
'PHPExtJS.view.User._grid',
'PHPExtJS.view.Login',
'PHPExtJS.store.User'
],
xtype: 'app-main',
layout: {
type: 'border',
default: 'anchor'
},
items: [ {
xtype: 'panel',
region: 'north',
title:"<img src='resources/themes/images/mppk.png'></img>",
height: 80,
margins: '2 5 0 5'
},{
layout: 'border',
id: 'layout-browser',
region:'west',
border: false,
split:true,
margins: '2 0 5 5',
width: 250,
minSize: 100,
maxSize: 500,
items: [treePanel]
},
contentPanel
]

});


function for content :


function getBasicLayouts() {
// This is a fake CardLayout navigation function. A real implementation would
// likely be more sophisticated, with logic to validate navigation flow. It will
// be assigned next as the handling function for the buttons in the CardLayout example.


var cardNav = function(incr){
var l = Ext.getCmp('card-wizard-panel').getLayout();
var i = l.activeItem.id.split('card-')[1];
var next = parseInt(i, 10) + incr;
l.setActiveItem(next);
Ext.getCmp('card-prev').setDisabled(next===0);
Ext.getCmp('card-next').setDisabled(next===2);
};

return {
/*
* ================ Start page config =======================
*/
// The default start page, also a simple example of a FitLayout.

start: {
xtype: 'component',
id: 'start-panel',
title: 'Start Page',
layout: 'fit',
// bodyStyle: 'padding:25px',
autoEl: {
tag: "iframe",
src: "site/welcome"
}
},

/*
* ================ User Management =======================
*/

user: {
xtype:'container',
layout:'fit',
id: 'user-panel',
items:[{xtype:'userGrid'}]
},
}


the problem is,, if I put xtype:'userGrid' into function content I get TypeError: store is undefined, but if I put xtype:'userGrid' Into class view.Main its working good.

Please Help,,

Regards,
Toffan

zz9pa
5 Sep 2014, 4:52 AM
I would try to use "me.store" - rather than "this.store".

In a handler function for example - "this" might be set to something different...

AssetWorks
5 Sep 2014, 5:18 AM
have listed the store in your controller? normally that error happens when the store is not part of StoreManager.
just put an array in your controller


stores:[
'User'
]

this would fix your issue.
a good way to test that is going to the console and typing Ext.StoreManager.get('User') and if its undefined then it means you forgot to add it to your array

toffan
5 Sep 2014, 8:32 AM
the controller have been listed in my controller,, this my controller code :


Ext.define('PHPExtJS.controller.UserController', {
extend: 'Ext.app.Controller',
requires: [

],
stores: [
'User',
],
models: ['User'],
views: ['User._grid'],
init: function() {

this.control({
'userGrid dataview': {
itemdblclick: this.actionDbClick
},
'userGrid button[action=delete]': {
click: this.actionDelete
},
'userGrid button[action=create]': {
click: this.actionCreate
},
'userForm button[action=save]': {
click: this.actionSave
},
'userForm button[action=cancel]': {
click: this.actionCancel
},
'userGrid button[action=search]': {
click: this.actionSearch
},
'userForm button[action=reset]': {
click: this.actionReset
}
});

},
refs: [
{
ref: 'userGrid',
selector: 'grid',
//xtype: 'gridpanel'
}
],
actionDbClick: function(dataview, record, item, index, e, options) {
var formUser = Ext.create('PHPExtJS.view.User._form');

if (record) {

formUser.down('form').loadRecord(record);

}
},
actionUpdate: function(dataview, record) { //function(grid, record) {
var formUser = Ext.create('PHPExtJS.view.User._form');

if (record) {

formUser.down('form').loadRecord(record);

}
},
actionCreate: function(button, e, options) {
this.actionUpdate();
},
actionSave: function(button) {

var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues(false, false, false, true);

var isNewRecord = false;

if (values.id != '') {

record.set(values); //baris untuk menyimpan
} else {

record = Ext.create('PHPExtJS.model.User');
record.set(values);
this.getUserStore().add(record);
isNewRecord = true;
}

win.close();

},
actionDelete: function(button) {

var grid = this.getUserGrid();
var record = grid.getSelectionModel().getSelection();
var store = this.getUserStore();

store.remove(record);

this.getUserStore().load();
},
actionReset: function(button, e, options) {
var win = button.up('window'),
form = win.down('form');
form.getForm().reset();
},
actionCancel: function(button, e, options) {

var win = button.up('window'),
form = win.down('form');
form.getForm().reset();
win.close();

},
actionSearch: function(button) {

var win = button.up('window'),
form = win.down('textfield'),
grid = win.down('grid'),
values = form.getSubmitValue();

grid.getStore().load({params: {q: values}});

},
});


when I typing Ext.StoreManager.get('User') the result is undifined.