Блог

Я разрабатываю приложение Sencha Touch. В настоящее время я пытаюсь заставить поле выбора быть заполненным хранилищем.

Код для моего хранилища:

 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 после обновления хранилища?

Ниже приведен скриншот. При втором нажатии на поле выбора размер панели выбора не соответствует размеру содержимого всего хранилища.

Похоже, что настройка ширины и высоты частично устранила проблему.

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

У меня все еще возникают некоторые другие проблемы, из-за которых я иногда не могу выбрать элемент из selectfield. Довольно странно.

Благодаря вашему обходному пути я сделал кое-что немного другое

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

Это может быть немного менее эффективно, но оно само вычисляет ширину и высоту при каждом изменении данных.