如何在商店更新后调整Sencha Touch selectfield的选择器？

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) { 
      ... 
     } 
    } 
} 

该选择栏是一个浮动的面板内。每次我展示（）浮动面板时，我的商店都会自行更新。这样，选择字段也会被更新。但是，这只在我显示（）面板的时候才有效。随后我显示（）浮动面板时，选择字段正确显示更新的数据，但当单击选择字段时显示的选取器未正确调整大小。它的大小根据浮动面板首次显示时的数据行数而定。

TLDR：如何在商店更新后调整Sencha Touch selectfield的选择器？

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

Answer 1

好像设定的宽度和高度部分地解决了这一问题。

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

我还有一些其他问题，我无法有时从selectfield中选择一个项目。很奇怪。

Answer 2

感谢您的解决方法我做的东西有点不同

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

这可能是有点低效率的，但它本身在每次数据改变时计算的宽度和高度。