PDA

View Full Version : XTemplate update and doComponentLayout causing map to disappear



jgostylo
8 Aug 2011, 8:46 AM
Sencha Touch version tested:

1.1.0


only default ext-all.css


Platform tested against:

Chrome Browser
Android 2.2


Description:

My map is disappearing when I combine XTemplate updates with doComponentLayout and you navigate from one card to another. I have as short a reproducible as I can create.
If you are in Chrome and select a different tab and then come back at any time in this process, the map will not disappear.
If the button uses text and not the XTemplate this issue does not occur.




// app.js
Ext.regApplication('MapDisappear', {
name: "MapDisappear",
defaultTarget: "viewport",
defaultUrl: 'SearchMap/showMap',
useHistory: true,
launch:function(){
//new MapDisappear.stores.Settings(); //TODO: This is questionable, figure out why this is necessary...

this.viewport = new this.views.Viewport({application: this});
}
});

// routes.js
Ext.Router.draw(function(map) {
//These are default fallback routes and can be removed if not needed
map.connect(':controller/:action');
map.connect(':controller/:action/:id');
});

// mapsearchcar.js
var mapButtonTemplate = new Ext.XTemplate(
'Other Page'
);


var mapButton = new Ext.Button({
floating: false,
modal: false,
centered: false,
tpl: mapButtonTemplate,
handler: function(){
Ext.dispatch({
controller: MapDisappear.controllers.Other,
action: 'gotoOther',
});
}
});


var mapButtonContainer = new Ext.Panel({
layout: 'auto',
dock: 'bottom',
items: [mapButton]
});


var layoutUpdateButton = new Ext.Button({
floating: false,
modal: false,
centered: false,
//styleHtmlContent: true,
text: 'Update Layout',
handler: function(){
mapButton.update({});
Ext.getCmp('idMapsearchcard').doComponentLayout();
}
});


var layoutUpdateButtonContainer = new Ext.Panel({
layout: 'auto',
dock: 'bottom',
items: [layoutUpdateButton]
});


MapDisappear.views.Mapsearchcard = Ext.extend(Ext.Panel, {
title: "Map",
id: 'idMapsearchcard',
layout: 'fit',
initComponent: function() {
bigMap = new Ext.Map({
title: 'Map',
id: 'idSearchMap',
useCurrentLocation: true,
mapOptions: {
zoom: 12
}
});
Ext.apply(this, {
items: [bigMap],
dockedItems: [mapButtonContainer, layoutUpdateButtonContainer]
});

MapDisappear.views.Mapsearchcard.superclass.initComponent.apply(this, arguments);
}
});


Ext.reg('mapsearchcard', MapDisappear.views.Mapsearchcard);


// otherCard.js
var otherInfo = new Ext.XTemplate(
'Different Page'
);




MapDisappear.views.Othercard = Ext.extend(Ext.Panel, {
title: "OtherCard",
iconCls: "other",
id: 'idOthercard',
layout: {
type: 'auto'
//align: 'stretch'
},
initComponent: function() {
this.templateContainer = new Ext.Panel({
tpl: otherInfo,
layout: 'fit'
});

Ext.apply(this, {
dockedItems: [{
id: 'otherTitleId',
xtype: "toolbar",
title: "OtherCard"
}],
items: [
this.templateContainer
],
scroll: 'vertical'
});

MapDisappear.views.Othercard.superclass.initComponent.apply(this, arguments);
}
});


Ext.reg('othercard', MapDisappear.views.Othercard);

// searchCard.js
MapDisappear.views.Searchcard = Ext.extend(Ext.Panel, {
title: "Search",
iconCls: "search",
id: 'idSearchcard',
layout: 'card',
initComponent: function() {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "Search",
}]
});

MapDisappear.views.Searchcard.superclass.initComponent.apply(this, arguments);
}
});


Ext.reg('searchcard', MapDisappear.views.Searchcard);


// Viewport.js
MapDisappear.views.Viewport = Ext.extend(Ext.Panel, {
initComponent: function() {
this.bar = new Ext.TabBar({
dock : 'bottom',
ui: 'dark',
id: 'mainTabBar',
layout: {pack: 'center'},
items: [
{
text:"Search",
iconCls: "search",
id:"searchButton",
active:true,
handler: function(b) {
this.updateCard(0,b);
},
scope:this
}
]
});
Ext.apply(this, {
fullscreen: true,
layout: 'card',
id: 'mainPanel',
items:[
{xtype: 'searchcard'}
],
activeItem:0,
dockedItems: [this.bar]
});
this.myActiveBtn = Ext.getCmp("searchButton");
MapDisappear.views.Viewport.superclass.initComponent.call(this);
},
updateCard: function(idx,b) {
b.activate();
this.setActiveItem(idx,'slide');
}
});


// controllers - searchMap.js
var bigMap;


MapDisappear.controllers.SearchMap = Ext.regController("SearchMap", {
showMap: function() {

if (!this.mapPanel) {
this.mapPanel = this.render({
xtype: 'mapsearchcard'
}, "idSearchcard");

Ext.getCmp('idSearchcard').setActiveItem(this.mapPanel);
}
else {
Ext.getCmp('idSearchcard').setActiveItem(this.mapPanel, {
type: 'slide',
direction: 'right'
});
}

//MapDisappear.viewport.doComponentLayout();
//Ext.getCmp('idMapsearchcard').doComponentLayout(); //redo the layout so the button disappears
}
});


// other.js
MapDisappear.controllers.Other = Ext.regController("Other", {
gotoOther: function(data){
if (!this.otherPanel) {
this.otherPanel = this.render({
xtype: 'othercard'
});


MapDisappear.viewport.setActiveItem(this.otherPanel);
}
else {
MapDisappear.viewport.setActiveItem(this.otherPanel, {
type: 'slide',
direction: 'right'
});
}
}
});











Steps to reproduce the problem:

1. Launch the app
2. Click the 'Update Layout' button (text for the 2nd button's Xtemplate will appear)
3. Click on the second button labeled 'Other Page'.
4. Click on the 'Search' button in the bottom docked toolbar.
5. Click the 'Update Layout' button
6. Map will disappear


The result that was expected:

The map does not disappear


The result that occurs instead:

The map disappears

tpac
14 Aug 2011, 2:01 PM
Wierd question:
when viewed in broweser after the map disapear and you manually resize the browser window does it reapear?

jgostylo
15 Aug 2011, 4:24 AM
That is a great question and one that would make sense considering tabbing back and forth gets the map to appear.

The answer is yes. If, you resize the browser window the map reappears. Further, if you load the page, resize the browser window, and then go through the steps, the map will not disappear.

tpac
20 Sep 2011, 12:49 AM
Check that you don't have two components marked as fullscreen:true that are nested.
I think that is your problem