PDA

View Full Version : Ext.ux.UniversalUI doesn't work when put into other panel



iame.wang
17 Sep 2010, 2:50 AM
i use ipad safari to browse the example--kitchensink in sencha touch 0.93, if without any changes, when ipad rotate, Ext.ux.UniversalUI work well.

But when I did a little changes: put the Ext.ux.UniversalUI into a simple Panel, Ext.ux.UniversalUI will not wok when orientation changed, why?

in sink.Main function:


//remove fullscreen config from class difination
this.ui=new Ext.ux.UniversalUI({
title: Ext.is.Phone ? 'Sink' : 'Kitchen Sink',
useTitleAsBackText: false,
navigationItems: sink.Structure,
buttons: [{xtype: 'spacer'}, this.sourceButton],
listeners: {
navigate : this.onNavigate,
scope: this
}
});
//put Ext.ux.UniveralUI into my panel
this.ui2 = new Ext.Panel({
fullscreen: true,
layout: 'card',
monitorOrientation:true,
dockedItems:[{
xtype:'toolbar',
dock:'top',
items:[{text:'one'},{xtype:'spacer'},{text:'two'}]
}],
items:[this.ui]
});

iame.wang
17 Sep 2010, 7:41 PM
Yeah!, i got it !

in sencha touch 0.93,the container did not dispatch 'orientationchange' event to sub component. you should do it manually:


this.ui = new Ext.ux.UniversalUI({
title: Ext.platform.isPhone ? 'Sink' : 'Kitchen Sink',
navigationItems: sink.Structure,
buttons: [{xtype: 'spacer'}, this.sourceButton],
listeners: {
navigate : this.onNavigate,
scope: this
}
});
this.ui2=new Ext.Panel({
fullscreen:true,
items:[this.ui],
layout:'card',
dockedItems:[{
xtype:'toolbar',
dock:'top',
items:[{text:'one'},{xtype:'spacer'},{text:'two'}]
}],
listeners:{
orientationchange:function(comp,orientation,w,h){
comp.items.each(function(item,index,length){
item.setOrientation(orientation,w,h);
});
}
}
});

omulriain
18 Sep 2010, 3:42 PM
I am pretty sure you will need something similar to the layoutOrientation function provided in kitchen sink to be decalred in your bigger container. then that container will need to call the function for its children. Anyone, "please correct me if that is wrong"!

layoutOrientation : function(orientation, w, h) {
if (!Ext.is.Phone) {
if (orientation == 'portrait') {
this.navigationPanel.hide(false);
this.removeDocked(this.navigationPanel, false);
if (this.navigationPanel.rendered) {
this.navigationPanel.el.appendTo(document.body);
}
this.navigationPanel.setFloating(true);
this.navigationPanel.setHeight(400);
this.navigationButton.show(false);
}
else {
this.navigationPanel.setFloating(false);
this.navigationPanel.show(false);
this.navigationButton.hide(false);
this.insertDocked(0, this.navigationPanel);
}
this.navigationBar.doComponentLayout();
}

Ext.ux.UniversalUI.superclass.layoutOrientation.call(this, orientation, w, h);
}
});

omulriain
18 Sep 2010, 3:44 PM
never mind I see that you like myself, have provided updates to your posts.

iame.wang
20 Sep 2010, 12:41 AM
Another solution is set monitorOrientation to true when create Ext.ux.UniversalUI:


//remove fullscreen config from class difination
this.ui=new Ext.ux.UniversalUI({
title: Ext.is.Phone ? 'Sink' : 'Kitchen Sink',
useTitleAsBackText: false,
monitorOrientation :true,
navigationItems: sink.Structure,
buttons: [{xtype: 'spacer'}, this.sourceButton],
listeners: {
navigate : this.onNavigate,
scope: this
}
});
//put Ext.ux.UniveralUI into my panel
this.ui2 = new Ext.Panel({
fullscreen: true,
layout: 'card',
monitorOrientation:true,
dockedItems:[{
xtype:'toolbar',
dock:'top',
items:[{text:'one'},{xtype:'spacer'},{text:'two'}]
}],
items:[this.ui]
});


but when you start the page with 'portrait' orientation,tap the 'Navigation' button,the navigationPanel can't show.
you should rotate to 'landscape' orientation,then rotate back to 'portrait' orientation and tap the 'Navigation' button,the navigationPanel will show