1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    21
    Vote Rating
    0
    mystere13 is on a distinguished road

      0  

    Default Unanswered: Problem with dynamically updated TitleBar

    Unanswered: Problem with dynamically updated TitleBar


    Hi,

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

    Here is the view (Ext.Panel):

    Code:
    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:

    Code:
    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

  2. #2
    Sencha User
    Join Date
    Sep 2012
    Posts
    21
    Vote Rating
    0
    mystere13 is on a distinguished road

      0  

    Default


    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...

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    65
    Answers
    8
    Vote Rating
    0
    ehboym is on a distinguished road

      0  

    Default


    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:
    Code:
    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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3462
    Vote Rating
    828
    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


    Quote Originally Posted by ehboym View Post
    Code:
    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:

    Code:
    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'
                    });
                }
            }
        ]
    });
    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
    May 2012
    Posts
    65
    Answers
    8
    Vote Rating
    0
    ehboym is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    21
    Vote Rating
    0
    mystere13 is on a distinguished road

      0  

    Default


    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.

    Code:
    ...
    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,
                        }
               ],
        },
    ...
    Code:
    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...?

Thread Participants: 2

Tags for this Thread

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