Question

我的列表中有一个控制器功能，在点击列表项时被调用，在此函数中我试图更新按钮组件的文本，如下所示：

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

该函数似乎有效，console.info(button.getText());报告更新，但在UI中，文本仍然是配置中设置的默认值。

这是一个错误吗？或者我在这里做错了什么？

这些按钮位于分段按钮对象中：

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

更新：了解这些按钮是数据列表工具栏中的分段按钮可能会有所帮助，请参阅下面的完整代码：

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

}）;

更新＃2：在使用Ext.ComponentQuery.query()在控制台中进一步测试后，我发现我可以操作应用程序中的所有按钮排除数据视图列表/工具栏中的按钮。< / p>

Answer 1

尝试以下更改，这对我有用： -

将 id '添加到细分按钮。

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

在列表的“ itemtap ”的控制器中使用此代码。

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

Answer 2

通过将Ext.dataview.List移动到Ext.panel容器中解决了此问题。这似乎是sencha touch 2.0.1.1的一个错误。我在dataview.List工具栏组件中操作的任何元素都会在控制台中报告更新，但不会在UI中显示为已更新。 Chrome，Safari以及打包为phonegap项目的Android设备都出现了同样的问题。

Sencha触摸按钮组件setText（）不更改按钮文本

2 个答案: