How to customize selected fields in a list in Sencha Touch app?

Tarun Kumar

13-Apr-2016

To adjust variable height according to the long texts, create a custom css for your selected field list.
Examples:  Use onFocus event on the selected field where you want to change the width of the panel list, like this:

onFocus: function (e)
{
    this.callParent(arguments);
    this.panelList.setWidth(320);
}

OR
You can get the selectfield when the panelList will be shown, like this:

sf = Ext.Viewport.down('selectfield[action=mySelectfield]');

After that set the width of the panel, like this:

sf.panelList.setWidth(320)

OR
You can use css for adjusting width according to the field list, like this:

.x-select-overlay
{
    .x-list 
    {
        x-list-item
        {
            ---> you can code other related coding here
        }
    }
}

I hope it will be helpful for you.