1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    26
    Vote Rating
    1
    steve.brownlee is on a distinguished road

      0  

    Default Unanswered: Toolbar items not being rendered or remembered

    Unanswered: Toolbar items not being rendered or remembered


    Have a simple test case that has me bamboozled. Here's the truncated, relevant code.

    I've got a view with a toolbar control in it.
    Code:
    Ext.define('MyApp.view.organization.List', {
        alias  : 'widget.organizationToolbar',
        extend : 'Ext.toolbar.Toolbar',
        title  : 'Organizations'
    });
    In my controller code, I listen for the click event on a test button I threw on the page:
    Code:
    this.control({
           '#testButton' : {
                 click : function () {
                       var toolbar = Ext.widget('organizationToolbar');
                       toolbar.add({ text : 'Sample' });
                       console.log(toolbar.items);
                 }
    });
    Every time I click the button, the toolbar.items object that I dump to the console has the button I just added in the array. However, it does not get rendered in the control. Also, no matter how many times I click the button, only one item is in the array.

    This seems like it should be simple to do, but apparently what I consider the obvious, logical way to do this is wrong.

    Any help on how I can properly add button to my toolbar would be helpful.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    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


    Ext.widget creates a new component instance so you are creating a new one and adding one item to the new instance. You need to resolve the real toolbar instead of using Ext.widget.
    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.

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    26
    Vote Rating
    1
    steve.brownlee is on a distinguished road

      0  

    Default


    Thanks for the reply, Mitchell I can't find any examples in the docs as to how to obtain a reference to the existing Toolbar. If you know where this documentation exists, I would greatly appreciate a link. I have a feeling that I'll be bookmarking it.

    - Steve

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    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


    It depends where in relation the button being clicked is to the toolbar.
    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.

  5. #5
    Sencha User
    Join Date
    Dec 2010
    Posts
    26
    Vote Rating
    1
    steve.brownlee is on a distinguished road

      0  

    Default


    I realize that may be the case, but I'm also interested in the case where I would want to update/add items to a toolbar independent of a user generated event. For example, a WebSocket event is triggered by my server, and the contents of the message are Toolbar items. I'll want to inject those items into my Toolbar, and, in this case, will not have an ExtJS-generated event to capture that has a reference to an element in the DOM.

    Perhaps I should just do an Ext.getCmp() call and incur all of that overhead. It may be expensive, but it gets the job done - at least I think it will. I'll need to test.

    Thanks again for the reply.

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,593
    Answers
    541
    Vote Rating
    324
    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


    Given you're using the MVC you may want to consider using refs. See the section 'Using refs' in this docs page:

    http://docs.sencha.com/ext-js/4-0/#!...app.Controller