1. #1
    Sencha User
    Join Date
    Apr 2010
    Posts
    100
    Vote Rating
    0
    Answers
    1
    Dipish is an unknown quantity at this point

      0  

    Default Answered: Add Element/HTMLElement to Toolbar

    Answered: Add Element/HTMLElement to Toolbar


    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 state that it can be done.
    add( 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.
    Parameters
    • args : Object...The following types of arguments are all valid: - config: A valid button config object - HtmlElement: Any standard HTML element - Field: Any form field - Item: Any subclass of Ext.toolbar.Item - String: Any generic string (gets wrapped in a 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.

  2. I think the docs are wrong.

    These both work for me:

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,524
    Vote Rating
    873
    Answers
    3563
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This is working for me:

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Apr 2010
    Posts
    100
    Vote Rating
    0
    Answers
    1
    Dipish is an unknown quantity at this point

      0  

    Default


    mitchellsimoens, thanks for the response! However, your solution has problems and doesn't work for me:
    1. I am experimenting directly with the live preview in the docs and adding a {text: 'Sample text'} toolbar element renders a button with such text instead of a regular text node
    2. 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:
    Code:
    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!

  5. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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.

  6. #5
    Sencha User
    Join Date
    Apr 2010
    Posts
    100
    Vote Rating
    0
    Answers
    1
    Dipish is an unknown quantity at this point

      0  

    Default


    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?

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,614
    Vote Rating
    327
    Answers
    544
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I think the docs are wrong.

    These both work for me:

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

  8. #7
    Sencha User
    Join Date
    Apr 2010
    Posts
    100
    Vote Rating
    0
    Answers
    1
    Dipish is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by skirtle View Post
    I think the docs are wrong.

    These both work for me:

    Code:
    toolbar.add({xtype: 'tbtext', el: this.savingIndicator});
    Code:
    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.