Sencha touch button component setText() is not changing button text

Question

I have a controller function for my list that is being called when the list item is tapped, within this function I am trying to update a button component's text as follows:

var button = this.getPopupButton();
//reference popupButton is set within controller
button.setText('Test');

The function seems to work, and console.info(button.getText()); is reporting the update, but within the UI the text remains the default as set in the config.

Is this a bug? Or am I doing something wrong here?

These buttons are within a segmented button object:

items: [
                {
                    xtype: 'segmentedbutton',
                    flex: 1,
                    allowDepress: true,
                    layout: {
                        align: 'stretchmax',
                        pack: 'center',
                        type: 'hbox'
                    },
                    items: [
                        {
                            xtype: 'button',
                            flex: 2,
                            id: 'PopUpButton',
                            text: 'Pop up test!'
                        },
                        {
                            xtype: 'button',
                            flex: 1,
                            id: 'Mini',
                            ui: 'action',
                            text: 'Mini test!'
                        }
                    ]
                }
            ]

Update: It might help to know that these buttons are segmented buttons within a datalist toolbar, see complete code below:

Ext.define('TestApp.view.ItemList', {
extend: 'Ext.dataview.List',
alias: 'widget.ItemList',

config: {
    loadingText: 'Loading items...',
    store: 'ItemStore',
    cls: [
        'ItemList'
    ],
    itemTpl: Ext.create('Ext.XTemplate', 
        '<div>{itemData}</div>',
    ),
    plugins: [
        {
            xtype: 'component',
            refreshFn: function(plugin) {
                //console.info('pull to refresh!');

                var store = plugin.up().getStore();

                console.log(store);
            },
            itemId: 'PullToRefresh',
            loadingText: 'Loading...',
            pullRefreshText: 'Pull down to refresh...',
            releaseRefreshText: 'Release to refresh...',
            snappingAnimationDuration: 200,
            type: 'pullrefresh'
        },
        {
            autoPaging: true,
            loadMoreText: 'Load more...',
            noMoreRecordsText: 'No more data in feed',
            type: 'listpaging'
        }
    ],
    items: [
        {
            xtype: 'toolbar',
            docked: 'top',
            id: 'MediaToolbar',
            ui: 'light',
            zIndex: 3,
            items: [
                {
                    xtype: 'button',
                    flex: 1,
                    cls: 'SourceSelectButton',
                    id: 'SourceSelectButton',
                    minWidth: '',
                    width: 83,
                    iconCls: 'ItemSource1',
                    text: ''
                }
            ]
        },
        {
            xtype: 'toolbar',
            docked: 'top',
            height: '45px',
            id: 'FeedSelectorBar',
            ui: 'light',
            zIndex: 3,
            items: [
                {
                    xtype: 'segmentedbutton',
                    flex: 1,
                    id: 'FeedSelectorButtons',
                    allowDepress: true,
                    layout: {
                        align: 'stretchmax',
                        pack: 'center',
                        type: 'hbox'
                    },
                    items: [
                        {
                            xtype: 'button',
                            flex: 2,
                            id: 'PopUpButton',
                            text: 'Pop up test'
                        },
                        {
                            xtype: 'button',
                            flex: 1,
                            id: 'TesterButton',
                            ui: 'action',
                            text: 'Latest'
                        }
                    ]
                }
            ]
        }
    ]
}

});

Update #2: After further testing in the console using Ext.ComponentQuery.query() I have found that I can manipulate all buttons in my application EXCLUDING the ones placed within the dataview list/toolbar.

Answer 1

This problem was solved by moving my Ext.dataview.List into a Ext.panel container. This seems to be a bug with sencha touch 2.0.1.1. Any elements that I manipulated within my dataview.List toolbar component would report as updated in the console but would not show as updated in the UI. The same problem occured in both Chrome, Safari and on an Android device packaged as a phonegap project.

Answer 2

Try following changes, this is working for me:-

1. Give 'id' to your segmented button.

       {
               xtype: 'segmentedbutton',
               id: 'hii',   // give id to your segmented button
               allowDepress: true,
               layout: {
                   align: 'stretchmax',
                   pack: 'center',
                   type: 'hbox'
               },
               items: [
                   {
                       xtype: 'button',
                       id: 'PopUpButton',
                       text: 'Pop up test!'
                   },
                   {
                       xtype: 'button',
                       id: 'Mini',
                       ui: 'action',
                       text: 'Mini test!'
                   }
               ]
           }     
   

2. Use this code inside controller on 'itemtap' of your list.

      var button = Ext.getCmp('hii');  // use your segmented button id here
      button.getAt(1).setText('Test');