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
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