How to resize a Sencha Touch selectfield's picker after the store has been updated?

0
votes

I'm developing a Sencha Touch application. I'm currently trying to get a SelectField to be populated by store.

The code for my store is:

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);
        }
    }
});

The code for my select field is:

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

This select field is inside a floating panel. Every time I show() the floating panel, my store updates itself. As such, the select field also becomes updated. However, this works only the first time when I show() the panel. The subsequent times I show() the floating panel, the selectfield correctly shows the updated data, but the picker that shows up when I click the selectfield is not correctly resized. It is sized according to how many rows of data there was when the floating panel was first shown.

TLDR: How to resize a Sencha Touch selectfield's picker after the store has been updated?

Below is a screenshot. The second time I click the selectfield, the picker panel does not resize to fit the content of the whole store.

enter image description here

2
resizesencha-touchextjs

2 Answers

1
votes

It seems like setting the width and height fixed the problem partly.

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

I'm still having some other problems where I'm unable to sometimes select an item from the selectfield. Quite weird.

0
votes

Thanks to your workaround I did something a bit different

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

It might be a bit less efficient, but it calculates the width and height by itself every time the data is changed.