PDA

View Full Version : card layout in landscape + phonegap problem



dhthoff
30 Jan 2011, 12:01 AM
hi,

after some digging around i got orientation change with phonegap to work, but now, while in landscape, when i do a cardswitch from my main menu the following cards and also the docked toolbar move up. Once i rotate it gets layed out correcly again. No problems at all in portrait.:((

my main ui..

var Main = Ext.extend(Ext.Panel, {
title : 't',
fullscreen : true,
layout : 'card',
cardSwitchAnimation : 'slide',
items : [],

menuStore : {},
mainMenu : {},

toolbar : {},
toolbarDocked : true,

// keep initial width/height
w : window.innerWidth,
h : window.innerHeight,

constructor : function(config) {

config = Ext.apply( {}, config);

Main.superclass.constructor.call(this, config);

this.backButton = new Ext.Button( {
text : 'Back',
ui : 'back',
handler : this.popViewStack,
scope : this,
hidden : true
});

this.toolbar = new Ext.Toolbar( {
dock : 'top',
title : 't',
items : [ this.backButton ]
});

Ext.regModel('NavItem', {
fields : [ 'title', 'type', 'file' ]
});

this.menuStore = new Ext.data.Store( {
model : 'NavItem',
data : [ {
title : 'Introduction',
type : 'page',
file : 'intro.html'
}, {
title : 'Guide',
type : 'page',
file : 'guide.html'
}, {
title : 'album1',
type : 'album',
album : 'album1'
}, {
title : 'About',
type : 'page',
file : 'about.html'
} ]
});

this.mainMenu = new Ext.List( {
title : 't',
store : this.menuStore,
itemTpl : '{title}',
flex : 1,
listeners : {
itemtap : this.onMainMenuTap,
scope : this
}
});

this.addDocked(this.toolbar);

this.items.add(this.mainMenu);

this.doLayout();

},

backButton : {},

pushViewStack : function(view) {
this.add(view);
this.setActiveItem(this.items.length - 1);
this.toolbar.setTitle(view.title);
if (this.items.length == 2) {
this.backButton.show('fade');
}
},

popViewStack : function() {
if (this.toolbarDocked == false) {
this.addDocked(this.toolbar);
}
var last = this.getActiveItem();
this.setActiveItem(this.items.length - 2, {
type : 'slide',
reverse : true,
after : function(a, b) {
mainUI.items.remove(last, true);
}
});
if (this.items.length == 2) {
this.backButton.hide('fade');
}
this.toolbar.setTitle(this.getActiveItem().title);
},

onMainMenuTap : function(list, index, item, event) {
record = list.getRecord(item);
type = record.get('type');
if (type == 'page') {
var pagePanel = new Ext.Panel( {
title : record.get('title'),
scroll : 'vertical',
styleHtmlContent : true
});
pagePanel.setLoading(true, true);
this.pushViewStack(pagePanel);
Ext.Ajax.request( {
url : record.get('file'),
callback : function(opts, success, response) {
pagePanel.update(response.responseText);
pagePanel.setLoading(false);
}
});

} else if (type == 'album') {
this.removeDocked(this.toolbar);
this.toolbarDocked = false;
var album = record.get('album');
this.setLoading(true, true);
Ext.Ajax.request( {
url : [ album, '/album.js' ].join(''),
callback : function(opts, success, response) {
a = eval(response.responseText);
var pictureViewer = new PhotoViewer( {
album : a
});
mainUI.pushViewStack(pictureViewer);
mainUI.setLoading(false);
}
});

}
},

ooc : function() {
/*
* for some strange reason this works. im getting "to landscape" in the
* console when rotation to portrait and vice versa though
*/
if (Ext.getOrientation() == "landscape") {
console.log('to landscape');
this.setOrientation(Ext.getOrientation(), this.w, this.h);
} else {
console.log('to porttrait');
this.setOrientation(Ext.getOrientation(), this.h, this.w);
}
}

});

and in index.html

function onDeviceReady()
{
Ext.setup({
onReady : function(){
mainUI = new Main({});
window.addEventListener("orientationChanged", function() {
mainUI.ooc();
});
}
});
}

dhthoff
31 Jan 2011, 9:03 AM
nvm, i figured it out.

window.orientation is never updating, always stays at 0. i modified phonegap to also pass width and height to the orientaionChanged event and then modified sencha touch to ignore window.orientation and only work with window.innerHeight/Width.



document.addEventListener('orientationChanged', function(e) {
window.innerHeight = e.height;
window.innerWidth = e.width;
Ext.Viewport.onResize();
});

Ext.Viewport.getSize = function() {
return {
width : window.innerWidth,
height : window.innerHeight
};
};

Ext.Viewport.getOrientation = function() {
return (window.innerHeight > window.innerWidth) ? 'portrait' : 'landscape';
};