PDA

View Full Version : [FIXED] TabPanel won't show content without a height set



danCTS
4 Dec 2011, 10:20 AM
I am using ST2 PR2 and Google Chrome

I have added a tab panel as a child item of my viewport. the content of the tabs will not show unless there is a fixed height set on the tab panel.


Ext.define('App.view.Viewport', {
extend: 'Ext.Panel',
config: {
fullscreen: true,
items: [
{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm'
}
]
}, {
xtype: 'tabpanel',
tabBarPosition: 'bottom',
items: [
{
xtype: 'homepanel'
}, {
xtype: 'registerpanel',
id: 'registerForm'
}
]
}
]
}
});

this is what i get with no height on the tab panel
29781

if i set a height on the tab panel my content will show.


Ext.define('App.view.Viewport', {
extend: 'Ext.Panel',
config: {
fullscreen: true,
items: [
{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm'
}
]
}, {
xtype: 'tabpanel',
height: 700,
tabBarPosition: 'bottom',
items: [
{
xtype: 'homepanel'
}, {
xtype: 'registerpanel',
id: 'registerForm'
}
]
}
]
}
});

this is what I get with a height set.
29780

rdougan
4 Dec 2011, 1:14 PM
You need to add a layout: 'fit' to your viewport, or else the TabPanel will not stretch to the size of your viewport.

danCTS
4 Dec 2011, 1:39 PM
i tried that earlier, but it loads the tab panel to the right of the viewport panel if I do that.


Ext.define('App.view.Viewport', { extend: 'Ext.Panel',
config: {
fullscreen: true,
layout: 'fit',
items: [
{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm',
action: 'newLogin'
}
]
}, {
xtype: 'tabpanel',
tabBarPosition: 'bottom',
items: [
{
xtype: 'homepanel'
}, {
xtype: 'registerpanel',
id: 'registerForm'
}
]
}
]
}
});

that code results in this
29788

rdougan
4 Dec 2011, 1:45 PM
Sorry, I cannot reproduce this with a similar simple test case:


Ext.application({
launch: function() {
Ext.Viewport.add({
fullscreen: true,
layout: 'fit',
items: [
{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm',
action: 'newLogin'
}
]
},
{
xtype: 'tabpanel',
tabBarPosition: 'bottom',
items: [
{
title: 'home',
html: 'home'
},
{
title: 'register',
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
label: 'Test'
}
]
}
],
id: 'registerForm'
}
]
}
]
});
}
});

danCTS
4 Dec 2011, 2:10 PM
well the only difference is the way my viewport is created.

app.js


Ext.application({ name: 'App',
controllers: ['Users', 'Sessions'],
stores: ['Users'],
autoCreateViewport: false,
init: function() {
return Ext.create('App.view.Viewport');
}
});

Viewport.js

Ext.define('App.view.Viewport', { extend: 'Ext.Panel',
config: {
fullscreen: true,
layout: 'fit',
items: [
{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm',
action: 'newLogin'
}
]
}, {
xtype: 'tabpanel',
tabBarPosition: 'bottom',
items: [
{
xtype: 'homepanel'
}, {
xtype: 'registerpanel',
id: 'registerForm'
}
]
}
]
}
});

danCTS
4 Dec 2011, 2:49 PM
And just to confirm your "simple" example below

Ext.application({
name: 'App',
launch: function() {
Ext.Viewport.add({
fullscreen: true,
layout: 'fit',
items: [
{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm',
action: 'newLogin'
}
]
}, {
xtype: 'tabpanel',
tabBarPosition: 'bottom',
items: [
{
title: 'home',
html: 'home'
}, {
title: 'register',
html: 'register'
}
]
}
]
});
}
});

results in this

29789

just to note this is using sencha-touch.css and sencha-touch-all-debug.js

danCTS
4 Dec 2011, 6:43 PM
I made an example like you posted outside of my rails app, I have included the zip file with the exact files i am testing in it. When I view that in Chrome or on my Andriod phone it looks like this. I am using Ubuntu 11.10 if that helps, but like I said it looks the same on my Android phone. To use my example all you have to do is extract it and add ST2 in a directory named touch inside the extracted example directory.

