PDA

View Full Version : clear itemTpl on back in navigationView



lokomass
7 Aug 2013, 12:12 AM
Hi everybody.

I've created a little apps which display a list of movies.
The first screen display all alphabetic letters.

45227

When I tap on a letter, I push a view which display all movies which beginning by the letter.
The first time the container is empty during loading :

45228

What I Want, it's when I tap on back button and tap another letter, my container don't display the list of metter before but an empty container...
I got this (when I tap on "L", I see "C" movies, and I want empty list like the second screen) :

45229

After loading, I got the good list, but it's just during loading.

45230

So how can I have an empty list on change ? You can find my code.
Thank a lot and sorry for my english..

controller.js


onLettreSelect: function(list, index, node, record) {
this.hideAbcButton1();
this.hideDateButton1();
if (!this.showFilm) {
this.showFilm = Ext.create('Films.view.Lesfilms');
}
this.getMainview().push(this.showFilm);
Ext.getCmp('searchField1').setValue('');
this.getMainview().getNavigationBar().setTitle(record.get('lettre'));
var store = Ext.getStore('Movies');
store.clearFilter();
store.data.clear();
store.setProxy({
type: 'ajax',
url: 'resources/json/'+record.get('lettre')+'.json'
});
store.setSorters({
sorterFn: function (record) {
return record.get('titre').toLowerCase();
}
});
store.load();
},


lesfilms.js


Ext.define('Films.view.Lesfilms', {
extend: 'Ext.List',
xtype: 'lesfilms',

config: {
title: 'Films',
store: 'Movies',
autoDestroy: false,
items: [
{
docked: 'top',
xtype: 'toolbar',
layout : {
type : 'vbox',
pack : 'center',
align : 'middle'
},
items: [
{
id: 'searchField1',
xtype: 'searchfield',
placeHolder: 'Recherche...'
}
]
}
],
masked: {
xtype: 'loadmask',
message: 'Chargement...'
},
itemTpl: [
'<div>{titre}</div>'
].join('')
}
});

jerome76
7 Aug 2013, 5:20 AM
You can try hiding the list when the item is selected, and showing it again when the store finishes loading.

controller.js


onLettreSelect: function(list, index, node, record) {
this.hideAbcButton1();
this.hideDateButton1();
if (!this.showFilm) {
this.showFilm = Ext.create('Films.view.Lesfilms');
}
this.getMainview().push(this.showFilm);
Ext.getCmp('searchField1').setValue('');
this.getMainview().getNavigationBar().setTitle(record.get('lettre'));
var store = Ext.getStore('Movies');
store.clearFilter();
store.data.clear();
store.setProxy({
type: 'ajax',
url: 'resources/json/'+record.get('lettre')+'.json'
});
store.setSorters({
sorterFn: function (record) {
return record.get('titre').toLowerCase();
}
});
store.addListener('load', function(){
//unmask the list too if not somewhere else
//list.unmask();
list.show();
});

list.hide();
store.load();
},

lokomass
7 Aug 2013, 5:34 AM
Thank you for your reply, but it did not change anything.

jerome76
7 Aug 2013, 6:40 AM
Does the load event get fired? Can you step through the code and check if the List actually hides? What doesn't change?

lokomass
7 Aug 2013, 7:01 AM
Yes the load event fire, but after the store load finished.
So during the load, same thing, I can see previous letter's items when container is masked.

lokomass
7 Aug 2013, 7:10 AM
Finally it WORKS !!

I added a wrong filter (which display nothing) before load, and clear this after and it's ok !
Thanks a lot :



onLettreSelect: function(list, index, node, record) {
this.hideAbcButton1();
this.hideDateButton1();
if (!this.showFilm) {
this.showFilm = Ext.create('Films.view.Lesfilms');
}
this.getMainview().push(this.showFilm);
Ext.getCmp('searchField1').setValue('');
this.getMainview().getNavigationBar().setTitle(record.get('lettre'));
var store = Ext.getStore('Movies');
store.filter('titre', '#######');
store.data.clear();
store.setProxy({
type: 'ajax',
url: 'resources/json/'+record.get('lettre')+'.json'
});
store.setSorters({
sorterFn: function (record) {
return record.get('titre').toLowerCase();
}
});
store.clearFilter();
store.load();
},