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
    35,672
    Answers
    3354
    Vote Rating
    747
    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

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