sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/apps/test_controls/resources/sliders_page.js

@@ -0,0 +1,53 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.slidersPage = SC.View.design({
+  childViews: "form".w(),
+  form: SC.FormView.design({
+    classNames: ["sample_controls"],
+    layout: { left: 20, top: 40, right: 20, bottom: 40 },
+    childViews: "header small normal jumbo disabled".w(),
+    // Plain Views
+    header: SC.LabelView.design({
+      layout: { width: 250, height: 18 },
+      value: "Sliders",
+      classNames: "header".w()
+    }),
+    
+    small: SC.FormView.row(SC.SliderView.design({
+      layout: { width: 150, height: 14 },
+      controlSize: SC.SMALL_CONTROL_SIZE,
+      minimum: 0,
+      maximum: 10,
+      value: 2
+    })),
+    
+    normal: SC.FormView.row(SC.SliderView.design({
+      layout: { width: 150, height: 16 },
+      minimum: 0,
+      maximum: 10,
+      value: 2
+    })),
+    
+    jumbo: SC.FormView.row(SC.SliderView.design({
+      controlSize: SC.JUMBO_CONTROL_SIZE,
+      layout: { width: 150, height: 22 },
+      minimum: 0,
+      maximum: 10,
+      value: 2
+    })),
+    
+    disabled: SC.FormView.row(SC.SliderView.design({
+      layout: { width: 150, height: 16},
+      isEnabled: NO,
+      minimum: 0,
+      maximum: 10,
+      value: 2
+    }))
+  })
+});

data/lib/frameworks/sproutcore/apps/test_controls/resources/strings.js

@@ -0,0 +1,50 @@
+// ==========================================================================
+// SampleControls English Strings
+// ==========================================================================
+
+// Place strings you want to localize here.  In your app, use the key and
+// localize it using "key string".loc().  HINT: For your key names, use the
+// english string with an underscore in front.  This way you can still see
+// how your UI will look and you'll notice right away when something needs a
+// localized string added to this file!
+//
+SC.stringsFor('en',{
+  
+  "Loc.Title": "Localized Title!",
+  "Loc.Label": "Localized Label!",
+  
+ // Global
+  "Class": "Class",
+ // TabView
+  "Welcome_tab": "Welcome",
+  "Collections_tab": "Collections",
+  "Collections2_tab": "Collections2",
+  "Buttons_tab": "Buttons",
+  "Panes_tab": "Panes",
+  "Forms_tab": "Forms",
+  "Icons_tab": "Icons",
+
+ // Text body.rhtml
+  "Title_body": "Sample Controls",
+  "Text_body": "SproutCore comes bundled with a wide array of controls that you can use in your own applications. Most of these controls can be created very easily using the built-in view helper functions. Consult the source code of this application for samples code to use in your own application.",
+
+ // Text collections.rhtml
+
+ // Text collections2.rhtml
+
+ // Text forms.rhtml
+  "Title_forms": "Forms",
+  "Text_forms": "SproutCore has built in support for form validation, and for buffering form input into a controller before it is committed to your backend model. The examples below show the built in validators and variety of controls that are supported.",
+  "FName_forms": "First Name",
+  "LName_forms": "Last Name",
+  "Email_forms": "Email",
+  "PNumber_forms": "Phone Number",
+  "CCard_forms": "Credit Card",
+  "Address_forms": "Address",
+  "Crazinnes_forms": "Crazinness",
+
+  // Text Buttons form.rhtml
+   "Submit_buttom_forms": "Submit",
+   "Cancel_buttom_forms": "Cancel",
+   "SChanges_buttom_forms": "Save Changes"
+}) ;

data/lib/frameworks/sproutcore/apps/test_controls/resources/tab_page.js

