PDA

View Full Version : persistent issue with LocalStorageProxy



juandj
14 Sep 2010, 9:08 PM
Hello,

I've been trying to get LocalStorageProxy + JsonStore + DataView working together, but I keep running into issues.. To make sure it wasn't anything I was doing wrong, I wrote some very basic sample code and I was able to reproduce the same issue..



Ext.setup({

tabletStartupScreen: '/images/timekeeper/tablet_startup.png',
phoneStartupScreen: '/images/timekeeper/phone_startup.png',
icon: '/images/timekeeper/icon.png',
glossOnIcon: false,

onReady: function() {

Ext.regModel('Player', {
field: [
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' }
]
});


var store = new Ext.data.JsonStore({
proxy: new Ext.data.LocalStorageProxy({
id: 'players-store'
}),
model: 'Player',
autoLoad: true

});


var panel = new Ext.Panel({
id:'players-view',
fullscreen: true,
title:'Players',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
id: 'status',
items: [
new Ext.Button({
text: 'Start',
id: 'toggle_button',
handler: function() {
alert('a');

}
})
]
}],
items: [
new Ext.DataView({
store: store,
height:400,
itemSelector: 'div.player_name' // fix
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="player_name">Name: {firstname} {lastname}</div>',
'</tpl>',
'<div class="x-clear"></div>'
),
emptyText: 'No players to display'
})
]
});

var player = Ext.ModelMgr.create({
'firstname': 'John',
'lastname': 'foo'
}, 'Player');


//player.save(); // Uncaught TypeError: Cannot call method 'indexOf' of undefined ext-touch-debug.js:219

store.add({
'firstname': 'John',
'lastname': 'foo'
});

store.sync(); // error Uncaught TypeError: Cannot call method 'split' of undefined ext-touch-debug.js:9555


}
});



The errors are in the comments, but basically:

1) If I attempt to .save() a record directly I get:
Uncaught TypeError: Cannot call method 'indexOf' of undefined ext-touch-debug.js:219

This is a new feature, and I just saw it in another forum post, so I might be using it wrong..


Most importantly though is:

2) If I try to add a record to the store and then sync, I get:
store.sync(); // error Uncaught TypeError: Cannot call method 'split' of undefined ext-touch-debug.js:9555

This is the same error I was trying to reproduce..


Whatever I do, I can't get it to save the data to localStorage.


I've tested on Chrome, Safari (windows) and iOS 4.0.2 with the same results.



Any comments would be appreciated.

evant
14 Sep 2010, 11:01 PM
http://www.sencha.com/forum/showthread.php?109673-Load-record-from-LocalStorage-using-Ext.ModelMgr

juandj
15 Sep 2010, 6:45 AM
Hey Evan,

Thanks for pointing me to that thread.. I had seen it before, and it helped me get the localStorageProxy working. However, my issue is with DataView specifically. But first, a question about the code you posted in that other thread:



var store = new Ext.data.Store({
model: 'Person',
proxy: {
type: 'localstorage',
id: 'personst',
proxy: {
idProperty: 'id'
}
}
});


You have a proxy within a proxy, which is undocumented.. Is that a new feature? - and also the "idProperty" config parameter is not documented either.. Is it supposed to be directly under proxy? or is it a proxy within a proxy?

Ok, the issue I'm having is the DataView. The revised code is here again, (I had some typos I fixed):


Ext.setup({

tabletStartupScreen: '/images/timekeeper/tablet_startup.png',
phoneStartupScreen: '/images/timekeeper/phone_startup.png',
icon: '/images/timekeeper/icon.png',
glossOnIcon: false,

onReady: function() {


Ext.regModel('Player', {
fields: [
{ name: 'id', type: 'int' },
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' }
]
});


var store = new Ext.data.Store({

proxy: {
type: 'localstorage',
id: 'personst'
},
model: 'Player'
});

var player = Ext.ModelMgr.create({

firstname: 'John',
lastname: 'foo'
}, 'Player');

store.add( player );
store.sync();

var panel = new Ext.Panel({
id:'players-view',
fullscreen: true,
title:'Players',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
id: 'status',
items: [
new Ext.Button({
text: 'Start',
id: 'toggle_button',
handler: function() {
alert('a');

}
})
]
}],
items: [
new Ext.DataView({
store: store,
height:400,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div>Name: {firstname} {lastname}</div>',
'</tpl>',
'<div class="x-clear"></div>'
),
emptyText: 'No players to display'
})
]
});

}
});

As soon as it gets to the DataView, it goes: Uncaught TypeError: Cannot call method 'split' of undefined ext-touch-debug.js:9555

And.. the DataView ends up not rendering the records..


Thanks in advance!

juandj
19 Sep 2010, 12:39 PM
Hey Evan,

I posted a reply, but it hasn't shown up yet. The reply contained code from the forum post you linked and it still fails. I believe this is a bug in the DataView, and it's likely that many others are having the same issue..

I think it'd be beneficial for that reply to be posted, and an update would be appreciated ;) I know you guys are super busy, so I'm being patient..

Thanks in advance.

juandj
19 Sep 2010, 12:40 PM
Hey Evan,

I posted a reply, but it hasn't shown up yet. The reply contained code from the forum post you linked and it still fails. I believe this is a bug in the DataView, and it's likely that many others are having the same issue..

I think it'd be beneficial for that reply to be posted, and an update would be appreciated ;) I know you guys are super busy, so I'm being patient..

Thanks in advance.

This reply was posted right away, so it appears the forum is no longer requiring approval? was it ever? In any event, my reply never appeared.. Please let me know if I should post it again...

Thanks again!

evant
19 Sep 2010, 7:14 PM
1) Just a copy paste error, that second proxy shouldn't be there. The reason you're seeing the DataView error is because you have no itemSelector specified.

juandj
20 Sep 2010, 8:17 AM
Thanks! that's all it needed..

Adding the itemSelector solved the problem.