PDA

View Full Version : [UNKNOWN][3.0.2] Grouptab panel UI issue on IE.



kagupta@quark.com
1 Dec 2009, 2:34 AM
Hi,

Using grouptabpanel in a window of extjs. Please copy the code of grouptabscomplex.html and paste in folder ext-3.0.2 2\ext-3.0.2\examples\layout\.

Open the sample in IE. A window with group tab panel is displayed. But in IE rounded corners are not properly displayed. This works fine on other browsers.

grouptabscomplex.html


<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />



<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>

<link rel="stylesheet" type="text/css" href="../ux/css/ux-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript" src="../ux/ux-all-debug.js"></script>

<!-- EXAMPLES -->
<script type="text/javascript" src="../shared/examples.js"></script>

<script type="text/javascript">
Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var win;
var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
}
}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
}, {
region: 'east',
title: 'East Side',
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 1, // second tab initially active
tabPosition: 'bottom',
items: [{
html: '<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll: true
}, new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
})
}, {
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: 'West',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: {
type: 'accordion',
animate: true
},
items: [{
contentEl: 'west',
title: 'Navigation',
border: false,
iconCls: 'nav' // see the HEAD section for style used
}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
border: false,
iconCls: 'settings'
}]
},
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
contentEl: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}, {
contentEl: 'center2',
title: 'Center Panel',
autoScroll: true
}]
})]
});
// get a reference to the HTML element with id "hideit" and add a click listener to it
Ext.get("hideit").on('click', function(){
// get a reference to the Panel that was created with id = 'west-panel'
var w = Ext.getCmp('west-panel');
// expand or collapse that Panel based on its collapsed property state
w.collapsed ? w.expand() : w.collapse();
});

/*********Creating grouptabpanel window over viewport ***************/
if(!win){
win = new Ext.Window({
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
items:[{
xtype: 'grouptabpanel',
tabWidth: 130,
activeGroup: 0,
items: [{
mainItem: 0,
items: [{
xtype: 'portal',
title: 'Dashboard',
tabTip: 'Dashboard tabtip',
items:[{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
html: "1st tab"
}]
}]
}, {
expanded: true,
items: [{
title: 'Configuration',
tabTip: 'Configuration tabtip',
style: 'padding: 10px;',
html: "2nd tab"
}]
}]
}],
buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show();

});
</script>
</head>
<body>
<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
<div id="west" class="x-hide-display">
<p>Hi. I'm the west panel.</p>
</div>
<div id="center2" class="x-hide-display">
<a id="hideit" href="#">Toggle the west region</a>
</div>
<div id="center1" class="x-hide-display">
<p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
</div>
<div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south" class="x-hide-display">
<p>south - generally for informational stuff, also could be for status bar</p>
</div>
</body>
</html>


Screen shot is attached.

regards,
Kapil

jsakalos
1 Dec 2009, 3:30 PM
Do you think it is a bug? If so, I can move this thread to Bugs.

kagupta@quark.com
1 Dec 2009, 8:10 PM
Yes, please do so.

Thanks
Kapil

kagupta@quark.com
9 Dec 2009, 5:36 AM
Any update on this.

In addition if Ext.TabPanel panel is in view port and then when grouptabpanel is displayed. Tab text starts showing Tabs as hyperlink as displayed in thumbnail attached.


Thanks
Kapil

jsakalos
9 Dec 2009, 9:25 AM
Sorry, I overlooked this thread at that time, but I moved it to Bugs right now. Should it be a make-break point of your project, send an e-mail to support@extjs.com please.

paubach
15 Feb 2011, 5:16 AM
Any update on this? I'm experiencing same problem with Ext 3.3.0

jsakalos
15 Feb 2011, 3:05 PM
You can try it with Ext 3.3.1 (or the latest svn) and if it's still not fixed I'd suggest to open a support ticket.

paubach
16 Feb 2011, 4:31 AM
Tried with same results. GroupTabPanel isn't in the Ext JS core. is it supported anyway?

Thanks,
Pau

jsakalos
16 Feb 2011, 1:16 PM
It is an example and as such can contain unfinished or demonstration-only code. You can try, you'll see what devels reply; it can be "example-only" or "do this to fix it".