roojs-ui.js
[roojs1] / roojs-debug.js
index 1dce2dc..635f468 100644 (file)
@@ -53,15 +53,26 @@ Roo.apply = function(o, c, defaults){
     var isStrict = document.compatMode == "CSS1Compat",
         isOpera = ua.indexOf("opera") > -1,
         isSafari = (/webkit|khtml/).test(ua),
+        isFirefox = ua.indexOf("firefox") > -1,
         isIE = ua.indexOf("msie") > -1,
         isIE7 = ua.indexOf("msie 7") > -1,
+        isIE11 = /trident.*rv\:11\./.test(ua),
         isGecko = !isSafari && ua.indexOf("gecko") > -1,
         isBorderBox = isIE && !isStrict,
         isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
         isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
         isLinux = (ua.indexOf("linux") != -1),
         isSecure = window.location.href.toLowerCase().indexOf("https") === 0,
-        isTouch =  'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
+        isIOS = /iphone|ipad/.test(ua),
+        isTouch =  (function() {
+            try {  
+                document.createEvent("TouchEvent");  
+                return true;  
+            } catch (e) {  
+                return false;  
+            } 
+            
+        })();
     // remove css image flicker
        if(isIE && !isIE7){
         try{
@@ -303,7 +314,7 @@ Roo.factory(conf, Roo.data);
                 return c;
             }
             if (ns[c.xtype]) {
-                if (Roo.debug) Roo.log("Roo.Factory(" + c.xtype + ")");
+                if (Roo.debug) { Roo.log("Roo.Factory(" + c.xtype + ")"); }
                 var ret = new ns[c.xtype](c);
                 ret.xns = false;
                 return ret;
@@ -602,10 +613,14 @@ Roo.factory(conf, Roo.data);
         /** @type Boolean */
         isSafari : isSafari,
         /** @type Boolean */
+        isFirefox : isFirefox,
+        /** @type Boolean */
         isIE : isIE,
         /** @type Boolean */
         isIE7 : isIE7,
         /** @type Boolean */
+        isIE11 : isIE11,
+        /** @type Boolean */
         isGecko : isGecko,
         /** @type Boolean */
         isBorderBox : isBorderBox,
@@ -616,6 +631,8 @@ Roo.factory(conf, Roo.data);
         /** @type Boolean */
         isMac : isMac,
         /** @type Boolean */
+        isIOS : isIOS,
+        /** @type Boolean */
         isTouch : isTouch,
 
         /**
@@ -917,13 +934,14 @@ Roo.applyIf(Number.prototype, {
  */
 Roo.applyIf(Array.prototype, {
     /**
+     * 
      * Checks whether or not the specified object exists in the array.
      * @param {Object} o The object to check for
      * @return {Number} The index of o in the array (or -1 if it is not found)
      */
     indexOf : function(o){
        for (var i = 0, len = this.length; i < len; i++){
-             if(this[i] == o) return i;
+             if(this[i] == o) { return i; }
        }
           return -1;
     },
@@ -945,15 +963,16 @@ Roo.applyIf(Array.prototype, {
     map : function(fun )
     {
         var len = this.length >>> 0;
-        if (typeof fun != "function")
+        if (typeof fun != "function") {
             throw new TypeError();
-
+        }
         var res = new Array(len);
         var thisp = arguments[1];
         for (var i = 0; i < len; i++)
         {
-            if (i in this)
+            if (i in this) {
                 res[i] = fun.call(thisp, this[i], i, this);
+            }
         }
 
         return res;
@@ -962,7 +981,8 @@ Roo.applyIf(Array.prototype, {
 });
 
 
- /*
+/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -1225,6 +1245,7 @@ Date.parseDate = function(input, format) {
 /**
  * @private
  */
+
 Date.createParser = function(format) {
     var funcName = "parse" + Date.parseFunctions.count++;
     var regexNum = Date.parseRegexes.length;
@@ -1738,7 +1759,7 @@ document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'
  */
 Date.prototype.add = function(interval, value){
   var d = this.clone();
-  if (!interval || value === 0) return d;
+  if (!interval || value === 0) { return d; }
   switch(interval.toLowerCase()){
     case Date.MILLI:
       d.setMilliseconds(this.getMilliseconds() + value);
@@ -4132,7 +4153,7 @@ Roo.DomHelper = function(){
         }
         b += "<" + o.tag;
         for(var attr in o){
-            if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") continue;
+            if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") { continue; }
             if(attr == "style"){
                 var s = o["style"];
                 if(typeof s == "function"){
@@ -4215,13 +4236,15 @@ Roo.DomHelper = function(){
         for(var attr in o){
             
             if(attr == "tag" || attr == "ns" ||attr == "xmlns" ||attr == "children" || attr == "cn" || attr == "html" || 
-                    attr == "style" || typeof o[attr] == "function") continue;
+                    attr == "style" || typeof o[attr] == "function") { continue; }
                     
             if(attr=="cls" && Roo.isIE){
                 el.className = o["cls"];
             }else{
-                if(useSet) el.setAttribute(attr=="cls" ? 'class' : attr, o[attr]);
-                else el[attr] = o[attr];
+                if(useSet) { el.setAttribute(attr=="cls" ? 'class' : attr, o[attr]);}
+                else { 
+                    el[attr] = o[attr];
+                }
             }
         }
         Roo.DomHelper.applyStyles(el, o.style);
@@ -6560,6 +6583,12 @@ Roo.onReady(function(){
     if(Roo.isLinux){
         cls.push("roo-linux");
     }
+    if(Roo.isIOS){
+        cls.push("roo-ios");
+    }
+    if(Roo.isTouch){
+        cls.push("roo-touch");
+    }
     if(Roo.isBorderBox){
         cls.push('roo-border-box');
     }
@@ -7021,6 +7050,7 @@ if(opt.anim.isAnimated()){
          * @type String
          */
         defaultUnit : "px",
+        
         /**
          * Sets the element's visibility mode. When setVisible() is called it
          * will use this to determine whether to set the visibility or the display property.
@@ -7038,7 +7068,7 @@ if(opt.anim.isAnimated()){
          */
         enableDisplayMode : function(display){
             this.setVisibilityMode(El.DISPLAY);
-            if(typeof display != "undefined") this.originalDisplay = display;
+            if(typeof display != "undefined") { this.originalDisplay = display; }
             return this;
         },
 
@@ -7259,7 +7289,7 @@ if(opt.anim.isAnimated()){
                     this.setHeight(oldHeight); // restore original height
                     this.setHeight(height, animate, duration, function(){
                         this.unclip();
-                        if(typeof onComplete == "function") onComplete();
+                        if(typeof onComplete == "function") { onComplete(); }
                     }.createDelegate(this), easing);
                 }
             }.createDelegate(this), 0);
@@ -8982,7 +9012,7 @@ if(opt.anim.isAnimated()){
             
             // we wander
             var z = 0;
-            var dom = this.dom
+            var dom = this.dom;
             while (dom && dom.style) {
                 if (!isNaN(parseInt(dom.style.zIndex))) {
                     z = Math.max(z, parseInt(dom.style.zIndex));
@@ -9357,12 +9387,15 @@ if(opt.anim.isAnimated()){
             var el = this.dom;
             useSet = typeof useSet == 'undefined' ? (el.setAttribute ? true : false) : useSet;
             for(var attr in o){
-                if(attr == "style" || typeof o[attr] == "function") continue;
+                if(attr == "style" || typeof o[attr] == "function")  { continue; }
                 if(attr=="cls"){
                     el.className = o["cls"];
                 }else{
-                    if(useSet) el.setAttribute(attr, o[attr]);
-                    else el[attr] = o[attr];
+                    if(useSet) {
+                        el.setAttribute(attr, o[attr]);
+                    } else {
+                        el[attr] = o[attr];
+                    }
                 }
             }
             if(o.style){
@@ -10970,7 +11003,9 @@ Roo.CompositeElement = function(els){
 Roo.CompositeElement.prototype = {
     isComposite: true,
     addElements : function(els){
-        if(!els) return this;
+        if(!els) {
+            return this;
+        }
         if(typeof els == "string"){
             els = Roo.Element.selectorFunction(els);
         }
@@ -13061,7 +13096,9 @@ mc.add(otherEl);
     indexOf : function(o){
         if(!this.items.indexOf){
             for(var i = 0, len = this.items.length; i < len; i++){
-                if(this.items[i] == o) return i;
+                if(this.items[i] == o) {
+                    return i;
+                }
             }
             return -1;
         }else{
@@ -13077,7 +13114,9 @@ mc.add(otherEl);
     indexOfKey : function(key){
         if(!this.keys.indexOf){
             for(var i = 0, len = this.keys.length; i < len; i++){
-                if(this.keys[i] == key) return i;
+                if(this.keys[i] == key) {
+                    return i;
+                }
             }
             return -1;
         }else{
@@ -14776,7 +14815,9 @@ Roo.extend(Roo.state.Provider, Roo.util.Observable, {
     decodeValue : function(cookie){
         var re = /^(a|n|d|b|s|o)\:(.*)$/;
         var matches = re.exec(unescape(cookie));
-        if(!matches || !matches[1]) return; // non state cookie
+        if(!matches || !matches[1]) {
+            return; // non state cookie
+        }
         var type = matches[1];
         var v = matches[2];
         switch(type){
@@ -14823,7 +14864,9 @@ Roo.extend(Roo.state.Provider, Roo.util.Observable, {
             var flat = "";
             for(var i = 0, len = v.length; i < len; i++){
                 flat += this.encodeValue(v[i]);
-                if(i != len-1) flat += "^";
+                if(i != len-1) {
+                    flat += "^";
+                }
             }
             enc = "a:" + flat;
         }else if(typeof v == "object"){
@@ -15166,7 +15209,7 @@ Roo.Component = function(config){
         destroy : true
     });
     if(!this.id){
-        this.id = "ext-comp-" + (++Roo.Component.AUTO_ID);
+        this.id = "roo-comp-" + (++Roo.Component.AUTO_ID);
     }
     Roo.ComponentMgr.register(this);
     Roo.Component.superclass.constructor.call(this);
@@ -20888,7 +20931,9 @@ Roo.data.SortTypes = {
      */
     asFloat : function(s) {
        var val = parseFloat(String(s).replace(/,/g, ""));
-        if(isNaN(val)) val = 0;
+        if(isNaN(val)) {
+            val = 0;
+        }
        return val;
     },
     
@@ -20899,7 +20944,9 @@ Roo.data.SortTypes = {
      */
     asInt : function(s) {
         var val = parseInt(String(s).replace(/,/g, ""));
-        if(isNaN(val)) val = 0;
+        if(isNaN(val)) {
+            val = 0;
+        }
        return val;
     }
 };/*
@@ -22598,6 +22645,7 @@ var myReader = new Roo.data.JsonReader({
  * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
  * @cfg {String} root name of the property which contains the Array of row objects.
  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
+ * @cfg {Array} fields Array of field definition objects
  * @constructor
  * Create a new JsonReader
  * @param {Object} meta Metadata configuration options
@@ -24970,7 +25018,7 @@ Roo.View = function(config, depreciated_tpl, depreciated_config){
            
          var fctr = this.wrapEl.appendChild(document.createElement("div"));
         
-        this.footer.dataSource = this.store
+        this.footer.dataSource = this.store;
         this.footer.container = fctr;
         this.footer = Roo.factory(this.footer, Roo);
         fctr.insertFirst(this.el);
@@ -25053,7 +25101,7 @@ Roo.extend(Roo.View, Roo.util.Observable, {
      * Refreshes the view. - called by datachanged on the store. - do not call directly.
      */
     refresh : function(){
-        Roo.log('refresh');
+        //Roo.log('refresh');
         var t = this.tpl;
         
         // if we are using something like 'domtemplate', then
@@ -25132,7 +25180,7 @@ Roo.extend(Roo.View, Roo.util.Observable, {
     },
 
     onUpdate : function(ds, record){
-         Roo.log('on update');   
+        // Roo.log('on update');   
         this.clearSelections();
         var index = this.store.indexOf(record);
         var n = this.nodes[index];
@@ -25146,7 +25194,7 @@ Roo.extend(Roo.View, Roo.util.Observable, {
 // --------- FIXME     
     onAdd : function(ds, records, index)
     {
-        Roo.log(['on Add', ds, records, index] );        
+        //Roo.log(['on Add', ds, records, index] );        
         this.clearSelections();
         if(this.nodes.length == 0){
             this.refresh();
@@ -25166,7 +25214,7 @@ Roo.extend(Roo.View, Roo.util.Observable, {
     },
 
     onRemove : function(ds, record, index){
-        Roo.log('onRemove');
+       // Roo.log('onRemove');
         this.clearSelections();
         var el = this.dataName  ?
             this.el.child('.roo-tpl-' + this.dataName) :
@@ -25230,7 +25278,7 @@ Roo.extend(Roo.View, Roo.util.Observable, {
      */
     onBeforeLoad : function(store,opts)
     {
-         Roo.log('onBeforeLoad');   
+         //Roo.log('onBeforeLoad');   
         if (!opts.add) {
             this.el.update("");
         }
@@ -25301,7 +25349,7 @@ Roo.extend(Roo.View, Roo.util.Observable, {
         }
         if (this.toggleSelect) {
             var m = this.isSelected(item) ? 'unselect' : 'select';
-            Roo.log(m);
+            //Roo.log(m);
             var _t = this;
             _t[m](item, true, false);
             return true;
@@ -25429,7 +25477,7 @@ Roo.extend(Roo.View, Roo.util.Observable, {
         }
         var node = this.getNode(nodeInfo);
         if(!node || !this.isSelected(node)){
-            Roo.log("not selected");
+            //Roo.log("not selected");
             return; // not selected.
         }
         // fireevent???
@@ -26013,7 +26061,9 @@ Roo.DatePicker = function(config){
         var re = "(?:";
         for(var i = 0; i < dd.length; i++){
             re += dd[i];
-            if(i != dd.length-1) re += "|";
+            if(i != dd.length-1) {
+                re += "|";
+            }
         }
         this.disabledDatesRE = new RegExp(re + ")");
     }
@@ -26992,7 +27042,9 @@ Roo.extend(Roo.TabPanel, Roo.util.Observable, {
     autoSizeTabs : function(){
         var count = this.items.length;
         var vcount = count - this.hiddenCount;
-        if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) return;
+        if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
+            return;
+        }
         var w = Math.max(this.el.getWidth() - this.cpad, 10);
         var availWidth = Math.floor(w / vcount);
         var b = this.stripBody;
@@ -27028,7 +27080,9 @@ Roo.extend(Roo.TabPanel, Roo.util.Observable, {
     setTabWidth : function(width){
         this.currentTabWidth = width;
         for(var i = 0, len = this.items.length; i < len; i++) {
-               if(!this.items[i].isHidden())this.items[i].setWidth(width);
+               if(!this.items[i].isHidden()) {
+                this.items[i].setWidth(width);
+            }
         }
     },
 
@@ -29049,8 +29103,9 @@ Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
         {
           var v = this.field.dom.value, pageNum; 
           var increment = (e.shiftKey) ? 10 : 1;
-          if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
+          if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
             increment *= -1;
+          }
           if(!v || isNaN(pageNum = parseInt(v, 10))) {
             this.field.dom.value = d.activePage;
             return;
@@ -29470,7 +29525,9 @@ Roo.extend(Roo.Resizable, Roo.util.Observable, {
 
     // private
     snap : function(value, inc, min){
-        if(!inc || !value) return value;
+        if(!inc || !value) {
+            return value;
+        }
         var newValue = value;
         var m = value % inc;
         if(m > 0){
@@ -31996,7 +32053,7 @@ Roo.QuickTips = function(){
             t.removeAttribute("title");
             e.preventDefault();
         }else{
-            ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute);
+            ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute) || et.getAttributeNS(cfg.alt_namespace, cfg.attribute) ;
         }
         if(ttp){
             showProc = show.defer(tm.showDelay, tm, [{
@@ -32337,7 +32394,8 @@ target      Element/String/Array   An Element, id or array of ids that this quic
 
         // private
        tagConfig : {
-           namespace : "ext",
+           namespace : "roo", // was ext?? this may break..
+           alt_namespace : "ext",
            attribute : "qtip",
            width : "width",
            target : "target",
@@ -35667,7 +35725,10 @@ Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
             tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
         });
         var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
-        ul.on(Roo.isTouch ? 'touchstart' : 'click'   , this.onClick, this);
+        //disabling touch- as it's causing issues ..
+        //ul.on(Roo.isTouch ? 'touchstart' : 'click'   , this.onClick, this);
+        ul.on('click'   , this.onClick, this);
+        
         
         ul.on("mouseover", this.onMouseOver, this);
         ul.on("mouseout", this.onMouseOut, this);
@@ -37067,7 +37128,7 @@ Roo.extend(Roo.form.Field, Roo.BoxComponent,  {
      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
      * {tag: "input", type: "text", size: "20", autocomplete: "off"})
      */
-    defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"},
+    defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "new-password"},
     /**
      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
      */
@@ -37130,7 +37191,10 @@ side          Add an error icon to the right of the field with a popup on hover
     /**
      * @cfg {String} cls A CSS class to apply to the field's underlying element.
      */
-
+    // private
+    loadedValue : false,
+     
+     
        // private ??
        initComponent : function(){
         Roo.form.Field.superclass.initComponent.call(this);
@@ -37251,6 +37315,7 @@ side          Add an error icon to the right of the field with a popup on hover
 
     /**
      * Returns true if this field has been changed since it was originally loaded and is not disabled.
+     * DEPRICATED  - it never worked well - use hasChanged/resetHasChanged.
      */
     isDirty : function() {
         if(this.disabled) {
@@ -37259,6 +37324,27 @@ side          Add an error icon to the right of the field with a popup on hover
         return String(this.getValue()) !== String(this.originalValue);
     },
 
+    /**
+     * stores the current value in loadedValue
+     */
+    resetHasChanged : function()
+    {
+        this.loadedValue = String(this.getValue());
+    },
+    /**
+     * checks the current value against the 'loaded' value.
+     * Note - will return false if 'resetHasChanged' has not been called first.
+     */
+    hasChanged : function()
+    {
+        if(this.disabled || this.readOnly) {
+            return false;
+        }
+        return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
+    },
+    
+    
+    
     // private
     afterRender : function(){
         Roo.form.Field.superclass.afterRender.call(this);
@@ -37979,7 +38065,7 @@ Roo.extend(Roo.form.TriggerField, Roo.form.TextField,  {
      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
      * {tag: "input", type: "text", size: "16", autocomplete: "off"})
      */
-    defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},
+    defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "new-password"},
     /**
      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
      */
@@ -38259,7 +38345,7 @@ Roo.extend(Roo.form.TextArea, Roo.form.TextField,  {
             this.defaultAutoCreate = {
                 tag: "textarea",
                 style:"width:300px;height:60px;",
-                autocomplete: "off"
+                autocomplete: "new-password"
             };
         }
         Roo.form.TextArea.superclass.onRender.call(this, ct, position);
@@ -38506,15 +38592,21 @@ Roo.form.DateField = function(config){
     });
     
     
-    if(typeof this.minValue == "string") this.minValue = this.parseDate(this.minValue);
-    if(typeof this.maxValue == "string") this.maxValue = this.parseDate(this.maxValue);
+    if(typeof this.minValue == "string") {
+        this.minValue = this.parseDate(this.minValue);
+    }
+    if(typeof this.maxValue == "string") {
+        this.maxValue = this.parseDate(this.maxValue);
+    }
     this.ddMatch = null;
     if(this.disabledDates){
         var dd = this.disabledDates;
         var re = "(?:";
         for(var i = 0; i < dd.length; i++){
             re += dd[i];
-            if(i != dd.length-1) re += "|";
+            if(i != dd.length-1) {
+                re += "|";
+            }
         }
         this.ddMatch = new RegExp(re + ")");
     }
@@ -38869,15 +38961,21 @@ Roo.form.MonthField = function(config){
     });
     
     
-    if(typeof this.minValue == "string") this.minValue = this.parseDate(this.minValue);
-    if(typeof this.maxValue == "string") this.maxValue = this.parseDate(this.maxValue);
+    if(typeof this.minValue == "string") {
+        this.minValue = this.parseDate(this.minValue);
+    }
+    if(typeof this.maxValue == "string") {
+        this.maxValue = this.parseDate(this.maxValue);
+    }
     this.ddMatch = null;
     if(this.disabledDates){
         var dd = this.disabledDates;
         var re = "(?:";
         for(var i = 0; i < dd.length; i++){
             re += dd[i];
-            if(i != dd.length-1) re += "|";
+            if(i != dd.length-1) {
+                re += "|";
+            }
         }
         this.ddMatch = new RegExp(re + ")");
     }
@@ -38977,7 +39075,7 @@ Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
      * {tag: "input", type: "text", size: "10", autocomplete: "off"})
      */ 
     // private
-    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "new-password"},
     
     // private
     hiddenField: false,
@@ -40297,7 +40395,7 @@ Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
         }
         // scroll to?
         this.view.select(match);
-        var sn = Roo.get(this.view.getSelectedNodes()[0])
+        var sn = Roo.get(this.view.getSelectedNodes()[0]);
         sn.scrollIntoView(sn.dom.parentNode, false);
     }
 
@@ -41224,7 +41322,6 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     getDocMarkup : function(){
         // body styles..
         var st = '';
-        Roo.log(this.stylesheets);
         
         // inherit styels from page...?? 
         if (this.stylesheets === false) {
@@ -41242,10 +41339,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 st = '<style type="text/css">' +
                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
                    '</style>';
-        } else {
-            Roo.each(this.stylesheets, function(s) {
-                st += '<link rel="stylesheet" type="text/css" href="' + s +'" />'
-            });
+        } else { 
             
         }
         
@@ -41326,8 +41420,6 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         };
         Roo.TaskMgr.start(task);
 
-        
-         
     },
 
     // private
@@ -41599,7 +41691,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         this.execCmd('FontSize', v  );
     },
 
-    onEditorEvent : function(e){
+    onEditorEvent : function(e)
+    {
         this.owner.fireEvent('editorevent', this, e);
       //  this.updateToolbar();
         this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
@@ -42025,13 +42118,16 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         var nodeIsBefore   =  ss == 1;
         var nodeIsAfter    = ee == -1;
         
-        if (nodeIsBefore && nodeIsAfter)
+        if (nodeIsBefore && nodeIsAfter) {
             return 0; // outer
-        if (!nodeIsBefore && nodeIsAfter)
+        }
+        if (!nodeIsBefore && nodeIsAfter) {
             return 1; //right trailed.
+        }
         
-        if (nodeIsBefore && !nodeIsAfter)
+        if (nodeIsBefore && !nodeIsAfter) {
             return 2;  // left trailed.
+        }
         // fully contined.
         return 3;
     },
@@ -42238,21 +42334,12 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         
         
     },
+    
     /**
      * Clean up MS wordisms...
      */
     cleanWord : function(node)
     {
-        var _t = this;
-        var cleanWordChildren = function()
-        {
-            if (!node.childNodes.length) {
-                return;
-            }
-            for (var i = node.childNodes.length-1; i > -1 ; i--) {
-               _t.cleanWord(node.childNodes[i]);
-            }
-        }
         
         
         if (!node) {
@@ -42282,7 +42369,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 node.parentNode.insertBefore(cn, node);
             }
             node.parentNode.removeChild(node);
-            cleanWordChildren();
+            this.iterateChildren(node, this.cleanWord);
             return;
         }
         // clean styles
@@ -42326,11 +42413,87 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 node.removeAttribute('style');
             }
         }
+        this.iterateChildren(node, this.cleanWord);
         
-        cleanWordChildren();
         
         
     },
+    /**
+     * iterateChildren of a Node, calling fn each time, using this as the scole..
+     * @param {DomNode} node node to iterate children of.
+     * @param {Function} fn method of this class to call on each item.
+     */
+    iterateChildren : function(node, fn)
+    {
+        if (!node.childNodes.length) {
+                return;
+        }
+        for (var i = node.childNodes.length-1; i > -1 ; i--) {
+           fn.call(this, node.childNodes[i])
+        }
+    },
+    
+    
+    /**
+     * cleanTableWidths.
+     *
+     * Quite often pasting from word etc.. results in tables with column and widths.
+     * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
+     *
+     */
+    cleanTableWidths : function(node)
+    {
+         
+         
+        if (!node) {
+            this.cleanTableWidths(this.doc.body);
+            return;
+        }
+        
+        // ignore list...
+        if (node.nodeName == "#text" || node.nodeName == "#comment") {
+            return; 
+        }
+        Roo.log(node.tagName);
+        if (!node.tagName.toLowerCase().match(/^(table|td|tr)$/)) {
+            this.iterateChildren(node, this.cleanTableWidths);
+            return;
+        }
+        if (node.hasAttribute('width')) {
+            node.removeAttribute('width');
+        }
+        
+         
+        if (node.hasAttribute("style")) {
+            // pretty basic...
+            
+            var styles = node.getAttribute("style").split(";");
+            var nstyle = [];
+            Roo.each(styles, function(s) {
+                if (!s.match(/:/)) {
+                    return;
+                }
+                var kv = s.split(":");
+                if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
+                    return;
+                }
+                // what ever is left... we allow.
+                nstyle.push(s);
+            });
+            node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+            if (!nstyle.length) {
+                node.removeAttribute('style');
+            }
+        }
+        
+        this.iterateChildren(node, this.cleanTableWidths);
+        
+        
+    },
+    
+    
+    
+    
     domToHTML : function(currentElement, depth, nopadtext) {
         
         depth = depth || 0;
@@ -42527,6 +42690,45 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             this.cblack.push(tag);
             
         }, this);
+    },
+    
+    setStylesheets : function(stylesheets)
+    {
+        if(typeof(stylesheets) == 'string'){
+            Roo.get(this.iframe.contentDocument.head).createChild({
+                tag : 'link',
+                rel : 'stylesheet',
+                type : 'text/css',
+                href : stylesheets
+            });
+            
+            return;
+        }
+        var _this = this;
+     
+        Roo.each(stylesheets, function(s) {
+            if(!s.length){
+                return;
+            }
+            
+            Roo.get(_this.iframe.contentDocument.head).createChild({
+                tag : 'link',
+                rel : 'stylesheet',
+                type : 'text/css',
+                href : s
+            });
+        });
+
+        
+    },
+    
+    removeStylesheets : function()
+    {
+        var _this = this;
+        
+        Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
+            s.remove();
+        });
     }
     
     // hide stuff that is not compatible
@@ -42751,7 +42953,7 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
     defaultAutoCreate : { // modified by initCompnoent..
         tag: "textarea",
         style:"width:500px;height:300px;",
-        autocomplete: "off"
+        autocomplete: "new-password"
     },
 
     // private
@@ -42842,7 +43044,7 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
         this.defaultAutoCreate =  {
             tag: "textarea",
             style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
-            autocomplete: "off"
+            autocomplete: "new-password"
         };
     },
 
@@ -43063,7 +43265,7 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
                 
                 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
                 ah -= 5; // knock a few pixes off for look..
-                Roo.log(ah);
+//                Roo.log(ah);
                 this.el.setHeight(this.adjustWidth('textarea', ah));
                 var eh = ah;
             }
@@ -43206,6 +43408,16 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
     pushValue : function()
     {
         this.editorcore.pushValue();
+    },
+    
+    setStylesheets : function(stylesheets)
+    {
+        this.editorcore.setStylesheets(stylesheets);
+    },
+    
+    removeStylesheets : function()
+    {
+        this.editorcore.removeStylesheets();
     }
      
     
@@ -43492,7 +43704,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
             tb.add(
                 btn('bold'),
                 btn('italic'),
-                btn('underline')
+                btn('underline'),
+                btn('strikethrough')
             );
         };
         if(!this.disable.fontSize){
@@ -43636,8 +43849,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                     actiontype : this.cleanStyles[i],
                     html: 'Remove ' + this.cleanStyles[i],
                     handler: function(a,b) {
-                        Roo.log(a);
-                        Roo.log(b);
+//                        Roo.log(a);
+//                        Roo.log(b);
                         var c = Roo.get(editorcore.doc.body);
                         c.select('[style]').each(function(s) {
                             s.dom.style.removeProperty(a.actiontype);
@@ -43647,6 +43860,15 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                     tabIndex:-1
                 });
             }
+             cmenu.menu.items.push({
+                actiontype : 'tablewidths',
+                html: 'Remove Table Widths',
+                handler: function(a,b) {
+                    editorcore.cleanTableWidths();
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
             cmenu.menu.items.push({
                 actiontype : 'word',
                 html: 'Remove MS Word Formating',
@@ -43670,8 +43892,23 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                 },
                 tabIndex:-1
             });
+            
+            cmenu.menu.items.push({
+                actiontype : 'all',
+                html: 'Remove All CSS Classes',
+                handler: function(a,b) {
+                    
+                    var c = Roo.get(editorcore.doc.body);
+                    c.select('[class]').each(function(s) {
+                        s.dom.className = '';
+                    });
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
              cmenu.menu.items.push({
-                actiontype : 'word',
+                actiontype : 'tidy',
                 html: 'Tidy HTML Source',
                 handler: function(a,b) {
                     editorcore.doc.body.innerHTML = editorcore.domToHTML();
@@ -43787,6 +44024,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
             btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
             btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
             btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
+            btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
         }
         if(!this.disable.alignments){
             btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
@@ -43912,6 +44150,11 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
             text: 'Underline the selected text.',
             cls: 'x-html-editor-tip'
         },
+        strikethrough : {
+            title: 'Strikethrough',
+            text: 'Strikethrough the selected text.',
+            cls: 'x-html-editor-tip'
+        },
         increasefontsize : {
             title: 'Grow Text',
             text: 'Increase the font size.',
@@ -44239,7 +44482,7 @@ Roo.form.HtmlEditor.ToolbarContext.options = {
 // fixme - these need to be configurable..
  
 
-Roo.form.HtmlEditor.ToolbarContext.types
+//Roo.form.HtmlEditor.ToolbarContext.types
 
 
 Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
@@ -44331,6 +44574,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
     /**
      * Protected method that will not generally be called directly. It triggers
      * a toolbar update by reading the markup state of the current selection in the editor.
+     *
+     * Note you can force an update by calling on('editorevent', scope, false)
      */
     updateToolbar: function(editor,ev,sel){
 
@@ -44342,6 +44587,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
             return;
         }
         
+        
+        
         // http://developer.yahoo.com/yui/docs/simple-editor.js.html
         // selectNode - might want to handle IE?
         if (ev &&
@@ -44384,12 +44631,13 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         
         tn = sel.tagName.toUpperCase();
         
-        var lastSel = this.tb.selectedNode
+        var lastSel = this.tb.selectedNode;
         
         this.tb.selectedNode = sel;
         
         // if current menu does not match..
-        if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode)) {
+        
+        if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode) || ev === false) {
                 
             this.tb.el.hide();
             ///console.log("show: " + tn);
@@ -44629,8 +44877,25 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
             }));
              
         }
-        tb.addFill();
+        
         var _this = this;
+        
+        if(nm == 'BODY'){
+            tb.addSeparator();
+        
+            tb.addButton( {
+                text: 'Stylesheets',
+
+                listeners : {
+                    click : function ()
+                    {
+                        _this.editor.fireEvent('stylesheetsclick', _this.editor);
+                    }
+                }
+            });
+        }
+        
+        tb.addFill();
         tb.addButton( {
             text: 'Remove Tag',
     
@@ -44921,7 +45186,7 @@ Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
     },
 
     /**
-     * Returns true if any fields in this form have changed since their original load.
+     * DEPRICATED Returns true if any fields in this form have changed since their original load. 
      * @return Boolean
      */
     isDirty : function(){
@@ -44934,7 +45199,39 @@ Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
         });
         return dirty;
     },
-
+    
+    /**
+     * Returns true if any fields in this form have changed since their original load. (New version)
+     * @return Boolean
+     */
+    
+    hasChanged : function()
+    {
+        var dirty = false;
+        this.items.each(function(f){
+           if(f.hasChanged()){
+               dirty = true;
+               return false;
+           }
+        });
+        return dirty;
+        
+    },
+    /**
+     * Resets all hasChanged to 'false' -
+     * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
+     * So hasChanged storage is only to be used for this purpose
+     * @return Boolean
+     */
+    resetHasChanged : function()
+    {
+        this.items.each(function(f){
+           f.resetHasChanged();
+        });
+        
+    },
+    
+    
     /**
      * Performs a predefined action (submit or load) or custom actions you define on this form.
      * @param {String} actionName The name of the action type
@@ -45218,9 +45515,12 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
                 }
             }
         }
-         
+        this.resetHasChanged();
+        
+        
         Roo.each(this.childForms || [], function (f) {
             f.setValues(values);
+            f.resetHasChanged();
         });
                 
         return this;
@@ -45327,7 +45627,7 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
         Roo.each(this.childForms || [], function (f) {
             f.reset();
         });
-       
+        this.resetHasChanged();
         
         return this;
     },
@@ -46514,7 +46814,7 @@ Roo.form.VTypes = function(){
     // closure these in so they are only created once.
     var alpha = /^[a-zA-Z_]+$/;
     var alphanum = /^[a-zA-Z0-9_]+$/;
-    var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;
+    var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
     var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
 
     // All these messages and functions are configurable
@@ -46643,7 +46943,7 @@ Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
             this.defaultAutoCreate = {
                 tag: "textarea",
                 style:"width:300px;height:60px;",
-                autocomplete: "off"
+                autocomplete: "new-password"
             };
         }
         Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
@@ -46816,8 +47116,9 @@ Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
     
     replaceTextarea : function()
     {
-        if ( document.getElementById( this.getId() + '___Frame' ) )
+        if ( document.getElementById( this.getId() + '___Frame' ) ) {
             return ;
+        }
         //if ( !this.checkBrowser || this._isCompatibleBrowser() )
         //{
             // We must check the elements firstly using the Id and then the name.
@@ -46966,7 +47267,7 @@ Roo.extend(Roo.form.GridField, Roo.form.Field,  {
      * {tag: "input", type: "checkbox", autocomplete: "off"})
      */
    // defaultAutoCreate : { tag: 'div' },
-    defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
+    defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
     /**
      * @cfg {String} addTitle Text to include for adding a title.
      */
@@ -47076,6 +47377,7 @@ Roo.extend(Roo.form.GridField, Roo.form.Field,  {
  * @class Roo.form.DisplayField
  * @extends Roo.form.Field
  * A generic Field to display non-editable data.
+ * @cfg {Boolean} closable (true|false) default false
  * @constructor
  * Creates a new Display Field item.
  * @param {Object} config Configuration options
@@ -47083,6 +47385,14 @@ Roo.extend(Roo.form.GridField, Roo.form.Field,  {
 Roo.form.DisplayField = function(config){
     Roo.form.DisplayField.superclass.constructor.call(this, config);
     
+    this.addEvents({
+        /**
+         * @event close
+         * Fires after the click the close btn
+            * @param {Roo.form.DisplayField} this
+            */
+        close : true
+    });
 };
 
 Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
@@ -47112,7 +47422,9 @@ Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
      */
      
  //   defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
-
+    closable : false,
+    
     onResize : function(){
         Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
         
@@ -47121,6 +47433,10 @@ Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
     initEvents : function(){
         // Roo.form.Checkbox.superclass.initEvents.call(this);
         // has no events...
+        
+        if(this.closable){
+            this.closeEl.on('click', this.onClose, this);
+        }
        
     },
 
@@ -47142,6 +47458,10 @@ Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
         
         this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
         
+        if(this.closable){
+            this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
+        }
+        
         if (this.bodyStyle) {
             this.viewEl.applyStyles(this.bodyStyle);
         }
@@ -47175,6 +47495,13 @@ Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
         this.viewEl.dom.innerHTML = html;
         Roo.form.DisplayField.superclass.setValue.call(this, v);
 
+    },
+    
+    onClose : function(e)
+    {
+        e.preventDefault();
+        
+        this.fireEvent('close', this);
     }
 });/*
  * 
@@ -47209,7 +47536,7 @@ Roo.extend(Roo.form.DayPicker, Roo.form.Field,  {
      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
      * {tag: "input", type: "checkbox", autocomplete: "off"})
      */
-    defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
+    defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "new-password"},
     
    
     actionMode : 'viewEl', 
@@ -47712,7 +48039,7 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
         pt.x = e.clientX; 
         pt.y = e.clientY;
         if (this.isTouchEvent(e)) {
-            pt.x =  e.targetTouches[0].clientX 
+            pt.x =  e.targetTouches[0].clientX;
             pt.y = e.targetTouches[0].clientY;
         }
         var a = this.svgEl.dom.getScreenCTM();
@@ -49189,7 +49516,9 @@ Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
      * Performs a layout update.
      */
     layout : function(){
-        if(this.updating) return;
+        if(this.updating) {
+            return;
+        }
         var size = this.getViewSize();
         var w = size.width;
         var h = size.height;
@@ -50018,7 +50347,7 @@ Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
  * @cfg {Boolean}   floatable       False to disable floating (defaults to true)
  * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
  * @cfg {Object}    cmargins        Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
- * @cfg {String}    tabPosition     "top" or "bottom" (defaults to "bottom")
+ * @cfg {String}    tabPosition     (top|bottom) "top" or "bottom" (defaults to "bottom")
  * @cfg {String}    collapsedTitle  Optional string message to display in the collapsed block of a north or south region
  * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
  * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
@@ -50303,7 +50632,9 @@ Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
      * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
      */
     collapse : function(skipAnim){
-        if(this.collapsed) return;
+        if(this.collapsed) {
+            return;
+        }
         this.collapsed = true;
         if(this.split){
             this.split.el.hide();
@@ -50330,8 +50661,12 @@ Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
      * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
      */
     expand : function(e, skipAnim){
-        if(e) e.stopPropagation();
-        if(!this.collapsed || this.el.hasActiveFx()) return;
+        if(e) {
+            e.stopPropagation();
+        }
+        if(!this.collapsed || this.el.hasActiveFx()) {
+            return;
+        }
         if(this.isSlid){
             this.afterSlideIn();
             skipAnim = true;
@@ -50442,8 +50777,10 @@ Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
      * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
      * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
      */
-    showPanel : function(panel){
-        if(panel = this.getPanel(panel)){
+    showPanel : function(panel)
+    {
+        panel = this.getPanel(panel);
+        if(panel){
             if(this.tabs){
                 var tab = this.tabs.getTab(panel.getEl().id);
                 if(tab.isHidden()){
@@ -50710,7 +51047,9 @@ Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
     beforeSlide: function(){
         if(Roo.isGecko){// firefox overflow auto bug workaround
             this.bodyEl.clip();
-            if(this.tabs) this.tabs.bodyEl.clip();
+            if(this.tabs) {
+                this.tabs.bodyEl.clip();
+            }
             if(this.activePanel){
                 this.activePanel.getEl().clip();
                 
@@ -50724,7 +51063,9 @@ Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
     afterSlide : function(){
         if(Roo.isGecko){// firefox overflow auto bug workaround
             this.bodyEl.unclip();
-            if(this.tabs) this.tabs.bodyEl.unclip();
+            if(this.tabs) {
+                this.tabs.bodyEl.unclip();
+            }
             if(this.activePanel){
                 this.activePanel.getEl().unclip();
                 if(this.activePanel.afterSlide){
@@ -51660,7 +52001,9 @@ layout.addxtype({
             this.form = new  Roo.form.Form(cfg);
             
             
-            if ( this.form.allItems.length) this.form.render(el.dom);
+            if ( this.form.allItems.length) {
+                this.form.render(el.dom);
+            }
             return this.form;
         }
         // should only have one of theses..
@@ -52652,7 +52995,7 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
     // private
     processEvent : function(name, e){
         // does this fire select???
-        Roo.log('grid:processEvent '  + name);
+        //Roo.log('grid:processEvent '  + name);
         
         if (name != 'touchstart' ) {
             this.fireEvent(name, e);    
@@ -53309,7 +53652,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
 
         if(!tpls.hcell){
             tpls.hcell = new Roo.Template(
-                '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
+                '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
                 '<div class="x-grid-hd-text ' + this.unselectableCls +  '" ' + this.unselectable +'>{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
                 "</div></td>"
              );
@@ -53658,7 +54001,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
             p.cellId = "x-grid-hd-0-" + i;
             p.splitId = "x-grid-csplit-0-" + i;
             p.id = cm.getColumnId(i);
-            p.title = cm.getColumnTooltip(i) || "";
+            p.title = cm.getColumnTooltip(i) || cm.getColumnHeader(i) || "";
             p.value = cm.getColumnHeader(i) || "";
             p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
             if(!cm.isLocked(i)){
@@ -53819,7 +54162,9 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
         if(s){ // splitters not created yet
             var pos = 0, locked = true;
             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
-                if(cm.isHidden(i)) continue;
+                if(cm.isHidden(i)) {
+                    continue;
+                }
                 var w = cm.getColumnWidth(i); // make sure it's a number
                 if(!cm.isLocked(i) && locked){
                     pos = 0;
@@ -54016,7 +54361,8 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                 name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
                 renderer : cm.getRenderer(i),
                 id : cm.getColumnId(i),
-                locked : cm.isLocked(i)
+                locked : cm.isLocked(i),
+                has_editor : cm.isCellEditable(i)
             };
         }
 
@@ -54048,9 +54394,14 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                         p.id = c.id;
                         p.css = p.attr = "";
                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
-                        if(p.value == undefined || p.value === "") p.value = "&#160;";
-                        if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
-                            p.css += p.css ? ' x-grid-dirty-cell' : 'x-grid-dirty-cell';
+                        if(p.value == undefined || p.value === "") {
+                            p.value = "&#160;";
+                        }
+                        if(c.has_editor){
+                            p.css += ' x-grid-editable-cell';
+                        }
+                        if(c.dirty && typeof r.modified[c.name] !== 'undefined'){
+                            p.css +=  ' x-grid-dirty-cell';
                         }
                         var markup = ct.apply(p);
                         if(!c.locked){
@@ -54076,7 +54427,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                             record: r,
                             rowIndex : rowIndex,
                             rowClass : ''
-                        }
+                        };
                         this.grid.fireEvent('rowclass', this, rowcfg);
                         alt.push(rowcfg.rowClass);
                     }
@@ -54102,9 +54453,15 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                         p.id = c.id;
                         p.css = p.attr = "";
                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
-                        if(p.value == undefined || p.value === "") p.value = "&#160;";
+                        if(p.value == undefined || p.value === "") {
+                            p.value = "&#160;";
+                        }
+                        //Roo.log(c);
+                         if(c.has_editor){
+                            p.css += ' x-grid-editable-cell';
+                        }
                         if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
-                            p.css += p.css ? ' x-grid-dirty-cell' : 'x-grid-dirty-cell';
+                            p.css += ' x-grid-dirty-cell' 
                         }
                         
                         var markup = ct.apply(p);
@@ -54131,10 +54488,11 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                             record: r,
                             rowIndex : rowIndex,
                             rowClass : ''
-                        }
+                        };
                         this.grid.fireEvent('rowclass', this, rowcfg);
                         alt.push(rowcfg.rowClass);
                     }
+                    
                     rp.alt = alt.join(" ");
                     rp.cells = lcb.join("");
                     lbuf[lbuf.length] = rt.apply(rp);
@@ -54221,7 +54579,9 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
         };
         var renderer = cm.getRenderer(colIndex);
         var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
-        if(typeof val == "undefined" || val === "") val = "&#160;";
+        if(typeof val == "undefined" || val === "") {
+            val = "&#160;";
+        }
         cellText.innerHTML = val;
         cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
         this.syncRowHeights(rowIndex, rowIndex);
@@ -54788,6 +55148,11 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
         s.setSize(vw, vh);
 
         var bt = this.getBodyTable();
+        
+        if(cm.getLockedCount() == cm.config.length){
+            bt = this.getLockedTable();
+        }
+        
         var ltWidth = hasLock ?
                       Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
 
@@ -55214,6 +55579,21 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
     /**
      * @cfg {String} cursor (Optional)
      */
+    /**
+     * @cfg {String} tooltip (Optional)
+     */
+    /**
+     * @cfg {Number} xs (Optional)
+     */
+    /**
+     * @cfg {Number} sm (Optional)
+     */
+    /**
+     * @cfg {Number} md (Optional)
+     */
+    /**
+     * @cfg {Number} lg (Optional)
+     */
     /**
      * Returns the id of the column at the specified index.
      * @param {Number} index The column index
@@ -55311,6 +55691,8 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
                 return i;
             }
         }
+        
+        return this.config.length;
     },
 
     /**
@@ -55488,7 +55870,7 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
     /**
      * Returns true if the cell is editable.
      * @param {Number} colIndex The column index
-     * @param {Number} rowIndex The row index
+     * @param {Number} rowIndex The row index - this is nto actually used..?
      * @return {Boolean}
      */
     isCellEditable : function(colIndex, rowIndex){
@@ -55752,6 +56134,7 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
         s.each(function(r){
             if((i = ds.indexOfId(r.id)) != -1){
                 v.onRowSelect(i);
+                s.add(ds.getAt(i)); // updating the selection relate data
             }else{
                 s.remove(r);
             }
@@ -55851,7 +56234,9 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
      * Clears all selections.
      */
     clearSelections : function(fast){
-        if(this.locked) return;
+        if(this.locked) {
+            return;
+        }
         if(fast !== true){
             var ds = this.grid.dataSource;
             var s = this.selections;
@@ -55870,7 +56255,9 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
      * Selects all rows.
      */
     selectAll : function(){
-        if(this.locked) return;
+        if(this.locked) {
+            return;
+        }
         this.selections.clear();
         for(var i = 0, len = this.grid.dataSource.getCount(); i < len; i++){
             this.selectRow(i, true);
@@ -55959,7 +56346,9 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
      * @param {Boolean} keepExisting (optional) True to retain existing selections
      */
     selectRange : function(startRow, endRow, keepExisting){
-        if(this.locked) return;
+        if(this.locked) {
+            return;
+        }
         if(!keepExisting){
             this.clearSelections();
         }
@@ -55980,7 +56369,9 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
      * @param {Number} endRow The index of the last row in the range
      */
     deselectRange : function(startRow, endRow, preventViewNotify){
-        if(this.locked) return;
+        if(this.locked) {
+            return;
+        }
         for(var i = startRow; i <= endRow; i++){
             this.deselectRow(i, preventViewNotify);
         }
@@ -55992,7 +56383,9 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
      * @param {Boolean} keepExisting (optional) True to keep existing selections
      */
     selectRow : function(index, keepExisting, preventViewNotify){
-        if(this.locked || (index < 0 || index >= this.grid.dataSource.getCount())) return;
+        if(this.locked || (index < 0 || index >= this.grid.dataSource.getCount())) {
+            return;
+        }
         if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
             if(!keepExisting || this.singleSelect){
                 this.clearSelections();
@@ -56013,7 +56406,9 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
      * @param {Number} row The index of the row to deselect
      */
     deselectRow : function(index, preventViewNotify){
-        if(this.locked) return;
+        if(this.locked) {
+            return;
+        }
         if(this.last == index){
             this.last = false;
         }
@@ -56497,7 +56892,7 @@ Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
             cancel:false,
             editor: ed
         };
-        var cell = Roo.get(this.view.getCell(ed.row,ed.col))
+        var cell = Roo.get(this.view.getCell(ed.row,ed.col));
         cell.show();
           
         if(String(value) !== String(startValue)){