New Data in Localstorage Unavailable to Panels Even with Calls for Sync() and Load()

[markwyner]

Hello,

I've been given a serious beat down on this issue. I've scoured the forums and read all the API documentation, yet nothing seems to work.

What I expect to happen:


Add an item to localstorage via add()
Navigate to another panel where the data should be pulled in from localstorage
See the newly-added item there


What actually happens:


Add an item to local storage via add()
Navigate to another panel where the data should be pulled from localstorage
Newly-added item is not present


If I refresh my browser the newly-added item appears. So for whatever reason the data isn't be pulled in real time. I have tried the following calls in the panels, models, and stores:


store.load()
store.sync()


None of them immediately force a refreshed connection between a list/panel and the localstorage. I also run a doComponentLayout() and doLayout() on the lists/panels, neither of which produces the newly-added items.

Following is some source code from that process:


// VIEWS FOR IF/ELSE ON GETCOUNT
if (StoreCategories.getCount('catName') == 0) {
var CategoriesPanel = new Ext.Panel({
id: 'categories_panel',
layout: {
type: 'vbox',
flex: 1
},
items: [{
xtype: 'panel',
html: '<div class="HTMLPanel">You haven’t yet added any categories.</div>'
}],
dockedItems: [addEditToolbar]
});
} else {
var CategoriesPanel = new Ext.Panel({
id: 'categories_panel',
layout: 'fit',
items: [{
xtype: 'list',
store: StoreCategories,
itemTpl: '{catName}'
}],
dockedItems: [addEditToolbar]
});
}

// TOOLBAR/BUTTON THAT TRIGGERS THE ADD FORM
var addEditToolbar = new Ext.Toolbar({
title: 'Categories',
items: [{
cls: 'ToolbarIcon',
icon: 'resources/themes/images/icon_add.png',
ui: 'normal',
handler: function() {
CategoriesWrapper.setActiveItem('add_cat', {type:'slide', direction:'up'});
overlayGrip(CategoriesWrapper);
}
}]
});

// MODEL/STORE FOR DATA
Ext.regModel('Categories', {
fields: ['id', 'catName'],
proxy: {
type: 'localstorage',
id: 'category_list'
}
});
var StoreCategories = new Ext.data.Store({
model: 'Categories'
});
StoreCategories.load();
StoreCategories.sort('catName','ASC');
StoreCategories.sync();

// SAVE BUTTON THAT ADDS AN ITEM TO LOCALSTORAGE AND RELOADS THE IF/ELSE PANEL
text: 'Save',
ui: 'confirm',
handler: function() {
var newCat = Ext.getCmp('Cat_Name').getValue();
StoreCategories.add({catName: newCat});
StoreCategories.sync();
CategoriesWrapper.setActiveItem('categories_panel', {type:'slide', direction:'down'});
StoreCategories.sort('catName','ASC');
App.Viewport.tabBar.show();
CategoriesWrapper.doComponentLayout();
App.Viewport.doComponentLayout();
overlayRelease(CategoriesWrapper,StoreCategories);
}

Any thoughts at all? I would love any insight on this. Thanks in advance!

[markwyner]

Also, one more thing to note about this. When the "else" criteria is met and the list version of the panel is shown, the localstorage connection works great. When a new item is saved the list refreshes on save to show the new item. What I can't make happen is getting the panel to revisit the if/else statement after an item is added.

[markwyner]

I don't suppose there's anyone out there who has an answer to this one? I've scoured every resource possible and can't seem to find a solution for this. LocalStorage data doesn't refresh unless the browser is refreshed. I MUST be doing something wrong because I have to assume localStorage calls would be current after sync() and load().

After an add() is run, shouldn't sync() refresh the localStorage, making it current for any subsequent calls? Is there another way to refresh the data?

Anyone?

[markwyner]

I have posted this in two locations and have asked about it as a ticket but haven't been able to get a response. But I discovered something which may help others upon finding this post with a comparable challenge.

Once I decided to use localStorage natively rather than via Sencha Touch's models/stores, everything works perfectly across the board. So it appears there is either an bug/issue with how the stores interact with localStorage, or there is a very precise process for using sync() and load() within them to get localStorage to refresh in real time.