PDA

View Full Version : Creating a toolbar from existing elements



outer_edge
20 Sep 2010, 1:29 AM
Hi all

I'm trying to create a toolbar from existing elements. Instead of the toolbar being creating on one line. I'm seeing a doubling up effect. So one button would be on the first line, the second button is on the second line, etc...

Any help would be appreciated. Thanks




var toolbar = Ext.get('toolbar');
var toogleButtonsPlacement = toolbar.query('div');
var b, textContent, id;
var buttonCollection = [];

//Create buttons
for (var buttonPosition in toogleButtonsPlacement) {
textContent = toogleButtonsPlacement[buttonPosition].textContent;
id = GIS.Navigation.idFromText(textContent);
if (id) {
buttonCollection.push(new Ext.Button({
id: id + 'Button',
text: textContent,
enableToggle: true,
toggleHandler: GIS.Navigation.buttonEvent,
pressed: false,
iconCls: id + 'Button toolbar',
state: true,
width: 100
}));
}
}
buttonCollection.push(new Ext.Toolbar.Separator());

//Remove existing elements before applying new ones
while (toolbar.dom.firstChild) {
toolbar.dom.removeChild(toolbar.dom.firstChild);
}

this.toolbar = new Ext.Toolbar({
text: 'Navigation',
renderTo: 'toolbar',
height: 50,
items: buttonCollection,
layout: 'anchor'
});

jay@moduscreate.com
21 Sep 2010, 5:07 AM
Hi all

I'm trying to create a toolbar from existing elements. Instead of the toolbar being creating on one line. I'm seeing a doubling up effect. So one button would be on the first line, the second button is on the second line, etc...

Any help would be appreciated. Thanks




var toolbar = Ext.get('toolbar');
var toogleButtonsPlacement = toolbar.query('div');
var b, textContent, id;
var buttonCollection = [];

//Create buttons
for (var buttonPosition in toogleButtonsPlacement) {
textContent = toogleButtonsPlacement.textContent;
id = GIS.Navigation.idFromText(textContent);
if (id) {
buttonCollection.push(new Ext.Button({
id: id + 'Button',
text: textContent,
enableToggle: true,
toggleHandler: GIS.Navigation.buttonEvent,
pressed: false,
iconCls: id + 'Button toolbar',
state: true,
width: 100
}));
}
}
buttonCollection.push(new Ext.Toolbar.Separator());

//Remove existing elements before applying new ones
while (toolbar.dom.firstChild) {
toolbar.dom.removeChild(toolbar.dom.firstChild);
}

this.toolbar = new Ext.Toolbar({
text: 'Navigation',
renderTo: 'toolbar',
height: 50,
items: buttonCollection,
[B] layout: 'anchor'
});


What do you expect? you're using the anchor layout.

outer_edge
21 Sep 2010, 6:12 AM
Palm of hand hits head, doh!

Thanks, Should have had my coffee.

jay@moduscreate.com
21 Sep 2010, 8:46 AM
No worries dude. We all have our days. Even the best of us.