PDA

View Full Version : Tabs ribbon wider than content



Developer1729
3 Nov 2009, 2:19 AM
Is it possible to make ribbon with tabs names wider than content with tabs?

Developer1729
4 Nov 2009, 6:26 AM
I mean, for example, we have a lot of tabs and want to show a lot of them, but have very small area with tabs content. Does anyone know how to do it?

Developer1729
13 Nov 2009, 4:01 AM
I still didn't found the solution...

thaiat
13 Nov 2009, 4:06 AM
Doyou mean something like that ?



/**
* A custom toolbar that acts like the Microsoft Office 2007 ribbon menu. Usage :
*
* <pre><code>
* var window = new Ext.Window({
* width : 400,
* height : 200,
* tbar : new Viz.TabToolbar([{
* title : 'Module 1',
* items : [{
* text : 'Button 1'
* }, {
* text : 'Button 2'
* }]
* }, {
* title : 'Module 2',
* items : [{
* text : 'Button 2'
* }]
* }])
* });
* </code></pre>
*
* @class Viz.TabToolbar
* @extends Ext.TabPanel
*/
Viz.TabToolbar = Ext.extend(Ext.TabPanel, {
activeTab : 0,
frame : true,
plain : false,
border : false,
layoutOnTabChange : true,
defaultType : 'panel',
//bodyStyle : 'border-bottom:none',
style : 'border:none',
/**
* Constructor.
* @param {Array} config The array of each tab toolbar configuration
*/
constructor : function(config) {
config = [].concat(config); // forces config as an array
Ext.each(config, function(c) {
Ext.apply(c, {
frame : true,
xtype : 'container', // 'panel'
layout : 'hbox',
layoutConfig : {
align : 'stretchmax'
},
cls : 'x-toolbar',

defaultType : 'button'
});
});

this.cls = "x-toolbar";
this.items = config;
Viz.TabToolbar.superclass.constructor.call(this);
}
});

Ext.reg("vizTabToolbar", Viz.TabToolbar);

Developer1729
13 Nov 2009, 5:10 AM
Actually i don't use ExtJS for a long time and didn't get how to use your extension.
SOmething like this doesn't work...
var centercontent = new Ext.vizTabToolbar({
region: 'center',
items: [{
title: 'Tab 1',
html: 'A simple tab'
},{
title: 'Tab 2',
html: 'Another one'
}];

thaiat
13 Nov 2009, 5:30 AM
there is a sample code in the header of the file for the extension
Just use it

Developer1729
13 Nov 2009, 5:41 AM
My code looks like this:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<link rel="stylesheet" href="./css/standard.css" type="text/css" />
<link rel="stylesheet" href="./css/xtheme-gray-extend.css" type="text/css"/>
<link rel="stylesheet" href="./css/custom.css" type="text/css" />

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

Viz.TabToolbar = Ext.extend(Ext.TabPanel, {

activeTab : 0,

frame : true,

plain : false,

border : false,

layoutOnTabChange : true,

defaultType : 'panel',

//bodyStyle : 'border-bottom:none',

style : 'border:none',

/**

* Constructor.

* @param {Array} config The array of each tab toolbar configuration

*/

constructor : function(config) {

config = [].concat(config); // forces config as an array

Ext.each(config, function(c) {

Ext.apply(c, {

frame : true,

xtype : 'container', // 'panel'

layout : 'hbox',

layoutConfig : {

align : 'stretchmax'

},

cls : 'x-toolbar',



defaultType : 'button'

});

});



this.cls = "x-toolbar";

this.items = config;

Viz.TabToolbar.superclass.constructor.call(this);

}

});



Ext.reg("vizTabToolbar", Viz.TabToolbar);

</script>


<title id="pagetitle">fasdfasd</title>

<script type="text/javascript">

Ext.onReady(function() {
var window = new Ext.Window({

width : 400,

height : 200,

tbar : new Viz.TabToolbar([{

title : 'Module 1',

items : [{
text : 'Button 1'
}, {

text : 'Button 2'

}]
}, {

title : 'Module 2',

items : [{
text : 'Button 2'

}]

}])

});
window.show();
});
</script>



</head>
<body>

</body>
</html>
The page in Firefox is still empty...

thaiat
13 Nov 2009, 5:43 AM
change window to win

you also need to define the correct namespace in top of the extension
Ext.namespace("Viz");

Developer1729
13 Nov 2009, 5:47 AM
No changes.
Do you have ready simple page code?

thaiat
13 Nov 2009, 6:11 AM
I don't have a simple page
Do you have FireBug and did you try to debug the code ?

thaiat
13 Nov 2009, 6:18 AM
Install FireBug
Go to http://www.extjs.com/deploy/dev/examples/message-box/msg-box.html
Open FireBug and in the Console Execute window paste this code and click execute.



Ext.namespace("Viz");

Viz.TabToolbar = Ext.extend(Ext.TabPanel, {
activeTab : 0,
frame : true,
plain : false,
border : false,
layoutOnTabChange : true,
defaultType : 'panel',
//bodyStyle : 'border-bottom:none',
style : 'border:none',
/**
* Constructor.
* @param {Array} config The array of each tab toolbar configuration
*/
constructor : function(config) {
config = [].concat(config); // forces config as an array
Ext.each(config, function(c) {
Ext.apply(c, {
frame : true,
xtype : 'container', // 'panel'
layout : 'hbox',
layoutConfig : {
align : 'stretchmax'
},
autoHeight : true,
cls : 'x-toolbar',
defaultType : 'button'
});
});
this.cls = "x-toolbar";
this.items = config;
Viz.TabToolbar.superclass.constructor.call(this);
}

});
Ext.reg("vizTabToolbar", Viz.TabToolbar);

var win = new Ext.Window({
width : 400,
height : 200,
tbar : new Viz.TabToolbar([{
title : 'Module 1',
items : [{
text : 'Button 1'
}, {
text : "Button 2"
}]
}, {
title : 'Module 2',
items : [{
text : 'Button 2'
}]
}])
});
win.show();

Developer1729
16 Nov 2009, 6:15 AM
Thanks for help, but it isn't what i need.
I post here image with example how it have to work.

So - left side is controlled by tabs. Right side doesn't depend on tabs.