PDA

View Full Version : [Solved] Toolbar not rendering



Kupper
30 Aug 2010, 9:04 AM
Hey dudes!

I'm new on this stuff and after a long fight with ExtJS, I gave up to the forums....


My scenary:
I have a Panel with a toolbar inside it.
My toolbar doesn't have items...
I want to add items dinamicaly.

The problem:
The toolbar doesn't render...

The code:

btNavegation.ui.js:

btNavegationUi = Ext.extend(Ext.Panel, {
height: 27,
autoShow: true,
autoHeight: true,
border: false,
autoWidth: true,
id: 'btnavegation',
initComponent: function() {
this.items = [
{
xtype: 'panel',
flex: 1,
autoShow: true,
border: false,
layout: 'vbox',
style: 'width: 80%;',
ref: 'pMenu',
id: 'menu',
toolBar: {
xtype: 'toolbar',
autoShow: true,
id: 'toolbar',
items: []
}
},
{
xtype: 'container',
hideBorders: true,
autoShow: true,
autoHeight: true,
tpl: '',
id: 'breadCrumbs'
}
];
btNavegationUi.superclass.initComponent.call(this);
}
});


btNavegation.js:

btNavegation = Ext.extend(btNavegationUi, {
initComponent: function() {
btNavegation.superclass.initComponent.call(this);

var items = {
xtype: 'button',
text: 'FooBar',
autoShow: true,
menu: {
xtype: 'menu',
autoShow: true,
items: [
{
xtype: 'doo',
text: 'Foo'
},
{
xtype: 'bar',
text: 'bar'
}
]
}
};
this.pMenu.toolBar.items = items;
}
});


The rendering:

var navegation = new btNavegation({
renderTo: Ext.get('navegation') //yes, I have an HTML div element called "navegation"
});
navegation.show();

That's it....thanks guys!

Kupper
31 Aug 2010, 3:25 AM
32 views and no reply? Oh God! :))
It seems to be a boring problem =p

steffenk
31 Aug 2010, 3:36 AM
instead

toolBar: {
xtype: 'toolbar',
autoShow: true,
id: 'toolbar',
items: []
}
use

tbar: {
autoShow: true,
id: 'toolbar',
items: []
}

and


this.pMenu.getTopToolbar().items = items

Kupper
31 Aug 2010, 10:19 AM
Ok, thnaks, I've tried...
The results:

btNavegation.ui.js:

btNavegationUi = Ext.extend(Ext.Panel, {
height: 27,
autoShow: true,
autoHeight: true,
border: false,
autoWidth: true,
id: 'btnavegation',
initComponent: function() {
this.items = [
{
xtype: 'panel',
flex: 1,
autoShow: true,
border: false,
layout: 'vbox',
style: 'width: 80%;',
ref: 'pMenu',
id: 'menu',
tbar: {
autoShow: true,
id: 'toolbar',
items: []
}
},
{
xtype: 'container',
hideBorders: true,
autoShow: true,
autoHeight: true,
tpl: '',
id: 'breadCrumbs'
}
];
btNavegationUi.superclass.initComponent.call(this);
}
});

btNavegation.js:

btNavegation = Ext.extend(btNavegationUi, {
initComponent: function() {
btNavegation.superclass.initComponent.call(this);

var items = {
xtype: 'button',
text: 'FooBar',
autoShow: true,
menu: {
xtype: 'menu',
autoShow: true,
items: [
{
xtype: 'doo',
text: 'Foo'
},
{
xtype: 'bar',
text: 'bar'
}
]
}
};
this.pMenu.getTopToolbar().items = items;
}
});

The error:
It says that items is not undefined (ext-all-debug.js line 14566), but when I debug, items is defined with what I assigned to it.

Any suggestions? Thanks once again guys, really.

Kupper
31 Aug 2010, 10:26 AM
I got that!

The problem was that on the line "this.pMenu.getTopToolbar().items = items;", I can't access directly the toolbar items property...so, I used the addItem() method:


this.pMenu.getTopToolbar().addItem(items);

Really thanks Mr. steffenk, hope to help you one day.

Kupper
29 Oct 2010, 5:20 AM
I'm having almost the same problem again....now I can't find how to get the items from that same toolbar.
I have tryied this.pMenu.getTopToolbar().getItens(), this.pMenu.getTopToolbar().items....but none of then seen to work. It's bad feeling so noob about this! lol

Any solutions?
Thanks guys!!

Kupper
3 Nov 2010, 2:36 AM
Well then, no answers?

[]'s

Condor
3 Nov 2010, 3:03 AM
Are you using Ext 3.2+? In that case it's:

this.pMenu.getTopToolbar().add(items);

Kupper
3 Nov 2010, 3:14 AM
Hey there Condor! Thanks man.

Yes, I'm using 3.2.1, and the this.pMenu.getTopToolbar().add(items); issue was solved, I just used the same thread to ask a similar question...

The problem is that now I'm trying to retrieve those Items to set specific handlers for each of then. I'm trying these this.pMenu.getTopToolbar().getItens() and this.pMenu.getTopToolbar().items....but none of then seen to work.

Thanks again!

[]'s

Condor
3 Nov 2010, 3:18 AM
"this.pMenu.getTopToolbar().items" does work, but you have to realize it's an Ext.util.MixedCollection and not an array.

Kupper
3 Nov 2010, 3:25 AM
Wonderful, thanks....I should pay more attention to the API Docs...
I'll try here and reply soon with the results, hope I can retribute one day.

Kupper
3 Nov 2010, 8:34 AM
Hello!

Problem solved:


var mixedItemCollection = this.pMenu.getTopToolbar().items;

mixedItemCollection.each(function(item){
item.menu.items.each(function(menuItem){
menuItem.on('click', myHandlerFunction);
});
});

Now I get the Items into a variable and than iterate then with the MixedCollection function "each", and finally, just indicates to the Item what to do on clicks, calling my function.

Thanks Condor...your way of helping is very good, makes me learn =)
Hope to retribute one day.

[]'s