PDA

View Full Version : InputRadio component



redzedi1
12 Sep 2011, 9:59 PM
InputRadio component

Here's form widget i thought could be useful, it is a subclass of standard extjs4 radio class with the extension that it has a inputbox next to the label where the user can type the value that is to be its submit value and thus it disregards the 'inputValue' config supplied for standard radio button. Thus can be used in a radiogroup along with normal radio buttons(static values) to have an option of a dynamic(user entered) value as a possible value.


http://www.sencha.com/forum/image/png;base64,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


This is a very rough first cut and work in progress and i intend to put it on GitHub shortly , till the js file and an example html can be obtained here (https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0Bx-cmH_LaIPPYTZiNGRlYTgtMGNmOS00ZDczLTlhYWUtMDg5ZmU2Y2NlNDk3&hl=en) , please put both the files within your extjs4 directory and run. Comments, views , improvements are greatly welcome. Let me know if this is useful to anyone and in what scenarios has this been used.
P.S - In case the screenshot is not coming above you can read this post at my blog (http://redzeditech.blogspot.com/2011/09/extuxformfieldinputradio-specify-radio.html)