sproutcore 1.0.1037 → 1.0.1042

data/frameworks/sproutcore/frameworks/desktop/english.lproj/list_item.css

@@ -95,13 +95,8 @@
 	border: 1px #333 solid;
 }
 
-.sc-list-item-view .sc-checkbox-view.sel {
-	background-image: sc_static('icons/mini_454545'); 
-	background-position: -66px -147px;
-}
 
 .sc-list-item-view .sc-checkbox-view.active {
-	background-image: sc_static('icons/mini_ffffff'); 
 	background-color: #333;
 	border-color: black;
 }
@@ -156,13 +151,6 @@
 	right: 1px;
 	top: 50%;
 	margin-top: -8px;
-	background-image: sc_static('icons/mini_454545'); 
-	background-position: -32px 0;
-}
-
-.sc-list-item-view.sel .branch,
-.sc-list-item-view.active .branch {
-	background-image: sc_static('icons/mini_ffffff'); 
 }
 
 /* @end */

data/frameworks/sproutcore/frameworks/desktop/english.lproj/menu_item_view.css

@@ -24,7 +24,6 @@
   left: 0px;
   right: 0px;
   line-height: 22px;
-  text-shadow: #b0b0b0 0px 1px 0px;
   text-decoration: none ;
   text-align: left;
   color: black;
@@ -36,7 +35,6 @@
 }
 
 .sc-menu-item.disabled{
-  background-color:#E0E0E0;
   border:none;
   color:#A0A0A0;
 }
@@ -75,16 +73,16 @@
 .sc-pane.sc-panel > .sc-view.sc-menu-item.focus, 
 .sc-menu-item a:hover {
   background-color: #5A8EC6;
+  color: #fff;
 }
 
 .sc-menu-item.disabled a:hover {
-  background-color: #E0E0E0;
+  background-color: transparent;
+  color:#A0A0A0;
 }
 /* @end */
 
 .sc-menu-item div.checkbox {
-  background-image: sc_static('icons/mini_454545'); 
-  background-position: -66px -147px;
   position: absolute;
   display: block;
   width: 12px;
@@ -96,7 +94,6 @@
 }
 
 .sc-menu-item.focus div.checkbox {
-  background-image: sc_static('icons/mini_ffffff'); 
 }
 
 

data/frameworks/sproutcore/frameworks/desktop/english.lproj/panel.css