@@ -0,0 +1,44 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.tabPage = SC.View.design({
+  childViews: "form".w(),
+  form: SC.FormView.design({
+    layout: { left: 20, top: 40, right: 20, bottom: 40 },
+    childViews: "header top topToolbar bottom overflow".w(),
+    
+    header: SC.LabelView.design({
+      layout: {width:300, height:24},
+      classNames: "header".w(),
+      value: "Tab Views"
+    }),
+    
+    top: SC.FormView.row(SC.TabView.design({
+      layout: { width: 300, height: 100, centerY: 0 },
+      items: ["Item 1", "Item 2", "Item 3"],
+      tabLocation: SC.TOP_LOCATION
+    })),
+    
+    topToolbar: SC.FormView.row(SC.TabView.design({
+      layout: { width: 300, height: 100, centerY: 0 },
+      items: ["Item 1", "Item 2", "Item 3"],
+      tabLocation: SC.TOP_TOOLBAR_LOCATION
+    })),
+    
+    bottom: SC.FormView.row(SC.TabView.design({
+      layout: { width: 300, height: 100, centerY: 0 },
+      items: ["Item 1", "Item 2", "Item 3"],
+      tabLocation: SC.BOTTOM_LOCATION
+    })),
+    
+    overflow: SC.FormView.row(SC.TabView.design({
+      layout: { width: 300, height: 100, centerY: 0 },
+      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7"]
+    }))
+  })
+});

data/lib/frameworks/sproutcore/apps/test_controls/resources/text_field_page.js

@@ -0,0 +1,41 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.textFieldPage = SC.View.design({
+  childViews: "form".w(),
+  form: SC.ScrollView.design({
+    
+    
+    contentView: SC.FormView.design({
+      theme: "iphone-form",
+    
+      classNames: ["sample_controls"],
+      layout: { left: 20, top: 40, right: 20, bottom: 40 },
+      childViews: "header normal disabled".w(),
+    
+      header: SC.LabelView.design({
+        layout: { width: 200, height: 44 },
+        classNames: "header".w(),
+        value: "Text Fields"
+      }),
+    
+      normal: SC.FormView.row(SC.TextFieldView.design({
+        layout: { left: 0, width: 150, height: 44, centerY: 0},
+        value: "Text",
+        isSpacer: YES
+      }), { classNames: ["first"] }),
+    
+      disabled: SC.FormView.row(SC.TextFieldView.design({
+        layout: { left: 0, width: 150, height: 44, centerY: 0},
+        isEnabled: NO,
+        value: "Disabled",
+        isSpacer: YES
+      }))
+    })
+  })
+});

data/lib/frameworks/sproutcore/apps/test_controls/theme.js

@@ -0,0 +1,34 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  Styling becomes easier when your app has its own theme to target.
+  The theme's name will be included in every view's class names in DOM,
+  so you can apply styles without being exceedingly specific.
+  
+  If working with Chance, the $theme variable (which has its initial
+  value set in your Buildfile) will allow you to target the theme
+  automatically:
+  
+  Example:
+  
+      $theme.button {
+        border: 1px solid black;
+      }
+*/
+TestControls.Theme = SC.AceTheme.create({ 
+  name: 'test-controls'
+});
+
+SC.Theme.addTheme(TestControls.Theme);
+
+// this makes all panes use your app's theme by default
+// QUESTION: should we make this be set by the Buildfile?
+//    :theme => 'test-controls' 
+// generates JS: 
+//    SC.defaultTheme = 'test-controls'
+SC.defaultTheme = 'test-controls';

data/lib/frameworks/sproutcore/apps/welcome/controllers/targets.js

@@ -39,6 +39,13 @@ Welcome.targetsController = SC.ArrayController.create(
       });
     }
   },
+  
+  launchEnabled: function() {
+    var canLoadApp = this.get('canLoadApp'),
+        selection = this.get('selection'),
+        selectedObject = selection.firstObject();
+    return canLoadApp && selectedObject && selectedObject.get('name') !== '/sproutcore';
+  }.property('canLoadApp', 'selection').cacheable(),
 
   // used to disable all controls
   canLoadApp: YES,

data/lib/frameworks/sproutcore/apps/welcome/english.lproj/main_page.css

