Class: SC.RadioView


Extends SC.Control, SC.View.

A RadioView is used to create a group of radio buttons. The user can use these buttons to pick from a choice of options.

This view renders simulated radio buttons that can display a mixed state and has other features not found in platform-native controls.

The radio buttons themselves are designed to be styled using CSS classes with the following structure:

<label class="sc-radio-button">
  <img class="button" src="some_image.gif"/>
  <input type="radio" name="<sc-guid>" value=""/>
  <span class="sc-button-label">Label for button1</span>
</label>

Setting up a RadioView accepts a number of properties, for example:

radio: SC.RadioView.design({
  items: [
    {
      title: "Red",
      value: "red",
      enabled: YES,
      icon: "button_red"
    },{
      title: "Green",
      value: "green",
      enabled: YES,
      icon: 'button_green'
    }
  ],
  value: 'red',
  itemTitleKey: 'title',
  itemValueKey: 'value',
  itemIconKey: 'icon',
  itemIsEnabledKey: 'enabled',
  isEnabled: YES,
  layoutDirection: SC.LAYOUT_HORIZONTAL
})

The items array can contain either strings, or as in the example above a hash. When using a hash, make sure to also specify the itemTitleKey and itemValueKey you are using. Similarly, you will have to provide itemIconKey if you are using icons radio buttons. The individual items enabled property is YES by default, and the icon is optional.

Defined in: radio.js

Since:
SproutCore 1.0

Field Summary

Fields borrowed from SC.View:
acceptsMultitouch, ariaHidden, attributeBindings, autoMixins, backgroundColor, childViewLayout, childViewLayoutOptions, childViews, childViewsNeedLayout, classNameBindings, concatenatedProperties, createdByParent, designMode, enabledState, firstKeyView, hasLayout, hasTouch, hasVisibility, isBuildingIn, isBuildingOut, isChildViewLayoutLive, isEnabled, isFixedHeight, isFixedPosition, isFixedSize, isFixedWidth, isKeyResponder, isTextSelectable, isView, isVisible, lastKeyView, layerLocationNeedsUpdate, layerNeedsUpdate, layout, modeAdjust, nextKeyView, page, pane, parentView, previousKeyView, shouldInheritCursor, shouldInheritEnabled, tagName, themeName, toolTip, touchBoundary, transitionAdjust, transitionAdjustOptions, transitionHide, transitionHideOptions, transitionIn, transitionInOptions, transitionOut, transitionOutOptions, transitionShow, transitionShowOptions, useStaticLayout
Fields borrowed from SC.Responder:
hasFirstResponder, isFirstResponder, responderContext
Fields borrowed from SC.Object:
isDestroyed, isObject, nextProperty, object, property, target, toInvalidate
Fields borrowed from SC.Observable:
isObservable
Fields borrowed from SC.Control:
controlSize, errorLabel, fieldKey, fieldLabel, isActive, isControl, isSelected

Instance Methods

Field Detail

acceptsFirstResponder Boolean
Default value:
YES
ariaRole String
The WAI-ARIA role for a group of radio buttons.
Default value:
'radiogroup'
classNames Array
Default value:
['sc-radio-view']
See:
SC.View#classNames
displayProperties Array
Default value:
['displayItems', 'layoutDirection']
See:
SC.View#displayProperties
escapeHTML Boolean
Default value:
YES
itemAriaLabeledByKey String

If items property is a hash, specify which property will function as the ariaLabeledBy with this itemAriaLabeledByKey property.ariaLabeledBy is used as the WAI-ARIA attribute for the radio view. This property is assigned to 'aria-labelledby' attribute, which defines a string value that labels the element. Used to support voiceover. It should be assigned a non-empty string, if the 'aria-labelledby' attribute has to be set for the element.

Default value:
null
itemAriaLabelKey String

If items property is a hash, specify which property will function as the ariaLabeled with this itemAriaLabelKey property.ariaLabel is used as the WAI-ARIA attribute for the radio view. This property is assigned to 'aria-label' attribute, which defines a string value that labels the element. Used to support voiceover. It should be assigned a non-empty string, if the 'aria-label' attribute has to be set for the element.

Default value:
null
itemIconKey String

If items property is a hash, specify which property will function as the value with this itemIconKey property.

Default value:
null
itemIsEnabledKey String

If items property is a hash, specify which property will function as the value with this itemIsEnabledKey property.

Default value:
null
items Array

The items property can be either an array with strings, or a hash. When using a hash, make sure to also specify the appropriate itemTitleKey, itemValueKey, itemIsEnabledKey and itemIconKey.

Default value:
[]
itemTitleKey String

If items property is a hash, specify which property will function as the title with this itemTitleKey property.

Default value:
null
itemValueKey String

If items property is a hash, specify which property will function as the value with this itemValueKey property.

Default value:
null
itemWidthKey String

If items property is a hash, specify which property will function as the item width with this itemWidthKey property. This is only used when layoutDirection is set to SC.LAYOUT_HORIZONTAL and can be used to override the default value provided by the framework or theme CSS.

Default value:
null
layoutDirection String

This property indicates how the radio buttons are arranged. Possible values:

  • SC.LAYOUT_VERTICAL
  • SC.LAYOUT_HORIZONTAL
Default value:
SC.LAYOUT_VERTICAL
renderDelegateName String
Default value:
'radioGroupRenderDelegate'
value Object|String

The value of the currently selected item, and which will be checked in the UI. This can be either a string or an array with strings for checking multiple values.

Default value:
null

Instance Method Detail

keyDown(evt)
Parameters:
evt
Documentation generated by JsDoc Toolkit 2.4.0 on Wed Apr 08 2015 10:02:21 GMT-0600 (CST)