29790

rdougan
5 Dec 2011, 1:15 AM
Are you sure you are running PR2? http://www.sencha.com/products/touch/download/

I cannot replicate this on my Mac (Chrome + Safari) or on my iOS devices.

http://f.cl.ly/items/2h0G1u1m1U2Q3q3S1x3B/Screen%20Shot%202011-12-05%20at%201.14.08%20AM.png

danCTS
5 Dec 2011, 4:54 AM
Yes I am using PR2 for sure, just to verify my sanity I downloaded it when I posted my last example . In your screen shot the tab panel content is not shown like my original bug report. Then you said to add layout: 'fit' to the viewport, which adds the tab panel to the right of the viewport panel like in the screenshots I provided.

I mean do you guys only test in OSX and on IOS? That would explain why there is a million bugs in EXTJS 4 and ST2.

danCTS
5 Dec 2011, 8:38 AM
FWIW i also tested on Chrome and Ubuntu 11.04 at my office with that example you gave with the same result. If I remove layout: 'fit' from the viewport then the content of the tab panel does not show. If I put layout: 'fit' on the viewport it then puts the tabpanel to the right of the viewport exactly the same size. Certainly seems like a bug to me.

29802

rdougan
5 Dec 2011, 10:07 AM
I mean do you guys only test in OSX and on IOS? That would explain why there is a million bugs in EXTJS 4 and ST2.

For Sencha Touch, we test on desktop browsers (Safari, Chrome, on OSX and Windows) and about 25 iOS and Android devices. With Ext JS, we test on pretty much every browser - and all this is done every time we make a commit to ensure there are no new issues.

Anyhow, not that it matters, as I cannot replicate this issue at all. Could you include *all* the files you are using, including your index.html file, application JS files, CSS files and our Frame work files, please.

danCTS
5 Dec 2011, 10:39 AM
In your screenshot where is the home tab content ??????????????????

I have tested on three different machines with Ubuntu 11.04 or Ubuntu 11.10 with Chrome 15.0.874.121 and I get the same result every time.

link to example with ST2PR2 included

http://dl.dropbox.com/u/23939377/example.zip

link to full res screenshot with layout: 'fit' on the viewport

http://dl.dropbox.com/u/23939377/example_with_layout_fit_on_viewport.png

link to full res screenshot without layout: 'fit on the viewport

http://dl.dropbox.com/u/23939377/example_without_layoutfit_on_viewport.png (http://dl.dropbox.com/u/23939377/example_without_layoutfit_on_viewport.png%20)

danCTS
7 Dec 2011, 4:59 AM
Any news on this?

danCTS
7 Dec 2011, 5:50 AM
Screenshots from OS X Lion. Latest Safari.

Without layout: 'fit'

29853

With layout: 'fit'

29854

Now I've verified on OS X/Safari that this issue persists. Back to my original complaint, without an explicit height on the tab panel that content isn't visible. I think it's pretty poor that it takes 2 pages of back and forth to finally get the point across.

Jamie Avins
7 Dec 2011, 9:11 AM
Rob must be working too hard (probably had a caching problem), PR2 did have a problem with your example. It looks like this is already fixed for the upcoming PR3...:

PR2/PR3 without 'fit':
29869

PR2 with 'fit':
29870

The upcoming PR3 with 'fit':
29871

Jamie Avins
7 Dec 2011, 9:14 AM
Also, I apologize for the difficulty in communication.

danCTS
7 Dec 2011, 9:46 AM
Thanks Jamie, and I appreciate the apology. I am glad that this will be resolved in the next release. I must say though if your developers are going to respond to bug reports in the forum, they need to be a bit more helpful. Telling me "sorry can't duplicate on my Mac" is not very helpful in my opinion. I am trying to help make your software better by using your developer previews and reporting bugs, your developers should be a bit more receptive and helpful.

Also would be great if you had a real ticketing / bug tracker. That way we could see at a glance what has been resolved in upcoming releases.

Thanks,
Daniel