PDA

View Full Version : Add Element/HTMLElement to Toolbar



Dipish
15 Dec 2011, 3:15 AM
This seemingly simple operation that worked for me flawlessly in Ext3 is now troublesome in Ext4.

I want to add an element (not Component!) to a Toolbar. The docs (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Toolbar-method-add) state that it can be done.

add (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Toolbar-method-add)( Object (http://docs.sencha.com/ext-js/4-0/#!/api/Object)... args )Adds element(s) to the toolbar -- this function takes a variable number of arguments of mixed type and adds them to the toolbar.
Note: See the notes within Ext.container.Container.add (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.Container-event-add).
Parameters


args : Object (http://docs.sencha.com/ext-js/4-0/#!/api/Object)...The following types of arguments are all valid: - config (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button): A valid button config object - HtmlElement: Any standard HTML element - Field: Any form field - Item: Any subclass of Ext.toolbar.Item (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Item) - String: Any generic string (gets wrapped in a Ext.toolbar.TextItem (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.TextItem)). Note that there are a few special strings that are treated differently as explained next. - '-': Creates a separator element - ' ': Creates a spacer element - '->': Creates a fill element

However it doesn't work in practice:

If I specify a HTMLElement as Toolbar item (either in add() method or in items config object), I get an error "TypeError: Cannot convert object to primitive value"
If I specify an Ext.Element as Toolbar item it renders an empty button instead of using my element
So far I haven't been able to work around this. I hope somebody can help me with this.

mitchellsimoens
15 Dec 2011, 2:36 PM
This is working for me:


var panel = Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
width : 400,
height : 400,
title : 'Test',
dockedItems : [
{
xtype : 'toolbar',
dock : 'top',
items : [
{
text : 'Button'
}
]
}
]
});

var toolbar = panel.down('toolbar');

toolbar.add('<div>Hi</div>');

All it does is add a tbtext instance.

Dipish
16 Dec 2011, 3:59 AM
mitchellsimoens, thanks for the response! However, your solution has problems and doesn't work for me:
I am experimenting directly with the live preview in the docs (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Toolbar) and adding a {text: 'Sample text'} toolbar element renders a button with such text instead of a regular text node
This approach doesn't let me to add an existing HTML element or create one on the fly using Ext.DomHelper

It was so simple in Ext 3, I could do:

this.tbar = new Ext.Toolbar({ height: 50,
items: [
this.savingIndicator, // <- Inject an existing Element. I need that!


new Ext.Toolbar.Spacer({width: 120}),
{
xtype: 'button',
text: 'Action',
enableToggle: true
...
}
...


Do you know how this can be accomplished in Ext 4?
Many thanks in advance!

tvanzoelen
16 Dec 2011, 4:15 AM
If your element is already in the dom, then you should make a copy of that element I think.

Just access the retrieved element and get via the dom its innerHTML.

Dipish
16 Dec 2011, 4:40 AM
But I don't want to copy the element, I want to inject the original element into the toolbar!

See my example above. I have some sort of indicator element managed by my component. At some point I decide to put the element inside a toolbar (or elsewhere, it shouldn't matter). I definitely don't want to create a copy of the element because my component already has a reference to the element and it updates this element on state change.

Why did the developers remove Toolbar.addElement() method?

skirtle
16 Dec 2011, 8:55 AM
I think the docs are wrong.

These both work for me:


toolbar.add({xtype: 'tbtext', el: this.savingIndicator});


items: [
{
el: this.savingIndicator,
xtype: 'tbtext'
}, ...
]

Dipish
16 Dec 2011, 10:16 AM
I think the docs are wrong.

These both work for me:


toolbar.add({xtype: 'tbtext', el: this.savingIndicator});


items: [
{
el: this.savingIndicator,
xtype: 'tbtext'
}, ...
]

skirtle, wow, it works! I didn't know you can specify el as config parameter, there's no mentioning in the docs... I will leave a comment in the docs asking to fix that part.
Thank you very much, you're awesome! Question answered.