PDA

View Full Version : Attach the SlideNavigation Project to a Store



403
31 Aug 2012, 1:41 PM
SlideNavigation Project reference is here (https://github.com/haibane84/sencha-SlideNavigation/blob/master/app/view/Main.js).

I would like to be able to refresh the items list within the slidenavigation container by attaching it to a store and updating the store from code. I have attempted this by making the following updates to SlideNavigationExample.view.Main in the SlideNavigation Project and replacing the items array (of selectable items within the slide container) with my own view called MyView. While I can get the items from MyList to load they do not load within the slidenavigation container. Clearly I must be approaching this the wrong way.

If anyone has any knowledge about how to accomplish this I would very much appreciate the help in figuring this out. Please let me know if I can provide any additional info.

Updates to Main view:



Ext.define("MyApp.view.Main", {
alias: 'widget.Main',
extend: 'Ext.ux.slidenavigation.View',

initialize : function() {
var MyView = Ext.create('myApp.view.MyView');
this.addItems(MyView);
this.callParent();
},

requires: [
'Ext.Container',
'Ext.MessageBox',
'Ext.Panel',
'Ext.Toolbar',
'Ext.event.publisher.Dom'
],

config: {
fullscreen:true,
slideSelector: 'x-toolbar',
selectSlideDuration: 150,
list: {
maxDrag: 262,
width: 260,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Navigation',
centered: false,
width: 200,
left: 0
},
}]
},

defaults: {
style: 'background: #fff',
xtype: 'container'
}
}
});


MyList:



Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
alias: 'widget.mylist',

config: {
id: 'navList',
store: 'MyStore',
listeners: [
{
fn: 'onListInitialize',
event: 'initialize'
}
]
},
onListInitialize: function(component, options) {
var store=Ext.data.StoreManager.lookup('MyStore');
store.load();
}
});


MyStore:


Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel'
],


config: {
model: 'MyApp.model.MyModel',
storeId: 'MyStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});


MyModel:


Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'index'
},
{
name: 'title'
},
{
name: 'group'
},
{
name: 'imgclass'
},
{
name: 'slideButton'
},
{
name: 'items'
},
{
name: 'layout'
}
]
}
});