PDA

View Full Version : Spinner hide input field?



DSoa
30 Jul 2012, 1:00 PM
I would like a spinner with no input field. Is there a way to hide the input field so you only see the up and down arrow buttons? I just want to respond to onSpinUp and onSpinDown events and not show a value, but have the spinner buttons look consistent with other number fields that include those buttons on my panel.

Thanks.

scottmartin
30 Jul 2012, 1:25 PM
You could have a look at Ext.form.field.Trigger that extends Ext.form.field.Text

Scott.

DSoa
31 Jul 2012, 7:55 AM
Trigger doesn't have two buttons and also has a text field.

I was able to get what I wanted by adding the following CSS:

#myspinner-inputEl {
width: 0px;
padding: 0;
border-right: 0;
}

Wish there was a cleaner way--like a fieldVisible property.

DSoa
31 Jul 2012, 8:13 AM
Is there a way to specify this CSS in a config option instead of putting it in an external stylesheet? Since it is styling a child element of the control (myspinner-inputEl), I don't see how I can use the "style" config option.

Thanks.

scottmartin
31 Jul 2012, 8:39 AM
As you mentioned, style is main component and would not provide access.

Scott.

DSoa
1 Aug 2012, 6:05 AM
The stylesheet hack doesn't work if the layout is "form", which slaps a "width: 100%" on the input field element.

Any other ideas?

scottmartin
1 Aug 2012, 7:33 AM
Another thought would be to simple create a new component with just the buttons if you just want click events?

Scott.

DSoa
2 Aug 2012, 7:21 AM
"Simple" for you, difficult for me... ;-)

I got things to work using a vbox layout. Also another minor tweak to the CSS, if anyone cares.

#myspinner-triggerWrap .x-form-spinner-up, #myspinner-triggerWrap .x-form-spinner-down {
margin-left: 1px;
}

scottmartin
2 Aug 2012, 7:37 AM
Thanks for the update. I am sure someone will find it useful.

Scott.