1. #1
    Sencha User
    Join Date
    Apr 2010
    Posts
    100
    Answers
    1
    Vote Rating
    0
    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
    36,780
    Answers
    3465
    Vote Rating
    833
    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
    Answers
    1
    Vote Rating
    0
    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,114
    Answers
    83
    Vote Rating
    30
    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
    Answers
    1
    Vote Rating
    0
    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,580
    Answers
    540
    Vote Rating
    314
    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
    Answers
    1
    Vote Rating
    0
    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.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi