Search code examples
javascriptsencha-touch

How to custom list inside of selectfield of Sencha Touch app?


I would like to custom the list of the selectfield in a Sencha Touch app, for example I need to indicate variableHeight parameter because I have texts very long..

Thank you


Solution

  • Step 1 you need to add a custom css to your selectfield-list.

    a) onFocus of the selectfield you need to change the width of the listPanel

    onFocus: function (e) {
        this.callParent(arguments);
        this.listPanel.setWidth(180);
    }
    

    OR

    a) get the selectfield when the listPanel is shown

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

    b) set the width of the panel

    sf.listPanel.setWidth(180)
    

    OR

    use css:

    .x-select-overlay{
        .x-list {
            x-list-item {
                ---> here goes your code
            }
        }
    }