0

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

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()我发现我可以操作应用程序中的所有按钮，不包括放置在数据视图列表/工具栏中的按钮。

4

2 回答 2

1

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

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

  2. 在列表的“ itemtap ”上的控制器内使用此代码。

       var button = Ext.getCmp('hii');  // use your segmented button id here
   button.getAt(1).setText('Test');
于 2012-11-02T05:56:24.980 回答
0

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

于 2012-11-03T05:09:04.170 回答