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.

This seems to be a bigger issue... I'm having problems updating any UI button elements. I can correctly select a button using a reference on the controller (console.log() returns the object), but executing functions like this.getButtonRef().show(); does nothing! — Dave Watt
This info may help: I can call query's in the console on my button: Ext.ComponentQuery.query('#PopUpButton')[0] and call functions such as .hide(); but nothing happens... However if I call other buttons using Ext.ComponentQuery.query('button')[0] I can make changes like setText('Test'); which works! .. very strange. — Dave Watt

Vikal Sharma Vikal Sharma · Accepted Answer · 2012-11-02T05:56:24

Try following changes, this is working for me:-

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!'
                }
            ]
        }

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');

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

2 Answers