Home > DeveloperSection > Forums > How to customize selected fields in a list in Sencha Touch app?
Sanjay Sharma
Sanjay Sharma

Total Post:45

Points:315
Posted on    April-11-2016 2:51 AM

 Sencha Touch JavaScript  Sencha Touch  Sencha Touch2 
Ratings:


 1 Reply(s)
 269  View(s)
Rate this:
I have a need to customize the selected fields list in our Sencha Touch application.
For example: I have very long texts so I want to indicate variable height parameter.
So, please help me how can I do it..!

thank you.


Tarun Kumar

Total Post:213

Points:1635
Posted on    April-13-2016 1:23 AM

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.

Don't want to miss updates? Please click the below button!

Follow MindStick