PDA

View Full Version : XTemplate problem: blank panel



jcoenrae
23 Aug 2011, 5:56 AM
Hi everyone,

I have a very strange situation, which I think is caused by a little bug in my code, but after two full days of searching it i'd like to hear your opinion and hints.

I'm creating a prototype application which is using hard coded data and I'm trying to display it on a panel with an XTemplate. This panel is a class from which there are several instances in my program, they are all using the same template (maybe that's the problem?).

It all works fine, but then suddenly (I haven't found out what the cause is) the panel with the XTemplate is showing nothing, not even simple text. I thought that it wasn't loaded correctly, but the dom contains the correct text. Maybe the panel was hidden, but that is also not the case. All the necessary events are called (activate, show), but still nothing is shown.

After some scrolling between different panel, sometimes it gets back to normal, sometimes it doesn't and sometimes it looks OK, but if you look closer you see that the text from the panel is showed at once while it should come with the animation on the panel (it has a card layout). Sometimes the template text is shown over the text from the previous panel, although the panel with the template is hidden.

You can see a video of it here: http://www.youtube.com/watch?v=cOIoy0cHqP8, it is in dutch but you can see that the panel is shown correctly the first time and after some scrolling it is blank.

I think it has something to do with the switching between panels or so but I don't know what.

Thanks in advance,

Jolien

27647

jratcliff
23 Aug 2011, 8:09 AM
do you have any code that demonstrates the issue that you could post?

jcoenrae
23 Aug 2011, 11:12 PM
Hi,

I have a lot of code because we are building an application (with PhoneGap and Sencha), not just a website. I'm going to post some code here, if you need more, just ask.

This is the model for the template on the broken panel. It has some functions too.

movemeapp.models.Route = Ext.regModel("movemeapp.models.Route", {fields: [
{name: "routeName", type: "string"},
{name: "score", type: "int"},
{name: "km", type: "int"},
{name: "regio", type: "string"},
{name: "difficulty", type: "int"},
{name: "description", type: "string"},
{name: "map", type: "string"},
{name: "profile", type: "string"},
{name: "fromCity", type: "string"},
{name: "toCity", type: "string"},
{name: "fromStreet", type: "string"},
{name: "toStreet", type: "string"},
{name: "fromPostal", type: "string"},
{name: "toPostal", type: "string"},
{name: "custom", type:"bool"}],
getTitle: function() {
if(this.get('custom')){
return this.get('fromCity') + " - " + this.get('toCity');
}else{
return this.get('routeName');
}
},
getShortTitle: function() {
var title = "";
if(this.get('custom')){
title = this.get('fromCity') + " - " + this.get('toCity');
}else{
title = this.get('routeName');
}
if(title.length > 16){
return title.substr(0,13) + '...';
}else{
return title;
}
},
getFrom: function() {
if(!this.get('custom')){
return this.get('fromStreet') + ", " + this.get('fromPostal') + " " + this.get('fromCity');
}else{
return "";
}
},
getTo: function(){
if(!this.get('custom')){
return this.get('toStreet') + ", " + this.get('toPostal') + " " + this.get('toCity');
}else{
return "";
}
}
});
This is the datastore that is used. You can see the data is just hard coded.

movemeapp.stores.customRoutesItems = new Ext.data.Store({
model: 'movemeapp.models.Route',
data: [{
fromCity: "City1",
fromStreet: "Street1",
fromPostal: "1234",
toCity: "City2",
toStreet: "Street2",
toPostal: "4321",
score: -1,
km: 15.60,
map: "img/111-user.png", custom: true}
]});
This is the template I am using on the panel. It has some of the functions of the model too because I couldn't reach the model functions from within the template.


movemeapp.views.customRouteTemplate = new Ext.XTemplate(
'Ik ben een template',
'<p>Van: {[this.getFrom(values)]}</p>',
'<p>Naar: {[this.getTo(values)]}</p>',
'<p>Afstand: {km} km</p>',
'<img src={map}></img>',
{// XTemplate configuration:
compiled: true,
getTitle: function(values) {
if(values.custom){
return values.fromCity + " - " + values.toCity;
}else{
return values.routeName;
}
},
getFrom: function(values) {
if(values.custom){
return values.fromStreet + ", " + values.fromPostal + " " + values.fromCity;
}else{
return "";
}
},
getTo: function(values){
if(values.custom){
return values.toStreet + ", " + values.toPostal + " " + values.toCity;
}else{
return "";
}
}
});
This is the panel itself, it is just using the template.


movemeapp.views.CustomRoute = Ext.extend(Ext.Panel, {
id: 'customRoute',
tpl: movemeapp.views.customRouteTemplate
});
This is the panel with the card layout that is using the broken panel. The switch between the different panels is done in the controller. When I switch panels I also change the toolbars (not placed on the panels itself because I wanted to reuse them).

movemeapp.views.Navigation = Ext.extend(Ext.Panel, {fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
//put instances of cards into app.views namespace
Ext.apply(movemeapp.views, {
navigationForm: new movemeapp.views.NavigationForm(),
navigationCustomRoute: new movemeapp.views.CustomRoute(),
navigationToolbar1: new movemeapp.views.NavigationToolbar1(),
navigationToolbar2: new movemeapp.views.NavigationToolbar2()
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
movemeapp.views.navigationForm,
movemeapp.views.navigationCustomRoute
],
dockedItems: [movemeapp.views.navigationToolbar1]
});
movemeapp.views.Navigation.superclass.initComponent.apply(this, arguments);
}
});

An other instance of movemeapp.views.CustomRoute is used on another panel, it has a different name but it is the same class.

Thanks in advance

Jolien

jcoenrae
24 Aug 2011, 7:02 AM
Hi,

I think I found the answer. I should still test it a bit more thoroughly but for some small tests it is solved.

I created a class of a panel and that class has an id. Which means that each instance will have the same id. Which should not happen because you should use class then. Small mistake with strange errors.

I'll keep you posted.

Kind regards

Jolien

jcoenrae
24 Aug 2011, 7:06 AM
Yeah, that definitely did the trick. Never use id's when you are extending Ext. before you know it you create multiple instances and you have a problem.

I didn't use the id anyway.