Class: SC.SelectView
Extends
SC.ButtonView.
SelectView has a functionality similar to that of SelectField
Clicking the SelectView button displays a menu pane with a list of items. The selected item will be displayed on the button. User has the option of enabling checkbox for the selected menu item.
Defined in: select.js
Field Summary
- acceptsFirstResponder
- acceptsMultitouch
- checkboxEnabled
- children
- classNames
- CUSTOM_MENU_ITEM_HEIGHT
- customViewMenuOffsetWidth
- delegate
- disableSort
- disclosureState
- displayProperties
- emptyName
- escapeHTML
- exampleView
- format
- SC.SelectView.HUGE_OFFSET_X
- SC.SelectView.HUGE_OFFSET_Y
- SC.SelectView.HUGE_POPUP_MENU_WIDTH_OFFSET
- index
- interval
- isContextMenuEnabled
- isDefaultPosition
- isRunning
- item
- itemIconKey
- itemIsEnabledKey
- items
- itemsBindingDefault
- itemSeparatorKey
- itemSortKey
- itemTitleKey
- itemValueKey
- SC.SelectView.LARGE_OFFSET_X
- SC.SelectView.LARGE_OFFSET_Y
- SC.SelectView.LARGE_POPUP_MENU_WIDTH_OFFSET
- length
- localize
- menu
- SC.SelectView.MENU_WIDTH_OFFSET
- menuItemPadding
- menuLeftOffset
- menuMinimumWidthOffset
- menuPaneHeightPadding
- menuTopOffset
- minimumIdleDuration
- name
- needsEllipsis
- parentObserver
- preferMatrix
- SC.SelectView.REGULAR_OFFSET_X
- SC.SelectView.REGULAR_OFFSET_Y
- SC.SelectView.REGULAR_POPUP_MENU_WIDTH_OFFSET
- runLimit
- runWhenIdle
- showCheckbox
- sizes
- SC.SelectView.SMALL_OFFSET_X
- SC.SelectView.SMALL_OFFSET_Y
- SC.SelectView.SMALL_POPUP_MENU_WIDTH_OFFSET
- supportFocusRing
- supportsFocusRing
- theme
- SC.SelectView.TINY_OFFSET_X
- SC.SelectView.TINY_OFFSET_Y
- SC.SelectView.TINY_POPUP_MENU_WIDTH_OFFSET
- treeItemChildrenKey
- treeItemIsExpandedKey
- value
- Fields borrowed from SC.ButtonView:
- action, ariaRole, autoResizePadding, buttonBehavior, contentIconKey, contentTitleKey, isCancel, isDefault, keyEquivalent, renderDelegateName, target, themeName, toggleOffValue, toggleOnValue
- Fields borrowed from SC.View:
- 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, 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, toInvalidate
- Fields borrowed from SC.Observable:
- isObservable
- Fields borrowed from SC.Control:
- controlSize, errorLabel, fieldKey, fieldLabel, isActive, isControl, isSelected
Instance Methods
- addSizeClassName(dataSource, context)
- branchIndexes()
- branchObserverAt(index)
- cancel()
- capitalizeEach()
- change()
- classify(str)
- contentGroupIndexes(view, content)
- contentIndexCollapse(view, content, idx)
- contentIndexDisclosureState(view, content, index)
- contentIndexExpand(view, content, idx)
- contentIndexIsGroup(view, content, idx)
- contentIndexOutlineLevel(view, content, index)
- destroy()
- displayItems()
- doExit(immediately, newContent)
- end()
- entered()
- escapeForRegExp(str)
- exited()
- expandChildIndex(index)
- fieldValueForObject(object, form, field)
- getPropertyFor(dataSource, propertyName)
- gotoEnteringState()
- gotoExitedState()
- gotoExitingState(immediately)
- gotoReadyState()
- hasTasks()
- htmlForTitleAndIcon(dataSource)
- humanize(str)
- icon()
- imageStyles(dataSource)
- init()
- invalidateBranchObserversAt(index)
- isHeaderVisible()
- isValueEqualTo(object)
- minimumMenuWidth()
- next()
- objectAt(index, omitMaterializing)
- objectForFieldValue(value, form, field)
- observerContentDidChange(start, amt, delta)
- parentItem()
- pluralize(str)
- push(task)
- rangeDidChange(array, objects, key, indexes)
- removeDiacritics(str)
- render(dataSource, context)
- replace(start, amt, objects, operation)
- resume()
- run(limit)
- setup()
- singularize(str)
- sizeFor(dataSource)
- sortObjects(objects)
- start()
- suspend()
- taskCount()
- teardown()
- title()
- titleize(str)
- toString()
- touchAddedToSession(touch, touchesInSession)
- touchCancelledInSession(touch, touchesInSession)
- touchEndedInSession(touch, touchesInSession)
- touchesMovedInSession(touchesInSession)
- touchIsInGesture(touch, status)
- touchSessionCancelled()
- touchSessionEnded()
- touchSessionStarted(touch)
- touchStart(touch)
- transitionClippingFrame(clippingFrame)
- trigger()
- trim(str)
- trimLeft(str)
- trimRight(str)
- update(dataSource, jquery)
- updateSizeClassName(dataSource, jquery)
Field Detail
acceptsFirstResponder Boolean- Default value:
- YES
Whether to receive touch events for each distinct touch (rather than only the first touch start and last touch end).
Defined in: gesture.js.
- Default value:
- false
- See:
- SC.View#acceptsMultitouch
if this property is set to 'YES', a checkbox is shown next to the selected menu item.
- Default value:
- YES
Defined in: tree_item_observer.js.
- Default value:
- ['sc-select-button']
- See:
- SC.View#classNames
Property to set the menu item height. This in turn is used for
the calculation of prefMatrix
.
- Default value:
- 20
- Default value:
- 0
The controller delegate. If the item does not implement the TreeItemContent method, delegate properties will be used to determine how to access the content. Set automatically when a tree item is created.
If you are creating an observer manually, you must set this to a non-null value.
Defined in: tree_item_observer.js.
if true, it means that no sorting will occur, items will appear in the same order as in the array
- Default value:
- YES
Disclosure state of this item. Must be SC.BRANCH_OPEN
or SC.BRANCH_CLOSED
If this is the root of a item tree, the observer will have children but
no parent or parent item. IN this case the disclosure state is always
SC.BRANCH_OPEN.
Defined in: tree_item_observer.js.
- Default value:
- ['icon', 'value','controlSize']
- See:
- SC.View#displayProperties
- Default value:
- null
- Default value:
- YES
- Default value:
- null
- Default value:
- 0
- Default value:
- 0
- Default value:
- 0
Index location in parent's children array. If this is the root item in the tree, should be null.
Defined in: tree_item_observer.js.
- Default value:
- NO
If this property is set to 'YES', the menu pane will be positioned below the anchor.
- Default value:
- NO
The node in the tree this observer will manage. Set when creating the object. If you are creating an observer manually, you must set this to a non-null value.
Defined in: tree_item_observer.js.
- Default value:
- null
- Default value:
- "isEnabled"
- Default value:
- []
- Default value:
- SC.Binding.multiple()
- Default value:
- "isSeparator"
If you set this to a non-null value, then the value of this key will
be used to sort the items. If this is not set, then itemTitleKey
will
be used.
- Default value:
- null
If you set this to a non-null value, then the name shown for each menu item will be pulled from the object using the named property. if this is null, the collection items themselves will be used.
- Default value:
- null
Set this to a non-null value to use a key from the passed set of items as the value for the options popup. If you don't set this, then the items themselves will be used as the value.
- Default value:
- null
- Default value:
- -17
- Default value:
- 6
- Default value:
- 3
Defined in: tree_item_observer.js.
- Default value:
- YES
- Default value:
- SC.MenuView
- Default value:
- -2
The amount of space to add to the calculated width of the menu item strings to determine the width of the menu pane.
- Default value:
- 35
The amount by which to offset the menu's left position when displaying it. This can be used to make sure the selected menu item is directly on top of the label in the SelectView.
By default, this comes from the render delegate's menuLeftOffset
property.
If you are writing a theme, you should set the value there.
Defined in: select.js.
- Default value:
- 'menuLeftOffset' from render delegate if present, or 0.
An amount to add to the menu's minimum width. For instance, this could be set to a negative value to let arrows on the side of the SelectView be visible.
By default, this comes from the render delegate's menuMinimumWidthOffset
property.
If you are writing a theme, you should set the value there.
Defined in: select.js.
- Default value:
- 'menuWidthOffset' from render delegate if present, or 0.
This property allows you at add extra padding to the height of the menu pane.
- Default value:
- 0
The amount by which to offset the menu's top position when displaying it. This is added to any amount calculated based on the 'top' of a menu item.
This can be used to make sure the selected menu item's label is directly on top of the SelectView's label.
By default, this comes from the render delegate's menuTopOffset
property.
If you are writing a theme, you should set the value there.
Defined in: select.js.
- Default value:
- 'menuTopOffset' from render delegate if present, or 0.
The minimum elapsed time since the last event. As a rule of thumb, perhaps something equivalent to the expected duration of a task.
Defined in: task_queue.js.
The gesture's name. When calling events on the owning SC.View
, this name will
be prefixed to the methods. For instance, if the method to be called is
'Start', and the gesture's name is 'swipe', SC.Gesture
will call 'swipeStart'.
Defined in: gesture.js.
- Default value:
- "gesture"
- Default value:
- YES
Defined in: tree_item_observer.js.
Prefer matrix to position the select button menu such that the selected item for the menu item will appear aligned to the the button. The value at the second index(0) changes based on the position(index) of the menu item in the menu pane.
- Default value:
- null
- Default value:
- -17
- Default value:
- 1
- Default value:
- 4
A limit which, if exceeded, the task queue will wait until a later run to continue.
Defined in: task_queue.js.
Defined in: task_queue.js.
if this property is set to 'YES', a checkbox is shown next to the selected menu item.
- Default value:
- YES
A list of size names to look for when automatically determining control size. By default, this has all of the SproutCore control sizes.
Defined in: sizing.js.
- Default value:
- -18
- Default value:
- 3
- Default value:
- 7
This is a property to enable/disable focus rings in buttons. For select_button, we are making it a default.
- Default value:
- YES
- See:
- SC.ButtonView#supportFocusRing
This is a property to enable/disable focus rings in buttons. For SelectView, it is a default.
Defined in: select.js.
- Default value:
- YES
- Default value:
- 'popup'
- Default value:
- 0
- Default value:
- 0
- Default value:
- 0
The key used to retrieve children from the observed item. If a
delegate exists, the key will be the value of the treeItemChildrenKey
property of the delegate. Otherwise, the key will be treeItemChildren
.
Defined in: tree_item_observer.js.
- Default value:
- 'treeItemChildren'
The key used to identify the expanded state of the observed item.
If a delegate exists, the key will be the value of the treeItemIsExpandedKey
property of the delegate. Otherwise, the key will be treeItemIsExpanded
.
Defined in: tree_item_observer.js.
- Default value:
- 'treeItemIsExpanded'
- Default value:
- null
Instance Method Detail
Determines the proper size for the dataSource
, and then renders the class
name corresponding to that size.
Defined in: sizing.js.
- Parameters:
- dataSource
- context
IndexSet of children with branches. This will ask the delegate to name these indexes. The default implementation will iterate over the children of the item but a more optimized version could avoid touching each item.
Defined in: tree_item_observer.js.
Returns the branch item for the specified index. If none exists yet, it will be created.
Defined in: tree_item_observer.js.
- Parameters:
- index
Cancels the gesture, if it is active, and notifies the view that the gesture has been cancelled.
Gestures are cancelled when they have ended, but any action that would normally be appropriate due to their ending should not be performed.
The gesture, along with any arguments to cancel(), will be passed to the
appropriate method on the SC.View.
Defined in: gesture.js.
Defined in: string.js.
If the gesture is active, notifies the view that the gesture has changed.
The gesture, along with any arguments to change(), will be passed to
the appropriate method on the SC.View.
Defined in: gesture.js.
SC.CollectionContent
Called by the collection view to return any group indexes. The default
implementation will compute the indexes one time based on the delegate
treeItemIsGrouped
Defined in: tree_item_observer.js.
- Parameters:
- view
- content
Called to collapse a content index item if it is currently in an open disclosure state. The default implementation does nothing.
Defined in: tree_item_observer.js.
- Parameters:
- view SC.CollectionView
- the collection view
- content SC.Array
- the content object
- idx Number
- the content index
- Returns:
- void
Defined in: tree_item_observer.js.
- Parameters:
- view
- content
- index
Expands the specified content index. This will search down until it finds
the branchObserver
responsible for this item and then calls _collapse on
it.
Defined in: tree_item_observer.js.
- Parameters:
- view
- content
- idx
Defined in: tree_item_observer.js.
- Parameters:
- view
- content
- idx
Defined in: tree_item_observer.js.
- Parameters:
- view
- content
- index
SC.Object.prototype.destroy
Called just before a branch observer is removed. Should stop any
observing and invalidate any child observers.
Defined in: tree_item_observer.js.
Returns an array of normalized display items.
Adds the empty name to the items if applicable.
displayItems
should never be set directly; instead, set items
and
displayItems
will update automatically.
Defined in: select.js.
- Returns:
- Array
- array of display items.
Defined in: container.js.
- Parameters:
- immediately
- newContent
Ends the gesture, if it is active (marking it as not active), and notifies the view.
You may pass any number of arguments to end(). They, along with your gesture
instance itself, will be passed to the appropriate gesture event on the SC.View.
Defined in: gesture.js.
Defined in: container.js.
Defined in: container.js.
Defined in: tree_item_observer.js.
- Parameters:
- index
Defined in: date_time.js.
- Parameters:
- object
- form
- field
Retrieves the given property for the specified data source. This property
may be static, or may be computed specifically for this data source. This
version fo getPropertyFor
will check in your size hashes to see if any
properties have been overridden.
Defined in: sizing.js.
- Parameters:
- dataSource DataSource
- The data source to get the property for. Some properties may differ based on the data source; for instance, some may have different values depending on size.
- propertyName String
- The name of the property to retrieve.
Defined in: container.js.
Defined in: container.js.
Defined in: container.js.
- Parameters:
- immediately
Defined in: container.js.
Defined in: task_queue.js.
Generates the HTML for the title and icon of the label. Render delegates can override this to change how that HTML renders without affecting the rest of the rendering of the label.
Defined in: label.js.
- Parameters:
- dataSource
- The data source that provides the title and icon properties.
- Returns:
- the html to use
Defined in: select.js.
Defined in: image.js.
- Parameters:
- dataSource
Defined in: tree_item_observer.js.
Defined in: tree_item_observer.js.
- Parameters:
- index
Returns YES
if the item itself should be shown, NO if only its children
should be shown. Normally returns YES unless the parentObject
is null.
Defined in: tree_item_observer.js.
Defined in: select.js.
The minimum width for the child menu. For instance, this property can make the menu always cover the entire SelectView--or, alternatively, cover all but the arrows on the side.
By default, it is calculated by adding the menuMinimumWidthOffset
to the view's
width. If you are writing a theme and want to change the width so the menu covers
a specific part of the select view, change your render delegate's menuMinimumWidthOffset
property.
Defined in: select.js.
Defined in: task_queue.js.
Get the object at the specified index. This will talk the tree info to determine the proper place. The offset should be relative to the start of this tree item. Calls recursively down the tree.
This should only be called with an index you know is in the range of item or its children based on looking at the length.
Defined in: tree_item_observer.js.
Try to pass value as a date. convert into a number, or return null if it could not be parsed.
Defined in: date_time.js.
- Parameters:
- value
- form
- field
Called whenever the content for the passed observer has changed. Default version notifies the parent if it exists and updates the length.
The start, amt and delta params should reflect changes to the children array, not to the expanded range for the wrapper.
Defined in: tree_item_observer.js.
- Parameters:
- start
- amt
- delta
The parent item for the observer item. Computed automatically from the parent. If the value of this is null, then this is the root of the tree.
Defined in: tree_item_observer.js.
Defined in: task_queue.js.
- Parameters:
- task
Defined in: outline_case.js.
- Parameters:
- array
- objects
- key
- indexes
Defined in: label.js.
- Parameters:
- dataSource
- context
Implements SC.Array.replace()
primitive. For this method to succeed, the
range you replace must lie entirely within the same parent item, otherwise
this will raise an exception.
The Operation Parameter
Note that this replace method accepts an additional parameter "operation"
which is used when you try to insert an item on a boundary between
branches whether it should be inserted at the end of the previous group
after the group. If you don't pass operation, the default is
SC.DROP_BEFORE
, which is the expected behavior.
Even if the operation is SC.DROP_AFTER
, you should still pass the actual
index where you expect the item to be inserted. For example, if you want
to insert AFTER the last index of an 3-item array, you would still call:
observer.replace(3, 0, [object1 .. objectN], SC.DROP_AFTER)
The operation is simply used to disambiguate whether the insertion is intended to be AFTER the previous item or BEFORE the items you are replacing.
Defined in: tree_item_observer.js.
- Parameters:
- start Number
- the starting index
- amt Number
- the number of items to replace
- objects SC.Array
- array of objects to insert
- operation Number
- either SC.DROP_BEFORE or SC.DROP_AFTER
- Returns:
- SC.TreeItemObserver
- receiver
Defined in: task_queue.js.
Defined in: task_queue.js.
- Parameters:
- limit
Defined in: nextValidKeyView.js.
Determines the correct size for the given data source, and returns the hash, if any, representing it.
The hashes to choose from are properties on the render delegate. You define
them with the same name as you would use for styling. For example,
SC.REGULAR_CONTROL_SIZE
uses a property name 'sc-regular-size':
SC.RenderDelegate.create({
'sc-regular-size': {
// my properties here
}
If no matching size is found, the hash (if any) for SC.REGULAR_CONTROL_SIZE
will be returned.
Defined in: sizing.js.
- Parameters:
- dataSource DataSource
- The data source in which to find `controlSize` or `frame` and to determine the size for.
- Returns:
- Hash undefined
override this method to implement your own sorting of the menu. By
default, menu items are sorted using the value shown or the sortKey
Starts the gesture (marking it as "active"), and notifies the view.
You can pass any number of arguments to start. They will, along with
the gesture instance itself, will be passed to the appropriate gesture
event on the SC.View.
Defined in: gesture.js.
Suspends cycling of the queue. Only affects task queues that run when idle,
such as the backgroundTaskQueue
.
Defined in: task_queue.js.
Defined in: task_queue.js.
Defined in: nextValidKeyView.js.
Defined in: select.js.
Defined in: outline_case.js.
Defined in: gesture.js.
Defined in: gesture.js.
Defined in: gesture.js.
Defined in: gesture.js.
Return YES
to take exclusive control over the touch. In addition to the
SC.Touch
object you may take control of, you are also provided a "status"
hash, which is unique for both the gesture instance and the touch instance,
which you may use for your own purposes.
Defined in: gesture.js.
Called by the view when the touch session was cancelled.
This will occur because this gesture returned false
in any of touchAddedToSession
,
touchesMovedInSession
, touchEndedInSession
, touchCancelledInSession
to indicate that the
gesture is no longer interested in the session or because another gesture claimed the touch
session for itself, forcing all other gestures out (rare).
You should override this method in your custom SC.Gesturable
subclasses to clean up any state
variables used in the touch session.
Defined in: gesture.js.
- Returns:
- void
Called by the view when the touch session has ended.
This will occur because all touches in the session have finished.
You should override this method in your custom SC.Gesturable
subclasses to clean up any state
variables used in the touch session.
Defined in: gesture.js.
- Returns:
- void
Called by the view when a touch session has begun.
You should override this method in your custom SC.Gesturable
subclasses to set up any touch
session state. For example, you may want to track the initial touch start time in order to
decide how to react when or if additional touches start later.
Defined in: gesture.js.
- Parameters:
- touch SC.Touch
- The touch that started the session.
- Returns:
- void
After you return YES
from touchIsInGesture
(or otherwise 'take' a touch, perhaps
using the 'take' method), touchStart
will be called.
This is where you do any logic needed now that the touch is part of the gesture. For instance, you could inform the view that the gesture has started by calling this.start().
NOTE: SC.Gesture
is just like SC.View
in that it has an acceptsMultitouch
property.
If NO
(the default), the gesture will only receive touchStart
for the first touch
assigned to it, and only receive touchEnd
for the last touch that ends.
Defined in: gesture.js.
- Parameters:
- touch SC.Touch
- The touch that started.
- Returns:
- Boolean
- true if the gesture should respond to the touch; false otherwise (this should always return true)
- See:
- SC.ResponderProtocol#touchStart
Defined in: container.js.
- Parameters:
- clippingFrame
Triggers the gesture, notifying the view that the gesture has happened.
You should trigger a gesture where it would be natural to say it has "happened"; for instance, if a touch moves a couple of pixels, you probably wouldn't say a swipe has occurred—though you might say it has "begun." And you wouldn't necessarily wait until the touch has ended either. Once the touch has moved a certain amount, there has definitely been a swipe. By calling trigger() at this point, you will tell the view that it has occurred.
For SC.SwipeGesture
, this allows a view to implement only swipe(), and then be
automatically notified whenever any swipe has occurred.
Defined in: gesture.js.
Defined in: label.js.
- Parameters:
- dataSource
- jquery
Determines the proper size for the dataSource
, and then updates
the DOM to include that size's class name.
Defined in: sizing.js.
- Parameters:
- dataSource
- jquery