PDA

View Full Version : Not finding "getStore()" while trying to add a new row to grid



BastianKrones
26 Apr 2013, 12:14 AM
Hey guys,
i am currently working on a grid (Read,Update,Delete alredy working) and comparing with this example:
https://github.com/SenchaArchitect/ExtSimpleExamples/blob/master/editablegrid/metadata/view/PlantsGridPanel

M (https://github.com/SenchaArchitect/ExtSimpleExamples/blob/master/editablegrid/metadata/view/PlantsGridPanel)y view:

Ext.define('MyApp.view.MyViewport', {

extend: 'Ext.container.Viewport',


layout: {
align: 'stretch',
type: 'vbox'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
frame: true,
id: 'gridPanelId',
autoScroll: true,
store: 'Users',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'userID',
text: 'ID'
},
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name',
flex: 4,
editor: {
xtype: 'textfield',
maxLength: 20,
minLength: 3
}
},
{
xtype: 'gridcolumn',
dataIndex: 'emailAddress',
text: 'E-Mail',
flex: 4,
editor: {
xtype: 'textfield',
vtype: 'email'
}
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if (value > 33) {
return '<span style="color:green;font-weight: bold">' + value + '</span>';
} else if (value <= 33) {
return '<span style="color:red;font-weight: bold">' + value + '</span>';
}
return value;
},
width: 55,
align: 'center',
dataIndex: 'age',
text: 'Alter',
editor: {
xtype: 'numberfield',
decimalPrecision: 0
}
},
{
xtype: 'datecolumn',
align: 'center',
dataIndex: 'birthdate',
text: 'Geburtstag',
format: 'd.m.Y',
editor: {
xtype: 'datefield',
format: 'd.m.Y'
}
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if (value == 'M') {
return '<span style="color:green;font-weight: bold;">männlich</span>';
} else if (value == 'F') {
return '<span style="color:red;font-weight: bold;">weiblich</span>';
}
return value;
},
width: 65,
align: 'center',
dataIndex: 'gender',
groupable: true,
text: 'Geschlecht'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if(value == 'true')
{
return '<span style="color:green;font-weight: bold;">Ja</span>';
} else if (value == 'false')
{
return '<span style="color:red;font-weight: bold;">Nein</span>';
}
},
width: 65,
align: 'center',
dataIndex: 'getNewsletter',
text: 'Newsletter',
editor: {
xtype: 'combobox',
autoRender: false,
value: {
total: 5,
data: [
{
ID_INS: '11',
SHORT_INS: 'CMOTS'
},
{
ID_INS: '12',
SHORT_INS: 'DAS'
},
{
ID_INS: '13',
SHORT_INS: 'OQ 45.2'
},
{
ID_INS: '2',
SHORT_INS: 'Y-OQ 2.01'
},
{
ID_INS: '1',
SHORT_INS: 'Y-OQ-SR 2.0'
}
]
}
}
},
{
xtype: 'gridcolumn',
width: 60,
align: 'center',
dataIndex: 'contactFK',
menuText: '',
text: 'Kontakt',
editor: {
xtype: 'combobox',
displayField: 'ContactID',
forceSelection: true,
store: 'Contacts',
valueField: 'ContactID'
}
},
{
xtype: 'actioncolumn',
id: 'delete',
width: 25,
items: [
{
handler: function(view, rowIndex, colIndex, item, e, record, row) {
Ext.getStore('Users').remove(record);
},
icon: 'resources/icons/fam/delete.gif'
}
]
}
],
items: [
{
xtype: 'combobox',
width: 100,
fieldLabel: 'Label',
displayField: 'Name',
forceSelection: true,
store: 'Contacts',
valueField: 'ContactID'
}
],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
handler: function(button, event) {
// Create a model instance
var r = Ext.create('MyApp.model.User', {
name: 'Mostly Shady',
emailAddress: '[email protected]',
age: Ext.Date.clearTime(new Date()),
birthdate: false,
gender: 'M',
getNewsletter: false,
contactFK: 8300
}),
usersGrid = this.up('gridPanelId');

usersGrid.getStore('UserStore').insert(0, r);

usersGrid.getPlugin('CellEditing').startEditByPosition({row: 0, column: 0});
},
text: 'Add User'
}
]
}
],
listeners: {
select: {
fn: me.onGridPanelIdSelect,
scope: me
}
}
},
{
xtype: 'panel',
itemId: 'detailUser',
tpl: [
'Name: <span style="color:#209cdf;font-weight:bold;">{name}</span><br>',
'E-Mail: <span style="color:#209cdf;">{emailAddress}</span><br>',
'Alter: <span style="color:#209cdf;">{age}</span><br>',
'Newsletter: <span style="color:#209cdf;">{getNewsletter}</span><br>',
'geschlecht: <span style="color:#209cdf;">{gender}</span><br>',
'Geburtstag: <span style="color:#209cdf;">{birthdate}</span><br>',
'Kontakt: <span style="color:#209cdf;">{contactFK}</span>'
],
width: 100,
layout: {
type: 'fit'
},
bodyPadding: 20,
title: 'My Panel'
}
]
});


me.callParent(arguments);
},


onGridPanelIdSelect: function(rowmodel, record, index, eOpts) {
var detailUser = this.child('#detailUser');
detailUser.update(record.data);
}


});

My store:

Ext.define('MyApp.store.Users', {
extend: 'Ext.data.Store',


requires: [
'MyApp.model.User'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'MyApp.model.User',
storeId: 'UserStore',
pageSize: 5,
proxy: {
type: 'rest',
url: 'http://localhost/sencha/api/user'
}
}, cfg)]);
}
});

My model:

Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',


idProperty: 'userID',


fields: [
{
name: 'name'
},
{
name: 'emailAddress'
},
{
name: 'age'
},
{
name: 'birthdate',
type: 'date'
},
{
name: 'gender'
},
{
name: 'getNewsletter',
type: 'boolean'
},
{
name: 'contactFK'
},
{
name: 'userID',
type: 'int'
}
]
});


Then: If i press the "Add"-button i get following error-message:



Uncaught TypeError: Cannot call method 'getStore' of undefined MyViewport.js:218 (http://localhost/sencha/basicGrid/app/view/MyViewport.js?_dc=1366960977821)
Ext.applyIf.items.dockedItems.items.handler
MyViewport.js:218 (http://localhost/sencha/basicGrid/app/view/MyViewport.js?_dc=1366960977821)

Ext.define.fireHandler ext-all.js:21 (http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js)
Ext.define.onClick ext-all.js:21 (http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js)
(anonymous function)
k



Any suggestions what i did wrong here?


PS: i wrote a similar post before, but i searched for a long time and wanted to add this information.
I couldn't find it. I'm sorry.

28 Apr 2013, 7:41 PM
try changing:

usersGrid = this.up('gridPanelId');

to
usersGrid = this.up('#gridPanelId');

When searching UP or DOWN the chain, by itemId or ID you should use the hash tag. Else, it's looking for an xtype :)

BastianKrones
29 Apr 2013, 12:05 PM
Hey jay,
thank you very much telling me this.
I am quite sure that this will work, even can't prove it, because i got another issse i need to solve tomorrow morning.
I solved this problem by setting my grid as the initial view and giving it an alias.

Works also, but isn't that clever as yours.

Again, thanks alot for it. :)