PDA

View Full Version : TabPanel not resizing on oreintation change



Chromatik
22 Sep 2010, 12:36 PM
Hi,

I have a Panel containing icons [which will eventually be used for navigation] that are center aligned, when i change the orientation of the phone it does not redraw, can someone tell me what I'm doing wrong? Thanks.


Ext.setup({
onReady: function() {

var tabpanel = new Ext.TabPanel({
fullscreen: true,
// type: 'light',

dockedItems: [{
xtype: 'toolbar',
dock: 'top',
defaults: {
ui: 'mask'
},
layout: {
pack: 'center'
},
items: [
{ iconCls: 'refresh' },
{ iconCls: 'reply' },
{ iconCls: 'delete' },
]
}]
});

new Ext.Panel({
fullscreen: true,
layout: {
type: 'auto'
},
scroll:'vertical',
items: [tabpanel,{
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br><img src="img/lg_one.png"><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>'
}]
});
}
});

Theodosis
22 Sep 2010, 2:20 PM
try to use the monitorOrientation attribute on your tabpanel

evant
22 Sep 2010, 4:47 PM
You have a full screen panel with no layout, then you nest a full screen tab panel inside it. This is bad. What are you trying to do?

Chromatik
22 Sep 2010, 6:06 PM
I want to have a panel with a toolbar that is docked at the top, the content in the panel below would scrollable.
The tool bar would have icons which would be used to navigate to the next or previous card, which have the same structure.

Theodosis
23 Sep 2010, 7:29 AM
did you check those examples?
http://dev.sencha.com/deploy/touch/examples/

Chromatik
23 Sep 2010, 7:37 AM
I revised the code, so now the tabPanel will resize correctly on orientation change:


Ext.setup({
onReady: function() {

var tabpanel = new Ext.TabPanel({
fullscreen: true,
layout: {
type: 'auto'
},
scroll:'vertical',
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br><img src="img/lg_one.png"><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
defaults: {
ui: 'mask'
},
layout: {
pack: 'center'
},
items: [
{ iconCls: 'arrow_left'},
{ iconCls: 'delete'},
{ iconCls: 'arrow_right'}
]
}]
});

}
});

I would like to have this panel in a carousel with panels just like it [the content would be different], with the ability to swipe to through the carousel or use the icons in the toolbar to goto next or previous panel. Any help would be greatly appreciated.

Theodosis
23 Sep 2010, 8:04 AM
Ext.setup({
onReady: function() {

var carusel = new Ext.Panel({
xtype: 'carusel',
direction: 'horizontal',
indicator: false,
items: [{
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br><img src="img/lg_one.png"><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
}, { html: 'new card' }],
fullscreen: true,
layout: {
type: 'auto'
},
scroll:'vertical',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
defaults: {
ui: 'mask'
},
layout: {
pack: 'center'
},
items: [
{ iconCls: 'arrow_left'},
{ iconCls: 'delete'},
{ iconCls: 'arrow_right'}
]
}]
});

}
});



try that. You will need to set some handlers to your carusel and the buttons

Chromatik
23 Sep 2010, 10:52 AM
That works great!
Where can I find info on writing the handlers?
Thanks

Theodosis
23 Sep 2010, 11:24 AM
:p ok, you need to set the handler property of the toolbar items to a function, which should set the current card of the carusel, and also the cardchange event of the carusel to change the active item of your toolbar ( the second one is just visual, if you want to show the active tab ) You should check the documentation, it's really good and easy to understand :)

Chromatik
23 Sep 2010, 11:45 AM
Thanks for all you're help but I think I'm at a dead end, this stuff is over my head.
I'm a graphic designer with some HTML/CSS knowledge not to good with JS.
Thanks again.