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
    35,704
    Answers
    3356
    Vote Rating
    751
    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,108
    Answers
    83
    Vote Rating
    31
    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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar