PDA

View Full Version : Combobox for tablets



dolev
15 Feb 2015, 11:59 PM
Hello everyone,

I know Ext 5 is much more tablet-friendly but... what can I do... we're working with Ext 4 now.

I managed to enlarge my combo box to suit better tablets:
{
xtype : 'combobox',
width : 200,
height : 40,
fieldStyle : "font-size: 30px !important;"
}

I know using "!important" is hysterical but... it works.

51755

I also managed to change the image that is used to show an arrow going down. the one that opens the list of the combo box. But unfortunately, the "field" given to the the image is very small.

51756

So I need help:

1. Does anybody know how to make the room for image larger? (maybe using CSS)
or:
2. Does anybody know how to make a whole new combo box component which is larger than usual.

steffenk
16 Feb 2015, 8:18 AM
this button is the trigger, so look for triggerCls, triggerWidth etc.

dolev
17 Feb 2015, 7:57 AM
Thank you very much for replying. It directed me to my solution. B)



{
xtype: 'combobox',
fieldStyle: "font-size: 30px !important;",
emptyText: "choose",
height: 50,
triggerCls: 'big-combobox',
store: [ 'one', 'two', 'three' ]
}


and ths is the CSS file. it allows you to "animated" the new big combo box "button" (image) you designed. of course u'll be needing three different ones: regular "button" image, hover one and clicked one (I made them 40px on 40px but you'll have to make it your size.



.big-combobox{
background:transparent url(../images/tablet-combo.png) center 0 no-repeat !important;
width: 40px;
height: 40px;
}
.big-combobox-over {
background:transparent url(../images/tablet-combo-when-pressed.png) center 0 no-repeat !important;
width: 40px;
height: 40px;
}

.big-combobox-over.big-combobox-click {
background:transparent url(../images/tablet-combo-when-clicked.png) center 0 no-repeat !important;
width: 40px;
height: 40px;
}