PDA

View Full Version : Store doesn't load



wuytsr
19 Nov 2012, 2:48 AM
Hi,

In my application I'm using a store that retrieves Data using a SAP gateway. I load my store in app.js. This is the code I use:

var activityStore = Ext.create('App.store.Activities');
Ext.create(
'App.view.List', {
store: activityStore
});

activityStore.load();

40175

This works fine, I get a list with all the items. When I go to another view and return to the List view, there are no items anymore, so the list doens't show. I don't understand why this time the list doesn't show up because I use the same code (above) in the function of my "back" button. This function is in my controller. (main.js)

The console doesn't show any error messages.

40174
Is there anyone who knows what I have to do?

Thanks ;)

bricemason
20 Nov 2012, 7:56 PM
Could you please post more code, specifically the view configuration and how you're handling switching views. For example, is this is navigation view, container with card layout, etc?

Brice

wuytsr
21 Nov 2012, 12:14 AM
This is most of my code:

App.js (store)


Ext.Loader.setConfig({
disableCaching: false
});


Ext.application({
name: 'App',
models: ['Activity'],
controllers: ["Main"],
views: ['Login', 'List', 'Detail'],
stores: ['Activities'],

launch: function () {


var activityStore = Ext.create('App.store.Activities');

Ext.create('App.view.List', {
store: activityStore
});

activityStore.load();



}
});


List.js (view)


Ext.define('App.view.List', {
alias: "widget.list",
extend: 'Ext.List',

requires: ['Ext.TitleBar', 'App.store.Activities'],
config: {
// make sure this view uses the full viewport
store: "Activities",
fullscreen: true,
scroll: true,
loadingText: "Loading workitems...",
emptyText: "<div class=\"notes-list-empty-text\">No workitems.</div>",
onItemDisclosure: true,

grouped: true,
// item template: for each activity in the list,
// show the description
itemTpl: "<div class=\"list-item-narrative\">{id}</div><div class=\"list-item-title\">{title}</div>",

// put a titlebar on top of the list
items: [{
xtype: 'titlebar',
docked: 'top',
title: 'SAP workitems',
items:[{
xtype: 'button',
id: 'options',
ui: 'action',
text: 'options'
}],
}
]
},

scroll: true,
LoadingText : 'Retrieving data'
});



Detail.js (view)
Ext.define('App.view.Detail', {
alias: "widget.detail",
extend: 'Ext.Panel',
models: ['Activity'],
controllers: ["Main"],
views: ['Login', 'List', 'Detail'],
stores: ['Activities'],
fullscreen: true,
initialize: function () {

var bbutton = {
xtype: "button",
text: 'Back',
ui: 'back',
handler: this.onBackButtonTap,
scope: this
};

this.callParent(arguments);
var titlebar = {
xtype: 'titlebar',
docked: 'top',
id: 'titleBar',
ui: 'light',
title: 'WorklistApp',
items: [
bbutton
]
};

var wl_id = {
requires: "App.view.list",
xtype: "label",
html: "<div><b>ID:</b> " + rec.get("id") + "</div>"
};
var wl_title = {
requires: "App.view.list",
xtype: "label",
html: "<div><b>Title:</b> " + rec.get("title") + "</div>"
};
var wl_date = {
requires: "App.view.list",
xtype: "label",
html: "<div><b>Date:</b> " + rec.get("cr_date") + "</div>"
};
var wl_text = {
requires: "App.view.list",

xtype: "label",
html: "<div><b>Text:</b>" + rec.get("text") + "</div>"
};

var choice = {
requires: "App.view.list",
xtype: "button",
html: rec.get("dec_text")
};
var choice2 = {
requires: "App.view.list",
xtype: "button",
html: rec.get("dec_text2")
};

var container1 = {
xtype: "panel",
margin: "0 50 50 50",

items: [
wl_id, wl_title, wl_date, wl_text
]
};
this.add(titlebar, container1, choice, choice2);

},

onBackButtonTap: function () {
var activityStore = Ext.create('App.store.Activities');

Ext.create('App.view.List', {
store: activityStore
});

activityStore.load();
Ext.Viewport.setActiveItem(Ext.create('App.view.List'));
}


});


