sproutit-sproutcore 1.0.0.20090416161445 → 1.0.0.20090720093355

data/frameworks/sproutcore/frameworks/foundation/views/view.js

@@ -5,12 +5,12 @@
 // License:   Licened under MIT license (see license.js)
 // ==========================================================================
 
-require('system/browser');
-require('system/event');
-require('system/cursor');
+sc_require('system/browser');
+sc_require('system/event');
+sc_require('system/cursor');
+sc_require('system/responder') ;
 
-require('mixins/responder') ;
-require('mixins/string') ;
+sc_require('mixins/string') ;
 
 SC.viewKey = SC.guidKey + "_view" ;
 
@@ -69,6 +69,12 @@ SC.FULL_HEIGHT = { top: 0, bottom: 0 };
 */
 SC.ANCHOR_CENTER = { centerX: 0, centerY: 0 };
 
+/**
+  Layout property for width, height
+*/
+
+SC.LAYOUT_AUTO = 'auto';
+
 /** @private - custom array used for child views */
 SC.EMPTY_CHILD_VIEWS_ARRAY = [];
 SC.EMPTY_CHILD_VIEWS_ARRAY.needsClone = YES;
@@ -113,12 +119,11 @@ SC.EMPTY_CHILD_VIEWS_ARRAY.needsClone = YES;
     override this behavior with your own custom updating code, you can 
     replace updateLayer() with your own implementation instead.
   
-  @extends SC.Object
   @extends SC.Responder
   @extends SC.DelegateSupport
   @since SproutCore 1.0
 */
-SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
+SC.View = SC.Responder.extend(SC.DelegateSupport,
 /** @scope SC.View.prototype */ {
   
   concatenatedProperties: 'outlets displayProperties layoutProperties classNames renderMixin didCreateLayerMixin willDestroyLayerMixin'.w(),
@@ -217,6 +222,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     @property {Boolean}
   */
   isVisible: YES,
+  isVisibleBindingDefault: SC.Binding.bool(),
   
   /**
     YES only if the view and all of its parent views are currently visible
@@ -261,18 +267,31 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
       for(idx=0;idx<len;idx++) {
         childViews[idx].recomputeIsVisibleInWindow(cur);
       }
-
+        
       // if we just became visible, update layer + layout if needed...
-      if (cur && this.parentViewDidResize) this.parentViewDidResize();
+      if (cur) {
+        if (this.parentViewDidResize) this.parentViewDidResize();
+        this.set('layerNeedsUpdate', YES);
+        this.invokeOnce(this.updateLayerIfNeeded);
+        
+        if (this.get('childViewsNeedLayout')) {
+          this.invokeOnce(this.layoutChildViewsIfNeeded);
+        }
+        
+      // if we just became invisible, force an update to hide the layer
+      } else {
+        var that = this;
+        this.set('layerNeedsUpdate', YES);
+        this.invokeOnce(function() { that.updateLayerIfNeeded(YES); });
+      }
       
       // if we were firstResponder, resign firstResponder also if no longer
       // visible.
       if (!cur && this.get('isFirstResponder')) this.resignFirstResponder();
       
     }
-    
     return this ;
-  },
+  }.observes('isVisible'),
   
   // ..........................................................
   // CHILD VIEW SUPPORT
@@ -304,7 +323,6 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     @returns {SC.View} the receiver
   */
   insertBefore: function(view, beforeView) { 
-    
     view.beginPropertyChanges(); // limit notifications
     
     // remove view from old parent if needed.  Also notify views.
@@ -407,7 +425,6 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     @returns {SC.View} the receiver
   */
   replaceChild: function(view, oldView) {
-    
     // suspend notifications
     view.beginPropertyChanges();
     oldView.beginPropertyChanges();
@@ -423,6 +440,25 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     return this;
   },
   
+  /**
+    Replaces the current array of child views with the new array of child 
+    views.
+    
+    @param {Array} views views you want to add
+    @returns {SC.View} receiver
+  */
+  replaceAllChildren: function(views) {
+    var len = views.get('length'), idx;
+    
+    this.beginPropertyChanges();
+    this.destroyLayer().removeAllChildren();
+    for(idx=0;idx<len;idx++) this.appendChild(views.objectAt(idx));
+    this.replaceLayer();
+    this.endPropertyChanges();
+    
+    return this ;
+  },
+  
   /**
     Appends the specified view to the end of the receivers childViews array.  
     This is equivalent to calling insertBefore(view, null);
@@ -499,7 +535,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
   $: function(sel) {
     var ret, layer = this.get('layer') ;
     // note: SC.$([]) returns an empty CoreQuery object.  SC.$() would 
-    // return an object selecting hte document.
+    // return an object selecting the document.
     ret = !layer ? SC.$([]) : (sel === undefined) ? SC.$(layer) : SC.$(sel, layer) ;
     layer = null ; // avoid memory leak
     return ret ;
@@ -515,7 +551,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
   */
   containerLayer: function() {
     return this.get('layer') ;
-  }.property('layer').cacheable(),
+  }.property('layer').cacheable(), 
   
   /**
     The ID to use when trying to locate the layer in the DOM.  If you do not
@@ -541,9 +577,11 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
   */
   findLayerInParentLayer: function(parentLayer) {
     var layerId = this.get('layerId') ;
+    var node, i, ilen,found, elem;
     
     // first, let's try the fast path...
-    var elem = document.getElementById(layerId) ;
+    if(parentLayer.getElementById) elem = parentLayer.getElementById(layerId) ;
+    else elem = document.getElementById(layerId) ;
     
     // TODO: use code generation to only really do this check on IE
     if (SC.browser.msie && elem && elem.id !== layerId) elem = null ;
@@ -557,21 +595,25 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     // if no element was found the fast way, search down the parentLayer for
     // the element.  This code should not be invoked very often.  Usually a
     // DOM element will be discovered by the first method above.
+    // This code uses a BFS algorithm as is expected to find the layer right 
+    // below the parent.
     if (!elem) {
       elem = parentLayer.firstChild ;
-      while (elem && (elem.id !== layerId)) {
-        // try to get first child or next sibling if no children
-        var next = elem.firstChild || elem.nextSibling ;
-        
-        // if no next sibling, then get next sibling of parent.  Walk up 
-        // until we find parent with next sibling or find ourselves back at
-        // the beginning.
-        while (!next && elem && ((elem = elem.parentNode) !== parentLayer)) {
-          next = elem.nextSibling ;
+      var q=[];
+      q.push(parentLayer);
+      while(q.length!==0){
+        node=q[0];
+        q.shift();
+        if(node.id==layerId){
+          found=true;
+          elem=node;
+          break;
+        } 
+        for(i=0, ilen=node.childNodes.length; i<ilen; i++){
+          q.push(node.childNodes[i]);
         }
-        
-        elem = next ;
       }
+      if(!found) elem=null;  
     }
     
     return elem;
@@ -579,10 +621,14 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
   
   /**
     This method is invoked whenever a display property changes.  It will set 
-    the layerNeedsUpdate method to YES.
+    the layerNeedsUpdate method to YES.  If you need to perform additional
+    setup whenever the display changes, you can override this method as well.
+    
+    @returns {SC.View} receiver
   */
   displayDidChange: function() {
     this.set('layerNeedsUpdate', YES) ;
+    return this;
   },
   
   /**
@@ -603,7 +649,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
   _view_layerNeedsUpdateDidChange: function() {
     if (this.get('layerNeedsUpdate')) {
       this.invokeOnce(this.updateLayerIfNeeded) ;
-    } 
+    }
   }.observes('layerNeedsUpdate'),
   
   /**
@@ -627,10 +673,15 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
   updateLayerIfNeeded: function(isVisible) {
     if (!isVisible) isVisible = this.get('isVisibleInWindow') ;
     if (isVisible && this.get('layerNeedsUpdate')) {
-      this.beginPropertyChanges() ;
-      this.set('layerNeedsUpdate', NO) ;
-      this.updateLayer() ;
-      this.endPropertyChanges() ;
+      // only update a layer if it already exists
+      if (this.get('layer')) {
+        this.beginPropertyChanges() ;
+        this.set('layerNeedsUpdate', NO) ;
+        this.updateLayer() ;
+        this.endPropertyChanges() ;
+        
+      // clear our layerNeedsUpdate flag so we can respond to changes later
+      } else this.set('layerNeedsUpdate', NO) ;
     }
     return this ;
   },
@@ -687,7 +738,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     
     var context = this.renderContext(this.get('tagName')) ;
     
-    // now prepare the contet like normal.
+    // now prepare the content like normal.
     this.prepareContext(context, YES) ;
     this.set('layer', context.element()) ;
     
@@ -711,7 +762,10 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     
     var childViews = this.get('childViews') ;
     len = childViews.length ;
-    for (idx=0; idx<len; ++idx) childViews[idx]._notifyDidCreateLayer() ;
+    for (idx=0; idx<len; ++idx) {
+      if (!childViews[idx]) continue;
+      childViews[idx]._notifyDidCreateLayer() ;
+    }
   },
   
   /**
@@ -746,6 +800,18 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     return this ;
   },
   
+  /**
+    Destroys and recreates the current layer.  This can be more efficient than
+    modifying individual child views.
+    
+    @returns {SC.View} receiver
+  */
+  replaceLayer: function() {
+    this.destroyLayer();
+    this.set('layerLocationNeedsUpdate', YES) ;
+    this.invokeOnce(this.updateLayerLocationIfNeeded) ;
+  },
+    
   /** @private - 
     Invokes willDestroyLayer() on view and child views.  Then sets layer to
     null for receiver.
@@ -783,15 +849,20 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     // do some initial setup only needed at create time.
     if (firstTime) {
       // TODO: seems like things will break later if SC.guidFor(this) is used
+      
       layerId = this.layerId ? this.get('layerId') : SC.guidFor(this) ;
       context.id(layerId).classNames(this.get('classNames'), YES) ;
       this.renderLayout(context, firstTime) ;
+    }else{
+      context.resetClassNames();
+      context.classNames(this.get('classNames'), YES);  
     }
     
     // do some standard setup...
     if (this.get('isTextSelectable')) context.addClass('allow-select') ;
     if (!this.get('isEnabled')) context.addClass('disabled') ;
     if (!this.get('isVisible')) context.addClass('hidden') ;
+    if (this.get('isFirstResponder')) context.addClass('focus');
     
     bgcolor = this.get('backgroundColor');
     if (bgcolor) context.addStyle('backgroundColor', bgcolor);
@@ -821,6 +892,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     var cv = this.get('childViews'), len = cv.length, idx, view ;
     for (idx=0; idx<len; ++idx) {
       view = cv[idx] ;
+      if (!view) continue;
       context = context.begin(view.get('tagName')) ;
       view.prepareContext(context, firstTime) ;
       context = context.end() ;
@@ -874,6 +946,14 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
   */
   classNames: ['sc-view'],
   
+  /**
+    Tool tip property that will be set to the title attribute on the HTML 
+    rendered element.
+    
+    @property {String}
+  */
+  toolTip: null,
+
   /**
     Determines if the user can select text within the view.  Normally this is
     set to NO to disable text selection.  You should set this to YES if you
@@ -894,7 +974,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     @property {Array}
     @readOnly
   */
-  displayProperties: [],
+  displayProperties: ['isFirstResponder', 'isVisible'],
   
   /**
     You can set this to an SC.Cursor instance; it's className will 
@@ -981,7 +1061,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
       var nextNode = (nextView) ? nextView.get('layer') : null ;
       
       // before we add to parent node, make sure that the nextNode exists...
-      if (nextView && !nextNode) {
+      if (nextView && (!nextNode || nextNode.parentNode!==parentNode)) {
         nextView.updateLayerLocationIfNeeded() ;
         nextNode = nextView.get('layer') ;
       }
@@ -1007,9 +1087,98 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     The nextResponder is usually the parentView.
   */
   nextResponder: function() {
-    return this.get('parentView');
+    return this.get('parentView') ;
   }.property('parentView').cacheable(),
+
+  
+  /** @property
+    Set to YES if your view is willing to accept first responder status.  This 
+    is used when calculcating key responder loop.
+  */
+  acceptsFirstResponder: NO,
+
+  // ..........................................................
+  // KEY RESPONDER
+  // 
+  
+  /** @property
+    YES if the view is currently first responder and the pane the view belongs 
+    to is also key pane.  While this property is set, you should expect to 
+    receive keyboard events.
+  */
+  isKeyResponder: NO,
+
+  /**
+    This method is invoked just before you lost the key responder status.  The passed view is the view that is about to gain keyResponder status.  This gives you a chance to do any early setup.
+    
+    Remember that you can gain/lose key responder status either because another view in the same pane is becoming first responder or because another pane is about to become key.
+    
+    @param {SC.Responder} responder
+  */
+  willLoseKeyResponderTo: function(responder) {},
   
+  /**
+    This method is invoked just before you become the key responder.  The passed view is the view that is about to lose keyResponder status.  You can use this to do any setup before the view changes.
+    
+    Remember that you can gain/lose key responder status either because another view in the same pane is becoming first responder or because another pane is about to become key.
+    
+    @param {SC.Responder} responder
+  */
+  willBecomeKeyResponderFrom: function(responder) {},
+  
+  /**
+    Invokved just after the responder loses key responder status.
+  */
+  didLoseKeyResponderTo: function(responder) {},
+  
+  /**
+    Invoked just after the responder gains key responder status.
+  */
+  didBecomeKeyResponderFrom: function(responder) {},
+    
+  /**
+    This method will process a key input event, attempting to convert it to an appropriate action method and sending it up the responder chain.  The event is converted using the SC.KEY_BINDINGS hash, which maps key events into method names.  If no key binding is found, then the key event will be passed along using an insertText() method.
+    
+    @param {SC.Event} event
+    @returns {Object} object that handled event, if any
+  */
+  interpretKeyEvents: function(event) {
+    var codes = event.commandCodes(), cmd = codes[0], chr = codes[1];
+
+    if (!cmd && !chr) return null ;  //nothing to do.
+
+    // if this is a command key, try to do something about it.
+    if (cmd) {
+      var methodName = SC.MODIFIED_KEY_BINDINGS[cmd] || SC.BASE_KEY_BINDINGS[cmd.match(/[^_]+$/)[0]];
+      if (methodName) {
+        var target = this, pane = this.get('pane'), handler = null;
+        while(target && !(handler = target.tryToPerform(methodName, event))){
+          target = (target===pane)? null: target.get('nextResponder') ;
+        }
+        return handler ;
+      }
+    } 
+
+    if (chr && this.respondsTo('insertText')) {
+      // if we haven't returned yet and there is plain text, then do an insert 
+      // of the text.  Since this is not an action, do not send it up the 
+      // responder chain.
+     return this.insertText(chr);
+    }
+
+    return null ; //nothing to do.
+  },
+  
+  /**
+    This method is invoked by interpretKeyEvents() when you receive a key event matching some plain text.  You can use this to actually insert the text into your application, if needed.
+    
+    @param {SC.Event} event
+    @returns {Object} receiver or object that handled event
+  */
+  insertText: function(chr) {
+    return this ;
+  },
+    
   /**
     Recursively travels down the view hierarchy looking for a view that 
     implements the key equivalent (returning to YES to indicate it handled 
@@ -1025,9 +1194,12 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     @returns {Boolean}
   */
   performKeyEquivalent: function(keystring, evt) {
-    var ret = null, childViews = this.get('childViews'), len = childViews.length, idx=-1;
-    while(!ret && (++idx<len)) {
-      ret = childViews[idx].performKeyEquivalent(keystring, evt);
+    var ret = NO,
+        childViews = this.get('childViews'),
+        len = childViews.length,
+        idx = -1 ;
+    while (!ret && (++idx < len)) {
+      ret = childViews[idx].performKeyEquivalent(keystring, evt) ;
     }
     return ret ;
   },
@@ -1061,7 +1233,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     // TODO: Optimize into class setup 
     dp = this.get('displayProperties') ; 
     idx = dp.length ;
-    while(--idx >= 0) {
+    while (--idx >= 0) {
       this.addObserver(dp[idx], this, this.displayDidChange) ;
     }
     
@@ -1087,7 +1259,10 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
   awake: function() {
     sc_super();
     var childViews = this.get('childViews'), len = childViews.length, idx ;
-    for (idx=0; idx<len; ++idx) childViews[idx].awake() ;
+    for (idx=0; idx<len; ++idx) {
+      if (!childViews[idx]) continue ;
+      childViews[idx].awake() ;
+    } 
   },
     
   /** 
@@ -1173,6 +1348,12 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
           view = this[key];
         } else key = null ;
         
+        if (!view) {
+          console.error ("No view with name "+key+" has been found in "+this.toString());
+          // skip this one.
+          continue;
+        }
+        
         if (view.isClass) {
           view = this.createChildView(view) ; // instantiate if needed
           if (key) this[key] = view ; // save on key name if passed
@@ -1201,6 +1382,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     // attrs should always exist...
     if (!attrs) attrs = {} ;
     attrs.owner = attrs.parentView = this ;
+    attrs.isVisibleInWindow = this.get('isVisibleInWindow');
     if (!attrs.page) attrs.page = this.page ;
     
     // Now add this to the attributes and create.
@@ -1261,11 +1443,6 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
       }
     }
     
-    // if (didChange) {
-    //   console.log('did change layout') ;
-    //   console.log(layout) ;
-    // }
-    
     // now set adjusted layout
     if (didChange) this.set('layout', layout) ;
     
@@ -1329,7 +1506,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     // walk up this side
     while (view) {
       f = view.get('frame'); myX += f.x; myY += f.y ;
-      view = view.get('parentView') ; 
+      view = view.get('layoutView') ; 
     }
     
     // walk up other size
@@ -1337,7 +1514,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
       view = targetView ;
       while (view) {
         f = view.get('frame'); targetX += f.x; targetY += f.y ;
-        view = view.get('parentView') ; 
+        view = view.get('layoutView') ; 
       }
     }
     
@@ -1417,13 +1594,31 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
   */
   computeFrameWithParentFrame: function(pdim) {
     var layout = this.get('layout') ;
-    var f = {} ;
+    var f = {} , error, layer, AUTO = SC.LAYOUT_AUTO;
+    var stLayout = this.get('useStaticLayout') ;
+    
+    if (layout.width !== undefined &&
+        layout.width === SC.LAYOUT_AUTO &&
+        stLayout !== undefined && !stLayout) {
+     error = SC.Error.desc("%@.layout() you cannot use width:auto if staticLayout is disabled".fmt(this),"%@".fmt(this), -1) ;
+     console.error(error.toString()) ;
+     throw error ;
+    }
+    
+    if (layout.height !== undefined &&
+        layout.height === SC.LAYOUT_AUTO &&
+        stLayout !== undefined && !stLayout) {
+      error = SC.Error.desc("%@.layout() you cannot use height:auto if staticLayout is disabled".fmt(this),"%@".fmt(this), -1) ;
+      console.error(error.toString())  ;
+      throw error ;
+    }
     
     // handle left aligned and left/right 
     if (!SC.none(layout.left)) {
       f.x = Math.floor(layout.left) ;
       if (layout.width !== undefined) {
-        f.width = Math.floor(layout.width) ;
+        if(layout.width === AUTO) f.width = AUTO ;
+        else f.width = Math.floor(layout.width) ;
       } else { // better have layout.right!
         if (!pdim) pdim = this.computeParentDimensions(layout) ;
         f.width = Math.floor(pdim.width - f.x - (layout.right || 0)) ;
@@ -1436,28 +1631,34 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
         f.width = pdim.width - layout.right ;
         f.x = 0 ;
       } else {
-        f.width = Math.floor(layout.width || 0) ;
+        if(layout.width === AUTO) f.width = AUTO ;
+        else f.width = Math.floor(layout.width || 0) ;
         f.x = Math.floor(pdim.width - layout.right - f.width) ;
       }
       
     // handle centered
     } else if (!SC.none(layout.centerX)) {
       if (!pdim) pdim = this.computeParentDimensions(layout) ; 
-      f.width = Math.floor(layout.width || 0) ;
+      if(layout.width === AUTO) f.width = AUTO ;
+      else f.width = Math.floor(layout.width || 0) ;
       f.x = Math.floor((pdim.width - f.width)/2 + layout.centerX) ;
     } else {
       f.x = 0 ; // fallback
       if (SC.none(layout.width)) {
         if (!pdim) pdim = this.computeParentDimensions(layout) ;
         f.width = Math.floor(pdim.width) ;
-      } else f.width = layout.width ;
+      } else {
+        if(layout.width === AUTO) f.width = AUTO ;
+        else f.width = Math.floor(layout.width || 0) ;
+      }
     }
     
     // handle top aligned and top/bottom 
     if (!SC.none(layout.top)) {
       f.y = Math.floor(layout.top) ;
       if (layout.height !== undefined) {
-        f.height = Math.floor(layout.height) ;
+        if(layout.height === AUTO) f.height = AUTO ;
+        else f.height = Math.floor(layout.height) ;
       } else { // better have layout.bottm!
         if (!pdim) pdim = this.computeParentDimensions(layout) ;
         f.height = Math.floor(pdim.height - f.y - (layout.bottom || 0)) ;
@@ -1470,14 +1671,16 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
         f.height = pdim.height - layout.bottom ;
         f.y = 0 ;
       } else {
-        f.height = Math.floor(layout.height || 0) ;
+        if(layout.height === AUTO) f.height = AUTO ;
+        else f.height = Math.floor(layout.height || 0) ;
         f.y = Math.floor(pdim.height - layout.bottom - f.height) ;
       }
       
     // handle centered
     } else if (!SC.none(layout.centerY)) {
       if (!pdim) pdim = this.computeParentDimensions(layout) ; 
-      f.height = Math.floor(layout.height || 0) ;
+      if(layout.height === AUTO) f.height = AUTO ;
+      else f.height = Math.floor(layout.height || 0) ;
       f.y = Math.floor((pdim.height - f.height)/2 + layout.centerY) ;
       
     // fallback
@@ -1486,7 +1689,17 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
       if (SC.none(layout.height)) {
         if (!pdim) pdim = this.computeParentDimensions(layout) ; 
         f.height = Math.floor(pdim.height) ;
-      } else f.height = layout.height;
+      } else {
+        if(layout.height === AUTO) f.height = AUTO ;
+        else f.height = Math.floor(layout.height || 0) ;
+      }
+    }
+    
+    // if width or height were set to auto and we have a layer, try lookup
+    if (f.height === AUTO || f.width === AUTO) {
+      layer = this.get('layer');
+      if (f.height === AUTO) f.height = layer ? layer.clientHeight : 0;
+      if (f.width === AUTO) f.width = layer ? layer.clientWidth : 0;
     }
     
     // make sure the width/height fix min/max...
@@ -1667,7 +1880,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     return this ;
   },
   
-  /** 
+  /**
     layoutStyle describes the current styles to be written to your element
     based on the layout you defined.  Both layoutStyle and frame reset when
     you edit the layout property.  Both are read only.
@@ -1678,7 +1891,24 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     @readOnly
   */
   layoutStyle: function() {
-    var layout = this.get('layout'), ret = {}, pdim = null;
+    var layout = this.get('layout'), ret = {}, pdim = null, error, AUTO = SC.LAYOUT_AUTO;
+    var stLayout = this.get('useStaticLayout');
+    
+    if (layout.width !== undefined &&
+        layout.width === SC.LAYOUT_AUTO &&
+        !stLayout) {
+     error= SC.Error.desc("%@.layout() you cannot use width:auto if  staticLayout is disabled".fmt(this),"%@".fmt(this),-1);
+     console.error(error.toString()) ;
+     throw error ;
+    }
+    
+    if (layout.height !== undefined &&
+        layout.height === SC.LAYOUT_AUTO &&
+        !stLayout) {
+      error = SC.Error.desc("%@.layout() you cannot use height:auto if  staticLayout is disabled".fmt(this),"%@".fmt(this),-1);  
+      console.error(error.toString()) ;
+      throw error ;
+    }
     
     // X DIRECTION
     
@@ -1686,7 +1916,8 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     if (!SC.none(layout.left)) {
       ret.left = Math.floor(layout.left);
       if (layout.width !== undefined) {
-        ret.width = Math.floor(layout.width) ;
+        if(layout.width === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
+        else ret.width = Math.floor(layout.width) ;
         ret.right = null ;
       } else {
         ret.width = null ;
@@ -1704,7 +1935,8 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
         ret.width = null;
       } else {
         ret.left = null ;
-        ret.width = Math.floor(layout.width || 0) ;
+        if(layout.width === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
+        else ret.width = Math.floor(layout.width || 0) ;
       }
       
     // handle centered
@@ -1718,7 +1950,8 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     } else if (!SC.none(layout.width)) {
       ret.left =  0;
       ret.right = null;
-      ret.width = Math.floor(layout.width);
+      if(layout.width === SC.LAYOUT_AUTO) ret.width = SC.LAYOUT_AUTO ;
+      else ret.width = Math.floor(layout.width);
       ret.marginLeft = 0;
       
     // fallback, full width.
@@ -1729,9 +1962,10 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
       ret.marginLeft= 0;
     }
     
+    
     // handle min/max
-    ret.minWidth = (layout.minWidth === undefined) ? null : layout.minWidth;
-    ret.maxWidth = (layout.maxWidth === undefined) ? null : layout.maxWidth;
+    ret.minWidth = (layout.minWidth === undefined) ? null : layout.minWidth ;
+    ret.maxWidth = (layout.maxWidth === undefined) ? null : layout.maxWidth ;
     
     // Y DIRECTION
     
@@ -1739,7 +1973,8 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     if (!SC.none(layout.top)) {
       ret.top = Math.floor(layout.top);
       if (layout.height !== undefined) {
-        ret.height = Math.floor(layout.height) ;
+        if(layout.height === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
+        else ret.height = Math.floor(layout.height) ;
         ret.bottom = null ;
       } else {
         ret.height = null ;
@@ -1756,7 +1991,8 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
         ret.height = null ;
       } else {
         ret.top = null ;
-        ret.height = Math.floor(layout.height || 0) ;
+        if(layout.height === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
+        else ret.height = Math.floor(layout.height || 0) ;
       }
       
     // handle centered
@@ -1769,7 +2005,8 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     } else if (!SC.none(layout.height)) {
       ret.top = 0;
       ret.bottom = null;
-      ret.height = Math.floor(layout.height || 0);
+      if(layout.height === SC.LAYOUT_AUTO) ret.height = SC.LAYOUT_AUTO ;
+      else ret.height = Math.floor(layout.height || 0) ;
       ret.marginTop = 0;
       
     // fallback, full width.
@@ -1781,14 +2018,21 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     }
     
     // handle min/max
-    ret.minHeight = (layout.minHeight === undefined) ? null : layout.minHeight;
-    ret.maxHeight = (layout.maxHeight === undefined) ? null : layout.maxHeight;
+    ret.minHeight = (layout.minHeight === undefined) ?
+      null :
+      layout.minHeight ;
+    ret.maxHeight = (layout.maxHeight === undefined) ?
+      null :
+      layout.maxHeight ;
     
     // if zIndex is set, use it.  otherwise let default shine through
     ret.zIndex = SC.none(layout.zIndex) ? null : layout.zIndex.toString();
-
-    // if backgroundPosition is set, use it.  otherwise let default shine through
-    ret.backgroundPosition = SC.none(layout.backgroundPosition) ? null : layout.backgroundPosition.toString();
+    
+    // if backgroundPosition is set, use it.
+    // otherwise let default shine through
+    ret.backgroundPosition = SC.none(layout.backgroundPosition) ?
+      null :
+      layout.backgroundPosition.toString() ;
     
     // set default values to null to allow built-in CSS to shine through
     // currently applies only to marginLeft & marginTop
@@ -1814,7 +2058,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     return this.get('parentView') ;
   }.property('parentView').cacheable(),
   
-  /** 
+  /**
     This method is called whenever a property changes that invalidates the 
     layout of the view.  Changing the layout will do this automatically, but 
     you can add others if you want.
@@ -1822,7 +2066,6 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     @returns {SC.View} receiver
   */
   layoutDidChange: function() {
-    // console.log('%@.layoutDidChange()'.fmt(this));
     this.beginPropertyChanges() ;
     if (this.frame) this.notifyPropertyChange('frame') ;
     this.notifyPropertyChange('layoutStyle') ;
@@ -1849,7 +2092,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     @property {Boolean}
   */
   childViewsNeedLayout: NO,
-
+  
   /**
     One of two methods that are invoked whenever one of your childViews 
     layout changes.  This method is invoked everytime a child view's layout
@@ -1871,7 +2114,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
   */
   layoutDidChangeFor: function(childView) {
     var set = this._needLayoutViews ;
-    if (!set) set = this._needLayoutViews = SC.Set.create();
+    if (!set) set = this._needLayoutViews = SC.CoreSet.create();
     set.add(childView);
   },
   
@@ -1891,7 +2134,7 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
     }
     return this ;
   },
-
+  
   /**
     Applies the current layout to the layer.  This method is usually only
     called once per runloop.  You can override this method to provide your 
@@ -1957,11 +2200,11 @@ SC.View = SC.Object.extend(SC.Responder, SC.DelegateSupport,
 });
 
 SC.View.mixin(/** @scope SC.View @static */ {
-
+  
   /** @private walk like a duck -- used by SC.Page */
   isViewClass: YES,
   
-  /** 
+  /**
     This method works just like extend() except that it will also preserve
     the passed attributes in case you want to use a view builder later, if 
     needed.
@@ -1979,7 +2222,7 @@ SC.View.mixin(/** @scope SC.View @static */ {
     }
     return ret ;
   },
-
+  
   /**
     Helper applies the layout to the prototype. 
   */
@@ -2010,7 +2253,9 @@ SC.View.mixin(/** @scope SC.View @static */ {
   */
   childView: function(cv) {
     var childViews = this.prototype.childViews || [];
-    if (childViews === this.superclass.prototype.childViews) childViews = childViews.slice();
+    if (childViews === this.superclass.prototype.childViews) {
+      childViews = childViews.slice();
+    }
     childViews.push(cv) ;
     this.prototype.childViews = childViews;
     return this ;