Problem with dynamically updated TitleBar

[mystere13]

Hi,

I am trying to add a button on a titlebar trought a controller.

Here is the view (Ext.Panel):

items: [
    {
         xtype: 'titlebar',
         docked: 'top',
         title: 'Settings',
         ui: 'dark',
         id: 'settingsTitleBar',
         items: [
             {
                  iconCls: 'refresh', 
                  iconMask: true,
                  align: 'right',
                  itemId: 'refreshButton',
             },
         ],
     },
     {
         xtype: 'toolbar',
         id: 'settingsToolbar',
         docked: 'top',
         ui: 'neutral',
         defaults: {
              iconMask: true,
              ui: 'plain',
         },
         scrollable: {
             direction: 'horizontal',
         },
         items: [
             {
                 iconCls: 'user',
                 itemId: 'userButton',
             },
             // others items here...
         ],
         layout: {
             pack: 'center',
             align: 'center',
         },
    },
]
...

Here is my controller:

onInitialize: function (comp, eOpts) {
   // adding button on titlebar is not working
    var titleBar = Ext.getCmp('settingsTitleBar').items.get(2);
    // adding button on toolbar is working perfectly
    // var titleBar = Ext.getCmp('settingsToolbar');
    titleBar.add({
        iconCls: 'add', 
        iconMask: true,
        align: 'right',
        itemId: 'addTagButton',
    });
}

After onInitialize function, the button is correctly added in settingsTitleBar's items but I can't see it on the view... It looks like a "repaint" is missing.


console.log(Ext.getCmp('settingsTitleBar')) :
items: Array[2]

keys: Array[2]

0: "refreshButton"
1: "addTagButton"
length: 2

[mystere13]

Problem still unanswered but I find another way to do that:

Creating all the buttons with hidden: true and use show()/hide() method from the controller...

[ehboym]

Hi,

Your code does not create an object to add to the titleBar. You can not add a configuration block without creating an object.

Try:

onInitialize: function (comp, eOpts) {
    var titleBar = Ext.getCmp('settingsTitleBar').items.get(2);
    var button = Ext.create('Ext.Button', {
                                                              text:'Add', 
                                                              iconCls: 'add', 
                                                              iconMask: true, 
                                                              align: 'right',  
                                                            itemId: 'addTagButton'
                                                            });
    titleBar.add(button);
}

Give the target toolbar an ID so you can fetch it using getCmp and that way you will also know that you are fetching the right item.

Erez

[mitchellsimoens]

var titleBar = Ext.getCmp('settingsTitleBar').items.get(2);

Use ComponentQuery instead of that messiness and you don't have to create a button, you can pass in a config object.

This little test works for me:

Ext.Viewport.add({
    xtype  : 'titlebar',
    docked : 'top',
    title  : 'Test',
    items  : [
        {
            text  : 'One',
            align : 'left'
        },
        {
            text  : 'Two',
            align : 'left'
        },
        {
            text  : 'Three',
            align : 'right'
        },
        {
            text    : 'Add Button',
            align   : 'right',
            handler : function(button) {
                var titlebar = button.up('titlebar');

                titlebar.add({
                    text  : 'Added Button',
                    align : 'right'
                });
            }
        }
    ]
});

[ehboym]

Hi mystere13

If you managed to fix it post the working source and set the thread to "answered" so we can all learn from your experience.


Thanks

Erez

[mystere13]

Hi,

I didn't fix the initial problem. I finally used another way which creates all buttons with hidden: true while lauching the app. Then I use show()/hide() to display only buttons I need depending the sub view I switch on.

...
items: [
    {
            xtype: 'titlebar',
            docked: 'top',
            title: 'Settings',
            ui: 'dark',
            id: 'settingsTitleBar',
            items: [
                    {
                        iconCls: 'add', 
                        iconMask: true,
                        align: 'right',
                        id: 'addTagButton',
                        hidden: true,
                    },
                    {
                        iconCls: 'add', 
                        iconMask: true,
                        align: 'right',
                        id: 'addCategoryButton',
                        hidden: true,
                    }
           ],
    },
...

onTagsButtonTap: function (button, e, eOpts) {
        var view = Ext.create('LuckyKangaroo.view.settings.TagsList');
        this.showView(view);
        Ext.getCmp('addTagButton').show();
},

showView: function (view) {
        // get containers
        var settingsView = Ext.getCmp('settingsView')
        var titleBar = Ext.getCmp('settingsTitleBar').items.get(2);
        // update view
        settingsView.removeAll();
        settingsView.add(view);
        // update title
        settingsView.items.get(0).setTitle(view.getTitle());
        // hide useless titlebar buttons
        var buttons = titleBar.getInnerItems();
        Ext.Array.each(buttons, function(button) {
            button.hide();
        });
}

The current view is "removed"... but not destroyed... I am too new in Sencha to say if it's a good way or not...?