商店更新后如何调整 Sencha Touch 选择字段选择器的大小？

Question

我正在开发 Sencha Touch 应用程序。我目前正在尝试获取由商店填充的 SelectField。

我的商店的代码是：

var store_Blocks = new Ext.data.JsonStore({
    model: 'Blocks',
    proxy: {
        type: 'ajax',
        url: '/search-blocks',
    },
    autoLoad: false,
    remoteFilter: true,
    listeners: {
        load: function(store, records, success) {
            Ext.getCmp('selectfield_Blocks').setDisabled(false);
        }
    }
});

我的选择字段的代码是：

{
    id: 'selectfield_Blocks',
    xtype: 'selectfield',
    name: 'block',
    label: 'Block number',
    disabled: true,
    store: store_Blocks,
    listeners: {
        change: function(selectfield, block) {
            ...
        }
    }
}

该选择字段位于浮动面板内。每次我 show() 浮动面板时，我的商店都会自行更新。因此，选择字段也会更新。但是，这仅在我第一次 show() 面板时有效。随后我 show() 浮动面板时，选择字段正确显示更新的数据，但是当我单击选择字段时显示的选择器未正确调整大小。它的大小根据浮动面板首次显示时有多少行数据而定。

TLDR：商店更新后如何调整 Sencha Touch 选择字段选择器的大小？

下面是屏幕截图。第二次单击选择字段时，选择器面板不会调整大小以适应整个商店的内容。

Answer 1

看来设置宽度和高度部分解决了问题。

Ext.getCmp('selectfield_Blocks').getListPanel().setHeight(300);
Ext.getCmp('selectfield_Blocks').getListPanel().setWidth(100);

我仍然遇到一些其他问题，有时无法从选择字段中选择项目。很奇怪。

Answer 2

感谢您的解决方法，我做了一些不同的事情

    selectField.setOptions(options);
    if (Ext.isDefined(selectField.listPanel)) {
        selectField.listPanel.destroy();
        selectField.listPanel = undefined;
    }

，它可能效率较低，但每次数据更改时它都会自行计算宽度和高度。