@@ -1,7 +1,25 @@
-h1.sc-view.heading {
-  font-size: 24px;
-  letter-spacing: -2px;
-  line-height: 1.1;
-  margin: 0;
-  padding: 0;
+.sc-view.sc-main {
+  background: #262B32 static_url('images/main-bg.png') repeat;
+}
+
+.app-selector {
+  background-color: #f4f4f4;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border: 1px solid #f4f4f4;
+  border-bottom-color: #fff;
+  -webkit-box-shadow: inset rgba(0,0,0,0.3) 0 3px 8px;
+  -moz-box-shadow: inset rgba(0,0,0,0.3) 0 3px 8px;
+}
+
+.sc-list-view .sc-list-item-view {
+  border-bottom: 1px solid #ddd;
+  font-weight: bold;
+}
+
+.sc-list-view .sc-list-item-view:first-child {
+  -webkit-border-top-left-radius: 8px;
+  -webkit-border-top-right-radius: 8px;
+  -moz-border-radius-topleft: 8px;
+  -moz-border-radius-topright: 8px;
 }

data/lib/frameworks/sproutcore/apps/welcome/english.lproj/main_page.js

@@ -10,65 +10,55 @@ Welcome.mainPage = SC.Page.design({
   // The main pane is made visible on screen as soon as your app is loaded.
   // Add childViews to this pane for views to display immediately on page 
   // load.
-  mainPane: SC.PanelPane.design({
-    layout: { width: 360, height: 300, centerX: 0, centerY: 0 },
-
+  mainPane: SC.MainPane.design({
+    childViews: 'contentView'.w(),
+    
     contentView: SC.View.design({
-      childViews: 'heading prompt icon scrollView button'.w(),
+      layout: { width: 280, height: 340, centerX: 0, centerY: 0 },
+      childViews: 'heading appSelector launchApplication'.w(),
       
-      icon: SC.View.design({
-        layout: { width: 32, left: 20, top: 18, height: 32 },
+      heading: SC.View.design({
+        layout: { width: 271, centerX: 0, top: 0, height: 60 },
         tagName: 'img',
         render: function(context, firstTime) {
-          context.attr('src', sc_static('images/sproutcore-logo'));
+          context.attr('src', sc_static('images/sproutcore'));
         }
       }),
       
-      heading: SC.LabelView.design({
-        layout: { left: 56, top: 20, right: 20, height: 32 },
-        tagName: "h1",
-        classNames: "heading",
-        valueBinding: 'Welcome.displayTitle' 
-      }),
-      
-      prompt: SC.LabelView.design({
-        layout: { left: 20, top: 60, right: 20, height: 20 },
-        escapeHTML: NO,
-        value: "Choose an application:"
-      }),
-      
-      button: SC.ButtonView.design({
-        layout: { bottom: 18, height: 24, width: 140, centerX: 0 },
-        isEnabledBinding: "Welcome.targetsController.canLoadApp",
-
-        title: "Load Application",
-        theme: "capsule",
-        isDefault: YES,
-        
-        target: "Welcome.targetsController",
-        action: "loadApplication"
+      appSelector: SC.View.design({
+        layout: {top:80, left:0, right:0, bottom:46},
+        childViews: 'scrollView'.w(),
+        classNames: 'app-selector',
         
-      }),
-      
-      scrollView: SC.ScrollView.design({
-        layout: { left: 20, top: 80, right: 20, bottom: 63 },
-        hasHorizontalScroller: NO,
+        scrollView: SC.ScrollView.design({
+          layout: { left: 0, top: 0, right: 0, bottom: 0 },
+          hasHorizontalScroller: NO,
         
-        contentView: SC.ListView.design({  
-          rowHeight: 32,
+          contentView: SC.ListView.design({  
+            rowHeight: 40,
 
-          contentBinding: "Welcome.targetsController.appsOnly",
-          selectionBinding: "Welcome.targetsController.selection",
-          isEnabledBinding: "Welcome.targetsController.canLoadApp",
+            contentBinding: "Welcome.targetsController.appsOnly",
+            selectionBinding: "Welcome.targetsController.selection",
+            isEnabledBinding: "Welcome.targetsController.canLoadApp",
           
-          contentValueKey: "displayName",
-          contentIconKey: "targetIcon",
-          hasContentIcon: YES,
+            contentValueKey: "displayName",
+            contentIconKey: "targetIcon",
+            hasContentIcon: YES,
           
-          target: "Welcome.targetsController",
-          action: "loadApplication"
+            target: "Welcome.targetsController",
+            action: "loadApplication"
+          })
         })
-        
+      }),
+      
+      launchApplication: SC.ButtonView.design({
+        layout: {bottom:0, height:30, width:160, centerX:0},
+        isEnabledBinding: "Welcome.targetsController.launchEnabled",
+        controlSize: SC.HUGE_CONTROL_SIZE,
+        title: "Launch Application",
+        isDefault: YES,
+        target: "Welcome.targetsController",
+        action: "loadApplication"
       })
       
     }) 

data/lib/frameworks/sproutcore/frameworks/{foundation → amber}/controllers/array.js

@@ -11,11 +11,11 @@ sc_require('mixins/selection_support');
   @class
 
   An ArrayController provides a way for you to publish an array of objects
-  for CollectionView or other controllers to work with.  To work with an 
-  ArrayController, set the content property to the array you want the 
+  for CollectionView or other controllers to work with.  To work with an
+  ArrayController, set the content property to the array you want the
   controller to manage.  Then work directly with the controller object as if
   it were the array itself.
-  
+
   When you want to display an array of objects in a CollectionView, bind the
   "arrangedObjects" of the array controller to the CollectionView's "content"
   property.  This will automatically display the array in the collection view.
@@ -31,20 +31,20 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
 
   // ..........................................................
   // PROPERTIES
-  // 
-  
+  //
+
   /**
-    The content array managed by this controller.  
-    
-    You can set the content of the ArrayController to any object that 
+    The content array managed by this controller.
+
+    You can set the content of the ArrayController to any object that
     implements SC.Array or SC.Enumerable.  If you set the content to an object
     that implements SC.Enumerable only, you must also set the orderBy property
     so that the ArrayController can order the enumerable for you.
-    
+
     If you set the content to a non-enumerable and non-array object, then the
     ArrayController will wrap the item in an array in an attempt to normalize
     the result.
-    
+
     @property {SC.Array}
   */
   content: null,
@@ -52,14 +52,14 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
   /**
     Makes the array editable or not.  If this is set to NO, then any attempts
     at changing the array content itself will throw an exception.
-    
+
     @property {Boolean}
   */
   isEditable: YES,
-  
+
   /**
     Used to sort the array.
-    
+
     If you set this property to a key name, array of key names, or a function,
     then then ArrayController will automatically reorder your content array
     to match the sort order.  (If you set a function, the function will be
@@ -69,79 +69,79 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
     controller to an unordered enumerable such as SC.Set or SC.SelectionSet.
     In this case the orderBy property is required in order for the controller
     to property order the content for display.
-    
-    If you set the content to an array, it is usually best to maintain the 
-    array in the proper order that you want to display things rather than 
+
+    If you set the content to an array, it is usually best to maintain the
+    array in the proper order that you want to display things rather than
     using this method to order the array since it requires an extra processing
-    step.  You can use this orderBy property, however, for displaying smaller 
+    step.  You can use this orderBy property, however, for displaying smaller
     arrays of content.
-    
+
     Note that you can only to use addObject() to insert new objects into an
     array that is ordered.  You cannot manually reorder or insert new objects
-    into specific locations because the order is managed by this property 
+    into specific locations because the order is managed by this property
     instead.
-    
+
     If you pass a function, it should be suitable for use in compare().
-    
+
     @property {String|Array|Function}
   */
   orderBy: null,
-    
+
   /**
-    Set to YES if you want the controller to wrap non-enumerable content    
-    in an array and publish it.  Otherwise, it will treat single content like 
+    Set to YES if you want the controller to wrap non-enumerable content
+    in an array and publish it.  Otherwise, it will treat single content like
     null content.
-    
+
     @property {Boolean}
   */
   allowsSingleContent: YES,
-  
+
   /**
     Set to YES if you want objects removed from the array to also be
     deleted.  This is a convenient way to manage lists of items owned
     by a parent record object.
-    
+
     Note that even if this is set to NO, calling destroyObject() instead of
-    removeObject() will still destroy the object in question as well as 
+    removeObject() will still destroy the object in question as well as
     removing it from the parent array.
-    
+
     @property {Boolean}
   */
   destroyOnRemoval: NO,
 
   /**
-    Returns an SC.Array object suitable for use in a CollectionView.  
+    Returns an SC.Array object suitable for use in a CollectionView.
     Depending on how you have your ArrayController configured, this property
-    may be one of several different values.  
-    
+    may be one of several different values.
+
     @property {SC.Array}
   */
   arrangedObjects: function() {
     return this;
   }.property().cacheable(),
-  
+
   /**
-    Computed property indicates whether or not the array controller can 
+    Computed property indicates whether or not the array controller can
     remove content.  You can delete content only if the content is not single
     content and isEditable is YES.
-    
+
     @property {Boolean}
   */
   canRemoveContent: function() {
     var content = this.get('content'), ret;
     ret = !!content && this.get('isEditable') && this.get('hasContent');
     if (ret) {
-      return !content.isEnumerable || 
+      return !content.isEnumerable ||
              (SC.typeOf(content.removeObject) === SC.T_FUNCTION);
     } else return NO ;
   }.property('content', 'isEditable', 'hasContent'),
-  
+
   /**
     Computed property indicates whether you can reorder content.  You can
     reorder content as long a the controller isEditable and the content is a
     real SC.Array-like object.  You cannot reorder content when orderBy is
     non-null.
-    
+
     @property {Boolean}
   */
   canReorderContent: function() {
@@ -149,44 +149,44 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
     ret = !!content && this.get('isEditable') && !this.get('orderBy');
     return ret && !!content.isSCArray;
   }.property('content', 'isEditable', 'orderBy'),
-  
+
   /**
-    Computed property insides whether you can add content.  You can add 
-    content as long as the controller isEditable and the content is not a 
+    Computed property insides whether you can add content.  You can add
+    content as long as the controller isEditable and the content is not a
     single object.
-    
+
     Note that the only way to simply add object to an ArrayController is to
-    use the addObject() or pushObject() methods.  All other methods imply 
+    use the addObject() or pushObject() methods.  All other methods imply
     reordering and will fail.
-    
+
     @property {Boolean}
   */
   canAddContent: function() {
     var content = this.get('content'), ret ;
     ret = content && this.get('isEditable') && content.isEnumerable;
     if (ret) {
-      return (SC.typeOf(content.addObject) === SC.T_FUNCTION) || 
-             (SC.typeOf(content.pushObject) === SC.T_FUNCTION); 
+      return (SC.typeOf(content.addObject) === SC.T_FUNCTION) ||
+             (SC.typeOf(content.pushObject) === SC.T_FUNCTION);
     } else return NO ;
   }.property('content', 'isEditable'),
-  
+
   /**
     Set to YES if the controller has valid content that can be displayed,
     even an empty array.  Returns NO if the content is null or not enumerable
     and allowsSingleContent is NO.
-    
+
     @property {Boolean}
   */
   hasContent: function() {
     var content = this.get('content');
-    return !!content && 
+    return !!content &&
            (!!content.isEnumerable || !!this.get('allowsSingleContent'));
   }.property('content', 'allowSingleContent'),
 
   /**
     Returns the current status property for the content.  If the content does
     not have a status property, returns SC.Record.READY.
-    
+
     @property {Number}
   */
   status: function() {
@@ -194,40 +194,40 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
         ret = content ? content.get('status') : null;
     return ret ? ret : SC.Record.READY;
   }.property().cacheable(),
-  
+
   // ..........................................................
   // METHODS
-  // 
-  
+  //
+
   /**
-    Adds an object to the array.  If the content is ordered, this will add the 
+    Adds an object to the array.  If the content is ordered, this will add the
     object to the end of the content array.  The content is not ordered, the
     location depends on the implementation of the content.
-    
-    If the source content does not support adding an object, then this method 
+
+    If the source content does not support adding an object, then this method
     will throw an exception.
-    
+
     @param {Object} object the object to add
     @returns {SC.ArrayController} receiver
   */
   addObject: function(object) {
-    if (!this.get('canAddContent')) throw "%@ cannot add content".fmt(this);
-    
+    if (!this.get('canAddContent')) { throw "%@ cannot add content".fmt(this); }
+
     var content = this.get('content');
-    if (content.isSCArray) content.pushObject(object);
-    else if (content.addObject) content.addObject(object);
-    else throw "%@.content does not support addObject".fmt(this);
-    
+    if (content.isSCArray) { content.pushObject(object); }
+    else if (content.addObject) { content.addObject(object); }
+    else { throw "%@.content does not support addObject".fmt(this); }
+
     return this;
   },
-  
+
   /**
-    Removes the passed object from the array.  If the underyling content 
+    Removes the passed object from the array.  If the underyling content
     is a single object, then this simply sets the content to null.  Otherwise
     it will call removeObject() on the content.
-    
+
     Also, if destroyOnRemoval is YES, this will actually destroy the object.
-    
+
     @param {Object} object the object to remove
     @returns {SC.ArrayController} receiver
   */
@@ -235,24 +235,25 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
     if (!this.get('canRemoveContent')) {
       throw "%@ cannot remove content".fmt(this);
     }
-    
+
     var content = this.get('content');
-    if (content.isEnumerable) content.removeObject(object);
-    else {
+    if (content.isEnumerable) {
+      content.removeObject(object);
+    } else {
       this.set('content', null);
     }
-    
-    if (this.get('destroyOnRemoval') && object.destroy) object.destroy();
-    return this; 
+
+    if (this.get('destroyOnRemoval') && object.destroy) { object.destroy(); }
+    return this;
   },
-  
+
   // ..........................................................
   // SC.ARRAY SUPPORT
-  // 
+  //
 
   /**
     Compute the length of the array based on the observable content
-    
+
     @property {Number}
   */
   length: function() {
@@ -265,9 +266,9 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
   */
   objectAt: function(idx) {
     var content = this._scac_observableContent();
-    return content ? content.objectAt(idx) : undefined ;    
+    return content ? content.objectAt(idx) : undefined ;
   },
-  
+
   /** @private
     Forwards a replace on to the content, but only if reordering is allowed.
   */
@@ -279,8 +280,8 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
       }
     } else if (!this.get('canReorderContent')) {
       throw "%@ cannot add or reorder the current content".fmt(this);
-    }    
-    
+    }
+
     // if we can do this, then just forward the change.  This should fire
     // updates back up the stack, updating rangeObservers, etc.
     var content = this.get('content'); // note: use content, not observable
@@ -290,15 +291,15 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
         objsToDestroy.push(content.objectAt(i+start));
       }
     }
-    
+
     if (content) content.replace(start, amt, objects);
     for(i=0, objsLen = objsToDestroy.length; i<objsLen; i++){
-      
+
       objsToDestroy[i].destroy();
     }
     objsToDestroy = null;
-    
-    return this; 
+
+    return this;
   },
 
   indexOf: function(object, startAt) {
@@ -308,109 +309,88 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
 
   // ..........................................................
   // INTERNAL SUPPORT
-  // 
-  
+  //
+
   /** @private */
   init: function() {
     sc_super();
     this._scac_contentDidChange();
   },
-  
+
   /** @private
-    Cached observable content property.  Set to NO to indicate cache is 
+    Cached observable content property.  Set to NO to indicate cache is
     invalid.
   */
   _scac_cached: NO,
-  
+
   /**
     @private
-    
+
     Returns the current array this controller is actually managing.  Usually
     this should be the same as the content property, but sometimes we need to
     generate something different because the content is not a regular array.
-    
+
     Passing YES to the force parameter will force this value to be recomputed.
-  
+
     @returns {SC.Array} observable or null
   */
   _scac_observableContent: function() {
     var ret = this._scac_cached;
-    if (ret !== NO) return ret;
-    
-    var content = this.get('content'),
-        orderBy, func, t, len;
-    
+    if (ret) { return ret; }
+
+    var content = this.get('content'), func, len, order;
+
     // empty content
-    if (SC.none(content)) return this._scac_cached = [];
+    if (SC.none(content)) { return (this._scac_cached = []); }
 
     // wrap non-enumerables
     if (!content.isEnumerable) {
       ret = this.get('allowsSingleContent') ? [content] : [];
       return (this._scac_cached = ret);
-    } 
-    
+    }
+
     // no-wrap
-    orderBy = this.get('orderBy');
+    var orderBy = this.get('orderBy');
     if (!orderBy) {
-      if (content.isSCArray) return (this._scac_cached = content) ;
-      else throw "%@.orderBy is required for unordered content".fmt(this);     
+      if (content.isSCArray) { return (this._scac_cached = content) ; }
+      else { throw "%@.orderBy is required for unordered content".fmt(this); }
     }
-    
+
     // all remaining enumerables must be sorted.
-    
+
     // build array - then sort it
-    switch(SC.typeOf(orderBy)) {
-    case SC.T_STRING:
+    var type = SC.typeOf(orderBy);
+
+    if(type === SC.T_STRING) {
       orderBy = [orderBy];
-      break;
-    case SC.T_FUNCTION:
-      func = orderBy ;
-      break;
-    case SC.T_ARRAY:
-      break;
-    default:
+    } else if(type === SC.T_FUNCTION) {
+      func = orderBy;
+    } else if(type !== SC.T_ARRAY) {
       throw "%@.orderBy must be Array, String, or Function".fmt(this);
     }
-        
+
     // generate comparison function if needed - use orderBy
-    if (!func) {  
-      len = orderBy.get('length');
-      func = function(a,b) {
-        var idx=0, status=0, key, aValue, bValue, descending;
-        for(idx=0;(idx<len)&&(status===0);idx++) {
-          key = orderBy.objectAt(idx);
-          descending = NO;
-          
-          if (key.indexOf('ASC') > -1) {
-            key = key.split('ASC ')[1];
-          } else if (key.indexOf('DESC') > -1) {
-            key = key.split('DESC ')[1];
-            descending = YES;
-          }
-        
-          if (!a) aValue = a ;
-          else if (a.isObservable) aValue = a.get(key);
-          else aValue = a[key];
-
-          if (!b) bValue = b ;
-          else if (b.isObservable) bValue = b.get(key);
-          else bValue = b[key];
-        
-          status = SC.compare(aValue, bValue);
-          if (descending) status = (-1) * status;
-        }
-        return status ;
-      };
-    }
+    func = func || function(a,b) {
+      var status, key, match, descending;
+
+      for(var i=0, l=orderBy.get('length'); i<l && !status; i++) {
+        key = orderBy.objectAt(i);
+
+        match = key.match(/^(ASC )?(DESC )?(.*)$/);
+        key = match[3]; order = match[2] ? -1 : 1;
 
-    ret = [];
-    content.forEach(function(o) { ret.push(o); });
-    ret.sort(func);
-    
-    func = null ; // avoid memory leaks
-    return (this._scac_cached = ret) ;
+        if (a) { a = a.isObservable ? a.get(key) : a[key]; }
+        if (b) { b = b.isObservable ? b.get(key) : b[key]; }
+
+        status = SC.compare(a, b) * order;
+      }
+
+      return status ;
+    };
+
+    return (this._scac_cached = content.toArray().sort(func)) ;
   },
-  
+
   /** @private
     Whenever content changes, setup and teardown observers on the content
     as needed.
@@ -418,45 +398,45 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
   _scac_contentDidChange: function() {
 
     this._scac_cached = NO; // invalidate observable content
-    
+
     var cur    = this.get('content'),
         orders = !!this.get('orderBy'),
         last   = this._scac_content,
         oldlen = this._scac_length || 0,
-        ro     = this._scac_rangeObserver,
         func   = this._scac_rangeDidChange,
         efunc  = this._scac_enumerableDidChange,
         sfunc  = this._scac_contentStatusDidChange,
         newlen;
-        
-    if (last === cur) return this; // nothing to do
+
+    if (last === cur) { return this; } // nothing to do
 
     // teardown old observer
     if (last) {
-      if (ro && last.isSCArray) last.removeRangeObserver(ro);
-      else if (last.isEnumerable) last.removeObserver('[]', this, efunc);
+      if (ro && last.isSCArray) { last.removeRangeObserver(ro); }
+      else if (last.isEnumerable) { last.removeObserver('[]', this, efunc); }
       last.removeObserver('status', this, sfunc);
     }
-    
+
     ro = null;
-    
-    // save new cached values 
+
+    // save new cached values
     this._scac_cached = NO;
     this._scac_content = cur ;
-    
+
     // setup new observers
-    // also, calculate new length.  do it manually instead of using 
+    // also, calculate new length.  do it manually instead of using
     // get(length) because we want to avoid computed an ordered array.
     if (cur) {
-      if (!orders && cur.isSCArray) ro = cur.addRangeObserver(null,this,func);
-      else if (cur.isEnumerable) cur.addObserver('[]', this, efunc);
-      newlen = cur.isEnumerable ? cur.get('length') : 1; 
+      if (!orders && cur.isSCArray) { ro = cur.addRangeObserver(null, this, func); }
+      else if (cur.isEnumerable) { cur.addObserver('[]', this, efunc); }
+      newlen = cur.isEnumerable ? cur.get('length') : 1;
       cur.addObserver('status', this, sfunc);
-      
-    } else newlen = SC.none(cur) ? 0 : 1;
+
+    } else {
+      newlen = SC.none(cur) ? 0 : 1;
+    }
 
     this._scac_rangeObserver = ro;
-    
 
     // finally, notify enumerable content has changed.
     this._scac_length = newlen;
@@ -464,39 +444,19 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
     this.enumerableContentDidChange(0, newlen, newlen - oldlen);
     this.updateSelectionAfterContentChange();
   }.observes('content'),
-  
-  /** @private
-    Whenever enumerable content changes, need to regenerate the 
-    observableContent and notify that the range has changed.  
-    
-    This is called whenever the content enumerable changes or whenever orderBy
-    changes.
-  */
-  _scac_enumerableDidChange: function() {
-    var content = this.get('content'), // use content directly
-        newlen  = content ? content.get('length') : 0,
-        oldlen  = this._scac_length;
-        
-    this._scac_length = newlen;
-    this.beginPropertyChanges();
-    this._scac_cached = NO; // invalidate
-    this.enumerableContentDidChange(0, newlen, newlen-oldlen);
-    this.endPropertyChanges();
-    this.updateSelectionAfterContentChange();
-  }.observes('orderBy'),
-  
+
   /** @private
     Whenever array content changes, need to simply forward notification.
-    
+
     Assumes that content is not null and is SC.Array.
   */
   _scac_rangeDidChange: function(array, objects, key, indexes) {
-    if (key !== '[]') return ; // nothing to do
-    
+    if (key !== '[]') { return ; } // nothing to do
+
     var content = this.get('content');
     this._scac_length = content.get('length');
     this._scac_cached = NO; // invalidate
-    
+
     // if array length has changed, just notify every index from min up
     if (indexes) {
       this.beginPropertyChanges();
@@ -507,12 +467,32 @@ SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
       this.updateSelectionAfterContentChange();
     }
   },
-  
+
+  /** @private
+    Whenever enumerable content changes, need to regenerate the
+    observableContent and notify that the range has changed.
+
+    This is called whenever the content enumerable changes or whenever orderBy
+    changes.
+  */
+  _scac_enumerableDidChange: function() {
+    var content = this.get('content'), // use content directly
+        newlen  = content ? content.get('length') : 0,
+        oldlen  = this._scac_length;
+
+    this._scac_length = newlen;
+    this.beginPropertyChanges();
+    this._scac_cached = NO; // invalidate
+    this.enumerableContentDidChange(0, newlen, newlen-oldlen);
+    this.endPropertyChanges();
+    this.updateSelectionAfterContentChange();
+  }.observes('orderBy'),
+
   /** @private
     Whenver the content "status" property changes, relay out.
   */
   _scac_contentStatusDidChange: function() {
     this.notifyPropertyChange('status');
   }
-  
+
 });