PDA

View Full Version : Toolbar with VBox layout?



arthurakay
22 Sep 2009, 7:45 AM
I'm trying to stack buttons and form fields within my toolbar, and I'm not having much success.

I know that the Toolbar() object supports layouts in 3.0, so I need help understanding what I'm doing wrong here:



/**
* @class Basan.UI.FilterToolbar
* @namespace Basan.UI
* @extends Ext.Toolbar
* @constructor
* @param {object} configObj
*/
Basan.UI.FilterToolbar = function (configObj) {
var thisObject = this;

var toggleFilters = new Ext.Action({
text: 'Show Filters',
handler: function() {
gridFilters.show();
thisObject.doLayout();
}
});

var actionButtons = new Ext.ButtonGroup({
items: [
new Ext.Button(toggleFilters)
]
});

var gridFilters = new Ext.ButtonGroup({
hidden: true,
items: [
new Ext.form.TextField(),
new Ext.form.TextField()
]
});

Ext.apply(
this,
{
layout: 'vbox',
items: [
actionButtons,
gridFilters
]
}
);
Basan.UI.FilterToolbar.superclass.constructor.apply(thisObject, arguments);

};
Ext.extend(Basan.UI.FilterToolbar, Ext.Toolbar, {});


The toolbar renders fine, and the button works... but the button groups are not stacked vertically. See attached photo.

Am I doing something wrong? Or does the Toolbar not correctly support vbox layouts?

Animal
22 Sep 2009, 7:51 AM
try



configObj = Ext.apply({
layout: 'vbox',
items: [
actionButtons,
gridFilters
]
}, configObj);
Basan.UI.FilterToolbar.superclass.constructor.call(this, configObj);

arthurakay
22 Sep 2009, 8:01 AM
Thanks Animal. However, using that snippet prevents anything in the toolbar from rendering. No errors, but no toolbar elements on the screen. (My GridPanel and everything else render just fine.)

Just to be clear, here's the whole class:


Basan.UI.FilterToolbar = function (configObj) {
var thisObject = this;

var toggleFilters = new Ext.Action({
text: 'Show Filters',
handler: function() {
gridFilters.show();
thisObject.doLayout();
}
});

var actionButtons = new Ext.ButtonGroup({
items: [
new Ext.Button(toggleFilters)
]
});

var gridFilters = new Ext.ButtonGroup({
//hidden: true,
items: [
new Ext.form.TextField(),
new Ext.form.TextField()
]
});

configObj = Ext.apply({
layout: 'vbox',
items: [
actionButtons,
gridFilters
]
}, configObj);
Basan.UI.FilterToolbar.superclass.constructor.call(this, configObj);

};
Ext.extend(Basan.UI.FilterToolbar, Ext.Toolbar, {});

Animal
22 Sep 2009, 8:04 AM
What does the DOM look like?

arthurakay
22 Sep 2009, 8:25 AM
I've attached a screenshot from Firebug. It appears that the DOM elements are there, but they're hidden.

Exploring the my GridPanel objects in Firebug, I can see the topToolbar property which appears to have the signature of my FilterToolbar() class. The "disabled" and "hidden" properties of the topToolbar are both false.

Animal
22 Sep 2009, 10:03 AM
Is vbox what you need though? Wouldn't acnhor be better? Each item gets anchor: '100%'

arthurakay
22 Sep 2009, 10:04 AM
I'll give that a shot... I thought maybe using VBox was the appropriate way to go. I'll let you know what I find.

Animal
22 Sep 2009, 10:25 AM
You might try



layout: {
type: 'table',
columns: 1
}

arthurakay
22 Sep 2009, 10:36 AM
You might try



layout: {
type: 'table',
columns: 1
}


BINGO. That worked like a charm. Thank you!

I'm still a bit curious why the VBox didn't work though...

Animal
22 Sep 2009, 10:39 AM
I don't know why it would hide things, but it's a size-allocating layout, so not suitable for content-sized things like toolbars.

k0smita
14 May 2010, 7:14 AM
I have a window with toolbar and to use vbox and preserve toolbar I used dummy container, sth like this


var fill = {
xtype: 'container',
id: 'fill',
layout: "vbox",
layoutConfig:{
align: "stretch"
},
items:[item1, item2]
};

var MainWindow = new Ext.Window({
id: 'test',
renderTo: Ext.getBody(),
width: 1500,
height: 250,
tbar: topToolBar,
layout:'fit',
items: [fill]
});