@@ -19,7 +19,6 @@
 }
 
 .sc-pane.sc-panel > .top-right-edge {
-  background: static_url('images/panels/sprite-x.png') no-repeat -40px -120px;
   position: absolute;
   width: 40px;
   height: 40px;
@@ -29,7 +28,6 @@
 }
 
 .sc-pane.sc-panel > .top-left-edge {
-  background: static_url('images/panels/sprite-x.png') no-repeat 0px -120px;
   position: absolute;
   width: 40px;
   height: 40px;
@@ -39,7 +37,6 @@
 }
 
 .sc-pane.sc-panel > .bottom-left-edge {
-  background: static_url('images/panels/sprite-x.png') no-repeat 0px -160px;
   position: absolute;
   width: 40px;
   height: 40px;
@@ -49,7 +46,6 @@
 }
 
 .sc-pane.sc-panel > .bottom-right-edge {
-  background: static_url('images/panels/sprite-x.png') no-repeat -40px -160px;
   position: absolute;
   width: 40px;
   height: 40px;
@@ -59,7 +55,6 @@
 }
 
 .sc-pane.sc-panel > .top-edge {
-  background: static_url('images/panels/sprite-x.png') repeat-x 0px -230px;
   position: absolute;
   height: 20px;
   top: -20px;
@@ -69,7 +64,6 @@
 }
 
 .sc-pane.sc-panel > .bottom-edge {
-  background: static_url('images/panels/sprite-x.png') repeat-x 0px -210px;
   position: absolute;
   height: 20px;
   bottom: -20px;
@@ -79,7 +73,6 @@
 }
 
 .sc-pane.sc-panel > .left-edge {
-  background: static_url('images/panels/sprite-y.png') repeat-y 0px 0px;
   position: absolute;
   width: 20px;
   top: 20px;
@@ -89,7 +82,6 @@
 }
 
 .sc-pane.sc-panel > .right-edge {
-  background: static_url('images/panels/sprite-y.png') repeat-y -20px 0px;
   position: absolute;
   width: 20px;
   top: 20px;

data/frameworks/sproutcore/frameworks/desktop/english.lproj/picker.css

@@ -1,7 +1,6 @@
 /** SC.PickerPane Support */
 
 .sc-pane.sc-panel.sc-picker .perfectRight {
-  background: static_url('images/panels/sprite-x.png') no-repeat 0px -30px;
   position: absolute;
   width: 25px;
   height: 51px;
@@ -10,7 +9,6 @@
 }
 
 .sc-pane.sc-panel.sc-picker .perfectLeft {
-  background: static_url('images/panels/sprite-x.png') no-repeat -30px -30px;
   position: absolute;
   width: 25px;
   height: 51px;
@@ -19,7 +17,6 @@
 }
 
 .sc-pane.sc-panel.sc-picker .perfectTop {
-  background: static_url('images/panels/sprite-x.png') no-repeat 0px -90px;
   position: absolute;
   width: 51px;
   height: 25px;
@@ -29,7 +26,6 @@
 }
 
 .sc-pane.sc-panel.sc-picker .perfectBottom {
-  background: static_url('images/panels/sprite-x.png') no-repeat 0px 0px;
   position: absolute;
   width: 51px;
   height: 25px;

data/frameworks/sproutcore/frameworks/desktop/english.lproj/segmented.css

@@ -5,6 +5,7 @@
 
 .sc-segmented-view {
   display: block;
+  text-align: center;
 }
 
 .sc-segmented-view a.sc-segment {

data/frameworks/sproutcore/frameworks/desktop/english.lproj/well.css

@@ -68,5 +68,4 @@
   bottom: 5px;
   right: 7px;
   left: 7px;
-  z-index:-1;
 }

data/frameworks/sproutcore/frameworks/desktop/mixins/border.js

@@ -46,7 +46,7 @@ SC.Border = {
     if (style) {
       if (this._BORDER_REGEXP.exec(style)) {
         context.addClass(style);
-      } else content.addStyle('border', '1px %@ solid'.fmt(style));
+      } else context.addStyle('border', '1px %@ solid'.fmt(style));
     }
   }
   

data/frameworks/sproutcore/frameworks/desktop/panes/alert.js

@@ -229,7 +229,7 @@ SC.AlertPane = SC.PanelPane.extend({
       SC.View.extend({
         layout: { bottom: 13, height: 24, right: 18, width: 466 },
         childViews: ['cancelButton', 'okButton'],
-        classNames: ['textAlignRight'],
+        classNames: ['text-align-right'],
         cancelButton : SC.ButtonView.extend({
             useStaticLayout: YES,
             actionKey: SC.BUTTON2_STATUS,
@@ -350,6 +350,7 @@ SC.AlertPane.show = function(message, description, caption, button1Title, button
     title = args[idx + 3];
     if (title) {
       button.set('title', title).set('isVisible', YES);
+      if(title=='?') button.set('titleMinWidth', 0);
       if (idx==2) {
         var button_wrapper = ret.get('buttonThreeWrapper');
         button_wrapper.set('isVisible', YES);

data/frameworks/sproutcore/frameworks/desktop/panes/menu.js

@@ -493,6 +493,10 @@ SC.MenuPane = SC.PickerPane.extend(
         action, isEnabled, target, idx;
     if(!this.get('isEnabled')) return NO ;
     this.displayItems() ;
+
+    // Make sure we redraw the menu items if they've changed
+    SC.RunLoop.begin().end();
+
     items = this.get('displayItemsArray') ;
     if (!items) return NO;
 
@@ -570,12 +574,15 @@ SC.MenuPane = SC.PickerPane.extend(
     @returns MenuItemView
   */
   getPreviousEnabledMenuItem : function(menuItem) {
-    var content, itemView, menuItemViews = this.get('menuItemViews') ;
+    var content, itemView, len, idx, menuIdx, isEnabled, isSeparator, 
+      menuItemViews = this.get('menuItemViews') ;
     if(menuItemViews) {
-      var len = menuItemViews.length ;
-      var idx = (menuItemViews.indexOf(menuItem) === -1) ? 
+      len = menuItemViews.length ;
+      idx = (menuItemViews.indexOf(menuItem) === -1) ? 
               len : menuItemViews.indexOf(menuItem) ;
-      var menuIdx = idx, isEnabled = NO, isSeparator = NO ;
+      menuIdx = idx;
+      isEnabled = NO;
+      isSeparator = NO ;
       while((!isEnabled || isSeparator) && --idx !== menuIdx) {
         if(idx === -1) idx = len - 1;
         itemView = menuItemViews[idx];

data/frameworks/sproutcore/frameworks/desktop/panes/palette.js

@@ -50,6 +50,7 @@ SC.PalettePane = SC.PanelPane.extend({
     var f=this.get('frame');
     this._mouseOffsetX = f ? (f.x - evt.pageX) : 0;
     this._mouseOffsetY = f ? (f.y - evt.pageY) : 0;
+    return YES;
   },
 
   mouseDragged: function(evt) {
@@ -57,6 +58,7 @@ SC.PalettePane = SC.PanelPane.extend({
       this.set('layout', { width: this.layout.width, height: this.layout.height, left: this._mouseOffsetX + evt.pageX, top: this._mouseOffsetY + evt.pageY });
       this.updateLayout();
     }
+    return YES;
   }
   
  

data/frameworks/sproutcore/frameworks/desktop/panes/panel.js

@@ -176,9 +176,5 @@ SC.PanelPane = SC.Pane.extend({
     var ret = sc_super();
     this.becomeKeyPane();
     return ret ;
-  },
-
-  /** @private - suppress all mouse events on panel itself. */
-  mouseDown: function(evt) { return YES; }
-  
+  }
 });

data/frameworks/sproutcore/frameworks/desktop/panes/picker.js

@@ -180,7 +180,7 @@ SC.PickerPane = SC.PalettePane.extend({
         switch (preferType) {
           case SC.PICKER_MENU:
           case SC.PICKER_FIXED:
-            if(!preferMatrix || preferMatrix.length != 3) {
+            if(!preferMatrix || preferMatrix.length !== 3) {
               // default below the anchor with fine tunned visual alignment 
               // for Menu to appear just below the anchorElement.
               this.set('preferMatrix', [1, 4, 3]) ;
@@ -324,20 +324,20 @@ SC.PickerPane = SC.PalettePane.extend({
 
     var prefP1    =[[a.x+a.width+(7+overlapTunningX), a.y+parseInt(a.height/2,0)-40], 
                     [a.x-f.width-(7+overlapTunningX),  a.y+parseInt(a.height/2,0)-40], 
-                    [a.x+parseInt(a.width/2,0)-parseInt(f.width/2,0), a.y-f.height-(17+overlapTunningY)],
-                    [a.x+parseInt(a.width/2,0)-parseInt(f.width/2,0), a.y+a.height+(17+overlapTunningY)]];
+                    [a.x+parseInt((a.width/2)-(f.width/2),0), a.y-f.height-(17+overlapTunningY)],
+                    [a.x+parseInt((a.width/2)-(f.width/2),0), a.y+a.height+(17+overlapTunningY)]];
     // bottom-right corner of 4 perfect positioned f  (4x2)
     var prefP2    =[[a.x+a.width+f.width+(7+overlapTunningX), a.y+parseInt(a.height/2,0)+f.height-24], 
                     [a.x-(7+overlapTunningX),                  a.y+parseInt(a.height/2,0)+f.height-24], 
-                    [a.x+parseInt(a.width/2,0)-parseInt(f.width/2,0)+f.width, a.y-(17+overlapTunningY)],
-                    [a.x+parseInt(a.width/2,0)-parseInt(f.width/2,0)+f.width, a.y+a.height+f.height+(17+overlapTunningY)]];
+                    [a.x+parseInt((a.width/2)-(f.width/2),0)+f.width, a.y-(17+overlapTunningY)],
+                    [a.x+parseInt((a.width/2)-(f.width/2),0)+f.width, a.y+a.height+f.height+(17+overlapTunningY)]];
     // cutoff of 4 perfect positioned f: top, right, bottom, left  (4x4)
     var cutoffPrefP =[[prefP1[0][1]>0 ? 0 : 0-prefP1[0][1], prefP2[0][0]<w.width ? 0 : prefP2[0][0]-w.width, prefP2[0][1]<w.height ? 0 : prefP2[0][1]-w.height, prefP1[0][0]>0 ? 0 : 0-prefP1[0][0]], 
                       [prefP1[1][1]>0 ? 0 : 0-prefP1[1][1], prefP2[1][0]<w.width ? 0 : prefP2[1][0]-w.width, prefP2[1][1]<w.height ? 0 : prefP2[1][1]-w.height, prefP1[1][0]>0 ? 0 : 0-prefP1[1][0]],
                       [prefP1[2][1]>0 ? 0 : 0-prefP1[2][1], prefP2[2][0]<w.width ? 0 : prefP2[2][0]-w.width, prefP2[2][1]<w.height ? 0 : prefP2[2][1]-w.height, prefP1[2][0]>0 ? 0 : 0-prefP1[2][0]],
                       [prefP1[3][1]>0 ? 0 : 0-prefP1[3][1], prefP2[3][0]<w.width ? 0 : prefP2[3][0]-w.width, prefP2[3][1]<w.height ? 0 : prefP2[3][1]-w.height, prefP1[3][0]>0 ? 0 : 0-prefP1[3][0]]];
 
-    if(!this.preferMatrix || this.preferMatrix.length != 5) {
+    if(!this.preferMatrix || this.preferMatrix.length !== 5) {
       // default re-position rule : perfect right (0) > perfect left (1) > perfect top (2) > perfect bottom (3)
       // fallback to perfect top (2)
       this.set('preferMatrix', [0,1,2,3,2]) ;
@@ -361,31 +361,32 @@ SC.PickerPane = SC.PalettePane.extend({
     }
     this.set('pointerPosX', 0);
 
-    for(var i=0; i<SC.POINTER_LAYOUT.length; i++) {
-      if (cutoffPrefP[m[i]][0]===0 && cutoffPrefP[m[i]][1]===0 && cutoffPrefP[m[i]][2]===0 && cutoffPrefP[m[i]][3]===0) {
+    for(var i=0, cM, pointerLen=SC.POINTER_LAYOUT.length; i<pointerLen; i++) {
+      cM = m[i];
+      if (cutoffPrefP[cM][0]===0 && cutoffPrefP[cM][1]===0 && cutoffPrefP[cM][2]===0 && cutoffPrefP[cM][3]===0) {
         // alternative i in preferMatrix by priority
-        if (m[4] != m[i]) {
-          f.x = prefP1[m[i]][0] ;
-          f.y = prefP1[m[i]][1] ;
+        if (m[4] !== cM) {
+          f.x = prefP1[cM][0] ;
+          f.y = prefP1[cM][1] ;
           this.set('pointerPosY', 0);
-          this.set('pointerPos', SC.POINTER_LAYOUT[m[i]]);
+          this.set('pointerPos', SC.POINTER_LAYOUT[cM]);
         }
         i = SC.POINTER_LAYOUT.length;
-      } else if ((m[i] === 0 || m[i] === 1) && cutoffPrefP[m[i]][0]===0 && cutoffPrefP[m[i]][1]===0 && cutoffPrefP[m[i]][2] < f.height-91 && cutoffPrefP[m[i]][3]===0) {
-        if (m[4] != m[i]) {
-          f.x = prefP1[m[i]][0] ;
-          this.set('pointerPos', SC.POINTER_LAYOUT[m[i]]);
+      } else if ((cM === 0 || cM === 1) && cutoffPrefP[cM][0]===0 && cutoffPrefP[cM][1]===0 && cutoffPrefP[cM][2] < f.height-91 && cutoffPrefP[cM][3]===0) {
+        if (m[4] !== cM) {
+          f.x = prefP1[cM][0] ;
+          this.set('pointerPos', SC.POINTER_LAYOUT[cM]);
         }
-        f.y = prefP1[m[i]][1] - cutoffPrefP[m[i]][2];
-        this.set('pointerPosY', cutoffPrefP[m[i]][2]);
+        f.y = prefP1[cM][1] - cutoffPrefP[cM][2];
+        this.set('pointerPosY', cutoffPrefP[cM][2]);
         i = SC.POINTER_LAYOUT.length;
-      } else if ((m[i] === 0 || m[i] === 1) && cutoffPrefP[m[i]][0]===0 && cutoffPrefP[m[i]][1]===0 && cutoffPrefP[m[i]][2] <= f.height-57 && cutoffPrefP[m[i]][3]===0) {
-        if (m[4] != m[i]) {
-          f.x = prefP1[m[i]][0] ;
+      } else if ((cM === 0 || cM === 1) && cutoffPrefP[cM][0]===0 && cutoffPrefP[cM][1]===0 && cutoffPrefP[cM][2] <= f.height-57 && cutoffPrefP[cM][3]===0) {
+        if (m[4] !== cM) {
+          f.x = prefP1[cM][0] ;
         }
-        f.y = prefP1[m[i]][1] - (f.height-57) ;
+        f.y = prefP1[cM][1] - (f.height-57) ;
         this.set('pointerPosY', (f.height-59));
-        this.set('pointerPos', SC.POINTER_LAYOUT[m[i]]+' extra-low');
+        this.set('pointerPos', SC.POINTER_LAYOUT[cM]+' extra-low');
         i = SC.POINTER_LAYOUT.length;
       }
     }

data/frameworks/sproutcore/frameworks/desktop/panes/select_button.js

@@ -255,6 +255,16 @@ SC.SelectButtonView = SC.ButtonView.extend(
     customView used to draw the menu
   */
   customView: null,
+  
+  /**
+    css classes applied to customView
+  */
+  customViewClassName: null,
+  
+  /**
+    customView menu offset width
+  */
+  customViewMenuOffsetWidth: 0,
 
   /**
     This is a property for enabling/disabling ellipsis
@@ -279,8 +289,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
     @private
   */
   leftAlign: function() {
-    var val = 0 ;
-    var controlSize = this.get('controlSize') ;
+    var val = 0, controlSize = this.get('controlSize') ;
     if(controlSize === SC.SMALL_CONTROL_SIZE) val = -14 ;
     if(controlSize === SC.REGULAR_CONTROL_SIZE) val = -16 ;
     return val;
@@ -314,57 +323,60 @@ SC.SelectButtonView = SC.ButtonView.extend(
   */
   render: function(context,firstTime) {
     sc_super();
-    var layoutWidth = this.layout.width ;
+    var layoutWidth, objects, len, nameKey, iconKey, valueKey, checkboxEnabled,
+      currentSelectedVal, shouldLocalize, separatorPostion, itemList, isChecked,
+      idx, name, icon, value, item;
+    layoutWidth = this.layout.width ;
     if(firstTime && layoutWidth) {
       this.adjust({ width: layoutWidth - this.SELECT_BUTTON_SPRITE_WIDTH }) ;
     }
 
-    var objects = this.get('objects') ;
+    objects = this.get('objects') ;
     objects = this.sortObjects(objects) ;
-    var len = objects.length ;
+    len = objects.length ;
 
     //Get the namekey, iconKey and valueKey set by the user
-    var nameKey = this.get('nameKey') ;
-    var iconKey = this.get('iconKey') ;
-    var valueKey = this.get('valueKey') ;
-    var checkboxEnabled = this.get('checkboxEnabled') ;
+    nameKey = this.get('nameKey') ;
+    iconKey = this.get('iconKey') ;
+    valueKey = this.get('valueKey') ;
+    checkboxEnabled = this.get('checkboxEnabled') ;
 
     //get the current selected value
-    var currentSelectedVal = this.get('value') ;
+    currentSelectedVal = this.get('value') ;
 
     // get the localization flag.
-    var shouldLocalize = this.get('localize') ;
+    shouldLocalize = this.get('localize') ;
 
     //get the separatorPostion
-    var separatorPostion = this.get('separatorPostion') ;
+    separatorPostion = this.get('separatorPostion') ;
 
     //itemList array to set the menu items
-    var itemList = [] ;
+    itemList = [] ;
 
     //to set the 'checkbox' property of menu items
-    var isChecked = YES ;
+    isChecked = YES ;
 
     //index for finding the first item in the list
-    var idx = 0 ;
+    idx = 0 ;
 
     objects.forEach(function(object) {
     if (object) {
 
       //Get the name value. If value key is not specified convert obj
       //to string
-      var name = nameKey ? (object.get ?
+      name = nameKey ? (object.get ?
         object.get(nameKey) : object[nameKey]) : object.toString() ;
 
       // localize name if specified.
       name = shouldLocalize? name.loc() : name ;
 
       //Get the icon value
-      var icon = iconKey ? (object.get ?
+      icon = iconKey ? (object.get ? 
         object.get(iconKey) : object[iconKey]) : null ;
       if (SC.none(object[iconKey])) icon = null ;
 
       // get the value using the valueKey or the object
-      var value = (valueKey) ? (object.get ?
+        value = (valueKey) ? (object.get ?
         object.get(valueKey) : object[valueKey]) : object ;
 
       if (!SC.none(currentSelectedVal) && !SC.none(value)){
@@ -420,12 +432,14 @@ SC.SelectButtonView = SC.ButtonView.extend(
     }, this ) ;
 
     if(firstTime) {
-      var value = this.get('value') ;
-      if(SC.none(value)) {
-        this.set('value', this._defaultVal) ;
-        this.set('title', this._defaultTitle) ;
-        this.set('icon', this._defaultIcon) ;
-      }
+      this.invokeLast(function() {
+        var value = this.get('value') ;
+        if(SC.none(value)) {
+          this.set('value', this._defaultVal) ;
+          this.set('title', this._defaultTitle) ;
+          this.set('icon', this._defaultIcon) ;
+        }
+      });
     }
 
     //Set the preference matrix for the menu pane
@@ -441,14 +455,19 @@ SC.SelectButtonView = SC.ButtonView.extend(
   */
   _action: function( evt )
   {
-    var buttonLabel = this.$('.sc-button-label')[0] ;
+    var buttonLabel, menuWidth, scrollWidth, lastMenuWidth, offsetWidth,
+      items, elementOffsetWidth, largestMenuWidth, item, element, idx,
+      currSel, itemList, menuControlSize, menuHeightPadding, customView,
+      customMenuView, menu, itemsLength;
+      
+    buttonLabel = this.$('.sc-button-label')[0] ;
     // Get the length of the text on the button in pixels
-    var menuWidth = this.get('layer').offsetWidth ;
-    var scrollWidth = buttonLabel.scrollWidth ;
-    var lastMenuWidth = this.get('lastMenuWidth') ;
+    menuWidth = this.get('layer').offsetWidth ;
+    scrollWidth = buttonLabel.scrollWidth ;
+    lastMenuWidth = this.get('lastMenuWidth') ;
     if(scrollWidth) {
        // Get the original width of the label in the button
-       var offsetWidth = buttonLabel.offsetWidth ;
+       offsetWidth = buttonLabel.offsetWidth ;
        if(scrollWidth && offsetWidth) {
           menuWidth = menuWidth + scrollWidth - offsetWidth ;
        }
@@ -457,18 +476,22 @@ SC.SelectButtonView = SC.ButtonView.extend(
       lastMenuWidth = menuWidth ;
     }
 
-    var items = this.get('itemList') ;
-    var elementOffsetWidth, largestMenuWidth ;
+    items = this.get('itemList') ;
+
+    var customViewClassName = this.get('customViewClassName') ;
+    var customViewMenuOffsetWidth = this.get('customViewMenuOffsetWidth') ;
+    var className = 'sc-view sc-pane sc-panel sc-palette sc-picker sc-menu select-button sc-scroll-view sc-menu-scroll-view sc-container-view menuContainer sc-button-view sc-menu-item sc-regular-size' ;
+    className = customViewClassName ? (className + ' ' + customViewClassName) : className ;
 
-    for (var idx = 0; idx < items.length; ++idx) {
+    for (idx = 0, itemsLength = items.length; idx < itemsLength; ++idx) {
       //getting the width of largest menu item
-      var item = items.objectAt(idx) ;
-      var element = document.createElement('div') ;
+      item = items.objectAt(idx) ;
+      element = document.createElement('div') ;
       element.style.cssText = 'top:-10000px; left: -10000px;  position: absolute;' ;
-      element.className = 'sc-view sc-pane sc-panel sc-palette sc-picker sc-menu select-button sc-scroll-view sc-menu-scroll-view sc-container-view menuContainer sc-button-view sc-menu-item sc-regular-size' ;
+      element.className = className ;
       element.innerHTML = item.title ;
       document.body.appendChild(element) ;
-      elementOffsetWidth = element.offsetWidth ;
+      elementOffsetWidth = element.offsetWidth + customViewMenuOffsetWidth;
 
       if (!largestMenuWidth || (elementOffsetWidth > largestMenuWidth)) {
         largestMenuWidth = elementOffsetWidth ;
@@ -479,17 +502,25 @@ SC.SelectButtonView = SC.ButtonView.extend(
     lastMenuWidth = (largestMenuWidth > lastMenuWidth) ?
                       largestMenuWidth: lastMenuWidth ;
 
+    // Get the window size width and compare with the lastMenuWidth.
+    // If it is greater than windows width then reduce the maxwidth by 25px
+    // so that the ellipsis property is enabled by default
+    var maxWidth = SC.RootResponder.responder.get('currentWindowSize').width;
+    if(lastMenuWidth > maxWidth) {
+      lastMenuWidth = (maxWidth - 25) ;
+    }
+
     this.set('lastMenuWidth',lastMenuWidth) ;
-    var currSel = this.get('currentSelItem') ;
-    var itemList = this.get('itemList') ;
-    var menuControlSize = this.get('controlSize') ;
-    var menuHeightPadding = this.get('menuPaneHeightPadding') ;
+    currSel = this.get('currentSelItem') ;
+    itemList = this.get('itemList') ;
+    menuControlSize = this.get('controlSize') ;
+    menuHeightPadding = this.get('menuPaneHeightPadding') ;
 
     // get the user defined custom view
-    var customView = this.get('customView') ;
-    var customMenuView = customView ? customView : SC.MenuItemView ;
+    customView = this.get('customView') ;
+    customMenuView = customView ? customView : SC.MenuItemView ;
 
-    var menu  = SC.MenuPane.create({
+    menu  = SC.MenuPane.create({
 
       /**
         Class name - select-button-item
@@ -541,30 +572,32 @@ SC.SelectButtonView = SC.ButtonView.extend(
 
   */
   displaySelectedItem: function() {
+    var menuView, currSel, itemViews, title, val, itemIdx = 0, button, object,
+      len, found = null, objTmp;
+    
     //Get MenuPane, currentSelectedMenuItem & menuItemView
     // Get the main parent view to show the menus
-    var menuView = this.parentMenu() ;
-    var currSel = menuView.get('currentSelectedMenuItem') ;
-    var itemViews = menuView.menuItemViews ;
-    var title,val ;
-
+      
+    menuView = this.parentMenu() ;
+    currSel = menuView.get('currentSelectedMenuItem') ;
+    itemViews = menuView.menuItemViews ;
+    
     //  Fetch the index of the current selected item
-    var itemIdx = 0 ;
     if (currSel && itemViews) {
       itemIdx = itemViews.indexOf(currSel) ;
     }
 
     // Get the select button View
-    var button = menuView.get('anchor') ;
+    button = menuView.get('anchor') ;
 
     // set the value and title
-    var object = menuView.get('items') ;
-    var len = object.length ;
-    var found = null ;
+    object = menuView.get('items') ;
+    len = object.length ;
 
     while (!found && (--len >= 0)) {
-      title = !SC.none(object[len].title) ? object[len].title: object.toString() ;
-      val =  !SC.none(object[len].value) ? object[len].value: title ;
+      objTmp = object[len];
+      title = !SC.none(objTmp.title) ? objTmp.title: object.toString() ;
+      val =  !SC.none(objTmp.value) ? objTmp.value: title ;
 
       if (title === this.get('value') && (itemIdx === len)) {
         found = object ;
@@ -584,11 +617,9 @@ SC.SelectButtonView = SC.ButtonView.extend(
      place aligned to the item on the button when menu is opened.
   */
   changeSelectButtonPreferMatrix: function() {
-    var preferMatrixAttributeTop = 0 ;
-    var itemIdx = this.get('itemIdx') ;
-    var leftAlign = this.get('leftAlign') ;
-    var defPreferMatrix ;
-    var tempPreferMatrix ;
+    var preferMatrixAttributeTop = 0 ,
+      itemIdx = this.get('itemIdx') ,
+      leftAlign = this.get('leftAlign'), defPreferMatrix, tempPreferMatrix ;
 
     if(this.get('isDefaultPosition')) {
       defPreferMatrix = [leftAlign, 4, 3] ;