• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!



This version was saved 15 years, 2 months ago View current version     Page history
Saved by Erich Ocean
on March 31, 2009 at 7:25:03 am


Panes act as the on-screen roots for all visible view hierarchies. If you want to show a view, that view must be placed directly or indirectly inside of a pane, and the pane itself append()ed in your SproutCore application.


Every SproutCore application should have a "main" pane added in its main() function. The easiest way to create a "main" pane is to use the SC.MainPane class. SpoutCore only allows one "main" pane to exist in the DOM at any time; if you try and append another "main" pane, any existing "main" pane will be removed automatically.


In addition to "main" panes, you can append() an unlimited number of non-main panes. These panes may be eligible to become "key" pane, which gives them (and the views inside them) first priority in handling keyboard events. For example, SC.Alert is a pane subclass that when shown, becomes the key pane. This allows it to capture the "Enter" and "ESC" keyboard commands, which it routes to the default button and the cancel button, respectively.


If a keyboard event is not handled by the "key" pane, SproutCore will automatically give the "main" pane a chance to handle the event.


All panes, regardless of "main" or "key" status, are siblings in the DOM and children of the <body> tag.


Class Hierarchy


  • SC.Pane
    • SC.MainPane
    • SC.Panel
      • SC.Alert
      • SC.Sheet
      • SC.Picker
        • SC.Menu
    • SC.Palette



SC.Pane is the root of the pane hierarchy, and is a direct subclass of SC.View. Thus, all methods defined in SC.View apply (more or less) to panes. You will rarely create instances of SC.Pane, though you can if needed. The class is not "abstract".



SC.MainPane adds a small amount of code to make an SC.Pane instance into a pane with "main" status. You should use this class to root the view hierarchy for the "main" pane you want to show at startup.



SC.Panel implements model panes -- panes that must be interacted with (or dismissed) before any other mouse events are handled by the application. This functionality is very useful for modal dialogs (SC.Alert), modal "sheets" (SC.Sheet), and context-sensitive dialogs (SC.Picker). SC.Menu is also a subclass of SC.Panel.



SC.Alert contains a number of specialized class methods to create and show a modal alert in a single call. SC.Alert provides a more consistent user experience than the built-in alert() and confirm() functions provided by JavaScript.



SC.Sheet can be used anywhere an SC.Alert is used, but where a more complex modal dialog is required.



SC.Picker is a powerful panel class that implements context-sensitive, inline, modal dialogs -- nearly always anchored around some view that is being edited or manipulated. Pickers contain a myriad of configuration options to specify their "preferred" layout and will automatically reposition themselves onscreen as the browser window is resized.



SC.Menu is a kind of picker and configures itself automatically when shown based on an array of SC.MenuItems.

Comments (0)

You don't have permission to comment on this page.