Main.js (controller)
var rec;
Ext.define('App.controller.Main', {
extend: 'Ext.app.Controller',

models: ['Activity'],
views: ['Login', 'List'],
stores: ['Activities'],
config: {

refs: {
List: "list"
},
control: {
"List": {
activate: 'onActivate',
disclose: 'onDisclose'
},
'#login': {
// On the tap event, call onNewTap
tap: 'onNewTap'
},
'#logout': {
// On the tap event, call onNewTap
tap: 'onBackTap'
},
'#options': {
tap: 'onBackTap'
}

}
},
onActivate: function () {
console.log('Main container is active');
},
onDisclose: function(view, record, target, index, event) {
console.log('Disclosure icon was tapped on the List');
console.log(view, record, target, index, event);
console.log('Clicked on the disclosure icon',
'The id selected is: ' + record.get('id'));
rec = record;
Ext.Viewport.add(Ext.create('App.view.Detail'));
Ext.Viewport.setActiveItem(Ext.create('App.view.Detail'));

},


onNewTap: function () {

Ext.Viewport.setActiveItem(Ext.create('App.view.List'));
},

onBackTap: function () {
// When the user taps on the button, create a new reference of our New view, and set it as the active
// item of Ext.Viewport

Ext.Viewport.setActiveItem(Ext.create('App.view.Login'));
},

});
Activity.js (model)
// Define the Activity model
Ext.define('App.model.Activity', {

extend: 'Ext.data.Model',
alias: "widget.activity",
// the proxy config requires the sap_gateway
requires: ['App.proxy.sap_gateway'],
config: {
idProperty: 'id',
autoload: true,
// define the fields which we want to extract from the OData response.
fields: [

{ name: 'id', type: 'string' },
{ name: 'title', type: 'string' },
{ name: 'text', type: 'string' },
{ name: 'cr_date', type: 'string' },
{ name: 'dec_text', type: 'string' }
],

// provide a proxy configuration
proxy: {
// use the special sap_gateway proxy
type: 'sap_gateway',
url: "http://scvwis0046.dcsc.be:8010/sap/opu/odata/sap/Z_GW_WORKITEMS_CM_WR/z_gw_workitems_wrCollection"
}
}
});



Activities.js (store)


Ext.define('App.store.Activities', {
extend: 'Ext.data.Store',
alias: "widget.store",
config: {
model: 'App.model.Activity',
autoload: true,
storeId: "store1",
sorters: [{ property: 'cr_date', direction: 'DESC' }],
grouper: {
sortProperty: "cr_date",
direction: "DESC",
groupFn: function (record) {

if (record && record.data.cr_date) {
return record.data.cr_date.toString();
} else {
return '';
}
}
}
}
});


Thanks!

bricemason
21 Nov 2012, 9:54 AM
For the code that you have, the error is occurring because in your Detail view in onBackButtonTap you have this code:


onBackButtonTap: function () {
var activityStore = Ext.create('App.store.Activities');


Ext.create('App.view.List', {
store: activityStore
});


activityStore.load();
Ext.Viewport.setActiveItem(Ext.create('App.view.List'));
}


The error is occurring because on the last line of that method where you're setting the active item to a new instance of your list view doesn't have the store.

To make this code work you could do:


onBackButtonTap: function () {
var activityStore = Ext.create('App.store.Activities');


var l = Ext.create('App.view.List', {
store: activityStore
});


activityStore.load();


Ext.Viewport.setActiveItem(l);
}


In this new code, the view is added which has the store configured for it.

However...big however here, you have a lot of issues with your code. Just by running your original code I got a bunch of warnings in the console. You should go back and review any/all warnings you receive and handle each one until it's clean.

I think you'll really need to read the guides in the documentation and reassess your architecture.

You have a lot of places in there where you're continually adding new views to your Viewport. As you use the app, the number of components just grows and grows without them even being used which is a big problem.

Take a look at some of the built-in components you can use as well instead of manually handling the Viewport. There are a lot of niceties built into the framework that you should take advantage of.

To wrap up, the error is corrected but you still have a lot of work to do. Keep trying things and post for help if you need it.

Brice

wuytsr
22 Nov 2012, 12:08 AM
Hey brice, thanks for the answer!

I know this is not "clean" code, this is not my actual app but more something like a test app. However I already made sure there are no warnings.

About the manually handling the Viewport, can you give me more information about that, or a link?

Thanks again! :)

bricemason
22 Nov 2012, 7:07 PM
Regarding the Viewport stuff, the biggest problem in your code is that for every time you want to switch to a different view, you were creating a new instance. As your app is used, the number of redundant view instances floating around was growing exponentially.

As far as links to other resources, check out the docs for the Ext.navigation.View class and the Ext.dataview.NestedList. The docs themselves are a good resource as they will some nice things that are built in such as auto-destroying components, animating views, and setting detail cards.

Brice