Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / ext-all-debug.js
index ba428b5..8fc6dc0 100644 (file)
@@ -407,7 +407,7 @@ If you are unsure which license is appropriate for your use, please contact the
 (function() {
 
 
-var version = '4.0.2', Version;
+var version = '4.0.7', Version;
     Ext.Version = Version = Ext.extend(Object, {
 
         
@@ -592,7 +592,7 @@ Ext.String = {
     escapeRegexRe: /([-.*+?^${}()|[\]\/\\])/g,
 
     /**
-     * Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.
+     * Convert certain characters (&, <, >, and ") to their HTML character equivalents for literal display in web pages.
      * @param {String} value The string to encode
      * @return {String} The encoded text
      * @method
@@ -618,7 +618,12 @@ Ext.String = {
         };
     })(),
 
-    
+    /**
+     * Convert certain characters (&, <, >, and ") from their HTML character equivalents.
+     * @param {String} value The string to decode
+     * @return {String} The decoded text
+     * @method
+     */
     htmlDecode: (function() {
         var entities = {
             '&amp;': '&',
@@ -709,6 +714,14 @@ Ext.String = {
         return format.replace(Ext.String.formatRe, function(m, i) {
             return args[i];
         });
+    },
+
+    
+    repeat: function(pattern, count, sep) {
+        for (var buf = [], i = count; i--; ) {
+            buf.push(pattern);
+        }
+        return buf.join(sep || '');
     }
 };
 
@@ -1267,9 +1280,24 @@ Ext.num = function() {
         },
 
         
-        slice: function(array, begin, end) {
-            return slice.call(array, begin, end);
-        },
+        
+        slice: ([1,2].slice(1, undefined).length ?
+            function (array, begin, end) {
+                return slice.call(array, begin, end);
+            } :
+            
+            function (array, begin, end) {
+                
+                
+                if (typeof begin === 'undefined') {
+                    return slice.call(array);
+                }
+                if (typeof end === 'undefined') {
+                    return slice.call(array, begin);
+                }
+                return slice.call(array, begin, end);
+            }
+        ),
 
         
         sort: function(array, sortFn) {
@@ -1485,6 +1513,12 @@ Ext.Function = {
 
     
     bind: function(fn, scope, args, appendArgs) {
+        if (arguments.length === 2) {
+            return function() {
+                return fn.apply(scope, arguments);
+            }
+        }
+
         var method = fn,
             slice = Array.prototype.slice;
 
@@ -1495,7 +1529,7 @@ Ext.Function = {
                 callArgs = slice.call(arguments, 0);
                 callArgs = callArgs.concat(args);
             }
-            else if (Ext.isNumber(appendArgs)) {
+            else if (typeof appendArgs == 'number') {
                 callArgs = slice.call(arguments, 0); 
                 Ext.Array.insert(callArgs, appendArgs, args);
             }
@@ -1583,7 +1617,7 @@ Ext.Function = {
             return function() {
                 var me = this;
                 if (timerId) {
-                    clearInterval(timerId);
+                    clearTimeout(timerId);
                     timerId = null;
                 }
                 timerId = setTimeout(function(){
@@ -1611,6 +1645,28 @@ Ext.Function = {
                 timer = setTimeout(execute, interval - elapsed);
             }
         };
+    },
+
+    
+    interceptBefore: function(object, methodName, fn) {
+        var method = object[methodName] || Ext.emptyFn;
+
+        return object[methodName] = function() {
+            var ret = fn.apply(this, arguments);
+            method.apply(this, arguments);
+
+            return ret;
+        };
+    },
+
+    
+    interceptAfter: function(object, methodName, fn) {
+        var method = object[methodName] || Ext.emptyFn;
+
+        return object[methodName] = function() {
+            method.apply(this, arguments);
+            return fn.apply(this, arguments);
+        };
     }
 };
 
@@ -2786,6 +2842,7 @@ var Base = Ext.Base = function() {};
         },
 
         
+        
         initConfig: function(config) {
             if (!this.$configInited) {
                 this.config = Ext.Object.merge({}, this.config || {}, config || {});
@@ -2815,6 +2872,7 @@ var Base = Ext.Base = function() {};
 
             return this;
         }),
+        
 
         
         callParent: function(args) {
@@ -2865,20 +2923,20 @@ var Base = Ext.Base = function() {};
         },
 
         
-        own: flexSetter(function(name, value) {
-            if (typeof value === 'function') {
+        own: function(name, value) {
+            if (typeof value == 'function') {
                 this.ownMethod(name, value);
             }
             else {
                 this.prototype[name] = value;
             }
-        }),
+        },
 
         
         ownMethod: function(name, fn) {
             var originalFn;
 
-            if (fn.$owner !== undefined && fn !== Ext.emptyFn) {
+            if (typeof fn.$owner !== 'undefined' && fn !== Ext.emptyFn) {
                 originalFn = fn;
 
                 fn = function() {
@@ -2904,9 +2962,41 @@ var Base = Ext.Base = function() {};
         },
 
         
+        addInheritableStatics: function(members) {
+            var inheritableStatics,
+                hasInheritableStatics,
+                prototype = this.prototype,
+                name, member;
+
+            inheritableStatics = prototype.$inheritableStatics;
+            hasInheritableStatics = prototype.$hasInheritableStatics;
+
+            if (!inheritableStatics) {
+                inheritableStatics = prototype.$inheritableStatics = [];
+                hasInheritableStatics = prototype.$hasInheritableStatics = {};
+            }
+
+
+            for (name in members) {
+                if (members.hasOwnProperty(name)) {
+                    member = members[name];
+                    this[name] = member;
+
+                    if (!hasInheritableStatics[name]) {
+                        hasInheritableStatics[name] = true;
+                        inheritableStatics.push(name);
+                    }
+                }
+            }
+
+            return this;
+        },
+
+        
         implement: function(members) {
             var prototype = this.prototype,
-                name, i, member, previous;
+                enumerables = Ext.enumerables,
+                name, i, member;
             for (name in members) {
                 if (members.hasOwnProperty(name)) {
                     member = members[name];
@@ -2920,9 +3010,7 @@ var Base = Ext.Base = function() {};
                 }
             }
 
-            if (Ext.enumerables) {
-                var enumerables = Ext.enumerables;
-
+            if (enumerables) {
                 for (i = enumerables.length; i--;) {
                     name = enumerables[i];
 
@@ -2955,8 +3043,28 @@ var Base = Ext.Base = function() {};
         
         override: function(members) {
             var prototype = this.prototype,
+                enumerables = Ext.enumerables,
                 name, i, member, previous;
 
+            if (arguments.length === 2) {
+                name = members;
+                member = arguments[1];
+
+                if (typeof member == 'function') {
+                    if (typeof prototype[name] == 'function') {
+                        previous = prototype[name];
+                        member.$previous = previous;
+                    }
+
+                    this.ownMethod(name, member);
+                }
+                else {
+                    prototype[name] = member;
+                }
+
+                return this;
+            }
+
             for (name in members) {
                 if (members.hasOwnProperty(name)) {
                     member = members[name];
@@ -2975,14 +3083,12 @@ var Base = Ext.Base = function() {};
                 }
             }
 
-            if (Ext.enumerables) {
-                var enumerables = Ext.enumerables;
-
+            if (enumerables) {
                 for (i = enumerables.length; i--;) {
                     name = enumerables[i];
 
                     if (members.hasOwnProperty(name)) {
-                        if (prototype[name] !== undefined) {
+                        if (typeof prototype[name] !== 'undefined') {
                             previous = prototype[name];
                             members[name].$previous = previous;
                         }
@@ -2996,40 +3102,53 @@ var Base = Ext.Base = function() {};
         },
 
         
-        mixin: flexSetter(function(name, cls) {
+        
+        mixin: function(name, cls) {
             var mixin = cls.prototype,
                 my = this.prototype,
-                i, fn;
+                key, fn;
 
-            for (i in mixin) {
-                if (mixin.hasOwnProperty(i)) {
-                    if (my[i] === undefined) {
-                        if (typeof mixin[i] === 'function') {
-                            fn = mixin[i];
+            for (key in mixin) {
+                if (mixin.hasOwnProperty(key)) {
+                    if (typeof my[key] === 'undefined' && key !== 'mixins' && key !== 'mixinId') {
+                        if (typeof mixin[key] === 'function') {
+                            fn = mixin[key];
 
-                            if (fn.$owner === undefined) {
-                                this.ownMethod(i, fn);
+                            if (typeof fn.$owner === 'undefined') {
+                                this.ownMethod(key, fn);
                             }
                             else {
-                                my[i] = fn;
+                                my[key] = fn;
                             }
                         }
                         else {
-                            my[i] = mixin[i];
+                            my[key] = mixin[key];
                         }
                     }
-                    else if (i === 'config' && my.config && mixin.config) {
+                    
+                    else if (key === 'config' && my.config && mixin.config) {
                         Ext.Object.merge(my.config, mixin.config);
                     }
+                    
                 }
             }
 
-            if (my.mixins === undefined) {
-                my.mixins = {};
+            if (typeof mixin.onClassMixedIn !== 'undefined') {
+                mixin.onClassMixedIn.call(cls, this);
+            }
+
+            if (!my.hasOwnProperty('mixins')) {
+                if ('mixins' in my) {
+                    my.mixins = Ext.Object.merge({}, my.mixins);
+                }
+                else {
+                    my.mixins = {};
+                }
             }
 
             my.mixins[name] = mixin;
-        }),
+        },
+        
 
         
         getName: function() {
@@ -3038,7 +3157,9 @@ var Base = Ext.Base = function() {};
 
         
         createAlias: flexSetter(function(alias, origin) {
-            this.prototype[alias] = this.prototype[origin];
+            this.prototype[alias] = function() {
+                return this[origin].apply(this, arguments);
+            }
         })
     });
 
@@ -3060,7 +3181,7 @@ var Base = Ext.Base = function() {};
 
     
     Ext.Class = Class = function(newClass, classData, onClassCreated) {
-        if (typeof newClass !== 'function') {
+        if (typeof newClass != 'function') {
             onClassCreated = classData;
             classData = newClass;
             newClass = function() {
@@ -3076,7 +3197,7 @@ var Base = Ext.Base = function() {};
             registeredPreprocessors = Class.getPreprocessors(),
             index = 0,
             preprocessors = [],
-            preprocessor, preprocessors, staticPropertyName, process, i, j, ln;
+            preprocessor, staticPropertyName, process, i, j, ln;
 
         for (i = 0, ln = baseStaticProperties.length; i < ln; i++) {
             staticPropertyName = baseStaticProperties[i];
@@ -3088,7 +3209,7 @@ var Base = Ext.Base = function() {};
         for (j = 0, ln = preprocessorStack.length; j < ln; j++) {
             preprocessor = preprocessorStack[j];
 
-            if (typeof preprocessor === 'string') {
+            if (typeof preprocessor == 'string') {
                 preprocessor = registeredPreprocessors[preprocessor];
 
                 if (!preprocessor.always) {
@@ -3105,7 +3226,7 @@ var Base = Ext.Base = function() {};
             }
         }
 
-        classData.onClassCreated = onClassCreated;
+        classData.onClassCreated = onClassCreated || Ext.emptyFn;
 
         classData.onBeforeClassCreated = function(cls, data) {
             onClassCreated = data.onClassCreated;
@@ -3115,9 +3236,7 @@ var Base = Ext.Base = function() {};
 
             cls.implement(data);
 
-            if (onClassCreated) {
-                onClassCreated.call(cls, cls);
-            }
+            onClassCreated.call(cls, cls);
         };
 
         process = function(cls, data) {
@@ -3180,7 +3299,7 @@ var Base = Ext.Base = function() {};
             var defaultPreprocessors = this.defaultPreprocessors,
                 index;
 
-            if (typeof offset === 'string') {
+            if (typeof offset == 'string') {
                 if (offset === 'first') {
                     defaultPreprocessors.unshift(name);
 
@@ -3241,6 +3360,7 @@ var Base = Ext.Base = function() {};
         delete data.extend;
 
         
+        
         parentStatics = parentPrototype.$inheritableStatics;
 
         if (parentStatics) {
@@ -3252,15 +3372,19 @@ var Base = Ext.Base = function() {};
                 }
             }
         }
+        
 
         
+        
         if (parentPrototype.config) {
             clsPrototype.config = Ext.Object.merge({}, parentPrototype.config);
         }
         else {
             clsPrototype.config = {};
         }
+        
 
+        
         if (clsPrototype.$onExtended) {
             clsPrototype.$onExtended.call(cls, cls, data);
         }
@@ -3269,54 +3393,30 @@ var Base = Ext.Base = function() {};
             clsPrototype.$onExtended = data.onClassExtended;
             delete data.onClassExtended;
         }
+        
 
     }, true);
 
     
+    
     Class.registerPreprocessor('statics', function(cls, data) {
-        var statics = data.statics,
-            name;
-
-        for (name in statics) {
-            if (statics.hasOwnProperty(name)) {
-                cls[name] = statics[name];
-            }
-        }
+        cls.addStatics(data.statics);
 
         delete data.statics;
     });
+    
 
     
+    
     Class.registerPreprocessor('inheritableStatics', function(cls, data) {
-        var statics = data.inheritableStatics,
-            inheritableStatics,
-            prototype = cls.prototype,
-            name;
-
-        inheritableStatics = prototype.$inheritableStatics;
-
-        if (!inheritableStatics) {
-            inheritableStatics = prototype.$inheritableStatics = [];
-        }
-
-        for (name in statics) {
-            if (statics.hasOwnProperty(name)) {
-                cls[name] = statics[name];
-                inheritableStatics.push(name);
-            }
-        }
+        cls.addInheritableStatics(data.inheritableStatics);
 
         delete data.inheritableStatics;
     });
-
     
-    Class.registerPreprocessor('mixins', function(cls, data) {
-        cls.mixin(data.mixins);
-
-        delete data.mixins;
-    });
 
     
+    
     Class.registerPreprocessor('config', function(cls, data) {
         var prototype = cls.prototype;
 
@@ -3337,7 +3437,7 @@ var Base = Ext.Base = function() {};
                 data[setter] = function(val) {
                     var ret = this[apply].call(this, val, this[pName]);
 
-                    if (ret !== undefined) {
+                    if (typeof ret != 'undefined') {
                         this[pName] = ret;
                     }
 
@@ -3355,10 +3455,55 @@ var Base = Ext.Base = function() {};
         Ext.Object.merge(prototype.config, data.config);
         delete data.config;
     });
+    
+
+    
+    
+    Class.registerPreprocessor('mixins', function(cls, data) {
+        var mixins = data.mixins,
+            name, mixin, i, ln;
+
+        delete data.mixins;
 
-    Class.setDefaultPreprocessors(['extend', 'statics', 'inheritableStatics', 'mixins', 'config']);
+        Ext.Function.interceptBefore(data, 'onClassCreated', function(cls) {
+            if (mixins instanceof Array) {
+                for (i = 0,ln = mixins.length; i < ln; i++) {
+                    mixin = mixins[i];
+                    name = mixin.prototype.mixinId || mixin.$className;
+
+                    cls.mixin(name, mixin);
+                }
+            }
+            else {
+                for (name in mixins) {
+                    if (mixins.hasOwnProperty(name)) {
+                        cls.mixin(name, mixins[name]);
+                    }
+                }
+            }
+        });
+    });
 
     
+
+    Class.setDefaultPreprocessors([
+        'extend'
+        
+        ,'statics'
+        
+        
+        ,'inheritableStatics'
+        
+        
+        ,'config'
+        
+        
+        ,'mixins'
+        
+    ]);
+
+    
+    
     Ext.extend = function(subclass, superclass, members) {
         if (arguments.length === 2 && Ext.isObject(superclass)) {
             members = superclass;
@@ -3373,7 +3518,21 @@ var Base = Ext.Base = function() {};
         }
 
         members.extend = superclass;
-        members.preprocessors = ['extend', 'mixins', 'config', 'statics'];
+        members.preprocessors = [
+            'extend'
+            
+            ,'statics'
+            
+            
+            ,'inheritableStatics'
+            
+            
+            ,'mixins'
+            
+            
+            ,'config'
+            
+        ];
 
         if (subclass) {
             cls = new Class(subclass, members);
@@ -3392,6 +3551,7 @@ var Base = Ext.Base = function() {};
 
         return cls;
     };
+    
 
 })();
 
@@ -3512,10 +3672,11 @@ var Base = Ext.Base = function() {};
         setNamespace: function(name, value) {
             var root = Ext.global,
                 parts = this.parseNamespace(name),
-                leaf = parts.pop(),
-                i, ln, part;
+                ln = parts.length - 1,
+                leaf = parts[ln],
+                i, part;
 
-            for (i = 0, ln = parts.length; i < ln; i++) {
+            for (i = 0; i < ln; i++) {
                 part = parts[i];
 
                 if (typeof part !== 'string') {
@@ -3670,7 +3831,7 @@ var Base = Ext.Base = function() {};
                     registeredPostprocessors = manager.postprocessors,
                     index = 0,
                     postprocessors = [],
-                    postprocessor, postprocessors, process, i, ln;
+                    postprocessor, process, i, ln;
 
                 delete data.postprocessors;
 
@@ -3915,33 +4076,21 @@ var Base = Ext.Base = function() {};
         }
     };
 
+    var defaultPostprocessors = Manager.defaultPostprocessors;
+    
+
     
     Manager.registerPostprocessor('alias', function(name, cls, data) {
         var aliases = data.alias,
-            widgetPrefix = 'widget.',
-            i, ln, alias;
+            i, ln;
 
-        if (!(aliases instanceof Array)) {
-            aliases = [aliases];
-        }
+        delete data.alias;
 
         for (i = 0, ln = aliases.length; i < ln; i++) {
             alias = aliases[i];
 
-
             this.setAlias(cls, alias);
         }
-
-        
-        for (i = 0, ln = aliases.length; i < ln; i++) {
-            alias = aliases[i];
-
-            if (alias.substring(0, widgetPrefix.length) === widgetPrefix) {
-                
-                cls.xtype = cls.$xtype = alias.substring(widgetPrefix.length);
-                break;
-            }
-        }
     });
 
     
@@ -4025,7 +4174,71 @@ var Base = Ext.Base = function() {};
         createByAlias: alias(Manager, 'instantiateByAlias'),
 
         
-        define: alias(Manager, 'create'),
+        
+        
+        define: function (className, data, createdFn) {
+            if (!data.override) {
+                return Manager.create.apply(Manager, arguments);
+            }
+
+            var requires = data.requires,
+                uses = data.uses,
+                overrideName = className;
+
+            className = data.override;
+
+            
+            data = Ext.apply({}, data);
+            delete data.requires;
+            delete data.uses;
+            delete data.override;
+
+            
+            if (typeof requires == 'string') {
+                requires = [ className, requires ];
+            } else if (requires) {
+                requires = requires.slice(0);
+                requires.unshift(className);
+            } else {
+                requires = [ className ];
+            }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+            return Manager.create(overrideName, {
+                    requires: requires,
+                    uses: uses,
+                    isPartial: true,
+                    constructor: function () {
+                    }
+                }, function () {
+                    var cls = Manager.get(className);
+                    if (cls.override) { 
+                        cls.override(data);
+                    } else { 
+                        cls.self.override(data);
+                    }
+
+                    if (createdFn) {
+                        
+                        
+                        
+                        createdFn.call(cls);
+                    }
+                });
+        },
 
         
         getClassName: alias(Manager, 'getName'),
@@ -4068,6 +4281,56 @@ var Base = Ext.Base = function() {};
 
     Class.setDefaultPreprocessorPosition('className', 'first');
 
+    Class.registerPreprocessor('xtype', function(cls, data) {
+        var xtypes = Ext.Array.from(data.xtype),
+            widgetPrefix = 'widget.',
+            aliases = Ext.Array.from(data.alias),
+            i, ln, xtype;
+
+        data.xtype = xtypes[0];
+        data.xtypes = xtypes;
+
+        aliases = data.alias = Ext.Array.from(data.alias);
+
+        for (i = 0,ln = xtypes.length; i < ln; i++) {
+            xtype = xtypes[i];
+
+
+            aliases.push(widgetPrefix + xtype);
+        }
+
+        data.alias = aliases;
+    });
+
+    Class.setDefaultPreprocessorPosition('xtype', 'last');
+
+    Class.registerPreprocessor('alias', function(cls, data) {
+        var aliases = Ext.Array.from(data.alias),
+            xtypes = Ext.Array.from(data.xtypes),
+            widgetPrefix = 'widget.',
+            widgetPrefixLength = widgetPrefix.length,
+            i, ln, alias, xtype;
+
+        for (i = 0, ln = aliases.length; i < ln; i++) {
+            alias = aliases[i];
+
+
+            if (alias.substring(0, widgetPrefixLength) === widgetPrefix) {
+                xtype = alias.substring(widgetPrefixLength);
+                Ext.Array.include(xtypes, xtype);
+
+                if (!cls.xtype) {
+                    cls.xtype = data.xtype = xtype;
+                }
+            }
+        }
+
+        data.alias = aliases;
+        data.xtypes = xtypes;
+    });
+
+    Class.setDefaultPreprocessorPosition('alias', 'last');
+
 })(Ext.Class, Ext.Function.alias);
 
 
@@ -4616,7 +4879,7 @@ var Base = Ext.Base = function() {};
                         }
                     }
                 }
-                else {
+                else if (typeof propertyValue != 'function') {
                     for (j in propertyValue) {
                         if (propertyValue.hasOwnProperty(j)) {
                             value = propertyValue[j];
@@ -4655,7 +4918,7 @@ var Base = Ext.Base = function() {};
                             }
                         }
                     }
-                    else {
+                    else if (typeof propertyValue != 'function') {
                         for (var k in propertyValue) {
                             if (propertyValue.hasOwnProperty(k)) {
                                 value = propertyValue[k];
@@ -4864,7 +5127,7 @@ Ext.JSON = new(function() {
 
     
     this.encodeDate = function(o) {
-        return '"' + o.getFullYear() + "-" 
+        return '"' + o.getFullYear() + "-"
         + pad(o.getMonth() + 1) + "-"
         + pad(o.getDate()) + "T"
         + pad(o.getHours()) + ":"
@@ -4920,8 +5183,6 @@ Ext.apply(Ext, {
     userAgent: navigator.userAgent.toLowerCase(),
     cache: {},
     idSeed: 1000,
-    BLANK_IMAGE_URL : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
-    isStrict: document.compatMode == "CSS1Compat",
     windowId: 'ext-window',
     documentId: 'ext-document',
 
@@ -5051,9 +5312,15 @@ window.undefined = window.undefined;
 
 
 (function(){
+
     var check = function(regex){
             return regex.test(Ext.userAgent);
         },
+        isStrict = document.compatMode == "CSS1Compat",
+        version = function (is, regex) {
+            var m;
+            return (is && (m = regex.exec(Ext.userAgent))) ? parseFloat(m[1]) : 0;
+        },
         docMode = document.documentMode,
         isOpera = check(/opera/),
         isOpera10_5 = isOpera && check(/version\/10\.5/),
@@ -5063,6 +5330,7 @@ window.undefined = window.undefined;
         isSafari2 = isSafari && check(/applewebkit\/4/), 
         isSafari3 = isSafari && check(/version\/3/),
         isSafari4 = isSafari && check(/version\/4/),
+        isSafari5 = isSafari && check(/version\/5/),
         isIE = !isOpera && check(/msie/),
         isIE7 = isIE && (check(/msie 7/) || docMode == 7),
         isIE8 = isIE && (check(/msie 8/) && docMode != 7 && docMode != 9 || docMode == 8),
@@ -5071,6 +5339,7 @@ window.undefined = window.undefined;
         isGecko = !isWebKit && check(/gecko/),
         isGecko3 = isGecko && check(/rv:1\.9/),
         isGecko4 = isGecko && check(/rv:2\.0/),
+        isGecko5 = isGecko && check(/rv:5\./),
         isFF3_0 = isGecko3 && check(/rv:1\.9\.0/),
         isFF3_5 = isGecko3 && check(/rv:1\.9\.1/),
         isFF3_6 = isGecko3 && check(/rv:1\.9\.2/),
@@ -5078,17 +5347,24 @@ window.undefined = window.undefined;
         isMac = check(/macintosh|mac os x/),
         isLinux = check(/linux/),
         scrollbarSize = null,
-        webKitVersion = isWebKit && (/webkit\/(\d+\.\d+)/.exec(Ext.userAgent));
+        chromeVersion = version(true, /\bchrome\/(\d+\.\d+)/),
+        firefoxVersion = version(true, /\bfirefox\/(\d+\.\d+)/),
+        ieVersion = version(isIE, /msie (\d+\.\d+)/),
+        operaVersion = version(isOpera, /version\/(\d+\.\d+)/),
+        safariVersion = version(isSafari, /version\/(\d+\.\d+)/),
+        webKitVersion = version(isWebKit, /webkit\/(\d+\.\d+)/),
+        isSecure = /^https/i.test(window.location.protocol);
 
     
     try {
         document.execCommand("BackgroundImageCache", false, true);
     } catch(e) {}
 
-    Ext.setVersion('extjs', '4.0.2');
+
+    Ext.setVersion('extjs', '4.0.7');
     Ext.apply(Ext, {
         
-        SSL_SECURE_URL : Ext.isSecure && isIE ? 'javascript:""' : 'about:blank',
+        SSL_SECURE_URL : isSecure && isIE ? 'javascript:""' : 'about:blank',
 
         
 
@@ -5147,6 +5423,10 @@ window.undefined = window.undefined;
             }
         },
 
+        isStrict: isStrict,
+
+        isIEQuirks: isIE && !isStrict,
+
         
         isOpera : isOpera,
 
@@ -5169,6 +5449,9 @@ window.undefined = window.undefined;
         isSafari4 : isSafari4,
 
         
+        isSafari5 : isSafari5,
+
+        
         isSafari2 : isSafari2,
 
         
@@ -5196,15 +5479,24 @@ window.undefined = window.undefined;
         isGecko4 : isGecko4,
 
         
+        isGecko5 : isGecko5,
 
-        isFF3_0 : isFF3_0,
         
+        isFF3_0 : isFF3_0,
 
+        
         isFF3_5 : isFF3_5,
+
         
         isFF3_6 : isFF3_6,
 
         
+        isFF4 : 4 <= firefoxVersion && firefoxVersion < 5,
+
+        
+        isFF5 : 5 <= firefoxVersion && firefoxVersion < 6,
+
+        
         isLinux : isLinux,
 
         
@@ -5214,10 +5506,28 @@ window.undefined = window.undefined;
         isMac : isMac,
 
         
-        webKitVersion: webKitVersion ? parseFloat(webKitVersion[1]) : -1,
+        chromeVersion: chromeVersion,
+
+        
+        firefoxVersion: firefoxVersion,
+
+        
+        ieVersion: ieVersion,
+
+        
+        operaVersion: operaVersion,
+
+        
+        safariVersion: safariVersion,
+
+        
+        webKitVersion: webKitVersion,
+
+        
+        isSecure: isSecure,
 
         
-        BLANK_IMAGE_URL : (isIE6 || isIE7) ? 'http:/' + '/www.sencha.com/s.gif' : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
+        BLANK_IMAGE_URL : (isIE6 || isIE7) ? '/' + '/www.sencha.com/s.gif' : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
 
         
         value : function(v, defaultValue, allowBlank){
@@ -5309,8 +5619,8 @@ window.undefined = window.undefined;
         },
 
         
-        log : function (message) {
-        },
+        log :
+            Ext.emptyFn,
 
         
         partition : function(arr, truth){
@@ -5462,7 +5772,7 @@ Ext.application = function(config) {
             for (; i < decimals; i++) {
                 format += '0';
             }
-            v = UtilFormat.number(v, format); 
+            v = UtilFormat.number(v, format);
             if ((end || UtilFormat.currencyAtEnd) === true) {
                 return Ext.String.format("{0}{1}{2}", negativeSign, v, currencySign || UtilFormat.currencySign);
             } else {
@@ -5602,7 +5912,7 @@ Ext.application = function(config) {
                     fnum = psplit[0] + dec + psplit[1];
                 }
             }
-            
+
             if (neg) {
                 
                 neg = fnum.replace(/[^1-9]/g, '') !== '';
@@ -6202,7 +6512,7 @@ Ext.supports = {
 
 
 Ext.ns('Ext.core');
-Ext.core.DomHelper = function(){
+Ext.core.DomHelper = Ext.DomHelper = function(){
     var tempTableEl = null,
         emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,
         tableRe = /^table|tbody|tr|td$/i,
@@ -6234,11 +6544,11 @@ Ext.core.DomHelper = function(){
                 (sibling == 'firstChild' ? el : el.parentNode).insertBefore(newNode, el[sibling] || el);
             }
         } else {
-            newNode = Ext.core.DomHelper.insertHtml(pos, el, Ext.core.DomHelper.createHtml(o));
+            newNode = Ext.DomHelper.insertHtml(pos, el, Ext.DomHelper.createHtml(o));
         }
         return returnElement ? Ext.get(newNode, true) : newNode;
     }
-    
+
     function createDom(o, parentNode){
         var el,
             doc = document,
@@ -6271,7 +6581,7 @@ Ext.core.DomHelper = function(){
                     }
                 }
             }
-            Ext.core.DomHelper.applyStyles(el, o.style);
+            Ext.DomHelper.applyStyles(el, o.style);
 
             if ((cn = o.children || o.cn)) {
                 createDom(cn, el);
@@ -6386,14 +6696,14 @@ Ext.core.DomHelper = function(){
         el.insertBefore(node, before);
         return node;
     }
+
     
-       
     function createContextualFragment(html){
         var div = document.createElement("div"),
             fragment = document.createDocumentFragment(),
             i = 0,
             length, childNodes;
-        
+
         div.innerHTML = html;
         childNodes = div.childNodes;
         length = childNodes.length;
@@ -6404,7 +6714,7 @@ Ext.core.DomHelper = function(){
 
         return fragment;
     }
-    
+
     pub = {
         
         markup : function(o){
@@ -6419,7 +6729,7 @@ Ext.core.DomHelper = function(){
                     styles = styles.call();
                 }
                 if (typeof styles == "string") {
-                    styles = Ext.core.Element.parseStyles(styles);
+                    styles = Ext.Element.parseStyles(styles);
                 }
                 if (typeof styles == "object") {
                     el.setStyle(styles);
@@ -6441,13 +6751,13 @@ Ext.core.DomHelper = function(){
             
             hash[beforebegin] = ['BeforeBegin', 'previousSibling'];
             hash[afterend] = ['AfterEnd', 'nextSibling'];
-            
+
             
             if (el.insertAdjacentHTML) {
                 if(tableRe.test(el.tagName) && (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))){
                     return rs;
                 }
-                
+
                 
                 hash[afterbegin] = ['AfterBegin', 'firstChild'];
                 hash[beforeend] = ['BeforeEnd', 'lastChild'];
@@ -6459,7 +6769,7 @@ Ext.core.DomHelper = function(){
             } else {
                 
                 if (Ext.isTextNode(el)) {
-                    where = where === 'afterbegin' ? 'beforebegin' : where; 
+                    where = where === 'afterbegin' ? 'beforebegin' : where;
                     where = where === 'beforeend' ? 'afterend' : where;
                 }
                 range = Ext.supports.CreateContextualFragment ? el.ownerDocument.createRange() : undefined;
@@ -6482,7 +6792,7 @@ Ext.core.DomHelper = function(){
                         } else {
                             frag = createContextualFragment(html);
                         }
-                        
+
                         if(where == afterbegin){
                             el.insertBefore(frag, el.firstChild);
                         }else{
@@ -6524,16 +6834,16 @@ Ext.core.DomHelper = function(){
         },
 
         createHtml : createHtml,
-        
+
         
         createDom: createDom,
-        
+
         
         useDom : false,
-        
+
         
         createTemplate : function(o){
-            var html = Ext.core.DomHelper.createHtml(o);
+            var html = Ext.DomHelper.createHtml(o);
             return Ext.create('Ext.Template', html);
         }
     };
@@ -6555,6 +6865,7 @@ Ext.core.DomQuery = Ext.DomQuery = function(){
         tagTokenRe = /^(#)?([\w-\*]+)/,
         nthRe = /(\d*)n\+?(\d*)/,
         nthRe2 = /\D/,
+        startIdRe = /^\s*\#/,
         
     
     
@@ -7029,12 +7340,22 @@ Ext.core.DomQuery = Ext.DomQuery = function(){
         
         select : document.querySelectorAll ? function(path, root, type) {
             root = root || document;
-            if (!Ext.DomQuery.isXml(root)) {
-            try {
-                var cs = root.querySelectorAll(path);
-                return Ext.Array.toArray(cs);
-            }
-            catch (ex) {}
+            
+            if (!Ext.DomQuery.isXml(root) && !(Ext.isSafari3 && !Ext.isStrict)) { 
+                try {
+                    
+                    var isDocumentRoot = root.nodeType === 9,
+                        _path = path,
+                        _root = root;
+
+                    if (!isDocumentRoot && path.indexOf(',') === -1 && !startIdRe.test(path)) {
+                        _path = '#' + Ext.id(root) + ' ' + path;
+                        _root = root.parentNode;
+                    }
+                    return Ext.Array.toArray(_root.querySelectorAll(_path));
+                }
+                catch (e) {
+                }
             }
             return Ext.DomQuery.jsSelect.call(this, path, root, type);
         } : function(path, root, type) {
@@ -7353,8 +7674,8 @@ Ext.query = Ext.DomQuery.select;
         this.id = id || Ext.id(dom);
     };
 
-    var DH = Ext.core.DomHelper,
-    El = Ext.core.Element;
+    var DH = Ext.DomHelper,
+    El = Ext.Element;
 
 
     El.prototype = {
@@ -7501,7 +7822,7 @@ Ext.query = Ext.DomQuery.select;
             }
 
             
-            if (size === "" || size == "auto" || size === undefined || size === null) {
+            if (size === "" || size == "auto" || size == null) {
                 return size || '';
             }
 
@@ -7538,7 +7859,7 @@ Ext.query = Ext.DomQuery.select;
 
         
         contains: function(el) {
-            return ! el ? false: Ext.core.Element.isAncestor(this.dom, el.dom ? el.dom: el);
+            return ! el ? false: Ext.Element.isAncestor(this.dom, el.dom ? el.dom: el);
         },
 
         
@@ -7665,6 +7986,31 @@ Ext.query = Ext.DomQuery.select;
         return null;
     };
 
+    
+    ep.getById = (!Ext.isIE6 && !Ext.isIE7 && !Ext.isIE8) ? El.get :
+        function (id) {
+            var dom = this.dom,
+                cached, el, ret;
+
+            if (dom) {
+                el = dom.all[id];
+                if (el) {
+                    
+                    
+                    cached = EC[id];
+                    if (cached && cached.el) {
+                        ret = cached.el;
+                        ret.dom = el;
+                    } else {
+                        ret = El.addToCache(new El(el));
+                    }
+                    return ret;
+                }
+            }
+
+            return El.get(id);
+        };
+
     El.addToCache = function(el, id) {
         if (el) {
             id = id || el.id;
@@ -7796,7 +8142,7 @@ Ext.query = Ext.DomQuery.select;
 })();
 
 
-Ext.core.Element.addMethods({
+Ext.Element.addMethods({
     
     findParent : function(simpleSelector, maxDepth, returnEl) {
         var p = this.dom,
@@ -7818,7 +8164,7 @@ Ext.core.Element.addMethods({
         }
         return null;
     },
-    
+
     
     findParentNode : function(simpleSelector, maxDepth, returnEl) {
         var p = Ext.fly(this.dom.parentNode, '_internal');
@@ -7832,7 +8178,7 @@ Ext.core.Element.addMethods({
 
     
     select : function(selector) {
-        return Ext.core.Element.select(selector, false,  this.dom);
+        return Ext.Element.select(selector, false,  this.dom);
     },
 
     
@@ -7888,7 +8234,7 @@ Ext.core.Element.addMethods({
         if (!this.dom) {
             return null;
         }
-        
+
         var n = this.dom[start];
         while (n) {
             if (n.nodeType == 1 && (!selector || Ext.DomQuery.is(n, selector))) {
@@ -7901,7 +8247,7 @@ Ext.core.Element.addMethods({
 });
 
 
-Ext.core.Element.addMethods({
+Ext.Element.addMethods({
     
     appendChild : function(el) {
         return Ext.get(el).appendTo(this);
@@ -7966,9 +8312,9 @@ Ext.core.Element.addMethods({
             }
         }else{
             if (isAfter && !me.dom.nextSibling) {
-                rt = Ext.core.DomHelper.append(me.dom.parentNode, el, !returnDom);
+                rt = Ext.DomHelper.append(me.dom.parentNode, el, !returnDom);
             } else {
-                rt = Ext.core.DomHelper[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
+                rt = Ext.DomHelper[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
             }
         }
         return rt;
@@ -7990,13 +8336,13 @@ Ext.core.Element.addMethods({
             el = Ext.get(el);
             me.dom.parentNode.insertBefore(el, me.dom);
         }else{
-            el = Ext.core.DomHelper.insertBefore(me.dom, el);
+            el = Ext.DomHelper.insertBefore(me.dom, el);
         }
         
         delete Ext.cache[me.id];
         Ext.removeNode(me.dom);      
         me.id = Ext.id(me.dom = el);
-        Ext.core.Element.addToCache(me.isFlyweight ? new Ext.core.Element(me.dom) : me);     
+        Ext.Element.addToCache(me.isFlyweight ? new Ext.Element(me.dom) : me);     
         return me;
     },
     
@@ -8004,16 +8350,16 @@ Ext.core.Element.addMethods({
     createChild : function(config, insertBefore, returnDom) {
         config = config || {tag:'div'};
         if (insertBefore) {
-            return Ext.core.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
+            return Ext.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
         }
         else {
-            return Ext.core.DomHelper[!this.dom.firstChild ? 'insertFirst' : 'append'](this.dom, config,  returnDom !== true);
+            return Ext.DomHelper[!this.dom.firstChild ? 'insertFirst' : 'append'](this.dom, config,  returnDom !== true);
         }
     },
 
     
     wrap : function(config, returnDom) {
-        var newEl = Ext.core.DomHelper.insertBefore(this.dom, config || {tag: "div"}, !returnDom),
+        var newEl = Ext.DomHelper.insertBefore(this.dom, config || {tag: "div"}, !returnDom),
             d = newEl.dom || newEl;
 
         d.appendChild(this.dom);
@@ -8022,16 +8368,16 @@ Ext.core.Element.addMethods({
 
     
     insertHtml : function(where, html, returnEl) {
-        var el = Ext.core.DomHelper.insertHtml(where, this.dom, html);
+        var el = Ext.DomHelper.insertHtml(where, this.dom, html);
         return returnEl ? Ext.get(el) : el;
     }
 });
 
 
 (function(){
-    Ext.core.Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
     
-    var supports = Ext.supports,
+    var ELEMENT = Ext.Element,
+        supports = Ext.supports,
         view = document.defaultView,
         opacityRe = /alpha\(opacity=(.*)\)/i,
         trimRe = /^\s+|\s+$/g,
@@ -8058,16 +8404,26 @@ Ext.core.Element.addMethods({
         borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
         paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
         margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
-        data = Ext.core.Element.data;
+        data = ELEMENT.data;
+
+    ELEMENT.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
+
+    
+    
+    ELEMENT.inheritedProps = {
+        fontSize: 1,
+        fontStyle: 1,
+        opacity: 1
+    };
+
+    Ext.override(ELEMENT, {
 
-    Ext.override(Ext.core.Element, {
-        
         
         
         adjustWidth : function(width) {
             var me = this,
                 isNum = (typeof width == 'number');
-                
+
             if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
                width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
             }
@@ -8078,7 +8434,7 @@ Ext.core.Element.addMethods({
         adjustHeight : function(height) {
             var me = this,
                 isNum = (typeof height == "number");
-                
+
             if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
                height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
             }
@@ -8203,7 +8559,7 @@ Ext.core.Element.addMethods({
         },
 
         
-        getStyle : function(){
+        getStyle : function() {
             return view && view.getComputedStyle ?
                 function(prop){
                     var el = this.dom,
@@ -8212,49 +8568,74 @@ Ext.core.Element.addMethods({
                     if(el == document){
                         return null;
                     }
-                    prop = Ext.core.Element.normalize(prop);
+                    prop = ELEMENT.normalize(prop);
                     out = (v = el.style[prop]) ? v :
                            (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
-                           
+
                     
                     
                     if(prop == 'marginRight' && out != '0px' && !supports.RightMargin){
-                        cleaner = Ext.core.Element.getRightMarginFixCleaner(el);
+                        cleaner = ELEMENT.getRightMarginFixCleaner(el);
                         display = this.getStyle('display');
                         el.style.display = 'inline-block';
                         out = view.getComputedStyle(el, '').marginRight;
                         el.style.display = display;
                         cleaner();
                     }
-                    
+
                     if(prop == 'backgroundColor' && out == 'rgba(0, 0, 0, 0)' && !supports.TransparentColor){
                         out = 'transparent';
                     }
                     return out;
                 } :
-                function(prop){
+                function (prop) {
                     var el = this.dom,
                         m, cs;
 
                     if (el == document) {
                         return null;
                     }
-                    
-                    if (prop == 'opacity') {
-                        if (el.style.filter.match) {
-                            m = el.style.filter.match(opacityRe);
-                            if(m){
-                                var fv = parseFloat(m[1]);
-                                if(!isNaN(fv)){
-                                    return fv ? fv / 100 : 0;
+                    prop = ELEMENT.normalize(prop);
+
+                    do {
+                        if (prop == 'opacity') {
+                            if (el.style.filter.match) {
+                                m = el.style.filter.match(opacityRe);
+                                if(m){
+                                    var fv = parseFloat(m[1]);
+                                    if(!isNaN(fv)){
+                                        return fv ? fv / 100 : 0;
+                                    }
                                 }
                             }
+                            return 1;
                         }
-                        return 1;
-                    }
-                    prop = Ext.core.Element.normalize(prop);
-                    return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
-                };
+
+                        
+                        
+                        if (!Ext.isIE6) {
+                            return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
+                        }
+
+                        try {
+                            return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
+                        } catch (e) {
+                            
+                            
+                        }
+
+                        if (!ELEMENT.inheritedProps[prop]) {
+                            break;
+                        }
+
+                        el = el.parentNode;
+                        
+                        
+                        
+                    } while (el);
+
+                    return null;
+                }
         }(),
 
         
@@ -8298,7 +8679,7 @@ Ext.core.Element.addMethods({
                         me.setOpacity(value);
                     }
                     else {
-                        me.dom.style[Ext.core.Element.normalize(style)] = value;
+                        me.dom.style[ELEMENT.normalize(style)] = value;
                     }
                 }
             }
@@ -8360,7 +8741,7 @@ Ext.core.Element.addMethods({
             }
             return this;
         },
-        
+
         
         adjustDirect2DDimension: function(dimension) {
             var me = this,
@@ -8370,7 +8751,7 @@ Ext.core.Element.addMethods({
                 inlinePosition = dom.style['position'],
                 originIndex = dimension === 'width' ? 0 : 1,
                 floating;
-                
+
             if (display === 'inline') {
                 dom.style['display'] = 'inline-block';
             }
@@ -8380,16 +8761,16 @@ Ext.core.Element.addMethods({
             
             
             floating = (parseFloat(me.getStyle(dimension)) || parseFloat(dom.currentStyle.msTransformOrigin.split(' ')[originIndex]) * 2) % 1;
-            
+
             dom.style['position'] = inlinePosition;
-            
+
             if (display === 'inline') {
                 dom.style['display'] = inlineDisplay;
             }
 
             return floating;
         },
-        
+
         
         getHeight: function(contentHeight, preciseHeight) {
             var me = this,
@@ -8433,7 +8814,7 @@ Ext.core.Element.addMethods({
             }
             return height;
         },
-                
+
         
         getWidth: function(contentWidth, preciseWidth) {
             var me = this,
@@ -8448,7 +8829,7 @@ Ext.core.Element.addMethods({
                 overflow = style.overflow;
                 me.setStyle({overflow: 'hidden'});
             }
-            
+
             
             if (Ext.isOpera10_5) {
                 if (dom.parentNode.currentStyle.position === 'relative') {
@@ -8458,7 +8839,7 @@ Ext.core.Element.addMethods({
                     dom.parentNode.style.position = parentPosition;
                 }
                 width = Math.max(width || 0, dom.offsetWidth);
-            
+
             
             
             
@@ -8484,11 +8865,11 @@ Ext.core.Element.addMethods({
                     width++;
                 }
             }
-            
+
             if (contentWidth) {
                 width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
             }
-            
+
             if (Ext.isIEQuirks) {
                 me.setStyle({ overflow: overflow});
             }
@@ -8577,14 +8958,14 @@ Ext.core.Element.addMethods({
             if(data(dom, ISCLIPPED)){
                 data(dom, ISCLIPPED, false);
                 clip = data(dom, ORIGINALCLIP);
-                if(o.o){
-                    me.setStyle(OVERFLOW, o.o);
+                if(clip.o){
+                    me.setStyle(OVERFLOW, clip.o);
                 }
-                if(o.x){
-                    me.setStyle(OVERFLOWX, o.x);
+                if(clip.x){
+                    me.setStyle(OVERFLOWX, clip.x);
                 }
-                if(o.y){
-                    me.setStyle(OVERFLOWY, o.y);
+                if(clip.y){
+                    me.setStyle(OVERFLOWY, clip.y);
                 }
             }
             return me;
@@ -8608,10 +8989,10 @@ Ext.core.Element.addMethods({
         },
 
         margins : margins,
-        
+
         
         applyStyles : function(style){
-            Ext.core.DomHelper.applyStyles(this.dom, style);
+            Ext.DomHelper.applyStyles(this.dom, style);
             return this;
         },
 
@@ -8620,7 +9001,7 @@ Ext.core.Element.addMethods({
             var styles = {},
                 len = arguments.length,
                 i = 0, style;
-                
+
             for(; i < len; ++i) {
                 style = arguments[i];
                 styles[style] = this.getStyle(style);
@@ -8631,7 +9012,7 @@ Ext.core.Element.addMethods({
        
         boxWrap : function(cls){
             cls = cls || Ext.baseCSSPrefix + 'box';
-            var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + Ext.String.format(Ext.core.Element.boxMarkup, cls) + "</div>"));
+            var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + Ext.String.format(ELEMENT.boxMarkup, cls) + "</div>"));
             Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
             return el;
         },
@@ -8647,6 +9028,11 @@ Ext.core.Element.addMethods({
             width = me.adjustWidth(width);
             height = me.adjustHeight(height);
             if(!animate || !me.anim){
+                
+                
+                if (!Ext.isIEQuirks && (Ext.isIE6 || Ext.isIE7)) {
+                    me.dom.offsetTop;
+                }
                 me.dom.style.width = me.addUnits(width);
                 me.dom.style.height = me.addUnits(height);
             }
@@ -8681,7 +9067,7 @@ Ext.core.Element.addMethods({
         getComputedWidth : function(){
             var me = this,
                 w = Math.max(me.dom.offsetWidth, me.dom.clientWidth);
-                
+
             if(!w){
                 w = parseFloat(me.getStyle('width')) || 0;
                 if(!me.isBorderBox()){
@@ -8749,8 +9135,8 @@ Ext.core.Element.addMethods({
             
             if (isDoc) {
                 ret = {
-                    width : Ext.core.Element.getViewWidth(),
-                    height : Ext.core.Element.getViewHeight()
+                    width : ELEMENT.getViewWidth(),
+                    height : ELEMENT.getViewHeight()
                 };
 
             
@@ -8787,8 +9173,8 @@ Ext.core.Element.addMethods({
             
             if (isDoc) {
                 return {
-                    width : Ext.core.Element.getViewWidth(),
-                    height : Ext.core.Element.getViewHeight()
+                    width : ELEMENT.getViewWidth(),
+                    height : ELEMENT.getViewHeight()
                 };
             }
             
@@ -8825,14 +9211,28 @@ Ext.core.Element.addMethods({
         },
 
         
+        selectable : function() {
+            var me = this;
+            me.dom.unselectable = "off";
+            
+            me.on('selectstart', function (e) {
+                e.stopPropagation();
+                return true;
+            });
+            me.applyStyles("-moz-user-select: text; -khtml-user-select: text;");
+            me.removeCls(Ext.baseCSSPrefix + 'unselectable');
+            return me;
+        },
+
+        
         unselectable : function(){
             var me = this;
             me.dom.unselectable = "on";
 
             me.swallowEvent("selectstart", true);
-            me.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
+            me.applyStyles("-moz-user-select:-moz-none;-khtml-user-select:none;");
             me.addCls(Ext.baseCSSPrefix + 'unselectable');
-            
+
             return me;
         },
 
@@ -8856,21 +9256,21 @@ Ext.core.Element.addMethods({
 })();
 
 
-Ext.core.Element.VISIBILITY = 1;
+Ext.Element.VISIBILITY = 1;
 
-Ext.core.Element.DISPLAY = 2;
+Ext.Element.DISPLAY = 2;
 
 
-Ext.core.Element.OFFSETS = 3;
+Ext.Element.OFFSETS = 3;
 
 
-Ext.core.Element.ASCLASS = 4;
+Ext.Element.ASCLASS = 4;
 
 
-Ext.core.Element.visibilityCls = Ext.baseCSSPrefix + 'hide-nosize';
+Ext.Element.visibilityCls = Ext.baseCSSPrefix + 'hide-nosize';
 
-Ext.core.Element.addMethods(function(){
-    var El = Ext.core.Element,
+Ext.Element.addMethods(function(){
+    var El = Ext.Element,
         OPACITY = "opacity",
         VISIBILITY = "visibility",
         DISPLAY = "display",
@@ -9074,7 +9474,7 @@ Ext.core.Element.addMethods(function(){
     };
 }());
 
-Ext.applyIf(Ext.core.Element.prototype, {
+Ext.applyIf(Ext.Element.prototype, {
     
     animate: function(config) {
         var me = this;
@@ -9152,7 +9552,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
     },
 
     
-    slideIn: function(anchor, obj, slideOut) { 
+    slideIn: function(anchor, obj, slideOut) {
         var me = this,
             elStyle = me.dom.style,
             beforeAnim, wrapAnim;
@@ -9170,13 +9570,13 @@ Ext.applyIf(Ext.core.Element.prototype, {
             }
 
             box = me.getBox();
-            if ((anchor == 't' || anchor == 'b') && box.height == 0) {
+            if ((anchor == 't' || anchor == 'b') && box.height === 0) {
                 box.height = me.dom.scrollHeight;
             }
-            else if ((anchor == 'l' || anchor == 'r') && box.width == 0) {
+            else if ((anchor == 'l' || anchor == 'r') && box.width === 0) {
                 box.width = me.dom.scrollWidth;
             }
-            
+
             position = me.getPositioning();
             me.setSize(box.width, box.height);
 
@@ -9340,7 +9740,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
                     if (obj.useDisplay) {
                         me.setDisplayed(false);
                     } else {
-                        me.hide();   
+                        me.hide();
                     }
                 }
                 else {
@@ -9348,7 +9748,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
                     me.setPositioning(position);
                 }
                 if (wrap.dom) {
-                    wrap.dom.parentNode.insertBefore(me.dom, wrap.dom); 
+                    wrap.dom.parentNode.insertBefore(me.dom, wrap.dom);
                     wrap.remove();
                 }
                 me.setSize(box.width, box.height);
@@ -9378,14 +9778,13 @@ Ext.applyIf(Ext.core.Element.prototype, {
         return me;
     },
 
-    
+
     
     slideOut: function(anchor, o) {
         return this.slideIn(anchor, o, true);
     },
 
     
-
     puff: function(obj) {
         var me = this,
             beforeAnim;
@@ -9417,7 +9816,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
                     } else {
                         me.hide();
                     }
-                    me.clearOpacity();  
+                    me.clearOpacity();
                     me.setPositioning(position);
                     me.setStyle({fontSize: fontSize});
                 }
@@ -9440,7 +9839,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
     switchOff: function(obj) {
         var me = this,
             beforeAnim;
-        
+
         obj = Ext.applyIf(obj || {}, {
             easing: 'ease-in',
             duration: 500,
@@ -9480,7 +9879,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
                     me.setDisplayed(false);
                 } else {
                     me.hide();
-                }  
+                }
                 me.clearOpacity();
                 me.setPositioning(position);
                 me.setSize(size);
@@ -9498,7 +9897,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
         return me;
     },
 
-   
+    
     frame : function(color, count, obj){
         var me = this,
             beforeAnim;
@@ -9624,7 +10023,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
         return me;
     },
 
-     
+    
     highlight: function(color, o) {
         var me = this,
             dom = me.dom,
@@ -9635,7 +10034,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
         lns = o.listeners || {};
         attr = o.attr || 'backgroundColor';
         from[attr] = color || 'ffff9c';
-        
+
         if (!o.to) {
             to = {};
             to[attr] = o.endColor || me.getColor(attr, 'ffffff', '');
@@ -9643,14 +10042,14 @@ Ext.applyIf(Ext.core.Element.prototype, {
         else {
             to = o.to;
         }
-        
+
         
         o.listeners = Ext.apply(Ext.apply({}, lns), {
             beforeanimate: function() {
                 restore = dom.style[attr];
                 me.clearOpacity();
                 me.show();
-                
+
                 event = lns.beforeanimate;
                 if (event) {
                     fn = event.fn || event;
@@ -9661,7 +10060,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
                 if (dom) {
                     dom.style[attr] = restore;
                 }
-                
+
                 event = lns.afteranimate;
                 if (event) {
                     fn = event.fn || event;
@@ -9688,7 +10087,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
         return me;
     },
 
-   
+    
     fadeIn: function(o) {
         this.animate(Ext.apply({}, o, {
             opacity: 1
@@ -9696,7 +10095,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
         return this;
     },
 
-   
+    
     fadeOut: function(o) {
         this.animate(Ext.apply({}, o, {
             opacity: 0
@@ -9704,7 +10103,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
         return this;
     },
 
-   
+    
     scale: function(w, h, o) {
         this.animate(Ext.apply({}, o, {
             width: w,
@@ -9713,7 +10112,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
         return this;
     },
 
-   
+    
     shift: function(config) {
         this.animate(config);
         return this;
@@ -9721,7 +10120,7 @@ Ext.applyIf(Ext.core.Element.prototype, {
 });
 
 
-Ext.applyIf(Ext.core.Element, {
+Ext.applyIf(Ext.Element, {
     unitRe: /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
     camelRe: /(-[a-z])/gi,
     opacityRe: /alpha\(opacity=(.*)\)/i,
@@ -9733,7 +10132,7 @@ Ext.applyIf(Ext.core.Element, {
     margins: {l: 'margin-left', r: 'margin-right', t: 'margin-top', b: 'margin-bottom'},
 
     
-    addUnits : Ext.core.Element.prototype.addUnits,
+    addUnits : Ext.Element.prototype.addUnits,
 
     
     parseBox : function(box) {
@@ -9864,7 +10263,7 @@ Ext.CompositeElementLite = function(els, root){
     
     this.elements = [];
     this.add(els, root);
-    this.el = new Ext.core.Element.Flyweight();
+    this.el = new Ext.Element.Flyweight();
 };
 
 Ext.CompositeElementLite.prototype = {
@@ -9896,7 +10295,7 @@ Ext.CompositeElementLite.prototype = {
             return this;
         }
         if(typeof els == "string"){
-            els = Ext.core.Element.selectorFunction(els, root);
+            els = Ext.Element.selectorFunction(els, root);
         }else if(els.isComposite){
             els = els.elements;
         }else if(!Ext.isIterable(els)){
@@ -9919,7 +10318,7 @@ Ext.CompositeElementLite.prototype = {
         for(i = 0; i < len; i++) {
             e = els[i];
             if(e){
-                Ext.core.Element.prototype[fn].apply(me.getElement(e), args);
+                Ext.Element.prototype[fn].apply(me.getElement(e), args);
             }
         }
         return me;
@@ -9991,7 +10390,7 @@ Ext.CompositeElementLite.prototype = {
                 els[els.length] = me.transformElement(el);
             }
         });
-        
+
         me.elements = els;
         return me;
     },
@@ -10028,7 +10427,7 @@ Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addLi
 
 Ext.CompositeElementLite.importElementMethods = function() {
     var fnName,
-        ElProto = Ext.core.Element.prototype,
+        ElProto = Ext.Element.prototype,
         CelProto = Ext.CompositeElementLite.prototype;
 
     for (fnName in ElProto) {
@@ -10046,14 +10445,14 @@ Ext.CompositeElementLite.importElementMethods = function() {
 Ext.CompositeElementLite.importElementMethods();
 
 if(Ext.DomQuery){
-    Ext.core.Element.selectorFunction = Ext.DomQuery.select;
+    Ext.Element.selectorFunction = Ext.DomQuery.select;
 }
 
 
-Ext.core.Element.select = function(selector, root){
+Ext.Element.select = function(selector, root){
     var els;
     if(typeof selector == "string"){
-        els = Ext.core.Element.selectorFunction(selector, root);
+        els = Ext.Element.selectorFunction(selector, root);
     }else if(selector.length !== undefined){
         els = selector;
     }else{
@@ -10061,7 +10460,7 @@ Ext.core.Element.select = function(selector, root){
     return new Ext.CompositeElementLite(els);
 };
 
-Ext.select = Ext.core.Element.select;
+Ext.select = Ext.Element.select;
 
 
 Ext.util.DelayedTask = function(fn, scope, args) {
@@ -10294,6 +10693,7 @@ Ext.EventManager = {
 
         if(window.attachEvent){
             
+            
             if (window != top) {
                 return false;
             }
@@ -10398,9 +10798,9 @@ Ext.EventManager = {
     getId : function(element) {
         var skipGarbageCollection = false,
             id;
-    
+
         element = Ext.getDom(element);
-    
+
         if (element === document || element === window) {
             id = element === document ? Ext.documentId : Ext.windowId;
         }
@@ -10411,9 +10811,9 @@ Ext.EventManager = {
         if (element && (element.getElementById || element.navigator)) {
             skipGarbageCollection = true;
         }
-    
+
         if (!Ext.cache[id]){
-            Ext.core.Element.addToCache(new Ext.core.Element(element), id);
+            Ext.Element.addToCache(new Ext.Element(element), id);
             if (skipGarbageCollection) {
                 Ext.cache[id].skipGarbageCollection = true;
             }
@@ -10694,7 +11094,7 @@ Ext.EventManager = {
         if (!element) {
             return [];
         }
-        
+
         var eventCache = this.getElementEventCache(element);
         return eventCache[eventName] || (eventCache[eventName] = []);
     },
@@ -10829,8 +11229,8 @@ Ext.EventManager = {
     
     fireResize: function(){
         var me = this,
-            w = Ext.core.Element.getViewWidth(),
-            h = Ext.core.Element.getViewHeight();
+            w = Ext.Element.getViewWidth(),
+            h = Ext.Element.getViewHeight();
 
          
          if(me.curHeight != h || me.curWidth != w){
@@ -10928,66 +11328,107 @@ Ext.EventManager.un = Ext.EventManager.removeListener;
 
         html = bd.parentNode;
 
+        function add (c) {
+            cls.push(baseCSSPrefix + c);
+        }
+
         
         if (Ext.isIE) {
-            cls.push(baseCSSPrefix + 'ie');
-        }
-        if (Ext.isIE6) {
-            cls.push(baseCSSPrefix + 'ie6');
-        }
-        if (Ext.isIE7) {
-            cls.push(baseCSSPrefix + 'ie7');
-        }
-        if (Ext.isIE8) {
-            cls.push(baseCSSPrefix + 'ie8');
-        }
-        if (Ext.isIE9) {
-            cls.push(baseCSSPrefix + 'ie9');
+            add('ie');
+
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            if (Ext.isIE6) {
+                add('ie6');
+            } else { 
+                add('ie7p');
+
+                if (Ext.isIE7) {
+                    add('ie7');
+                } else {
+                    add('ie8p');
+
+                    if (Ext.isIE8) {
+                        add('ie8');
+                    } else {
+                        add('ie9p');
+
+                        if (Ext.isIE9) {
+                            add('ie9');
+                        }
+                    }
+                }
+            }
+
+            if (Ext.isIE6 || Ext.isIE7) {
+                add('ie7m');
+            }
+            if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8) {
+                add('ie8m');
+            }
+            if (Ext.isIE7 || Ext.isIE8) {
+                add('ie78');
+            }
         }
         if (Ext.isGecko) {
-            cls.push(baseCSSPrefix + 'gecko');
-        }
-        if (Ext.isGecko3) {
-            cls.push(baseCSSPrefix + 'gecko3');
-        }
-        if (Ext.isGecko4) {
-            cls.push(baseCSSPrefix + 'gecko4');
+            add('gecko');
+            if (Ext.isGecko3) {
+                add('gecko3');
+            }
+            if (Ext.isGecko4) {
+                add('gecko4');
+            }
+            if (Ext.isGecko5) {
+                add('gecko5');
+            }
         }
         if (Ext.isOpera) {
-            cls.push(baseCSSPrefix + 'opera');
+            add('opera');
         }
         if (Ext.isWebKit) {
-            cls.push(baseCSSPrefix + 'webkit');
+            add('webkit');
         }
         if (Ext.isSafari) {
-            cls.push(baseCSSPrefix + 'safari');
-        }
-        if (Ext.isSafari2) {
-            cls.push(baseCSSPrefix + 'safari2');
-        }
-        if (Ext.isSafari3) {
-            cls.push(baseCSSPrefix + 'safari3');
-        }
-        if (Ext.isSafari4) {
-            cls.push(baseCSSPrefix + 'safari4');
+            add('safari');
+            if (Ext.isSafari2) {
+                add('safari2');
+            }
+            if (Ext.isSafari3) {
+                add('safari3');
+            }
+            if (Ext.isSafari4) {
+                add('safari4');
+            }
+            if (Ext.isSafari5) {
+                add('safari5');
+            }
         }
         if (Ext.isChrome) {
-            cls.push(baseCSSPrefix + 'chrome');
+            add('chrome');
         }
         if (Ext.isMac) {
-            cls.push(baseCSSPrefix + 'mac');
+            add('mac');
         }
         if (Ext.isLinux) {
-            cls.push(baseCSSPrefix + 'linux');
+            add('linux');
         }
         if (!Ext.supports.CSS3BorderRadius) {
-            cls.push(baseCSSPrefix + 'nbr');
+            add('nbr');
         }
         if (!Ext.supports.CSS3LinearGradient) {
-            cls.push(baseCSSPrefix + 'nlg');
+            add('nlg');
         }
         if (!Ext.scopeResetCSS) {
-            cls.push(baseCSSPrefix + 'reset');
+            add('reset');
         }
 
         
@@ -11002,9 +11443,6 @@ Ext.EventManager.un = Ext.EventManager.removeListener;
             htmlCls.push(baseCSSPrefix + (Ext.isBorderBox ? 'border-box' : 'strict'));
             if (!Ext.isStrict) {
                 htmlCls.push(baseCSSPrefix + 'quirks');
-                if (Ext.isIE && !Ext.isStrict) {
-                    Ext.isIEQuirks = true;
-                }
             }
             Ext.fly(html, '_internal').addCls(htmlCls);
         }
@@ -11360,17 +11798,17 @@ Ext.define('Ext.EventObjectImpl', {
     getPageY: function(){
         return this.getY();
     },
-    
+
     
     getX: function() {
         return this.getXY()[0];
-    },    
-    
+    },
+
     
     getY: function() {
         return this.getXY()[1];
     },
-        
+
     
     getXY: function() {
         if (!this.xy) {
@@ -11399,7 +11837,7 @@ Ext.define('Ext.EventObjectImpl', {
     
     correctWheelDelta : function (delta) {
         var scale = this.WHEEL_SCALE,
-            ret = Math.round(delta / scale + 0.5);
+            ret = Math.round(delta / scale);
 
         if (!ret && delta) {
             ret = (delta < 0) ? -1 : 1; 
@@ -11721,10 +12159,10 @@ Ext.EventObject = new Ext.EventObjectImpl();
     var doc = document,
         activeElement = null,
         isCSS1 = doc.compatMode == "CSS1Compat",
-        ELEMENT = Ext.core.Element,
+        ELEMENT = Ext.Element,
         fly = function(el){
             if (!_fly) {
-                _fly = new Ext.core.Element.Flyweight();
+                _fly = new Ext.Element.Flyweight();
             }
             _fly.dom = el;
             return _fly;
@@ -11842,6 +12280,17 @@ Ext.EventObject = new Ext.EventObjectImpl();
             return ELEMENT.getXY(el)[0];
         },
 
+        getOffsetParent: function (el) {
+            el = Ext.getDom(el);
+            try {
+                
+                return el.offsetParent;
+            } catch (e) {
+                var body = document.body; 
+                return (el == body) ? null : body;
+            }
+        },
+
         getXY : function(el) {
             var p,
                 pe,
@@ -11854,7 +12303,7 @@ Ext.EventObject = new Ext.EventObjectImpl();
                 scroll,
                 hasAbsolute,
                 bd = (doc.body || doc.documentElement),
-                ret = [0,0];
+                ret;
 
             el = Ext.getDom(el);
 
@@ -11862,13 +12311,17 @@ Ext.EventObject = new Ext.EventObjectImpl();
                 hasAbsolute = fly(el).isStyle("position", "absolute");
 
                 if (el.getBoundingClientRect) {
-                    b = el.getBoundingClientRect();
-                    scroll = fly(document).getScroll();
-                    ret = [Math.round(b.left + scroll.left), Math.round(b.top + scroll.top)];
-                } else {
-                    p = el;
+                    try {
+                        b = el.getBoundingClientRect();
+                        scroll = fly(document).getScroll();
+                        ret = [ Math.round(b.left + scroll.left), Math.round(b.top + scroll.top) ];
+                    } catch (e) {
+                        
+                    }
+                }
 
-                    while (p) {
+                if (!ret) {
+                    for (p = el; p; p = ELEMENT.getOffsetParent(p)) {
                         pe = fly(p);
                         x += p.offsetLeft;
                         y += p.offsetTop;
@@ -11884,7 +12337,6 @@ Ext.EventObject = new Ext.EventObjectImpl();
                                 y += bt;
                             }
                         }
-                        p = p.offsetParent;
                     }
 
                     if (Ext.isSafari && hasAbsolute) {
@@ -11909,7 +12361,7 @@ Ext.EventObject = new Ext.EventObjectImpl();
                     ret = [x,y];
                 }
             }
-            return ret;
+            return ret || [0,0];
         },
 
         setXY : function(el, xy) {
@@ -11971,207 +12423,232 @@ Ext.EventObject = new Ext.EventObjectImpl();
 
 
 
-Ext.core.Element.addMethods({
+Ext.Element.addMethods((function(){
+    var focusRe = /button|input|textarea|select|object/;
+    return {
+        
+        monitorMouseLeave: function(delay, handler, scope) {
+            var me = this,
+                timer,
+                listeners = {
+                    mouseleave: function(e) {
+                        timer = setTimeout(Ext.Function.bind(handler, scope||me, [e]), delay);
+                    },
+                    mouseenter: function() {
+                        clearTimeout(timer);
+                    },
+                    freezeEvent: true
+                };
 
-    
-    monitorMouseLeave: function(delay, handler, scope) {
-        var me = this,
-            timer,
-            listeners = {
-                mouseleave: function(e) {
-                    timer = setTimeout(Ext.Function.bind(handler, scope||me, [e]), delay);
-                },
-                mouseenter: function() {
-                    clearTimeout(timer);
-                },
-                freezeEvent: true
-            };
+            me.on(listeners);
+            return listeners;
+        },
 
-        me.on(listeners);
-        return listeners;
-    },
+        
+        swallowEvent : function(eventName, preventDefault) {
+            var me = this;
+            function fn(e) {
+                e.stopPropagation();
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+            }
 
-    
-    swallowEvent : function(eventName, preventDefault) {
-        var me = this;
-        function fn(e) {
-            e.stopPropagation();
-            if (preventDefault) {
-                e.preventDefault();
+            if (Ext.isArray(eventName)) {
+                Ext.each(eventName, function(e) {
+                     me.on(e, fn);
+                });
+                return me;
             }
-        }
-        
-        if (Ext.isArray(eventName)) {
-            Ext.each(eventName, function(e) {
-                 me.on(e, fn);
-            });
+            me.on(eventName, fn);
             return me;
-        }
-        me.on(eventName, fn);
-        return me;
-    },
+        },
 
-    
-    relayEvent : function(eventName, observable) {
-        this.on(eventName, function(e) {
-            observable.fireEvent(eventName, e);
-        });
-    },
+        
+        relayEvent : function(eventName, observable) {
+            this.on(eventName, function(e) {
+                observable.fireEvent(eventName, e);
+            });
+        },
 
+        
+        clean : function(forceReclean) {
+            var me  = this,
+                dom = me.dom,
+                n   = dom.firstChild,
+                nx,
+                ni  = -1;
     
-    clean : function(forceReclean) {
-        var me  = this,
-            dom = me.dom,
-            n   = dom.firstChild,
-            nx,
-            ni  = -1;
-
-        if (Ext.core.Element.data(dom, 'isCleaned') && forceReclean !== true) {
-            return me;
-        }
+            if (Ext.Element.data(dom, 'isCleaned') && forceReclean !== true) {
+                return me;
+            }
 
-        while (n) {
-            nx = n.nextSibling;
-            if (n.nodeType == 3) {
-                
-                if (!(/\S/.test(n.nodeValue))) {
-                    dom.removeChild(n);
-                
-                } else if (nx && nx.nodeType == 3) {
-                    n.appendData(Ext.String.trim(nx.data));
-                    dom.removeChild(nx);
-                    nx = n.nextSibling;
+            while (n) {
+                nx = n.nextSibling;
+                if (n.nodeType == 3) {
+                    
+                    if (!(/\S/.test(n.nodeValue))) {
+                        dom.removeChild(n);
+                    
+                    } else if (nx && nx.nodeType == 3) {
+                        n.appendData(Ext.String.trim(nx.data));
+                        dom.removeChild(nx);
+                        nx = n.nextSibling;
+                        n.nodeIndex = ++ni;
+                    }
+                } else {
+                    
+                    Ext.fly(n).clean();
                     n.nodeIndex = ++ni;
                 }
-            } else {
-                
-                Ext.fly(n).clean();
-                n.nodeIndex = ++ni;
+                n = nx;
             }
-            n = nx;
-        }
 
-        Ext.core.Element.data(dom, 'isCleaned', true);
-        return me;
-    },
+            Ext.Element.data(dom, 'isCleaned', true);
+            return me;
+        },
 
-    
-    load : function(options) {
-        this.getLoader().load(options);
-        return this;
-    },
+        
+        load : function(options) {
+            this.getLoader().load(options);
+            return this;
+        },
 
+        
+        getLoader : function() {
+            var dom = this.dom,
+                data = Ext.Element.data,
+                loader = data(dom, 'loader');
     
-    getLoader : function() {
-        var dom = this.dom,
-            data = Ext.core.Element.data,
-            loader = data(dom, 'loader');
-            
-        if (!loader) {
-            loader = Ext.create('Ext.ElementLoader', {
-                target: this
-            });
-            data(dom, 'loader', loader);
-        }
-        return loader;
-    },
+            if (!loader) {
+                loader = Ext.create('Ext.ElementLoader', {
+                    target: this
+                });
+                data(dom, 'loader', loader);
+            }
+            return loader;
+        },
 
-    
-    update : function(html, loadScripts, callback) {
-        var me = this,
-            id,
-            dom,
-            interval;
-            
-        if (!me.dom) {
-            return me;
-        }
-        html = html || '';
-        dom = me.dom;
+        
+        update : function(html, loadScripts, callback) {
+            var me = this,
+                id,
+                dom,
+                interval;
 
-        if (loadScripts !== true) {
-            dom.innerHTML = html;
-            Ext.callback(callback, me);
-            return me;
-        }
+            if (!me.dom) {
+                return me;
+            }
+            html = html || '';
+            dom = me.dom;
 
-        id  = Ext.id();
-        html += '<span id="' + id + '"></span>';
-
-        interval = setInterval(function(){
-            if (!document.getElementById(id)) {
-                return false;    
-            }
-            clearInterval(interval);
-            var DOC    = document,
-                hd     = DOC.getElementsByTagName("head")[0],
-                re     = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig,
-                srcRe  = /\ssrc=([\'\"])(.*?)\1/i,
-                typeRe = /\stype=([\'\"])(.*?)\1/i,
-                match,
-                attrs,
-                srcMatch,
-                typeMatch,
-                el,
-                s;
+            if (loadScripts !== true) {
+                dom.innerHTML = html;
+                Ext.callback(callback, me);
+                return me;
+            }
 
-            while ((match = re.exec(html))) {
-                attrs = match[1];
-                srcMatch = attrs ? attrs.match(srcRe) : false;
-                if (srcMatch && srcMatch[2]) {
-                   s = DOC.createElement("script");
-                   s.src = srcMatch[2];
-                   typeMatch = attrs.match(typeRe);
-                   if (typeMatch && typeMatch[2]) {
-                       s.type = typeMatch[2];
-                   }
-                   hd.appendChild(s);
-                } else if (match[2] && match[2].length > 0) {
-                    if (window.execScript) {
-                       window.execScript(match[2]);
-                    } else {
-                       window.eval(match[2]);
+            id  = Ext.id();
+            html += '<span id="' + id + '"></span>';
+
+            interval = setInterval(function(){
+                if (!document.getElementById(id)) {
+                    return false;
+                }
+                clearInterval(interval);
+                var DOC    = document,
+                    hd     = DOC.getElementsByTagName("head")[0],
+                    re     = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig,
+                    srcRe  = /\ssrc=([\'\"])(.*?)\1/i,
+                    typeRe = /\stype=([\'\"])(.*?)\1/i,
+                    match,
+                    attrs,
+                    srcMatch,
+                    typeMatch,
+                    el,
+                    s;
+
+                while ((match = re.exec(html))) {
+                    attrs = match[1];
+                    srcMatch = attrs ? attrs.match(srcRe) : false;
+                    if (srcMatch && srcMatch[2]) {
+                       s = DOC.createElement("script");
+                       s.src = srcMatch[2];
+                       typeMatch = attrs.match(typeRe);
+                       if (typeMatch && typeMatch[2]) {
+                           s.type = typeMatch[2];
+                       }
+                       hd.appendChild(s);
+                    } else if (match[2] && match[2].length > 0) {
+                        if (window.execScript) {
+                           window.execScript(match[2]);
+                        } else {
+                           window.eval(match[2]);
+                        }
                     }
                 }
-            }
-            
-            el = DOC.getElementById(id);
-            if (el) {
-                Ext.removeNode(el);
-            }
-            Ext.callback(callback, me);
-        }, 20);
-        dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, '');
-        return me;
-    },
 
-    
-    removeAllListeners : function() {
-        this.removeAnchor();
-        Ext.EventManager.removeAll(this.dom);
-        return this;
-    },
+                el = DOC.getElementById(id);
+                if (el) {
+                    Ext.removeNode(el);
+                }
+                Ext.callback(callback, me);
+            }, 20);
+            dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, '');
+            return me;
+        },
 
+        
+        removeAllListeners : function() {
+            this.removeAnchor();
+            Ext.EventManager.removeAll(this.dom);
+            return this;
+        },
     
-    createProxy : function(config, renderTo, matchBox) {
-        config = (typeof config == 'object') ? config : {tag : "div", cls: config};
+        
+        getScopeParent: function(){
+            var parent = this.dom.parentNode;
+            return Ext.scopeResetCSS ? parent.parentNode : parent;
+        },
 
-        var me = this,
-            proxy = renderTo ? Ext.core.DomHelper.append(renderTo, config, true) :
-                               Ext.core.DomHelper.insertBefore(me.dom, config, true);
+        
+        createProxy : function(config, renderTo, matchBox) {
+            config = (typeof config == 'object') ? config : {tag : "div", cls: config};
 
-        proxy.setVisibilityMode(Ext.core.Element.DISPLAY);
-        proxy.hide();
-        if (matchBox && me.setBox && me.getBox) { 
-           proxy.setBox(me.getBox());
-        }
-        return proxy;
-    }
-});
-Ext.core.Element.prototype.clearListeners = Ext.core.Element.prototype.removeAllListeners;
+            var me = this,
+                proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) :
+                                   Ext.DomHelper.insertBefore(me.dom, config, true);
+
+            proxy.setVisibilityMode(Ext.Element.DISPLAY);
+            proxy.hide();
+            if (matchBox && me.setBox && me.getBox) { 
+               proxy.setBox(me.getBox());
+            }
+            return proxy;
+        },
+    
+        
+        focusable: function(){
+            var dom = this.dom,
+                nodeName = dom.nodeName.toLowerCase(),
+                canFocus = false,
+                hasTabIndex = !isNaN(dom.tabIndex);
+            
+            if (!dom.disabled) {
+                if (focusRe.test(nodeName)) {
+                    canFocus = true;
+                } else {
+                    canFocus = nodeName == 'a' ? dom.href || hasTabIndex : hasTabIndex;
+                }
+            }
+            return canFocus && this.isVisible(true);
+        }    
+    };
+})());
+Ext.Element.prototype.clearListeners = Ext.Element.prototype.removeAllListeners;
 
 
-Ext.core.Element.addMethods({
+Ext.Element.addMethods({
     
     getAnchorXY : function(anchor, local, s){
         
@@ -12181,8 +12658,8 @@ Ext.core.Element.addMethods({
 
         var me = this,
             vp = me.dom == document.body || me.dom == document,
-            w = s.width || vp ? Ext.core.Element.getViewWidth() : me.getWidth(),
-            h = s.height || vp ? Ext.core.Element.getViewHeight() : me.getHeight(),
+            w = s.width || vp ? Ext.Element.getViewWidth() : me.getWidth(),
+            h = s.height || vp ? Ext.Element.getViewHeight() : me.getHeight(),
             xy,
             r = Math.round,
             o = me.getXY(),
@@ -12250,7 +12727,7 @@ Ext.core.Element.addMethods({
 
     
     getAnchor : function(){
-        var data = Ext.core.Element.data,
+        var data = Ext.Element.data,
             dom = this.dom;
             if (!dom) {
                 return;
@@ -12296,8 +12773,8 @@ Ext.core.Element.addMethods({
             w,
             h,
             r,
-            dw = Ext.core.Element.getViewWidth() -10, 
-            dh = Ext.core.Element.getViewHeight()-10, 
+            dw = Ext.Element.getViewWidth() -10, 
+            dh = Ext.Element.getViewHeight()-10, 
             p1y,
             p1x,
             p2y,
@@ -12434,7 +12911,7 @@ Ext.core.Element.addMethods({
 
 (function(){
 
-var ELEMENT = Ext.core.Element,
+var ELEMENT = Ext.Element,
     LEFT = "left",
     RIGHT = "right",
     TOP = "top",
@@ -12445,7 +12922,7 @@ var ELEMENT = Ext.core.Element,
     AUTO = "auto",
     ZINDEX = "z-index";
 
-Ext.override(Ext.core.Element, {
+Ext.override(Ext.Element, {
     
     getX : function(){
         return ELEMENT.getX(this.dom);
@@ -12742,14 +13219,14 @@ Ext.override(Ext.core.Element, {
         var me = this,
             isBody = me.dom === document.body,
             scroll, pos, top, left, width, height;
-            
+
         
         if (isBody) {
             scroll = me.getScroll();
             left = scroll.left;
             top = scroll.top;
-            width = Ext.core.Element.getViewportWidth();
-            height = Ext.core.Element.getViewportHeight();
+            width = Ext.Element.getViewportWidth();
+            height = Ext.Element.getViewportHeight();
         }
         else {
             pos = me.getXY();
@@ -12767,8 +13244,8 @@ Ext.override(Ext.core.Element, {
         var me = this,
             el = me.dom,
             isDoc = el === document.body,
-            w = isDoc ? Ext.core.Element.getViewWidth()  : el.offsetWidth,
-            h = isDoc ? Ext.core.Element.getViewHeight() : el.offsetHeight,
+            w = isDoc ? Ext.Element.getViewWidth()  : el.offsetWidth,
+            h = isDoc ? Ext.Element.getViewHeight() : el.offsetHeight,
             xy = me.getXY(),
             t = xy[1],
             r = xy[0] + w,
@@ -12820,7 +13297,7 @@ Ext.override(Ext.core.Element, {
 })();
 
 
-Ext.override(Ext.core.Element, {
+Ext.override(Ext.Element, {
     
     isScrollable : function(){
         var dom = this.dom;
@@ -12954,7 +13431,7 @@ Ext.override(Ext.core.Element, {
     }
 });
 
-Ext.core.Element.addMethods(
+Ext.Element.addMethods(
     function() {
         var VISIBILITY      = "visibility",
             DISPLAY         = "display",
@@ -12962,7 +13439,7 @@ Ext.core.Element.addMethods(
             NONE            = "none",
             XMASKED         = Ext.baseCSSPrefix + "masked",
             XMASKEDRELATIVE = Ext.baseCSSPrefix + "masked-relative",
-            data            = Ext.core.Element.data;
+            data            = Ext.Element.data;
 
         return {
             
@@ -12990,7 +13467,7 @@ Ext.core.Element.addMethods(
 
             
             enableDisplayMode : function(display) {
-                this.setVisibilityMode(Ext.core.Element.DISPLAY);
+                this.setVisibilityMode(Ext.Element.DISPLAY);
 
                 if (!Ext.isEmpty(display)) {
                     data(this.dom, 'originalDisplay', display);
@@ -13004,7 +13481,7 @@ Ext.core.Element.addMethods(
                 var me  = this,
                     dom = me.dom,
                     setExpression = dom.style.setExpression,
-                    dh  = Ext.core.DomHelper,
+                    dh  = Ext.DomHelper,
                     EXTELMASKMSG = Ext.baseCSSPrefix + "mask-msg",
                     el,
                     mask;
@@ -13110,7 +13587,7 @@ Ext.core.Element.addMethods(
     }()
 );
 
-Ext.core.Element.addMethods({
+Ext.Element.addMethods({
     
     addKeyListener : function(key, fn, scope){
         var config;
@@ -13150,7 +13627,7 @@ Ext.apply(Ext.CompositeElementLite.prototype, {
             return this;
         }
         if(typeof els == "string"){
-            els = Ext.core.Element.selectorFunction(els, root);
+            els = Ext.Element.selectorFunction(els, root);
         }
         var yels = this.elements;
         Ext.each(els, function(e) {
@@ -13197,35 +13674,29 @@ Ext.apply(Ext.CompositeElementLite.prototype, {
 
 
 Ext.CompositeElement = Ext.extend(Ext.CompositeElementLite, {
-    
+
     constructor : function(els, root){
         this.elements = [];
         this.add(els, root);
     },
-    
+
     
     getElement : function(el){
         
         return el;
     },
-    
+
     
     transformElement : function(el){
         return Ext.get(el);
     }
-
-    
-
-    
-
-    
 });
 
 
-Ext.core.Element.select = function(selector, unique, root){
+Ext.Element.select = function(selector, unique, root){
     var els;
     if(typeof selector == "string"){
-        els = Ext.core.Element.selectorFunction(selector, root);
+        els = Ext.Element.selectorFunction(selector, root);
     }else if(selector.length !== undefined){
         els = selector;
     }else{
@@ -13234,7 +13705,7 @@ Ext.core.Element.select = function(selector, unique, root){
 };
 
 
-Ext.select = Ext.core.Element.select;
+Ext.select = Ext.Element.select;
 
 
 
@@ -13293,7 +13764,7 @@ Ext.define('Ext.util.Observable', {
     },
 
     
-    eventOptionsRe : /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|element|vertical|horizontal)$/,
+    eventOptionsRe : /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|element|vertical|horizontal|freezeEvent)$/,
 
     
     addManagedListener : function(item, ename, fn, scope, options) {
@@ -13354,41 +13825,51 @@ Ext.define('Ext.util.Observable', {
     },
 
     
-    fireEvent: function() {
-        var me = this,
-            args = Ext.Array.toArray(arguments),
-            ename = args[0].toLowerCase(),
-            ret = true,
-            event = me.events[ename],
-            queue = me.eventQueue,
-            parent;
+    fireEvent: function(eventName) {
+        var name = eventName.toLowerCase(),
+            events = this.events,
+            event = events && events[name],
+            bubbles = event && event.bubble;
 
-        if (me.eventsSuspended === true) {
-            if (queue) {
-                queue.push(args);
-            }
-        } else if (event && event !== true) {
-            if (event.bubble) {
-                if (event.fire.apply(event, args.slice(1)) === false) {
-                    return false;
+        return this.continueFireEvent(name, Ext.Array.slice(arguments, 1), bubbles);
+    },
+
+    
+    continueFireEvent: function(eventName, args, bubbles) {
+        var target = this,
+            queue, event,
+            ret = true;
+
+        do {
+            if (target.eventsSuspended === true) {
+                if ((queue = target.eventQueue)) {
+                    queue.push([eventName, args, bubbles]);
                 }
-                parent = me.getBubbleTarget && me.getBubbleTarget();
-                if (parent && parent.isObservable) {
-                    if (!parent.events[ename] || parent.events[ename] === true || !parent.events[ename].bubble) {
-                        parent.enableBubble(ename);
+                return ret;
+            } else {
+                event = target.events[eventName];
+                
+                
+                if (event && event != true) {
+                    if ((ret = event.fire.apply(event, args)) === false) {
+                        break;
                     }
-                    return parent.fireEvent.apply(parent, args);
-                }                
-            }
-            else {
-                args.shift();
-                ret = event.fire.apply(event, args);
+                }
             }
-        }
+        } while (bubbles && (target = target.getBubbleParent()));
         return ret;
     },
 
     
+    getBubbleParent: function(){
+        var me = this, parent = me.getBubbleTarget && me.getBubbleTarget();
+        if (parent && parent.isObservable) {
+            return parent;
+        }
+        return null;
+    },
+
+    
     addListener: function(ename, fn, scope, options) {
         var me = this,
             config,
@@ -13473,14 +13954,14 @@ Ext.define('Ext.util.Observable', {
 
         this.managedListeners = [];
     },
-    
+
     
     removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
         if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
             managedListener.item.un(managedListener.ename, managedListener.fn, managedListener.scope);
             if (!isClear) {
                 Ext.Array.remove(this.managedListeners, managedListener);
-            }    
+            }
         }
     },
 
@@ -13491,12 +13972,12 @@ Ext.define('Ext.util.Observable', {
             args,
             len,
             i;
-            
+
             me.events = me.events || {};
         if (Ext.isString(o)) {
             args = arguments;
             i = args.length;
-            
+
             while (i--) {
                 me.events[args[i]] = me.events[args[i]] || true;
             }
@@ -13522,15 +14003,16 @@ Ext.define('Ext.util.Observable', {
     
     resumeEvents: function() {
         var me = this,
-            queued = me.eventQueue || [];
+            queued = me.eventQueue;
 
         me.eventsSuspended = false;
         delete me.eventQueue;
 
-        Ext.each(queued,
-        function(e) {
-            me.fireEvent.apply(me, e);
-        });
+        if (queued) {
+            Ext.each(queued, function(e) {
+                me.continueFireEvent.apply(me, e);
+            });
+        }
     },
 
     
@@ -13776,7 +14258,7 @@ Ext.define('Ext.util.Animate', {
     }
 }, function(){
     
-    Ext.applyIf(Ext.core.Element.prototype, this.prototype);
+    Ext.applyIf(Ext.Element.prototype, this.prototype);
     
     Ext.CompositeElementLite.importElementMethods();
 });
@@ -13913,15 +14395,435 @@ Ext.define('Ext.state.Provider', {
     }
 });
 
-Ext.define('Ext.util.HashMap', {
+Ext.define('Ext.ComponentQuery', {
+    singleton: true,
+    uses: ['Ext.ComponentManager']
+}, function() {
+
+    var cq = this,
+
+        
+        
+        filterFnPattern = [
+            'var r = [],',
+                'i = 0,',
+                'it = items,',
+                'l = it.length,',
+                'c;',
+            'for (; i < l; i++) {',
+                'c = it[i];',
+                'if (c.{0}) {',
+                   'r.push(c);',
+                '}',
+            '}',
+            'return r;'
+        ].join(''),
+
+        filterItems = function(items, operation) {
+            
+            
+            
+            return operation.method.apply(this, [ items ].concat(operation.args));
+        },
+
+        getItems = function(items, mode) {
+            var result = [],
+                i = 0,
+                length = items.length,
+                candidate,
+                deep = mode !== '>';
+                
+            for (; i < length; i++) {
+                candidate = items[i];
+                if (candidate.getRefItems) {
+                    result = result.concat(candidate.getRefItems(deep));
+                }
+            }
+            return result;
+        },
+
+        getAncestors = function(items) {
+            var result = [],
+                i = 0,
+                length = items.length,
+                candidate;
+            for (; i < length; i++) {
+                candidate = items[i];
+                while (!!(candidate = (candidate.ownerCt || candidate.floatParent))) {
+                    result.push(candidate);
+                }
+            }
+            return result;
+        },
+
+        
+        filterByXType = function(items, xtype, shallow) {
+            if (xtype === '*') {
+                return items.slice();
+            }
+            else {
+                var result = [],
+                    i = 0,
+                    length = items.length,
+                    candidate;
+                for (; i < length; i++) {
+                    candidate = items[i];
+                    if (candidate.isXType(xtype, shallow)) {
+                        result.push(candidate);
+                    }
+                }
+                return result;
+            }
+        },
+
+        
+        filterByClassName = function(items, className) {
+            var EA = Ext.Array,
+                result = [],
+                i = 0,
+                length = items.length,
+                candidate;
+            for (; i < length; i++) {
+                candidate = items[i];
+                if (candidate.el ? candidate.el.hasCls(className) : EA.contains(candidate.initCls(), className)) {
+                    result.push(candidate);
+                }
+            }
+            return result;
+        },
+
+        
+        filterByAttribute = function(items, property, operator, value) {
+            var result = [],
+                i = 0,
+                length = items.length,
+                candidate;
+            for (; i < length; i++) {
+                candidate = items[i];
+                if (!value ? !!candidate[property] : (String(candidate[property]) === value)) {
+                    result.push(candidate);
+                }
+            }
+            return result;
+        },
+
+        
+        filterById = function(items, id) {
+            var result = [],
+                i = 0,
+                length = items.length,
+                candidate;
+            for (; i < length; i++) {
+                candidate = items[i];
+                if (candidate.getItemId() === id) {
+                    result.push(candidate);
+                }
+            }
+            return result;
+        },
+
+        
+        filterByPseudo = function(items, name, value) {
+            return cq.pseudos[name](items, value);
+        },
+
+        
+        
+        modeRe = /^(\s?([>\^])\s?|\s|$)/,
+
+        
+        tokenRe = /^(#)?([\w\-]+|\*)(?:\((true|false)\))?/,
+
+        matchers = [{
+            
+            re: /^\.([\w\-]+)(?:\((true|false)\))?/,
+            method: filterByXType
+        },{
+            
+            re: /^(?:[\[](?:@)?([\w\-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]])/,
+            method: filterByAttribute
+        }, {
+            
+            re: /^#([\w\-]+)/,
+            method: filterById
+        }, {
+            
+            re: /^\:([\w\-]+)(?:\(((?:\{[^\}]+\})|(?:(?!\{)[^\s>\/]*?(?!\})))\))?/,
+            method: filterByPseudo
+        }, {
+            
+            re: /^(?:\{([^\}]+)\})/,
+            method: filterFnPattern
+        }];
 
     
+    
+    cq.Query = Ext.extend(Object, {
+        constructor: function(cfg) {
+            cfg = cfg || {};
+            Ext.apply(this, cfg);
+        },
 
+        
+        
+        
+        
+        
+        
+        
+        
+        execute : function(root) {
+            var operations = this.operations,
+                i = 0,
+                length = operations.length,
+                operation,
+                workingItems;
+
+            
+            if (!root) {
+                workingItems = Ext.ComponentManager.all.getArray();
+            }
+            
+            else if (Ext.isArray(root)) {
+                workingItems = root;
+            }
+
+            
+            
+            for (; i < length; i++) {
+                operation = operations[i];
+
+                
+                
+                
+                
+                
+                
+                if (operation.mode === '^') {
+                    workingItems = getAncestors(workingItems || [root]);
+                }
+                else if (operation.mode) {
+                    workingItems = getItems(workingItems || [root], operation.mode);
+                }
+                else {
+                    workingItems = filterItems(workingItems || getItems([root]), operation);
+                }
+
+                
+                
+                if (i === length -1) {
+                    return workingItems;
+                }
+            }
+            return [];
+        },
+
+        is: function(component) {
+            var operations = this.operations,
+                components = Ext.isArray(component) ? component : [component],
+                originalLength = components.length,
+                lastOperation = operations[operations.length-1],
+                ln, i;
+
+            components = filterItems(components, lastOperation);
+            if (components.length === originalLength) {
+                if (operations.length > 1) {
+                    for (i = 0, ln = components.length; i < ln; i++) {
+                        if (Ext.Array.indexOf(this.execute(), components[i]) === -1) {
+                            return false;
+                        }
+                    }
+                }
+                return true;
+            }
+            return false;
+        }
+    });
+
+    Ext.apply(this, {
+
+        
+        cache: {},
+
+        
+        pseudos: {
+            not: function(components, selector){
+                var CQ = Ext.ComponentQuery,
+                    i = 0,
+                    length = components.length,
+                    results = [],
+                    index = -1,
+                    component;
+                
+                for(; i < length; ++i) {
+                    component = components[i];
+                    if (!CQ.is(component, selector)) {
+                        results[++index] = component;
+                    }
+                }
+                return results;
+            },
+            last: function(components) {
+                return components[components.length - 1];
+            }
+        },
+
+        
+        query: function(selector, root) {
+            var selectors = selector.split(','),
+                length = selectors.length,
+                i = 0,
+                results = [],
+                noDupResults = [], 
+                dupMatcher = {}, 
+                query, resultsLn, cmp;
+
+            for (; i < length; i++) {
+                selector = Ext.String.trim(selectors[i]);
+                query = this.cache[selector];
+                if (!query) {
+                    this.cache[selector] = query = this.parse(selector);
+                }
+                results = results.concat(query.execute(root));
+            }
+
+            
+            
+            if (length > 1) {
+                resultsLn = results.length;
+                for (i = 0; i < resultsLn; i++) {
+                    cmp = results[i];
+                    if (!dupMatcher[cmp.id]) {
+                        noDupResults.push(cmp);
+                        dupMatcher[cmp.id] = true;
+                    }
+                }
+                results = noDupResults;
+            }
+            return results;
+        },
+
+        
+        is: function(component, selector) {
+            if (!selector) {
+                return true;
+            }
+            var query = this.cache[selector];
+            if (!query) {
+                this.cache[selector] = query = this.parse(selector);
+            }
+            return query.is(component);
+        },
+
+        parse: function(selector) {
+            var operations = [],
+                length = matchers.length,
+                lastSelector,
+                tokenMatch,
+                matchedChar,
+                modeMatch,
+                selectorMatch,
+                i, matcher, method;
+
+            
+            
+            
+            while (selector && lastSelector !== selector) {
+                lastSelector = selector;
+
+                
+                tokenMatch = selector.match(tokenRe);
+
+                if (tokenMatch) {
+                    matchedChar = tokenMatch[1];
+
+                    
+                    if (matchedChar === '#') {
+                        operations.push({
+                            method: filterById,
+                            args: [Ext.String.trim(tokenMatch[2])]
+                        });
+                    }
+                    
+                    
+                    else if (matchedChar === '.') {
+                        operations.push({
+                            method: filterByClassName,
+                            args: [Ext.String.trim(tokenMatch[2])]
+                        });
+                    }
+                    
+                    
+                    else {
+                        operations.push({
+                            method: filterByXType,
+                            args: [Ext.String.trim(tokenMatch[2]), Boolean(tokenMatch[3])]
+                        });
+                    }
+
+                    
+                    selector = selector.replace(tokenMatch[0], '');
+                }
+
+                
+                
+                
+                while (!(modeMatch = selector.match(modeRe))) {
+                    
+                    
+                    for (i = 0; selector && i < length; i++) {
+                        matcher = matchers[i];
+                        selectorMatch = selector.match(matcher.re);
+                        method = matcher.method;
+
+                        
+                        
+                        
+                        if (selectorMatch) {
+                            operations.push({
+                                method: Ext.isString(matcher.method)
+                                    
+                                    
+                                    
+                                    ? Ext.functionFactory('items', Ext.String.format.apply(Ext.String, [method].concat(selectorMatch.slice(1))))
+                                    : matcher.method,
+                                args: selectorMatch.slice(1)
+                            });
+                            selector = selector.replace(selectorMatch[0], '');
+                            break; 
+                        }
+                    }
+                }
+
+                
+                
+                
+                
+                if (modeMatch[1]) { 
+                    operations.push({
+                        mode: modeMatch[2]||modeMatch[1]
+                    });
+                    selector = selector.replace(modeMatch[0], '');
+                }
+            }
+
+            
+            
+            return new cq.Query({
+                operations: operations
+            });
+        }
+    });
+});
+
+Ext.define('Ext.util.HashMap', {
     mixins: {
         observable: 'Ext.util.Observable'
     },
 
     
+
+    
     constructor: function(config) {
         config = config || {};
         
@@ -13979,7 +14881,7 @@ Ext.define('Ext.util.HashMap', {
         }
 
         if (me.containsKey(key)) {
-            me.replace(key, value);
+            return me.replace(key, value);
         }
 
         data = me.getData(key, value);
@@ -14128,11240 +15030,10068 @@ Ext.define('Ext.util.HashMap', {
 });
 
 
+Ext.define('Ext.state.Manager', {
+    singleton: true,
+    requires: ['Ext.state.Provider'],
+    constructor: function() {
+        this.provider = Ext.create('Ext.state.Provider');
+    },
+    
+    
+    
+    setProvider : function(stateProvider){
+        this.provider = stateProvider;
+    },
 
-Ext.define('Ext.Template', {
+    
+    get : function(key, defaultValue){
+        return this.provider.get(key, defaultValue);
+    },
 
     
+     set : function(key, value){
+        this.provider.set(key, value);
+    },
 
-    requires: ['Ext.core.DomHelper', 'Ext.util.Format'],
+    
+    clear : function(key){
+        this.provider.clear(key);
+    },
 
-    statics: {
-        
-        from: function(el, config) {
-            el = Ext.getDom(el);
-            return new this(el.value || el.innerHTML, config || '');
-        }
+    
+    getProvider : function(){
+        return this.provider;
+    }
+});
+
+Ext.define('Ext.state.Stateful', {
+
+    
+
+   mixins: {
+        observable: 'Ext.util.Observable'
     },
 
+    requires: ['Ext.state.Manager'],
+
     
 
-    constructor: function(html) {
-        var me = this,
-            args = arguments,
-            buffer = [],
-            i = 0,
-            length = args.length,
-            value;
+    
+    stateful: true,
 
-        me.initialConfig = {};
+    
 
-        if (length > 1) {
-            for (; i < length; i++) {
-                value = args[i];
-                if (typeof value == 'object') {
-                    Ext.apply(me.initialConfig, value);
-                    Ext.apply(me, value);
-                } else {
-                    buffer.push(value);
-                }
-            }
-            html = buffer.join('');
-        } else {
-            if (Ext.isArray(html)) {
-                buffer.push(html.join(''));
-            } else {
-                buffer.push(html);
-            }
+    
+
+    
+    saveDelay: 100,
+
+    autoGenIdRe: /^((\w+-)|(ext-comp-))\d{4,}$/i,
+
+    constructor: function(config) {
+        var me = this;
+
+        config = config || {};
+        if (Ext.isDefined(config.stateful)) {
+            me.stateful = config.stateful;
+        }
+        if (Ext.isDefined(config.saveDelay)) {
+            me.saveDelay = config.saveDelay;
         }
+        me.stateId = me.stateId || config.stateId;
 
-        
-        me.html = buffer.join('');
+        if (!me.stateEvents) {
+            me.stateEvents = [];
+        }
+        if (config.stateEvents) {
+            me.stateEvents.concat(config.stateEvents);
+        }
+        this.addEvents(
+            
+            'beforestaterestore',
 
-        if (me.compiled) {
-            me.compile();
+            
+            'staterestore',
+
+            
+            'beforestatesave',
+
+            
+            'statesave'
+        );
+        me.mixins.observable.constructor.call(me);
+        if (me.stateful !== false) {
+            me.initStateEvents();
+            me.initState();
         }
     },
-    isTemplate: true,
+
     
-    disableFormats: false,
+    initStateEvents: function() {
+        this.addStateEvents(this.stateEvents);
+    },
 
-    re: /\{([\w\-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
     
-    applyTemplate: function(values) {
+    addStateEvents: function(events){
+        if (!Ext.isArray(events)) {
+            events = [events];
+        }
+
         var me = this,
-            useFormat = me.disableFormats !== true,
-            fm = Ext.util.Format,
-            tpl = me;
+            i = 0,
+            len = events.length;
 
-        if (me.compiled) {
-            return me.compiled(values);
-        }
-        function fn(m, name, format, args) {
-            if (format && useFormat) {
-                if (args) {
-                    args = [values[name]].concat(Ext.functionFactory('return ['+ args +'];')());
-                } else {
-                    args = [values[name]];
-                }
-                if (format.substr(0, 5) == "this.") {
-                    return tpl[format.substr(5)].apply(tpl, args);
-                }
-                else {
-                    return fm[format].apply(fm, args);
-                }
-            }
-            else {
-                return values[name] !== undefined ? values[name] : "";
-            }
+        for (; i < len; ++i) {
+            me.on(events[i], me.onStateChange, me);
         }
-        return me.html.replace(me.re, fn);
     },
 
     
-    set: function(html, compile) {
-        var me = this;
-        me.html = html;
-        me.compiled = null;
-        return compile ? me.compile() : me;
+    onStateChange: function(){
+        var me = this,
+            delay = me.saveDelay;
+
+        if (delay > 0) {
+            if (!me.stateTask) {
+                me.stateTask = Ext.create('Ext.util.DelayedTask', me.saveState, me);
+            }
+            me.stateTask.delay(me.saveDelay);
+        } else {
+            me.saveState();
+        }
     },
 
-    compileARe: /\\/g,
-    compileBRe: /(\r\n|\n)/g,
-    compileCRe: /'/g,
-    /**
-     * Compiles the template into an internal function, eliminating the RegEx overhead.
-     * @return {Ext.Template} this
-     */
-    compile: function() {
+    
+    saveState: function() {
         var me = this,
-            fm = Ext.util.Format,
-            useFormat = me.disableFormats !== true,
-            body, bodyReturn;
+            id,
+            state;
 
-        function fn(m, name, format, args) {
-            if (format && useFormat) {
-                args = args ? ',' + args: "";
-                if (format.substr(0, 5) != "this.") {
-                    format = "fm." + format + '(';
-                }
-                else {
-                    format = 'this.' + format.substr(5) + '(';
+        if (me.stateful !== false) {
+            id = me.getStateId();
+            if (id) {
+                state = me.getState();
+                if (me.fireEvent('beforestatesave', me, state) !== false) {
+                    Ext.state.Manager.set(id, state);
+                    me.fireEvent('statesave', me, state);
                 }
             }
-            else {
-                args = '';
-                format = "(values['" + name + "'] == undefined ? '' : ";
-            }
-            return "'," + format + "values['" + name + "']" + args + ") ,'";
         }
+    },
 
-        bodyReturn = me.html.replace(me.compileARe, '\\\\').replace(me.compileBRe, '\\n').replace(me.compileCRe, "\\'").replace(me.re, fn);
-        body = "this.compiled = function(values){ return ['" + bodyReturn + "'].join('');};";
-        eval(body);
-        return me;
+    
+    getState: function(){
+        return null;
     },
 
-    /**
-     * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
-     * @param {Mixed} el The context element
-     * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
-     * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
-     * @return {HTMLElement/Ext.core.Element} The new node or Element
-     */
-    insertFirst: function(el, values, returnElement) {
-        return this.doInsert('afterBegin', el, values, returnElement);
+    
+    applyState: function(state) {
+        if (state) {
+            Ext.apply(this, state);
+        }
     },
 
-    /**
-     * Applies the supplied values to the template and inserts the new node(s) before el.
-     * @param {Mixed} el The context element
-     * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
-     * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
-     * @return {HTMLElement/Ext.core.Element} The new node or Element
-     */
-    insertBefore: function(el, values, returnElement) {
-        return this.doInsert('beforeBegin', el, values, returnElement);
+    
+    getStateId: function() {
+        var me = this,
+            id = me.stateId;
+
+        if (!id) {
+            id = me.autoGenIdRe.test(String(me.id)) ? null : me.id;
+        }
+        return id;
     },
 
-    /**
-     * Applies the supplied values to the template and inserts the new node(s) after el.
-     * @param {Mixed} el The context element
-     * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
-     * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
-     * @return {HTMLElement/Ext.core.Element} The new node or Element
-     */
-    insertAfter: function(el, values, returnElement) {
-        return this.doInsert('afterEnd', el, values, returnElement);
+    
+    initState: function(){
+        var me = this,
+            id = me.getStateId(),
+            state;
+
+        if (me.stateful !== false) {
+            if (id) {
+                state = Ext.state.Manager.get(id);
+                if (state) {
+                    state = Ext.apply({}, state);
+                    if (me.fireEvent('beforestaterestore', me, state) !== false) {
+                        me.applyState(state);
+                        me.fireEvent('staterestore', me, state);
+                    }
+                }
+            }
+        }
     },
 
-    /**
-     * Applies the supplied <code>values</code> to the template and appends
-     * the new node(s) to the specified <code>el</code>.
-     * <p>For example usage {@link #Template see the constructor}.</p>
-     * @param {Mixed} el The context element
-     * @param {Object/Array} values
-     * The template values. Can be an array if the params are numeric (i.e. <code>{0}</code>)
-     * or an object (i.e. <code>{foo: 'bar'}</code>).
-     * @param {Boolean} returnElement (optional) true to return an Ext.core.Element (defaults to undefined)
-     * @return {HTMLElement/Ext.core.Element} The new node or Element
-     */
-    append: function(el, values, returnElement) {
-        return this.doInsert('beforeEnd', el, values, returnElement);
+    
+    savePropToState: function (propName, state, stateName) {
+        var me = this,
+            value = me[propName],
+            config = me.initialConfig;
+
+        if (me.hasOwnProperty(propName)) {
+            if (!config || config[propName] !== value) {
+                if (state) {
+                    state[stateName || propName] = value;
+                }
+                return true;
+            }
+        }
+        return false;
     },
 
-    doInsert: function(where, el, values, returnEl) {
-        el = Ext.getDom(el);
-        var newNode = Ext.core.DomHelper.insertHtml(where, el, this.applyTemplate(values));
-        return returnEl ? Ext.get(newNode, true) : newNode;
+    savePropsToState: function (propNames, state) {
+        var me = this;
+        Ext.each(propNames, function (propName) {
+            me.savePropToState(propName, state);
+        });
+        return state;
     },
 
-    /**
-     * Applies the supplied values to the template and overwrites the content of el with the new node(s).
-     * @param {Mixed} el The context element
-     * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
-     * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
-     * @return {HTMLElement/Ext.core.Element} The new node or Element
-     */
-    overwrite: function(el, values, returnElement) {
-        el = Ext.getDom(el);
-        el.innerHTML = this.applyTemplate(values);
-        return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
+    
+    destroy: function(){
+        var task = this.stateTask;
+        if (task) {
+            task.cancel();
+        }
+        this.clearListeners();
+
     }
-}, function() {
 
-    /**
-     * Alias for {@link #applyTemplate}
-     * Returns an HTML fragment of this template with the specified <code>values</code> applied.
-     * @param {Object/Array} values
-     * The template values. Can be an array if the params are numeric (i.e. <code>{0}</code>)
-     * or an object (i.e. <code>{foo: 'bar'}</code>).
-     * @return {String} The HTML fragment
-     * @member Ext.Template
-     * @method apply
-     */
-    this.createAlias('apply', 'applyTemplate');
 });
 
-/**
- * @class Ext.ComponentQuery
- * @extends Object
- * @singleton
- *
- * Provides searching of Components within Ext.ComponentManager (globally) or a specific
- * Ext.container.Container on the document with a similar syntax to a CSS selector.
- *
- * Components can be retrieved by using their {@link Ext.Component xtype} with an optional . prefix
- *
- * - `component` or `.component`
- * - `gridpanel` or `.gridpanel`
- *
- * An itemId or id must be prefixed with a #
- *
- * - `#myContainer`
- *
- * Attributes must be wrapped in brackets
- *
- * - `component[autoScroll]`
- * - `panel[title="Test"]`
- *
- * Member expressions from candidate Components may be tested. If the expression returns a *truthy* value,
- * the candidate Component will be included in the query:
- *
- *     var disabledFields = myFormPanel.query("{isDisabled()}");
- *
- * Pseudo classes may be used to filter results in the same way as in {@link Ext.DomQuery DomQuery}:
- *
- *     // Function receives array and returns a filtered array.
- *     Ext.ComponentQuery.pseudos.invalid = function(items) {
- *         var i = 0, l = items.length, c, result = [];
- *         for (; i < l; i++) {
- *             if (!(c = items[i]).isValid()) {
- *                 result.push(c);
- *             }
- *         }
- *         return result;
- *     };
- *      
- *     var invalidFields = myFormPanel.query('field:invalid');
- *     if (invalidFields.length) {
- *         invalidFields[0].getEl().scrollIntoView(myFormPanel.body);
- *         for (var i = 0, l = invalidFields.length; i < l; i++) {
- *             invalidFields[i].getEl().frame("red");
- *         }
- *     }
- *
- * Default pseudos include:
- *
- * - not
- *
- * Queries return an array of components.
- * Here are some example queries.
- *
- *     // retrieve all Ext.Panels in the document by xtype
- *     var panelsArray = Ext.ComponentQuery.query('panel');
- *
- *     // retrieve all Ext.Panels within the container with an id myCt
- *     var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');
- *
- *     // retrieve all direct children which are Ext.Panels within myCt
- *     var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');
- *
- *     // retrieve all grids and trees
- *     var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');
- *
- * For easy access to queries based from a particular Container see the {@link Ext.container.Container#query},
- * {@link Ext.container.Container#down} and {@link Ext.container.Container#child} methods. Also see
- * {@link Ext.Component#up}.
- */
-Ext.define('Ext.ComponentQuery', {
-    singleton: true,
-    uses: ['Ext.ComponentManager']
-}, function() {
 
-    var cq = this,
+Ext.define('Ext.AbstractManager', {
 
-        // A function source code pattern with a placeholder which accepts an expression which yields a truth value when applied
-        // as a member on each item in the passed array.
-        filterFnPattern = [
-            'var r = [],',
-                'i = 0,',
-                'it = items,',
-                'l = it.length,',
-                'c;',
-            'for (; i < l; i++) {',
-                'c = it[i];',
-                'if (c.{0}) {',
-                   'r.push(c);',
-                '}',
-            '}',
-            'return r;'
-        ].join(''),
+    
 
-        filterItems = function(items, operation) {
-            // Argument list for the operation is [ itemsArray, operationArg1, operationArg2...]
-            // The operation's method loops over each item in the candidate array and
-            // returns an array of items which match its criteria
-            return operation.method.apply(this, [ items ].concat(operation.args));
-        },
+    requires: ['Ext.util.HashMap'],
 
-        getItems = function(items, mode) {
-            var result = [],
-                i = 0,
-                length = items.length,
-                candidate,
-                deep = mode !== '>';
-                
-            for (; i < length; i++) {
-                candidate = items[i];
-                if (candidate.getRefItems) {
-                    result = result.concat(candidate.getRefItems(deep));
-                }
-            }
-            return result;
-        },
+    
 
-        getAncestors = function(items) {
-            var result = [],
-                i = 0,
-                length = items.length,
-                candidate;
-            for (; i < length; i++) {
-                candidate = items[i];
-                while (!!(candidate = (candidate.ownerCt || candidate.floatParent))) {
-                    result.push(candidate);
-                }
-            }
-            return result;
-        },
+    typeName: 'type',
 
-        // Filters the passed candidate array and returns only items which match the passed xtype
-        filterByXType = function(items, xtype, shallow) {
-            if (xtype === '*') {
-                return items.slice();
-            }
-            else {
-                var result = [],
-                    i = 0,
-                    length = items.length,
-                    candidate;
-                for (; i < length; i++) {
-                    candidate = items[i];
-                    if (candidate.isXType(xtype, shallow)) {
-                        result.push(candidate);
-                    }
-                }
-                return result;
-            }
-        },
+    constructor: function(config) {
+        Ext.apply(this, config || {});
 
-        // Filters the passed candidate array and returns only items which have the passed className
-        filterByClassName = function(items, className) {
-            var EA = Ext.Array,
-                result = [],
-                i = 0,
-                length = items.length,
-                candidate;
-            for (; i < length; i++) {
-                candidate = items[i];
-                if (candidate.el ? candidate.el.hasCls(className) : EA.contains(candidate.initCls(), className)) {
-                    result.push(candidate);
-                }
-            }
-            return result;
-        },
+        
+        this.all = Ext.create('Ext.util.HashMap');
 
-        // Filters the passed candidate array and returns only items which have the specified property match
-        filterByAttribute = function(items, property, operator, value) {
-            var result = [],
-                i = 0,
-                length = items.length,
-                candidate;
-            for (; i < length; i++) {
-                candidate = items[i];
-                if (!value ? !!candidate[property] : (String(candidate[property]) === value)) {
-                    result.push(candidate);
-                }
-            }
-            return result;
-        },
+        this.types = {};
+    },
 
-        // Filters the passed candidate array and returns only items which have the specified itemId or id
-        filterById = function(items, id) {
-            var result = [],
-                i = 0,
-                length = items.length,
-                candidate;
-            for (; i < length; i++) {
-                candidate = items[i];
-                if (candidate.getItemId() === id) {
-                    result.push(candidate);
-                }
-            }
-            return result;
-        },
+    
+    get : function(id) {
+        return this.all.get(id);
+    },
 
-        // Filters the passed candidate array and returns only items which the named pseudo class matcher filters in
-        filterByPseudo = function(items, name, value) {
-            return cq.pseudos[name](items, value);
-        },
+    
+    register: function(item) {
+        this.all.add(item);
+    },
 
-        // Determines leading mode
-        // > for direct child, and ^ to switch to ownerCt axis
-        modeRe = /^(\s?([>\^])\s?|\s|$)/,
+    
+    unregister: function(item) {
+        this.all.remove(item);
+    },
 
-        // Matches a token with possibly (true|false) appended for the "shallow" parameter
-        tokenRe = /^(#)?([\w\-]+|\*)(?:\((true|false)\))?/,
+    
+    registerType : function(type, cls) {
+        this.types[type] = cls;
+        cls[this.typeName] = type;
+    },
 
-        matchers = [{
-            // Checks for .xtype with possibly (true|false) appended for the "shallow" parameter
-            re: /^\.([\w\-]+)(?:\((true|false)\))?/,
-            method: filterByXType
-        },{
-            // checks for [attribute=value]
-            re: /^(?:[\[](?:@)?([\w\-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]])/,
-            method: filterByAttribute
-        }, {
-            // checks for #cmpItemId
-            re: /^#([\w\-]+)/,
-            method: filterById
-        }, {
-            // checks for :<pseudo_class>(<selector>)
-            re: /^\:([\w\-]+)(?:\(((?:\{[^\}]+\})|(?:(?!\{)[^\s>\/]*?(?!\})))\))?/,
-            method: filterByPseudo
-        }, {
-            // checks for {<member_expression>}
-            re: /^(?:\{([^\}]+)\})/,
-            method: filterFnPattern
-        }];
+    
+    isRegistered : function(type){
+        return this.types[type] !== undefined;
+    },
 
-    /**
-     * @class Ext.ComponentQuery.Query
-     * @extends Object
-     * @private
-     */
-    cq.Query = Ext.extend(Object, {
-        constructor: function(cfg) {
-            cfg = cfg || {};
-            Ext.apply(this, cfg);
-        },
+    
+    create: function(config, defaultType) {
+        var type        = config[this.typeName] || config.type || defaultType,
+            Constructor = this.types[type];
 
-        /**
-         * @private
-         * Executes this Query upon the selected root.
-         * The root provides the initial source of candidate Component matches which are progressively
-         * filtered by iterating through this Query's operations cache.
-         * If no root is provided, all registered Components are searched via the ComponentManager.
-         * root may be a Container who's descendant Components are filtered
-         * root may be a Component with an implementation of getRefItems which provides some nested Components such as the
-         * docked items within a Panel.
-         * root may be an array of candidate Components to filter using this Query.
-         */
-        execute : function(root) {
-            var operations = this.operations,
-                i = 0,
-                length = operations.length,
-                operation,
-                workingItems;
 
-            // no root, use all Components in the document
-            if (!root) {
-                workingItems = Ext.ComponentManager.all.getArray();
-            }
-            // Root is a candidate Array
-            else if (Ext.isArray(root)) {
-                workingItems = root;
-            }
-
-            // We are going to loop over our operations and take care of them
-            // one by one.
-            for (; i < length; i++) {
-                operation = operations[i];
-
-                // The mode operation requires some custom handling.
-                // All other operations essentially filter down our current
-                // working items, while mode replaces our current working
-                // items by getting children from each one of our current
-                // working items. The type of mode determines the type of
-                // children we get. (e.g. > only gets direct children)
-                if (operation.mode === '^') {
-                    workingItems = getAncestors(workingItems || [root]);
-                }
-                else if (operation.mode) {
-                    workingItems = getItems(workingItems || [root], operation.mode);
-                }
-                else {
-                    workingItems = filterItems(workingItems || getItems([root]), operation);
-                }
+        return new Constructor(config);
+    },
 
-                // If this is the last operation, it means our current working
-                // items are the final matched items. Thus return them!
-                if (i === length -1) {
-                    return workingItems;
+    
+    onAvailable : function(id, fn, scope){
+        var all = this.all,
+            item;
+        
+        if (all.containsKey(id)) {
+            item = all.get(id);
+            fn.call(scope || item, item);
+        } else {
+            all.on('add', function(map, key, item){
+                if (key == id) {
+                    fn.call(scope || item, item);
+                    all.un('add', fn, scope);
                 }
-            }
-            return [];
-        },
+            });
+        }
+    },
+    
+    
+    each: function(fn, scope){
+        this.all.each(fn, scope || this);    
+    },
+    
+    
+    getCount: function(){
+        return this.all.getCount();
+    }
+});
 
-        is: function(component) {
-            var operations = this.operations,
-                components = Ext.isArray(component) ? component : [component],
-                originalLength = components.length,
-                lastOperation = operations[operations.length-1],
-                ln, i;
 
-            components = filterItems(components, lastOperation);
-            if (components.length === originalLength) {
-                if (operations.length > 1) {
-                    for (i = 0, ln = components.length; i < ln; i++) {
-                        if (Ext.Array.indexOf(this.execute(), components[i]) === -1) {
-                            return false;
-                        }
-                    }
-                }
-                return true;
-            }
-            return false;
+Ext.define('Ext.ComponentManager', {
+    extend: 'Ext.AbstractManager',
+    alternateClassName: 'Ext.ComponentMgr',
+    
+    singleton: true,
+    
+    typeName: 'xtype',
+    
+    
+    create: function(component, defaultType){
+        if (component instanceof Ext.AbstractComponent) {
+            return component;
         }
-    });
+        else if (Ext.isString(component)) {
+            return Ext.createByAlias('widget.' + component);
+        }
+        else {
+            var type = component.xtype || defaultType,
+                config = component;
+            
+            return Ext.createByAlias('widget.' + type, config);
+        }
+    },
 
-    Ext.apply(this, {
+    registerType: function(type, cls) {
+        this.types[type] = cls;
+        cls[this.typeName] = type;
+        cls.prototype[this.typeName] = type;
+    }
+});
 
-        // private cache of selectors and matching ComponentQuery.Query objects
-        cache: {},
+Ext.define('Ext.AbstractComponent', {
 
-        // private cache of pseudo class filter functions
-        pseudos: {
-            not: function(components, selector){
-                var CQ = Ext.ComponentQuery,
-                    i = 0,
-                    length = components.length,
-                    results = [],
-                    index = -1,
-                    component;
-                
-                for(; i < length; ++i) {
-                    component = components[i];
-                    if (!CQ.is(component, selector)) {
-                        results[++index] = component;
-                    }
-                }
-                return results;
-            }
-        },
+    
+    requires: [
+        'Ext.ComponentQuery',
+        'Ext.ComponentManager'
+    ],
 
-        /**
-         * Returns an array of matched Components from within the passed root object.
-         *
-         * This method filters returned Components in a similar way to how CSS selector based DOM
-         * queries work using a textual selector string.
-         *
-         * See class summary for details.
-         *
-         * @param {String} selector The selector string to filter returned Components
-         * @param {Ext.container.Container} root The Container within which to perform the query.
-         * If omitted, all Components within the document are included in the search.
-         * 
-         * This parameter may also be an array of Components to filter according to the selector.</p>
-         * @returns {[Ext.Component]} The matched Components.
-         * 
-         * @member Ext.ComponentQuery
-         */
-        query: function(selector, root) {
-            var selectors = selector.split(','),
-                length = selectors.length,
-                i = 0,
-                results = [],
-                noDupResults = [], 
-                dupMatcher = {}, 
-                query, resultsLn, cmp;
+    mixins: {
+        observable: 'Ext.util.Observable',
+        animate: 'Ext.util.Animate',
+        state: 'Ext.state.Stateful'
+    },
 
-            for (; i < length; i++) {
-                selector = Ext.String.trim(selectors[i]);
-                query = this.cache[selector];
-                if (!query) {
-                    this.cache[selector] = query = this.parse(selector);
-                }
-                results = results.concat(query.execute(root));
-            }
+    
+    
+    uses: [
+        'Ext.PluginManager',
+        'Ext.ComponentManager',
+        'Ext.Element',
+        'Ext.DomHelper',
+        'Ext.XTemplate',
+        'Ext.ComponentQuery',
+        'Ext.ComponentLoader',
+        'Ext.EventManager',
+        'Ext.layout.Layout',
+        'Ext.layout.component.Auto',
+        'Ext.LoadMask',
+        'Ext.ZIndexManager'
+    ],
 
-            // multiple selectors, potential to find duplicates
-            // lets filter them out.
-            if (length > 1) {
-                resultsLn = results.length;
-                for (i = 0; i < resultsLn; i++) {
-                    cmp = results[i];
-                    if (!dupMatcher[cmp.id]) {
-                        noDupResults.push(cmp);
-                        dupMatcher[cmp.id] = true;
-                    }
-                }
-                results = noDupResults;
-            }
-            return results;
-        },
+    statics: {
+        AUTO_ID: 1000
+    },
 
-        /**
-         * Tests whether the passed Component matches the selector string.
-         * @param {Ext.Component} component The Component to test
-         * @param {String} selector The selector string to test against.
-         * @return {Boolean} True if the Component matches the selector.
-         * @member Ext.ComponentQuery
-         */
-        is: function(component, selector) {
-            if (!selector) {
-                return true;
-            }
-            var query = this.cache[selector];
-            if (!query) {
-                this.cache[selector] = query = this.parse(selector);
-            }
-            return query.is(component);
-        },
+    
 
-        parse: function(selector) {
-            var operations = [],
-                length = matchers.length,
-                lastSelector,
-                tokenMatch,
-                matchedChar,
-                modeMatch,
-                selectorMatch,
-                i, matcher, method;
+    isComponent: true,
 
-            // We are going to parse the beginning of the selector over and
-            // over again, slicing off the selector any portions we converted into an
-            // operation, until it is an empty string.
-            while (selector && lastSelector !== selector) {
-                lastSelector = selector;
+    getAutoId: function() {
+        return ++Ext.AbstractComponent.AUTO_ID;
+    },
 
-                // First we check if we are dealing with a token like #, * or an xtype
-                tokenMatch = selector.match(tokenRe);
 
-                if (tokenMatch) {
-                    matchedChar = tokenMatch[1];
+    
 
-                    // If the token is prefixed with a # we push a filterById operation to our stack
-                    if (matchedChar === '#') {
-                        operations.push({
-                            method: filterById,
-                            args: [Ext.String.trim(tokenMatch[2])]
-                        });
-                    }
-                    // If the token is prefixed with a . we push a filterByClassName operation to our stack
-                    // FIXME: Not enabled yet. just needs \. adding to the tokenRe prefix
-                    else if (matchedChar === '.') {
-                        operations.push({
-                            method: filterByClassName,
-                            args: [Ext.String.trim(tokenMatch[2])]
-                        });
-                    }
-                    // If the token is a * or an xtype string, we push a filterByXType
-                    // operation to the stack.
-                    else {
-                        operations.push({
-                            method: filterByXType,
-                            args: [Ext.String.trim(tokenMatch[2]), Boolean(tokenMatch[3])]
-                        });
-                    }
+    
 
-                    // Now we slice of the part we just converted into an operation
-                    selector = selector.replace(tokenMatch[0], '');
-                }
+    
 
-                // If the next part of the query is not a space or > or ^, it means we
-                // are going to check for more things that our current selection
-                // has to comply to.
-                while (!(modeMatch = selector.match(modeRe))) {
-                    // Lets loop over each type of matcher and execute it
-                    // on our current selector.
-                    for (i = 0; selector && i < length; i++) {
-                        matcher = matchers[i];
-                        selectorMatch = selector.match(matcher.re);
-                        method = matcher.method;
+    
 
-                        // If we have a match, add an operation with the method
-                        // associated with this matcher, and pass the regular
-                        // expression matches are arguments to the operation.
-                        if (selectorMatch) {
-                            operations.push({
-                                method: Ext.isString(matcher.method)
-                                    // Turn a string method into a function by formatting the string with our selector matche expression
-                                    // A new method is created for different match expressions, eg {id=='textfield-1024'}
-                                    // Every expression may be different in different selectors.
-                                    ? Ext.functionFactory('items', Ext.String.format.apply(Ext.String, [method].concat(selectorMatch.slice(1))))
-                                    : matcher.method,
-                                args: selectorMatch.slice(1)
-                            });
-                            selector = selector.replace(selectorMatch[0], '');
-                            break; // Break on match
-                        }
-                    }
-                }
+    
 
-                // Now we are going to check for a mode change. This means a space
-                // or a > to determine if we are going to select all the children
-                // of the currently matched items, or a ^ if we are going to use the
-                // ownerCt axis as the candidate source.
-                if (modeMatch[1]) { // Assignment, and test for truthiness!
-                    operations.push({
-                        mode: modeMatch[2]||modeMatch[1]
-                    });
-                    selector = selector.replace(modeMatch[0], '');
-                }
-            }
+    
 
-            //  Now that we have all our operations in an array, we are going
-            // to create a new Query using these operations.
-            return new cq.Query({
-                operations: operations
-            });
-        }
-    });
-});
-/**
- * @class Ext.util.Filter
- * @extends Object
- * <p>Represents a filter that can be applied to a {@link Ext.util.MixedCollection MixedCollection}. Can either simply
- * filter on a property/value pair or pass in a filter function with custom logic. Filters are always used in the context
- * of MixedCollections, though {@link Ext.data.Store Store}s frequently create them when filtering and searching on their
- * records. Example usage:</p>
-<pre><code>
-//set up a fictional MixedCollection containing a few people to filter on
-var allNames = new Ext.util.MixedCollection();
-allNames.addAll([
-    {id: 1, name: 'Ed',    age: 25},
-    {id: 2, name: 'Jamie', age: 37},
-    {id: 3, name: 'Abe',   age: 32},
-    {id: 4, name: 'Aaron', age: 26},
-    {id: 5, name: 'David', age: 32}
-]);
-
-var ageFilter = new Ext.util.Filter({
-    property: 'age',
-    value   : 32
-});
+    
+    renderTpl: null,
 
-var longNameFilter = new Ext.util.Filter({
-    filterFn: function(item) {
-        return item.name.length > 4;
-    }
-});
+    
 
-//a new MixedCollection with the 3 names longer than 4 characters
-var longNames = allNames.filter(longNameFilter);
+    
 
-//a new MixedCollection with the 2 people of age 24:
-var youngFolk = allNames.filter(ageFilter);
-</code></pre>
- */
-Ext.define('Ext.util.Filter', {
+    
 
-    /* Begin Definitions */
+    
 
-    /* End Definitions */
-    /**
-     * @cfg {String} property The property to filter on. Required unless a {@link #filterFn} is passed
-     */
     
-    /**
-     * @cfg {Function} filterFn A custom filter function which is passed each item in the {@link Ext.util.MixedCollection} 
-     * in turn. Should return true to accept each item or false to reject it
-     */
+
     
-    /**
-     * @cfg {Boolean} anyMatch True to allow any match - no regex start/end line anchors will be added. Defaults to false
-     */
-    anyMatch: false,
+
     
-    /**
-     * @cfg {Boolean} exactMatch True to force exact match (^ and $ characters added to the regex). Defaults to false.
-     * Ignored if anyMatch is true.
-     */
-    exactMatch: false,
+
     
-    /**
-     * @cfg {Boolean} caseSensitive True to make the regex case sensitive (adds 'i' switch to regex). Defaults to false.
-     */
-    caseSensitive: false,
+
     
-    /**
-     * @cfg {String} root Optional root property. This is mostly useful when filtering a Store, in which case we set the
-     * root to 'data' to make the filter pull the {@link #property} out of the data object of each item
-     */
 
-    /**
-     * Creates new Filter.
-     * @param {Object} config (optional) Config object
-     */
-    constructor: function(config) {
-        Ext.apply(this, config);
-        
-        //we're aliasing filter to filterFn mostly for API cleanliness reasons, despite the fact it dirties the code here.
-        //Ext.util.Sorter takes a sorterFn property but allows .sort to be called - we do the same here
-        this.filter = this.filter || this.filterFn;
-        
-        if (this.filter == undefined) {
-            if (this.property == undefined || this.value == undefined) {
-                // Commented this out temporarily because it stops us using string ids in models. TODO: Remove this once
-                // Model has been updated to allow string ids
-                
-                // Ext.Error.raise("A Filter requires either a property or a filterFn to be set");
-            } else {
-                this.filter = this.createFilterFn();
-            }
-            
-            this.filterFn = this.filter;
-        }
-    },
     
-    /**
-     * @private
-     * Creates a filter function for the configured property/value/anyMatch/caseSensitive options for this Filter
-     */
-    createFilterFn: function() {
-        var me       = this,
-            matcher  = me.createValueMatcher(),
-            property = me.property;
-        
-        return function(item) {
-            return matcher.test(me.getRoot.call(me, item)[property]);
-        };
-    },
+
     
-    /**
-     * @private
-     * Returns the root property of the given item, based on the configured {@link #root} property
-     * @param {Object} item The item
-     * @return {Object} The root property of the object
-     */
-    getRoot: function(item) {
-        return this.root == undefined ? item : item[this.root];
-    },
+    tplWriteMode: 'overwrite',
+
     
-    /**
-     * @private
-     * Returns a regular expression based on the given value and matching options
-     */
-    createValueMatcher : function() {
-        var me            = this,
-            value         = me.value,
-            anyMatch      = me.anyMatch,
-            exactMatch    = me.exactMatch,
-            caseSensitive = me.caseSensitive,
-            escapeRe      = Ext.String.escapeRegex;
-        
-        if (!value.exec) { // not a regex
-            value = String(value);
+    baseCls: Ext.baseCSSPrefix + 'component',
 
-            if (anyMatch === true) {
-                value = escapeRe(value);
-            } else {
-                value = '^' + escapeRe(value);
-                if (exactMatch === true) {
-                    value += '$';
-                }
-            }
-            value = new RegExp(value, caseSensitive ? '' : 'i');
-         }
-         
-         return value;
-    }
-});
-/**
- * @class Ext.util.Sorter
- * @extends Object
+    
 
-Represents a single sorter that can be applied to a Store. The sorter is used
-to compare two values against each other for the purpose of ordering them. Ordering
-is achieved by specifying either:
-- {@link #property A sorting property}
-- {@link #sorterFn A sorting function} 
+    
 
-As a contrived example, we can specify a custom sorter that sorts by rank:
+    
 
-    Ext.define('Person', {
-        extend: 'Ext.data.Model',
-        fields: ['name', 'rank']
-    });
+    
+    disabledCls: Ext.baseCSSPrefix + 'item-disabled',
 
-    Ext.create('Ext.data.Store', {
-        model: 'Person',
-        proxy: 'memory',
-        sorters: [{
-            sorterFn: function(o1, o2){
-                var getRank = function(o){
-                    var name = o.get('rank');
-                    if (name === 'first') {
-                        return 1;
-                    } else if (name === 'second') {
-                        return 2;
-                    } else {
-                        return 3;
-                    }
-                },
-                rank1 = getRank(o1),
-                rank2 = getRank(o2);
-                
-                if (rank1 === rank2) {
-                    return 0;
-                }
-                
-                return rank1 < rank2 ? -1 : 1;
-            }
-        }],
-        data: [{
-            name: 'Person1',
-            rank: 'second'
-        }, {
-            name: 'Person2',
-            rank: 'third'
-        }, {
-            name: 'Person3',
-            rank: 'first'
-        }] 
-    });
+    
+    ui: 'default',
 
- * @markdown
- */
-Ext.define('Ext.util.Sorter', {
+    
+    uiCls: [],
 
-    /**
-     * @cfg {String} property The property to sort by. Required unless {@link #sorterFn} is provided.
-     * The property is extracted from the object directly and compared for sorting using the built in
-     * comparison operators.
-     */
     
-    /**
-     * @cfg {Function} sorterFn A specific sorter function to execute. Can be passed instead of {@link #property}.
-     * This sorter function allows for any kind of custom/complex comparisons.
-     * The sorterFn receives two arguments, the objects being compared. The function should return:
-     * <ul>
-     * <li>-1 if o1 is "less than" o2</li>
-     * <li>0 if o1 is "equal" to o2</li>
-     * <li>1 if o1 is "greater than" o2</li>
-     * </ul>
-     */
+
     
-    /**
-     * @cfg {String} root Optional root property. This is mostly useful when sorting a Store, in which case we set the
-     * root to 'data' to make the filter pull the {@link #property} out of the data object of each item
-     */
+
     
-    /**
-     * @cfg {Function} transform A function that will be run on each value before
-     * it is compared in the sorter. The function will receive a single argument,
-     * the value.
-     */
+
     
-    /**
-     * @cfg {String} direction The direction to sort by. Defaults to ASC
-     */
-    direction: "ASC",
+
     
-    constructor: function(config) {
-        var me = this;
-        
-        Ext.apply(me, config);
-        
-        
-        me.updateSortFunction();
-    },
+
     
-    /**
-     * @private
-     * Creates and returns a function which sorts an array by the given property and direction
-     * @return {Function} A function which sorts by the property/direction combination provided
-     */
-    createSortFunction: function(sorterFn) {
-        var me        = this,
-            property  = me.property,
-            direction = me.direction || "ASC",
-            modifier  = direction.toUpperCase() == "DESC" ? -1 : 1;
-        
-        //create a comparison function. Takes 2 objects, returns 1 if object 1 is greater,
-        //-1 if object 2 is greater or 0 if they are equal
-        return function(o1, o2) {
-            return modifier * sorterFn.call(me, o1, o2);
-        };
-    },
+
     
-    /**
-     * @private
-     * Basic default sorter function that just compares the defined property of each object
-     */
-    defaultSorterFn: function(o1, o2) {
-        var me = this,
-            transform = me.transform,
-            v1 = me.getRoot(o1)[me.property],
-            v2 = me.getRoot(o2)[me.property];
-            
-        if (transform) {
-            v1 = transform(v1);
-            v2 = transform(v2);
-        }
+    hidden: false,
 
-        return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
-    },
     
-    /**
-     * @private
-     * Returns the root property of the given item, based on the configured {@link #root} property
-     * @param {Object} item The item
-     * @return {Object} The root property of the object
-     */
-    getRoot: function(item) {
-        return this.root === undefined ? item : item[this.root];
-    },
+    disabled: false,
+
     
-    /**
-     * Set the sorting direction for this sorter.
-     * @param {String} direction The direction to sort in. Should be either 'ASC' or 'DESC'.
-     */
-    setDirection: function(direction) {
-        var me = this;
-        me.direction = direction;
-        me.updateSortFunction();
-    },
+
     
-    /**
-     * Toggles the sorting direction for this sorter.
-     */
-    toggle: function() {
-        var me = this;
-        me.direction = Ext.String.toggle(me.direction, "ASC", "DESC");
-        me.updateSortFunction();
-    },
+    draggable: false,
+
     
-    /**
-     * Update the sort function for this sorter.
-     * @param {Function} fn (Optional) A new sorter function for this sorter. If not specified it will use the
-     * default sorting function.
-     */
-    updateSortFunction: function(fn) {
-        var me = this;
-        fn = fn || me.sorterFn || me.defaultSorterFn;
-        me.sort = me.createSortFunction(fn);
-    }
-});
-/**
- * @class Ext.ElementLoader
- * A class used to load remote content to an Element. Sample usage:
- * <pre><code>
-Ext.get('el').load({
-    url: 'myPage.php',
-    scripts: true,
-    params: {
-        id: 1
-    }
-});
- * </code></pre>
- * <p>
- * In general this class will not be instanced directly, rather the {@link Ext.core.Element#load} method
- * will be used.
- * </p>
- */
-Ext.define('Ext.ElementLoader', {
+    floating: false,
 
-    /* Begin Definitions */
+    
+    hideMode: 'display',
 
-    mixins: {
-        observable: 'Ext.util.Observable'
-    },
+    
 
-    uses: [
-        'Ext.data.Connection',
-        'Ext.Ajax'
-    ],
     
-    statics: {
-        Renderer: {
-            Html: function(loader, response, active){
-                loader.getTarget().update(response.responseText, active.scripts === true);
-                return true;
-            }
-        }     
-    },
 
-    /* End Definitions */
+    
+    styleHtmlContent: false,
 
-    /**
-     * @cfg {String} url The url to retrieve the content from. Defaults to <tt>null</tt>.
-     */
-    url: null,
+    
+    styleHtmlCls: Ext.baseCSSPrefix + 'html',
 
-    /**
-     * @cfg {Object} params Any params to be attached to the Ajax request. These parameters will
-     * be overridden by any params in the load options. Defaults to <tt>null</tt>.
-     */
-    params: null,
+    
+    
+    
+    
 
-    /**
-     * @cfg {Object} baseParams Params that will be attached to every request. These parameters
-     * will not be overridden by any params in the load options. Defaults to <tt>null</tt>.
-     */
-    baseParams: null,
+    
 
-    /**
-     * @cfg {Boolean/Object} autoLoad True to have the loader make a request as soon as it is created. Defaults to <tt>false</tt>.
-     * This argument can also be a set of options that will be passed to {@link #load} is called.
-     */
-    autoLoad: false,
+    
+    autoShow: false,
 
-    /**
-     * @cfg {Mixed} target The target element for the loader. It can be the DOM element, the id or an Ext.Element.
-     */
-    target: null,
+    
+    autoRender: false,
 
-    /**
-     * @cfg {Mixed} loadMask True or a string to show when the element is loading.
-     */
-    loadMask: false,
+    needsLayout: false,
 
-    /**
-     * @cfg {Object} ajaxOptions Any additional options to be passed to the request, for example timeout or headers. Defaults to <tt>null</tt>.
-     */
-    ajaxOptions: null,
     
-    /**
-     * @cfg {Boolean} scripts True to parse any inline script tags in the response.
-     */
-    scripts: false,
+    allowDomMove: true,
 
-    /**
-     * @cfg {Function} success A function to be called when a load request is successful.
-     */
+    
 
-    /**
-     * @cfg {Function} failure A function to be called when a load request fails.
-     */
+    
+    rendered: false,
 
-    /**
-     * @cfg {Object} scope The scope to execute the {@link #success} and {@link #failure} functions in.
-     */
     
-    /**
-     * @cfg {Function} renderer A custom function to render the content to the element. The passed parameters
-     * are
-     * <ul>
-     * <li>The loader</li>
-     * <li>The response</li>
-     * <li>The active request</li>
-     * </ul>
-     */
+    componentLayoutCounter: 0,
 
-    isLoader: true,
+    weight: 0,
 
-    constructor: function(config) {
+    trimRe: /^\s+|\s+$/g,
+    spacesRe: /\s+/,
+
+
+    
+    maskOnDisable: true,
+
+    
+    constructor : function(config) {
         var me = this,
-            autoLoad;
-        
+            i, len;
+
         config = config || {};
+        me.initialConfig = config;
         Ext.apply(me, config);
-        me.setTarget(me.target);
-        me.addEvents(
-            /**
-             * @event beforeload
-             * Fires before a load request is made to the server.
-             * Returning false from an event listener can prevent the load
-             * from occurring.
-             * @param {Ext.ElementLoader} this
-             * @param {Object} options The options passed to the request
-             */
-            'beforeload',
-
-            /**
-             * @event exception
-             * Fires after an unsuccessful load.
-             * @param {Ext.ElementLoader} this
-             * @param {Object} response The response from the server
-             * @param {Object} options The options passed to the request
-             */
-            'exception',
 
-            /**
-             * @event exception
-             * Fires after a successful load.
-             * @param {Ext.ElementLoader} this
-             * @param {Object} response The response from the server
-             * @param {Object} options The options passed to the request
-             */
-            'load'
+        me.addEvents(
+            
+            'beforeactivate',
+            
+            'activate',
+            
+            'beforedeactivate',
+            
+            'deactivate',
+            
+            'added',
+            
+            'disable',
+            
+            'enable',
+            
+            'beforeshow',
+            
+            'show',
+            
+            'beforehide',
+            
+            'hide',
+            
+            'removed',
+            
+            'beforerender',
+            
+            'render',
+            
+            'afterrender',
+            
+            'beforedestroy',
+            
+            'destroy',
+            
+            'resize',
+            
+            'move'
         );
 
-        // don't pass config because we have already applied it.
-        me.mixins.observable.constructor.call(me);
-
-        if (me.autoLoad) {
-            autoLoad = me.autoLoad;
-            if (autoLoad === true) {
-                autoLoad = {};
-            }
-            me.load(autoLoad);
-        }
-    },
-
-    /**
-     * Set an {Ext.Element} as the target of this loader. Note that if the target is changed,
-     * any active requests will be aborted.
-     * @param {Mixed} target The element
-     */
-    setTarget: function(target){
-        var me = this;
-        target = Ext.get(target);
-        if (me.target && me.target != target) {
-            me.abort();
-        }
-        me.target = target;
-    },
+        me.getId();
 
-    /**
-     * Get the target of this loader.
-     * @return {Ext.Component} target The target, null if none exists.
-     */
-    getTarget: function(){
-        return this.target || null;
-    },
+        me.mons = [];
+        me.additionalCls = [];
+        me.renderData = me.renderData || {};
+        me.renderSelectors = me.renderSelectors || {};
 
-    /**
-     * Aborts the active load request
-     */
-    abort: function(){
-        var active = this.active;
-        if (active !== undefined) {
-            Ext.Ajax.abort(active.request);
-            if (active.mask) {
-                this.removeMask();
-            }
-            delete this.active;
+        if (me.plugins) {
+            me.plugins = [].concat(me.plugins);
+            me.constructPlugins();
         }
-    },
-    
-    /**
-     * Remove the mask on the target
-     * @private
-     */
-    removeMask: function(){
-        this.target.unmask();
-    },
-    
-    /**
-     * Add the mask on the target
-     * @private
-     * @param {Mixed} mask The mask configuration
-     */
-    addMask: function(mask){
-        this.target.mask(mask === true ? null : mask);
-    },
-
-    /**
-     * Load new data from the server.
-     * @param {Object} options The options for the request. They can be any configuration option that can be specified for
-     * the class, with the exception of the target option. Note that any options passed to the method will override any
-     * class defaults.
-     */
-    load: function(options) {
-
-        options = Ext.apply({}, options);
 
-        var me = this,
-            target = me.target,
-            mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
-            params = Ext.apply({}, options.params),
-            ajaxOptions = Ext.apply({}, options.ajaxOptions),
-            callback = options.callback || me.callback,
-            scope = options.scope || me.scope || me,
-            request;
+        me.initComponent();
 
-        Ext.applyIf(ajaxOptions, me.ajaxOptions);
-        Ext.applyIf(options, ajaxOptions);
+        
+        Ext.ComponentManager.register(me);
 
-        Ext.applyIf(params, me.params);
-        Ext.apply(params, me.baseParams);
+        
+        me.mixins.observable.constructor.call(me);
+        me.mixins.state.constructor.call(me, config);
 
-        Ext.applyIf(options, {
-            url: me.url
-        });
+        
+        this.addStateEvents('resize');
 
+        
+        if (me.plugins) {
+            me.plugins = [].concat(me.plugins);
+            for (i = 0, len = me.plugins.length; i < len; i++) {
+                me.plugins[i] = me.initPlugin(me.plugins[i]);
+            }
+        }
 
-        Ext.apply(options, {
-            scope: me,
-            params: params,
-            callback: me.onComplete
-        });
+        me.loader = me.getLoader();
 
-        if (me.fireEvent('beforeload', me, options) === false) {
-            return;
+        if (me.renderTo) {
+            me.render(me.renderTo);
+            
+            
+            
         }
 
-        if (mask) {
-            me.addMask(mask);
+        if (me.autoShow) {
+            me.show();
         }
 
-        request = Ext.Ajax.request(options);
-        me.active = {
-            request: request,
-            options: options,
-            mask: mask,
-            scope: scope,
-            callback: callback,
-            success: options.success || me.success,
-            failure: options.failure || me.failure,
-            renderer: options.renderer || me.renderer,
-            scripts: Ext.isDefined(options.scripts) ? options.scripts : me.scripts
-        };
-        me.setOptions(me.active, options);
     },
-    
-    /**
-     * Set any additional options on the active request
-     * @private
-     * @param {Object} active The active request
-     * @param {Object} options The initial options
-     */
-    setOptions: Ext.emptyFn,
 
-    /**
-     * Parse the response after the request completes
-     * @private
-     * @param {Object} options Ajax options
-     * @param {Boolean} success Success status of the request
-     * @param {Object} response The response object
-     */
-    onComplete: function(options, success, response) {
-        var me = this,
-            active = me.active,
-            scope = active.scope,
-            renderer = me.getRenderer(active.renderer);
+    initComponent: function () {
+        
+        
+        this.constructPlugins();
+    },
 
+    
+    getState: function() {
+        var me = this,
+            layout = me.ownerCt ? (me.shadowOwnerCt || me.ownerCt).getLayout() : null,
+            state = {
+                collapsed: me.collapsed
+            },
+            width = me.width,
+            height = me.height,
+            cm = me.collapseMemento,
+            anchors;
 
-        if (success) {
-            success = renderer.call(me, me, response, active);
+        
+        
+        if (me.collapsed && cm) {
+            if (Ext.isDefined(cm.data.width)) {
+                width = cm.width;
+            }
+            if (Ext.isDefined(cm.data.height)) {
+                height = cm.height;
+            }
         }
 
-        if (success) {
-            Ext.callback(active.success, scope, [me, response, options]);
-            me.fireEvent('load', me, response, options);
-        } else {
-            Ext.callback(active.failure, scope, [me, response, options]);
-            me.fireEvent('exception', me, response, options);
+        
+        if (layout && me.flex) {
+            state.flex = me.flex;
+            if (layout.perpendicularPrefix) {
+                state[layout.perpendicularPrefix] = me['get' + layout.perpendicularPrefixCap]();
+            } else {
+            }
         }
-        Ext.callback(active.callback, scope, [me, success, response, options]);
-
-        if (active.mask) {
-            me.removeMask();
+        
+        else if (layout && me.anchor) {
+            state.anchor = me.anchor;
+            anchors = me.anchor.split(' ').concat(null);
+            if (!anchors[0]) {
+                if (me.width) {
+                    state.width = width;
+                }
+            }
+            if (!anchors[1]) {
+                if (me.height) {
+                    state.height = height;
+                }
+            }
+        }
+        
+        else {
+            if (me.width) {
+                state.width = width;
+            }
+            if (me.height) {
+                state.height = height;
+            }
         }
 
-        delete me.active;
-    },
+        
+        if (state.width == me.initialConfig.width) {
+            delete state.width;
+        }
+        if (state.height == me.initialConfig.height) {
+            delete state.height;
+        }
 
-    /**
-     * Gets the renderer to use
-     * @private
-     * @param {String/Function} renderer The renderer to use
-     * @return {Function} A rendering function to use.
-     */
-    getRenderer: function(renderer){
-        if (Ext.isFunction(renderer)) {
-            return renderer;
+        
+        if (layout && layout.align && (layout.align.indexOf('stretch') !== -1)) {
+            delete state[layout.perpendicularPrefix];
         }
-        return this.statics().Renderer.Html;
-    },
-    
-    /**
-     * Automatically refreshes the content over a specified period.
-     * @param {Number} interval The interval to refresh in ms.
-     * @param {Object} options (optional) The options to pass to the load method. See {@link #load}
-     */
-    startAutoRefresh: function(interval, options){
-        var me = this;
-        me.stopAutoRefresh();
-        me.autoRefresh = setInterval(function(){
-            me.load(options);
-        }, interval);
-    },
-    
-    /**
-     * Clears any auto refresh. See {@link #startAutoRefresh}.
-     */
-    stopAutoRefresh: function(){
-        clearInterval(this.autoRefresh);
-        delete this.autoRefresh;
-    },
-    
-    /**
-     * Checks whether the loader is automatically refreshing. See {@link #startAutoRefresh}.
-     * @return {Boolean} True if the loader is automatically refreshing
-     */
-    isAutoRefreshing: function(){
-        return Ext.isDefined(this.autoRefresh);
+        return state;
     },
 
-    /**
-     * Destroys the loader. Any active requests will be aborted.
-     */
-    destroy: function(){
-        var me = this;
-        me.stopAutoRefresh();
-        delete me.target;
-        me.abort();
-        me.clearListeners();
-    }
-});
+    show: Ext.emptyFn,
 
-/**
- * @class Ext.layout.Layout
- * @extends Object
- * Base Layout class - extended by ComponentLayout and ContainerLayout
- */
-Ext.define('Ext.layout.Layout', {
+    animate: function(animObj) {
+        var me = this,
+            to;
 
-    /* Begin Definitions */
+        animObj = animObj || {};
+        to = animObj.to || {};
 
-    /* End Definitions */
+        if (Ext.fx.Manager.hasFxBlock(me.id)) {
+            return me;
+        }
+        
+        if (!animObj.dynamic && (to.height || to.width)) {
+            var curWidth = me.getWidth(),
+                w = curWidth,
+                curHeight = me.getHeight(),
+                h = curHeight,
+                needsResize = false;
 
-    isLayout: true,
-    initialized: false,
+            if (to.height && to.height > curHeight) {
+                h = to.height;
+                needsResize = true;
+            }
+            if (to.width && to.width > curWidth) {
+                w = to.width;
+                needsResize = true;
+            }
 
-    statics: {
-        create: function(layout, defaultType) {
-            var type;
-            if (layout instanceof Ext.layout.Layout) {
-                return Ext.createByAlias('layout.' + layout);
-            } else {
-                if (!layout || typeof layout === 'string') {
-                    type = layout || defaultType;
-                    layout = {};                    
+            
+            
+            
+            if (needsResize) {
+                var clearWidth = !Ext.isNumber(me.width),
+                    clearHeight = !Ext.isNumber(me.height);
+
+                me.componentLayout.childrenChanged = true;
+                me.setSize(w, h, me.ownerCt);
+                me.el.setSize(curWidth, curHeight);
+                if (clearWidth) {
+                    delete me.width;
                 }
-                else {
-                    type = layout.type;
+                if (clearHeight) {
+                    delete me.height;
                 }
-                return Ext.createByAlias('layout.' + type, layout || {});
             }
         }
+        return me.mixins.animate.animate.apply(me, arguments);
     },
 
-    constructor : function(config) {
-        this.id = Ext.id(null, this.type + '-');
-        Ext.apply(this, config);
+    
+    findLayoutController: function() {
+        return this.findParentBy(function(c) {
+            
+            
+            return !c.ownerCt || (c.layout.layoutBusy && !c.ownerCt.layout.layoutBusy);
+        });
     },
 
-    /**
-     * @private
-     */
-    layout : function() {
-        var me = this;
-        me.layoutBusy = true;
-        me.initLayout();
-
-        if (me.beforeLayout.apply(me, arguments) !== false) {
-            me.layoutCancelled = false;
-            me.onLayout.apply(me, arguments);
-            me.childrenChanged = false;
-            me.owner.needsLayout = false;
-            me.layoutBusy = false;
-            me.afterLayout.apply(me, arguments);
-        }
-        else {
-            me.layoutCancelled = true;
+    onShow : function() {
+        
+        var needsLayout = this.needsLayout;
+        if (Ext.isObject(needsLayout)) {
+            this.doComponentLayout(needsLayout.width, needsLayout.height, needsLayout.isSetSize, needsLayout.ownerCt);
         }
-        me.layoutBusy = false;
-        me.doOwnerCtLayouts();
-    },
-
-    beforeLayout : function() {
-        this.renderItems(this.getLayoutItems(), this.getRenderTarget());
-        return true;
     },
 
-    /**
-     * @private
-     * Iterates over all passed items, ensuring they are rendered.  If the items are already rendered,
-     * also determines if the items are in the proper place dom.
-     */
-    renderItems : function(items, target) {
-        var ln = items.length,
-            i = 0,
-            item;
-
-        for (; i < ln; i++) {
-            item = items[i];
-            if (item && !item.rendered) {
-                this.renderItem(item, target, i);
-            }
-            else if (!this.isValidParent(item, target, i)) {
-                this.moveItem(item, target, i);
-            }
+    constructPlugin: function(plugin) {
+        if (plugin.ptype && typeof plugin.init != 'function') {
+            plugin.cmp = this;
+            plugin = Ext.PluginManager.create(plugin);
         }
-    },
-
-    // @private - Validates item is in the proper place in the dom.
-    isValidParent : function(item, target, position) {
-        var dom = item.el ? item.el.dom : Ext.getDom(item);
-        if (dom && target && target.dom) {
-            if (Ext.isNumber(position) && dom !== target.dom.childNodes[position]) {
-                return false;
-            }
-            return (dom.parentNode == (target.dom || target));
+        else if (typeof plugin == 'string') {
+            plugin = Ext.PluginManager.create({
+                ptype: plugin,
+                cmp: this
+            });
         }
-        return false;
+        return plugin;
     },
 
-    /**
-     * @private
-     * Renders the given Component into the target Element.
-     * @param {Ext.Component} item The Component to render
-     * @param {Ext.core.Element} target The target Element
-     * @param {Number} position The position within the target to render the item to
-     */
-    renderItem : function(item, target, position) {
-        var me = this;
-        if (!item.rendered) {
-            if (me.itemCls) {
-                item.addCls(me.itemCls);
-            }
-            if (me.owner.itemCls) {
-                item.addCls(me.owner.itemCls);
+    
+    constructPlugins: function() {
+        var me = this,
+            plugins = me.plugins,
+            i, len;
+
+        if (plugins) {
+            for (i = 0, len = plugins.length; i < len; i++) {
+                
+                plugins[i] = me.constructPlugin(plugins[i]);
             }
-            item.render(target, position);
-            me.configureItem(item);
-            me.childrenChanged = true;
         }
     },
 
-    /**
-     * @private
-     * Moved Component to the provided target instead.
-     */
-    moveItem : function(item, target, position) {
-        // Make sure target is a dom element
-        target = target.dom || target;
-        if (typeof position == 'number') {
-            position = target.childNodes[position];
-        }
-        target.insertBefore(item.el.dom, position || null);
-        item.container = Ext.get(target);
-        this.configureItem(item);
-        this.childrenChanged = true;
+    
+    initPlugin : function(plugin) {
+        plugin.init(this);
+
+        return plugin;
     },
 
-    /**
-     * @private
-     * Adds the layout's targetCls if necessary and sets
-     * initialized flag when complete.
-     */
-    initLayout : function() {
-        if (!this.initialized && !Ext.isEmpty(this.targetCls)) {
-            this.getTarget().addCls(this.targetCls);
+    
+    doAutoRender: function() {
+        var me = this;
+        if (me.floating) {
+            me.render(document.body);
+        } else {
+            me.render(Ext.isBoolean(me.autoRender) ? Ext.getBody() : me.autoRender);
         }
-        this.initialized = true;
     },
 
-    // @private Sets the layout owner
-    setOwner : function(owner) {
-        this.owner = owner;
-    },
+    
+    render : function(container, position) {
+        var me = this;
 
-    // @private - Returns empty array
-    getLayoutItems : function() {
-        return [];
-    },
+        if (!me.rendered && me.fireEvent('beforerender', me) !== false) {
 
-    /**
-     * @private
-     * Applies itemCls
-     * Empty template method
-     */
-    configureItem: Ext.emptyFn,
-    
-    // Placeholder empty functions for subclasses to extend
-    onLayout : Ext.emptyFn,
-    afterLayout : Ext.emptyFn,
-    onRemove : Ext.emptyFn,
-    onDestroy : Ext.emptyFn,
-    doOwnerCtLayouts : Ext.emptyFn,
+            
+            
+            me.rendering = true;
 
-    /**
-     * @private
-     * Removes itemCls
-     */
-    afterRemove : function(item) {
-        var me = this,
-            el = item.el,
-            owner = me.owner;
             
-        // Clear managed dimensions flag when removed from the layout.
-        if (item.rendered) {
-            if (me.itemCls) {
-                el.removeCls(me.itemCls);
+            
+            if (me.el) {
+                me.el = Ext.get(me.el);
             }
-            if (owner.itemCls) {
-                el.removeCls(owner.itemCls);
+
+            
+            if (me.floating) {
+                me.onFloatRender();
             }
-        }
 
-        // These flags are set at the time a child item is added to a layout.
-        // The layout must decide if it is managing the item's width, or its height, or both.
-        // See AbstractComponent for docs on these properties.
-        delete item.layoutManagedWidth;
-        delete item.layoutManagedHeight;
-    },
-
-    /*
-     * Destroys this layout. This is a template method that is empty by default, but should be implemented
-     * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
-     * @protected
-     */
-    destroy : function() {
-        if (!Ext.isEmpty(this.targetCls)) {
-            var target = this.getTarget();
-            if (target) {
-                target.removeCls(this.targetCls);
-            }
-        }
-        this.onDestroy();
-    }
-});
-/**
- * @class Ext.layout.component.Component
- * @extends Ext.layout.Layout
- * @private
- * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Component#componentLayout layout}</b></tt>
- * configuration property.  See <tt><b>{@link Ext.Component#componentLayout}</b></tt> for additional details.</p>
- */
+            container = me.initContainer(container);
 
-Ext.define('Ext.layout.component.Component', {
+            me.onRender(container, position);
 
-    /* Begin Definitions */
+            
+            
+            me.el.setVisibilityMode(Ext.Element[me.hideMode.toUpperCase()]);
 
-    extend: 'Ext.layout.Layout',
+            if (me.overCls) {
+                me.el.hover(me.addOverCls, me.removeOverCls, me);
+            }
 
-    /* End Definitions */
+            me.fireEvent('render', me);
 
-    type: 'component',
+            me.initContent();
 
-    monitorChildren: true,
+            me.afterRender(container);
+            me.fireEvent('afterrender', me);
 
-    initLayout : function() {
-        var me = this,
-            owner = me.owner,
-            ownerEl = owner.el;
+            me.initEvents();
 
-        if (!me.initialized) {
-            if (owner.frameSize) {
-                me.frameSize = owner.frameSize;
+            if (me.hidden) {
+                
+                
+                
+                me.el.hide();
             }
-            else {
-                owner.frameSize = me.frameSize = {
-                    top: 0,
-                    left: 0,
-                    bottom: 0,
-                    right: 0
-                }; 
+
+            if (me.disabled) {
+                
+                me.disable(true);
             }
+
+            
+            delete me.rendering;
         }
-        me.callParent(arguments);
+        return me;
     },
 
-    beforeLayout : function(width, height, isSetSize, callingContainer) {
-        this.callParent(arguments);
-
+    
+    onRender : function(container, position) {
         var me = this,
-            owner = me.owner,
-            ownerCt = owner.ownerCt,
-            layout = owner.layout,
-            isVisible = owner.isVisible(true),
-            ownerElChild = owner.el.child,
-            layoutCollection;
+            el = me.el,
+            styles = me.initStyles(),
+            renderTpl, renderData, i;
 
-        // Cache the size we began with so we can see if there has been any effect.
-        me.previousComponentSize = me.lastComponentSize;
+        position = me.getInsertPosition(position);
 
-        //Do not allow autoing of any dimensions which are fixed, unless we are being told to do so by the ownerCt's layout.
-        if (!isSetSize && ((!Ext.isNumber(width) && owner.isFixedWidth()) || (!Ext.isNumber(height) && owner.isFixedHeight())) && callingContainer !== ownerCt) {
-            me.doContainerLayout();
-            return false;
+        if (!el) {
+            if (position) {
+                el = Ext.DomHelper.insertBefore(position, me.getElConfig(), true);
+            }
+            else {
+                el = Ext.DomHelper.append(container, me.getElConfig(), true);
+            }
         }
-
-        // If an ownerCt is hidden, add my reference onto the layoutOnShow stack.  Set the needsLayout flag.
-        // If the owner itself is a directly hidden floater, set the needsLayout object on that for when it is shown.
-        if (!isVisible && (owner.hiddenAncestor || owner.floating)) {
-            if (owner.hiddenAncestor) {
-                layoutCollection = owner.hiddenAncestor.layoutOnShow;
-                layoutCollection.remove(owner);
-                layoutCollection.add(owner);
+        else if (me.allowDomMove !== false) {
+            if (position) {
+                container.dom.insertBefore(el.dom, position);
+            } else {
+                container.dom.appendChild(el.dom);
             }
-            owner.needsLayout = {
-                width: width,
-                height: height,
-                isSetSize: false
-            };
         }
 
-        if (isVisible && this.needsLayout(width, height)) {
-            return owner.beforeComponentLayout(width, height, isSetSize, callingContainer);
-        }
-        else {
-            return false;
+        if (Ext.scopeResetCSS && !me.ownerCt) {
+            
+            if (el.dom == Ext.getBody().dom) {
+                el.parent().addCls(Ext.baseCSSPrefix + 'reset');
+            }
+            else {
+                
+                me.resetEl = el.wrap({
+                    cls: Ext.baseCSSPrefix + 'reset'
+                });
+            }
         }
-    },
-
-    /**
-    * Check if the new size is different from the current size and only
-    * trigger a layout if it is necessary.
-    * @param {Mixed} width The new width to set.
-    * @param {Mixed} height The new height to set.
-    */
-    needsLayout : function(width, height) {
-        var me = this,
-            widthBeingChanged,
-            heightBeingChanged;
-            me.lastComponentSize = me.lastComponentSize || {
-                width: -Infinity,
-                height: -Infinity
-            };
-        
-        // If autoWidthing, or an explicitly different width is passed, then the width is being changed.
-        widthBeingChanged  = !Ext.isDefined(width)  || me.lastComponentSize.width  !== width;
-
-        // If autoHeighting, or an explicitly different height is passed, then the height is being changed.
-        heightBeingChanged = !Ext.isDefined(height) || me.lastComponentSize.height !== height;
 
+        me.setUI(me.ui);
 
-        // isSizing flag added to prevent redundant layouts when going up the layout chain
-        return !me.isSizing && (me.childrenChanged || widthBeingChanged || heightBeingChanged);
-    },
-
-    /**
-    * Set the size of any element supporting undefined, null, and values.
-    * @param {Mixed} width The new width to set.
-    * @param {Mixed} height The new height to set.
-    */
-    setElementSize: function(el, width, height) {
-        if (width !== undefined && height !== undefined) {
-            el.setSize(width, height);
-        }
-        else if (height !== undefined) {
-            el.setHeight(height);
-        }
-        else if (width !== undefined) {
-            el.setWidth(width);
-        }
-    },
-
-    /**
-     * Returns the owner component's resize element.
-     * @return {Ext.core.Element}
-     */
-     getTarget : function() {
-         return this.owner.el;
-     },
+        el.addCls(me.initCls());
+        el.setStyle(styles);
 
-    /**
-     * <p>Returns the element into which rendering must take place. Defaults to the owner Component's encapsulating element.</p>
-     * May be overridden in Component layout managers which implement an inner element.
-     * @return {Ext.core.Element}
-     */
-    getRenderTarget : function() {
-        return this.owner.el;
-    },
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-    /**
-    * Set the size of the target element.
-    * @param {Mixed} width The new width to set.
-    * @param {Mixed} height The new height to set.
-    */
-    setTargetSize : function(width, height) {
-        var me = this;
-        me.setElementSize(me.owner.el, width, height);
+        me.el = el;
 
-        if (me.owner.frameBody) {
-            var targetInfo = me.getTargetInfo(),
-                padding = targetInfo.padding,
-                border = targetInfo.border,
-                frameSize = me.frameSize;
+        me.initFrame();
 
-            me.setElementSize(me.owner.frameBody,
-                Ext.isNumber(width) ? (width - frameSize.left - frameSize.right - padding.left - padding.right - border.left - border.right) : width,
-                Ext.isNumber(height) ? (height - frameSize.top - frameSize.bottom - padding.top - padding.bottom - border.top - border.bottom) : height
-            );
+        renderTpl = me.initRenderTpl();
+        if (renderTpl) {
+            renderData = me.initRenderData();
+            renderTpl.append(me.getTargetEl(), renderData);
         }
 
-        me.autoSized = {
-            width: !Ext.isNumber(width),
-            height: !Ext.isNumber(height)
-        };
-
-        me.lastComponentSize = {
-            width: width,
-            height: height
-        };
-    },
-
-    getTargetInfo : function() {
-        if (!this.targetInfo) {
-            var target = this.getTarget(),
-                body = this.owner.getTargetEl();
+        me.applyRenderSelectors();
 
-            this.targetInfo = {
-                padding: {
-                    top: target.getPadding('t'),
-                    right: target.getPadding('r'),
-                    bottom: target.getPadding('b'),
-                    left: target.getPadding('l')
-                },
-                border: {
-                    top: target.getBorderWidth('t'),
-                    right: target.getBorderWidth('r'),
-                    bottom: target.getBorderWidth('b'),
-                    left: target.getBorderWidth('l')
-                },
-                bodyMargin: {
-                    top: body.getMargin('t'),
-                    right: body.getMargin('r'),
-                    bottom: body.getMargin('b'),
-                    left: body.getMargin('l')
-                } 
-            };
-        }
-        return this.targetInfo;
+        me.rendered = true;
     },
 
-    // Start laying out UP the ownerCt's layout when flagged to do so.
-    doOwnerCtLayouts: function() {
-        var owner = this.owner,
-            ownerCt = owner.ownerCt,
-            ownerCtComponentLayout, ownerCtContainerLayout,
-            curSize = this.lastComponentSize,
-            prevSize = this.previousComponentSize,
-            widthChange  = (prevSize && curSize && curSize.width) ? curSize.width !== prevSize.width : true,
-            heightChange = (prevSize && curSize && curSize.height) ? curSize.height !== prevSize.height : true;
+    
+    afterRender : function() {
+        var me = this,
+            pos,
+            xy;
 
+        me.getComponentLayout();
 
-        // If size has not changed, do not inform upstream layouts
-        if (!ownerCt || (!widthChange && !heightChange)) {
-            return;
-        }
         
-        ownerCtComponentLayout = ownerCt.componentLayout;
-        ownerCtContainerLayout = ownerCt.layout;
-
-        if (!owner.floating && ownerCtComponentLayout && ownerCtComponentLayout.monitorChildren && !ownerCtComponentLayout.layoutBusy) {
-            if (!ownerCt.suspendLayout && ownerCtContainerLayout && !ownerCtContainerLayout.layoutBusy) {
+        
+        
+        if (me.collapsed || (!me.ownerCt || (me.height || me.width))) {
+            me.setSize(me.width, me.height);
+        } else {
+            
+            
+            
+            
+            me.renderChildren();
+        }
 
-                // If the owning Container may be adjusted in any of the the dimension which have changed, perform its Component layout
-                if (((widthChange && !ownerCt.isFixedWidth()) || (heightChange && !ownerCt.isFixedHeight()))) {
-                    // Set the isSizing flag so that the upstream Container layout (called after a Component layout) can omit this component from sizing operations
-                    this.isSizing = true;
-                    ownerCt.doComponentLayout();
-                    this.isSizing = false;
-                }
-                // Execute upstream Container layout
-                else if (ownerCtContainerLayout.bindToOwnerCtContainer === true) {
-                    ownerCtContainerLayout.layout();
-                }
+        
+        
+        if (me.floating && (me.x === undefined || me.y === undefined)) {
+            if (me.floatParent) {
+                xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
+                pos = me.floatParent.getTargetEl().translatePoints(xy[0], xy[1]);
+            } else {
+                xy = me.el.getAlignToXY(me.container, 'c-c');
+                pos = me.container.translatePoints(xy[0], xy[1]);
             }
+            me.x = me.x === undefined ? pos.left: me.x;
+            me.y = me.y === undefined ? pos.top: me.y;
         }
-    },
-
-    doContainerLayout: function() {
-        var me = this,
-            owner = me.owner,
-            ownerCt = owner.ownerCt,
-            layout = owner.layout,
-            ownerCtComponentLayout;
 
-        // Run the container layout if it exists (layout for child items)
-        // **Unless automatic laying out is suspended, or the layout is currently running**
-        if (!owner.suspendLayout && layout && layout.isLayout && !layout.layoutBusy && !layout.isAutoDock) {
-            layout.layout();
+        if (Ext.isDefined(me.x) || Ext.isDefined(me.y)) {
+            me.setPosition(me.x, me.y);
         }
 
-        // Tell the ownerCt that it's child has changed and can be re-layed by ignoring the lastComponentSize cache.
-        if (ownerCt && ownerCt.componentLayout) {
-            ownerCtComponentLayout = ownerCt.componentLayout;
-            if (!owner.floating && ownerCtComponentLayout.monitorChildren && !ownerCtComponentLayout.layoutBusy) {
-                ownerCtComponentLayout.childrenChanged = true;
-            }
+        if (me.styleHtmlContent) {
+            me.getTargetEl().addCls(me.styleHtmlCls);
         }
     },
 
-    afterLayout : function(width, height, isSetSize, layoutOwner) {
-        this.doContainerLayout();
-        this.owner.afterComponentLayout(width, height, isSetSize, layoutOwner);
-    }
-});
-
-/**
- * @class Ext.state.Manager
- * This is the global state manager. By default all components that are "state aware" check this class
- * for state information if you don't pass them a custom state provider. In order for this class
- * to be useful, it must be initialized with a provider when your application initializes. Example usage:
- <pre><code>
-// in your initialization function
-init : function(){
-   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
-   var win = new Window(...);
-   win.restoreState();
-}
- </code></pre>
- * This class passes on calls from components to the underlying {@link Ext.state.Provider} so that
- * there is a common interface that can be used without needing to refer to a specific provider instance
- * in every component.
- * @singleton
- * @docauthor Evan Trimboli <evan@sencha.com>
- */
-Ext.define('Ext.state.Manager', {
-    singleton: true,
-    requires: ['Ext.state.Provider'],
-    constructor: function() {
-        this.provider = Ext.create('Ext.state.Provider');
-    },
-    
     
-    /**
-     * Configures the default state provider for your application
-     * @param {Provider} stateProvider The state provider to set
-     */
-    setProvider : function(stateProvider){
-        this.provider = stateProvider;
-    },
-
-    /**
-     * Returns the current value for a key
-     * @param {String} name The key name
-     * @param {Mixed} defaultValue The default value to return if the key lookup does not match
-     * @return {Mixed} The state data
-     */
-    get : function(key, defaultValue){
-        return this.provider.get(key, defaultValue);
+    registerFloatingItem: function(cmp) {
+        var me = this;
+        if (!me.floatingItems) {
+            me.floatingItems = Ext.create('Ext.ZIndexManager', me);
+        }
+        me.floatingItems.register(cmp);
     },
 
-    /**
-     * Sets the value for a key
-     * @param {String} name The key name
-     * @param {Mixed} value The state data
-     */
-     set : function(key, value){
-        this.provider.set(key, value);
-    },
+    renderChildren: function () {
+        var me = this,
+            layout = me.getComponentLayout();
 
-    /**
-     * Clears a value from the state
-     * @param {String} name The key name
-     */
-    clear : function(key){
-        this.provider.clear(key);
+        me.suspendLayout = true;
+        layout.renderChildren();
+        delete me.suspendLayout;
     },
 
-    /**
-     * Gets the currently configured state provider
-     * @return {Provider} The state provider
-     */
-    getProvider : function(){
-        return this.provider;
-    }
-});
-/**
- * @class Ext.state.Stateful
- * A mixin for being able to save the state of an object to an underlying
- * {@link Ext.state.Provider}.
- */
-Ext.define('Ext.state.Stateful', {
+    frameCls: Ext.baseCSSPrefix + 'frame',
 
-    /* Begin Definitions */
+    frameIdRegex: /[-]frame\d+[TMB][LCR]$/,
 
-   mixins: {
-        observable: 'Ext.util.Observable'
+    frameElementCls: {
+        tl: [],
+        tc: [],
+        tr: [],
+        ml: [],
+        mc: [],
+        mr: [],
+        bl: [],
+        bc: [],
+        br: []
     },
 
-    requires: ['Ext.state.Manager'],
+    frameTpl: [
+        '<tpl if="top">',
+            '<tpl if="left"><div id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl></tpl>" style="background-position: {tl}; padding-left: {frameWidth}px" role="presentation"></tpl>',
+                '<tpl if="right"><div id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl></tpl>" style="background-position: {tr}; padding-right: {frameWidth}px" role="presentation"></tpl>',
+                    '<div id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl></tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></div>',
+                '<tpl if="right"></div></tpl>',
+            '<tpl if="left"></div></tpl>',
+        '</tpl>',
+        '<tpl if="left"><div id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl></tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></tpl>',
+            '<tpl if="right"><div id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl></tpl>" style="background-position: {mr}; padding-right: {frameWidth}px" role="presentation"></tpl>',
+                '<div id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl></tpl>" role="presentation"></div>',
+            '<tpl if="right"></div></tpl>',
+        '<tpl if="left"></div></tpl>',
+        '<tpl if="bottom">',
+            '<tpl if="left"><div id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl></tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></tpl>',
+                '<tpl if="right"><div id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl></tpl>" style="background-position: {br}; padding-right: {frameWidth}px" role="presentation"></tpl>',
+                    '<div id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl></tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></div>',
+                '<tpl if="right"></div></tpl>',
+            '<tpl if="left"></div></tpl>',
+        '</tpl>'
+    ],
 
-    /* End Definitions */
+    frameTableTpl: [
+        '<table><tbody>',
+            '<tpl if="top">',
+                '<tr>',
+                    '<tpl if="left"><td id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl></tpl>" style="background-position: {tl}; padding-left:{frameWidth}px" role="presentation"></td></tpl>',
+                    '<td id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl></tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></td>',
+                    '<tpl if="right"><td id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl></tpl>" style="background-position: {tr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
+                '</tr>',
+            '</tpl>',
+            '<tr>',
+                '<tpl if="left"><td id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl></tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
+                '<td id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl></tpl>" style="background-position: 0 0;" role="presentation"></td>',
+                '<tpl if="right"><td id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl></tpl>" style="background-position: {mr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
+            '</tr>',
+            '<tpl if="bottom">',
+                '<tr>',
+                    '<tpl if="left"><td id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl></tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
+                    '<td id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl></tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></td>',
+                    '<tpl if="right"><td id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl></tpl>" style="background-position: {br}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
+                '</tr>',
+            '</tpl>',
+        '</tbody></table>'
+    ],
 
-    /**
-     * @cfg {Boolean} stateful
-     * <p>A flag which causes the object to attempt to restore the state of
-     * internal properties from a saved state on startup. The object must have
-     * a <code>{@link #stateId}</code> for state to be managed.
-     * Auto-generated ids are not guaranteed to be stable across page loads and
-     * cannot be relied upon to save and restore the same state for a object.<p>
-     * <p>For state saving to work, the state manager's provider must have been
-     * set to an implementation of {@link Ext.state.Provider} which overrides the
-     * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
-     * methods to save and recall name/value pairs. A built-in implementation,
-     * {@link Ext.state.CookieProvider} is available.</p>
-     * <p>To set the state provider for the current page:</p>
-     * <pre><code>
-Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
-    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
-}));
-     * </code></pre>
-     * <p>A stateful object attempts to save state when one of the events
-     * listed in the <code>{@link #stateEvents}</code> configuration fires.</p>
-     * <p>To save state, a stateful object first serializes its state by
-     * calling <b><code>{@link #getState}</code></b>. By default, this function does
-     * nothing. The developer must provide an implementation which returns an
-     * object hash which represents the restorable state of the object.</p>
-     * <p>The value yielded by getState is passed to {@link Ext.state.Manager#set}
-     * which uses the configured {@link Ext.state.Provider} to save the object
-     * keyed by the <code>{@link #stateId}</code></p>.
-     * <p>During construction, a stateful object attempts to <i>restore</i>
-     * its state by calling {@link Ext.state.Manager#get} passing the
-     * <code>{@link #stateId}</code></p>
-     * <p>The resulting object is passed to <b><code>{@link #applyState}</code></b>.
-     * The default implementation of <code>{@link #applyState}</code> simply copies
-     * properties into the object, but a developer may override this to support
-     * more behaviour.</p>
-     * <p>You can perform extra processing on state save and restore by attaching
-     * handlers to the {@link #beforestaterestore}, {@link #staterestore},
-     * {@link #beforestatesave} and {@link #statesave} events.</p>
-     */
-    stateful: true,
+    
+    initFrame : function() {
+        if (Ext.supports.CSS3BorderRadius) {
+            return false;
+        }
 
-    /**
-     * @cfg {String} stateId
-     * The unique id for this object to use for state management purposes.
-     * <p>See {@link #stateful} for an explanation of saving and restoring state.</p>
-     */
+        var me = this,
+            frameInfo = me.getFrameInfo(),
+            frameWidth = frameInfo.width,
+            frameTpl = me.getFrameTpl(frameInfo.table),
+            frameGenId;
 
-    /**
-     * @cfg {Array} stateEvents
-     * <p>An array of events that, when fired, should trigger this object to
-     * save its state (defaults to none). <code>stateEvents</code> may be any type
-     * of event supported by this object, including browser or custom events
-     * (e.g., <tt>['click', 'customerchange']</tt>).</p>
-     * <p>See <code>{@link #stateful}</code> for an explanation of saving and
-     * restoring object state.</p>
-     */
+        if (me.frame) {
+            
+            
+            me.frameGenId = frameGenId = (me.frameGenId || 0) + 1;
+            frameGenId = me.id + '-frame' + frameGenId;
 
-    /**
-     * @cfg {Number} saveBuffer A buffer to be applied if many state events are fired within
-     * a short period. Defaults to 100.
-     */
-    saveDelay: 100,
+            
+            frameTpl.insertFirst(me.el, Ext.apply({}, {
+                fgid:       frameGenId,
+                ui:         me.ui,
+                uiCls:      me.uiCls,
+                frameCls:   me.frameCls,
+                baseCls:    me.baseCls,
+                frameWidth: frameWidth,
+                top:        !!frameInfo.top,
+                left:       !!frameInfo.left,
+                right:      !!frameInfo.right,
+                bottom:     !!frameInfo.bottom
+            }, me.getFramePositions(frameInfo)));
 
-    autoGenIdRe: /^((\w+-)|(ext-comp-))\d{4,}$/i,
+            
+            me.frameBody = me.el.down('.' + me.frameCls + '-mc');
 
-    constructor: function(config) {
-        var me = this;
+            
+            me.removeChildEls(function (c) {
+                return c.id && me.frameIdRegex.test(c.id);
+            });
 
-        config = config || {};
-        if (Ext.isDefined(config.stateful)) {
-            me.stateful = config.stateful;
-        }
-        if (Ext.isDefined(config.saveDelay)) {
-            me.saveDelay = config.saveDelay;
+            
+            Ext.each(['TL','TC','TR','ML','MC','MR','BL','BC','BR'], function (suffix) {
+                me.childEls.push({ name: 'frame' + suffix, id: frameGenId + suffix });
+            });
         }
-        me.stateId = me.stateId || config.stateId;
+    },
 
-        if (!me.stateEvents) {
-            me.stateEvents = [];
-        }
-        if (config.stateEvents) {
-            me.stateEvents.concat(config.stateEvents);
+    updateFrame: function() {
+        if (Ext.supports.CSS3BorderRadius) {
+            return false;
         }
-        this.addEvents(
-            /**
-             * @event beforestaterestore
-             * Fires before the state of the object is restored. Return false from an event handler to stop the restore.
-             * @param {Ext.state.Stateful} this
-             * @param {Object} state The hash of state values returned from the StateProvider. If this
-             * event is not vetoed, then the state object is passed to <b><tt>applyState</tt></b>. By default,
-             * that simply copies property values into this object. The method maybe overriden to
-             * provide custom state restoration.
-             */
-            'beforestaterestore',
-
-            /**
-             * @event staterestore
-             * Fires after the state of the object is restored.
-             * @param {Ext.state.Stateful} this
-             * @param {Object} state The hash of state values returned from the StateProvider. This is passed
-             * to <b><tt>applyState</tt></b>. By default, that simply copies property values into this
-             * object. The method maybe overriden to provide custom state restoration.
-             */
-            'staterestore',
 
-            /**
-             * @event beforestatesave
-             * Fires before the state of the object is saved to the configured state provider. Return false to stop the save.
-             * @param {Ext.state.Stateful} this
-             * @param {Object} state The hash of state values. This is determined by calling
-             * <b><tt>getState()</tt></b> on the object. This method must be provided by the
-             * developer to return whetever representation of state is required, by default, Ext.state.Stateful
-             * has a null implementation.
-             */
-            'beforestatesave',
+        var me = this,
+            wasTable = this.frameSize && this.frameSize.table,
+            oldFrameTL = this.frameTL,
+            oldFrameBL = this.frameBL,
+            oldFrameML = this.frameML,
+            oldFrameMC = this.frameMC,
+            newMCClassName;
 
-            /**
-             * @event statesave
-             * Fires after the state of the object is saved to the configured state provider.
-             * @param {Ext.state.Stateful} this
-             * @param {Object} state The hash of state values. This is determined by calling
-             * <b><tt>getState()</tt></b> on the object. This method must be provided by the
-             * developer to return whetever representation of state is required, by default, Ext.state.Stateful
-             * has a null implementation.
-             */
-            'statesave'
-        );
-        me.mixins.observable.constructor.call(me);
-        if (me.stateful !== false) {
-            me.initStateEvents();
-            me.initState();
-        }
-    },
+        this.initFrame();
 
-    /**
-     * Initializes any state events for this object.
-     * @private
-     */
-    initStateEvents: function() {
-        this.addStateEvents(this.stateEvents);
-    },
+        if (oldFrameMC) {
+            if (me.frame) {
+                
+                delete me.frameTL;
+                delete me.frameTC;
+                delete me.frameTR;
+                delete me.frameML;
+                delete me.frameMC;
+                delete me.frameMR;
+                delete me.frameBL;
+                delete me.frameBC;
+                delete me.frameBR;
+                this.applyRenderSelectors();
 
-    /**
-     * Add events that will trigger the state to be saved.
-     * @param {String/Array} events The event name or an array of event names.
-     */
-    addStateEvents: function(events){
-        if (!Ext.isArray(events)) {
-            events = [events];
-        }
+                
+                newMCClassName = this.frameMC.dom.className;
 
-        var me = this,
-            i = 0,
-            len = events.length;
+                
+                oldFrameMC.insertAfter(this.frameMC);
+                this.frameMC.remove();
 
-        for (; i < len; ++i) {
-            me.on(events[i], me.onStateChange, me);
-        }
-    },
+                
+                this.frameBody = this.frameMC = oldFrameMC;
 
-    /**
-     * This method is called when any of the {@link #stateEvents} are fired.
-     * @private
-     */
-    onStateChange: function(){
-        var me = this,
-            delay = me.saveDelay;
+                
+                oldFrameMC.dom.className = newMCClassName;
 
-        if (delay > 0) {
-            if (!me.stateTask) {
-                me.stateTask = Ext.create('Ext.util.DelayedTask', me.saveState, me);
+                
+                if (wasTable) {
+                    me.el.query('> table')[1].remove();
+                }
+                else {
+                    if (oldFrameTL) {
+                        oldFrameTL.remove();
+                    }
+                    if (oldFrameBL) {
+                        oldFrameBL.remove();
+                    }
+                    oldFrameML.remove();
+                }
             }
-            me.stateTask.delay(me.saveDelay);
-        } else {
-            me.saveState();
-        }
-    },
-
-    /**
-     * Saves the state of the object to the persistence store.
-     * @private
-     */
-    saveState: function() {
-        var me = this,
-            id,
-            state;
+            else {
+                
 
-        if (me.stateful !== false) {
-            id = me.getStateId();
-            if (id) {
-                state = me.getState();
-                if (me.fireEvent('beforestatesave', me, state) !== false) {
-                    Ext.state.Manager.set(id, state);
-                    me.fireEvent('statesave', me, state);
-                }
             }
         }
-    },
-
-    /**
-     * Gets the current state of the object. By default this function returns null,
-     * it should be overridden in subclasses to implement methods for getting the state.
-     * @return {Object} The current state
-     */
-    getState: function(){
-        return null;
-    },
-
-    /**
-     * Applies the state to the object. This should be overridden in subclasses to do
-     * more complex state operations. By default it applies the state properties onto
-     * the current object.
-     * @param {Object} state The state
-     */
-    applyState: function(state) {
-        if (state) {
-            Ext.apply(this, state);
+        else if (me.frame) {
+            this.applyRenderSelectors();
         }
     },
 
-    /**
-     * Gets the state id for this object.
-     * @return {String} The state id, null if not found.
-     */
-    getStateId: function() {
-        var me = this,
-            id = me.stateId;
-
-        if (!id) {
-            id = me.autoGenIdRe.test(String(me.id)) ? null : me.id;
+    getFrameInfo: function() {
+        if (Ext.supports.CSS3BorderRadius) {
+            return false;
         }
-        return id;
-    },
 
-    /**
-     * Initializes the state of the object upon construction.
-     * @private
-     */
-    initState: function(){
         var me = this,
-            id = me.getStateId(),
-            state;
-
-        if (me.stateful !== false) {
-            if (id) {
-                state = Ext.state.Manager.get(id);
-                if (state) {
-                    state = Ext.apply({}, state);
-                    if (me.fireEvent('beforestaterestore', me, state) !== false) {
-                        me.applyState(state);
-                        me.fireEvent('staterestore', me, state);
-                    }
-                }
-            }
-        }
-    },
+            left = me.el.getStyle('background-position-x'),
+            top = me.el.getStyle('background-position-y'),
+            info, frameInfo = false, max;
 
-    /**
-     * Destroys this stateful object.
-     */
-    destroy: function(){
-        var task = this.stateTask;
-        if (task) {
-            task.cancel();
+        
+        
+        if (!left && !top) {
+            info = me.el.getStyle('background-position').split(' ');
+            left = info[0];
+            top = info[1];
         }
-        this.clearListeners();
 
-    }
-
-});
+        
+        
+        
+        if (parseInt(left, 10) >= 1000000 && parseInt(top, 10) >= 1000000) {
+            max = Math.max;
 
-/**
- * @class Ext.AbstractManager
- * @extends Object
- * Base Manager class
- */
-Ext.define('Ext.AbstractManager', {
+            frameInfo = {
+                
+                table: left.substr(0, 3) == '110',
 
-    /* Begin Definitions */
+                
+                vertical: top.substr(0, 3) == '110',
 
-    requires: ['Ext.util.HashMap'],
+                
+                top:    max(left.substr(3, 2), left.substr(5, 2)),
+                right:  max(left.substr(5, 2), top.substr(3, 2)),
+                bottom: max(top.substr(3, 2), top.substr(5, 2)),
+                left:   max(top.substr(5, 2), left.substr(3, 2))
+            };
 
-    /* End Definitions */
+            frameInfo.width = max(frameInfo.top, frameInfo.right, frameInfo.bottom, frameInfo.left);
 
-    typeName: 'type',
+            
+            me.el.setStyle('background-image', 'none');
+        }
 
-    constructor: function(config) {
-        Ext.apply(this, config || {});
+        
+        
+        if (me.frame === true && !frameInfo) {
+        }
 
-        /**
-         * Contains all of the items currently managed
-         * @property all
-         * @type Ext.util.MixedCollection
-         */
-        this.all = Ext.create('Ext.util.HashMap');
+        me.frame = me.frame || !!frameInfo;
+        me.frameSize = frameInfo || false;
 
-        this.types = {};
+        return frameInfo;
     },
 
-    /**
-     * Returns an item by id.
-     * For additional details see {@link Ext.util.HashMap#get}.
-     * @param {String} id The id of the item
-     * @return {Mixed} The item, <code>undefined</code> if not found.
-     */
-    get : function(id) {
-        return this.all.get(id);
-    },
+    getFramePositions: function(frameInfo) {
+        var me = this,
+            frameWidth = frameInfo.width,
+            dock = me.dock,
+            positions, tc, bc, ml, mr;
 
-    /**
-     * Registers an item to be managed
-     * @param {Mixed} item The item to register
-     */
-    register: function(item) {
-        this.all.add(item);
-    },
+        if (frameInfo.vertical) {
+            tc = '0 -' + (frameWidth * 0) + 'px';
+            bc = '0 -' + (frameWidth * 1) + 'px';
 
-    /**
-     * Unregisters an item by removing it from this manager
-     * @param {Mixed} item The item to unregister
-     */
-    unregister: function(item) {
-        this.all.remove(item);
-    },
+            if (dock && dock == "right") {
+                tc = 'right -' + (frameWidth * 0) + 'px';
+                bc = 'right -' + (frameWidth * 1) + 'px';
+            }
 
-    /**
-     * <p>Registers a new item constructor, keyed by a type key.
-     * @param {String} type The mnemonic string by which the class may be looked up.
-     * @param {Constructor} cls The new instance class.
-     */
-    registerType : function(type, cls) {
-        this.types[type] = cls;
-        cls[this.typeName] = type;
-    },
+            positions = {
+                tl: '0 -' + (frameWidth * 0) + 'px',
+                tr: '0 -' + (frameWidth * 1) + 'px',
+                bl: '0 -' + (frameWidth * 2) + 'px',
+                br: '0 -' + (frameWidth * 3) + 'px',
 
-    /**
-     * Checks if an item type is registered.
-     * @param {String} type The mnemonic string by which the class may be looked up
-     * @return {Boolean} Whether the type is registered.
-     */
-    isRegistered : function(type){
-        return this.types[type] !== undefined;
-    },
+                ml: '-' + (frameWidth * 1) + 'px 0',
+                mr: 'right 0',
 
-    /**
-     * Creates and returns an instance of whatever this manager manages, based on the supplied type and config object
-     * @param {Object} config The config object
-     * @param {String} defaultType If no type is discovered in the config object, we fall back to this type
-     * @return {Mixed} The instance of whatever this manager is managing
-     */
-    create: function(config, defaultType) {
-        var type        = config[this.typeName] || config.type || defaultType,
-            Constructor = this.types[type];
+                tc: tc,
+                bc: bc
+            };
+        } else {
+            ml = '-' + (frameWidth * 0) + 'px 0';
+            mr = 'right 0';
 
+            if (dock && dock == "bottom") {
+                ml = 'left bottom';
+                mr = 'right bottom';
+            }
 
-        return new Constructor(config);
-    },
+            positions = {
+                tl: '0 -' + (frameWidth * 2) + 'px',
+                tr: 'right -' + (frameWidth * 3) + 'px',
+                bl: '0 -' + (frameWidth * 4) + 'px',
+                br: 'right -' + (frameWidth * 5) + 'px',
 
-    /**
-     * Registers a function that will be called when an item with the specified id is added to the manager. This will happen on instantiation.
-     * @param {String} id The item id
-     * @param {Function} fn The callback function. Called with a single parameter, the item.
-     * @param {Object} scope The scope (<code>this</code> reference) in which the callback is executed. Defaults to the item.
-     */
-    onAvailable : function(id, fn, scope){
-        var all = this.all,
-            item;
-        
-        if (all.containsKey(id)) {
-            item = all.get(id);
-            fn.call(scope || item, item);
-        } else {
-            all.on('add', function(map, key, item){
-                if (key == id) {
-                    fn.call(scope || item, item);
-                    all.un('add', fn, scope);
-                }
-            });
+                ml: ml,
+                mr: mr,
+
+                tc: '0 -' + (frameWidth * 0) + 'px',
+                bc: '0 -' + (frameWidth * 1) + 'px'
+            };
         }
+
+        return positions;
     },
+
     
-    /**
-     * Executes the specified function once for each item in the collection.
-     * Returning false from the function will cease iteration.
-     * 
-     * The paramaters passed to the function are:
-     * <div class="mdetail-params"><ul>
-     * <li><b>key</b> : String<p class="sub-desc">The key of the item</p></li>
-     * <li><b>value</b> : Number<p class="sub-desc">The value of the item</p></li>
-     * <li><b>length</b> : Number<p class="sub-desc">The total number of items in the collection</p></li>
-     * </ul></div>
-     * @param {Object} fn The function to execute.
-     * @param {Object} scope The scope to execute in. Defaults to <tt>this</tt>.
-     */
-    each: function(fn, scope){
-        this.all.each(fn, scope || this);    
+    getFrameTpl : function(table) {
+        return table ? this.getTpl('frameTableTpl') : this.getTpl('frameTpl');
     },
+
     
-    /**
-     * Gets the number of items in the collection.
-     * @return {Number} The number of items in the collection.
-     */
-    getCount: function(){
-        return this.all.getCount();
-    }
-});
+    initCls: function() {
+        var me = this,
+            cls = [];
 
-/**
- * @class Ext.PluginManager
- * @extends Ext.AbstractManager
- * <p>Provides a registry of available Plugin <i>classes</i> indexed by a mnemonic code known as the Plugin's ptype.
- * The <code>{@link Ext.Component#xtype xtype}</code> provides a way to avoid instantiating child Components
- * when creating a full, nested config object for a complete Ext page.</p>
- * <p>A child Component may be specified simply as a <i>config object</i>
- * as long as the correct <code>{@link Ext.Component#xtype xtype}</code> is specified so that if and when the Component
- * needs rendering, the correct type can be looked up for lazy instantiation.</p>
- * <p>For a list of all available <code>{@link Ext.Component#xtype xtypes}</code>, see {@link Ext.Component}.</p>
- * @singleton
- */
-Ext.define('Ext.PluginManager', {
-    extend: 'Ext.AbstractManager',
-    alternateClassName: 'Ext.PluginMgr',
-    singleton: true,
-    typeName: 'ptype',
+        cls.push(me.baseCls);
 
-    /**
-     * Creates a new Plugin from the specified config object using the
-     * config object's ptype to determine the class to instantiate.
-     * @param {Object} config A configuration object for the Plugin you wish to create.
-     * @param {Constructor} defaultType The constructor to provide the default Plugin type if
-     * the config object does not contain a <code>ptype</code>. (Optional if the config contains a <code>ptype</code>).
-     * @return {Ext.Component} The newly instantiated Plugin.
-     */
-    //create: function(plugin, defaultType) {
-    //    if (plugin instanceof this) {
-    //        return plugin;
-    //    } else {
-    //        var type, config = {};
-    //
-    //        if (Ext.isString(plugin)) {
-    //            type = plugin;
-    //        }
-    //        else {
-    //            type = plugin[this.typeName] || defaultType;
-    //            config = plugin;
-    //        }
-    //
-    //        return Ext.createByAlias('plugin.' + type, config);
-    //    }
-    //},
+        if (Ext.isDefined(me.cmpCls)) {
+            if (Ext.isDefined(Ext.global.console)) {
+                Ext.global.console.warn('Ext.Component: cmpCls has been deprecated. Please use componentCls.');
+            }
+            me.componentCls = me.cmpCls;
+            delete me.cmpCls;
+        }
 
-    create : function(config, defaultType){
-        if (config.init) {
-            return config;
+        if (me.componentCls) {
+            cls.push(me.componentCls);
         } else {
-            return Ext.createByAlias('plugin.' + (config.ptype || defaultType), config);
+            me.componentCls = me.baseCls;
         }
-        
-        // Prior system supported Singleton plugins.
-        //var PluginCls = this.types[config.ptype || defaultType];
-        //if (PluginCls.init) {
-        //    return PluginCls;
-        //} else {
-        //    return new PluginCls(config);
-        //}
+        if (me.cls) {
+            cls.push(me.cls);
+            delete me.cls;
+        }
+
+        return cls.concat(me.additionalCls);
     },
 
-    /**
-     * Returns all plugins registered with the given type. Here, 'type' refers to the type of plugin, not its ptype.
-     * @param {String} type The type to search for
-     * @param {Boolean} defaultsOnly True to only return plugins of this type where the plugin's isDefault property is truthy
-     * @return {Array} All matching plugins
-     */
-    findByType: function(type, defaultsOnly) {
-        var matches = [],
-            types   = this.types;
+    
+    setUI: function(ui) {
+        var me = this,
+            oldUICls = Ext.Array.clone(me.uiCls),
+            newUICls = [],
+            classes = [],
+            cls,
+            i;
 
-        for (var name in types) {
-            if (!types.hasOwnProperty(name)) {
-                continue;
-            }
-            var item = types[name];
+        
+        for (i = 0; i < oldUICls.length; i++) {
+            cls = oldUICls[i];
 
-            if (item.type == type && (!defaultsOnly || (defaultsOnly === true && item.isDefault))) {
-                matches.push(item);
-            }
+            classes = classes.concat(me.removeClsWithUI(cls, true));
+            newUICls.push(cls);
         }
 
-        return matches;
-    }
-}, function() {    
-    /**
-     * Shorthand for {@link Ext.PluginManager#registerType}
-     * @param {String} ptype The ptype mnemonic string by which the Plugin class
-     * may be looked up.
-     * @param {Constructor} cls The new Plugin class.
-     * @member Ext
-     * @method preg
-     */
-    Ext.preg = function() {
-        return Ext.PluginManager.registerType.apply(Ext.PluginManager, arguments);
-    };
-});
-
-/**
- * @class Ext.ComponentManager
- * @extends Ext.AbstractManager
- * <p>Provides a registry of all Components (instances of {@link Ext.Component} or any subclass
- * thereof) on a page so that they can be easily accessed by {@link Ext.Component component}
- * {@link Ext.Component#id id} (see {@link #get}, or the convenience method {@link Ext#getCmp Ext.getCmp}).</p>
- * <p>This object also provides a registry of available Component <i>classes</i>
- * indexed by a mnemonic code known as the Component's {@link Ext.Component#xtype xtype}.
- * The <code>xtype</code> provides a way to avoid instantiating child Components
- * when creating a full, nested config object for a complete Ext page.</p>
- * <p>A child Component may be specified simply as a <i>config object</i>
- * as long as the correct <code>{@link Ext.Component#xtype xtype}</code> is specified so that if and when the Component
- * needs rendering, the correct type can be looked up for lazy instantiation.</p>
- * <p>For a list of all available <code>{@link Ext.Component#xtype xtypes}</code>, see {@link Ext.Component}.</p>
- * @singleton
- */
-Ext.define('Ext.ComponentManager', {
-    extend: 'Ext.AbstractManager',
-    alternateClassName: 'Ext.ComponentMgr',
-    
-    singleton: true,
-    
-    typeName: 'xtype',
-    
-    /**
-     * Creates a new Component from the specified config object using the
-     * config object's xtype to determine the class to instantiate.
-     * @param {Object} config A configuration object for the Component you wish to create.
-     * @param {Constructor} defaultType The constructor to provide the default Component type if
-     * the config object does not contain a <code>xtype</code>. (Optional if the config contains a <code>xtype</code>).
-     * @return {Ext.Component} The newly instantiated Component.
-     */
-    create: function(component, defaultType){
-        if (component instanceof Ext.AbstractComponent) {
-            return component;
-        }
-        else if (Ext.isString(component)) {
-            return Ext.createByAlias('widget.' + component);
-        }
-        else {
-            var type = component.xtype || defaultType,
-                config = component;
-            
-            return Ext.createByAlias('widget.' + type, config);
+        if (classes.length) {
+            me.removeCls(classes);
         }
-    },
 
-    registerType: function(type, cls) {
-        this.types[type] = cls;
-        cls[this.typeName] = type;
-        cls.prototype[this.typeName] = type;
-    }
-});
-/**
- * @class Ext.XTemplate
- * @extends Ext.Template
- * <p>A template class that supports advanced functionality like:<div class="mdetail-params"><ul>
- * <li>Autofilling arrays using templates and sub-templates</li>
- * <li>Conditional processing with basic comparison operators</li>
- * <li>Basic math function support</li>
- * <li>Execute arbitrary inline code with special built-in template variables</li>
- * <li>Custom member functions</li>
- * <li>Many special tags and built-in operators that aren't defined as part of
- * the API, but are supported in the templates that can be created</li>
- * </ul></div></p>
- * <p>XTemplate provides the templating mechanism built into:<div class="mdetail-params"><ul>
- * <li>{@link Ext.view.View}</li>
- * </ul></div></p>
- *
- * The {@link Ext.Template} describes
- * the acceptable parameters to pass to the constructor. The following
- * examples demonstrate all of the supported features.</p>
- *
- * <div class="mdetail-params"><ul>
- *
- * <li><b><u>Sample Data</u></b>
- * <div class="sub-desc">
- * <p>This is the data object used for reference in each code example:</p>
- * <pre><code>
-var data = {
-name: 'Tommy Maintz',
-title: 'Lead Developer',
-company: 'Sencha Inc.',
-email: 'tommy@sencha.com',
-address: '5 Cups Drive',
-city: 'Palo Alto',
-state: 'CA',
-zip: '44102',
-drinks: ['Coffee', 'Soda', 'Water'],
-kids: [{
-        name: 'Joshua',
-        age:3
-    },{
-        name: 'Matthew',
-        age:2
-    },{
-        name: 'Solomon',
-        age:0
-}]
-};
- </code></pre>
- * </div>
- * </li>
- *
- *
- * <li><b><u>Auto filling of arrays</u></b>
- * <div class="sub-desc">
- * <p>The <b><tt>tpl</tt></b> tag and the <b><tt>for</tt></b> operator are used
- * to process the provided data object:
- * <ul>
- * <li>If the value specified in <tt>for</tt> is an array, it will auto-fill,
- * repeating the template block inside the <tt>tpl</tt> tag for each item in the
- * array.</li>
- * <li>If <tt>for="."</tt> is specified, the data object provided is examined.</li>
- * <li>While processing an array, the special variable <tt>{#}</tt>
- * will provide the current array index + 1 (starts at 1, not 0).</li>
- * </ul>
- * </p>
- * <pre><code>
-&lt;tpl <b>for</b>=".">...&lt;/tpl>       // loop through array at root node
-&lt;tpl <b>for</b>="foo">...&lt;/tpl>     // loop through array at foo node
-&lt;tpl <b>for</b>="foo.bar">...&lt;/tpl> // loop through array at foo.bar node
- </code></pre>
- * Using the sample data above:
- * <pre><code>
-var tpl = new Ext.XTemplate(
-    '&lt;p>Kids: ',
-    '&lt;tpl <b>for</b>=".">',       // process the data.kids node
-        '&lt;p>{#}. {name}&lt;/p>',  // use current array index to autonumber
-    '&lt;/tpl>&lt;/p>'
-);
-tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
- </code></pre>
- * <p>An example illustrating how the <b><tt>for</tt></b> property can be leveraged
- * to access specified members of the provided data object to populate the template:</p>
- * <pre><code>
-var tpl = new Ext.XTemplate(
-    '&lt;p>Name: {name}&lt;/p>',
-    '&lt;p>Title: {title}&lt;/p>',
-    '&lt;p>Company: {company}&lt;/p>',
-    '&lt;p>Kids: ',
-    '&lt;tpl <b>for="kids"</b>>',     // interrogate the kids property within the data
-        '&lt;p>{name}&lt;/p>',
-    '&lt;/tpl>&lt;/p>'
-);
-tpl.overwrite(panel.body, data);  // pass the root node of the data object
- </code></pre>
- * <p>Flat arrays that contain values (and not objects) can be auto-rendered
- * using the special <b><tt>{.}</tt></b> variable inside a loop.  This variable
- * will represent the value of the array at the current index:</p>
- * <pre><code>
-var tpl = new Ext.XTemplate(
-    '&lt;p>{name}\&#39;s favorite beverages:&lt;/p>',
-    '&lt;tpl for="drinks">',
-        '&lt;div> - {.}&lt;/div>',
-    '&lt;/tpl>'
-);
-tpl.overwrite(panel.body, data);
- </code></pre>
- * <p>When processing a sub-template, for example while looping through a child array,
- * you can access the parent object's members via the <b><tt>parent</tt></b> object:</p>
- * <pre><code>
-var tpl = new Ext.XTemplate(
-    '&lt;p>Name: {name}&lt;/p>',
-    '&lt;p>Kids: ',
-    '&lt;tpl for="kids">',
-        '&lt;tpl if="age &amp;gt; 1">',
-            '&lt;p>{name}&lt;/p>',
-            '&lt;p>Dad: {<b>parent</b>.name}&lt;/p>',
-        '&lt;/tpl>',
-    '&lt;/tpl>&lt;/p>'
-);
-tpl.overwrite(panel.body, data);
- </code></pre>
- * </div>
- * </li>
- *
- *
- * <li><b><u>Conditional processing with basic comparison operators</u></b>
- * <div class="sub-desc">
- * <p>The <b><tt>tpl</tt></b> tag and the <b><tt>if</tt></b> operator are used
- * to provide conditional checks for deciding whether or not to render specific
- * parts of the template. Notes:<div class="sub-desc"><ul>
- * <li>Double quotes must be encoded if used within the conditional</li>
- * <li>There is no <tt>else</tt> operator &mdash; if needed, two opposite
- * <tt>if</tt> statements should be used.</li>
- * </ul></div>
- * <pre><code>
-&lt;tpl if="age &gt; 1 &amp;&amp; age &lt; 10">Child&lt;/tpl>
-&lt;tpl if="age >= 10 && age < 18">Teenager&lt;/tpl>
-&lt;tpl <b>if</b>="this.isGirl(name)">...&lt;/tpl>
-&lt;tpl <b>if</b>="id==\'download\'">...&lt;/tpl>
-&lt;tpl <b>if</b>="needsIcon">&lt;img src="{icon}" class="{iconCls}"/>&lt;/tpl>
-// no good:
-&lt;tpl if="name == "Tommy"">Hello&lt;/tpl>
-// encode &#34; if it is part of the condition, e.g.
-&lt;tpl if="name == &#38;quot;Tommy&#38;quot;">Hello&lt;/tpl>
- * </code></pre>
- * Using the sample data above:
- * <pre><code>
-var tpl = new Ext.XTemplate(
-    '&lt;p>Name: {name}&lt;/p>',
-    '&lt;p>Kids: ',
-    '&lt;tpl for="kids">',
-        '&lt;tpl if="age &amp;gt; 1">',
-            '&lt;p>{name}&lt;/p>',
-        '&lt;/tpl>',
-    '&lt;/tpl>&lt;/p>'
-);
-tpl.overwrite(panel.body, data);
- </code></pre>
- * </div>
- * </li>
- *
- *
- * <li><b><u>Basic math support</u></b>
- * <div class="sub-desc">
- * <p>The following basic math operators may be applied directly on numeric
- * data values:</p><pre>
- * + - * /
- * </pre>
- * For example:
- * <pre><code>
-var tpl = new Ext.XTemplate(
-    '&lt;p>Name: {name}&lt;/p>',
-    '&lt;p>Kids: ',
-    '&lt;tpl for="kids">',
-        '&lt;tpl if="age &amp;gt; 1">',  // <-- Note that the &gt; is encoded
-            '&lt;p>{#}: {name}&lt;/p>',  // <-- Auto-number each item
-            '&lt;p>In 5 Years: {age+5}&lt;/p>',  // <-- Basic math
-            '&lt;p>Dad: {parent.name}&lt;/p>',
-        '&lt;/tpl>',
-    '&lt;/tpl>&lt;/p>'
-);
-tpl.overwrite(panel.body, data);
- </code></pre>
- * </div>
- * </li>
- *
- *
- * <li><b><u>Execute arbitrary inline code with special built-in template variables</u></b>
- * <div class="sub-desc">
- * <p>Anything between <code>{[ ... ]}</code> is considered code to be executed
- * in the scope of the template. There are some special variables available in that code:
- * <ul>
- * <li><b><tt>values</tt></b>: The values in the current scope. If you are using
- * scope changing sub-templates, you can change what <tt>values</tt> is.</li>
- * <li><b><tt>parent</tt></b>: The scope (values) of the ancestor template.</li>
- * <li><b><tt>xindex</tt></b>: If you are in a looping template, the index of the
- * loop you are in (1-based).</li>
- * <li><b><tt>xcount</tt></b>: If you are in a looping template, the total length
- * of the array you are looping.</li>
- * </ul>
- * This example demonstrates basic row striping using an inline code block and the
- * <tt>xindex</tt> variable:</p>
- * <pre><code>
-var tpl = new Ext.XTemplate(
-    '&lt;p>Name: {name}&lt;/p>',
-    '&lt;p>Company: {[values.company.toUpperCase() + ", " + values.title]}&lt;/p>',
-    '&lt;p>Kids: ',
-    '&lt;tpl for="kids">',
-        '&lt;div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
-        '{name}',
-        '&lt;/div>',
-    '&lt;/tpl>&lt;/p>'
- );
-tpl.overwrite(panel.body, data);
- </code></pre>
- * </div>
- * </li>
- *
- * <li><b><u>Template member functions</u></b>
- * <div class="sub-desc">
- * <p>One or more member functions can be specified in a configuration
- * object passed into the XTemplate constructor for more complex processing:</p>
- * <pre><code>
-var tpl = new Ext.XTemplate(
-    '&lt;p>Name: {name}&lt;/p>',
-    '&lt;p>Kids: ',
-    '&lt;tpl for="kids">',
-        '&lt;tpl if="this.isGirl(name)">',
-            '&lt;p>Girl: {name} - {age}&lt;/p>',
-        '&lt;/tpl>',
-         // use opposite if statement to simulate 'else' processing:
-        '&lt;tpl if="this.isGirl(name) == false">',
-            '&lt;p>Boy: {name} - {age}&lt;/p>',
-        '&lt;/tpl>',
-        '&lt;tpl if="this.isBaby(age)">',
-            '&lt;p>{name} is a baby!&lt;/p>',
-        '&lt;/tpl>',
-    '&lt;/tpl>&lt;/p>',
-    {
-        // XTemplate configuration:
-        compiled: true,
-        // member functions:
-        isGirl: function(name){
-           return name == 'Sara Grace';
-        },
-        isBaby: function(age){
-           return age < 1;
-        }
-    }
-);
-tpl.overwrite(panel.body, data);
- </code></pre>
- * </div>
- * </li>
- *
- * </ul></div>
- *
- * @param {Mixed} config
- */
+        
+        me.removeUIFromElement();
 
-Ext.define('Ext.XTemplate', {
+        
+        me.ui = ui;
 
-    /* Begin Definitions */
+        
+        me.addUIToElement();
 
-    extend: 'Ext.Template',
+        
+        classes = [];
+        for (i = 0; i < newUICls.length; i++) {
+            cls = newUICls[i];
+            classes = classes.concat(me.addClsWithUI(cls, true));
+        }
 
-    statics: {
-        /**
-         * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.
-         * @param {String/HTMLElement} el A DOM element or its id
-         * @return {Ext.Template} The created template
-         * @static
-         */
-        from: function(el, config) {
-            el = Ext.getDom(el);
-            return new this(el.value || el.innerHTML, config || {});
+        if (classes.length) {
+            me.addCls(classes);
         }
     },
 
     
-
-    argsRe: /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
-    nameRe: /^<tpl\b[^>]*?for="(.*?)"/,
-    ifRe: /^<tpl\b[^>]*?if="(.*?)"/,
-    execRe: /^<tpl\b[^>]*?exec="(.*?)"/,
-    constructor: function() {
-        this.callParent(arguments);
-
+    addClsWithUI: function(cls, skip) {
         var me = this,
-            html = me.html,
-            argsRe = me.argsRe,
-            nameRe = me.nameRe,
-            ifRe = me.ifRe,
-            execRe = me.execRe,
-            id = 0,
-            tpls = [],
-            VALUES = 'values',
-            PARENT = 'parent',
-            XINDEX = 'xindex',
-            XCOUNT = 'xcount',
-            RETURN = 'return ',
-            WITHVALUES = 'with(values){ ',
-            m, matchName, matchIf, matchExec, exp, fn, exec, name, i;
+            classes = [],
+            i;
 
-        html = ['<tpl>', html, '</tpl>'].join('');
+        if (!Ext.isArray(cls)) {
+            cls = [cls];
+        }
 
-        while ((m = html.match(argsRe))) {
-            exp = null;
-            fn = null;
-            exec = null;
-            matchName = m[0].match(nameRe);
-            matchIf = m[0].match(ifRe);
-            matchExec = m[0].match(execRe);
+        for (i = 0; i < cls.length; i++) {
+            if (cls[i] && !me.hasUICls(cls[i])) {
+                me.uiCls = Ext.Array.clone(me.uiCls);
+                me.uiCls.push(cls[i]);
 
-            exp = matchIf ? matchIf[1] : null;
-            if (exp) {
-                fn = Ext.functionFactory(VALUES, PARENT, XINDEX, XCOUNT, WITHVALUES + 'try{' + RETURN + Ext.String.htmlDecode(exp) + ';}catch(e){return;}}');
+                classes = classes.concat(me.addUIClsToElement(cls[i]));
             }
+        }
 
-            exp = matchExec ? matchExec[1] : null;
-            if (exp) {
-                exec = Ext.functionFactory(VALUES, PARENT, XINDEX, XCOUNT, WITHVALUES + Ext.String.htmlDecode(exp) + ';}');
-            }
+        if (skip !== true) {
+            me.addCls(classes);
+        }
 
-            name = matchName ? matchName[1] : null;
-            if (name) {
-                if (name === '.') {
-                    name = VALUES;
-                } else if (name === '..') {
-                    name = PARENT;
-                }
-                name = Ext.functionFactory(VALUES, PARENT, 'try{' + WITHVALUES + RETURN + name + ';}}catch(e){return;}');
-            }
+        return classes;
+    },
 
-            tpls.push({
-                id: id,
-                target: name,
-                exec: exec,
-                test: fn,
-                body: m[1] || ''
-            });
+    
+    removeClsWithUI: function(cls, skip) {
+        var me = this,
+            classes = [],
+            i;
 
-            html = html.replace(m[0], '{xtpl' + id + '}');
-            id = id + 1;
+        if (!Ext.isArray(cls)) {
+            cls = [cls];
         }
 
-        for (i = tpls.length - 1; i >= 0; --i) {
-            me.compileTpl(tpls[i]);
+        for (i = 0; i < cls.length; i++) {
+            if (cls[i] && me.hasUICls(cls[i])) {
+                me.uiCls = Ext.Array.remove(me.uiCls, cls[i]);
+
+                classes = classes.concat(me.removeUIClsFromElement(cls[i]));
+            }
         }
-        me.master = tpls[tpls.length - 1];
-        me.tpls = tpls;
-    },
 
-    
-    applySubTemplate: function(id, values, parent, xindex, xcount) {
-        var me = this, t = me.tpls[id];
-        return t.compiled.call(me, values, parent, xindex, xcount);
+        if (skip !== true) {
+            me.removeCls(classes);
+        }
+
+        return classes;
     },
+
     
-    codeRe: /\{\[((?:\\\]|.|\n)*?)\]\}/g,
+    hasUICls: function(cls) {
+        var me = this,
+            uiCls = me.uiCls || [];
 
-    re: /\{([\w-\.\#]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\/]\s?[\d\.\+\-\*\/\(\)]+)?\}/g,
+        return Ext.Array.contains(uiCls, cls);
+    },
 
     
-    compileTpl: function(tpl) {
-        var fm = Ext.util.Format,
-            me = this,
-            useFormat = me.disableFormats !== true,
-            body, bodyReturn, evaluatedFn;
+    addUIClsToElement: function(cls, force) {
+        var me = this,
+            result = [],
+            frameElementCls = me.frameElementCls;
 
-        function fn(m, name, format, args, math) {
-            var v;
-            
-            
-            if (name.substr(0, 4) == 'xtpl') {
-                return "',this.applySubTemplate(" + name.substr(4) + ", values, parent, xindex, xcount),'";
-            }
-            
-            if (name == '.') {
-                
-                v = 'Ext.Array.indexOf(["string", "number", "boolean"], typeof values) > -1 || Ext.isDate(values) ? values : ""';
-            }
+        result.push(Ext.baseCSSPrefix + cls);
+        result.push(me.baseCls + '-' + cls);
+        result.push(me.baseCls + '-' + me.ui + '-' + cls);
 
+        if (!force && me.frame && !Ext.supports.CSS3BorderRadius) {
             
-            else if (name == '#') {
-                v = 'xindex';
-            }
-            else if (name.substr(0, 7) == "parent.") {
-                v = name;
-            }
-            
-            else if (name.indexOf('.') != -1) {
-                v = "values." + name;
-            }
+            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
+                classes, i, j, el;
 
             
-            else {
-                v = "values['" + name + "']";
-            }
-            if (math) {
-                v = '(' + v + math + ')';
-            }
-            if (format && useFormat) {
-                args = args ? ',' + args : "";
-                if (format.substr(0, 5) != "this.") {
-                    format = "fm." + format + '(';
-                }
-                else {
-                    format = 'this.' + format.substr(5) + '(';
+            for (i = 0; i < els.length; i++) {
+                el = me['frame' + els[i].toUpperCase()];
+                classes = [me.baseCls + '-' + me.ui + '-' + els[i], me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i]];
+                if (el && el.dom) {
+                    el.addCls(classes);
+                } else {
+                    for (j = 0; j < classes.length; j++) {
+                        if (Ext.Array.indexOf(frameElementCls[els[i]], classes[j]) == -1) {
+                            frameElementCls[els[i]].push(classes[j]);
+                        }
+                    }
                 }
             }
-            else {
-                args = '';
-                format = "(" + v + " === undefined ? '' : ";
-            }
-            return "'," + format + v + args + "),'";
-        }
-
-        function codeFn(m, code) {
-            
-            return "',(" + code.replace(me.compileARe, "'") + "),'";
         }
 
-        bodyReturn = tpl.body.replace(me.compileBRe, '\\n').replace(me.compileCRe, "\\'").replace(me.re, fn).replace(me.codeRe, codeFn);
-        body = "evaluatedFn = function(values, parent, xindex, xcount){return ['" + bodyReturn + "'].join('');};";
-        eval(body);
+        me.frameElementCls = frameElementCls;
 
-        tpl.compiled = function(values, parent, xindex, xcount) {
-            var vs,
-                length,
-                buffer,
-                i;
+        return result;
+    },
 
-            if (tpl.test && !tpl.test.call(me, values, parent, xindex, xcount)) {
-                return '';
-            }
+    
+    removeUIClsFromElement: function(cls, force) {
+        var me = this,
+            result = [],
+            frameElementCls = me.frameElementCls;
 
-            vs = tpl.target ? tpl.target.call(me, values, parent) : values;
-            if (!vs) {
-               return '';
-            }
+        result.push(Ext.baseCSSPrefix + cls);
+        result.push(me.baseCls + '-' + cls);
+        result.push(me.baseCls + '-' + me.ui + '-' + cls);
 
-            parent = tpl.target ? values : parent;
-            if (tpl.target && Ext.isArray(vs)) {
-                buffer = [];
-                length = vs.length;
-                if (tpl.exec) {
-                    for (i = 0; i < length; i++) {
-                        buffer[buffer.length] = evaluatedFn.call(me, vs[i], parent, i + 1, length);
-                        tpl.exec.call(me, vs[i], parent, i + 1, length);
-                    }
+        if (!force && me.frame && !Ext.supports.CSS3BorderRadius) {
+            
+            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
+                i, el;
+            cls = me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i];
+            
+            for (i = 0; i < els.length; i++) {
+                el = me['frame' + els[i].toUpperCase()];
+                if (el && el.dom) {
+                    el.removeCls(cls);
                 } else {
-                    for (i = 0; i < length; i++) {
-                        buffer[buffer.length] = evaluatedFn.call(me, vs[i], parent, i + 1, length);
-                    }
+                    Ext.Array.remove(frameElementCls[els[i]], cls);
                 }
-                return buffer.join('');
             }
+        }
 
-            if (tpl.exec) {
-                tpl.exec.call(me, vs, parent, xindex, xcount);
-            }
-            return evaluatedFn.call(me, vs, parent, xindex, xcount);
-        };
+        me.frameElementCls = frameElementCls;
 
-        return this;
+        return result;
     },
 
     
-    applyTemplate: function(values) {
-        return this.master.compiled.call(this, values, {}, 1, 1);
-    },
+    addUIToElement: function(force) {
+        var me = this,
+            frameElementCls = me.frameElementCls;
 
-    
-    compile: function() {
-        return this;
-    }
-}, function() {
-    
-    this.createAlias('apply', 'applyTemplate');
-});
+        me.addCls(me.baseCls + '-' + me.ui);
 
+        if (me.frame && !Ext.supports.CSS3BorderRadius) {
+            
+            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
+                i, el, cls;
 
-Ext.define('Ext.util.AbstractMixedCollection', {
-    requires: ['Ext.util.Filter'],
-    
-    mixins: {
-        observable: 'Ext.util.Observable'
+            
+            for (i = 0; i < els.length; i++) {
+                el = me['frame' + els[i].toUpperCase()];
+                cls = me.baseCls + '-' + me.ui + '-' + els[i];
+                if (el) {
+                    el.addCls(cls);
+                } else {
+                    if (!Ext.Array.contains(frameElementCls[els[i]], cls)) {
+                        frameElementCls[els[i]].push(cls);
+                    }
+                }
+            }
+        }
     },
 
-    constructor: function(allowFunctions, keyFn) {
-        var me = this;
+    
+    removeUIFromElement: function() {
+        var me = this,
+            frameElementCls = me.frameElementCls;
 
-        me.items = [];
-        me.map = {};
-        me.keys = [];
-        me.length = 0;
+        me.removeCls(me.baseCls + '-' + me.ui);
 
-        me.addEvents(
+        if (me.frame && !Ext.supports.CSS3BorderRadius) {
             
-            'clear',
+            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
+                i, j, el, cls;
 
             
-            'add',
+            for (i = 0; i < els.length; i++) {
+                el = me['frame' + els[i].toUpperCase()];
+                cls = me.baseCls + '-' + me.ui + '-' + els[i];
 
-            
-            'replace',
+                if (el) {
+                    el.removeCls(cls);
+                } else {
+                    Ext.Array.remove(frameElementCls[els[i]], cls);
+                }
+            }
+        }
+    },
 
-            
-            'remove'
-        );
+    getElConfig : function() {
+        if (Ext.isString(this.autoEl)) {
+            this.autoEl = {
+                tag: this.autoEl
+            };
+        }
 
-        me.allowFunctions = allowFunctions === true;
+        var result = this.autoEl || {tag: 'div'};
+        result.id = this.id;
+        return result;
+    },
 
-        if (keyFn) {
-            me.getKey = keyFn;
+    
+    getInsertPosition: function(position) {
+        
+        if (position !== undefined) {
+            if (Ext.isNumber(position)) {
+                position = this.container.dom.childNodes[position];
+            }
+            else {
+                position = Ext.getDom(position);
+            }
         }
 
-        me.mixins.observable.constructor.call(me);
+        return position;
     },
-    
-    
-    allowFunctions : false,
 
     
-    add : function(key, obj){
-        var me = this,
-            myObj = obj,
-            myKey = key,
-            old;
+    initContainer: function(container) {
+        var me = this;
 
-        if (arguments.length == 1) {
-            myObj = myKey;
-            myKey = me.getKey(myObj);
+        
+        
+        
+        if (!container && me.el) {
+            container = me.el.dom.parentNode;
+            me.allowDomMove = false;
         }
-        if (typeof myKey != 'undefined' && myKey !== null) {
-            old = me.map[myKey];
-            if (typeof old != 'undefined') {
-                return me.replace(myKey, myObj);
-            }
-            me.map[myKey] = myObj;
+
+        me.container = Ext.get(container);
+
+        if (me.ctCls) {
+            me.container.addCls(me.ctCls);
         }
-        me.length++;
-        me.items.push(myObj);
-        me.keys.push(myKey);
-        me.fireEvent('add', me.length - 1, myObj, myKey);
-        return myObj;
-    },
 
-    
-    getKey : function(o){
-         return o.id;
+        return me.container;
     },
 
     
-    replace : function(key, o){
-        var me = this,
-            old,
-            index;
+    initRenderData: function() {
+        var me = this;
 
-        if (arguments.length == 1) {
-            o = arguments[0];
-            key = me.getKey(o);
-        }
-        old = me.map[key];
-        if (typeof key == 'undefined' || key === null || typeof old == 'undefined') {
-             return me.add(key, o);
-        }
-        index = me.indexOfKey(key);
-        me.items[index] = o;
-        me.map[key] = o;
-        me.fireEvent('replace', key, old, o);
-        return o;
+        return Ext.applyIf(me.renderData, {
+            id: me.id,
+            ui: me.ui,
+            uiCls: me.uiCls,
+            baseCls: me.baseCls,
+            componentCls: me.componentCls,
+            frame: me.frame
+        });
     },
 
     
-    addAll : function(objs){
+    getTpl: function(name) {
         var me = this,
-            i = 0,
-            args,
-            len,
-            key;
+            prototype = me.self.prototype,
+            ownerPrototype,
+            tpl;
 
-        if (arguments.length > 1 || Ext.isArray(objs)) {
-            args = arguments.length > 1 ? arguments : objs;
-            for (len = args.length; i < len; i++) {
-                me.add(args[i]);
+        if (me.hasOwnProperty(name)) {
+            tpl = me[name];
+            if (tpl && !(tpl instanceof Ext.XTemplate)) {
+                me[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);
             }
-        } else {
-            for (key in objs) {
-                if (objs.hasOwnProperty(key)) {
-                    if (me.allowFunctions || typeof objs[key] != 'function') {
-                        me.add(key, objs[key]);
+
+            return me[name];
+        }
+
+        if (!(prototype[name] instanceof Ext.XTemplate)) {
+            ownerPrototype = prototype;
+
+            do {
+                if (ownerPrototype.hasOwnProperty(name)) {
+                    tpl = ownerPrototype[name];
+                    if (tpl && !(tpl instanceof Ext.XTemplate)) {
+                        ownerPrototype[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);
+                        break;
                     }
                 }
-            }
+
+                ownerPrototype = ownerPrototype.superclass;
+            } while (ownerPrototype);
         }
+
+        return prototype[name];
     },
 
     
-    each : function(fn, scope){
-        var items = [].concat(this.items), 
-            i = 0,
-            len = items.length,
-            item;
-
-        for (; i < len; i++) {
-            item = items[i];
-            if (fn.call(scope || item, item, i, len) === false) {
-                break;
-            }
-        }
+    initRenderTpl: function() {
+        return this.getTpl('renderTpl');
     },
 
     
-    eachKey : function(fn, scope){
-        var keys = this.keys,
-            items = this.items,
-            i = 0,
-            len = keys.length;
+    initStyles: function() {
+        var style = {},
+            me = this,
+            Element = Ext.Element;
 
-        for (; i < len; i++) {
-            fn.call(scope || window, keys[i], items[i], i, len);
+        if (Ext.isString(me.style)) {
+            style = Element.parseStyles(me.style);
+        } else {
+            style = Ext.apply({}, me.style);
         }
-    },
-
-    
-    findBy : function(fn, scope) {
-        var keys = this.keys,
-            items = this.items,
-            i = 0,
-            len = items.length;
 
-        for (; i < len; i++) {
-            if (fn.call(scope || window, items[i], keys[i])) {
-                return items[i];
-            }
+        
+        
+        if (me.padding !== undefined) {
+            style.padding = Element.unitizeBox((me.padding === true) ? 5 : me.padding);
         }
-        return null;
-    },
 
-    find : function() {
-        if (Ext.isDefined(Ext.global.console)) {
-            Ext.global.console.warn('Ext.util.MixedCollection: find has been deprecated. Use findBy instead.');
+        if (me.margin !== undefined) {
+            style.margin = Element.unitizeBox((me.margin === true) ? 5 : me.margin);
         }
-        return this.findBy.apply(this, arguments);
+
+        delete me.style;
+        return style;
     },
 
     
-    insert : function(index, key, obj){
+    initContent: function() {
         var me = this,
-            myKey = key,
-            myObj = obj;
+            target = me.getTargetEl(),
+            contentEl,
+            pre;
 
-        if (arguments.length == 2) {
-            myObj = myKey;
-            myKey = me.getKey(myObj);
-        }
-        if (me.containsKey(myKey)) {
-            me.suspendEvents();
-            me.removeAtKey(myKey);
-            me.resumeEvents();
+        if (me.html) {
+            target.update(Ext.DomHelper.markup(me.html));
+            delete me.html;
         }
-        if (index >= me.length) {
-            return me.add(myKey, myObj);
+
+        if (me.contentEl) {
+            contentEl = Ext.get(me.contentEl);
+            pre = Ext.baseCSSPrefix;
+            contentEl.removeCls([pre + 'hidden', pre + 'hide-display', pre + 'hide-offsets', pre + 'hide-nosize']);
+            target.appendChild(contentEl.dom);
         }
-        me.length++;
-        Ext.Array.splice(me.items, index, 0, myObj);
-        if (typeof myKey != 'undefined' && myKey !== null) {
-            me.map[myKey] = myObj;
+
+        if (me.tpl) {
+            
+            if (!me.tpl.isTemplate) {
+                me.tpl = Ext.create('Ext.XTemplate', me.tpl);
+            }
+
+            if (me.data) {
+                me.tpl[me.tplWriteMode](target, me.data);
+                delete me.data;
+            }
         }
-        Ext.Array.splice(me.keys, index, 0, myKey);
-        me.fireEvent('add', index, myObj, myKey);
-        return myObj;
     },
 
     
-    remove : function(o){
-        return this.removeAt(this.indexOf(o));
+    initEvents : function() {
+        var me = this,
+            afterRenderEvents = me.afterRenderEvents,
+            el,
+            property,
+            fn = function(listeners){
+                me.mon(el, listeners);
+            };
+        if (afterRenderEvents) {
+            for (property in afterRenderEvents) {
+                if (afterRenderEvents.hasOwnProperty(property)) {
+                    el = me[property];
+                    if (el && el.on) {
+                        Ext.each(afterRenderEvents[property], fn);
+                    }
+                }
+            }
+        }
     },
 
     
-    removeAll : function(items){
-        Ext.each(items || [], function(item) {
-            this.remove(item);
-        }, this);
+    addChildEls: function () {
+        var me = this,
+            childEls = me.childEls || (me.childEls = []);
 
-        return this;
+        childEls.push.apply(childEls, arguments);
     },
 
     
-    removeAt : function(index){
+    removeChildEls: function (testFn) {
         var me = this,
-            o,
-            key;
+            old = me.childEls,
+            keepers = (me.childEls = []),
+            n, i, cel;
 
-        if (index < me.length && index >= 0) {
-            me.length--;
-            o = me.items[index];
-            Ext.Array.erase(me.items, index, 1);
-            key = me.keys[index];
-            if (typeof key != 'undefined') {
-                delete me.map[key];
+        for (i = 0, n = old.length; i < n; ++i) {
+            cel = old[i];
+            if (!testFn(cel)) {
+                keepers.push(cel);
             }
-            Ext.Array.erase(me.keys, index, 1);
-            me.fireEvent('remove', o, key);
-            return o;
         }
-        return false;
     },
 
     
-    removeAtKey : function(key){
-        return this.removeAt(this.indexOfKey(key));
-    },
+    applyRenderSelectors: function() {
+        var me = this,
+            childEls = me.childEls,
+            selectors = me.renderSelectors,
+            el = me.el,
+            dom = el.dom,
+            baseId, childName, childId, i, selector;
+
+        if (childEls) {
+            baseId = me.id + '-';
+            for (i = childEls.length; i--; ) {
+                childName = childId = childEls[i];
+                if (typeof(childName) != 'string') {
+                    childId = childName.id || (baseId + childName.itemId);
+                    childName = childName.name;
+                } else {
+                    childId = baseId + childId;
+                }
 
-    
-    getCount : function(){
-        return this.length;
-    },
+                
+                
+                me[childName] = el.getById(childId);
+            }
+        }
 
-    
-    indexOf : function(o){
-        return Ext.Array.indexOf(this.items, o);
+        
+        
+        
+        if (selectors) {
+            for (selector in selectors) {
+                if (selectors.hasOwnProperty(selector) && selectors[selector]) {
+                    me[selector] = Ext.get(Ext.DomQuery.selectNode(selectors[selector], dom));
+                }
+            }
+        }
     },
 
     
-    indexOfKey : function(key){
-        return Ext.Array.indexOf(this.keys, key);
+    is: function(selector) {
+        return Ext.ComponentQuery.is(this, selector);
     },
 
     
-    get : function(key) {
-        var me = this,
-            mk = me.map[key],
-            item = mk !== undefined ? mk : (typeof key == 'number') ? me.items[key] : undefined;
-        return typeof item != 'function' || me.allowFunctions ? item : null; 
+    up: function(selector) {
+        var result = this.ownerCt;
+        if (selector) {
+            for (; result; result = result.ownerCt) {
+                if (Ext.ComponentQuery.is(result, selector)) {
+                    return result;
+                }
+            }
+        }
+        return result;
     },
 
     
-    getAt : function(index) {
-        return this.items[index];
-    },
+    nextSibling: function(selector) {
+        var o = this.ownerCt, it, last, idx, c;
+        if (o) {
+            it = o.items;
+            idx = it.indexOf(this) + 1;
+            if (idx) {
+                if (selector) {
+                    for (last = it.getCount(); idx < last; idx++) {
+                        if ((c = it.getAt(idx)).is(selector)) {
+                            return c;
+                        }
+                    }
+                } else {
+                    if (idx < it.getCount()) {
+                        return it.getAt(idx);
+                    }
+                }
+            }
+        }
+        return null;
+    },
 
     
-    getByKey : function(key) {
-        return this.map[key];
+    previousSibling: function(selector) {
+        var o = this.ownerCt, it, idx, c;
+        if (o) {
+            it = o.items;
+            idx = it.indexOf(this);
+            if (idx != -1) {
+                if (selector) {
+                    for (--idx; idx >= 0; idx--) {
+                        if ((c = it.getAt(idx)).is(selector)) {
+                            return c;
+                        }
+                    }
+                } else {
+                    if (idx) {
+                        return it.getAt(--idx);
+                    }
+                }
+            }
+        }
+        return null;
     },
 
     
-    contains : function(o){
-        return Ext.Array.contains(this.items, o);
+    previousNode: function(selector, includeSelf) {
+        var node = this,
+            result,
+            it, len, i;
+
+        
+        if (includeSelf && node.is(selector)) {
+            return node;
+        }
+
+        result = this.prev(selector);
+        if (result) {
+            return result;
+        }
+
+        if (node.ownerCt) {
+            for (it = node.ownerCt.items.items, i = Ext.Array.indexOf(it, node) - 1; i > -1; i--) {
+                if (it[i].query) {
+                    result = it[i].query(selector);
+                    result = result[result.length - 1];
+                    if (result) {
+                        return result;
+                    }
+                }
+            }
+            return node.ownerCt.previousNode(selector, true);
+        }
     },
 
     
-    containsKey : function(key){
-        return typeof this.map[key] != 'undefined';
+    nextNode: function(selector, includeSelf) {
+        var node = this,
+            result,
+            it, len, i;
+
+        
+        if (includeSelf && node.is(selector)) {
+            return node;
+        }
+
+        result = this.next(selector);
+        if (result) {
+            return result;
+        }
+
+        if (node.ownerCt) {
+            for (it = node.ownerCt.items, i = it.indexOf(node) + 1, it = it.items, len = it.length; i < len; i++) {
+                if (it[i].down) {
+                    result = it[i].down(selector);
+                    if (result) {
+                        return result;
+                    }
+                }
+            }
+            return node.ownerCt.nextNode(selector);
+        }
     },
 
     
-    clear : function(){
-        var me = this;
+    getId : function() {
+        return this.id || (this.id = 'ext-comp-' + (this.getAutoId()));
+    },
 
-        me.length = 0;
-        me.items = [];
-        me.keys = [];
-        me.map = {};
-        me.fireEvent('clear');
+    getItemId : function() {
+        return this.itemId || this.id;
     },
 
     
-    first : function() {
-        return this.items[0];
+    getEl : function() {
+        return this.el;
     },
 
     
-    last : function() {
-        return this.items[this.length - 1];
+    getTargetEl: function() {
+        return this.frameBody || this.el;
     },
 
     
-    sum: function(property, root, start, end) {
-        var values = this.extractValues(property, root),
-            length = values.length,
-            sum    = 0,
-            i;
-
-        start = start || 0;
-        end   = (end || end === 0) ? end : length - 1;
-
-        for (i = start; i <= end; i++) {
-            sum += values[i];
+    isXType: function(xtype, shallow) {
+        
+        if (Ext.isFunction(xtype)) {
+            xtype = xtype.xtype;
+            
+        } else if (Ext.isObject(xtype)) {
+            xtype = xtype.statics().xtype;
+            
         }
 
-        return sum;
+        return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1: this.self.xtype == xtype;
     },
 
     
-    collect: function(property, root, allowNull) {
-        var values = this.extractValues(property, root),
-            length = values.length,
-            hits   = {},
-            unique = [],
-            value, strValue, i;
+    getXTypes: function() {
+        var self = this.self,
+            xtypes, parentPrototype, parentXtypes;
 
-        for (i = 0; i < length; i++) {
-            value = values[i];
-            strValue = String(value);
+        if (!self.xtypes) {
+            xtypes = [];
+            parentPrototype = this;
 
-            if ((allowNull || !Ext.isEmpty(value)) && !hits[strValue]) {
-                hits[strValue] = true;
-                unique.push(value);
+            while (parentPrototype) {
+                parentXtypes = parentPrototype.xtypes;
+
+                if (parentXtypes !== undefined) {
+                    xtypes.unshift.apply(xtypes, parentXtypes);
+                }
+
+                parentPrototype = parentPrototype.superclass;
             }
+
+            self.xtypeChain = xtypes;
+            self.xtypes = xtypes.join('/');
         }
 
-        return unique;
+        return self.xtypes;
     },
 
     
-    extractValues: function(property, root) {
-        var values = this.items;
+    update : function(htmlOrData, loadScripts, cb) {
+        var me = this;
 
-        if (root) {
-            values = Ext.Array.pluck(values, root);
+        if (me.tpl && !Ext.isString(htmlOrData)) {
+            me.data = htmlOrData;
+            if (me.rendered) {
+                me.tpl[me.tplWriteMode](me.getTargetEl(), htmlOrData || {});
+            }
+        } else {
+            me.html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
+            if (me.rendered) {
+                me.getTargetEl().update(me.html, loadScripts, cb);
+            }
         }
 
-        return Ext.Array.pluck(values, property);
+        if (me.rendered) {
+            me.doComponentLayout();
+        }
     },
 
     
-    getRange : function(start, end){
+    setVisible : function(visible) {
+        return this[visible ? 'show': 'hide']();
+    },
+
+    
+    isVisible: function(deep) {
         var me = this,
-            items = me.items,
-            range = [],
-            i;
+            child = me,
+            visible = !me.hidden,
+            ancestor = me.ownerCt;
 
-        if (items.length < 1) {
-            return range;
+        
+        me.hiddenAncestor = false;
+        if (me.destroyed) {
+            return false;
         }
 
-        start = start || 0;
-        end = Math.min(typeof end == 'undefined' ? me.length - 1 : end, me.length - 1);
-        if (start <= end) {
-            for (i = start; i <= end; i++) {
-                range[range.length] = items[i];
-            }
-        } else {
-            for (i = start; i >= end; i--) {
-                range[range.length] = items[i];
+        if (deep && visible && me.rendered && ancestor) {
+            while (ancestor) {
+                
+                
+                
+                
+                if (ancestor.hidden || (ancestor.collapsed &&
+                        !(ancestor.getDockedItems && Ext.Array.contains(ancestor.getDockedItems(), child)))) {
+                    
+                    me.hiddenAncestor = ancestor;
+                    visible = false;
+                    break;
+                }
+                child = ancestor;
+                ancestor = ancestor.ownerCt;
             }
         }
-        return range;
+        return visible;
     },
 
     
-    filter : function(property, value, anyMatch, caseSensitive) {
-        var filters = [],
-            filterFn;
+    enable: function(silent) {
+        var me = this;
 
-        
-        if (Ext.isString(property)) {
-            filters.push(Ext.create('Ext.util.Filter', {
-                property     : property,
-                value        : value,
-                anyMatch     : anyMatch,
-                caseSensitive: caseSensitive
-            }));
-        } else if (Ext.isArray(property) || property instanceof Ext.util.Filter) {
-            filters = filters.concat(property);
+        if (me.rendered) {
+            me.el.removeCls(me.disabledCls);
+            me.el.dom.disabled = false;
+            me.onEnable();
         }
 
-        
-        
-        filterFn = function(record) {
-            var isMatch = true,
-                length = filters.length,
-                i;
-
-            for (i = 0; i < length; i++) {
-                var filter = filters[i],
-                    fn     = filter.filterFn,
-                    scope  = filter.scope;
-
-                isMatch = isMatch && fn.call(scope, record);
-            }
+        me.disabled = false;
 
-            return isMatch;
-        };
+        if (silent !== true) {
+            me.fireEvent('enable', me);
+        }
 
-        return this.filterBy(filterFn);
+        return me;
     },
 
     
-    filterBy : function(fn, scope) {
-        var me = this,
-            newMC  = new this.self(),
-            keys   = me.keys,
-            items  = me.items,
-            length = items.length,
-            i;
+    disable: function(silent) {
+        var me = this;
 
-        newMC.getKey = me.getKey;
+        if (me.rendered) {
+            me.el.addCls(me.disabledCls);
+            me.el.dom.disabled = true;
+            me.onDisable();
+        }
 
-        for (i = 0; i < length; i++) {
-            if (fn.call(scope || me, items[i], keys[i])) {
-                newMC.add(keys[i], items[i]);
-            }
+        me.disabled = true;
+
+        if (silent !== true) {
+            me.fireEvent('disable', me);
         }
 
-        return newMC;
+        return me;
     },
 
     
-    findIndex : function(property, value, start, anyMatch, caseSensitive){
-        if(Ext.isEmpty(value, false)){
-            return -1;
+    onEnable: function() {
+        if (this.maskOnDisable) {
+            this.el.unmask();
         }
-        value = this.createValueMatcher(value, anyMatch, caseSensitive);
-        return this.findIndexBy(function(o){
-            return o && value.test(o[property]);
-        }, null, start);
     },
 
     
-    findIndexBy : function(fn, scope, start){
-        var me = this,
-            keys = me.keys,
-            items = me.items,
-            i = start || 0,
-            len = items.length;
+    onDisable : function() {
+        if (this.maskOnDisable) {
+            this.el.mask();
+        }
+    },
 
-        for (; i < len; i++) {
-            if (fn.call(scope || me, items[i], keys[i])) {
-                return i;
-            }
+    
+    isDisabled : function() {
+        return this.disabled;
+    },
+
+    
+    setDisabled : function(disabled) {
+        return this[disabled ? 'disable': 'enable']();
+    },
+
+    
+    isHidden : function() {
+        return this.hidden;
+    },
+
+    
+    addCls : function(className) {
+        var me = this;
+        if (!className) {
+            return me;
         }
-        return -1;
+        if (!Ext.isArray(className)){
+            className = className.replace(me.trimRe, '').split(me.spacesRe);
+        }
+        if (me.rendered) {
+            me.el.addCls(className);
+        }
+        else {
+            me.additionalCls = Ext.Array.unique(me.additionalCls.concat(className));
+        }
+        return me;
     },
 
     
-    createValueMatcher : function(value, anyMatch, caseSensitive, exactMatch) {
-        if (!value.exec) { 
-            var er = Ext.String.escapeRegex;
-            value = String(value);
+    addClass : function() {
+        return this.addCls.apply(this, arguments);
+    },
 
-            if (anyMatch === true) {
-                value = er(value);
+    
+    removeCls : function(className) {
+        var me = this;
+
+        if (!className) {
+            return me;
+        }
+        if (!Ext.isArray(className)){
+            className = className.replace(me.trimRe, '').split(me.spacesRe);
+        }
+        if (me.rendered) {
+            me.el.removeCls(className);
+        }
+        else if (me.additionalCls.length) {
+            Ext.each(className, function(cls) {
+                Ext.Array.remove(me.additionalCls, cls);
+            });
+        }
+        return me;
+    },
+
+
+    addOverCls: function() {
+        var me = this;
+        if (!me.disabled) {
+            me.el.addCls(me.overCls);
+        }
+    },
+
+    removeOverCls: function() {
+        this.el.removeCls(this.overCls);
+    },
+
+    addListener : function(element, listeners, scope, options) {
+        var me = this,
+            fn,
+            option;
+
+        if (Ext.isString(element) && (Ext.isObject(listeners) || options && options.element)) {
+            if (options.element) {
+                fn = listeners;
+
+                listeners = {};
+                listeners[element] = fn;
+                element = options.element;
+                if (scope) {
+                    listeners.scope = scope;
+                }
+
+                for (option in options) {
+                    if (options.hasOwnProperty(option)) {
+                        if (me.eventOptionsRe.test(option)) {
+                            listeners[option] = options[option];
+                        }
+                    }
+                }
+            }
+
+            
+            
+            if (me[element] && me[element].on) {
+                me.mon(me[element], listeners);
             } else {
-                value = '^' + er(value);
-                if (exactMatch === true) {
-                    value += '$';
+                me.afterRenderEvents = me.afterRenderEvents || {};
+                if (!me.afterRenderEvents[element]) {
+                    me.afterRenderEvents[element] = [];
                 }
+                me.afterRenderEvents[element].push(listeners);
             }
-            value = new RegExp(value, caseSensitive ? '' : 'i');
         }
-        return value;
+
+        return me.mixins.observable.addListener.apply(me, arguments);
     },
 
     
-    clone : function() {
+    removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
         var me = this,
-            copy = new this.self(),
-            keys = me.keys,
-            items = me.items,
-            i = 0,
-            len = items.length;
+            element = managedListener.options ? managedListener.options.element : null;
 
-        for(; i < len; i++){
-            copy.add(keys[i], items[i]);
+        if (element) {
+            element = me[element];
+            if (element && element.un) {
+                if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
+                    element.un(managedListener.ename, managedListener.fn, managedListener.scope);
+                    if (!isClear) {
+                        Ext.Array.remove(me.managedListeners, managedListener);
+                    }
+                }
+            }
+        } else {
+            return me.mixins.observable.removeManagedListenerItem.apply(me, arguments);
         }
-        copy.getKey = me.getKey;
-        return copy;
-    }
-});
+    },
 
+    
+    getBubbleTarget : function() {
+        return this.ownerCt;
+    },
 
-Ext.define("Ext.util.Sortable", {
     
-    isSortable: true,
+    isFloating : function() {
+        return this.floating;
+    },
+
     
+    isDraggable : function() {
+        return !!this.draggable;
+    },
+
     
-    defaultSortDirection: "ASC",
+    isDroppable : function() {
+        return !!this.droppable;
+    },
+
     
-    requires: [
-        'Ext.util.Sorter'
-    ],
+    onAdded : function(container, pos) {
+        this.ownerCt = container;
+        this.fireEvent('added', this, container, pos);
+    },
 
-        
     
+    onRemoved : function() {
+        var me = this;
+
+        me.fireEvent('removed', me, me.ownerCt);
+        delete me.ownerCt;
+    },
+
     
-    initSortable: function() {
+    beforeDestroy : Ext.emptyFn,
+    
+    
+    onResize : Ext.emptyFn,
+
+    
+    setSize : function(width, height) {
         var me = this,
-            sorters = me.sorters;
+            layoutCollection;
+
         
+        if (Ext.isObject(width)) {
+            height = width.height;
+            width  = width.width;
+        }
+
         
-        me.sorters = Ext.create('Ext.util.AbstractMixedCollection', false, function(item) {
-            return item.id || item.property;
-        });
-        
-        if (sorters) {
-            me.sorters.addAll(me.decodeSorters(sorters));
-        }
-    },
-
-    
-    sort: function(sorters, direction, where, doSort) {
-        var me = this,
-            sorter, sorterFn,
-            newSorters;
-        
-        if (Ext.isArray(sorters)) {
-            doSort = where;
-            where = direction;
-            newSorters = sorters;
+        if (Ext.isNumber(width)) {
+            width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
         }
-        else if (Ext.isObject(sorters)) {
-            doSort = where;
-            where = direction;
-            newSorters = [sorters];
+        if (Ext.isNumber(height)) {
+            height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
         }
-        else if (Ext.isString(sorters)) {
-            sorter = me.sorters.get(sorters);
 
-            if (!sorter) {
-                sorter = {
-                    property : sorters,
-                    direction: direction
-                };
-                newSorters = [sorter];
-            }
-            else if (direction === undefined) {
-                sorter.toggle();
-            }
-            else {
-                sorter.setDirection(direction);
-            }
-        }
-        
-        if (newSorters && newSorters.length) {
-            newSorters = me.decodeSorters(newSorters);
-            if (Ext.isString(where)) {
-                if (where === 'prepend') {
-                    sorters = me.sorters.clone().items;
-                    
-                    me.sorters.clear();
-                    me.sorters.addAll(newSorters);
-                    me.sorters.addAll(sorters);
-                }
-                else {
-                    me.sorters.addAll(newSorters);
-                }
-            }
-            else {
-                me.sorters.clear();
-                me.sorters.addAll(newSorters);
-            }
+        if (!me.rendered || !me.isVisible()) {
             
-            if (doSort !== false) {
-                me.onBeforeSort(newSorters);
-            }
-        }
-        
-        if (doSort !== false) {
-            sorters = me.sorters.items;
-            if (sorters.length) {
-                
-                sorterFn = function(r1, r2) {
-                    var result = sorters[0].sort(r1, r2),
-                        length = sorters.length,
-                        i;
-
-                        
-                        for (i = 1; i < length; i++) {
-                            result = result || sorters[i].sort.call(this, r1, r2);
-                        }
-
-                    return result;
-                };
-
-                me.doSort(sorterFn);                
+            if (me.hiddenAncestor) {
+                layoutCollection = me.hiddenAncestor.layoutOnShow;
+                layoutCollection.remove(me);
+                layoutCollection.add(me);
             }
-        }
-        
-        return sorters;
-    },
-    
-    onBeforeSort: Ext.emptyFn,
-        
-    
-    decodeSorters: function(sorters) {
-        if (!Ext.isArray(sorters)) {
-            if (sorters === undefined) {
-                sorters = [];
-            } else {
-                sorters = [sorters];
+            me.needsLayout = {
+                width: width,
+                height: height,
+                isSetSize: true
+            };
+            if (!me.rendered) {
+                me.width  = (width !== undefined) ? width : me.width;
+                me.height = (height !== undefined) ? height : me.height;
             }
+            return me;
         }
+        me.doComponentLayout(width, height, true);
 
-        var length = sorters.length,
-            Sorter = Ext.util.Sorter,
-            fields = this.model ? this.model.prototype.fields : null,
-            field,
-            config, i;
-
-        for (i = 0; i < length; i++) {
-            config = sorters[i];
-
-            if (!(config instanceof Sorter)) {
-                if (Ext.isString(config)) {
-                    config = {
-                        property: config
-                    };
-                }
-                
-                Ext.applyIf(config, {
-                    root     : this.sortRoot,
-                    direction: "ASC"
-                });
-
-                
-                if (config.fn) {
-                    config.sorterFn = config.fn;
-                }
+        return me;
+    },
 
-                
-                if (typeof config == 'function') {
-                    config = {
-                        sorterFn: config
-                    };
-                }
+    isFixedWidth: function() {
+        var me = this,
+            layoutManagedWidth = me.layoutManagedWidth;
 
-                
-                if (fields && !config.transform) {
-                    field = fields.get(config.property);
-                    config.transform = field ? field.sortType : undefined;
-                }
-                sorters[i] = Ext.create('Ext.util.Sorter', config);
-            }
+        if (Ext.isDefined(me.width) || layoutManagedWidth == 1) {
+            return true;
         }
-
-        return sorters;
-    },
-    
-    getSorters: function() {
-        return this.sorters.items;
-    }
-});
-
-Ext.define('Ext.util.MixedCollection', {
-    extend: 'Ext.util.AbstractMixedCollection',
-    mixins: {
-        sortable: 'Ext.util.Sortable'
+        if (layoutManagedWidth == 2) {
+            return false;
+        }
+        return (me.ownerCt && me.ownerCt.isFixedWidth());
     },
 
-    
-    constructor: function() {
-        var me = this;
-        me.callParent(arguments);
-        me.addEvents('sort');
-        me.mixins.sortable.initSortable.call(me);
-    },
+    isFixedHeight: function() {
+        var me = this,
+            layoutManagedHeight = me.layoutManagedHeight;
 
-    doSort: function(sorterFn) {
-        this.sortBy(sorterFn);
+        if (Ext.isDefined(me.height) || layoutManagedHeight == 1) {
+            return true;
+        }
+        if (layoutManagedHeight == 2) {
+            return false;
+        }
+        return (me.ownerCt && me.ownerCt.isFixedHeight());
     },
 
-    
-    _sort : function(property, dir, fn){
+    setCalculatedSize : function(width, height, callingContainer) {
         var me = this,
-            i, len,
-            dsc   = String(dir).toUpperCase() == 'DESC' ? -1 : 1,
-
-            
-            c     = [],
-            keys  = me.keys,
-            items = me.items;
+            layoutCollection;
 
         
-        fn = fn || function(a, b) {
-            return a - b;
-        };
+        if (Ext.isObject(width)) {
+            callingContainer = width.ownerCt;
+            height = width.height;
+            width  = width.width;
+        }
 
         
-        for(i = 0, len = items.length; i < len; i++){
-            c[c.length] = {
-                key  : keys[i],
-                value: items[i],
-                index: i
-            };
+        if (Ext.isNumber(width)) {
+            width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
+        }
+        if (Ext.isNumber(height)) {
+            height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
         }
 
-        
-        Ext.Array.sort(c, function(a, b){
-            var v = fn(a[property], b[property]) * dsc;
-            if(v === 0){
-                v = (a.index < b.index ? -1 : 1);
+        if (!me.rendered || !me.isVisible()) {
+            
+            if (me.hiddenAncestor) {
+                layoutCollection = me.hiddenAncestor.layoutOnShow;
+                layoutCollection.remove(me);
+                layoutCollection.add(me);
             }
-            return v;
-        });
-
-        
-        for(i = 0, len = c.length; i < len; i++){
-            items[i] = c[i].value;
-            keys[i]  = c[i].key;
+            me.needsLayout = {
+                width: width,
+                height: height,
+                isSetSize: false,
+                ownerCt: callingContainer
+            };
+            return me;
         }
+        me.doComponentLayout(width, height, false, callingContainer);
 
-        me.fireEvent('sort', me);
+        return me;
     },
 
     
-    sortBy: function(sorterFn) {
-        var me     = this,
-            items  = me.items,
-            keys   = me.keys,
-            length = items.length,
-            temp   = [],
-            i;
-
-        
-        for (i = 0; i < length; i++) {
-            temp[i] = {
-                key  : keys[i],
-                value: items[i],
-                index: i
+    doComponentLayout : function(width, height, isSetSize, callingContainer) {
+        var me = this,
+            componentLayout = me.getComponentLayout(),
+            lastComponentSize = componentLayout.lastComponentSize || {
+                width: undefined,
+                height: undefined
             };
-        }
-
-        Ext.Array.sort(temp, function(a, b) {
-            var v = sorterFn(a.value, b.value);
-            if (v === 0) {
-                v = (a.index < b.index ? -1 : 1);
-            }
-
-            return v;
-        });
 
         
-        for (i = 0; i < length; i++) {
-            items[i] = temp[i].value;
-            keys[i]  = temp[i].key;
-        }
         
-        me.fireEvent('sort', me, items, keys);
-    },
-
-    
-    reorder: function(mapping) {
-        var me = this,
-            items = me.items,
-            index = 0,
-            length = items.length,
-            order = [],
-            remaining = [],
-            oldIndex;
-
-        me.suspendEvents();
-
         
-        for (oldIndex in mapping) {
-            order[mapping[oldIndex]] = items[oldIndex];
-        }
-
-        for (index = 0; index < length; index++) {
-            if (mapping[index] == undefined) {
-                remaining.push(items[index]);
+        if (me.rendered && componentLayout) {
+            
+            if (!Ext.isDefined(width)) {
+                if (me.isFixedWidth()) {
+                    width = Ext.isDefined(me.width) ? me.width : lastComponentSize.width;
+                }
+            }
+            
+            if (!Ext.isDefined(height)) {
+                if (me.isFixedHeight()) {
+                    height = Ext.isDefined(me.height) ? me.height : lastComponentSize.height;
+                }
             }
-        }
 
-        for (index = 0; index < length; index++) {
-            if (order[index] == undefined) {
-                order[index] = remaining.shift();
+            if (isSetSize) {
+                me.width = width;
+                me.height = height;
             }
-        }
 
-        me.clear();
-        me.addAll(order);
+            componentLayout.layout(width, height, isSetSize, callingContainer);
+        }
 
-        me.resumeEvents();
-        me.fireEvent('sort', me);
+        return me;
     },
 
     
-    sortByKey : function(dir, fn){
-        this._sort('key', dir, fn || function(a, b){
-            var v1 = String(a).toUpperCase(), v2 = String(b).toUpperCase();
-            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
-        });
-    }
-});
-
-
-Ext.define('Ext.data.StoreManager', {
-    extend: 'Ext.util.MixedCollection',
-    alternateClassName: ['Ext.StoreMgr', 'Ext.data.StoreMgr', 'Ext.StoreManager'],
-    singleton: true,
-    uses: ['Ext.data.ArrayStore'],
-    
-    
+    forceComponentLayout: function () {
+        this.doComponentLayout();
+    },
 
     
-    register : function() {
-        for (var i = 0, s; (s = arguments[i]); i++) {
-            this.add(s);
+    setComponentLayout : function(layout) {
+        var currentLayout = this.componentLayout;
+        if (currentLayout && currentLayout.isLayout && currentLayout != layout) {
+            currentLayout.setOwner(null);
         }
+        this.componentLayout = layout;
+        layout.setOwner(this);
     },
 
-    
-    unregister : function() {
-        for (var i = 0, s; (s = arguments[i]); i++) {
-            this.remove(this.lookup(s));
+    getComponentLayout : function() {
+        var me = this;
+
+        if (!me.componentLayout || !me.componentLayout.isLayout) {
+            me.setComponentLayout(Ext.layout.Layout.create(me.componentLayout, 'autocomponent'));
         }
+        return me.componentLayout;
     },
 
     
-    lookup : function(store) {
-        
-        if (Ext.isArray(store)) {
-            var fields = ['field1'], 
-                expand = !Ext.isArray(store[0]),
-                data = store,
-                i,
-                len;
-                
-            if(expand){
-                data = [];
-                for (i = 0, len = store.length; i < len; ++i) {
-                    data.push([store[i]]);
-                }
-            } else {
-                for(i = 2, len = store[0].length; i <= len; ++i){
-                    fields.push('field' + i);
-                }
-            }
-            return Ext.create('Ext.data.ArrayStore', {
-                data  : data,
-                fields: fields,
-                autoDestroy: true,
-                autoCreated: true,
-                expanded: expand
-            });
-        }
-        
-        if (Ext.isString(store)) {
-            
-            return this.get(store);
-        } else {
-            
-            return Ext.data.AbstractStore.create(store);
+    afterComponentLayout: function(width, height, isSetSize, callingContainer) {
+        var me = this,
+            layout = me.componentLayout,
+            oldSize = me.preLayoutSize;
+
+        ++me.componentLayoutCounter;
+        if (!oldSize || ((width !== oldSize.width) || (height !== oldSize.height))) {
+            me.fireEvent('resize', me, width, height);
         }
     },
 
     
-    getKey : function(o) {
-         return o.storeId;
-    }
-}, function() {    
+    beforeComponentLayout: function(width, height, isSetSize, callingContainer) {
+        this.preLayoutSize = this.componentLayout.lastComponentSize;
+        return true;
+    },
+
     
-    Ext.regStore = function(name, config) {
-        var store;
+    setPosition : function(x, y) {
+        var me = this;
 
-        if (Ext.isObject(name)) {
-            config = name;
-        } else {
-            config.storeId = name;
+        if (Ext.isObject(x)) {
+            y = x.y;
+            x = x.x;
         }
 
-        if (config instanceof Ext.data.Store) {
-            store = config;
-        } else {
-            store = Ext.create('Ext.data.Store', config);
+        if (!me.rendered) {
+            return me;
         }
 
-        return Ext.data.StoreManager.register(store);
-    };
+        if (x !== undefined || y !== undefined) {
+            me.el.setBox(x, y);
+            me.onPosition(x, y);
+            me.fireEvent('move', me, x, y);
+        }
+        return me;
+    },
 
     
-    Ext.getStore = function(name) {
-        return Ext.data.StoreManager.lookup(name);
-    };
-});
-
-
-
-Ext.define('Ext.LoadMask', {
+    onPosition: Ext.emptyFn,
 
     
-
-    mixins: {
-        observable: 'Ext.util.Observable'
+    setWidth : function(width) {
+        return this.setSize(width);
     },
 
-    requires: ['Ext.data.StoreManager'],
-
     
+    setHeight : function(height) {
+        return this.setSize(undefined, height);
+    },
 
     
+    getSize : function() {
+        return this.el.getSize();
+    },
 
     
-    msg : 'Loading...',
-    
-    msgCls : Ext.baseCSSPrefix + 'mask-loading',
-    
-    
-    useMsg: true,
+    getWidth : function() {
+        return this.el.getWidth();
+    },
 
     
-    disabled: false,
+    getHeight : function() {
+        return this.el.getHeight();
+    },
 
     
-    constructor : function(el, config) {
-        var me = this;
+    getLoader: function(){
+        var me = this,
+            autoLoad = me.autoLoad ? (Ext.isObject(me.autoLoad) ? me.autoLoad : {url: me.autoLoad}) : null,
+            loader = me.loader || autoLoad;
 
-        if (el.isComponent) {
-            me.bindComponent(el);
-        } else {
-            me.el = Ext.get(el);
-        }
-        Ext.apply(me, config);
+        if (loader) {
+            if (!loader.isLoader) {
+                me.loader = Ext.create('Ext.ComponentLoader', Ext.apply({
+                    target: me,
+                    autoLoad: autoLoad
+                }, loader));
+            } else {
+                loader.setTarget(me);
+            }
+            return me.loader;
 
-        me.addEvents('beforeshow', 'show', 'hide');
-        if (me.store) {
-            me.bindStore(me.store, true);
         }
-        me.mixins.observable.constructor.call(me, config);
+        return null;
     },
 
-    bindComponent: function(comp) {
+    
+    setLoading : function(load, targetEl) {
         var me = this,
-            listeners = {
-                resize: me.onComponentResize,
-                scope: me
-            };
+            config;
 
-        if (comp.el) {
-            me.onComponentRender(comp);
-        } else {
-            listeners.render = {
-                fn: me.onComponentRender,
-                scope: me,
-                single: true
-            };
+        if (me.rendered) {
+            if (load !== false && !me.collapsed) {
+                if (Ext.isObject(load)) {
+                    config = load;
+                }
+                else if (Ext.isString(load)) {
+                    config = {msg: load};
+                }
+                else {
+                    config = {};
+                }
+                me.loadMask = me.loadMask || Ext.create('Ext.LoadMask', targetEl ? me.getTargetEl() : me.el, config);
+                me.loadMask.show();
+            } else if (me.loadMask) {
+                Ext.destroy(me.loadMask);
+                me.loadMask = null;
+            }
         }
-        me.mon(comp, listeners);
-    },
-
-    
-    onComponentRender: function(comp) {
-        this.el = comp.getContentTarget();
-    },
 
-    
-    onComponentResize: function(comp, w, h) {
-        this.el.isMasked();
+        return me.loadMask;
     },
 
     
-    bindStore : function(store, initial) {
+    setDocked : function(dock, layoutParent) {
         var me = this;
 
-        if (!initial && me.store) {
-            me.mun(me.store, {
-                scope: me,
-                beforeload: me.onBeforeLoad,
-                load: me.onLoad,
-                exception: me.onLoad
-            });
-            if(!store) {
-                me.store = null;
-            }
-        }
-        if (store) {
-            store = Ext.data.StoreManager.lookup(store);
-            me.mon(store, {
-                scope: me,
-                beforeload: me.onBeforeLoad,
-                load: me.onLoad,
-                exception: me.onLoad
-            });
-
-        }
-        me.store = store;
-        if (store && store.isLoading()) {
-            me.onBeforeLoad();
+        me.dock = dock;
+        if (layoutParent && me.ownerCt && me.rendered) {
+            me.ownerCt.doComponentLayout();
         }
+        return me;
     },
 
-    
-    disable : function() {
+    onDestroy : function() {
         var me = this;
 
-       me.disabled = true;
-       if (me.loading) {
-           me.onLoad();
-       }
-    },
-
-    
-    enable : function() {
-        this.disabled = false;
-    },
-
-    
-    isDisabled : function() {
-        return this.disabled;
+        if (me.monitorResize && Ext.EventManager.resizeEvent) {
+            Ext.EventManager.resizeEvent.removeListener(me.setSize, me);
+        }
+        
+        Ext.destroy(
+            me.componentLayout,
+            me.loadMask,
+            me.floatingItems
+        );
     },
 
     
-    onLoad : function() {
-        var me = this;
-
-        me.loading = false;
-        me.el.unmask();
-        me.fireEvent('hide', me, me.el, me.store);
-    },
+    cleanElementRefs: function(){
+        var me = this,
+            i = 0,
+            childEls = me.childEls,
+            selectors = me.renderSelectors,
+            selector,
+            name,
+            len;
 
-    
-    onBeforeLoad : function() {
-        var me = this;
+        if (me.rendered) {
+            if (childEls) {
+                for (len = childEls.length; i < len; ++i) {
+                    name = childEls[i];
+                    if (typeof(name) != 'string') {
+                        name = name.name;
+                    }
+                    delete me[name];
+                }
+            }
 
-        if (!me.disabled && !me.loading && me.fireEvent('beforeshow', me, me.el, me.store) !== false) {
-            if (me.useMsg) {
-                me.el.mask(me.msg, me.msgCls, false);
-            } else {
-                me.el.mask();
+            if (selectors) {
+                for (selector in selectors) {
+                    if (selectors.hasOwnProperty(selector)) {
+                        delete me[selector];
+                    }
+                }
             }
-            
-            me.fireEvent('show', me, me.el, me.store);
-            me.loading = true;
         }
-    },
-
-    
-    show: function() {
-        this.onBeforeLoad();
-    },
-
-    
-    hide: function() {
-        this.onLoad();
+        delete me.rendered;
+        delete me.el;
+        delete me.frameBody;
     },
 
     
     destroy : function() {
-        this.hide();
-        this.clearListeners();
-    }
-});
-
-
-Ext.define('Ext.ComponentLoader', {
-
-    
-    
-    extend: 'Ext.ElementLoader',
-
-    statics: {
-        Renderer: {
-            Data: function(loader, response, active){
-                var success = true;
-                try {
-                    loader.getTarget().update(Ext.decode(response.responseText));
-                } catch (e) {
-                    success = false;
-                }
-                return success;
-            },
-
-            Component: function(loader, response, active){
-                var success = true,
-                    target = loader.getTarget(),
-                    items = [];
-
+        var me = this;
 
-                try {
-                    items = Ext.decode(response.responseText);
-                } catch (e) {
-                    success = false;
-                }
+        if (!me.isDestroyed) {
+            if (me.fireEvent('beforedestroy', me) !== false) {
+                me.destroying = true;
+                me.beforeDestroy();
 
-                if (success) {
-                    if (active.removeAll) {
-                        target.removeAll();
+                if (me.floating) {
+                    delete me.floatParent;
+                    
+                    
+                    if (me.zIndexManager) {
+                        me.zIndexManager.unregister(me);
                     }
-                    target.add(items);
+                } else if (me.ownerCt && me.ownerCt.remove) {
+                    me.ownerCt.remove(me, false);
                 }
-                return success;
-            }
-        }
-    },
 
-    
+                me.onDestroy();
 
-    
-    target: null,
+                
+                Ext.destroy(me.plugins);
 
-    
-    loadMask: false,
-    
-    
+                if (me.rendered) {
+                    me.el.remove();
+                }
 
-    
-    renderer: 'html',
+                me.fireEvent('destroy', me);
+                Ext.ComponentManager.unregister(me);
 
-    
-    setTarget: function(target){
-        var me = this;
-        
-        if (Ext.isString(target)) {
-            target = Ext.getCmp(target);
-        }
+                me.mixins.state.destroy.call(me);
 
-        if (me.target && me.target != target) {
-            me.abort();
+                me.clearListeners();
+                
+                me.cleanElementRefs();
+                me.destroying = false;
+                me.isDestroyed = true;
+            }
         }
-        me.target = target;
-    },
-    
-    
-    removeMask: function(){
-        this.target.setLoading(false);
-    },
-    
-    
-    addMask: function(mask){
-        this.target.setLoading(mask);
     },
 
     
-    
-    setOptions: function(active, options){
-        active.removeAll = Ext.isDefined(options.removeAll) ? options.removeAll : this.removeAll;
+    getPlugin: function(pluginId) {
+        var i = 0,
+            plugins = this.plugins,
+            ln = plugins.length;
+        for (; i < ln; i++) {
+            if (plugins[i].pluginId === pluginId) {
+                return plugins[i];
+            }
+        }
     },
 
     
-    getRenderer: function(renderer){
-        if (Ext.isFunction(renderer)) {
-            return renderer;
-        }
-
-        var renderers = this.statics().Renderer;
-        switch (renderer) {
-            case 'component':
-                return renderers.Component;
-            case 'data':
-                return renderers.Data;
-            default:
-                return Ext.ElementLoader.Renderer.Html;
-        }
+    isDescendantOf: function(container) {
+        return !!this.findParentBy(function(p){
+            return p === container;
+        });
     }
+}, function() {
+    this.createAlias({
+        on: 'addListener',
+        prev: 'previousSibling',
+        next: 'nextSibling'
+    });
 });
 
 
+Ext.define('Ext.AbstractPlugin', {
+    disabled: false,
 
-Ext.define('Ext.layout.component.Auto', {
-
-    
+    constructor: function(config) {
+        Ext.apply(this, config);
+    },
 
-    alias: 'layout.autocomponent',
+    getCmp: function() {
+        return this.cmp;
+    },
 
-    extend: 'Ext.layout.component.Component',
+    
+    init: Ext.emptyFn,
 
     
+    destroy: Ext.emptyFn,
 
-    type: 'autocomponent',
+    
+    enable: function() {
+        this.disabled = false;
+    },
 
-    onLayout : function(width, height) {
-        this.setTargetSize(width, height);
+    
+    disable: function() {
+        this.disabled = true;
     }
 });
 
-
-Ext.define('Ext.AbstractComponent', {
-
-    
-
+Ext.define('Ext.data.Connection', {
     mixins: {
-        observable: 'Ext.util.Observable',
-        animate: 'Ext.util.Animate',
-        state: 'Ext.state.Stateful'
+        observable: 'Ext.util.Observable'
     },
 
-    requires: [
-        'Ext.PluginManager',
-        'Ext.ComponentManager',
-        'Ext.core.Element',
-        'Ext.core.DomHelper',
-        'Ext.XTemplate',
-        'Ext.ComponentQuery',
-        'Ext.LoadMask',
-        'Ext.ComponentLoader',
-        'Ext.EventManager',
-        'Ext.layout.Layout',
-        'Ext.layout.component.Auto'
-    ],
-
-    
-    
-    uses: [
-        'Ext.ZIndexManager'
-    ],
-
     statics: {
-        AUTO_ID: 1000
+        requestId: 0
     },
 
-    
+    url: null,
+    async: true,
+    method: null,
+    username: '',
+    password: '',
 
-    isComponent: true,
+    
+    disableCaching: true,
 
-    getAutoId: function() {
-        return ++Ext.AbstractComponent.AUTO_ID;
-    },
+    
+    withCredentials: false,
 
+    
+    cors: false,
 
     
+    disableCachingParam: '_dc',
 
     
+    timeout : 30000,
 
     
 
-     
+    useDefaultHeader : true,
+    defaultPostHeader : 'application/x-www-form-urlencoded; charset=UTF-8',
+    useDefaultXhrHeader : true,
+    defaultXhrHeader : 'XMLHttpRequest',
 
-     
+    constructor : function(config) {
+        config = config || {};
+        Ext.apply(this, config);
 
-    
+        this.addEvents(
+            
+            'beforerequest',
+            
+            'requestcomplete',
+            
+            'requestexception'
+        );
+        this.requests = {};
+        this.mixins.observable.constructor.call(this);
+    },
 
     
-    renderTpl: null,
+    request : function(options) {
+        options = options || {};
+        var me = this,
+            scope = options.scope || window,
+            username = options.username || me.username,
+            password = options.password || me.password || '',
+            async,
+            requestOptions,
+            request,
+            headers,
+            xhr;
 
-    
+        if (me.fireEvent('beforerequest', me, options) !== false) {
 
-    
+            requestOptions = me.setOptions(options, scope);
 
-    
+            if (this.isFormUpload(options) === true) {
+                this.upload(options.form, requestOptions.url, requestOptions.data, options);
+                return null;
+            }
 
-    
+            
+            if (options.autoAbort === true || me.autoAbort) {
+                me.abort();
+            }
 
-    
+            
 
-    
+            if ((options.cors === true || me.cors === true) && Ext.isIe && Ext.ieVersion >= 8) {
+                xhr = new XDomainRequest();
+            } else {
+                xhr = this.getXhrInstance();
+            }
 
-    
+            async = options.async !== false ? (options.async || me.async) : false;
 
-    
-    tplWriteMode: 'overwrite',
+            
+            if (username) {
+                xhr.open(requestOptions.method, requestOptions.url, async, username, password);
+            } else {
+                xhr.open(requestOptions.method, requestOptions.url, async);
+            }
 
-    
-    baseCls: Ext.baseCSSPrefix + 'component',
+            if (options.withCredentials === true || me.withCredentials === true) {
+                xhr.withCredentials = true;
+            }
 
-    
+            headers = me.setupHeaders(xhr, options, requestOptions.data, requestOptions.params);
 
-    
+            
+            request = {
+                id: ++Ext.data.Connection.requestId,
+                xhr: xhr,
+                headers: headers,
+                options: options,
+                async: async,
+                timeout: setTimeout(function() {
+                    request.timedout = true;
+                    me.abort(request);
+                }, options.timeout || me.timeout)
+            };
+            me.requests[request.id] = request;
+            me.latestId = request.id;
+            
+            if (async) {
+                xhr.onreadystatechange = Ext.Function.bind(me.onStateChange, me, [request]);
+            }
 
-    
+            
+            xhr.send(requestOptions.data);
+            if (!async) {
+                return this.onComplete(request);
+            }
+            return request;
+        } else {
+            Ext.callback(options.callback, options.scope, [options, undefined, undefined]);
+            return null;
+        }
+    },
 
     
-    disabledCls: Ext.baseCSSPrefix + 'item-disabled',
+    upload: function(form, url, params, options) {
+        form = Ext.getDom(form);
+        options = options || {};
 
-    
-    ui: 'default',
+        var id = Ext.id(),
+                frame = document.createElement('iframe'),
+                hiddens = [],
+                encoding = 'multipart/form-data',
+                buf = {
+                    target: form.target,
+                    method: form.method,
+                    encoding: form.encoding,
+                    enctype: form.enctype,
+                    action: form.action
+                }, hiddenItem;
 
-    
-    uiCls: [],
+        
+        Ext.fly(frame).set({
+            id: id,
+            name: id,
+            cls: Ext.baseCSSPrefix + 'hide-display',
+            src: Ext.SSL_SECURE_URL
+        });
 
-    
+        document.body.appendChild(frame);
 
-    
+        
+        if (document.frames) {
+           document.frames[id].name = id;
+        }
 
-    
+        Ext.fly(form).set({
+            target: id,
+            method: 'POST',
+            enctype: encoding,
+            encoding: encoding,
+            action: url || buf.action
+        });
 
-    
+        
+        if (params) {
+            Ext.iterate(Ext.Object.fromQueryString(params), function(name, value){
+                hiddenItem = document.createElement('input');
+                Ext.fly(hiddenItem).set({
+                    type: 'hidden',
+                    value: value,
+                    name: name
+                });
+                form.appendChild(hiddenItem);
+                hiddens.push(hiddenItem);
+            });
+        }
 
-    
+        Ext.fly(frame).on('load', Ext.Function.bind(this.onUploadComplete, this, [frame, options]), null, {single: true});
+        form.submit();
 
-    
+        Ext.fly(form).set(buf);
+        Ext.each(hiddens, function(h) {
+            Ext.removeNode(h);
+        });
+    },
 
     
-    hidden: false,
+    onUploadComplete: function(frame, options) {
+        var me = this,
+            
+            response = {
+                responseText: '',
+                responseXML: null
+            }, doc, firstChild;
 
-    
-    disabled: false,
+        try {
+            doc = frame.contentWindow.document || frame.contentDocument || window.frames[frame.id].document;
+            if (doc) {
+                if (doc.body) {
+                    if (/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)) { 
+                        response.responseText = firstChild.value;
+                    } else {
+                        response.responseText = doc.body.innerHTML;
+                    }
+                }
+                
+                response.responseXML = doc.XMLDocument || doc;
+            }
+        } catch (e) {
+        }
 
-    
+        me.fireEvent('requestcomplete', me, response, options);
 
-    
-    draggable: false,
+        Ext.callback(options.success, options.scope, [response, options]);
+        Ext.callback(options.callback, options.scope, [options, true, response]);
 
-    
-    floating: false,
+        setTimeout(function(){
+            Ext.removeNode(frame);
+        }, 100);
+    },
 
     
-    hideMode: 'display',
+    isFormUpload: function(options){
+        var form = this.getForm(options);
+        if (form) {
+            return (options.isUpload || (/multipart\/form-data/i).test(form.getAttribute('enctype')));
+        }
+        return false;
+    },
 
     
+    getForm: function(options){
+        return Ext.getDom(options.form) || null;
+    },
 
     
+    setOptions: function(options, scope){
+        var me =  this,
+            params = options.params || {},
+            extraParams = me.extraParams,
+            urlParams = options.urlParams,
+            url = options.url || me.url,
+            jsonData = options.jsonData,
+            method,
+            disableCache,
+            data;
 
-    
-    styleHtmlContent: false,
-
-    
-    styleHtmlCls: Ext.baseCSSPrefix + 'html',
-
-    
-    
-    
-    
-
-    
-
-     
-     allowDomMove: true,
-
-     
-     autoShow: false,
-
-    
-     autoRender: false,
 
-     needsLayout: false,
+        
+        if (Ext.isFunction(params)) {
+            params = params.call(scope, options);
+        }
 
-    
+        
+        if (Ext.isFunction(url)) {
+            url = url.call(scope, options);
+        }
 
-    
-    rendered: false,
+        url = this.setupUrl(options, url);
 
-    weight: 0,
 
-    trimRe: /^\s+|\s+$/g,
-    spacesRe: /\s+/,
+        
+        data = options.rawData || options.xmlData || jsonData || null;
+        if (jsonData && !Ext.isPrimitive(jsonData)) {
+            data = Ext.encode(data);
+        }
 
+        
+        if (Ext.isObject(params)) {
+            params = Ext.Object.toQueryString(params);
+        }
 
-    
-    maskOnDisable: true,
+        if (Ext.isObject(extraParams)) {
+            extraParams = Ext.Object.toQueryString(extraParams);
+        }
 
-    
-    constructor : function(config) {
-        var me = this,
-            i, len;
+        params = params + ((extraParams) ? ((params) ? '&' : '') + extraParams : '');
 
-        config = config || {};
-        me.initialConfig = config;
-        Ext.apply(me, config);
+        urlParams = Ext.isObject(urlParams) ? Ext.Object.toQueryString(urlParams) : urlParams;
 
-        me.addEvents(
-            
-             'beforeactivate',
-            
-             'activate',
-            
-             'beforedeactivate',
-            
-             'deactivate',
-            
-             'added',
-            
-             'disable',
-            
-             'enable',
-            
-             'beforeshow',
-            
-             'show',
-            
-             'beforehide',
-            
-             'hide',
-            
-             'removed',
-            
-             'beforerender',
-            
-             'render',
-            
-             'afterrender',
-            
-             'beforedestroy',
-            
-             'destroy',
-            
-             'resize',
-            
-             'move'
-        );
+        params = this.setupParams(options, params);
 
-        me.getId();
+        
+        method = (options.method || me.method || ((params || data) ? 'POST' : 'GET')).toUpperCase();
+        this.setupMethod(options, method);
 
-        me.mons = [];
-        me.additionalCls = [];
-        me.renderData = me.renderData || {};
-        me.renderSelectors = me.renderSelectors || {};
 
-        if (me.plugins) {
-            me.plugins = [].concat(me.plugins);
-            for (i = 0, len = me.plugins.length; i < len; i++) {
-                me.plugins[i] = me.constructPlugin(me.plugins[i]);
-            }
+        disableCache = options.disableCaching !== false ? (options.disableCaching || me.disableCaching) : false;
+        
+        if (method === 'GET' && disableCache) {
+            url = Ext.urlAppend(url, (options.disableCachingParam || me.disableCachingParam) + '=' + (new Date().getTime()));
         }
 
-        me.initComponent();
-
         
-        Ext.ComponentManager.register(me);
+        if ((method == 'GET' || data) && params) {
+            url = Ext.urlAppend(url, params);
+            params = null;
+        }
 
         
-        me.mixins.observable.constructor.call(me);
-        me.mixins.state.constructor.call(me, config);
+        if (urlParams) {
+            url = Ext.urlAppend(url, urlParams);
+        }
 
-        
-        this.addStateEvents('resize');
+        return {
+            url: url,
+            method: method,
+            data: data || params || null
+        };
+    },
 
-        
-        if (me.plugins) {
-            me.plugins = [].concat(me.plugins);
-            for (i = 0, len = me.plugins.length; i < len; i++) {
-                me.plugins[i] = me.initPlugin(me.plugins[i]);
-            }
+    
+    setupUrl: function(options, url){
+        var form = this.getForm(options);
+        if (form) {
+            url = url || form.action;
         }
+        return url;
+    },
 
-        me.loader = me.getLoader();
 
-        if (me.renderTo) {
-            me.render(me.renderTo);
-            
-            
-            
+    
+    setupParams: function(options, params) {
+        var form = this.getForm(options),
+            serializedForm;
+        if (form && !this.isFormUpload(options)) {
+            serializedForm = Ext.Element.serializeForm(form);
+            params = params ? (params + '&' + serializedForm) : serializedForm;
         }
+        return params;
+    },
 
-        if (me.autoShow) {
-            me.show();
+    
+    setupMethod: function(options, method){
+        if (this.isFormUpload(options)) {
+            return 'POST';
         }
-
+        return method;
     },
 
-    initComponent: Ext.emptyFn,
-
     
-    getState: function() {
+    setupHeaders: function(xhr, options, data, params){
         var me = this,
-            layout = me.ownerCt ? (me.shadowOwnerCt || me.ownerCt).getLayout() : null,
-            state = {
-                collapsed: me.collapsed
-            },
-            width = me.width,
-            height = me.height,
-            cm = me.collapseMemento,
-            anchors;
+            headers = Ext.apply({}, options.headers || {}, me.defaultHeaders || {}),
+            contentType = me.defaultPostHeader,
+            jsonData = options.jsonData,
+            xmlData = options.xmlData,
+            key,
+            header;
 
-        
-        
-        if (me.collapsed && cm) {
-            if (Ext.isDefined(cm.data.width)) {
-                width = cm.width;
-            }
-            if (Ext.isDefined(cm.data.height)) {
-                height = cm.height;
+        if (!headers['Content-Type'] && (data || params)) {
+            if (data) {
+                if (options.rawData) {
+                    contentType = 'text/plain';
+                } else {
+                    if (xmlData && Ext.isDefined(xmlData)) {
+                        contentType = 'text/xml';
+                    } else if (jsonData && Ext.isDefined(jsonData)) {
+                        contentType = 'application/json';
+                    }
+                }
             }
+            headers['Content-Type'] = contentType;
         }
 
-        
-        if (layout && me.flex) {
-            state.flex = me.flex;
-            state[layout.perpendicularPrefix] = me['get' + layout.perpendicularPrefixCap]();
+        if (me.useDefaultXhrHeader && !headers['X-Requested-With']) {
+            headers['X-Requested-With'] = me.defaultXhrHeader;
         }
         
-        else if (layout && me.anchor) {
-            state.anchor = me.anchor;
-            anchors = me.anchor.split(' ').concat(null);
-            if (!anchors[0]) {
-                if (me.width) {
-                    state.width = width;
-                }
-            }
-            if (!anchors[1]) {
-                if (me.height) {
-                    state.height = height;
+        try{
+            for (key in headers) {
+                if (headers.hasOwnProperty(key)) {
+                    header = headers[key];
+                    xhr.setRequestHeader(key, header);
                 }
+
             }
+        } catch(e) {
+            me.fireEvent('exception', key, header);
         }
-        
-        else {
-            if (me.width) {
-                state.width = width;
-            }
-            if (me.height) {
-                state.height = height;
-            }
+        return headers;
+    },
+
+    
+    getXhrInstance: (function(){
+        var options = [function(){
+            return new XMLHttpRequest();
+        }, function(){
+            return new ActiveXObject('MSXML2.XMLHTTP.3.0');
+        }, function(){
+            return new ActiveXObject('MSXML2.XMLHTTP');
+        }, function(){
+            return new ActiveXObject('Microsoft.XMLHTTP');
+        }], i = 0,
+            len = options.length,
+            xhr;
+
+        for(; i < len; ++i) {
+            try{
+                xhr = options[i];
+                xhr();
+                break;
+            }catch(e){}
         }
+        return xhr;
+    })(),
 
-        
-        if (state.width == me.initialConfig.width) {
-            delete state.width;
+    
+    isLoading : function(request) {
+        if (!request) {
+            request = this.getLatest();
         }
-        if (state.height == me.initialConfig.height) {
-            delete state.height;
+        if (!(request && request.xhr)) {
+            return false;
         }
-
         
-        if (layout && layout.align && (layout.align.indexOf('stretch') !== -1)) {
-            delete state[layout.perpendicularPrefix];
-        }
-        return state;
+        var state = request.xhr.readyState;
+        return !(state === 0 || state == 4);
     },
 
-    show: Ext.emptyFn,
-
-    animate: function(animObj) {
-        var me = this,
-            to;
-
-        animObj = animObj || {};
-        to = animObj.to || {};
-
-        if (Ext.fx.Manager.hasFxBlock(me.id)) {
-            return me;
-        }
+    
+    abort : function(request) {
+        var me = this;
         
-        if (!animObj.dynamic && (to.height || to.width)) {
-            var curWidth = me.getWidth(),
-                w = curWidth,
-                curHeight = me.getHeight(),
-                h = curHeight,
-                needsResize = false;
-
-            if (to.height && to.height > curHeight) {
-                h = to.height;
-                needsResize = true;
-            }
-            if (to.width && to.width > curWidth) {
-                w = to.width;
-                needsResize = true;
-            }
+        if (!request) {
+            request = me.getLatest();
+        }
 
+        if (request && me.isLoading(request)) {
             
-            
-            
-            if (needsResize) {
-                var clearWidth = !Ext.isNumber(me.width),
-                    clearHeight = !Ext.isNumber(me.height);
-
-                me.componentLayout.childrenChanged = true;
-                me.setSize(w, h, me.ownerCt);
-                me.el.setSize(curWidth, curHeight);
-                if (clearWidth) {
-                    delete me.width;
-                }
-                if (clearHeight) {
-                    delete me.height;
-                }
+            request.xhr.onreadystatechange = null;
+            request.xhr.abort();
+            me.clearTimeout(request);
+            if (!request.timedout) {
+                request.aborted = true;
             }
+            me.onComplete(request);
+            me.cleanup(request);
         }
-        return me.mixins.animate.animate.apply(me, arguments);
     },
-
     
-    findLayoutController: function() {
-        return this.findParentBy(function(c) {
-            
-            
-            return !c.ownerCt || (c.layout.layoutBusy && !c.ownerCt.layout.layoutBusy);
-        });
-    },
-
-    onShow : function() {
+    
+    abortAll: function(){
+        var requests = this.requests,
+            id;
         
-        var needsLayout = this.needsLayout;
-        if (Ext.isObject(needsLayout)) {
-            this.doComponentLayout(needsLayout.width, needsLayout.height, needsLayout.isSetSize, needsLayout.ownerCt);
+        for (id in requests) {
+            if (requests.hasOwnProperty(id)) {
+                this.abort(requests[id]);
+            }
         }
     },
-
-    constructPlugin: function(plugin) {
-        if (plugin.ptype && typeof plugin.init != 'function') {
-            plugin.cmp = this;
-            plugin = Ext.PluginManager.create(plugin);
-        }
-        else if (typeof plugin == 'string') {
-            plugin = Ext.PluginManager.create({
-                ptype: plugin,
-                cmp: this
-            });
+    
+    
+    getLatest: function(){
+        var id = this.latestId,
+            request;
+            
+        if (id) {
+            request = this.requests[id];
         }
-        return plugin;
+        return request || null;
     },
 
     
-    initPlugin : function(plugin) {
-        plugin.init(this);
-
-        return plugin;
+    onStateChange : function(request) {
+        if (request.xhr.readyState == 4) {
+            this.clearTimeout(request);
+            this.onComplete(request);
+            this.cleanup(request);
+        }
     },
 
     
-    doAutoRender: function() {
-        var me = this;
-        if (me.floating) {
-            me.render(document.body);
-        } else {
-            me.render(Ext.isBoolean(me.autoRender) ? Ext.getBody() : me.autoRender);
-        }
+    clearTimeout: function(request){
+        clearTimeout(request.timeout);
+        delete request.timeout;
     },
 
     
-    render : function(container, position) {
-        var me = this;
-
-        if (!me.rendered && me.fireEvent('beforerender', me) !== false) {
-            
-            
-            if (me.el) {
-                me.el = Ext.get(me.el);
-            }
-
-            
-            if (me.floating) {
-                me.onFloatRender();
-            }
-
-            container = me.initContainer(container);
+    cleanup: function(request){
+        request.xhr = null;
+        delete request.xhr;
+    },
 
-            me.onRender(container, position);
+    
+    onComplete : function(request) {
+        var me = this,
+            options = request.options,
+            result,
+            success,
+            response;
 
+        try {
+            result = me.parseStatus(request.xhr.status);
+        } catch (e) {
             
-            
-            me.el.setVisibilityMode(Ext.core.Element[me.hideMode.toUpperCase()]);
+            result = {
+                success : false,
+                isException : false
+            };
+        }
+        success = result.success;
 
-            if (me.overCls) {
-                me.el.hover(me.addOverCls, me.removeOverCls, me);
+        if (success) {
+            response = me.createResponse(request);
+            me.fireEvent('requestcomplete', me, response, options);
+            Ext.callback(options.success, options.scope, [response, options]);
+        } else {
+            if (result.isException || request.aborted || request.timedout) {
+                response = me.createException(request);
+            } else {
+                response = me.createResponse(request);
             }
+            me.fireEvent('requestexception', me, response, options);
+            Ext.callback(options.failure, options.scope, [response, options]);
+        }
+        Ext.callback(options.callback, options.scope, [options, success, response]);
+        delete me.requests[request.id];
+        return response;
+    },
 
-            me.fireEvent('render', me);
-
-            me.initContent();
-
-            me.afterRender(container);
-            me.fireEvent('afterrender', me);
-
-            me.initEvents();
+    
+    parseStatus: function(status) {
+        
+        status = status == 1223 ? 204 : status;
 
-            if (me.hidden) {
-                
-                
-                
-                me.el.hide();
-            }
+        var success = (status >= 200 && status < 300) || status == 304,
+            isException = false;
 
-            if (me.disabled) {
-                
-                me.disable(true);
+        if (!success) {
+            switch (status) {
+                case 12002:
+                case 12029:
+                case 12030:
+                case 12031:
+                case 12152:
+                case 13030:
+                    isException = true;
+                    break;
             }
         }
-        return me;
+        return {
+            success: success,
+            isException: isException
+        };
     },
 
     
-    onRender : function(container, position) {
-        var me = this,
-            el = me.el,
-            styles = me.initStyles(),
-            renderTpl, renderData, i;
-
-        position = me.getInsertPosition(position);
+    createResponse : function(request) {
+        var xhr = request.xhr,
+            headers = {},
+            lines = xhr.getAllResponseHeaders().replace(/\r\n/g, '\n').split('\n'),
+            count = lines.length,
+            line, index, key, value, response;
 
-        if (!el) {
-            if (position) {
-                el = Ext.core.DomHelper.insertBefore(position, me.getElConfig(), true);
-            }
-            else {
-                el = Ext.core.DomHelper.append(container, me.getElConfig(), true);
-            }
-        }
-        else if (me.allowDomMove !== false) {
-            if (position) {
-                container.dom.insertBefore(el.dom, position);
-            } else {
-                container.dom.appendChild(el.dom);
+        while (count--) {
+            line = lines[count];
+            index = line.indexOf(':');
+            if(index >= 0) {
+                key = line.substr(0, index).toLowerCase();
+                if (line.charAt(index + 1) == ' ') {
+                    ++index;
+                }
+                headers[key] = line.substr(index + 1);
             }
         }
 
-        if (Ext.scopeResetCSS && !me.ownerCt) {
-            
-            if (el.dom == Ext.getBody().dom) {
-                el.parent().addCls(Ext.baseCSSPrefix + 'reset');
-            }
-            else {
-                
-                me.resetEl = el.wrap({
-                    cls: Ext.baseCSSPrefix + 'reset'
-                });
-            }
-        }
-
-        me.setUI(me.ui);
+        request.xhr = null;
+        delete request.xhr;
 
-        el.addCls(me.initCls());
-        el.setStyle(styles);
+        response = {
+            request: request,
+            requestId : request.id,
+            status : xhr.status,
+            statusText : xhr.statusText,
+            getResponseHeader : function(header){ return headers[header.toLowerCase()]; },
+            getAllResponseHeaders : function(){ return headers; },
+            responseText : xhr.responseText,
+            responseXML : xhr.responseXML
+        };
 
         
         
-        
-        
-        
-        
-        
-        
-        
-        
-
-        me.el = el;
-
-        me.initFrame();
+        xhr = null;
+        return response;
+    },
 
-        renderTpl = me.initRenderTpl();
-        if (renderTpl) {
-            renderData = me.initRenderData();
-            renderTpl.append(me.getTargetEl(), renderData);
-        }
+    
+    createException : function(request) {
+        return {
+            request : request,
+            requestId : request.id,
+            status : request.aborted ? -1 : 0,
+            statusText : request.aborted ? 'transaction aborted' : 'communication failure',
+            aborted: request.aborted,
+            timedout: request.timedout
+        };
+    }
+});
 
-        me.applyRenderSelectors();
 
-        me.rendered = true;
-    },
+Ext.define('Ext.Ajax', {
+    extend: 'Ext.data.Connection',
+    singleton: true,
 
     
-    afterRender : function() {
-        var me = this,
-            pos,
-            xy;
-
-        me.getComponentLayout();
+    
+    
+    
+    
+    
 
-        
-        if (!me.ownerCt || (me.height || me.width)) {
-            me.setSize(me.width, me.height);
-        }
+    
 
-        
-        
-        if (me.floating && (me.x === undefined || me.y === undefined)) {
-            if (me.floatParent) {
-                xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
-                pos = me.floatParent.getTargetEl().translatePoints(xy[0], xy[1]);
-            } else {
-                xy = me.el.getAlignToXY(me.container, 'c-c');
-                pos = me.container.translatePoints(xy[0], xy[1]);
-            }
-            me.x = me.x === undefined ? pos.left: me.x;
-            me.y = me.y === undefined ? pos.top: me.y;
-        }
+    
+    
+    
+    
+    
+    
 
-        if (Ext.isDefined(me.x) || Ext.isDefined(me.y)) {
-            me.setPosition(me.x, me.y);
-        }
+    
+    autoAbort : false
+});
 
-        if (me.styleHtmlContent) {
-            me.getTargetEl().addCls(me.styleHtmlCls);
-        }
-    },
+Ext.define('Ext.ElementLoader', {
 
-    frameCls: Ext.baseCSSPrefix + 'frame',
+    
 
-    frameElementCls: {
-        tl: [],
-        tc: [],
-        tr: [],
-        ml: [],
-        mc: [],
-        mr: [],
-        bl: [],
-        bc: [],
-        br: []
+    mixins: {
+        observable: 'Ext.util.Observable'
     },
 
-    frameTpl: [
-        '<tpl if="top">',
-            '<tpl if="left"><div class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl></tpl>" style="background-position: {tl}; padding-left: {frameWidth}px" role="presentation"></tpl>',
-                '<tpl if="right"><div class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl></tpl>" style="background-position: {tr}; padding-right: {frameWidth}px" role="presentation"></tpl>',
-                    '<div class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl></tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></div>',
-                '<tpl if="right"></div></tpl>',
-            '<tpl if="left"></div></tpl>',
-        '</tpl>',
-        '<tpl if="left"><div class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl></tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></tpl>',
-            '<tpl if="right"><div class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl></tpl>" style="background-position: {mr}; padding-right: {frameWidth}px" role="presentation"></tpl>',
-                '<div class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl></tpl>" role="presentation"></div>',
-            '<tpl if="right"></div></tpl>',
-        '<tpl if="left"></div></tpl>',
-        '<tpl if="bottom">',
-            '<tpl if="left"><div class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl></tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></tpl>',
-                '<tpl if="right"><div class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl></tpl>" style="background-position: {br}; padding-right: {frameWidth}px" role="presentation"></tpl>',
-                    '<div class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl></tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></div>',
-                '<tpl if="right"></div></tpl>',
-            '<tpl if="left"></div></tpl>',
-        '</tpl>'
-    ],
-
-    frameTableTpl: [
-        '<table><tbody>',
-            '<tpl if="top">',
-                '<tr>',
-                    '<tpl if="left"><td class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl></tpl>" style="background-position: {tl}; padding-left:{frameWidth}px" role="presentation"></td></tpl>',
-                    '<td class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl></tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></td>',
-                    '<tpl if="right"><td class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl></tpl>" style="background-position: {tr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
-                '</tr>',
-            '</tpl>',
-            '<tr>',
-                '<tpl if="left"><td class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl></tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
-                '<td class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl></tpl>" style="background-position: 0 0;" role="presentation"></td>',
-                '<tpl if="right"><td class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl></tpl>" style="background-position: {mr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
-            '</tr>',
-            '<tpl if="bottom">',
-                '<tr>',
-                    '<tpl if="left"><td class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl></tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
-                    '<td class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl></tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></td>',
-                    '<tpl if="right"><td class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl></tpl>" style="background-position: {br}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
-                '</tr>',
-            '</tpl>',
-        '</tbody></table>'
+    uses: [
+        'Ext.data.Connection',
+        'Ext.Ajax'
     ],
 
-    
-    initFrame : function() {
-        if (Ext.supports.CSS3BorderRadius) {
-            return false;
+    statics: {
+        Renderer: {
+            Html: function(loader, response, active){
+                loader.getTarget().update(response.responseText, active.scripts === true);
+                return true;
+            }
         }
+    },
 
-        var me = this,
-            frameInfo = me.getFrameInfo(),
-            frameWidth = frameInfo.width,
-            frameTpl = me.getFrameTpl(frameInfo.table);
+    
 
-        if (me.frame) {
-            
-            frameTpl.insertFirst(me.el, Ext.apply({}, {
-                ui:         me.ui,
-                uiCls:      me.uiCls,
-                frameCls:   me.frameCls,
-                baseCls:    me.baseCls,
-                frameWidth: frameWidth,
-                top:        !!frameInfo.top,
-                left:       !!frameInfo.left,
-                right:      !!frameInfo.right,
-                bottom:     !!frameInfo.bottom
-            }, me.getFramePositions(frameInfo)));
+    
+    url: null,
 
-            
-            me.frameBody = me.el.down('.' + me.frameCls + '-mc');
+    
+    params: null,
 
-            
-            Ext.apply(me.renderSelectors, {
-                frameTL: '.' + me.baseCls + '-tl',
-                frameTC: '.' + me.baseCls + '-tc',
-                frameTR: '.' + me.baseCls + '-tr',
-                frameML: '.' + me.baseCls + '-ml',
-                frameMC: '.' + me.baseCls + '-mc',
-                frameMR: '.' + me.baseCls + '-mr',
-                frameBL: '.' + me.baseCls + '-bl',
-                frameBC: '.' + me.baseCls + '-bc',
-                frameBR: '.' + me.baseCls + '-br'
-            });
-        }
-    },
+    
+    baseParams: null,
 
-    updateFrame: function() {
-        if (Ext.supports.CSS3BorderRadius) {
-            return false;
-        }
+    
+    autoLoad: false,
 
-        var me = this,
-            wasTable = this.frameSize && this.frameSize.table,
-            oldFrameTL = this.frameTL,
-            oldFrameBL = this.frameBL,
-            oldFrameML = this.frameML,
-            oldFrameMC = this.frameMC,
-            newMCClassName;
+    
+    target: null,
 
-        this.initFrame();
+    
+    loadMask: false,
 
-        if (oldFrameMC) {
-            if (me.frame) {
-                
-                delete me.frameTL;
-                delete me.frameTC;
-                delete me.frameTR;
-                delete me.frameML;
-                delete me.frameMC;
-                delete me.frameMR;
-                delete me.frameBL;
-                delete me.frameBC;
-                delete me.frameBR;
-                this.applyRenderSelectors();
+    
+    ajaxOptions: null,
 
-                
-                newMCClassName = this.frameMC.dom.className;
+    
+    scripts: false,
 
-                
-                oldFrameMC.insertAfter(this.frameMC);
-                this.frameMC.remove();
+    
 
-                
-                this.frameBody = this.frameMC = oldFrameMC;
+    
 
-                
-                oldFrameMC.dom.className = newMCClassName;
+    
 
-                
-                if (wasTable) {
-                    me.el.query('> table')[1].remove();
-                }
-                else {
-                    if (oldFrameTL) {
-                        oldFrameTL.remove();
-                    }
-                    if (oldFrameBL) {
-                        oldFrameBL.remove();
-                    }
-                    oldFrameML.remove();
-                }
-            }
-            else {
-                
+    
 
-            }
-        }
-        else if (me.frame) {
-            this.applyRenderSelectors();
-        }
-    },
+    
 
-    getFrameInfo: function() {
-        if (Ext.supports.CSS3BorderRadius) {
-            return false;
-        }
+    isLoader: true,
 
+    constructor: function(config) {
         var me = this,
-            left = me.el.getStyle('background-position-x'),
-            top = me.el.getStyle('background-position-y'),
-            info, frameInfo = false, max;
-
-        
-        
-        if (!left && !top) {
-            info = me.el.getStyle('background-position').split(' ');
-            left = info[0];
-            top = info[1];
-        }
+            autoLoad;
 
-        
-        
-        
-        if (parseInt(left, 10) >= 1000000 && parseInt(top, 10) >= 1000000) {
-            max = Math.max;
+        config = config || {};
+        Ext.apply(me, config);
+        me.setTarget(me.target);
+        me.addEvents(
+            
+            'beforeload',
 
-            frameInfo = {
-                
-                table: left.substr(0, 3) == '110',
+            
+            'exception',
 
-                
-                vertical: top.substr(0, 3) == '110',
+            
+            'load'
+        );
 
-                
-                top:    max(left.substr(3, 2), left.substr(5, 2)),
-                right:  max(left.substr(5, 2), top.substr(3, 2)),
-                bottom: max(top.substr(3, 2), top.substr(5, 2)),
-                left:   max(top.substr(5, 2), left.substr(3, 2))
-            };
+        
+        me.mixins.observable.constructor.call(me);
 
-            frameInfo.width = max(frameInfo.top, frameInfo.right, frameInfo.bottom, frameInfo.left);
+        if (me.autoLoad) {
+            autoLoad = me.autoLoad;
+            if (autoLoad === true) {
+                autoLoad = {};
+            }
+            me.load(autoLoad);
+        }
+    },
 
-            
-            me.el.setStyle('background-image', 'none');
+    
+    setTarget: function(target){
+        var me = this;
+        target = Ext.get(target);
+        if (me.target && me.target != target) {
+            me.abort();
         }
+        me.target = target;
+    },
 
-        
-        
-        if (me.frame === true && !frameInfo) {
+    
+    getTarget: function(){
+        return this.target || null;
+    },
+
+    
+    abort: function(){
+        var active = this.active;
+        if (active !== undefined) {
+            Ext.Ajax.abort(active.request);
+            if (active.mask) {
+                this.removeMask();
+            }
+            delete this.active;
         }
+    },
 
-        me.frame = me.frame || !!frameInfo;
-        me.frameSize = frameInfo || false;
+    
+    removeMask: function(){
+        this.target.unmask();
+    },
 
-        return frameInfo;
+    
+    addMask: function(mask){
+        this.target.mask(mask === true ? null : mask);
     },
 
-    getFramePositions: function(frameInfo) {
-        var me = this,
-            frameWidth = frameInfo.width,
-            dock = me.dock,
-            positions, tc, bc, ml, mr;
+    
+    load: function(options) {
 
-        if (frameInfo.vertical) {
-            tc = '0 -' + (frameWidth * 0) + 'px';
-            bc = '0 -' + (frameWidth * 1) + 'px';
+        options = Ext.apply({}, options);
 
-            if (dock && dock == "right") {
-                tc = 'right -' + (frameWidth * 0) + 'px';
-                bc = 'right -' + (frameWidth * 1) + 'px';
-            }
+        var me = this,
+            target = me.target,
+            mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
+            params = Ext.apply({}, options.params),
+            ajaxOptions = Ext.apply({}, options.ajaxOptions),
+            callback = options.callback || me.callback,
+            scope = options.scope || me.scope || me,
+            request;
 
-            positions = {
-                tl: '0 -' + (frameWidth * 0) + 'px',
-                tr: '0 -' + (frameWidth * 1) + 'px',
-                bl: '0 -' + (frameWidth * 2) + 'px',
-                br: '0 -' + (frameWidth * 3) + 'px',
+        Ext.applyIf(ajaxOptions, me.ajaxOptions);
+        Ext.applyIf(options, ajaxOptions);
 
-                ml: '-' + (frameWidth * 1) + 'px 0',
-                mr: 'right 0',
+        Ext.applyIf(params, me.params);
+        Ext.apply(params, me.baseParams);
 
-                tc: tc,
-                bc: bc
-            };
-        } else {
-            ml = '-' + (frameWidth * 0) + 'px 0';
-            mr = 'right 0';
+        Ext.applyIf(options, {
+            url: me.url
+        });
 
-            if (dock && dock == "bottom") {
-                ml = 'left bottom';
-                mr = 'right bottom';
-            }
 
-            positions = {
-                tl: '0 -' + (frameWidth * 2) + 'px',
-                tr: 'right -' + (frameWidth * 3) + 'px',
-                bl: '0 -' + (frameWidth * 4) + 'px',
-                br: 'right -' + (frameWidth * 5) + 'px',
+        Ext.apply(options, {
+            scope: me,
+            params: params,
+            callback: me.onComplete
+        });
 
-                ml: ml,
-                mr: mr,
+        if (me.fireEvent('beforeload', me, options) === false) {
+            return;
+        }
 
-                tc: '0 -' + (frameWidth * 0) + 'px',
-                bc: '0 -' + (frameWidth * 1) + 'px'
-            };
+        if (mask) {
+            me.addMask(mask);
         }
 
-        return positions;
+        request = Ext.Ajax.request(options);
+        me.active = {
+            request: request,
+            options: options,
+            mask: mask,
+            scope: scope,
+            callback: callback,
+            success: options.success || me.success,
+            failure: options.failure || me.failure,
+            renderer: options.renderer || me.renderer,
+            scripts: Ext.isDefined(options.scripts) ? options.scripts : me.scripts
+        };
+        me.setOptions(me.active, options);
     },
 
     
-    getFrameTpl : function(table) {
-        return table ? this.getTpl('frameTableTpl') : this.getTpl('frameTpl');
-    },
+    setOptions: Ext.emptyFn,
 
     
-    initCls: function() {
+    onComplete: function(options, success, response) {
         var me = this,
-            cls = [];
+            active = me.active,
+            scope = active.scope,
+            renderer = me.getRenderer(active.renderer);
 
-        cls.push(me.baseCls);
 
-        if (Ext.isDefined(me.cmpCls)) {
-            if (Ext.isDefined(Ext.global.console)) {
-                Ext.global.console.warn('Ext.Component: cmpCls has been deprecated. Please use componentCls.');
-            }
-            me.componentCls = me.cmpCls;
-            delete me.cmpCls;
+        if (success) {
+            success = renderer.call(me, me, response, active);
         }
 
-        if (me.componentCls) {
-            cls.push(me.componentCls);
+        if (success) {
+            Ext.callback(active.success, scope, [me, response, options]);
+            me.fireEvent('load', me, response, options);
         } else {
-            me.componentCls = me.baseCls;
+            Ext.callback(active.failure, scope, [me, response, options]);
+            me.fireEvent('exception', me, response, options);
         }
-        if (me.cls) {
-            cls.push(me.cls);
-            delete me.cls;
+        Ext.callback(active.callback, scope, [me, success, response, options]);
+
+        if (active.mask) {
+            me.removeMask();
         }
 
-        return cls.concat(me.additionalCls);
+        delete me.active;
     },
 
     
-    setUI: function(ui) {
-        var me = this,
-            oldUICls = Ext.Array.clone(me.uiCls),
-            newUICls = [],
-            classes = [],
-            cls,
-            i;
-
-        
-        for (i = 0; i < oldUICls.length; i++) {
-            cls = oldUICls[i];
-
-            classes = classes.concat(me.removeClsWithUI(cls, true));
-            newUICls.push(cls);
-        }
-
-        if (classes.length) {
-            me.removeCls(classes);
+    getRenderer: function(renderer){
+        if (Ext.isFunction(renderer)) {
+            return renderer;
         }
+        return this.statics().Renderer.Html;
+    },
 
-        
-        me.removeUIFromElement();
+    
+    startAutoRefresh: function(interval, options){
+        var me = this;
+        me.stopAutoRefresh();
+        me.autoRefresh = setInterval(function(){
+            me.load(options);
+        }, interval);
+    },
 
-        
-        me.ui = ui;
+    
+    stopAutoRefresh: function(){
+        clearInterval(this.autoRefresh);
+        delete this.autoRefresh;
+    },
 
-        
-        me.addUIToElement();
-
-        
-        classes = [];
-        for (i = 0; i < newUICls.length; i++) {
-            cls = newUICls[i];
-            classes = classes.concat(me.addClsWithUI(cls, true));
-        }
-
-        if (classes.length) {
-            me.addCls(classes);
-        }
-    },
+    
+    isAutoRefreshing: function(){
+        return Ext.isDefined(this.autoRefresh);
+    },
 
     
-    addClsWithUI: function(cls, skip) {
-        var me = this,
-            classes = [],
-            i;
+    destroy: function(){
+        var me = this;
+        me.stopAutoRefresh();
+        delete me.target;
+        me.abort();
+        me.clearListeners();
+    }
+});
 
-        if (!Ext.isArray(cls)) {
-            cls = [cls];
-        }
 
-        for (i = 0; i < cls.length; i++) {
-            if (cls[i] && !me.hasUICls(cls[i])) {
-                me.uiCls = Ext.Array.clone(me.uiCls);
-                me.uiCls.push(cls[i]);
+Ext.define('Ext.ComponentLoader', {
 
-                classes = classes.concat(me.addUIClsToElement(cls[i]));
-            }
-        }
+    
 
-        if (skip !== true) {
-            me.addCls(classes);
-        }
+    extend: 'Ext.ElementLoader',
 
-        return classes;
-    },
+    statics: {
+        Renderer: {
+            Data: function(loader, response, active){
+                var success = true;
+                try {
+                    loader.getTarget().update(Ext.decode(response.responseText));
+                } catch (e) {
+                    success = false;
+                }
+                return success;
+            },
 
-    
-    removeClsWithUI: function(cls, skip) {
-        var me = this,
-            classes = [],
-            i;
+            Component: function(loader, response, active){
+                var success = true,
+                    target = loader.getTarget(),
+                    items = [];
 
-        if (!Ext.isArray(cls)) {
-            cls = [cls];
-        }
 
-        for (i = 0; i < cls.length; i++) {
-            if (cls[i] && me.hasUICls(cls[i])) {
-                me.uiCls = Ext.Array.remove(me.uiCls, cls[i]);
+                try {
+                    items = Ext.decode(response.responseText);
+                } catch (e) {
+                    success = false;
+                }
 
-                classes = classes.concat(me.removeUIClsFromElement(cls[i]));
+                if (success) {
+                    if (active.removeAll) {
+                        target.removeAll();
+                    }
+                    target.add(items);
+                }
+                return success;
             }
         }
-
-        if (skip !== true) {
-            me.removeCls(classes);
-        }
-
-        return classes;
     },
 
     
-    hasUICls: function(cls) {
-        var me = this,
-            uiCls = me.uiCls || [];
-
-        return Ext.Array.contains(uiCls, cls);
-    },
 
     
-    addUIClsToElement: function(cls, force) {
-        var me = this,
-            result = [],
-            frameElementCls = me.frameElementCls;
-        
-        result.push(Ext.baseCSSPrefix + cls);
-        result.push(me.baseCls + '-' + cls);
-        result.push(me.baseCls + '-' + me.ui + '-' + cls);
-        
-        if (!force && me.frame && !Ext.supports.CSS3BorderRadius) {
-            
-            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
-                classes, i, j, el;
-
-            
-            for (i = 0; i < els.length; i++) {
-                el = me['frame' + els[i].toUpperCase()];
-                classes = [me.baseCls + '-' + me.ui + '-' + els[i], me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i]];
-                if (el && el.dom) {
-                    el.addCls(classes);
-                } else {
-                    for (j = 0; j < classes.length; j++) {
-                        if (Ext.Array.indexOf(frameElementCls[els[i]], classes[j]) == -1) {
-                            frameElementCls[els[i]].push(classes[j]);
-                        }
-                    }
-                }
-            }
-        }
+    target: null,
 
-        me.frameElementCls = frameElementCls;
+    
+    loadMask: false,
 
-        return result;
-    },
+    
 
     
-    removeUIClsFromElement: function(cls, force) {
-        var me = this,
-            result = [],
-            frameElementCls = me.frameElementCls;
-        
-        result.push(Ext.baseCSSPrefix + cls);
-        result.push(me.baseCls + '-' + cls);
-        result.push(me.baseCls + '-' + me.ui + '-' + cls);
-        
-        if (!force && me.frame && !Ext.supports.CSS3BorderRadius) {
-            
-            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
-                i, el;
-            cls = me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i];
-            
-            for (i = 0; i < els.length; i++) {
-                el = me['frame' + els[i].toUpperCase()];
-                if (el && el.dom) {
-                    el.removeCls(cls);
-                } else {
-                    Ext.Array.remove(frameElementCls[els[i]], cls);
-                }
-            }
-        }
+    renderer: 'html',
 
-        me.frameElementCls = frameElementCls;
+    
+    setTarget: function(target){
+        var me = this;
 
-        return result;
-    },
+        if (Ext.isString(target)) {
+            target = Ext.getCmp(target);
+        }
 
-    
-    addUIToElement: function(force) {
-        var me = this,
-            frameElementCls = me.frameElementCls;
-        
-        me.addCls(me.baseCls + '-' + me.ui);
-        
-        if (me.frame && !Ext.supports.CSS3BorderRadius) {
-            
-            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
-                i, el, cls;
-            
-            
-            for (i = 0; i < els.length; i++) {
-                el = me['frame' + els[i].toUpperCase()];
-                cls = me.baseCls + '-' + me.ui + '-' + els[i];
-                if (el) {
-                    el.addCls(cls);
-                } else {
-                    if (!Ext.Array.contains(frameElementCls[els[i]], cls)) {
-                        frameElementCls[els[i]].push(cls);
-                    }
-                }
-            }
+        if (me.target && me.target != target) {
+            me.abort();
         }
+        me.target = target;
     },
 
     
-    removeUIFromElement: function() {
-        var me = this,
-            frameElementCls = me.frameElementCls;
-        
-        me.removeCls(me.baseCls + '-' + me.ui);
-        
-        if (me.frame && !Ext.supports.CSS3BorderRadius) {
-            
-            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
-                i, j, el, cls;
-                
-            
-            for (i = 0; i < els.length; i++) {
-                el = me['frame' + els[i].toUpperCase()];
-                cls = me.baseCls + '-' + me.ui + '-' + els[i];
-
-                if (el) {
-                    el.removeCls(cls);
-                } else {
-                    Ext.Array.remove(frameElementCls[els[i]], cls);
-                }
-            }
-        }
+    removeMask: function(){
+        this.target.setLoading(false);
     },
 
-    getElConfig : function() {
-        var result = this.autoEl || {tag: 'div'};
-        result.id = this.id;
-        return result;
+    
+    addMask: function(mask){
+        this.target.setLoading(mask);
     },
 
     
-    getInsertPosition: function(position) {
-        
-        if (position !== undefined) {
-            if (Ext.isNumber(position)) {
-                position = this.container.dom.childNodes[position];
-            }
-            else {
-                position = Ext.getDom(position);
-            }
-        }
 
-        return position;
+    setOptions: function(active, options){
+        active.removeAll = Ext.isDefined(options.removeAll) ? options.removeAll : this.removeAll;
     },
 
     
-    initContainer: function(container) {
-        var me = this;
-
-        
-        
-        
-        if (!container && me.el) {
-            container = me.el.dom.parentNode;
-            me.allowDomMove = false;
+    getRenderer: function(renderer){
+        if (Ext.isFunction(renderer)) {
+            return renderer;
         }
 
-        me.container = Ext.get(container);
-
-        if (me.ctCls) {
-            me.container.addCls(me.ctCls);
+        var renderers = this.statics().Renderer;
+        switch (renderer) {
+            case 'component':
+                return renderers.Component;
+            case 'data':
+                return renderers.Data;
+            default:
+                return Ext.ElementLoader.Renderer.Html;
         }
+    }
+});
 
-        return me.container;
-    },
 
+Ext.define('Ext.data.Association', {
     
-    initRenderData: function() {
-        var me = this;
-
-        return Ext.applyIf(me.renderData, {
-            ui: me.ui,
-            uiCls: me.uiCls,
-            baseCls: me.baseCls,
-            componentCls: me.componentCls,
-            frame: me.frame
-        });
-    },
 
     
-    getTpl: function(name) {
-        var me = this,
-            prototype = me.self.prototype,
-            ownerPrototype,
-            tpl;
 
-        if (me.hasOwnProperty(name)) {
-            tpl = me[name];
-            if (tpl && !(tpl instanceof Ext.XTemplate)) {
-                me[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);
-            }
+    
+    primaryKey: 'id',
 
-            return me[name];
-        }
+    
+    
+    
 
-        if (!(prototype[name] instanceof Ext.XTemplate)) {
-            ownerPrototype = prototype;
+    defaultReaderType: 'json',
 
-            do {
-                if (ownerPrototype.hasOwnProperty(name)) {
-                    tpl = ownerPrototype[name];
-                    if (tpl && !(tpl instanceof Ext.XTemplate)) {
-                        ownerPrototype[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);
-                        break;
-                    }
+    statics: {
+        create: function(association){
+            if (!association.isAssociation) {
+                if (Ext.isString(association)) {
+                    association = {
+                        type: association
+                    };
                 }
 
-                ownerPrototype = ownerPrototype.superclass;
-            } while (ownerPrototype);
-        }
+                switch (association.type) {
+                    case 'belongsTo':
+                        return Ext.create('Ext.data.BelongsToAssociation', association);
+                    case 'hasMany':
+                        return Ext.create('Ext.data.HasManyAssociation', association);
+                    
 
-        return prototype[name];
-    },
 
-    
-    initRenderTpl: function() {
-        return this.getTpl('renderTpl');
+                    default:
+                }
+            }
+            return association;
+        }
     },
 
     
-    initStyles: function() {
-        var style = {},
-            me = this,
-            Element = Ext.core.Element;
+    constructor: function(config) {
+        Ext.apply(this, config);
 
-        if (Ext.isString(me.style)) {
-            style = Element.parseStyles(me.style);
-        } else {
-            style = Ext.apply({}, me.style);
-        }
+        var types           = Ext.ModelManager.types,
+            ownerName       = config.ownerModel,
+            associatedName  = config.associatedModel,
+            ownerModel      = types[ownerName],
+            associatedModel = types[associatedName],
+            ownerProto;
+
+
+        this.ownerModel = ownerModel;
+        this.associatedModel = associatedModel;
 
         
-        
-        if (me.padding !== undefined) {
-            style.padding = Element.unitizeBox((me.padding === true) ? 5 : me.padding);
-        }
 
-        if (me.margin !== undefined) {
-            style.margin = Element.unitizeBox((me.margin === true) ? 5 : me.margin);
-        }
+        
 
-        delete me.style;
-        return style;
+        Ext.applyIf(this, {
+            ownerName : ownerName,
+            associatedName: associatedName
+        });
     },
 
     
-    initContent: function() {
+    getReader: function(){
         var me = this,
-            target = me.getTargetEl(),
-            contentEl,
-            pre;
+            reader = me.reader,
+            model = me.associatedModel;
 
-        if (me.html) {
-            target.update(Ext.core.DomHelper.markup(me.html));
-            delete me.html;
+        if (reader) {
+            if (Ext.isString(reader)) {
+                reader = {
+                    type: reader
+                };
+            }
+            if (reader.isReader) {
+                reader.setModel(model);
+            } else {
+                Ext.applyIf(reader, {
+                    model: model,
+                    type : me.defaultReaderType
+                });
+            }
+            me.reader = Ext.createByAlias('reader.' + reader.type, reader);
         }
+        return me.reader || null;
+    }
+});
 
-        if (me.contentEl) {
-            contentEl = Ext.get(me.contentEl);
-            pre = Ext.baseCSSPrefix;
-            contentEl.removeCls([pre + 'hidden', pre + 'hide-display', pre + 'hide-offsets', pre + 'hide-nosize']);
-            target.appendChild(contentEl.dom);
-        }
 
-        if (me.tpl) {
-            
-            if (!me.tpl.isTemplate) {
-                me.tpl = Ext.create('Ext.XTemplate', me.tpl);
-            }
+Ext.define('Ext.ModelManager', {
+    extend: 'Ext.AbstractManager',
+    alternateClassName: 'Ext.ModelMgr',
+    requires: ['Ext.data.Association'],
 
-            if (me.data) {
-                me.tpl[me.tplWriteMode](target, me.data);
-                delete me.data;
-            }
-        }
-    },
+    singleton: true,
+
+    typeName: 'mtype',
 
     
-    initEvents : function() {
-        var me = this,
-            afterRenderEvents = me.afterRenderEvents,
-            el,
-            property,
-            fn = function(listeners){
-                me.mon(el, listeners);
-            };
-        if (afterRenderEvents) {
-            for (property in afterRenderEvents) {
-                if (afterRenderEvents.hasOwnProperty(property)) {
-                    el = me[property];
-                    if (el && el.on) {
-                        Ext.each(afterRenderEvents[property], fn);
-                    }
-                }
+    associationStack: [],
+
+    
+    registerType: function(name, config) {
+        var proto = config.prototype,
+            model;
+        if (proto && proto.isModel) {
+            
+            model = config;
+        } else {
+            
+            if (!config.extend) {
+                config.extend = 'Ext.data.Model';
             }
+            model = Ext.define(name, config);
         }
+        this.types[name] = model;
+        return model;
     },
 
     
-    applyRenderSelectors: function() {
-        var selectors = this.renderSelectors || {},
-            el = this.el.dom,
-            selector;
+    onModelDefined: function(model) {
+        var stack  = this.associationStack,
+            length = stack.length,
+            create = [],
+            association, i, created;
+
+        for (i = 0; i < length; i++) {
+            association = stack[i];
 
-        for (selector in selectors) {
-            if (selectors.hasOwnProperty(selector) && selectors[selector]) {
-                this[selector] = Ext.get(Ext.DomQuery.selectNode(selectors[selector], el));
+            if (association.associatedModel == model.modelName) {
+                create.push(association);
             }
         }
+
+        for (i = 0, length = create.length; i < length; i++) {
+            created = create[i];
+            this.types[created.ownerModel].prototype.associations.add(Ext.data.Association.create(created));
+            Ext.Array.remove(stack, created);
+        }
     },
 
     
-    is: function(selector) {
-        return Ext.ComponentQuery.is(this, selector);
+    registerDeferredAssociation: function(association){
+        this.associationStack.push(association);
     },
 
     
-    up: function(selector) {
-        var result = this.ownerCt;
-        if (selector) {
-            for (; result; result = result.ownerCt) {
-                if (Ext.ComponentQuery.is(result, selector)) {
-                    return result;
-                }
-            }
+    getModel: function(id) {
+        var model = id;
+        if (typeof model == 'string') {
+            model = this.types[model];
         }
-        return result;
+        return model;
     },
 
     
-    nextSibling: function(selector) {
-        var o = this.ownerCt, it, last, idx, c;
-        if (o) {
-            it = o.items;
-            idx = it.indexOf(this) + 1;
-            if (idx) {
-                if (selector) {
-                    for (last = it.getCount(); idx < last; idx++) {
-                        if ((c = it.getAt(idx)).is(selector)) {
-                            return c;
-                        }
-                    }
-                } else {
-                    if (idx < it.getCount()) {
-                        return it.getAt(idx);
-                    }
-                }
-            }
-        }
-        return null;
-    },
+    create: function(config, name, id) {
+        var con = typeof name == 'function' ? name : this.types[name || config.name];
+
+        return new con(config, id);
+    }
+}, function() {
 
     
-    previousSibling: function(selector) {
-        var o = this.ownerCt, it, idx, c;
-        if (o) {
-            it = o.items;
-            idx = it.indexOf(this);
-            if (idx != -1) {
-                if (selector) {
-                    for (--idx; idx >= 0; idx--) {
-                        if ((c = it.getAt(idx)).is(selector)) {
-                            return c;
-                        }
-                    }
-                } else {
-                    if (idx) {
-                        return it.getAt(--idx);
-                    }
-                }
-            }
-        }
-        return null;
-    },
-
-    
-    previousNode: function(selector, includeSelf) {
-        var node = this,
-            result,
-            it, len, i;
-
-        
-        if (includeSelf && node.is(selector)) {
-            return node;
-        }
+    Ext.regModel = function() {
+        return this.ModelManager.registerType.apply(this.ModelManager, arguments);
+    };
+});
 
-        result = this.prev(selector);
-        if (result) {
-            return result;
-        }
 
-        if (node.ownerCt) {
-            for (it = node.ownerCt.items.items, i = Ext.Array.indexOf(it, node) - 1; i > -1; i--) {
-                if (it[i].query) {
-                    result = it[i].query(selector);
-                    result = result[result.length - 1];
-                    if (result) {
-                        return result;
-                    }
-                }
-            }
-            return node.ownerCt.previousNode(selector, true);
-        }
-    },
+Ext.define('Ext.PluginManager', {
+    extend: 'Ext.AbstractManager',
+    alternateClassName: 'Ext.PluginMgr',
+    singleton: true,
+    typeName: 'ptype',
 
     
-    nextNode: function(selector, includeSelf) {
-        var node = this,
-            result,
-            it, len, i;
-
-        
-        if (includeSelf && node.is(selector)) {
-            return node;
-        }
-
-        result = this.next(selector);
-        if (result) {
-            return result;
-        }
-
-        if (node.ownerCt) {
-            for (it = node.ownerCt.items, i = it.indexOf(node) + 1, it = it.items, len = it.length; i < len; i++) {
-                if (it[i].down) {
-                    result = it[i].down(selector);
-                    if (result) {
-                        return result;
-                    }
-                }
-            }
-            return node.ownerCt.nextNode(selector);
-        }
-    },
-
     
-    getId : function() {
-        return this.id || (this.id = 'ext-comp-' + (this.getAutoId()));
-    },
-
-    getItemId : function() {
-        return this.itemId || this.id;
-    },
-
     
-    getEl : function() {
-        return this.el;
-    },
-
     
-    getTargetEl: function() {
-        return this.frameBody || this.el;
-    },
-
     
-    isXType: function(xtype, shallow) {
-        
-        if (Ext.isFunction(xtype)) {
-            xtype = xtype.xtype;
-            
-        } else if (Ext.isObject(xtype)) {
-            xtype = xtype.statics().xtype;
-            
-        }
-
-        return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1: this.self.xtype == xtype;
-    },
-
     
-    getXTypes: function() {
-        var self = this.self,
-            xtypes      = [],
-            parentPrototype  = this,
-            xtype;
-
-        if (!self.xtypes) {
-            while (parentPrototype && Ext.getClass(parentPrototype)) {
-                xtype = Ext.getClass(parentPrototype).xtype;
-
-                if (xtype !== undefined) {
-                    xtypes.unshift(xtype);
-                }
-
-                parentPrototype = parentPrototype.superclass;
-            }
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
 
-            self.xtypeChain = xtypes;
-            self.xtypes = xtypes.join('/');
+    create : function(config, defaultType){
+        if (config.init) {
+            return config;
+        } else {
+            return Ext.createByAlias('plugin.' + (config.ptype || defaultType), config);
         }
 
-        return self.xtypes;
+        
+        
+        
+        
+        
+        
+        
     },
 
     
-    update : function(htmlOrData, loadScripts, cb) {
-        var me = this;
+    findByType: function(type, defaultsOnly) {
+        var matches = [],
+            types   = this.types;
 
-        if (me.tpl && !Ext.isString(htmlOrData)) {
-            me.data = htmlOrData;
-            if (me.rendered) {
-                me.tpl[me.tplWriteMode](me.getTargetEl(), htmlOrData || {});
-            }
-        } else {
-            me.html = Ext.isObject(htmlOrData) ? Ext.core.DomHelper.markup(htmlOrData) : htmlOrData;
-            if (me.rendered) {
-                me.getTargetEl().update(me.html, loadScripts, cb);
+        for (var name in types) {
+            if (!types.hasOwnProperty(name)) {
+                continue;
             }
-        }
+            var item = types[name];
 
-        if (me.rendered) {
-            me.doComponentLayout();
+            if (item.type == type && (!defaultsOnly || (defaultsOnly === true && item.isDefault))) {
+                matches.push(item);
+            }
         }
-    },
-
-    
-    setVisible : function(visible) {
-        return this[visible ? 'show': 'hide']();
-    },
 
+        return matches;
+    }
+}, function() {
     
-    isVisible: function(deep) {
-        var me = this,
-            child = me,
-            visible = !me.hidden,
-            ancestor = me.ownerCt;
+    Ext.preg = function() {
+        return Ext.PluginManager.registerType.apply(Ext.PluginManager, arguments);
+    };
+});
 
-        
-        me.hiddenAncestor = false;
-        if (me.destroyed) {
-            return false;
-        }
 
-        if (deep && visible && me.rendered && ancestor) {
-            while (ancestor) {
-                
-                
-                
-                
-                if (ancestor.hidden || (ancestor.collapsed &&
-                        !(ancestor.getDockedItems && Ext.Array.contains(ancestor.getDockedItems(), child)))) {
-                    
-                    me.hiddenAncestor = ancestor;
-                    visible = false;
-                    break;
-                }
-                child = ancestor;
-                ancestor = ancestor.ownerCt;
-            }
-        }
-        return visible;
-    },
+Ext.define('Ext.Template', {
 
     
-    enable: function(silent) {
-        var me = this;
-
-        if (me.rendered) {
-            me.el.removeCls(me.disabledCls);
-            me.el.dom.disabled = false;
-            me.onEnable();
-        }
 
-        me.disabled = false;
+    requires: ['Ext.DomHelper', 'Ext.util.Format'],
 
-        if (silent !== true) {
-            me.fireEvent('enable', me);
+    inheritableStatics: {
+        
+        from: function(el, config) {
+            el = Ext.getDom(el);
+            return new this(el.value || el.innerHTML, config || '');
         }
-
-        return me;
     },
 
     
-    disable: function(silent) {
-        var me = this;
 
-        if (me.rendered) {
-            me.el.addCls(me.disabledCls);
-            me.el.dom.disabled = true;
-            me.onDisable();
-        }
+    
+    constructor: function(html) {
+        var me = this,
+            args = arguments,
+            buffer = [],
+            i = 0,
+            length = args.length,
+            value;
 
-        me.disabled = true;
+        me.initialConfig = {};
 
-        if (silent !== true) {
-            me.fireEvent('disable', me);
+        if (length > 1) {
+            for (; i < length; i++) {
+                value = args[i];
+                if (typeof value == 'object') {
+                    Ext.apply(me.initialConfig, value);
+                    Ext.apply(me, value);
+                } else {
+                    buffer.push(value);
+                }
+            }
+            html = buffer.join('');
+        } else {
+            if (Ext.isArray(html)) {
+                buffer.push(html.join(''));
+            } else {
+                buffer.push(html);
+            }
         }
 
-        return me;
-    },
-
-    
-    onEnable: function() {
-        if (this.maskOnDisable) {
-            this.el.unmask();
-        }
-    },
+        
+        me.html = buffer.join('');
 
-    
-    onDisable : function() {
-        if (this.maskOnDisable) {
-            this.el.mask();
+        if (me.compiled) {
+            me.compile();
         }
     },
 
-    
-    isDisabled : function() {
-        return this.disabled;
-    },
-
-    
-    setDisabled : function(disabled) {
-        return this[disabled ? 'disable': 'enable']();
-    },
+    isTemplate: true,
 
     
-    isHidden : function() {
-        return this.hidden;
-    },
 
     
-    addCls : function(className) {
-        var me = this;
-        if (!className) {
-            return me;
-        }
-        if (!Ext.isArray(className)){
-            className = className.replace(me.trimRe, '').split(me.spacesRe);
-        }
-        if (me.rendered) {
-            me.el.addCls(className);
-        }
-        else {
-            me.additionalCls = Ext.Array.unique(me.additionalCls.concat(className));
-        }
-        return me;
-    },
+    disableFormats: false,
 
-    
-    addClass : function() {
-        return this.addCls.apply(this, arguments);
-    },
+    re: /\{([\w\-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
 
     
-    removeCls : function(className) {
-        var me = this;
+    applyTemplate: function(values) {
+        var me = this,
+            useFormat = me.disableFormats !== true,
+            fm = Ext.util.Format,
+            tpl = me;
 
-        if (!className) {
-            return me;
-        }
-        if (!Ext.isArray(className)){
-            className = className.replace(me.trimRe, '').split(me.spacesRe);
-        }
-        if (me.rendered) {
-            me.el.removeCls(className);
+        if (me.compiled) {
+            return me.compiled(values);
         }
-        else if (me.additionalCls.length) {
-            Ext.each(className, function(cls) {
-                Ext.Array.remove(me.additionalCls, cls);
-            });
+        function fn(m, name, format, args) {
+            if (format && useFormat) {
+                if (args) {
+                    args = [values[name]].concat(Ext.functionFactory('return ['+ args +'];')());
+                } else {
+                    args = [values[name]];
+                }
+                if (format.substr(0, 5) == "this.") {
+                    return tpl[format.substr(5)].apply(tpl, args);
+                }
+                else {
+                    return fm[format].apply(fm, args);
+                }
+            }
+            else {
+                return values[name] !== undefined ? values[name] : "";
+            }
         }
-        return me;
+        return me.html.replace(me.re, fn);
     },
 
-
-    addOverCls: function() {
+    
+    set: function(html, compile) {
         var me = this;
-        if (!me.disabled) {
-            me.el.addCls(me.overCls);
-        }
+        me.html = html;
+        me.compiled = null;
+        return compile ? me.compile() : me;
     },
 
-    removeOverCls: function() {
-        this.el.removeCls(this.overCls);
-    },
+    compileARe: /\\/g,
+    compileBRe: /(\r\n|\n)/g,
+    compileCRe: /'/g,
 
-    addListener : function(element, listeners, scope, options) {
+    /**
+     * Compiles the template into an internal function, eliminating the RegEx overhead.
+     * @return {Ext.Template} this
+     */
+    compile: function() {
         var me = this,
-            fn,
-            option;
-
-        if (Ext.isString(element) && (Ext.isObject(listeners) || options && options.element)) {
-            if (options.element) {
-                fn = listeners;
+            fm = Ext.util.Format,
+            useFormat = me.disableFormats !== true,
+            body, bodyReturn;
 
-                listeners = {};
-                listeners[element] = fn;
-                element = options.element;
-                if (scope) {
-                    listeners.scope = scope;
+        function fn(m, name, format, args) {
+            if (format && useFormat) {
+                args = args ? ',' + args: "";
+                if (format.substr(0, 5) != "this.") {
+                    format = "fm." + format + '(';
                 }
-
-                for (option in options) {
-                    if (options.hasOwnProperty(option)) {
-                        if (me.eventOptionsRe.test(option)) {
-                            listeners[option] = options[option];
-                        }
-                    }
+                else {
+                    format = 'this.' + format.substr(5) + '(';
                 }
             }
-
-            
-            
-            if (me[element] && me[element].on) {
-                me.mon(me[element], listeners);
-            } else {
-                me.afterRenderEvents = me.afterRenderEvents || {};
-                if (!me.afterRenderEvents[element]) {
-                    me.afterRenderEvents[element] = [];
-                }
-                me.afterRenderEvents[element].push(listeners);
+            else {
+                args = '';
+                format = "(values['" + name + "'] == undefined ? '' : ";
             }
+            return "'," + format + "values['" + name + "']" + args + ") ,'";
         }
 
-        return me.mixins.observable.addListener.apply(me, arguments);
-    },
-
-    
-    removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
-        var me = this,
-            element = managedListener.options ? managedListener.options.element : null;
-
-        if (element) {
-            element = me[element];
-            if (element && element.un) {
-                if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
-                    element.un(managedListener.ename, managedListener.fn, managedListener.scope);
-                    if (!isClear) {
-                        Ext.Array.remove(me.managedListeners, managedListener);
-                    }
-                }
-            }
-        } else {
-            return me.mixins.observable.removeManagedListenerItem.apply(me, arguments);
-        }
+        bodyReturn = me.html.replace(me.compileARe, '\\\\').replace(me.compileBRe, '\\n').replace(me.compileCRe, "\\'").replace(me.re, fn);
+        body = "this.compiled = function(values){ return ['" + bodyReturn + "'].join('');};";
+        eval(body);
+        return me;
     },
 
-    
-    getBubbleTarget : function() {
-        return this.ownerCt;
+    /**
+     * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
+     *
+     * @param {String/HTMLElement/Ext.Element} el The context element
+     * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
+     * @param {Boolean} returnElement (optional) true to return a Ext.Element.
+     * @return {HTMLElement/Ext.Element} The new node or Element
+     */
+    insertFirst: function(el, values, returnElement) {
+        return this.doInsert('afterBegin', el, values, returnElement);
     },
 
-    
-    isFloating : function() {
-        return this.floating;
+    /**
+     * Applies the supplied values to the template and inserts the new node(s) before el.
+     *
+     * @param {String/HTMLElement/Ext.Element} el The context element
+     * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
+     * @param {Boolean} returnElement (optional) true to return a Ext.Element.
+     * @return {HTMLElement/Ext.Element} The new node or Element
+     */
+    insertBefore: function(el, values, returnElement) {
+        return this.doInsert('beforeBegin', el, values, returnElement);
     },
 
-    
-    isDraggable : function() {
-        return !!this.draggable;
+    /**
+     * Applies the supplied values to the template and inserts the new node(s) after el.
+     *
+     * @param {String/HTMLElement/Ext.Element} el The context element
+     * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
+     * @param {Boolean} returnElement (optional) true to return a Ext.Element.
+     * @return {HTMLElement/Ext.Element} The new node or Element
+     */
+    insertAfter: function(el, values, returnElement) {
+        return this.doInsert('afterEnd', el, values, returnElement);
     },
 
-    
-    isDroppable : function() {
-        return !!this.droppable;
+    /**
+     * Applies the supplied `values` to the template and appends the new node(s) to the specified `el`.
+     *
+     * For example usage see {@link Ext.Template Ext.Template class docs}.
+     *
+     * @param {String/HTMLElement/Ext.Element} el The context element
+     * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
+     * @param {Boolean} returnElement (optional) true to return an Ext.Element.
+     * @return {HTMLElement/Ext.Element} The new node or Element
+     */
+    append: function(el, values, returnElement) {
+        return this.doInsert('beforeEnd', el, values, returnElement);
     },
 
-    
-    onAdded : function(container, pos) {
-        this.ownerCt = container;
-        this.fireEvent('added', this, container, pos);
+    doInsert: function(where, el, values, returnEl) {
+        el = Ext.getDom(el);
+        var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values));
+        return returnEl ? Ext.get(newNode, true) : newNode;
     },
 
-    
-    onRemoved : function() {
-        var me = this;
+    /**
+     * Applies the supplied values to the template and overwrites the content of el with the new node(s).
+     *
+     * @param {String/HTMLElement/Ext.Element} el The context element
+     * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
+     * @param {Boolean} returnElement (optional) true to return a Ext.Element.
+     * @return {HTMLElement/Ext.Element} The new node or Element
+     */
+    overwrite: function(el, values, returnElement) {
+        el = Ext.getDom(el);
+        el.innerHTML = this.applyTemplate(values);
+        return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
+    }
+}, function() {
 
-        me.fireEvent('removed', me, me.ownerCt);
-        delete me.ownerCt;
-    },
+    /**
+     * @method apply
+     * @member Ext.Template
+     * Alias for {@link #applyTemplate}.
+     * @alias Ext.Template#applyTemplate
+     */
+    this.createAlias('apply', 'applyTemplate');
+});
 
-    
-    beforeDestroy : Ext.emptyFn,
-    
-    
-    onResize : Ext.emptyFn,
+/**
+ * A template class that supports advanced functionality like:
+ *
+ * - Autofilling arrays using templates and sub-templates
+ * - Conditional processing with basic comparison operators
+ * - Basic math function support
+ * - Execute arbitrary inline code with special built-in template variables
+ * - Custom member functions
+ * - Many special tags and built-in operators that aren't defined as part of the API, but are supported in the templates that can be created
+ *
+ * XTemplate provides the templating mechanism built into:
+ *
+ * - {@link Ext.view.View}
+ *
+ * The {@link Ext.Template} describes the acceptable parameters to pass to the constructor. The following examples
+ * demonstrate all of the supported features.
+ *
+ * # Sample Data
+ *
+ * This is the data object used for reference in each code example:
+ *
+ *     var data = {
+ *         name: 'Tommy Maintz',
+ *         title: 'Lead Developer',
+ *         company: 'Sencha Inc.',
+ *         email: 'tommy@sencha.com',
+ *         address: '5 Cups Drive',
+ *         city: 'Palo Alto',
+ *         state: 'CA',
+ *         zip: '44102',
+ *         drinks: ['Coffee', 'Soda', 'Water'],
+ *         kids: [
+ *             {
+ *                 name: 'Joshua',
+ *                 age:3
+ *             },
+ *             {
+ *                 name: 'Matthew',
+ *                 age:2
+ *             },
+ *             {
+ *                 name: 'Solomon',
+ *                 age:0
+ *             }
+ *         ]
+ *     };
+ *
+ * # Auto filling of arrays
+ *
+ * The **tpl** tag and the **for** operator are used to process the provided data object:
+ *
+ * - If the value specified in for is an array, it will auto-fill, repeating the template block inside the tpl
+ *   tag for each item in the array.
+ * - If for="." is specified, the data object provided is examined.
+ * - While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0).
+ *
+ * Examples:
+ *
+ *     <tpl for=".">...</tpl>       // loop through array at root node
+ *     <tpl for="foo">...</tpl>     // loop through array at foo node
+ *     <tpl for="foo.bar">...</tpl> // loop through array at foo.bar node
+ *
+ * Using the sample data above:
+ *
+ *     var tpl = new Ext.XTemplate(
+ *         '<p>Kids: ',
+ *         '<tpl for=".">',       // process the data.kids node
+ *             '<p>{#}. {name}</p>',  // use current array index to autonumber
+ *         '</tpl></p>'
+ *     );
+ *     tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
+ *
+ * An example illustrating how the **for** property can be leveraged to access specified members of the provided data
+ * object to populate the template:
+ *
+ *     var tpl = new Ext.XTemplate(
+ *         '<p>Name: {name}</p>',
+ *         '<p>Title: {title}</p>',
+ *         '<p>Company: {company}</p>',
+ *         '<p>Kids: ',
+ *         '<tpl for="kids">',     // interrogate the kids property within the data
+ *             '<p>{name}</p>',
+ *         '</tpl></p>'
+ *     );
+ *     tpl.overwrite(panel.body, data);  // pass the root node of the data object
+ *
+ * Flat arrays that contain values (and not objects) can be auto-rendered using the special **`{.}`** variable inside a
+ * loop. This variable will represent the value of the array at the current index:
+ *
+ *     var tpl = new Ext.XTemplate(
+ *         '<p>{name}\'s favorite beverages:</p>',
+ *         '<tpl for="drinks">',
+ *             '<div> - {.}</div>',
+ *         '</tpl>'
+ *     );
+ *     tpl.overwrite(panel.body, data);
+ *
+ * When processing a sub-template, for example while looping through a child array, you can access the parent object's
+ * members via the **parent** object:
+ *
+ *     var tpl = new Ext.XTemplate(
+ *         '<p>Name: {name}</p>',
+ *         '<p>Kids: ',
+ *         '<tpl for="kids">',
+ *             '<tpl if="age &gt; 1">',
+ *                 '<p>{name}</p>',
+ *                 '<p>Dad: {parent.name}</p>',
+ *             '</tpl>',
+ *         '</tpl></p>'
+ *     );
+ *     tpl.overwrite(panel.body, data);
+ *
+ * # Conditional processing with basic comparison operators
+ *
+ * The **tpl** tag and the **if** operator are used to provide conditional checks for deciding whether or not to render
+ * specific parts of the template. Notes:
+ *
+ * - Double quotes must be encoded if used within the conditional
+ * - There is no else operator -- if needed, two opposite if statements should be used.
+ *
+ * Examples:
+ *
+ *     <tpl if="age > 1 && age < 10">Child</tpl>
+ *     <tpl if="age >= 10 && age < 18">Teenager</tpl>
+ *     <tpl if="this.isGirl(name)">...</tpl>
+ *     <tpl if="id==\'download\'">...</tpl>
+ *     <tpl if="needsIcon"><img src="{icon}" class="{iconCls}"/></tpl>
+ *     // no good:
+ *     <tpl if="name == "Tommy"">Hello</tpl>
+ *     // encode " if it is part of the condition, e.g.
+ *     <tpl if="name == &quot;Tommy&quot;">Hello</tpl>
+ *
+ * Using the sample data above:
+ *
+ *     var tpl = new Ext.XTemplate(
+ *         '<p>Name: {name}</p>',
+ *         '<p>Kids: ',
+ *         '<tpl for="kids">',
+ *             '<tpl if="age &gt; 1">',
+ *                 '<p>{name}</p>',
+ *             '</tpl>',
+ *         '</tpl></p>'
+ *     );
+ *     tpl.overwrite(panel.body, data);
+ *
+ * # Basic math support
+ *
+ * The following basic math operators may be applied directly on numeric data values:
+ *
+ *     + - * /
+ *
+ * For example:
+ *
+ *     var tpl = new Ext.XTemplate(
+ *         '<p>Name: {name}</p>',
+ *         '<p>Kids: ',
+ *         '<tpl for="kids">',
+ *             '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
+ *                 '<p>{#}: {name}</p>',  // <-- Auto-number each item
+ *                 '<p>In 5 Years: {age+5}</p>',  // <-- Basic math
+ *                 '<p>Dad: {parent.name}</p>',
+ *             '</tpl>',
+ *         '</tpl></p>'
+ *     );
+ *     tpl.overwrite(panel.body, data);
+ *
+ * # Execute arbitrary inline code with special built-in template variables
+ *
+ * Anything between `{[ ... ]}` is considered code to be executed in the scope of the template. There are some special
+ * variables available in that code:
+ *
+ * - **values**: The values in the current scope. If you are using scope changing sub-templates,
+ *   you can change what values is.
+ * - **parent**: The scope (values) of the ancestor template.
+ * - **xindex**: If you are in a looping template, the index of the loop you are in (1-based).
+ * - **xcount**: If you are in a looping template, the total length of the array you are looping.
+ *
+ * This example demonstrates basic row striping using an inline code block and the xindex variable:
+ *
+ *     var tpl = new Ext.XTemplate(
+ *         '<p>Name: {name}</p>',
+ *         '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
+ *         '<p>Kids: ',
+ *         '<tpl for="kids">',
+ *             '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
+ *             '{name}',
+ *             '</div>',
+ *         '</tpl></p>'
+ *      );
+ *     tpl.overwrite(panel.body, data);
+ *
+ * # Template member functions
+ *
+ * One or more member functions can be specified in a configuration object passed into the XTemplate constructor for
+ * more complex processing:
+ *
+ *     var tpl = new Ext.XTemplate(
+ *         '<p>Name: {name}</p>',
+ *         '<p>Kids: ',
+ *         '<tpl for="kids">',
+ *             '<tpl if="this.isGirl(name)">',
+ *                 '<p>Girl: {name} - {age}</p>',
+ *             '</tpl>',
+ *              // use opposite if statement to simulate 'else' processing:
+ *             '<tpl if="this.isGirl(name) == false">',
+ *                 '<p>Boy: {name} - {age}</p>',
+ *             '</tpl>',
+ *             '<tpl if="this.isBaby(age)">',
+ *                 '<p>{name} is a baby!</p>',
+ *             '</tpl>',
+ *         '</tpl></p>',
+ *         {
+ *             // XTemplate configuration:
+ *             disableFormats: true,
+ *             // member functions:
+ *             isGirl: function(name){
+ *                return name == 'Sara Grace';
+ *             },
+ *             isBaby: function(age){
+ *                return age < 1;
+ *             }
+ *         }
+ *     );
+ *     tpl.overwrite(panel.body, data);
+ */
+Ext.define('Ext.XTemplate', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.Template',
+
+    /* End Definitions */
+
+    argsRe: /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
+    nameRe: /^<tpl\b[^>]*?for="(.*?)"/,
+    ifRe: /^<tpl\b[^>]*?if="(.*?)"/,
+    execRe: /^<tpl\b[^>]*?exec="(.*?)"/,
+    constructor: function() {
+        this.callParent(arguments);
 
-    
-    setSize : function(width, height) {
         var me = this,
-            layoutCollection;
+            html = me.html,
+            argsRe = me.argsRe,
+            nameRe = me.nameRe,
+            ifRe = me.ifRe,
+            execRe = me.execRe,
+            id = 0,
+            tpls = [],
+            VALUES = 'values',
+            PARENT = 'parent',
+            XINDEX = 'xindex',
+            XCOUNT = 'xcount',
+            RETURN = 'return ',
+            WITHVALUES = 'with(values){ ',
+            m, matchName, matchIf, matchExec, exp, fn, exec, name, i;
 
-        
-        if (Ext.isObject(width)) {
-            height = width.height;
-            width  = width.width;
-        }
+        html = ['<tpl>', html, '</tpl>'].join('');
 
-        
-        if (Ext.isNumber(width)) {
-            width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
-        }
-        if (Ext.isNumber(height)) {
-            height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
-        }
+        while ((m = html.match(argsRe))) {
+            exp = null;
+            fn = null;
+            exec = null;
+            matchName = m[0].match(nameRe);
+            matchIf = m[0].match(ifRe);
+            matchExec = m[0].match(execRe);
 
-        if (!me.rendered || !me.isVisible()) {
-            
-            if (me.hiddenAncestor) {
-                layoutCollection = me.hiddenAncestor.layoutOnShow;
-                layoutCollection.remove(me);
-                layoutCollection.add(me);
+            exp = matchIf ? matchIf[1] : null;
+            if (exp) {
+                fn = Ext.functionFactory(VALUES, PARENT, XINDEX, XCOUNT, WITHVALUES + 'try{' + RETURN + Ext.String.htmlDecode(exp) + ';}catch(e){return;}}');
             }
-            me.needsLayout = {
-                width: width,
-                height: height,
-                isSetSize: true
-            };
-            if (!me.rendered) {
-                me.width  = (width !== undefined) ? width : me.width;
-                me.height = (height !== undefined) ? height : me.height;
+
+            exp = matchExec ? matchExec[1] : null;
+            if (exp) {
+                exec = Ext.functionFactory(VALUES, PARENT, XINDEX, XCOUNT, WITHVALUES + Ext.String.htmlDecode(exp) + ';}');
             }
-            return me;
-        }
-        me.doComponentLayout(width, height, true);
 
-        return me;
-    },
+            name = matchName ? matchName[1] : null;
+            if (name) {
+                if (name === '.') {
+                    name = VALUES;
+                } else if (name === '..') {
+                    name = PARENT;
+                }
+                name = Ext.functionFactory(VALUES, PARENT, 'try{' + WITHVALUES + RETURN + name + ';}}catch(e){return;}');
+            }
 
-    isFixedWidth: function() {
-        var me = this,
-            layoutManagedWidth = me.layoutManagedWidth;
+            tpls.push({
+                id: id,
+                target: name,
+                exec: exec,
+                test: fn,
+                body: m[1] || ''
+            });
 
-        if (Ext.isDefined(me.width) || layoutManagedWidth == 1) {
-            return true;
+            html = html.replace(m[0], '{xtpl' + id + '}');
+            id = id + 1;
         }
-        if (layoutManagedWidth == 2) {
-            return false;
+
+        for (i = tpls.length - 1; i >= 0; --i) {
+            me.compileTpl(tpls[i]);
         }
-        return (me.ownerCt && me.ownerCt.isFixedWidth());
+        me.master = tpls[tpls.length - 1];
+        me.tpls = tpls;
     },
 
-    isFixedHeight: function() {
-        var me = this,
-            layoutManagedHeight = me.layoutManagedHeight;
-
-        if (Ext.isDefined(me.height) || layoutManagedHeight == 1) {
-            return true;
-        }
-        if (layoutManagedHeight == 2) {
-            return false;
-        }
-        return (me.ownerCt && me.ownerCt.isFixedHeight());
+    // @private
+    applySubTemplate: function(id, values, parent, xindex, xcount) {
+        var me = this, t = me.tpls[id];
+        return t.compiled.call(me, values, parent, xindex, xcount);
     },
 
-    setCalculatedSize : function(width, height, callingContainer) {
-        var me = this,
-            layoutCollection;
+    /**
+     * @cfg {RegExp} codeRe
+     * The regular expression used to match code variables. Default: matches {[expression]}.
+     */
+    codeRe: /\{\[((?:\\\]|.|\n)*?)\]\}/g,
 
-        
-        if (Ext.isObject(width)) {
-            callingContainer = width.ownerCt;
-            height = width.height;
-            width  = width.width;
-        }
+    /**
+     * @cfg {Boolean} compiled
+     * Only applies to {@link Ext.Template}, XTemplates are compiled automatically.
+     */
 
-        
-        if (Ext.isNumber(width)) {
-            width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
-        }
-        if (Ext.isNumber(height)) {
-            height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
-        }
+    re: /\{([\w-\.\#]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\/]\s?[\d\.\+\-\*\/\(\)]+)?\}/g,
 
-        if (!me.rendered || !me.isVisible()) {
-            
-            if (me.hiddenAncestor) {
-                layoutCollection = me.hiddenAncestor.layoutOnShow;
-                layoutCollection.remove(me);
-                layoutCollection.add(me);
+    // @private
+    compileTpl: function(tpl) {
+        var fm = Ext.util.Format,
+            me = this,
+            useFormat = me.disableFormats !== true,
+            body, bodyReturn, evaluatedFn;
+
+        function fn(m, name, format, args, math) {
+            var v;
+            // name is what is inside the {}
+            // Name begins with xtpl, use a Sub Template
+            if (name.substr(0, 4) == 'xtpl') {
+                return "',this.applySubTemplate(" + name.substr(4) + ", values, parent, xindex, xcount),'";
             }
-            me.needsLayout = {
-                width: width,
-                height: height,
-                isSetSize: false,
-                ownerCt: callingContainer
-            };
-            return me;
+            // name = "." - Just use the values object.
+            if (name == '.') {
+                // filter to not include arrays/objects/nulls
+                v = 'Ext.Array.indexOf(["string", "number", "boolean"], typeof values) > -1 || Ext.isDate(values) ? values : ""';
+            }
+
+            // name = "#" - Use the xindex
+            else if (name == '#') {
+                v = 'xindex';
+            }
+            else if (name.substr(0, 7) == "parent.") {
+                v = name;
+            }
+            // name has a . in it - Use object literal notation, starting from values
+            else if (name.indexOf('.') != -1) {
+                v = "values." + name;
+            }
+
+            // name is a property of values
+            else {
+                v = "values['" + name + "']";
+            }
+            if (math) {
+                v = '(' + v + math + ')';
+            }
+            if (format && useFormat) {
+                args = args ? ',' + args : "";
+                if (format.substr(0, 5) != "this.") {
+                    format = "fm." + format + '(';
+                }
+                else {
+                    format = 'this.' + format.substr(5) + '(';
+                }
+            }
+            else {
+                args = '';
+                format = "(" + v + " === undefined ? '' : ";
+            }
+            return "'," + format + v + args + "),'";
         }
-        me.doComponentLayout(width, height, false, callingContainer);
 
-        return me;
-    },
+        function codeFn(m, code) {
+            // Single quotes get escaped when the template is compiled, however we want to undo this when running code.
+            return "',(" + code.replace(me.compileARe, "'") + "),'";
+        }
 
-    
-    doComponentLayout : function(width, height, isSetSize, callingContainer) {
-        var me = this,
-            componentLayout = me.getComponentLayout(),
-            lastComponentSize = componentLayout.lastComponentSize || {
-                width: undefined,
-                height: undefined
-            };
+        bodyReturn = tpl.body.replace(me.compileBRe, '\\n').replace(me.compileCRe, "\\'").replace(me.re, fn).replace(me.codeRe, codeFn);
+        body = "evaluatedFn = function(values, parent, xindex, xcount){return ['" + bodyReturn + "'].join('');};";
+        eval(body);
 
-        
-        
-        
-        if (me.rendered && componentLayout) {
+        tpl.compiled = function(values, parent, xindex, xcount) {
+            var vs,
+                length,
+                buffer,
+                i;
 
+            if (tpl.test && !tpl.test.call(me, values, parent, xindex, xcount)) {
+                return '';
+            }
 
-            
-            if (!Ext.isDefined(width)) {
-                if (me.isFixedWidth()) {
-                    width = Ext.isDefined(me.width) ? me.width : lastComponentSize.width;
-                }
+            vs = tpl.target ? tpl.target.call(me, values, parent) : values;
+            if (!vs) {
+               return '';
             }
 
-            
-            if (!Ext.isDefined(height)) {
-                if (me.isFixedHeight()) {
-                    height = Ext.isDefined(me.height) ? me.height : lastComponentSize.height;
+            parent = tpl.target ? values : parent;
+            if (tpl.target && Ext.isArray(vs)) {
+                buffer = [];
+                length = vs.length;
+                if (tpl.exec) {
+                    for (i = 0; i < length; i++) {
+                        buffer[buffer.length] = evaluatedFn.call(me, vs[i], parent, i + 1, length);
+                        tpl.exec.call(me, vs[i], parent, i + 1, length);
+                    }
+                } else {
+                    for (i = 0; i < length; i++) {
+                        buffer[buffer.length] = evaluatedFn.call(me, vs[i], parent, i + 1, length);
+                    }
                 }
+                return buffer.join('');
             }
 
-            if (isSetSize) {
-                me.width = width;
-                me.height = height;
+            if (tpl.exec) {
+                tpl.exec.call(me, vs, parent, xindex, xcount);
             }
+            return evaluatedFn.call(me, vs, parent, xindex, xcount);
+        };
 
-            componentLayout.layout(width, height, isSetSize, callingContainer);
-        }
-        return me;
+        return this;
     },
 
-    
-    forceComponentLayout: function () {
-        this.doComponentLayout();
+    // inherit docs from Ext.Template
+    applyTemplate: function(values) {
+        return this.master.compiled.call(this, values, {}, 1, 1);
+    },
+
+    /**
+     * Does nothing. XTemplates are compiled automatically, so this function simply returns this.
+     * @return {Ext.XTemplate} this
+     */
+    compile: function() {
+        return this;
+    }
+}, function() {
+    // re-create the alias, inheriting it from Ext.Template doesn't work as intended.
+    this.createAlias('apply', 'applyTemplate');
+});
+
+
+Ext.define('Ext.app.Controller', {
+
+    mixins: {
+        observable: 'Ext.util.Observable'
     },
 
     
-    setComponentLayout : function(layout) {
-        var currentLayout = this.componentLayout;
-        if (currentLayout && currentLayout.isLayout && currentLayout != layout) {
-            currentLayout.setOwner(null);
+    
+    
+
+    
+
+    
+
+    onClassExtended: function(cls, data) {
+        var className = Ext.getClassName(cls),
+            match = className.match(/^(.*)\.controller\./);
+
+        if (match !== null) {
+            var namespace = Ext.Loader.getPrefix(className) || match[1],
+                onBeforeClassCreated = data.onBeforeClassCreated,
+                requires = [],
+                modules = ['model', 'view', 'store'],
+                prefix;
+
+            data.onBeforeClassCreated = function(cls, data) {
+                var i, ln, module,
+                    items, j, subLn, item;
+
+                for (i = 0,ln = modules.length; i < ln; i++) {
+                    module = modules[i];
+
+                    items = Ext.Array.from(data[module + 's']);
+
+                    for (j = 0,subLn = items.length; j < subLn; j++) {
+                        item = items[j];
+
+                        prefix = Ext.Loader.getPrefix(item);
+
+                        if (prefix === '' || prefix === item) {
+                            requires.push(namespace + '.' + module + '.' + item);
+                        }
+                        else {
+                            requires.push(item);
+                        }
+                    }
+                }
+
+                Ext.require(requires, Ext.Function.pass(onBeforeClassCreated, arguments, this));
+            };
         }
-        this.componentLayout = layout;
-        layout.setOwner(this);
     },
 
-    getComponentLayout : function() {
-        var me = this;
+    
+    constructor: function(config) {
+        this.mixins.observable.constructor.call(this, config);
 
-        if (!me.componentLayout || !me.componentLayout.isLayout) {
-            me.setComponentLayout(Ext.layout.Layout.create(me.componentLayout, 'autocomponent'));
+        Ext.apply(this, config || {});
+
+        this.createGetters('model', this.models);
+        this.createGetters('store', this.stores);
+        this.createGetters('view', this.views);
+
+        if (this.refs) {
+            this.ref(this.refs);
         }
-        return me.componentLayout;
     },
 
     
-    afterComponentLayout: function(width, height, isSetSize, callingContainer) {
-        this.fireEvent('resize', this, width, height);
-    },
+    init: function(application) {},
 
     
-    beforeComponentLayout: function(width, height, isSetSize, callingContainer) {
-        return true;
+    onLaunch: function(application) {},
+
+    createGetters: function(type, refs) {
+        type = Ext.String.capitalize(type);
+        Ext.Array.each(refs, function(ref) {
+            var fn = 'get',
+                parts = ref.split('.');
+
+            
+            Ext.Array.each(parts, function(part) {
+                fn += Ext.String.capitalize(part);
+            });
+            fn += type;
+
+            if (!this[fn]) {
+                this[fn] = Ext.Function.pass(this['get' + type], [ref], this);
+            }
+            
+            this[fn](ref);
+        },
+        this);
     },
 
-    
-    setPosition : function(x, y) {
+    ref: function(refs) {
         var me = this;
+        refs = Ext.Array.from(refs);
+        Ext.Array.each(refs, function(info) {
+            var ref = info.ref,
+                fn = 'get' + Ext.String.capitalize(ref);
+            if (!me[fn]) {
+                me[fn] = Ext.Function.pass(me.getRef, [ref, info], me);
+            }
+        });
+    },
 
-        if (Ext.isObject(x)) {
-            y = x.y;
-            x = x.x;
-        }
+    getRef: function(ref, info, config) {
+        this.refCache = this.refCache || {};
+        info = info || {};
+        config = config || {};
 
-        if (!me.rendered) {
-            return me;
+        Ext.apply(info, config);
+
+        if (info.forceCreate) {
+            return Ext.ComponentManager.create(info, 'component');
         }
 
-        if (x !== undefined || y !== undefined) {
-            me.el.setBox(x, y);
-            me.onPosition(x, y);
-            me.fireEvent('move', me, x, y);
+        var me = this,
+            selector = info.selector,
+            cached = me.refCache[ref];
+
+        if (!cached) {
+            me.refCache[ref] = cached = Ext.ComponentQuery.query(info.selector)[0];
+            if (!cached && info.autoCreate) {
+                me.refCache[ref] = cached = Ext.ComponentManager.create(info, 'component');
+            }
+            if (cached) {
+                cached.on('beforedestroy', function() {
+                    me.refCache[ref] = null;
+                });
+            }
         }
-        return me;
+
+        return cached;
     },
 
     
-    onPosition: Ext.emptyFn,
+    control: function(selectors, listeners) {
+        this.application.control(selectors, listeners, this);
+    },
 
     
-    setWidth : function(width) {
-        return this.setSize(width);
+    getController: function(name) {
+        return this.application.getController(name);
     },
 
     
-    setHeight : function(height) {
-        return this.setSize(undefined, height);
+    getStore: function(name) {
+        return this.application.getStore(name);
     },
 
     
-    getSize : function() {
-        return this.el.getSize();
+    getModel: function(model) {
+        return this.application.getModel(model);
     },
 
     
-    getWidth : function() {
-        return this.el.getWidth();
-    },
+    getView: function(view) {
+        return this.application.getView(view);
+    }
+});
+
+
+Ext.define('Ext.data.IdGenerator', {
+
+    isGenerator: true,
 
     
-    getHeight : function() {
-        return this.el.getHeight();
+    constructor: function(config) {
+        var me = this;
+
+        Ext.apply(me, config);
+
+        if (me.id) {
+            Ext.data.IdGenerator.all[me.id] = me;
+        }
     },
 
     
-    getLoader: function(){
-        var me = this,
-            autoLoad = me.autoLoad ? (Ext.isObject(me.autoLoad) ? me.autoLoad : {url: me.autoLoad}) : null,
-            loader = me.loader || autoLoad;
 
-        if (loader) {
-            if (!loader.isLoader) {
-                me.loader = Ext.create('Ext.ComponentLoader', Ext.apply({
-                    target: me,
-                    autoLoad: autoLoad
-                }, loader));
+    getRecId: function (rec) {
+        return rec.modelName + '-' + rec.internalId;
+    },
+
+    
+
+    statics: {
+        
+        all: {},
+
+        
+        get: function (config) {
+            var generator,
+                id,
+                type;
+
+            if (typeof config == 'string') {
+                id = type = config;
+                config = null;
+            } else if (config.isGenerator) {
+                return config;
             } else {
-                loader.setTarget(me);
+                id = config.id || config.type;
+                type = config.type;
             }
-            return me.loader;
 
+            generator = this.all[id];
+            if (!generator) {
+                generator = Ext.create('idgen.' + type, config);
+            }
+
+            return generator;
         }
-        return null;
+    }
+});
+
+
+Ext.define('Ext.data.SortTypes', {
+    
+    singleton: true,
+    
+    
+    none : function(s) {
+        return s;
     },
 
     
-    setLoading : function(load, targetEl) {
-        var me = this,
-            config;
+    stripTagsRE : /<\/?[^>]+>/gi,
 
-        if (me.rendered) {
-            if (load !== false && !me.collapsed) {
-                if (Ext.isObject(load)) {
-                    config = load;
-                }
-                else if (Ext.isString(load)) {
-                    config = {msg: load};
-                }
-                else {
-                    config = {};
-                }
-                me.loadMask = me.loadMask || Ext.create('Ext.LoadMask', targetEl ? me.getTargetEl() : me.el, config);
-                me.loadMask.show();
-            } else if (me.loadMask) {
-                Ext.destroy(me.loadMask);
-                me.loadMask = null;
-            }
-        }
+    
+    asText : function(s) {
+        return String(s).replace(this.stripTagsRE, "");
+    },
 
-        return me.loadMask;
+    
+    asUCText : function(s) {
+        return String(s).toUpperCase().replace(this.stripTagsRE, "");
     },
 
     
-    setDocked : function(dock, layoutParent) {
-        var me = this;
+    asUCString : function(s) {
+        return String(s).toUpperCase();
+    },
 
-        me.dock = dock;
-        if (layoutParent && me.ownerCt && me.rendered) {
-            me.ownerCt.doComponentLayout();
+    
+    asDate : function(s) {
+        if(!s){
+            return 0;
         }
-        return me;
+        if(Ext.isDate(s)){
+            return s.getTime();
+        }
+        return Date.parse(String(s));
     },
 
-    onDestroy : function() {
-        var me = this;
-
-        if (me.monitorResize && Ext.EventManager.resizeEvent) {
-            Ext.EventManager.resizeEvent.removeListener(me.setSize, me);
-        }
-        Ext.destroy(me.componentLayout, me.loadMask);
+    
+    asFloat : function(s) {
+        var val = parseFloat(String(s).replace(/,/g, ""));
+        return isNaN(val) ? 0 : val;
     },
 
     
-    destroy : function() {
-        var me = this;
+    asInt : function(s) {
+        var val = parseInt(String(s).replace(/,/g, ""), 10);
+        return isNaN(val) ? 0 : val;
+    }
+});
 
-        if (!me.isDestroyed) {
-            if (me.fireEvent('beforedestroy', me) !== false) {
-                me.destroying = true;
-                me.beforeDestroy();
+Ext.define('Ext.util.Filter', {
 
-                if (me.floating) {
-                    delete me.floatParent;
-                    
-                    
-                    if (me.zIndexManager) {
-                        me.zIndexManager.unregister(me);
-                    }
-                } else if (me.ownerCt && me.ownerCt.remove) {
-                    me.ownerCt.remove(me, false);
-                }
+    
 
-                me.onDestroy();
+    
+    
+    
+    
+    
+    
+    anyMatch: false,
+    
+    
+    exactMatch: false,
+    
+    
+    caseSensitive: false,
+    
+    
 
+    
+    constructor: function(config) {
+        var me = this;
+        Ext.apply(me, config);
+        
+        
+        
+        me.filter = me.filter || me.filterFn;
+        
+        if (me.filter === undefined) {
+            if (me.property === undefined || me.value === undefined) {
                 
-                Ext.destroy(me.plugins);
-
-                if (me.rendered) {
-                    me.el.remove();
-                }
-
-                Ext.ComponentManager.unregister(me);
-                me.fireEvent('destroy', me);
-
-                me.mixins.state.destroy.call(me);
-
-                me.clearListeners();
-                me.destroying = false;
-                me.isDestroyed = true;
+                
+                
+                
+            } else {
+                me.filter = me.createFilterFn();
             }
+            
+            me.filterFn = me.filter;
         }
     },
-
     
-    getPlugin: function(pluginId) {
-        var i = 0,
-            plugins = this.plugins,
-            ln = plugins.length;
-        for (; i < ln; i++) {
-            if (plugins[i].pluginId === pluginId) {
-                return plugins[i];
-            }
-        }
+    
+    createFilterFn: function() {
+        var me       = this,
+            matcher  = me.createValueMatcher(),
+            property = me.property;
+        
+        return function(item) {
+            var value = me.getRoot.call(me, item)[property];
+            return matcher === null ? value === null : matcher.test(value);
+        };
     },
-
     
-    isDescendantOf: function(container) {
-        return !!this.findParentBy(function(p){
-            return p === container;
-        });
+    
+    getRoot: function(item) {
+        var root = this.root;
+        return root === undefined ? item : item[root];
+    },
+    
+    
+    createValueMatcher : function() {
+        var me            = this,
+            value         = me.value,
+            anyMatch      = me.anyMatch,
+            exactMatch    = me.exactMatch,
+            caseSensitive = me.caseSensitive,
+            escapeRe      = Ext.String.escapeRegex;
+            
+        if (value === null) {
+            return value;
+        }
+        
+        if (!value.exec) { 
+            value = String(value);
+
+            if (anyMatch === true) {
+                value = escapeRe(value);
+            } else {
+                value = '^' + escapeRe(value);
+                if (exactMatch === true) {
+                    value += '$';
+                }
+            }
+            value = new RegExp(value, caseSensitive ? '' : 'i');
+         }
+         
+         return value;
     }
-}, function() {
-    this.createAlias({
-        on: 'addListener',
-        prev: 'previousSibling',
-        next: 'nextSibling'
-    });
 });
 
+Ext.define('Ext.util.Sorter', {
 
-Ext.define('Ext.AbstractPlugin', {
-    disabled: false,
-
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    direction: "ASC",
+    
     constructor: function(config) {
-        Ext.apply(this, config);
+        var me = this;
+        
+        Ext.apply(me, config);
+        
+        
+        me.updateSortFunction();
     },
-
-    getCmp: function() {
-        return this.cmp;
+    
+    
+    createSortFunction: function(sorterFn) {
+        var me        = this,
+            property  = me.property,
+            direction = me.direction || "ASC",
+            modifier  = direction.toUpperCase() == "DESC" ? -1 : 1;
+        
+        
+        
+        return function(o1, o2) {
+            return modifier * sorterFn.call(me, o1, o2);
+        };
     },
-
     
-    init: Ext.emptyFn,
-
     
-    destroy: Ext.emptyFn,
+    defaultSorterFn: function(o1, o2) {
+        var me = this,
+            transform = me.transform,
+            v1 = me.getRoot(o1)[me.property],
+            v2 = me.getRoot(o2)[me.property];
+            
+        if (transform) {
+            v1 = transform(v1);
+            v2 = transform(v2);
+        }
 
+        return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
+    },
     
-    enable: function() {
-        this.disabled = false;
+    
+    getRoot: function(item) {
+        return this.root === undefined ? item : item[this.root];
     },
-
     
-    disable: function() {
-        this.disabled = true;
+    
+    setDirection: function(direction) {
+        var me = this;
+        me.direction = direction;
+        me.updateSortFunction();
+    },
+    
+    
+    toggle: function() {
+        var me = this;
+        me.direction = Ext.String.toggle(me.direction, "ASC", "DESC");
+        me.updateSortFunction();
+    },
+    
+    
+    updateSortFunction: function(fn) {
+        var me = this;
+        fn = fn || me.sorterFn || me.defaultSorterFn;
+        me.sort = me.createSortFunction(fn);
     }
 });
 
-Ext.define('Ext.data.Connection', {
-    mixins: {
-        observable: 'Ext.util.Observable'
-    },
+Ext.define('Ext.data.Operation', {
+    
+    synchronous: true,
 
-    statics: {
-        requestId: 0
-    },
+    
+    action: undefined,
 
-    url: null,
-    async: true,
-    method: null,
-    username: '',
-    password: '',
+    
+    filters: undefined,
 
     
-    disableCaching: true,
+    sorters: undefined,
 
     
-    disableCachingParam: '_dc',
+    group: undefined,
 
     
-    timeout : 30000,
+    start: undefined,
 
     
+    limit: undefined,
 
-    useDefaultHeader : true,
-    defaultPostHeader : 'application/x-www-form-urlencoded; charset=UTF-8',
-    useDefaultXhrHeader : true,
-    defaultXhrHeader : 'XMLHttpRequest',
+    
+    batch: undefined,
 
-    constructor : function(config) {
-        config = config || {};
-        Ext.apply(this, config);
+    
+    callback: undefined,
 
-        this.addEvents(
-            
-            'beforerequest',
-            
-            'requestcomplete',
-            
-            'requestexception'
-        );
-        this.requests = {};
-        this.mixins.observable.constructor.call(this);
-    },
+    
+    scope: undefined,
 
     
-    request : function(options) {
-        options = options || {};
-        var me = this,
-            scope = options.scope || window,
-            username = options.username || me.username,
-            password = options.password || me.password || '',
-            async,
-            requestOptions,
-            request,
-            headers,
-            xhr;
+    started: false,
 
-        if (me.fireEvent('beforerequest', me, options) !== false) {
+    
+    running: false,
 
-            requestOptions = me.setOptions(options, scope);
+    
+    complete: false,
 
-            if (this.isFormUpload(options) === true) {
-                this.upload(options.form, requestOptions.url, requestOptions.data, options);
-                return null;
-            }
+    
+    success: undefined,
 
-            
-            if (options.autoAbort === true || me.autoAbort) {
-                me.abort();
-            }
+    
+    exception: false,
 
-            
-            xhr = this.getXhrInstance();
+    
+    error: undefined,
 
-            async = options.async !== false ? (options.async || me.async) : false;
+    
+    actionCommitRecordsRe: /^(?:create|update)$/i,
 
-            
-            if (username) {
-                xhr.open(requestOptions.method, requestOptions.url, async, username, password);
-            } else {
-                xhr.open(requestOptions.method, requestOptions.url, async);
-            }
+    
+    actionSkipSyncRe: /^destroy$/i,
 
-            headers = me.setupHeaders(xhr, options, requestOptions.data, requestOptions.params);
+    
+    constructor: function(config) {
+        Ext.apply(this, config || {});
+    },
 
-            
-            request = {
-                id: ++Ext.data.Connection.requestId,
-                xhr: xhr,
-                headers: headers,
-                options: options,
-                async: async,
-                timeout: setTimeout(function() {
-                    request.timedout = true;
-                    me.abort(request);
-                }, options.timeout || me.timeout)
-            };
-            me.requests[request.id] = request;
+    
+    commitRecords: function (serverRecords) {
+        var me = this,
+            mc, index, clientRecords, serverRec, clientRec;
 
-            
-            if (async) {
-                xhr.onreadystatechange = Ext.Function.bind(me.onStateChange, me, [request]);
-            }
+        if (!me.actionSkipSyncRe.test(me.action)) {
+            clientRecords = me.records;
 
-            
-            xhr.send(requestOptions.data);
-            if (!async) {
-                return this.onComplete(request);
+            if (clientRecords && clientRecords.length) {
+                mc = Ext.create('Ext.util.MixedCollection', true, function(r) {return r.getId();});
+                mc.addAll(clientRecords);
+
+                for (index = serverRecords ? serverRecords.length : 0; index--; ) {
+                    serverRec = serverRecords[index];
+                    clientRec = mc.get(serverRec.getId());
+
+                    if (clientRec) {
+                        clientRec.beginEdit();
+                        clientRec.set(serverRec.data);
+                        clientRec.endEdit(true);
+                    }
+                }
+
+                if (me.actionCommitRecordsRe.test(me.action)) {
+                    for (index = clientRecords.length; index--; ) {
+                        clientRecords[index].commit();
+                    }
+                }
             }
-            return request;
-        } else {
-            Ext.callback(options.callback, options.scope, [options, undefined, undefined]);
-            return null;
         }
     },
 
     
-    upload: function(form, url, params, options){
-        form = Ext.getDom(form);
-        options = options || {};
+    setStarted: function() {
+        this.started = true;
+        this.running = true;
+    },
 
-        var id = Ext.id(),
-                frame = document.createElement('iframe'),
-                hiddens = [],
-                encoding = 'multipart/form-data',
-                buf = {
-                    target: form.target,
-                    method: form.method,
-                    encoding: form.encoding,
-                    enctype: form.enctype,
-                    action: form.action
-                }, hiddenItem;
+    
+    setCompleted: function() {
+        this.complete = true;
+        this.running  = false;
+    },
 
-        
-        Ext.fly(frame).set({
-            id: id,
-            name: id,
-            cls: Ext.baseCSSPrefix + 'hide-display',
-            src: Ext.SSL_SECURE_URL
-        });
+    
+    setSuccessful: function() {
+        this.success = true;
+    },
 
-        document.body.appendChild(frame);
+    
+    setException: function(error) {
+        this.exception = true;
+        this.success = false;
+        this.running = false;
+        this.error = error;
+    },
 
-        
-        if (document.frames) {
-           document.frames[id].name = id;
-        }
+    
+    hasException: function() {
+        return this.exception === true;
+    },
 
-        Ext.fly(form).set({
-            target: id,
-            method: 'POST',
-            enctype: encoding,
-            encoding: encoding,
-            action: url || buf.action
-        });
+    
+    getError: function() {
+        return this.error;
+    },
 
-        
-        if (params) {
-            Ext.iterate(Ext.Object.fromQueryString(params), function(name, value){
-                hiddenItem = document.createElement('input');
-                Ext.fly(hiddenItem).set({
-                    type: 'hidden',
-                    value: value,
-                    name: name
-                });
-                form.appendChild(hiddenItem);
-                hiddens.push(hiddenItem);
-            });
-        }
+    
+    getRecords: function() {
+        var resultSet = this.getResultSet();
 
-        Ext.fly(frame).on('load', Ext.Function.bind(this.onUploadComplete, this, [frame, options]), null, {single: true});
-        form.submit();
+        return (resultSet === undefined ? this.records : resultSet.records);
+    },
 
-        Ext.fly(form).set(buf);
-        Ext.each(hiddens, function(h) {
-            Ext.removeNode(h);
-        });
+    
+    getResultSet: function() {
+        return this.resultSet;
     },
 
-    onUploadComplete: function(frame, options){
-        var me = this,
-            
-            response = {
-                responseText: '',
-                responseXML: null
-            }, doc, firstChild;
+    
+    isStarted: function() {
+        return this.started === true;
+    },
 
-        try {
-            doc = frame.contentWindow.document || frame.contentDocument || window.frames[id].document;
-            if (doc) {
-                if (doc.body) {
-                    if (/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)) { 
-                        response.responseText = firstChild.value;
-                    } else {
-                        response.responseText = doc.body.innerHTML;
-                    }
-                }
-                
-                response.responseXML = doc.XMLDocument || doc;
-            }
-        } catch (e) {
-        }
+    
+    isRunning: function() {
+        return this.running === true;
+    },
 
-        me.fireEvent('requestcomplete', me, response, options);
+    
+    isComplete: function() {
+        return this.complete === true;
+    },
 
-        Ext.callback(options.success, options.scope, [response, options]);
-        Ext.callback(options.callback, options.scope, [options, true, response]);
+    
+    wasSuccessful: function() {
+        return this.isComplete() && this.success === true;
+    },
 
-        setTimeout(function(){
-            Ext.removeNode(frame);
-        }, 100);
+    
+    setBatch: function(batch) {
+        this.batch = batch;
     },
 
     
-    isFormUpload: function(options){
-        var form = this.getForm(options);
-        if (form) {
-            return (options.isUpload || (/multipart\/form-data/i).test(form.getAttribute('enctype')));
+    allowWrite: function() {
+        return this.action != 'read';
+    }
+});
+
+Ext.define('Ext.data.validations', {
+    singleton: true,
+    
+    
+    presenceMessage: 'must be present',
+    
+    
+    lengthMessage: 'is the wrong length',
+    
+    
+    formatMessage: 'is the wrong format',
+    
+    
+    inclusionMessage: 'is not included in the list of acceptable values',
+    
+    
+    exclusionMessage: 'is not an acceptable value',
+    
+    
+    emailMessage: 'is not a valid email address',
+    
+    
+    emailRe: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
+    
+    
+    presence: function(config, value) {
+        if (value === undefined) {
+            value = config;
         }
-        return false;
+        
+        
+        return !!value || value === 0;
     },
-
     
-    getForm: function(options){
-        return Ext.getDom(options.form) || null;
+    
+    length: function(config, value) {
+        if (value === undefined || value === null) {
+            return false;
+        }
+        
+        var length = value.length,
+            min    = config.min,
+            max    = config.max;
+        
+        if ((min && length < min) || (max && length > max)) {
+            return false;
+        } else {
+            return true;
+        }
+    },
+    
+    
+    email: function(config, email) {
+        return Ext.data.validations.emailRe.test(email);
+    },
+    
+    
+    format: function(config, value) {
+        return !!(config.matcher && config.matcher.test(value));
+    },
+    
+    
+    inclusion: function(config, value) {
+        return config.list && Ext.Array.indexOf(config.list,value) != -1;
     },
+    
+    
+    exclusion: function(config, value) {
+        return config.list && Ext.Array.indexOf(config.list,value) == -1;
+    }
+});
 
+Ext.define('Ext.data.ResultSet', {
     
-    setOptions: function(options, scope){
-        var me =  this,
-            params = options.params || {},
-            extraParams = me.extraParams,
-            urlParams = options.urlParams,
-            url = options.url || me.url,
-            jsonData = options.jsonData,
-            method,
-            disableCache,
-            data;
+    loaded: true,
 
+    
+    count: 0,
 
-        
-        if (Ext.isFunction(params)) {
-            params = params.call(scope, options);
-        }
+    
+    total: 0,
+
+    
+    success: false,
+
+    
+
+    
+    constructor: function(config) {
+        Ext.apply(this, config);
 
         
-        if (Ext.isFunction(url)) {
-            url = url.call(scope, options);
+        this.totalRecords = this.total;
+
+        if (config.count === undefined) {
+            this.count = this.records.length;
         }
+    }
+});
 
-        url = this.setupUrl(options, url);
+Ext.define('Ext.data.writer.Writer', {
+    alias: 'writer.base',
+    alternateClassName: ['Ext.data.DataWriter', 'Ext.data.Writer'],
+    
+    
+    writeAllFields: true,
+    
+    
+    nameProperty: 'name',
+
+    
+    constructor: function(config) {
+        Ext.apply(this, config);
+    },
 
+    
+    write: function(request) {
+        var operation = request.operation,
+            records   = operation.records || [],
+            len       = records.length,
+            i         = 0,
+            data      = [];
 
-        
-        data = options.rawData || options.xmlData || jsonData || null;
-        if (jsonData && !Ext.isPrimitive(jsonData)) {
-            data = Ext.encode(data);
+        for (; i < len; i++) {
+            data.push(this.getRecordData(records[i]));
         }
+        return this.writeRecords(request, data);
+    },
 
+    
+    getRecordData: function(record) {
+        var isPhantom = record.phantom === true,
+            writeAll = this.writeAllFields || isPhantom,
+            nameProperty = this.nameProperty,
+            fields = record.fields,
+            data = {},
+            changes,
+            name,
+            field,
+            key;
         
-        if (Ext.isObject(params)) {
-            params = Ext.Object.toQueryString(params);
+        if (writeAll) {
+            fields.each(function(field){
+                if (field.persist) {
+                    name = field[nameProperty] || field.name;
+                    data[name] = record.get(field.name);
+                }
+            });
+        } else {
+            
+            changes = record.getChanges();
+            for (key in changes) {
+                if (changes.hasOwnProperty(key)) {
+                    field = fields.get(key);
+                    name = field[nameProperty] || field.name;
+                    data[name] = changes[key];
+                }
+            }
+            if (!isPhantom) {
+                
+                data[record.idProperty] = record.getId();
+            }
         }
+        return data;
+    }
+});
 
-        if (Ext.isObject(extraParams)) {
-            extraParams = Ext.Object.toQueryString(extraParams);
-        }
 
-        params = params + ((extraParams) ? ((params) ? '&' : '') + extraParams : '');
+Ext.define('Ext.util.Floating', {
 
-        urlParams = Ext.isObject(urlParams) ? Ext.Object.toQueryString(urlParams) : urlParams;
+    uses: ['Ext.Layer', 'Ext.window.Window'],
 
-        params = this.setupParams(options, params);
+    
+    focusOnToFront: true,
+
+    
+    shadow: 'sides',
 
+    constructor: function(config) {
+        var me = this;
         
-        method = (options.method || me.method || ((params || data) ? 'POST' : 'GET')).toUpperCase();
-        this.setupMethod(options, method);
+        me.floating = true;
+        me.el = Ext.create('Ext.Layer', Ext.apply({}, config, {
+            hideMode: me.hideMode,
+            hidden: me.hidden,
+            shadow: Ext.isDefined(me.shadow) ? me.shadow : 'sides',
+            shadowOffset: me.shadowOffset,
+            constrain: false,
+            shim: me.shim === false ? false : undefined
+        }), me.el);
+    },
 
+    onFloatRender: function() {
+        var me = this;
+        me.zIndexParent = me.getZIndexParent();
+        me.setFloatParent(me.ownerCt);
+        delete me.ownerCt;
 
-        disableCache = options.disableCaching !== false ? (options.disableCaching || me.disableCaching) : false;
-        
-        if (method === 'GET' && disableCache) {
-            url = Ext.urlAppend(url, (options.disableCachingParam || me.disableCachingParam) + '=' + (new Date().getTime()));
+        if (me.zIndexParent) {
+            me.zIndexParent.registerFloatingItem(me);
+        } else {
+            Ext.WindowManager.register(me);
         }
+    },
+
+    setFloatParent: function(floatParent) {
+        var me = this;
 
         
-        if ((method == 'GET' || data) && params) {
-            url = Ext.urlAppend(url, params);
-            params = null;
+        if (me.floatParent) {
+            me.mun(me.floatParent, {
+                hide: me.onFloatParentHide,
+                show: me.onFloatParentShow,
+                scope: me
+            });
         }
 
+        me.floatParent = floatParent;
+
         
-        if (urlParams) {
-            url = Ext.urlAppend(url, urlParams);
+        if (floatParent) {
+            me.mon(me.floatParent, {
+                hide: me.onFloatParentHide,
+                show: me.onFloatParentShow,
+                scope: me
+            });
         }
 
-        return {
-            url: url,
-            method: method,
-            data: data || params || null
-        };
+        
+        
+        if ((me.constrain || me.constrainHeader) && !me.constrainTo) {
+            me.constrainTo = floatParent ? floatParent.getTargetEl() : me.container;
+        }
     },
 
-    
-    setupUrl: function(options, url){
-        var form = this.getForm(options);
-        if (form) {
-            url = url || form.action;
+    onFloatParentHide: function() {
+        var me = this;
+        
+        if (me.hideOnParentHide !== false) {
+            me.showOnParentShow = me.isVisible();
+            me.hide();
         }
-        return url;
     },
 
-
-    
-    setupParams: function(options, params) {
-        var form = this.getForm(options),
-            serializedForm;
-        if (form && !this.isFormUpload(options)) {
-            serializedForm = Ext.core.Element.serializeForm(form);
-            params = params ? (params + '&' + serializedForm) : serializedForm;
+    onFloatParentShow: function() {
+        if (this.showOnParentShow) {
+            delete this.showOnParentShow;
+            this.show();
         }
-        return params;
     },
 
     
-    setupMethod: function(options, method){
-        if (this.isFormUpload(options)) {
-            return 'POST';
+    getZIndexParent: function() {
+        var p = this.ownerCt,
+            c;
+
+        if (p) {
+            while (p) {
+                c = p;
+                p = p.ownerCt;
+            }
+            if (c.floating) {
+                return c;
+            }
         }
-        return method;
     },
 
     
-    setupHeaders: function(xhr, options, data, params){
-        var me = this,
-            headers = Ext.apply({}, options.headers || {}, me.defaultHeaders || {}),
-            contentType = me.defaultPostHeader,
-            jsonData = options.jsonData,
-            xmlData = options.xmlData,
-            key,
-            header;
+    
+    
+    
+    
+    setZIndex: function(index) {
+        var me = this;
+        me.el.setZIndex(index);
 
-        if (!headers['Content-Type'] && (data || params)) {
-            if (data) {
-                if (options.rawData) {
-                    contentType = 'text/plain';
-                } else {
-                    if (xmlData && Ext.isDefined(xmlData)) {
-                        contentType = 'text/xml';
-                    } else if (jsonData && Ext.isDefined(jsonData)) {
-                        contentType = 'application/json';
-                    }
-                }
-            }
-            headers['Content-Type'] = contentType;
-        }
+        
+        index += 10;
 
-        if (me.useDefaultXhrHeader && !headers['X-Requested-With']) {
-            headers['X-Requested-With'] = me.defaultXhrHeader;
-        }
         
-        try{
-            for (key in headers) {
-                if (headers.hasOwnProperty(key)) {
-                    header = headers[key];
-                    xhr.setRequestHeader(key, header);
-                }
+        
+        if (me.floatingItems) {
+            index = Math.floor(me.floatingItems.setBase(index) / 100) * 100 + 10000;
+        }
+        return index;
+    },
 
-            }
-        } catch(e) {
-            me.fireEvent('exception', key, header);
+    
+    doConstrain: function(constrainTo) {
+        var me = this,
+            vector = me.getConstrainVector(constrainTo || me.el.getScopeParent()),
+            xy;
+
+        if (vector) {
+            xy = me.getPosition();
+            xy[0] += vector[0];
+            xy[1] += vector[1];
+            me.setPosition(xy);
         }
-        return headers;
     },
 
+
     
-    getXhrInstance: (function(){
-        var options = [function(){
-            return new XMLHttpRequest();
-        }, function(){
-            return new ActiveXObject('MSXML2.XMLHTTP.3.0');
-        }, function(){
-            return new ActiveXObject('MSXML2.XMLHTTP');
-        }, function(){
-            return new ActiveXObject('Microsoft.XMLHTTP');
-        }], i = 0,
-            len = options.length,
-            xhr;
+    getConstrainVector: function(constrainTo){
+        var me = this,
+            el;
 
-        for(; i < len; ++i) {
-            try{
-                xhr = options[i];
-                xhr();
-                break;
-            }catch(e){}
+        if (me.constrain || me.constrainHeader) {
+            el = me.constrainHeader ? me.header.el : me.el;
+            constrainTo = constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container;
+            return el.getConstrainVector(constrainTo);
         }
-        return xhr;
-    })(),
+    },
 
     
-    isLoading : function(request) {
-        if (!(request && request.xhr)) {
-            return false;
+    alignTo: function(element, position, offsets) {
+        if (element.isComponent) {
+            element = element.getEl();
         }
-        
-        var state = request.xhr.readyState;
-        return !(state === 0 || state == 4);
+        var xy = this.el.getAlignToXY(element, position, offsets);
+        this.setPagePosition(xy);
+        return this;
     },
 
     
-    abort : function(request) {
-        var me = this,
-            requests = me.requests,
-            id;
+    toFront: function(preventFocus) {
+        var me = this;
 
-        if (request && me.isLoading(request)) {
-            
-            request.xhr.onreadystatechange = null;
-            request.xhr.abort();
-            me.clearTimeout(request);
-            if (!request.timedout) {
-                request.aborted = true;
+        
+        
+        if (me.zIndexParent) {
+            me.zIndexParent.toFront(true);
+        }
+        if (me.zIndexManager.bringToFront(me)) {
+            if (!Ext.isDefined(preventFocus)) {
+                preventFocus = !me.focusOnToFront;
             }
-            me.onComplete(request);
-            me.cleanup(request);
-        } else if (!request) {
-            for(id in requests) {
-                if (requests.hasOwnProperty(id)) {
-                    me.abort(requests[id]);
-                }
+            if (!preventFocus) {
+                
+                
+                
+                me.focus(false, true);
             }
         }
+        return me;
     },
 
     
-    onStateChange : function(request) {
-        if (request.xhr.readyState == 4) {
-            this.clearTimeout(request);
-            this.onComplete(request);
-            this.cleanup(request);
+    setActive: function(active, newActive) {
+        var me = this;
+        
+        if (active) {
+            if (me.el.shadow && !me.maximized) {
+                me.el.enableShadow(true);
+            }
+            me.fireEvent('activate', me);
+        } else {
+            
+            
+            if ((me instanceof Ext.window.Window) && (newActive instanceof Ext.window.Window)) {
+                me.el.disableShadow();
+            }
+            me.fireEvent('deactivate', me);
         }
     },
 
     
-    clearTimeout: function(request){
-        clearTimeout(request.timeout);
-        delete request.timeout;
+    toBack: function() {
+        this.zIndexManager.sendToBack(this);
+        return this;
     },
 
     
-    cleanup: function(request){
-        request.xhr = null;
-        delete request.xhr;
+    center: function() {
+        var me = this,
+            xy = me.el.getAlignToXY(me.container, 'c-c');
+        me.setPagePosition(xy);
+        return me;
     },
 
     
-    onComplete : function(request) {
-        var me = this,
-            options = request.options,
-            result,
-            success,
-            response;
-            
-        try {
-            result = me.parseStatus(request.xhr.status);
-        } catch (e) {
-            
-            result = {
-                success : false, 
-                isException : false 
-            };
+    syncShadow : function(){
+        if (this.floating) {
+            this.el.sync(true);
         }
-        success = result.success;
-
-        if (success) {
-            response = me.createResponse(request);
-            me.fireEvent('requestcomplete', me, response, options);
-            Ext.callback(options.success, options.scope, [response, options]);
-        } else {
-            if (result.isException || request.aborted || request.timedout) {
-                response = me.createException(request);
-            } else {
-                response = me.createResponse(request);
-            }
-            me.fireEvent('requestexception', me, response, options);
-            Ext.callback(options.failure, options.scope, [response, options]);
-        }
-        Ext.callback(options.callback, options.scope, [options, success, response]);
-        delete me.requests[request.id];
-        return response;
-    },
-
-    
-    parseStatus: function(status) {
-        
-        status = status == 1223 ? 204 : status;
-
-        var success = (status >= 200 && status < 300) || status == 304,
-            isException = false;
-
-        if (!success) {
-            switch (status) {
-                case 12002:
-                case 12029:
-                case 12030:
-                case 12031:
-                case 12152:
-                case 13030:
-                    isException = true;
-                    break;
-            }
-        }
-        return {
-            success: success,
-            isException: isException
-        };
-    },
+    },
 
     
-    createResponse : function(request) {
-        var xhr = request.xhr,
-            headers = {},
-            lines = xhr.getAllResponseHeaders().replace(/\r\n/g, '\n').split('\n'),
-            count = lines.length,
-            line, index, key, value, response;
-
-        while (count--) {
-            line = lines[count];
-            index = line.indexOf(':');
-            if(index >= 0) {
-                key = line.substr(0, index).toLowerCase();
-                if (line.charAt(index + 1) == ' ') {
-                    ++index;
-                }
-                headers[key] = line.substr(index + 1);
-            }
-        }
-
-        request.xhr = null;
-        delete request.xhr;
-
-        response = {
-            request: request,
-            requestId : request.id,
-            status : xhr.status,
-            statusText : xhr.statusText,
-            getResponseHeader : function(header){ return headers[header.toLowerCase()]; },
-            getAllResponseHeaders : function(){ return headers; },
-            responseText : xhr.responseText,
-            responseXML : xhr.responseXML
-        };
-
-        
-        
-        xhr = null;
-        return response;
-    },
+    fitContainer: function() {
+        var parent = this.floatParent,
+            container = parent ? parent.getTargetEl() : this.container,
+            size = container.getViewSize(false);
 
-    
-    createException : function(request) {
-        return {
-            request : request,
-            requestId : request.id,
-            status : request.aborted ? -1 : 0,
-            statusText : request.aborted ? 'transaction aborted' : 'communication failure',
-            aborted: request.aborted,
-            timedout: request.timedout
-        };
+        this.setSize(size);
     }
 });
 
-
-Ext.define('Ext.Ajax', {
-    extend: 'Ext.data.Connection',
-    singleton: true,
-
-    
-    
-    
-    
-    
-    
-
-    
-
-    
-    
-    
-    
-    
-    
-
-    
-    autoAbort : false
-});
-
-Ext.define('Ext.data.Association', {
-    
-
-    
+Ext.define('Ext.layout.Layout', {
 
     
-    primaryKey: 'id',
 
     
-    
-    
 
-    defaultReaderType: 'json',
+    isLayout: true,
+    initialized: false,
 
     statics: {
-        create: function(association){
-            if (!association.isAssociation) {
-                if (Ext.isString(association)) {
-                    association = {
-                        type: association
-                    };
+        create: function(layout, defaultType) {
+            var type;
+            if (layout instanceof Ext.layout.Layout) {
+                return Ext.createByAlias('layout.' + layout);
+            } else {
+                if (!layout || typeof layout === 'string') {
+                    type = layout || defaultType;
+                    layout = {};                    
                 }
-
-                switch (association.type) {
-                    case 'belongsTo':
-                        return Ext.create('Ext.data.BelongsToAssociation', association);
-                    case 'hasMany':
-                        return Ext.create('Ext.data.HasManyAssociation', association);
-                    
-
-
-                    default:
+                else {
+                    type = layout.type || defaultType;
                 }
+                return Ext.createByAlias('layout.' + type, layout || {});
             }
-            return association;
         }
     },
 
-    
-    constructor: function(config) {
+    constructor : function(config) {
+        this.id = Ext.id(null, this.type + '-');
         Ext.apply(this, config);
+    },
 
-        var types           = Ext.ModelManager.types,
-            ownerName       = config.ownerModel,
-            associatedName  = config.associatedModel,
-            ownerModel      = types[ownerName],
-            associatedModel = types[associatedName],
-            ownerProto;
-
-
-        this.ownerModel = ownerModel;
-        this.associatedModel = associatedModel;
+    
+    layout : function() {
+        var me = this;
+        me.layoutBusy = true;
+        me.initLayout();
 
-        
+        if (me.beforeLayout.apply(me, arguments) !== false) {
+            me.layoutCancelled = false;
+            me.onLayout.apply(me, arguments);
+            me.childrenChanged = false;
+            me.owner.needsLayout = false;
+            me.layoutBusy = false;
+            me.afterLayout.apply(me, arguments);
+        }
+        else {
+            me.layoutCancelled = true;
+        }
+        me.layoutBusy = false;
+        me.doOwnerCtLayouts();
+    },
 
-        
+    beforeLayout : function() {
+        this.renderChildren();
+        return true;
+    },
 
-        Ext.applyIf(this, {
-            ownerName : ownerName,
-            associatedName: associatedName
-        });
+    renderChildren: function () {
+        this.renderItems(this.getLayoutItems(), this.getRenderTarget());
     },
 
     
-    getReader: function(){
+    renderItems : function(items, target) {
         var me = this,
-            reader = me.reader,
-            model = me.associatedModel;
+            ln = items.length,
+            i = 0,
+            item;
 
-        if (reader) {
-            if (Ext.isString(reader)) {
-                reader = {
-                    type: reader
-                };
-            }
-            if (reader.isReader) {
-                reader.setModel(model);
+        for (; i < ln; i++) {
+            item = items[i];
+            if (item && !item.rendered) {
+                me.renderItem(item, target, i);
+            } else if (!me.isValidParent(item, target, i)) {
+                me.moveItem(item, target, i);
             } else {
-                Ext.applyIf(reader, {
-                    model: model,
-                    type : me.defaultReaderType
-                });
+                
+                me.configureItem(item);
             }
-            me.reader = Ext.createByAlias('reader.' + reader.type, reader);
         }
-        return me.reader || null;
-    }
-});
-
+    },
 
-Ext.define('Ext.ModelManager', {
-    extend: 'Ext.AbstractManager',
-    alternateClassName: 'Ext.ModelMgr',
-    requires: ['Ext.data.Association'],
-    
-    singleton: true,
-    
-    typeName: 'mtype',
-    
-    
-    associationStack: [],
-    
     
-    registerType: function(name, config) {
-        var proto = config.prototype,
-            model;
-        if (proto && proto.isModel) {
-            
-            model = config;
-        } else {
-            
-            if (!config.extend) {
-                config.extend = 'Ext.data.Model';
+    isValidParent : function(item, target, position) {
+        var dom = item.el ? item.el.dom : Ext.getDom(item);
+        if (dom && target && target.dom) {
+            if (Ext.isNumber(position) && dom !== target.dom.childNodes[position]) {
+                return false;
             }
-            model = Ext.define(name, config);
+            return (dom.parentNode == (target.dom || target));
         }
-        this.types[name] = model;
-        return model;
+        return false;
     },
+
     
-    
-    onModelDefined: function(model) {
-        var stack  = this.associationStack,
-            length = stack.length,
-            create = [],
-            association, i, created;
-        
-        for (i = 0; i < length; i++) {
-            association = stack[i];
-            
-            if (association.associatedModel == model.modelName) {
-                create.push(association);
+    renderItem : function(item, target, position) {
+        var me = this;
+        if (!item.rendered) {
+            if (me.itemCls) {
+                item.addCls(me.itemCls);
+            }
+            if (me.owner.itemCls) {
+                item.addCls(me.owner.itemCls);
             }
+            item.render(target, position);
+            me.configureItem(item);
+            me.childrenChanged = true;
         }
+    },
+
+    
+    moveItem : function(item, target, position) {
         
-        for (i = 0, length = create.length; i < length; i++) {
-            created = create[i];
-            this.types[created.ownerModel].prototype.associations.add(Ext.data.Association.create(created));
-            Ext.Array.remove(stack, created);
+        target = target.dom || target;
+        if (typeof position == 'number') {
+            position = target.childNodes[position];
         }
+        target.insertBefore(item.el.dom, position || null);
+        item.container = Ext.get(target);
+        this.configureItem(item);
+        this.childrenChanged = true;
     },
+
     
-    
-    registerDeferredAssociation: function(association){
-        this.associationStack.push(association);
+    initLayout : function() {
+        var me = this,
+            targetCls = me.targetCls;
+            
+        if (!me.initialized && !Ext.isEmpty(targetCls)) {
+            me.getTarget().addCls(targetCls);
+        }
+        me.initialized = true;
     },
+
     
-    
-    getModel: function(id) {
-        var model = id;
-        if (typeof model == 'string') {
-            model = this.types[model];
-        }
-        return model;
+    setOwner : function(owner) {
+        this.owner = owner;
     },
+
     
+    getLayoutItems : function() {
+        return [];
+    },
+
     
-    create: function(config, name, id) {
-        var con = typeof name == 'function' ? name : this.types[name || config.name];
-        
-        return new con(config, id);
-    }
-}, function() {
+    configureItem: Ext.emptyFn,
     
     
-    Ext.regModel = function() {
-        return this.ModelManager.registerType.apply(this.ModelManager, arguments);
-    };
-});
+    onLayout : Ext.emptyFn,
+    afterLayout : Ext.emptyFn,
+    onRemove : Ext.emptyFn,
+    onDestroy : Ext.emptyFn,
+    doOwnerCtLayouts : Ext.emptyFn,
 
-  
-Ext.define('Ext.app.Controller', {
+    
+    afterRemove : function(item) {
+        var el = item.el,
+            owner = this.owner,
+            itemCls = this.itemCls,
+            ownerCls = owner.itemCls;
+            
+        
+        if (item.rendered && !item.isDestroyed) {
+            if (itemCls) {
+                el.removeCls(itemCls);
+            }
+            if (ownerCls) {
+                el.removeCls(ownerCls);
+            }
+        }
 
-    mixins: {
-        observable: 'Ext.util.Observable'
+        
+        
+        
+        delete item.layoutManagedWidth;
+        delete item.layoutManagedHeight;
     },
 
     
+    destroy : function() {
+        var targetCls = this.targetCls,
+            target;
+        
+        if (!Ext.isEmpty(targetCls)) {
+            target = this.getTarget();
+            if (target) {
+                target.removeCls(targetCls);
+            }
+        }
+        this.onDestroy();
+    }
+});
 
-    onClassExtended: function(cls, data) {
-        var className = Ext.getClassName(cls),
-            match = className.match(/^(.*)\.controller\./);
+Ext.define('Ext.ZIndexManager', {
 
-        if (match !== null) {
-            var namespace = Ext.Loader.getPrefix(className) || match[1],
-                onBeforeClassCreated = data.onBeforeClassCreated,
-                requires = [],
-                modules = ['model', 'view', 'store'],
-                prefix;
+    alternateClassName: 'Ext.WindowGroup',
 
-            data.onBeforeClassCreated = function(cls, data) {
-                var i, ln, module,
-                    items, j, subLn, item;
+    statics: {
+        zBase : 9000
+    },
 
-                for (i = 0,ln = modules.length; i < ln; i++) {
-                    module = modules[i];
+    constructor: function(container) {
+        var me = this;
 
-                    items = Ext.Array.from(data[module + 's']);
+        me.list = {};
+        me.zIndexStack = [];
+        me.front = null;
 
-                    for (j = 0,subLn = items.length; j < subLn; j++) {
-                        item = items[j];
+        if (container) {
 
-                        prefix = Ext.Loader.getPrefix(item);
+            
+            if (container.isContainer) {
+                container.on('resize', me._onContainerResize, me);
+                me.zseed = Ext.Number.from(container.getEl().getStyle('zIndex'), me.getNextZSeed());
+                
+                me.targetEl = container.getTargetEl();
+                me.container = container;
+            }
+            
+            else {
+                Ext.EventManager.onWindowResize(me._onContainerResize, me);
+                me.zseed = me.getNextZSeed();
+                me.targetEl = Ext.get(container);
+            }
+        }
+        
+        
+        else {
+            Ext.EventManager.onWindowResize(me._onContainerResize, me);
+            me.zseed = me.getNextZSeed();
+            Ext.onDocumentReady(function() {
+                me.targetEl = Ext.getBody();
+            });
+        }
+    },
 
-                        if (prefix === '' || prefix === item) {
-                            requires.push(namespace + '.' + module + '.' + item);
-                        }
-                        else {
-                            requires.push(item);
-                        }
-                    }
-                }
+    getNextZSeed: function() {
+        return (Ext.ZIndexManager.zBase += 10000);
+    },
 
-                Ext.require(requires, Ext.Function.pass(onBeforeClassCreated, arguments, this));
-            };
-        }
+    setBase: function(baseZIndex) {
+        this.zseed = baseZIndex;
+        return this.assignZIndices();
     },
 
     
-    constructor: function(config) {
-        this.mixins.observable.constructor.call(this, config);
-
-        Ext.apply(this, config || {});
+    assignZIndices: function() {
+        var a = this.zIndexStack,
+            len = a.length,
+            i = 0,
+            zIndex = this.zseed,
+            comp;
 
-        this.createGetters('model', this.models);
-        this.createGetters('store', this.stores);
-        this.createGetters('view', this.views);
+        for (; i < len; i++) {
+            comp = a[i];
+            if (comp && !comp.hidden) {
 
-        if (this.refs) {
-            this.ref(this.refs);
+                
+                
+                
+                
+                
+                
+                
+                zIndex = comp.setZIndex(zIndex);
+            }
         }
+        this._activateLast();
+        return zIndex;
     },
 
     
-    init: function(application) {},
-    
-    onLaunch: function(application) {},
-
-    createGetters: function(type, refs) {
-        type = Ext.String.capitalize(type);
-        Ext.Array.each(refs, function(ref) {
-            var fn = 'get',
-                parts = ref.split('.');
-
-            
-            Ext.Array.each(parts, function(part) {
-                fn += Ext.String.capitalize(part);
-            });
-            fn += type;
+    _setActiveChild: function(comp) {
+        if (comp !== this.front) {
 
-            if (!this[fn]) {
-                this[fn] = Ext.Function.pass(this['get' + type], [ref], this);
+            if (this.front) {
+                this.front.setActive(false, comp);
             }
-            
-            this[fn](ref);
-        },
-        this);
-    },
-
-    ref: function(refs) {
-        var me = this;
-        refs = Ext.Array.from(refs);
-        Ext.Array.each(refs, function(info) {
-            var ref = info.ref,
-                fn = 'get' + Ext.String.capitalize(ref);
-            if (!me[fn]) {
-                me[fn] = Ext.Function.pass(me.getRef, [ref, info], me);
+            this.front = comp;
+            if (comp) {
+                comp.setActive(true);
+                if (comp.modal) {
+                    this._showModalMask(comp);
+                }
             }
-        });
+        }
     },
 
-    getRef: function(ref, info, config) {
-        this.refCache = this.refCache || {};
-        info = info || {};
-        config = config || {};
+    
+    _activateLast: function(justHidden) {
+        var comp,
+            lastActivated = false,
+            i;
 
-        Ext.apply(info, config);
+        
+        
+        
+        for (i = this.zIndexStack.length-1; i >= 0; --i) {
+            comp = this.zIndexStack[i];
+            if (!comp.hidden) {
+                if (!lastActivated) {
+                    this._setActiveChild(comp);
+                    lastActivated = true;
+                }
 
-        if (info.forceCreate) {
-            return Ext.ComponentManager.create(info, 'component');
+                
+                if (comp.modal) {
+                    this._showModalMask(comp);
+                    return;
+                }
+            }
         }
 
-        var me = this,
-            selector = info.selector,
-            cached = me.refCache[ref];
+        
+        
+        this._hideModalMask();
+        if (!lastActivated) {
+            this._setActiveChild(null);
+        }
+    },
 
-        if (!cached) {
-            me.refCache[ref] = cached = Ext.ComponentQuery.query(info.selector)[0];
-            if (!cached && info.autoCreate) {
-                me.refCache[ref] = cached = Ext.ComponentManager.create(info, 'component');
-            }
-            if (cached) {
-                cached.on('beforedestroy', function() {
-                    me.refCache[ref] = null;
-                });
-            }
+    _showModalMask: function(comp) {
+        var zIndex = comp.el.getStyle('zIndex') - 4,
+            maskTarget = comp.floatParent ? comp.floatParent.getTargetEl() : Ext.get(comp.getEl().dom.parentNode),
+            parentBox;
+        
+        if (!maskTarget) {
+            return;
         }
+        
+        parentBox = maskTarget.getBox();
 
-        return cached;
+        if (!this.mask) {
+            this.mask = Ext.getBody().createChild({
+                cls: Ext.baseCSSPrefix + 'mask'
+            });
+            this.mask.setVisibilityMode(Ext.Element.DISPLAY);
+            this.mask.on('click', this._onMaskClick, this);
+        }
+        if (maskTarget.dom === document.body) {
+            parentBox.height = Ext.Element.getViewHeight();
+        }
+        maskTarget.addCls(Ext.baseCSSPrefix + 'body-masked');
+        this.mask.setBox(parentBox);
+        this.mask.setStyle('zIndex', zIndex);
+        this.mask.show();
     },
 
-    
-    control: function(selectors, listeners) {
-        this.application.control(selectors, listeners, this);
+    _hideModalMask: function() {
+        if (this.mask && this.mask.dom.parentNode) {
+            Ext.get(this.mask.dom.parentNode).removeCls(Ext.baseCSSPrefix + 'body-masked');
+            this.mask.hide();
+        }
     },
 
-    
-    getController: function(name) {
-        return this.application.getController(name);
+    _onMaskClick: function() {
+        if (this.front) {
+            this.front.focus();
+        }
     },
 
-    
-    getStore: function(name) {
-        return this.application.getStore(name);
+    _onContainerResize: function() {
+        if (this.mask && this.mask.isVisible()) {
+            this.mask.setSize(Ext.get(this.mask.dom.parentNode).getViewSize(true));
+        }
     },
 
     
-    getModel: function(model) {
-        return this.application.getModel(model);
+    register : function(comp) {
+        if (comp.zIndexManager) {
+            comp.zIndexManager.unregister(comp);
+        }
+        comp.zIndexManager = this;
+
+        this.list[comp.id] = comp;
+        this.zIndexStack.push(comp);
+        comp.on('hide', this._activateLast, this);
     },
 
     
-    getView: function(view) {
-        return this.application.getView(view);
-    }
-});
+    unregister : function(comp) {
+        delete comp.zIndexManager;
+        if (this.list && this.list[comp.id]) {
+            delete this.list[comp.id];
+            comp.un('hide', this._activateLast);
+            Ext.Array.remove(this.zIndexStack, comp);
 
+            
+            this._activateLast(comp);
+        }
+    },
 
-Ext.define('Ext.data.SortTypes', {
-    
-    singleton: true,
-    
     
-    none : function(s) {
-        return s;
+    get : function(id) {
+        return typeof id == "object" ? id : this.list[id];
     },
 
-    
-    stripTagsRE : /<\/?[^>]+>/gi,
+   
+    bringToFront : function(comp) {
+        comp = this.get(comp);
+        if (comp !== this.front) {
+            Ext.Array.remove(this.zIndexStack, comp);
+            this.zIndexStack.push(comp);
+            this.assignZIndices();
+            return true;
+        }
+        if (comp.modal) {
+            this._showModalMask(comp);
+        }
+        return false;
+    },
 
     
-    asText : function(s) {
-        return String(s).replace(this.stripTagsRE, "");
+    sendToBack : function(comp) {
+        comp = this.get(comp);
+        Ext.Array.remove(this.zIndexStack, comp);
+        this.zIndexStack.unshift(comp);
+        this.assignZIndices();
+        return comp;
     },
 
     
-    asUCText : function(s) {
-        return String(s).toUpperCase().replace(this.stripTagsRE, "");
+    hideAll : function() {
+        for (var id in this.list) {
+            if (this.list[id].isComponent && this.list[id].isVisible()) {
+                this.list[id].hide();
+            }
+        }
     },
 
     
-    asUCString : function(s) {
-        return String(s).toUpperCase();
+    hide: function() {
+        var i = 0,
+            ln = this.zIndexStack.length,
+            comp;
+
+        this.tempHidden = [];
+        for (; i < ln; i++) {
+            comp = this.zIndexStack[i];
+            if (comp.isVisible()) {
+                this.tempHidden.push(comp);
+                comp.hide();
+            }
+        }
     },
 
     
-    asDate : function(s) {
-        if(!s){
-            return 0;
-        }
-        if(Ext.isDate(s)){
-            return s.getTime();
+    show: function() {
+        var i = 0,
+            ln = this.tempHidden.length,
+            comp,
+            x,
+            y;
+
+        for (; i < ln; i++) {
+            comp = this.tempHidden[i];
+            x = comp.x;
+            y = comp.y;
+            comp.show();
+            comp.setPosition(x, y);
         }
-        return Date.parse(String(s));
+        delete this.tempHidden;
     },
 
     
-    asFloat : function(s) {
-        var val = parseFloat(String(s).replace(/,/g, ""));
-        return isNaN(val) ? 0 : val;
+    getActive : function() {
+        return this.front;
     },
 
     
-    asInt : function(s) {
-        var val = parseInt(String(s).replace(/,/g, ""), 10);
-        return isNaN(val) ? 0 : val;
-    }
-});
+    getBy : function(fn, scope) {
+        var r = [],
+            i = 0,
+            len = this.zIndexStack.length,
+            comp;
+
+        for (; i < len; i++) {
+            comp = this.zIndexStack[i];
+            if (fn.call(scope||comp, comp) !== false) {
+                r.push(comp);
+            }
+        }
+        return r;
+    },
 
-Ext.define('Ext.data.Errors', {
-    extend: 'Ext.util.MixedCollection',
-    
     
-    isValid: function() {
-        return this.length === 0;
+    each : function(fn, scope) {
+        var comp;
+        for (var id in this.list) {
+            comp = this.list[id];
+            if (comp.isComponent && fn.call(scope || comp, comp) === false) {
+                return;
+            }
+        }
     },
+
     
+    eachBottomUp: function (fn, scope) {
+        var comp,
+            stack = this.zIndexStack,
+            i, n;
+
+        for (i = 0, n = stack.length ; i < n; i++) {
+            comp = stack[i];
+            if (comp.isComponent && fn.call(scope || comp, comp) === false) {
+                return;
+            }
+        }
+    },
+
     
-    getByField: function(fieldName) {
-        var errors = [],
-            error, field, i;
-            
-        for (i = 0; i < this.length; i++) {
-            error = this.items[i];
-            
-            if (error.field == fieldName) {
-                errors.push(error);
+    eachTopDown: function (fn, scope) {
+        var comp,
+            stack = this.zIndexStack,
+            i;
+
+        for (i = stack.length ; i-- > 0; ) {
+            comp = stack[i];
+            if (comp.isComponent && fn.call(scope || comp, comp) === false) {
+                return;
             }
         }
-        
-        return errors;
+    },
+
+    destroy: function() {
+        this.each(function(c) {
+            c.destroy();
+        });
+        delete this.zIndexStack;
+        delete this.list;
+        delete this.container;
+        delete this.targetEl;
     }
+}, function() {
+    
+    Ext.WindowManager = Ext.WindowMgr = new this();
 });
 
 
-Ext.define('Ext.data.Operation', {
-    
-    synchronous: true,
-    
-    
-    action: undefined,
-    
-    
-    filters: undefined,
-    
-    
-    sorters: undefined,
-    
-    
-    group: undefined,
-    
-    
-    start: undefined,
-    
-    
-    limit: undefined,
-    
-    
-    batch: undefined,
-        
-    
-    started: false,
-    
-    
-    running: false,
-    
-    
-    complete: false,
-    
-    
-    success: undefined,
-    
-    
-    exception: false,
-    
+Ext.define('Ext.layout.container.boxOverflow.None', {
     
-    error: undefined,
-
+    alternateClassName: 'Ext.layout.boxOverflow.None',
     
-    constructor: function(config) {
+    constructor: function(layout, config) {
+        this.layout = layout;
         Ext.apply(this, config || {});
     },
+
+    handleOverflow: Ext.emptyFn,
+
+    clearOverflow: Ext.emptyFn,
     
+    onRemove: Ext.emptyFn,
+
     
-    setStarted: function() {
-        this.started = true;
-        this.running = true;
-    },
-    
-    
-    setCompleted: function() {
-        this.complete = true;
-        this.running  = false;
+    getItem: function(item) {
+        return this.layout.owner.getComponent(item);
     },
     
+    onRemove: Ext.emptyFn
+});
+
+Ext.define('Ext.util.KeyMap', {
+    alternateClassName: 'Ext.KeyMap',
+
     
-    setSuccessful: function() {
-        this.success = true;
+    constructor: function(el, binding, eventName){
+        var me = this;
+
+        Ext.apply(me, {
+            el: Ext.get(el),
+            eventName: eventName || me.eventName,
+            bindings: []
+        });
+        if (binding) {
+            me.addBinding(binding);
+        }
+        me.enable();
     },
+
+    eventName: 'keydown',
+
     
-    
-    setException: function(error) {
-        this.exception = true;
-        this.success = false;
-        this.running = false;
-        this.error = error;
+    addBinding : function(binding){
+        if (Ext.isArray(binding)) {
+            Ext.each(binding, this.addBinding, this);
+            return;
+        }
+
+        var keyCode = binding.key,
+            processed = false,
+            key,
+            keys,
+            keyString,
+            i,
+            len;
+
+        if (Ext.isString(keyCode)) {
+            keys = [];
+            keyString = keyCode.toUpperCase();
+
+            for (i = 0, len = keyString.length; i < len; ++i){
+                keys.push(keyString.charCodeAt(i));
+            }
+            keyCode = keys;
+            processed = true;
+        }
+
+        if (!Ext.isArray(keyCode)) {
+            keyCode = [keyCode];
+        }
+
+        if (!processed) {
+            for (i = 0, len = keyCode.length; i < len; ++i) {
+                key = keyCode[i];
+                if (Ext.isString(key)) {
+                    keyCode[i] = key.toUpperCase().charCodeAt(0);
+                }
+            }
+        }
+
+        this.bindings.push(Ext.apply({
+            keyCode: keyCode
+        }, binding));
     },
+
     
-    
-    hasException: function() {
-        return this.exception === true;
+    handleKeyDown: function(event) {
+        if (this.enabled) { 
+            var bindings = this.bindings,
+                i = 0,
+                len = bindings.length;
+
+            event = this.processEvent(event);
+            for(; i < len; ++i){
+                this.processBinding(bindings[i], event);
+            }
+        }
     },
+
     
-    
-    getError: function() {
-        return this.error;
+    processEvent: function(event){
+        return event;
     },
+
     
-    
-    getRecords: function() {
-        var resultSet = this.getResultSet();
-        
-        return (resultSet === undefined ? this.records : resultSet.records);
+    processBinding: function(binding, event){
+        if (this.checkModifiers(binding, event)) {
+            var key = event.getKey(),
+                handler = binding.fn || binding.handler,
+                scope = binding.scope || this,
+                keyCode = binding.keyCode,
+                defaultEventAction = binding.defaultEventAction,
+                i,
+                len,
+                keydownEvent = new Ext.EventObjectImpl(event);
+
+
+            for (i = 0, len = keyCode.length; i < len; ++i) {
+                if (key === keyCode[i]) {
+                    if (handler.call(scope, key, event) !== true && defaultEventAction) {
+                        keydownEvent[defaultEventAction]();
+                    }
+                    break;
+                }
+            }
+        }
     },
+
     
-    
-    getResultSet: function() {
-        return this.resultSet;
+    checkModifiers: function(binding, e){
+        var keys = ['shift', 'ctrl', 'alt'],
+            i = 0,
+            len = keys.length,
+            val, key;
+
+        for (; i < len; ++i){
+            key = keys[i];
+            val = binding[key];
+            if (!(val === undefined || (val === e[key + 'Key']))) {
+                return false;
+            }
+        }
+        return true;
     },
+
     
-    
-    isStarted: function() {
-        return this.started === true;
+    on: function(key, fn, scope) {
+        var keyCode, shift, ctrl, alt;
+        if (Ext.isObject(key) && !Ext.isArray(key)) {
+            keyCode = key.key;
+            shift = key.shift;
+            ctrl = key.ctrl;
+            alt = key.alt;
+        } else {
+            keyCode = key;
+        }
+        this.addBinding({
+            key: keyCode,
+            shift: shift,
+            ctrl: ctrl,
+            alt: alt,
+            fn: fn,
+            scope: scope
+        });
     },
+
     
-    
-    isRunning: function() {
-        return this.running === true;
+    isEnabled : function(){
+        return this.enabled;
     },
+
     
-    
-    isComplete: function() {
-        return this.complete === true;
+    enable: function(){
+        var me = this;
+        
+        if (!me.enabled) {
+            me.el.on(me.eventName, me.handleKeyDown, me);
+            me.enabled = true;
+        }
     },
+
     
-    
-    wasSuccessful: function() {
-        return this.isComplete() && this.success === true;
+    disable: function(){
+        var me = this;
+        
+        if (me.enabled) {
+            me.el.removeListener(me.eventName, me.handleKeyDown, me);
+            me.enabled = false;
+        }
     },
+
     
-    
-    setBatch: function(batch) {
-        this.batch = batch;
+    setDisabled : function(disabled){
+        if (disabled) {
+            this.disable();
+        } else {
+            this.enable();
+        }
     },
-    
-    
-    allowWrite: function() {
-        return this.action != 'read';
-    }
-});
 
-Ext.define('Ext.data.validations', {
-    singleton: true,
     
-    
-    presenceMessage: 'must be present',
-    
-    
-    lengthMessage: 'is the wrong length',
-    
-    
-    formatMessage: 'is the wrong format',
-    
-    
-    inclusionMessage: 'is not included in the list of acceptable values',
-    
-    
-    exclusionMessage: 'is not an acceptable value',
-    
-    
-    presence: function(config, value) {
-        if (value === undefined) {
-            value = config;
-        }
-        
-        return !!value;
-    },
-    
-    
-    length: function(config, value) {
-        if (value === undefined) {
-            return false;
-        }
-        
-        var length = value.length,
-            min    = config.min,
-            max    = config.max;
-        
-        if ((min && length < min) || (max && length > max)) {
-            return false;
-        } else {
-            return true;
+    destroy: function(removeEl){
+        var me = this;
+
+        me.bindings = [];
+        me.disable();
+        if (removeEl === true) {
+            me.el.remove();
         }
-    },
-    
-    
-    format: function(config, value) {
-        return !!(config.matcher && config.matcher.test(value));
-    },
-    
-    
-    inclusion: function(config, value) {
-        return config.list && Ext.Array.indexOf(config.list,value) != -1;
-    },
-    
-    
-    exclusion: function(config, value) {
-        return config.list && Ext.Array.indexOf(config.list,value) == -1;
+        delete me.el;
     }
 });
 
-Ext.define('Ext.data.ResultSet', {
-    
-    loaded: true,
-    
-    
-    count: 0,
-    
-    
-    total: 0,
-    
-    
-    success: false,
-    
-    
+Ext.define('Ext.util.ClickRepeater', {
+    extend: 'Ext.util.Observable',
 
     
-    constructor: function(config) {
+    constructor : function(el, config){
+        this.el = Ext.get(el);
+        this.el.unselectable();
+
         Ext.apply(this, config);
+
+        this.addEvents(
         
+        "mousedown",
         
-        this.totalRecords = this.total;
+        "click",
         
-        if (config.count === undefined) {
-            this.count = this.records.length;
+        "mouseup"
+        );
+
+        if(!this.disabled){
+            this.disabled = true;
+            this.enable();
         }
-    }
-});
 
-Ext.define('Ext.data.writer.Writer', {
-    alias: 'writer.base',
-    alternateClassName: ['Ext.data.DataWriter', 'Ext.data.Writer'],
+        
+        if(this.handler){
+            this.on("click", this.handler,  this.scope || this);
+        }
+
+        this.callParent();
+    },
+
     
+
     
-    writeAllFields: true,
+
     
+
     
-    nameProperty: 'name',
+    interval : 20,
 
     
-    constructor: function(config) {
-        Ext.apply(this, config);
-    },
+    delay: 250,
 
     
-    write: function(request) {
-        var operation = request.operation,
-            records   = operation.records || [],
-            len       = records.length,
-            i         = 0,
-            data      = [];
+    preventDefault : true,
+    
+    stopDefault : false,
 
-        for (; i < len; i++) {
-            data.push(this.getRecordData(records[i]));
-        }
-        return this.writeRecords(request, data);
-    },
+    timer : 0,
 
     
-    getRecordData: function(record) {
-        var isPhantom = record.phantom === true,
-            writeAll = this.writeAllFields || isPhantom,
-            nameProperty = this.nameProperty,
-            fields = record.fields,
-            data = {},
-            changes,
-            name,
-            field,
-            key;
-        
-        if (writeAll) {
-            fields.each(function(field){
-                if (field.persist) {
-                    name = field[nameProperty] || field.name;
-                    data[name] = record.get(field.name);
-                }
-            });
-        } else {
-            
-            changes = record.getChanges();
-            for (key in changes) {
-                if (changes.hasOwnProperty(key)) {
-                    field = fields.get(key);
-                    name = field[nameProperty] || field.name;
-                    data[name] = changes[key];
-                }
+    enable: function(){
+        if(this.disabled){
+            this.el.on('mousedown', this.handleMouseDown, this);
+            if (Ext.isIE){
+                this.el.on('dblclick', this.handleDblClick, this);
             }
-            if (!isPhantom) {
-                
-                data[record.idProperty] = record.getId();
+            if(this.preventDefault || this.stopDefault){
+                this.el.on('click', this.eventOptions, this);
             }
         }
-        return data;
-    }
-});
-
-
-Ext.define('Ext.util.Floating', {
-
-    uses: ['Ext.Layer', 'Ext.window.Window'],
+        this.disabled = false;
+    },
 
     
-    focusOnToFront: true,
+    disable: function( force){
+        if(force || !this.disabled){
+            clearTimeout(this.timer);
+            if(this.pressedCls){
+                this.el.removeCls(this.pressedCls);
+            }
+            Ext.getDoc().un('mouseup', this.handleMouseUp, this);
+            this.el.removeAllListeners();
+        }
+        this.disabled = true;
+    },
 
     
-    shadow: 'sides',
-
-    constructor: function(config) {
-        this.floating = true;
-        this.el = Ext.create('Ext.Layer', Ext.apply({}, config, {
-            hideMode: this.hideMode,
-            hidden: this.hidden,
-            shadow: Ext.isDefined(this.shadow) ? this.shadow : 'sides',
-            shadowOffset: this.shadowOffset,
-            constrain: false,
-            shim: this.shim === false ? false : undefined
-        }), this.el);
+    setDisabled: function(disabled){
+        this[disabled ? 'disable' : 'enable']();
     },
 
-    onFloatRender: function() {
-        var me = this;
-        me.zIndexParent = me.getZIndexParent();
-        me.setFloatParent(me.ownerCt);
-        delete me.ownerCt;
-
-        if (me.zIndexParent) {
-            me.zIndexParent.registerFloatingItem(me);
-        } else {
-            Ext.WindowManager.register(me);
+    eventOptions: function(e){
+        if(this.preventDefault){
+            e.preventDefault();
+        }
+        if(this.stopDefault){
+            e.stopEvent();
         }
     },
 
-    setFloatParent: function(floatParent) {
-        var me = this;
+    
+    destroy : function() {
+        this.disable(true);
+        Ext.destroy(this.el);
+        this.clearListeners();
+    },
 
-        
-        if (me.floatParent) {
-            me.mun(me.floatParent, {
-                hide: me.onFloatParentHide,
-                show: me.onFloatParentShow,
-                scope: me
-            });
+    handleDblClick : function(e){
+        clearTimeout(this.timer);
+        this.el.blur();
+
+        this.fireEvent("mousedown", this, e);
+        this.fireEvent("click", this, e);
+    },
+
+    
+    handleMouseDown : function(e){
+        clearTimeout(this.timer);
+        this.el.blur();
+        if(this.pressedCls){
+            this.el.addCls(this.pressedCls);
         }
+        this.mousedownTime = new Date();
 
-        me.floatParent = floatParent;
+        Ext.getDoc().on("mouseup", this.handleMouseUp, this);
+        this.el.on("mouseout", this.handleMouseOut, this);
+
+        this.fireEvent("mousedown", this, e);
+        this.fireEvent("click", this, e);
 
         
-        if (floatParent) {
-            me.mon(me.floatParent, {
-                hide: me.onFloatParentHide,
-                show: me.onFloatParentShow,
-                scope: me
-            });
+        if (this.accelerate) {
+            this.delay = 400;
         }
 
         
         
-        if ((me.constrain || me.constrainHeader) && !me.constrainTo) {
-            me.constrainTo = floatParent ? floatParent.getTargetEl() : me.container;
-        }
+        e = new Ext.EventObjectImpl(e);
+
+        this.timer =  Ext.defer(this.click, this.delay || this.interval, this, [e]);
     },
 
-    onFloatParentHide: function() {
-        if (this.hideOnParentHide !== false) {
-            this.showOnParentShow = this.isVisible();
-            this.hide();
-        }
+    
+    click : function(e){
+        this.fireEvent("click", this, e);
+        this.timer =  Ext.defer(this.click, this.accelerate ?
+            this.easeOutExpo(Ext.Date.getElapsed(this.mousedownTime),
+                400,
+                -390,
+                12000) :
+            this.interval, this, [e]);
     },
 
-    onFloatParentShow: function() {
-        if (this.showOnParentShow) {
-            delete this.showOnParentShow;
-            this.show();
-        }
+    easeOutExpo : function (t, b, c, d) {
+        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
     },
 
     
-    getZIndexParent: function() {
-        var p = this.ownerCt,
-            c;
-
-        if (p) {
-            while (p) {
-                c = p;
-                p = p.ownerCt;
-            }
-            if (c.floating) {
-                return c;
-            }
+    handleMouseOut : function(){
+        clearTimeout(this.timer);
+        if(this.pressedCls){
+            this.el.removeCls(this.pressedCls);
         }
+        this.el.on("mouseover", this.handleMouseReturn, this);
     },
 
     
+    handleMouseReturn : function(){
+        this.el.un("mouseover", this.handleMouseReturn, this);
+        if(this.pressedCls){
+            this.el.addCls(this.pressedCls);
+        }
+        this.click();
+    },
+
     
+    handleMouseUp : function(e){
+        clearTimeout(this.timer);
+        this.el.un("mouseover", this.handleMouseReturn, this);
+        this.el.un("mouseout", this.handleMouseOut, this);
+        Ext.getDoc().un("mouseup", this.handleMouseUp, this);
+        if(this.pressedCls){
+            this.el.removeCls(this.pressedCls);
+        }
+        this.fireEvent("mouseup", this, e);
+    }
+});
+
+
+Ext.define('Ext.layout.component.Component', {
+
     
+
+    extend: 'Ext.layout.Layout',
+
     
-    
-    setZIndex: function(index) {
-        var me = this;
-        this.el.setZIndex(index);
 
-        
-        index += 10;
+    type: 'component',
 
-        
-        
-        if (me.floatingItems) {
-            index = Math.floor(me.floatingItems.setBase(index) / 100) * 100 + 10000;
-        }
-        return index;
-    },
+    monitorChildren: true,
 
-    
-    doConstrain: function(constrainTo) {
+    initLayout : function() {
         var me = this,
-            vector = me.getConstrainVector(constrainTo),
-            xy;
+            owner = me.owner,
+            ownerEl = owner.el;
 
-        if (vector) {
-            xy = me.getPosition();
-            xy[0] += vector[0];
-            xy[1] += vector[1];
-            me.setPosition(xy);
+        if (!me.initialized) {
+            if (owner.frameSize) {
+                me.frameSize = owner.frameSize;
+            }
+            else {
+                owner.frameSize = me.frameSize = {
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0
+                };
+            }
         }
+        me.callParent(arguments);
     },
 
+    beforeLayout : function(width, height, isSetSize, callingContainer) {
+        this.callParent(arguments);
 
-    
-    getConstrainVector: function(constrainTo){
         var me = this,
-            el;
+            owner = me.owner,
+            ownerCt = owner.ownerCt,
+            layout = owner.layout,
+            isVisible = owner.isVisible(true),
+            ownerElChild = owner.el.child,
+            layoutCollection;
 
-        if (me.constrain || me.constrainHeader) {
-            el = me.constrainHeader ? me.header.el : me.el;
-            constrainTo = constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container;
-            return el.getConstrainVector(constrainTo);
-        }
-    },
+        
+        me.previousComponentSize = me.lastComponentSize;
 
-    
-    alignTo: function(element, position, offsets) {
-        if (element.isComponent) {
-            element = element.getEl();
+        
+        if (!isSetSize
+            && ((!Ext.isNumber(width) && owner.isFixedWidth()) ||
+                (!Ext.isNumber(height) && owner.isFixedHeight()))
+            
+            && callingContainer && callingContainer !== ownerCt) {
+            
+            me.doContainerLayout();
+            return false;
         }
-        var xy = this.el.getAlignToXY(element, position, offsets);
-        this.setPagePosition(xy);
-        return this;
-    },
-
-    
-    toFront: function(preventFocus) {
-        var me = this;
 
         
         
-        if (me.zIndexParent) {
-            me.zIndexParent.toFront(true);
-        }
-        if (me.zIndexManager.bringToFront(me)) {
-            if (!Ext.isDefined(preventFocus)) {
-                preventFocus = !me.focusOnToFront;
-            }
-            if (!preventFocus) {
-                
-                
-                
-                me.focus(false, true);
+        if (!isVisible && (owner.hiddenAncestor || owner.floating)) {
+            if (owner.hiddenAncestor) {
+                layoutCollection = owner.hiddenAncestor.layoutOnShow;
+                layoutCollection.remove(owner);
+                layoutCollection.add(owner);
             }
+            owner.needsLayout = {
+                width: width,
+                height: height,
+                isSetSize: false
+            };
         }
-        return me;
-    },
 
-    
-    setActive: function(active, newActive) {
-        if (active) {
-            if ((this instanceof Ext.window.Window) && !this.maximized) {
-                this.el.enableShadow(true);
-            }
-            this.fireEvent('activate', this);
-        } else {
-            
-            
-            if ((this instanceof Ext.window.Window) && (newActive instanceof Ext.window.Window)) {
-                this.el.disableShadow();
-            }
-            this.fireEvent('deactivate', this);
+        if (isVisible && this.needsLayout(width, height)) {
+            return owner.beforeComponentLayout(width, height, isSetSize, callingContainer);
+        }
+        else {
+            return false;
         }
     },
 
     
-    toBack: function() {
-        this.zIndexManager.sendToBack(this);
-        return this;
-    },
+    needsLayout : function(width, height) {
+        var me = this,
+            widthBeingChanged,
+            heightBeingChanged;
+            me.lastComponentSize = me.lastComponentSize || {
+                width: -Infinity,
+                height: -Infinity
+            };
 
-    
-    center: function() {
-        var xy = this.el.getAlignToXY(this.container, 'c-c');
-        this.setPagePosition(xy);
-        return this;
+        
+        widthBeingChanged  = !Ext.isDefined(width)  || me.lastComponentSize.width  !== width;
+
+        
+        heightBeingChanged = !Ext.isDefined(height) || me.lastComponentSize.height !== height;
+
+
+        
+        return !me.isSizing && (me.childrenChanged || widthBeingChanged || heightBeingChanged);
     },
 
     
-    syncShadow : function(){
-        if (this.floating) {
-            this.el.sync(true);
+    setElementSize: function(el, width, height) {
+        if (width !== undefined && height !== undefined) {
+            el.setSize(width, height);
+        }
+        else if (height !== undefined) {
+            el.setHeight(height);
+        }
+        else if (width !== undefined) {
+            el.setWidth(width);
         }
     },
 
     
-    fitContainer: function() {
-        var parent = this.floatParent,
-            container = parent ? parent.getTargetEl() : this.container,
-            size = container.getViewSize(false);
-
-        this.setSize(size);
-    }
-});
-
-
-Ext.define('Ext.layout.container.AbstractContainer', {
+     getTarget : function() {
+         return this.owner.el;
+     },
 
     
-
-    extend: 'Ext.layout.Layout',
+    getRenderTarget : function() {
+        return this.owner.el;
+    },
 
     
+    setTargetSize : function(width, height) {
+        var me = this;
+        me.setElementSize(me.owner.el, width, height);
 
-    type: 'container',
-
-    
-    bindToOwnerCtComponent: false,
+        if (me.owner.frameBody) {
+            var targetInfo = me.getTargetInfo(),
+                padding = targetInfo.padding,
+                border = targetInfo.border,
+                frameSize = me.frameSize;
 
-    
-    bindToOwnerCtContainer: false,
+            me.setElementSize(me.owner.frameBody,
+                Ext.isNumber(width) ? (width - frameSize.left - frameSize.right - padding.left - padding.right - border.left - border.right) : width,
+                Ext.isNumber(height) ? (height - frameSize.top - frameSize.bottom - padding.top - padding.bottom - border.top - border.bottom) : height
+            );
+        }
 
-    
-
-    
-    setItemSize: function(item, width, height) {
-        if (Ext.isObject(width)) {
-            height = width.height;
-            width = width.width;
-        }
-        item.setCalculatedSize(width, height, this.owner);
-    },
-
-    
-    getLayoutItems: function() {
-        return this.owner && this.owner.items && this.owner.items.items || [];
-    },
+        me.autoSized = {
+            width: !Ext.isNumber(width),
+            height: !Ext.isNumber(height)
+        };
 
-    afterLayout: function() {
-        this.owner.afterLayout(this);
+        me.lastComponentSize = {
+            width: width,
+            height: height
+        };
     },
-    
-     getTarget: function() {
-         return this.owner.getTargetEl();
-     },
-    
-     getRenderTarget: function() {
-         return this.owner.getTargetEl();
-     }
-});
-
-
-Ext.define('Ext.ZIndexManager', {
 
-    alternateClassName: 'Ext.WindowGroup',
+    getTargetInfo : function() {
+        if (!this.targetInfo) {
+            var target = this.getTarget(),
+                body = this.owner.getTargetEl();
 
-    statics: {
-        zBase : 9000
+            this.targetInfo = {
+                padding: {
+                    top: target.getPadding('t'),
+                    right: target.getPadding('r'),
+                    bottom: target.getPadding('b'),
+                    left: target.getPadding('l')
+                },
+                border: {
+                    top: target.getBorderWidth('t'),
+                    right: target.getBorderWidth('r'),
+                    bottom: target.getBorderWidth('b'),
+                    left: target.getBorderWidth('l')
+                },
+                bodyMargin: {
+                    top: body.getMargin('t'),
+                    right: body.getMargin('r'),
+                    bottom: body.getMargin('b'),
+                    left: body.getMargin('l')
+                }
+            };
+        }
+        return this.targetInfo;
     },
 
-    constructor: function(container) {
-        var me = this;
-
-        me.list = {};
-        me.zIndexStack = [];
-        me.front = null;
-
-        if (container) {
+    
+    doOwnerCtLayouts: function() {
+        var owner = this.owner,
+            ownerCt = owner.ownerCt,
+            ownerCtComponentLayout, ownerCtContainerLayout,
+            curSize = this.lastComponentSize,
+            prevSize = this.previousComponentSize,
+            widthChange  = (prevSize && curSize && Ext.isNumber(curSize.width )) ? curSize.width  !== prevSize.width  : true,
+            heightChange = (prevSize && curSize && Ext.isNumber(curSize.height)) ? curSize.height !== prevSize.height : true;
 
-            
-            if (container.isContainer) {
-                container.on('resize', me._onContainerResize, me);
-                me.zseed = Ext.Number.from(container.getEl().getStyle('zIndex'), me.getNextZSeed());
-                
-                me.targetEl = container.getTargetEl();
-                me.container = container;
-            }
-            
-            else {
-                Ext.EventManager.onWindowResize(me._onContainerResize, me);
-                me.zseed = me.getNextZSeed();
-                me.targetEl = Ext.get(container);
-            }
-        }
-        
         
-        else {
-            Ext.EventManager.onWindowResize(me._onContainerResize, me);
-            me.zseed = me.getNextZSeed();
-            Ext.onDocumentReady(function() {
-                me.targetEl = Ext.getBody();
-            });
+        if (!ownerCt || (!widthChange && !heightChange)) {
+            return;
         }
-    },
-
-    getNextZSeed: function() {
-        return (Ext.ZIndexManager.zBase += 10000);
-    },
-
-    setBase: function(baseZIndex) {
-        this.zseed = baseZIndex;
-        return this.assignZIndices();
-    },
 
-    
-    assignZIndices: function() {
-        var a = this.zIndexStack,
-            len = a.length,
-            i = 0,
-            zIndex = this.zseed,
-            comp;
+        ownerCtComponentLayout = ownerCt.componentLayout;
+        ownerCtContainerLayout = ownerCt.layout;
 
-        for (; i < len; i++) {
-            comp = a[i];
-            if (comp && !comp.hidden) {
+        if (!owner.floating && ownerCtComponentLayout && ownerCtComponentLayout.monitorChildren && !ownerCtComponentLayout.layoutBusy) {
+            if (!ownerCt.suspendLayout && ownerCtContainerLayout && !ownerCtContainerLayout.layoutBusy) {
 
                 
+                if (((widthChange && !ownerCt.isFixedWidth()) || (heightChange && !ownerCt.isFixedHeight()))) {
+                    
+                    this.isSizing = true;
+                    ownerCt.doComponentLayout();
+                    this.isSizing = false;
+                }
                 
-                
-                
-                
-                
-                
-                zIndex = comp.setZIndex(zIndex);
-            }
-        }
-        this._activateLast();
-        return zIndex;
-    },
-
-    
-    _setActiveChild: function(comp) {
-        if (comp != this.front) {
-
-            if (this.front) {
-                this.front.setActive(false, comp);
-            }
-            this.front = comp;
-            if (comp) {
-                comp.setActive(true);
-                if (comp.modal) {
-                    this._showModalMask(comp.el.getStyle('zIndex') - 4);
+                else if (ownerCtContainerLayout.bindToOwnerCtContainer === true) {
+                    ownerCtContainerLayout.layout();
                 }
             }
         }
     },
 
-    
-    _activateLast: function(justHidden) {
-        var comp,
-            lastActivated = false,
-            i;
+    doContainerLayout: function() {
+        var me = this,
+            owner = me.owner,
+            ownerCt = owner.ownerCt,
+            layout = owner.layout,
+            ownerCtComponentLayout;
 
         
         
-        
-        for (i = this.zIndexStack.length-1; i >= 0; --i) {
-            comp = this.zIndexStack[i];
-            if (!comp.hidden) {
-                if (!lastActivated) {
-                    this._setActiveChild(comp);
-                    lastActivated = true;
-                }
-
-                
-                if (comp.modal) {
-                    this._showModalMask(comp.el.getStyle('zIndex') - 4);
-                    return;
-                }
-            }
+        if (!owner.suspendLayout && layout && layout.isLayout && !layout.layoutBusy && !layout.isAutoDock) {
+            layout.layout();
         }
 
         
-        
-        this._hideModalMask();
-        if (!lastActivated) {
-            this._setActiveChild(null);
+        if (ownerCt && ownerCt.componentLayout) {
+            ownerCtComponentLayout = ownerCt.componentLayout;
+            if (!owner.floating && ownerCtComponentLayout.monitorChildren && !ownerCtComponentLayout.layoutBusy) {
+                ownerCtComponentLayout.childrenChanged = true;
+            }
         }
     },
 
-    _showModalMask: function(zIndex) {
-        if (!this.mask) {
-            this.mask = this.targetEl.createChild({
-                cls: Ext.baseCSSPrefix + 'mask'
-            });
-            this.mask.setVisibilityMode(Ext.core.Element.DISPLAY);
-            this.mask.on('click', this._onMaskClick, this);
-        }
-        Ext.getBody().addCls(Ext.baseCSSPrefix + 'body-masked');
-        this.mask.setSize(this.targetEl.getViewSize(true));
-        this.mask.setStyle('zIndex', zIndex);
-        this.mask.show();
-    },
+    afterLayout : function(width, height, isSetSize, layoutOwner) {
+        this.doContainerLayout();
+        this.owner.afterComponentLayout(width, height, isSetSize, layoutOwner);
+    }
+});
 
-    _hideModalMask: function() {
-        if (this.mask) {
-            Ext.getBody().removeCls(Ext.baseCSSPrefix + 'body-masked');
-            this.mask.hide();
-        }
-    },
 
-    _onMaskClick: function() {
-        if (this.front) {
-            this.front.focus();
-        }
+Ext.define('Ext.util.TextMetrics', {
+    statics: {
+        shared: null,
+        
+        measure: function(el, text, fixedWidth){
+            var me = this,
+                shared = me.shared;
+            
+            if(!shared){
+                shared = me.shared = new me(el, fixedWidth);
+            }
+            shared.bind(el);
+            shared.setFixedWidth(fixedWidth || 'auto');
+            return shared.getSize(text);
+        },
+        
+        
+         destroy: function(){
+             var me = this;
+             Ext.destroy(me.shared);
+             me.shared = null;
+         }
     },
+    
+    
+    constructor: function(bindTo, fixedWidth){
+        var measure = this.measure = Ext.getBody().createChild({
+            cls: 'x-textmetrics'
+        });
+        this.el = Ext.get(bindTo);
+        
+        measure.position('absolute');
+        measure.setLeftTop(-1000, -1000);
+        measure.hide();
 
-    _onContainerResize: function() {
-        if (this.mask && this.mask.isVisible()) {
-            this.mask.setSize(this.targetEl.getViewSize(true));
+        if (fixedWidth) {
+           measure.setWidth(fixedWidth);
         }
     },
-
     
-    register : function(comp) {
-        if (comp.zIndexManager) {
-            comp.zIndexManager.unregister(comp);
+    
+    getSize: function(text){
+        var measure = this.measure,
+            size;
+        
+        measure.update(text);
+        size = measure.getSize();
+        measure.update('');
+        return size;
+    },
+    
+    
+    bind: function(el){
+        var me = this;
+        
+        me.el = Ext.get(el);
+        me.measure.setStyle(
+            me.el.getStyles('font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing')
+        );
+    },
+    
+    
+     setFixedWidth : function(width){
+         this.measure.setWidth(width);
+     },
+     
+     
+     getWidth : function(text){
+         this.measure.dom.style.width = 'auto';
+         return this.getSize(text).width;
+     },
+     
+     
+     getHeight : function(text){
+         return this.getSize(text).height;
+     },
+     
+     
+     destroy: function(){
+         var me = this;
+         me.measure.remove();
+         delete me.el;
+         delete me.measure;
+     }
+}, function(){
+    Ext.Element.addMethods({
+        
+        getTextWidth : function(text, min, max){
+            return Ext.Number.constrain(Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width, min || 0, max || 1000000);
         }
-        comp.zIndexManager = this;
+    });
+});
 
-        this.list[comp.id] = comp;
-        this.zIndexStack.push(comp);
-        comp.on('hide', this._activateLast, this);
-    },
+
+Ext.define('Ext.layout.container.boxOverflow.Scroller', {
 
     
-    unregister : function(comp) {
-        delete comp.zIndexManager;
-        if (this.list && this.list[comp.id]) {
-            delete this.list[comp.id];
-            comp.un('hide', this._activateLast);
-            Ext.Array.remove(this.zIndexStack, comp);
 
-            
-            this._activateLast(comp);
-        }
+    extend: 'Ext.layout.container.boxOverflow.None',
+    requires: ['Ext.util.ClickRepeater', 'Ext.Element'],
+    alternateClassName: 'Ext.layout.boxOverflow.Scroller',
+    mixins: {
+        observable: 'Ext.util.Observable'
     },
+    
+    
 
     
-    get : function(id) {
-        return typeof id == "object" ? id : this.list[id];
-    },
+    animateScroll: false,
 
-   
-    bringToFront : function(comp) {
-        comp = this.get(comp);
-        if (comp != this.front) {
-            Ext.Array.remove(this.zIndexStack, comp);
-            this.zIndexStack.push(comp);
-            this.assignZIndices();
-            return true;
-        }
-        if (comp.modal) {
-            Ext.getBody().addCls(Ext.baseCSSPrefix + 'body-masked');
-            this.mask.setSize(Ext.core.Element.getViewWidth(true), Ext.core.Element.getViewHeight(true));
-            this.mask.show();
-        }
-        return false;
-    },
+    
+    scrollIncrement: 20,
 
     
-    sendToBack : function(comp) {
-        comp = this.get(comp);
-        Ext.Array.remove(this.zIndexStack, comp);
-        this.zIndexStack.unshift(comp);
-        this.assignZIndices();
-        return comp;
-    },
+    wheelIncrement: 10,
 
     
-    hideAll : function() {
-        for (var id in this.list) {
-            if (this.list[id].isComponent && this.list[id].isVisible()) {
-                this.list[id].hide();
-            }
-        }
-    },
+    scrollRepeatInterval: 60,
 
     
-    hide: function() {
-        var i = 0,
-            ln = this.zIndexStack.length,
-            comp;
+    scrollDuration: 400,
 
-        this.tempHidden = [];
-        for (; i < ln; i++) {
-            comp = this.zIndexStack[i];
-            if (comp.isVisible()) {
-                this.tempHidden.push(comp);
-                comp.hide();
-            }
-        }
-    },
+    
 
     
-    show: function() {
-        var i = 0,
-            ln = this.tempHidden.length,
-            comp,
-            x,
-            y;
 
-        for (; i < ln; i++) {
-            comp = this.tempHidden[i];
-            x = comp.x;
-            y = comp.y;
-            comp.show();
-            comp.setPosition(x, y);
-        }
-        delete this.tempHidden;
-    },
+    
+    scrollerCls: Ext.baseCSSPrefix + 'box-scroller',
 
     
-    getActive : function() {
-        return this.front;
-    },
 
     
-    getBy : function(fn, scope) {
-        var r = [],
-            i = 0,
-            len = this.zIndexStack.length,
-            comp;
+    
+    constructor: function(layout, config) {
+        this.layout = layout;
+        Ext.apply(this, config || {});
+        
+        this.addEvents(
+            
+            'scroll'
+        );
+    },
+    
+    initCSSClasses: function() {
+        var me = this,
+        layout = me.layout;
 
-        for (; i < len; i++) {
-            comp = this.zIndexStack[i];
-            if (fn.call(scope||comp, comp) !== false) {
-                r.push(comp);
-            }
+        if (!me.CSSinitialized) {
+            me.beforeCtCls = me.beforeCtCls || Ext.baseCSSPrefix + 'box-scroller-' + layout.parallelBefore;
+            me.afterCtCls  = me.afterCtCls  || Ext.baseCSSPrefix + 'box-scroller-' + layout.parallelAfter;
+            me.beforeScrollerCls = me.beforeScrollerCls || Ext.baseCSSPrefix + layout.owner.getXType() + '-scroll-' + layout.parallelBefore;
+            me.afterScrollerCls  = me.afterScrollerCls  || Ext.baseCSSPrefix + layout.owner.getXType() + '-scroll-' + layout.parallelAfter;
+            me.CSSinitializes = true;
         }
-        return r;
     },
 
-    
-    each : function(fn, scope) {
-        var comp;
-        for (var id in this.list) {
-            comp = this.list[id];
-            if (comp.isComponent && fn.call(scope || comp, comp) === false) {
-                return;
-            }
-        }
+    handleOverflow: function(calculations, targetSize) {
+        var me = this,
+            layout = me.layout,
+            methodName = 'get' + layout.parallelPrefixCap,
+            newSize = {};
+
+        me.initCSSClasses();
+        me.callParent(arguments);
+        this.createInnerElements();
+        this.showScrollers();
+        newSize[layout.perpendicularPrefix] = targetSize[layout.perpendicularPrefix];
+        newSize[layout.parallelPrefix] = targetSize[layout.parallelPrefix] - (me.beforeCt[methodName]() + me.afterCt[methodName]());
+        return { targetSize: newSize };
     },
 
     
-    eachBottomUp: function (fn, scope) {
-        var comp,
-            stack = this.zIndexStack,
-            i, n;
+    createInnerElements: function() {
+        var me = this,
+            target = me.layout.getRenderTarget();
 
-        for (i = 0, n = stack.length ; i < n; i++) {
-            comp = stack[i];
-            if (comp.isComponent && fn.call(scope || comp, comp) === false) {
-                return;
-            }
+        
+        
+        if (!me.beforeCt) {
+            target.addCls(Ext.baseCSSPrefix + me.layout.direction + '-box-overflow-body');
+            me.beforeCt = target.insertSibling({cls: Ext.layout.container.Box.prototype.innerCls + ' ' + me.beforeCtCls}, 'before');
+            me.afterCt  = target.insertSibling({cls: Ext.layout.container.Box.prototype.innerCls + ' ' + me.afterCtCls},  'after');
+            me.createWheelListener();
         }
     },
 
     
-    eachTopDown: function (fn, scope) {
-        var comp,
-            stack = this.zIndexStack,
-            i;
+    createWheelListener: function() {
+        this.layout.innerCt.on({
+            scope     : this,
+            mousewheel: function(e) {
+                e.stopEvent();
 
-        for (i = stack.length ; i-- > 0; ) {
-            comp = stack[i];
-            if (comp.isComponent && fn.call(scope || comp, comp) === false) {
-                return;
+                this.scrollBy(e.getWheelDelta() * this.wheelIncrement * -1, false);
             }
-        }
+        });
     },
 
-    destroy: function() {
-        delete this.zIndexStack;
-        delete this.list;
-        delete this.container;
-        delete this.targetEl;
-    }
-}, function() {
     
-    Ext.WindowManager = Ext.WindowMgr = new this();
-});
-
+    clearOverflow: function() {
+        this.hideScrollers();
+    },
 
-Ext.define('Ext.layout.container.boxOverflow.None', {
-    
-    alternateClassName: 'Ext.layout.boxOverflow.None',
     
-    constructor: function(layout, config) {
-        this.layout = layout;
-        Ext.apply(this, config || {});
+    showScrollers: function() {
+        this.createScrollers();
+        this.beforeScroller.show();
+        this.afterScroller.show();
+        this.updateScrollButtons();
+        
+        this.layout.owner.addClsWithUI('scroller');
     },
 
-    handleOverflow: Ext.emptyFn,
-
-    clearOverflow: Ext.emptyFn,
     
-    onRemove: Ext.emptyFn,
+    hideScrollers: function() {
+        if (this.beforeScroller != undefined) {
+            this.beforeScroller.hide();
+            this.afterScroller.hide();
+            
+            this.layout.owner.removeClsWithUI('scroller');
+        }
+    },
 
     
-    getItem: function(item) {
-        return this.layout.owner.getComponent(item);
+    createScrollers: function() {
+        if (!this.beforeScroller && !this.afterScroller) {
+            var before = this.beforeCt.createChild({
+                cls: Ext.String.format("{0} {1} ", this.scrollerCls, this.beforeScrollerCls)
+            });
+
+            var after = this.afterCt.createChild({
+                cls: Ext.String.format("{0} {1}", this.scrollerCls, this.afterScrollerCls)
+            });
+
+            before.addClsOnOver(this.beforeScrollerCls + '-hover');
+            after.addClsOnOver(this.afterScrollerCls + '-hover');
+
+            before.setVisibilityMode(Ext.Element.DISPLAY);
+            after.setVisibilityMode(Ext.Element.DISPLAY);
+
+            this.beforeRepeater = Ext.create('Ext.util.ClickRepeater', before, {
+                interval: this.scrollRepeatInterval,
+                handler : this.scrollLeft,
+                scope   : this
+            });
+
+            this.afterRepeater = Ext.create('Ext.util.ClickRepeater', after, {
+                interval: this.scrollRepeatInterval,
+                handler : this.scrollRight,
+                scope   : this
+            });
+
+            
+            this.beforeScroller = before;
+
+            
+            this.afterScroller = after;
+        }
     },
-    
-    onRemove: Ext.emptyFn
-});
 
-Ext.define('Ext.util.KeyMap', {
-    alternateClassName: 'Ext.KeyMap',
+    
+    destroy: function() {
+        Ext.destroy(this.beforeRepeater, this.afterRepeater, this.beforeScroller, this.afterScroller, this.beforeCt, this.afterCt);
+    },
 
     
-    constructor: function(el, binding, eventName){
-        var me = this;
-        
-        Ext.apply(me, {
-            el: Ext.get(el),
-            eventName: eventName || me.eventName,
-            bindings: []
-        });
-        if (binding) {
-            me.addBinding(binding);
-        }
-        me.enable();
+    scrollBy: function(delta, animate) {
+        this.scrollTo(this.getScrollPosition() + delta, animate);
     },
+
     
-    eventName: 'keydown',
+    getScrollAnim: function() {
+        return {
+            duration: this.scrollDuration, 
+            callback: this.updateScrollButtons, 
+            scope   : this
+        };
+    },
 
     
-    addBinding : function(binding){
-        if (Ext.isArray(binding)) {
-            Ext.each(binding, this.addBinding, this);
+    updateScrollButtons: function() {
+        if (this.beforeScroller == undefined || this.afterScroller == undefined) {
             return;
         }
-        
-        var keyCode = binding.key,
-            processed = false,
-            key,
-            keys,
-            keyString,
-            i,
-            len;
 
-        if (Ext.isString(keyCode)) {
-            keys = [];
-            keyString = keyCode.toLowerCase();
-            
-            for (i = 0, len = keyString.length; i < len; ++i){
-                keys.push(keyString.charCodeAt(i));
-            }
-            keyCode = keys;
-            processed = true;
-        }
-        
-        if (!Ext.isArray(keyCode)) {
-            keyCode = [keyCode];
-        }
-        
-        if (!processed) {
-            for (i = 0, len = keyCode.length; i < len; ++i) {
-                key = keyCode[i];
-                if (Ext.isString(key)) {
-                    keyCode[i] = key.toLowerCase().charCodeAt(0);
-                }
-            }
-        }
+        var beforeMeth = this.atExtremeBefore()  ? 'addCls' : 'removeCls',
+            afterMeth  = this.atExtremeAfter() ? 'addCls' : 'removeCls',
+            beforeCls  = this.beforeScrollerCls + '-disabled',
+            afterCls   = this.afterScrollerCls  + '-disabled';
         
-        this.bindings.push(Ext.apply({
-            keyCode: keyCode
-        }, binding));
+        this.beforeScroller[beforeMeth](beforeCls);
+        this.afterScroller[afterMeth](afterCls);
+        this.scrolling = false;
     },
+
     
-    
-    handleKeyDown: function(event) {
-        if (this.enabled) { 
-            var bindings = this.bindings,
-                i = 0,
-                len = bindings.length;
-                
-            event = this.processEvent(event);
-            for(; i < len; ++i){
-                this.processBinding(bindings[i], event);
-            }
-        }
+    atExtremeBefore: function() {
+        return this.getScrollPosition() === 0;
     },
+
     
+    scrollLeft: function() {
+        this.scrollBy(-this.scrollIncrement, false);
+    },
+
     
-    processEvent: function(event){
-        return event;
+    scrollRight: function() {
+        this.scrollBy(this.scrollIncrement, false);
     },
+
     
+    getScrollPosition: function(){
+        var layout = this.layout;
+        return parseInt(layout.innerCt.dom['scroll' + layout.parallelBeforeCap], 10) || 0;
+    },
+
     
-    processBinding: function(binding, event){
-        if (this.checkModifiers(binding, event)) {
-            var key = event.getKey(),
-                handler = binding.fn || binding.handler,
-                scope = binding.scope || this,
-                keyCode = binding.keyCode,
-                defaultEventAction = binding.defaultEventAction,
-                i,
-                len,
-                keydownEvent = new Ext.EventObjectImpl(event);
-                
-            
-            for (i = 0, len = keyCode.length; i < len; ++i) {
-                if (key === keyCode[i]) {
-                    if (handler.call(scope, key, event) !== true && defaultEventAction) {
-                        keydownEvent[defaultEventAction]();
-                    }
-                    break;
-                }
-            }
-        }
+    getMaxScrollPosition: function() {
+        var layout = this.layout;
+        return layout.innerCt.dom['scroll' + layout.parallelPrefixCap] - this.layout.innerCt['get' + layout.parallelPrefixCap]();
     },
+
     
+    atExtremeAfter: function() {
+        return this.getScrollPosition() >= this.getMaxScrollPosition();
+    },
+
     
-    checkModifiers: function(binding, e){
-        var keys = ['shift', 'ctrl', 'alt'],
-            i = 0,
-            len = keys.length,
-            val, key;
-            
-        for (; i < len; ++i){
-            key = keys[i];
-            val = binding[key];
-            if (!(val === undefined || (val === e[key + 'Key']))) {
-                return false;
+    scrollTo: function(position, animate) {
+        var me = this,
+            layout = me.layout,
+            oldPosition = me.getScrollPosition(),
+            newPosition = Ext.Number.constrain(position, 0, me.getMaxScrollPosition());
+
+        if (newPosition != oldPosition && !me.scrolling) {
+            if (animate == undefined) {
+                animate = me.animateScroll;
+            }
+
+            layout.innerCt.scrollTo(layout.parallelBefore, newPosition, animate ? me.getScrollAnim() : false);
+            if (animate) {
+                me.scrolling = true;
+            } else {
+                me.scrolling = false;
+                me.updateScrollButtons();
             }
+            
+            me.fireEvent('scroll', me, newPosition, animate ? me.getScrollAnim() : false);
         }
-        return true;
     },
 
     
-    on: function(key, fn, scope) {
-        var keyCode, shift, ctrl, alt;
-        if (Ext.isObject(key) && !Ext.isArray(key)) {
-            keyCode = key.key;
-            shift = key.shift;
-            ctrl = key.ctrl;
-            alt = key.alt;
-        } else {
-            keyCode = key;
+    scrollToItem: function(item, animate) {
+        var me = this,
+            layout = me.layout,
+            visibility,
+            box,
+            newPos;
+
+        item = me.getItem(item);
+        if (item != undefined) {
+            visibility = this.getItemVisibility(item);
+            if (!visibility.fullyVisible) {
+                box  = item.getBox(true, true);
+                newPos = box[layout.parallelPosition];
+                if (visibility.hiddenEnd) {
+                    newPos -= (this.layout.innerCt['get' + layout.parallelPrefixCap]() - box[layout.parallelPrefix]);
+                }
+                this.scrollTo(newPos, animate);
+            }
         }
-        this.addBinding({
-            key: keyCode,
-            shift: shift,
-            ctrl: ctrl,
-            alt: alt,
-            fn: fn,
-            scope: scope
-        });
     },
 
     
-    isEnabled : function(){
-        return this.enabled;
-    },
+    getItemVisibility: function(item) {
+        var me          = this,
+            box         = me.getItem(item).getBox(true, true),
+            layout      = me.layout,
+            itemStart   = box[layout.parallelPosition],
+            itemEnd     = itemStart + box[layout.parallelPrefix],
+            scrollStart = me.getScrollPosition(),
+            scrollEnd   = scrollStart + layout.innerCt['get' + layout.parallelPrefixCap]();
+
+        return {
+            hiddenStart : itemStart < scrollStart,
+            hiddenEnd   : itemEnd > scrollEnd,
+            fullyVisible: itemStart > scrollStart && itemEnd < scrollEnd
+        };
+    }
+});
+
+Ext.define('Ext.util.Offset', {
 
     
-    enable: function(){
-        if(!this.enabled){
-            this.el.on(this.eventName, this.handleKeyDown, this);
-            this.enabled = true;
+
+    statics: {
+        fromObject: function(obj) {
+            return new this(obj.x, obj.y);
         }
     },
 
     
-    disable: function(){
-        if(this.enabled){
-            this.el.removeListener(this.eventName, this.handleKeyDown, this);
-            this.enabled = false;
-        }
+
+    constructor: function(x, y) {
+        this.x = (x != null && !isNaN(x)) ? x : 0;
+        this.y = (y != null && !isNaN(y)) ? y : 0;
+
+        return this;
     },
 
-    
-    setDisabled : function(disabled){
-        if (disabled) {
-            this.disable();
+    copy: function() {
+        return new Ext.util.Offset(this.x, this.y);
+    },
+
+    copyFrom: function(p) {
+        this.x = p.x;
+        this.y = p.y;
+    },
+
+    toString: function() {
+        return "Offset[" + this.x + "," + this.y + "]";
+    },
+
+    equals: function(offset) {
+
+        return (this.x == offset.x && this.y == offset.y);
+    },
+
+    round: function(to) {
+        if (!isNaN(to)) {
+            var factor = Math.pow(10, to);
+            this.x = Math.round(this.x * factor) / factor;
+            this.y = Math.round(this.y * factor) / factor;
         } else {
-            this.enable();
+            this.x = Math.round(this.x);
+            this.y = Math.round(this.y);
         }
     },
-    
-    
-    destroy: function(removeEl){
-        var me = this;
-        
-        me.bindings = [];
-        me.disable();
-        if (removeEl === true) {
-            me.el.remove();
-        }
-        delete me.el;
+
+    isZero: function() {
+        return this.x == 0 && this.y == 0;
     }
 });
 
-Ext.define('Ext.util.ClickRepeater', {
-    extend: 'Ext.util.Observable',
 
+Ext.define('Ext.util.KeyNav', {
     
-    constructor : function(el, config){
-        this.el = Ext.get(el);
-        this.el.unselectable();
-
-        Ext.apply(this, config);
+    alternateClassName: 'Ext.KeyNav',
+    
+    requires: ['Ext.util.KeyMap'],
+    
+    statics: {
+        keyOptions: {
+            left: 37,
+            right: 39,
+            up: 38,
+            down: 40,
+            space: 32,
+            pageUp: 33,
+            pageDown: 34,
+            del: 46,
+            backspace: 8,
+            home: 36,
+            end: 35,
+            enter: 13,
+            esc: 27,
+            tab: 9
+        }
+    },
 
-        this.addEvents(
-        
-        "mousedown",
+    
+    constructor: function(el, config){
+        this.setConfig(el, config || {});
+    },
+    
+    
+    setConfig: function(el, config) {
+        if (this.map) {
+            this.map.destroy();
+        }
         
-        "click",
+        var map = Ext.create('Ext.util.KeyMap', el, null, this.getKeyEvent('forceKeyDown' in config ? config.forceKeyDown : this.forceKeyDown)),
+            keys = Ext.util.KeyNav.keyOptions,
+            scope = config.scope || this,
+            key;
         
-        "mouseup"
-        );
-
-        if(!this.disabled){
-            this.disabled = true;
-            this.enable();
+        this.map = map;
+        for (key in keys) {
+            if (keys.hasOwnProperty(key)) {
+                if (config[key]) {
+                    map.addBinding({
+                        scope: scope,
+                        key: keys[key],
+                        handler: Ext.Function.bind(this.handleEvent, scope, [config[key]], true),
+                        defaultEventAction: config.defaultEventAction || this.defaultEventAction
+                    });
+                }
+            }
         }
-
         
-        if(this.handler){
-            this.on("click", this.handler,  this.scope || this);
+        map.disable();
+        if (!config.disabled) {
+            map.enable();
         }
-
-        this.callParent();
     },
-
     
-
     
-
+    handleEvent: function(map, event, handler){
+        return handler.call(this, event);
+    },
     
-
     
-    interval : 20,
-
+    disabled: false,
     
-    delay: 250,
-
     
-    preventDefault : true,
+    defaultEventAction: "stopEvent",
     
-    stopDefault : false,
-
-    timer : 0,
+    
+    forceKeyDown: false,
+    
+    
+    destroy: function(removeEl){
+        this.map.destroy(removeEl);
+        delete this.map;
+    },
 
     
-    enable: function(){
-        if(this.disabled){
-            this.el.on('mousedown', this.handleMouseDown, this);
-            if (Ext.isIE){
-                this.el.on('dblclick', this.handleDblClick, this);
-            }
-            if(this.preventDefault || this.stopDefault){
-                this.el.on('click', this.eventOptions, this);
-            }
-        }
+    enable: function() {
+        this.map.enable();
         this.disabled = false;
     },
 
     
-    disable: function( force){
-        if(force || !this.disabled){
-            clearTimeout(this.timer);
-            if(this.pressedCls){
-                this.el.removeCls(this.pressedCls);
-            }
-            Ext.getDoc().un('mouseup', this.handleMouseUp, this);
-            this.el.removeAllListeners();
-        }
+    disable: function() {
+        this.map.disable();
         this.disabled = true;
     },
-
     
-    setDisabled: function(disabled){
-        this[disabled ? 'disable' : 'enable']();
-    },
-
-    eventOptions: function(e){
-        if(this.preventDefault){
-            e.preventDefault();
-        }
-        if(this.stopDefault){
-            e.stopEvent();
-        }
-    },
-
     
-    destroy : function() {
-        this.disable(true);
-        Ext.destroy(this.el);
-        this.clearListeners();
+    setDisabled : function(disabled){
+        this.map.setDisabled(disabled);
+        this.disabled = disabled;
     },
+    
+    
+    getKeyEvent: function(forceKeyDown){
+        return (forceKeyDown || Ext.EventManager.useKeyDown) ? 'keydown' : 'keypress';
+    }
+});
 
-    handleDblClick : function(e){
-        clearTimeout(this.timer);
-        this.el.blur();
 
-        this.fireEvent("mousedown", this, e);
-        this.fireEvent("click", this, e);
-    },
 
-    
-    handleMouseDown : function(e){
-        clearTimeout(this.timer);
-        this.el.blur();
-        if(this.pressedCls){
-            this.el.addCls(this.pressedCls);
-        }
-        this.mousedownTime = new Date();
+Ext.define('Ext.fx.Queue', {
 
-        Ext.getDoc().on("mouseup", this.handleMouseUp, this);
-        this.el.on("mouseout", this.handleMouseOut, this);
+    requires: ['Ext.util.HashMap'],
 
-        this.fireEvent("mousedown", this, e);
-        this.fireEvent("click", this, e);
+    constructor: function() {
+        this.targets = Ext.create('Ext.util.HashMap');
+        this.fxQueue = {};
+    },
 
-        
-        if (this.accelerate) {
-            this.delay = 400;
+    
+    getFxDefaults: function(targetId) {
+        var target = this.targets.get(targetId);
+        if (target) {
+            return target.fxDefaults;
         }
-
-        
-        
-        e = new Ext.EventObjectImpl(e);
-
-        this.timer =  Ext.defer(this.click, this.delay || this.interval, this, [e]);
+        return {};
     },
 
     
-    click : function(e){
-        this.fireEvent("click", this, e);
-        this.timer =  Ext.defer(this.click, this.accelerate ?
-            this.easeOutExpo(Ext.Date.getElapsed(this.mousedownTime),
-                400,
-                -390,
-                12000) :
-            this.interval, this, [e]);
+    setFxDefaults: function(targetId, obj) {
+        var target = this.targets.get(targetId);
+        if (target) {
+            target.fxDefaults = Ext.apply(target.fxDefaults || {}, obj);
+        }
     },
 
-    easeOutExpo : function (t, b, c, d) {
-        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+    
+    stopAnimation: function(targetId) {
+        var me = this,
+            queue = me.getFxQueue(targetId),
+            ln = queue.length;
+        while (ln) {
+            queue[ln - 1].end();
+            ln--;
+        }
     },
 
     
-    handleMouseOut : function(){
-        clearTimeout(this.timer);
-        if(this.pressedCls){
-            this.el.removeCls(this.pressedCls);
-        }
-        this.el.on("mouseover", this.handleMouseReturn, this);
+    getActiveAnimation: function(targetId) {
+        var queue = this.getFxQueue(targetId);
+        return (queue && !!queue.length) ? queue[0] : false;
     },
 
     
-    handleMouseReturn : function(){
-        this.el.un("mouseover", this.handleMouseReturn, this);
-        if(this.pressedCls){
-            this.el.addCls(this.pressedCls);
-        }
-        this.click();
+    hasFxBlock: function(targetId) {
+        var queue = this.getFxQueue(targetId);
+        return queue && queue[0] && queue[0].block;
     },
 
     
-    handleMouseUp : function(e){
-        clearTimeout(this.timer);
-        this.el.un("mouseover", this.handleMouseReturn, this);
-        this.el.un("mouseout", this.handleMouseOut, this);
-        Ext.getDoc().un("mouseup", this.handleMouseUp, this);
-        if(this.pressedCls){
-            this.el.removeCls(this.pressedCls);
+    getFxQueue: function(targetId) {
+        if (!targetId) {
+            return false;
         }
-        this.fireEvent("mouseup", this, e);
-    }
-});
+        var me = this,
+            queue = me.fxQueue[targetId],
+            target = me.targets.get(targetId);
 
+        if (!target) {
+            return false;
+        }
 
-Ext.define('Ext.layout.component.Button', {
+        if (!queue) {
+            me.fxQueue[targetId] = [];
+            
+            if (target.type != 'element') {
+                target.target.on('destroy', function() {
+                    me.fxQueue[targetId] = [];
+                });
+            }
+        }
+        return me.fxQueue[targetId];
+    },
 
     
+    queueFx: function(anim) {
+        var me = this,
+            target = anim.target,
+            queue, ln;
 
-    alias: ['layout.button'],
+        if (!target) {
+            return;
+        }
 
-    extend: 'Ext.layout.component.Component',
+        queue = me.getFxQueue(target.getId());
+        ln = queue.length;
 
-    
+        if (ln) {
+            if (anim.concurrent) {
+                anim.paused = false;
+            }
+            else {
+                queue[ln - 1].on('afteranimate', function() {
+                    anim.paused = false;
+                });
+            }
+        }
+        else {
+            anim.paused = false;
+        }
+        anim.on('afteranimate', function() {
+            Ext.Array.remove(queue, anim);
+            if (anim.remove) {
+                if (target.type == 'element') {
+                    var el = Ext.get(target.id);
+                    if (el) {
+                        el.remove();
+                    }
+                }
+            }
+        }, this);
+        queue.push(anim);
+    }
+});
 
-    type: 'button',
+Ext.define('Ext.fx.target.Target', {
 
-    cellClsRE: /-btn-(tl|br)\b/,
-    htmlRE: /<.*>/,
+    isAnimTarget: true,
 
-    beforeLayout: function() {
-        return this.callParent(arguments) || this.lastText !== this.owner.text;
+    
+    constructor: function(target) {
+        this.target = target;
+        this.id = this.getId();
     },
-
     
-    onLayout: function(width, height) {
-        var me = this,
-            isNum = Ext.isNumber,
-            owner = me.owner,
-            ownerEl = owner.el,
-            btnEl = owner.btnEl,
-            btnInnerEl = owner.btnInnerEl,
-            btnIconEl = owner.btnIconEl,
-            sizeIconEl = (owner.icon || owner.iconCls) && (owner.iconAlign == "top" || owner.iconAlign == "bottom"),
-            minWidth = owner.minWidth,
-            maxWidth = owner.maxWidth,
-            ownerWidth, btnFrameWidth, metrics;
+    getId: function() {
+        return this.target.id;
+    }
+});
 
-        me.getTargetInfo();
-        me.callParent(arguments);
 
-        btnInnerEl.unclip();
-        me.setTargetSize(width, height);
 
-        if (!isNum(width)) {
-            
-            
-            
-            if (owner.text && Ext.isIE7 && Ext.isStrict && btnEl && btnEl.getWidth() > 20) {
-                btnFrameWidth = me.btnFrameWidth;
-                metrics = Ext.util.TextMetrics.measure(btnInnerEl, owner.text);
-                ownerEl.setWidth(metrics.width + btnFrameWidth + me.adjWidth);
-                btnEl.setWidth(metrics.width + btnFrameWidth);
-                btnInnerEl.setWidth(metrics.width + btnFrameWidth);
+Ext.define('Ext.fx.target.Sprite', {
 
-                if (sizeIconEl) {
-                    btnIconEl.setWidth(metrics.width + btnFrameWidth);
-                }
-            } else {
-                
-                ownerEl.setWidth(null);
-                btnEl.setWidth(null);
-                btnInnerEl.setWidth(null);
-                btnIconEl.setWidth(null);
-            }
+    
 
-            
-            if (minWidth || maxWidth) {
-                ownerWidth = ownerEl.getWidth();
-                if (minWidth && (ownerWidth < minWidth)) {
-                    me.setTargetSize(minWidth, height);
-                }
-                else if (maxWidth && (ownerWidth > maxWidth)) {
-                    btnInnerEl.clip();
-                    me.setTargetSize(maxWidth, height);
-                }
-            }
-        }
+    extend: 'Ext.fx.target.Target',
 
-        this.lastText = owner.text;
-    },
+    
 
-    setTargetSize: function(width, height) {
-        var me = this,
-            owner = me.owner,
-            isNum = Ext.isNumber,
-            btnInnerEl = owner.btnInnerEl,
-            btnWidth = (isNum(width) ? width - me.adjWidth : width),
-            btnHeight = (isNum(height) ? height - me.adjHeight : height),
-            btnFrameHeight = me.btnFrameHeight,
-            text = owner.getText(),
-            textHeight;
+    type: 'draw',
 
-        me.callParent(arguments);
-        me.setElementSize(owner.btnEl, btnWidth, btnHeight);
-        me.setElementSize(btnInnerEl, btnWidth, btnHeight);
-        if (isNum(btnHeight)) {
-            btnInnerEl.setStyle('line-height', btnHeight - btnFrameHeight + 'px');
+    getFromPrim: function(sprite, attr) {
+        var o;
+        if (attr == 'translate') {
+            o = {
+                x: sprite.attr.translation.x || 0,
+                y: sprite.attr.translation.y || 0
+            };
         }
-
-        
-        
-        
-        
-        
-        if (text && this.htmlRE.test(text)) {
-            btnInnerEl.setStyle('line-height', 'normal');
-            textHeight = Ext.util.TextMetrics.measure(btnInnerEl, text).height;
-            btnInnerEl.setStyle('padding-top', me.btnFrameTop + Math.max(btnInnerEl.getHeight() - btnFrameHeight - textHeight, 0) / 2 + 'px');
-            me.setElementSize(btnInnerEl, btnWidth, btnHeight);
+        else if (attr == 'rotate') {
+            o = {
+                degrees: sprite.attr.rotation.degrees || 0,
+                x: sprite.attr.rotation.x,
+                y: sprite.attr.rotation.y
+            };
         }
-    },
-
-    getTargetInfo: function() {
-        var me = this,
-            owner = me.owner,
-            ownerEl = owner.el,
-            frameSize = me.frameSize,
-            frameBody = owner.frameBody,
-            btnWrap = owner.btnWrap,
-            innerEl = owner.btnInnerEl;
-
-        if (!('adjWidth' in me)) {
-            Ext.apply(me, {
-                
-                adjWidth: frameSize.left + frameSize.right + ownerEl.getBorderWidth('lr') + ownerEl.getPadding('lr') +
-                          btnWrap.getPadding('lr') + (frameBody ? frameBody.getFrameWidth('lr') : 0),
-                adjHeight: frameSize.top + frameSize.bottom + ownerEl.getBorderWidth('tb') + ownerEl.getPadding('tb') +
-                           btnWrap.getPadding('tb') + (frameBody ? frameBody.getFrameWidth('tb') : 0),
-                btnFrameWidth: innerEl.getFrameWidth('lr'),
-                btnFrameHeight: innerEl.getFrameWidth('tb'),
-                btnFrameTop: innerEl.getFrameWidth('t')
-            });
+        else {
+            o = sprite.attr[attr];
         }
+        return o;
+    },
 
-        return me.callParent();
-    }
-});
-
-Ext.define('Ext.util.TextMetrics', {
-    statics: {
-        shared: null,
-        
-        measure: function(el, text, fixedWidth){
-            var me = this,
-                shared = me.shared;
-            
-            if(!shared){
-                shared = me.shared = new me(el, fixedWidth);
-            }
-            shared.bind(el);
-            shared.setFixedWidth(fixedWidth || 'auto');
-            return shared.getSize(text);
-        },
-        
-        
-         destroy: function(){
-             var me = this;
-             Ext.destroy(me.shared);
-             me.shared = null;
-         }
+    getAttr: function(attr, val) {
+        return [[this.target, val != undefined ? val : this.getFromPrim(this.target, attr)]];
     },
-    
-    
-    constructor: function(bindTo, fixedWidth){
-        var measure = this.measure = Ext.getBody().createChild({
-            cls: 'x-textmetrics'
-        });
-        this.el = Ext.get(bindTo);
-        
-        measure.position('absolute');
-        measure.setLeftTop(-1000, -1000);
-        measure.hide();
 
-        if (fixedWidth) {
-           measure.setWidth(fixedWidth);
+    setAttr: function(targetData) {
+        var ln = targetData.length,
+            spriteArr = [],
+            attrs, attr, attrArr, attPtr, spritePtr, idx, value, i, j, x, y, ln2;
+        for (i = 0; i < ln; i++) {
+            attrs = targetData[i].attrs;
+            for (attr in attrs) {
+                attrArr = attrs[attr];
+                ln2 = attrArr.length;
+                for (j = 0; j < ln2; j++) {
+                    spritePtr = attrArr[j][0];
+                    attPtr = attrArr[j][1];
+                    if (attr === 'translate') {
+                        value = {
+                            x: attPtr.x,
+                            y: attPtr.y
+                        };
+                    }
+                    else if (attr === 'rotate') {
+                        x = attPtr.x;
+                        if (isNaN(x)) {
+                            x = null;
+                        }
+                        y = attPtr.y;
+                        if (isNaN(y)) {
+                            y = null;
+                        }
+                        value = {
+                            degrees: attPtr.degrees,
+                            x: x,
+                            y: y
+                        };
+                    }
+                    else if (attr === 'width' || attr === 'height' || attr === 'x' || attr === 'y') {
+                        value = parseFloat(attPtr);
+                    }
+                    else {
+                        value = attPtr;
+                    }
+                    idx = Ext.Array.indexOf(spriteArr, spritePtr);
+                    if (idx == -1) {
+                        spriteArr.push([spritePtr, {}]);
+                        idx = spriteArr.length - 1;
+                    }
+                    spriteArr[idx][1][attr] = value;
+                }
+            }
         }
-    },
-    
-    
-    getSize: function(text){
-        var measure = this.measure,
-            size;
-        
-        measure.update(text);
-        size = measure.getSize();
-        measure.update('');
-        return size;
-    },
-    
-    
-    bind: function(el){
-        var me = this;
-        
-        me.el = Ext.get(el);
-        me.measure.setStyle(
-            me.el.getStyles('font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing')
-        );
-    },
-    
-    
-     setFixedWidth : function(width){
-         this.measure.setWidth(width);
-     },
-     
-     
-     getWidth : function(text){
-         this.measure.dom.style.width = 'auto';
-         return this.getSize(text).width;
-     },
-     
-     
-     getHeight : function(text){
-         return this.getSize(text).height;
-     },
-     
-     
-     destroy: function(){
-         var me = this;
-         me.measure.remove();
-         delete me.el;
-         delete me.measure;
-     }
-}, function(){
-    Ext.core.Element.addMethods({
-        
-        getTextWidth : function(text, min, max){
-            return Ext.Number.constrain(Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width, min || 0, max || 1000000);
+        ln = spriteArr.length;
+        for (i = 0; i < ln; i++) {
+            spritePtr = spriteArr[i];
+            spritePtr[0].setAttributes(spritePtr[1]);
         }
-    });
+        this.target.redraw();
+    }
 });
 
 
-Ext.define('Ext.layout.container.boxOverflow.Scroller', {
 
-    
+Ext.define('Ext.fx.target.CompositeSprite', {
 
-    extend: 'Ext.layout.container.boxOverflow.None',
-    requires: ['Ext.util.ClickRepeater', 'Ext.core.Element'],
-    alternateClassName: 'Ext.layout.boxOverflow.Scroller',
-    mixins: {
-        observable: 'Ext.util.Observable'
-    },
-    
     
 
-    
-    animateScroll: false,
+    extend: 'Ext.fx.target.Sprite',
 
     
-    scrollIncrement: 20,
 
-    
-    wheelIncrement: 10,
+    getAttr: function(attr, val) {
+        var out = [],
+            target = this.target;
+        target.each(function(sprite) {
+            out.push([sprite, val != undefined ? val : this.getFromPrim(sprite, attr)]);
+        }, this);
+        return out;
+    }
+});
 
-    
-    scrollRepeatInterval: 60,
 
-    
-    scrollDuration: 400,
+Ext.define('Ext.fx.target.Component', {
 
     
-
+   
+    extend: 'Ext.fx.target.Target',
     
-
     
-    scrollerCls: Ext.baseCSSPrefix + 'box-scroller',
 
-    
+    type: 'component',
 
     
-    
-    constructor: function(layout, config) {
-        this.layout = layout;
-        Ext.apply(this, config || {});
-        
-        this.addEvents(
-            
-            'scroll'
-        );
-    },
-    
-    initCSSClasses: function() {
-        var me = this,
-        layout = me.layout;
-
-        if (!me.CSSinitialized) {
-            me.beforeCtCls = me.beforeCtCls || Ext.baseCSSPrefix + 'box-scroller-' + layout.parallelBefore;
-            me.afterCtCls  = me.afterCtCls  || Ext.baseCSSPrefix + 'box-scroller-' + layout.parallelAfter;
-            me.beforeScrollerCls = me.beforeScrollerCls || Ext.baseCSSPrefix + layout.owner.getXType() + '-scroll-' + layout.parallelBefore;
-            me.afterScrollerCls  = me.afterScrollerCls  || Ext.baseCSSPrefix + layout.owner.getXType() + '-scroll-' + layout.parallelAfter;
-            me.CSSinitializes = true;
+    getPropMethod: {
+        top: function() {
+            return this.getPosition(true)[1];
+        },
+        left: function() {
+            return this.getPosition(true)[0];
+        },
+        x: function() {
+            return this.getPosition()[0];
+        },
+        y: function() {
+            return this.getPosition()[1];
+        },
+        height: function() {
+            return this.getHeight();
+        },
+        width: function() {
+            return this.getWidth();
+        },
+        opacity: function() {
+            return this.el.getStyle('opacity');
         }
     },
 
-    handleOverflow: function(calculations, targetSize) {
-        var me = this,
-            layout = me.layout,
-            methodName = 'get' + layout.parallelPrefixCap,
-            newSize = {};
-
-        me.initCSSClasses();
-        me.callParent(arguments);
-        this.createInnerElements();
-        this.showScrollers();
-        newSize[layout.perpendicularPrefix] = targetSize[layout.perpendicularPrefix];
-        newSize[layout.parallelPrefix] = targetSize[layout.parallelPrefix] - (me.beforeCt[methodName]() + me.afterCt[methodName]());
-        return { targetSize: newSize };
+    compMethod: {
+        top: 'setPosition',
+        left: 'setPosition',
+        x: 'setPagePosition',
+        y: 'setPagePosition',
+        height: 'setSize',
+        width: 'setSize',
+        opacity: 'setOpacity'
     },
 
     
-    createInnerElements: function() {
-        var me = this,
-            target = me.layout.getRenderTarget();
-
-        
-        
-        if (!me.beforeCt) {
-            target.addCls(Ext.baseCSSPrefix + me.layout.direction + '-box-overflow-body');
-            me.beforeCt = target.insertSibling({cls: Ext.layout.container.Box.prototype.innerCls + ' ' + me.beforeCtCls}, 'before');
-            me.afterCt  = target.insertSibling({cls: Ext.layout.container.Box.prototype.innerCls + ' ' + me.afterCtCls},  'after');
-            me.createWheelListener();
-        }
+    getAttr: function(attr, val) {
+        return [[this.target, val !== undefined ? val : this.getPropMethod[attr].call(this.target)]];
     },
 
-    
-    createWheelListener: function() {
-        this.layout.innerCt.on({
-            scope     : this,
-            mousewheel: function(e) {
-                e.stopEvent();
-
-                this.scrollBy(e.getWheelDelta() * this.wheelIncrement * -1, false);
+    setAttr: function(targetData, isFirstFrame, isLastFrame) {
+        var me = this,
+            target = me.target,
+            ln = targetData.length,
+            attrs, attr, o, i, j, meth, targets, left, top, w, h;
+        for (i = 0; i < ln; i++) {
+            attrs = targetData[i].attrs;
+            for (attr in attrs) {
+                targets = attrs[attr].length;
+                meth = {
+                    setPosition: {},
+                    setPagePosition: {},
+                    setSize: {},
+                    setOpacity: {}
+                };
+                for (j = 0; j < targets; j++) {
+                    o = attrs[attr][j];
+                    
+                    
+                    
+                    
+                    meth[me.compMethod[attr]].target = o[0];
+                    meth[me.compMethod[attr]][attr] = o[1];
+                }
+                if (meth.setPosition.target) {
+                    o = meth.setPosition;
+                    left = (o.left === undefined) ? undefined : parseInt(o.left, 10);
+                    top = (o.top === undefined) ? undefined : parseInt(o.top, 10);
+                    o.target.setPosition(left, top);
+                }
+                if (meth.setPagePosition.target) {
+                    o = meth.setPagePosition;
+                    o.target.setPagePosition(o.x, o.y);
+                }
+                if (meth.setSize.target && meth.setSize.target.el) {
+                    o = meth.setSize;
+                    
+                    w = (o.width === undefined) ? o.target.getWidth() : parseInt(o.width, 10);
+                    h = (o.height === undefined) ? o.target.getHeight() : parseInt(o.height, 10);
+
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    if (isLastFrame || me.dynamic) {
+                        o.target.componentLayout.childrenChanged = true;
+
+                        
+                        if (me.layoutAnimation) {
+                            o.target.setCalculatedSize(w, h);
+                        } else {
+                            o.target.setSize(w, h);
+                        }
+                    }
+                    else {
+                        o.target.el.setSize(w, h);
+                    }
+                }
+                if (meth.setOpacity.target) {
+                    o = meth.setOpacity;
+                    o.target.el.setStyle('opacity', o.opacity);
+                }
             }
-        });
-    },
+        }
+    }
+});
 
-    
-    clearOverflow: function() {
-        this.hideScrollers();
-    },
 
-    
-    showScrollers: function() {
-        this.createScrollers();
-        this.beforeScroller.show();
-        this.afterScroller.show();
-        this.updateScrollButtons();
-        
-        this.layout.owner.addClsWithUI('scroller');
-    },
+Ext.define('Ext.fx.CubicBezier', {
 
     
-    hideScrollers: function() {
-        if (this.beforeScroller != undefined) {
-            this.beforeScroller.hide();
-            this.afterScroller.hide();
-            
-            this.layout.owner.removeClsWithUI('scroller');
-        }
-    },
 
-    
-    createScrollers: function() {
-        if (!this.beforeScroller && !this.afterScroller) {
-            var before = this.beforeCt.createChild({
-                cls: Ext.String.format("{0} {1} ", this.scrollerCls, this.beforeScrollerCls)
-            });
+    singleton: true,
 
-            var after = this.afterCt.createChild({
-                cls: Ext.String.format("{0} {1}", this.scrollerCls, this.afterScrollerCls)
-            });
+    
 
-            before.addClsOnOver(this.beforeScrollerCls + '-hover');
-            after.addClsOnOver(this.afterScrollerCls + '-hover');
+    cubicBezierAtTime: function(t, p1x, p1y, p2x, p2y, duration) {
+        var cx = 3 * p1x,
+            bx = 3 * (p2x - p1x) - cx,
+            ax = 1 - cx - bx,
+            cy = 3 * p1y,
+            by = 3 * (p2y - p1y) - cy,
+            ay = 1 - cy - by;
+        function sampleCurveX(t) {
+            return ((ax * t + bx) * t + cx) * t;
+        }
+        function solve(x, epsilon) {
+            var t = solveCurveX(x, epsilon);
+            return ((ay * t + by) * t + cy) * t;
+        }
+        function solveCurveX(x, epsilon) {
+            var t0, t1, t2, x2, d2, i;
+            for (t2 = x, i = 0; i < 8; i++) {
+                x2 = sampleCurveX(t2) - x;
+                if (Math.abs(x2) < epsilon) {
+                    return t2;
+                }
+                d2 = (3 * ax * t2 + 2 * bx) * t2 + cx;
+                if (Math.abs(d2) < 1e-6) {
+                    break;
+                }
+                t2 = t2 - x2 / d2;
+            }
+            t0 = 0;
+            t1 = 1;
+            t2 = x;
+            if (t2 < t0) {
+                return t0;
+            }
+            if (t2 > t1) {
+                return t1;
+            }
+            while (t0 < t1) {
+                x2 = sampleCurveX(t2);
+                if (Math.abs(x2 - x) < epsilon) {
+                    return t2;
+                }
+                if (x > x2) {
+                    t0 = t2;
+                } else {
+                    t1 = t2;
+                }
+                t2 = (t1 - t0) / 2 + t0;
+            }
+            return t2;
+        }
+        return solve(t, 1 / (200 * duration));
+    },
 
-            before.setVisibilityMode(Ext.core.Element.DISPLAY);
-            after.setVisibilityMode(Ext.core.Element.DISPLAY);
+    cubicBezier: function(x1, y1, x2, y2) {
+        var fn = function(pos) {
+            return Ext.fx.CubicBezier.cubicBezierAtTime(pos, x1, y1, x2, y2, 1);
+        };
+        fn.toCSS3 = function() {
+            return 'cubic-bezier(' + [x1, y1, x2, y2].join(',') + ')';
+        };
+        fn.reverse = function() {
+            return Ext.fx.CubicBezier.cubicBezier(1 - x2, 1 - y2, 1 - x1, 1 - y1);
+        };
+        return fn;
+    }
+});
 
-            this.beforeRepeater = Ext.create('Ext.util.ClickRepeater', before, {
-                interval: this.scrollRepeatInterval,
-                handler : this.scrollLeft,
-                scope   : this
-            });
+Ext.define('Ext.draw.Color', {
 
-            this.afterRepeater = Ext.create('Ext.util.ClickRepeater', after, {
-                interval: this.scrollRepeatInterval,
-                handler : this.scrollRight,
-                scope   : this
-            });
+    
 
-            
-            this.beforeScroller = before;
+    
 
-            
-            this.afterScroller = after;
-        }
-    },
+    colorToHexRe: /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/,
+    rgbRe: /\s*rgb\s*\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*\)\s*/,
+    hexRe: /\s*#([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)\s*/,
 
     
-    destroy: function() {
-        Ext.destroy(this.beforeRepeater, this.afterRepeater, this.beforeScroller, this.afterScroller, this.beforeCt, this.afterCt);
-    },
+    lightnessFactor: 0.2,
 
     
-    scrollBy: function(delta, animate) {
-        this.scrollTo(this.getScrollPosition() + delta, animate);
+    constructor : function(red, green, blue) {
+        var me = this,
+            clamp = Ext.Number.constrain;
+        me.r = clamp(red, 0, 255);
+        me.g = clamp(green, 0, 255);
+        me.b = clamp(blue, 0, 255);
     },
 
     
-    getScrollAnim: function() {
-        return {
-            duration: this.scrollDuration, 
-            callback: this.updateScrollButtons, 
-            scope   : this
-        };
+    getRed: function() {
+        return this.r;
     },
 
     
-    updateScrollButtons: function() {
-        if (this.beforeScroller == undefined || this.afterScroller == undefined) {
-            return;
-        }
-
-        var beforeMeth = this.atExtremeBefore()  ? 'addCls' : 'removeCls',
-            afterMeth  = this.atExtremeAfter() ? 'addCls' : 'removeCls',
-            beforeCls  = this.beforeScrollerCls + '-disabled',
-            afterCls   = this.afterScrollerCls  + '-disabled';
-        
-        this.beforeScroller[beforeMeth](beforeCls);
-        this.afterScroller[afterMeth](afterCls);
-        this.scrolling = false;
+    getGreen: function() {
+        return this.g;
     },
 
     
-    atExtremeBefore: function() {
-        return this.getScrollPosition() === 0;
+    getBlue: function() {
+        return this.b;
     },
 
     
-    scrollLeft: function() {
-        this.scrollBy(-this.scrollIncrement, false);
+    getRGB: function() {
+        var me = this;
+        return [me.r, me.g, me.b];
     },
 
     
-    scrollRight: function() {
-        this.scrollBy(this.scrollIncrement, false);
-    },
+    getHSL: function() {
+        var me = this,
+            r = me.r / 255,
+            g = me.g / 255,
+            b = me.b / 255,
+            max = Math.max(r, g, b),
+            min = Math.min(r, g, b),
+            delta = max - min,
+            h,
+            s = 0,
+            l = 0.5 * (max + min);
 
-    
-    getScrollPosition: function(){
-        var layout = this.layout;
-        return parseInt(layout.innerCt.dom['scroll' + layout.parallelBeforeCap], 10) || 0;
+        
+        if (min != max) {
+            s = (l < 0.5) ? delta / (max + min) : delta / (2 - max - min);
+            if (r == max) {
+                h = 60 * (g - b) / delta;
+            } else if (g == max) {
+                h = 120 + 60 * (b - r) / delta;
+            } else {
+                h = 240 + 60 * (r - g) / delta;
+            }
+            if (h < 0) {
+                h += 360;
+            }
+            if (h >= 360) {
+                h -= 360;
+            }
+        }
+        return [h, s, l];
     },
 
     
-    getMaxScrollPosition: function() {
-        var layout = this.layout;
-        return layout.innerCt.dom['scroll' + layout.parallelPrefixCap] - this.layout.innerCt['get' + layout.parallelPrefixCap]();
+    getLighter: function(factor) {
+        var hsl = this.getHSL();
+        factor = factor || this.lightnessFactor;
+        hsl[2] = Ext.Number.constrain(hsl[2] + factor, 0, 1);
+        return this.fromHSL(hsl[0], hsl[1], hsl[2]);
     },
 
     
-    atExtremeAfter: function() {
-        return this.getScrollPosition() >= this.getMaxScrollPosition();
+    getDarker: function(factor) {
+        factor = factor || this.lightnessFactor;
+        return this.getLighter(-factor);
     },
 
     
-    scrollTo: function(position, animate) {
+    toString: function() {
         var me = this,
-            layout = me.layout,
-            oldPosition = me.getScrollPosition(),
-            newPosition = Ext.Number.constrain(position, 0, me.getMaxScrollPosition());
+            round = Math.round,
+            r = round(me.r).toString(16),
+            g = round(me.g).toString(16),
+            b = round(me.b).toString(16);
+        r = (r.length == 1) ? '0' + r : r;
+        g = (g.length == 1) ? '0' + g : g;
+        b = (b.length == 1) ? '0' + b : b;
+        return ['#', r, g, b].join('');
+    },
 
-        if (newPosition != oldPosition && !me.scrolling) {
-            if (animate == undefined) {
-                animate = me.animateScroll;
-            }
+    
+    toHex: function(color) {
+        if (Ext.isArray(color)) {
+            color = color[0];
+        }
+        if (!Ext.isString(color)) {
+            return '';
+        }
+        if (color.substr(0, 1) === '#') {
+            return color;
+        }
+        var digits = this.colorToHexRe.exec(color);
 
-            layout.innerCt.scrollTo(layout.parallelBefore, newPosition, animate ? me.getScrollAnim() : false);
-            if (animate) {
-                me.scrolling = true;
-            } else {
-                me.scrolling = false;
-                me.updateScrollButtons();
-            }
-            
-            me.fireEvent('scroll', me, newPosition, animate ? me.getScrollAnim() : false);
+        if (Ext.isArray(digits)) {
+            var red = parseInt(digits[2], 10),
+                green = parseInt(digits[3], 10),
+                blue = parseInt(digits[4], 10),
+                rgb = blue | (green << 8) | (red << 16);
+            return digits[1] + '#' + ("000000" + rgb.toString(16)).slice(-6);
+        }
+        else {
+            return '';
         }
     },
 
     
-    scrollToItem: function(item, animate) {
-        var me = this,
-            layout = me.layout,
-            visibility,
-            box,
-            newPos;
+    fromString: function(str) {
+        var values, r, g, b,
+            parse = parseInt;
 
-        item = me.getItem(item);
-        if (item != undefined) {
-            visibility = this.getItemVisibility(item);
-            if (!visibility.fullyVisible) {
-                box  = item.getBox(true, true);
-                newPos = box[layout.parallelPosition];
-                if (visibility.hiddenEnd) {
-                    newPos -= (this.layout.innerCt['get' + layout.parallelPrefixCap]() - box[layout.parallelPrefix]);
+        if ((str.length == 4 || str.length == 7) && str.substr(0, 1) === '#') {
+            values = str.match(this.hexRe);
+            if (values) {
+                r = parse(values[1], 16) >> 0;
+                g = parse(values[2], 16) >> 0;
+                b = parse(values[3], 16) >> 0;
+                if (str.length == 4) {
+                    r += (r * 16);
+                    g += (g * 16);
+                    b += (b * 16);
                 }
-                this.scrollTo(newPos, animate);
             }
         }
+        else {
+            values = str.match(this.rgbRe);
+            if (values) {
+                r = values[1];
+                g = values[2];
+                b = values[3];
+            }
+        }
+
+        return (typeof r == 'undefined') ? undefined : Ext.create('Ext.draw.Color', r, g, b);
     },
 
     
-    getItemVisibility: function(item) {
-        var me          = this,
-            box         = me.getItem(item).getBox(true, true),
-            layout      = me.layout,
-            itemStart   = box[layout.parallelPosition],
-            itemEnd     = itemStart + box[layout.parallelPrefix],
-            scrollStart = me.getScrollPosition(),
-            scrollEnd   = scrollStart + layout.innerCt['get' + layout.parallelPrefixCap]();
-
-        return {
-            hiddenStart : itemStart < scrollStart,
-            hiddenEnd   : itemEnd > scrollEnd,
-            fullyVisible: itemStart > scrollStart && itemEnd < scrollEnd
-        };
-    }
-});
-
-Ext.define('Ext.util.Offset', {
+    getGrayscale: function() {
+        
+        return this.r * 0.3 + this.g * 0.59 + this.b * 0.11;
+    },
 
     
+    fromHSL: function(h, s, l) {
+        var C, X, m, i, rgb = [],
+            abs = Math.abs,
+            floor = Math.floor;
 
-    statics: {
-        fromObject: function(obj) {
-            return new this(obj.x, obj.y);
+        if (s == 0 || h == null) {
+            
+            rgb = [l, l, l];
         }
-    },
+        else {
+            
+            
+            
+            
+            h /= 60;
+            C = s * (1 - abs(2 * l - 1));
+            X = C * (1 - abs(h - 2 * floor(h / 2) - 1));
+            m = l - C / 2;
+            switch (floor(h)) {
+                case 0:
+                    rgb = [C, X, 0];
+                    break;
+                case 1:
+                    rgb = [X, C, 0];
+                    break;
+                case 2:
+                    rgb = [0, C, X];
+                    break;
+                case 3:
+                    rgb = [0, X, C];
+                    break;
+                case 4:
+                    rgb = [X, 0, C];
+                    break;
+                case 5:
+                    rgb = [C, 0, X];
+                    break;
+            }
+            rgb = [rgb[0] + m, rgb[1] + m, rgb[2] + m];
+        }
+        return Ext.create('Ext.draw.Color', rgb[0] * 255, rgb[1] * 255, rgb[2] * 255);
+    }
+}, function() {
+    var prototype = this.prototype;
 
     
+    this.addStatics({
+        fromHSL: function() {
+            return prototype.fromHSL.apply(prototype, arguments);
+        },
+        fromString: function() {
+            return prototype.fromString.apply(prototype, arguments);
+        },
+        toHex: function() {
+            return prototype.toHex.apply(prototype, arguments);
+        }
+    });
+});
 
-    constructor: function(x, y) {
-        this.x = (x != null && !isNaN(x)) ? x : 0;
-        this.y = (y != null && !isNaN(y)) ? y : 0;
 
-        return this;
-    },
+Ext.define('Ext.dd.StatusProxy', {
+    animRepair: false,
 
-    copy: function() {
-        return new Ext.util.Offset(this.x, this.y);
-    },
+    
+    constructor: function(config){
+        Ext.apply(this, config);
+        this.id = this.id || Ext.id();
+        this.proxy = Ext.createWidget('component', {
+            floating: true,
+            stateful: false,
+            id: this.id,
+            html: '<div class="' + Ext.baseCSSPrefix + 'dd-drop-icon"></div>' +
+                  '<div class="' + Ext.baseCSSPrefix + 'dd-drag-ghost"></div>',
+            cls: Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed,
+            shadow: !config || config.shadow !== false,
+            renderTo: document.body
+        });
 
-    copyFrom: function(p) {
-        this.x = p.x;
-        this.y = p.y;
-    },
+        this.el = this.proxy.el;
+        this.el.show();
+        this.el.setVisibilityMode(Ext.Element.VISIBILITY);
+        this.el.hide();
 
-    toString: function() {
-        return "Offset[" + this.x + "," + this.y + "]";
+        this.ghost = Ext.get(this.el.dom.childNodes[1]);
+        this.dropStatus = this.dropNotAllowed;
     },
+    
+    dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
+    
+    dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
 
-    equals: function(offset) {
-
-        return (this.x == offset.x && this.y == offset.y);
+    
+    setStatus : function(cssClass){
+        cssClass = cssClass || this.dropNotAllowed;
+        if(this.dropStatus != cssClass){
+            this.el.replaceCls(this.dropStatus, cssClass);
+            this.dropStatus = cssClass;
+        }
     },
 
-    round: function(to) {
-        if (!isNaN(to)) {
-            var factor = Math.pow(10, to);
-            this.x = Math.round(this.x * factor) / factor;
-            this.y = Math.round(this.y * factor) / factor;
-        } else {
-            this.x = Math.round(this.x);
-            this.y = Math.round(this.y);
+    
+    reset : function(clearGhost){
+        this.el.dom.className = Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed;
+        this.dropStatus = this.dropNotAllowed;
+        if(clearGhost){
+            this.ghost.update("");
         }
     },
 
-    isZero: function() {
-        return this.x == 0 && this.y == 0;
-    }
-});
-
-
-Ext.define('Ext.util.KeyNav', {
-    
-    alternateClassName: 'Ext.KeyNav',
-    
-    requires: ['Ext.util.KeyMap'],
     
-    statics: {
-        keyOptions: {
-            left: 37,
-            right: 39,
-            up: 38,
-            down: 40,
-            space: 32,
-            pageUp: 33,
-            pageDown: 34,
-            del: 46,
-            backspace: 8,
-            home: 36,
-            end: 35,
-            enter: 13,
-            esc: 27,
-            tab: 9
+    update : function(html){
+        if(typeof html == "string"){
+            this.ghost.update(html);
+        }else{
+            this.ghost.update("");
+            html.style.margin = "0";
+            this.ghost.dom.appendChild(html);
+        }
+        var el = this.ghost.dom.firstChild;
+        if(el){
+            Ext.fly(el).setStyle('float', 'none');
         }
     },
 
     
-    constructor: function(el, config){
-        this.setConfig(el, config || {});
+    getEl : function(){
+        return this.el;
     },
+
     
+    getGhost : function(){
+        return this.ghost;
+    },
+
     
-    setConfig: function(el, config) {
-        if (this.map) {
-            this.map.destroy();
-        }
-        
-        var map = Ext.create('Ext.util.KeyMap', el, null, this.getKeyEvent('forceKeyDown' in config ? config.forceKeyDown : this.forceKeyDown)),
-            keys = Ext.util.KeyNav.keyOptions,
-            scope = config.scope || this,
-            key;
-        
-        this.map = map;
-        for (key in keys) {
-            if (keys.hasOwnProperty(key)) {
-                if (config[key]) {
-                    map.addBinding({
-                        scope: scope,
-                        key: keys[key],
-                        handler: Ext.Function.bind(this.handleEvent, scope, [config[key]], true),
-                        defaultEventAction: config.defaultEventAction || this.defaultEventAction
-                    });
-                }
-            }
-        }
-        
-        map.disable();
-        if (!config.disabled) {
-            map.enable();
+    hide : function(clear) {
+        this.proxy.hide();
+        if (clear) {
+            this.reset(true);
         }
     },
+
     
-    
-    handleEvent: function(map, event, handler){
-        return handler.call(this, event);
+    stop : function(){
+        if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
+            this.anim.stop();
+        }
     },
+
     
-    
-    disabled: false,
-    
-    
-    defaultEventAction: "stopEvent",
-    
-    
-    forceKeyDown: false,
-    
-    
-    destroy: function(removeEl){
-        this.map.destroy(removeEl);
-        delete this.map;
+    show : function() {
+        this.proxy.show();
+        this.proxy.toFront();
     },
 
     
-    enable: function() {
-        this.map.enable();
-        this.disabled = false;
+    sync : function(){
+        this.proxy.el.sync();
     },
 
     
-    disable: function() {
-        this.map.disable();
-        this.disabled = true;
+    repair : function(xy, callback, scope){
+        this.callback = callback;
+        this.scope = scope;
+        if (xy && this.animRepair !== false) {
+            this.el.addCls(Ext.baseCSSPrefix + 'dd-drag-repair');
+            this.el.hideUnders(true);
+            this.anim = this.el.animate({
+                duration: this.repairDuration || 500,
+                easing: 'ease-out',
+                to: {
+                    x: xy[0],
+                    y: xy[1]
+                },
+                stopAnimation: true,
+                callback: this.afterRepair,
+                scope: this
+            });
+        } else {
+            this.afterRepair();
+        }
     },
+
     
-    
-    setDisabled : function(disabled){
-        this.map.setDisabled(disabled);
-        this.disabled = disabled;
+    afterRepair : function(){
+        this.hide(true);
+        if(typeof this.callback == "function"){
+            this.callback.call(this.scope || this);
+        }
+        this.callback = null;
+        this.scope = null;
     },
-    
-    
-    getKeyEvent: function(forceKeyDown){
-        return (forceKeyDown || Ext.EventManager.useKeyDown) ? 'keydown' : 'keypress';
+
+    destroy: function(){
+        Ext.destroy(this.ghost, this.proxy, this.el);
     }
 });
 
+Ext.define('Ext.panel.Proxy', {
 
+    alternateClassName: 'Ext.dd.PanelProxy',
 
-Ext.define('Ext.fx.Queue', {
-
-    requires: ['Ext.util.HashMap'],
-
-    constructor: function() {
-        this.targets = Ext.create('Ext.util.HashMap');
-        this.fxQueue = {};
+    
+    constructor: function(panel, config){
+        
+        this.panel = panel;
+        this.id = this.panel.id +'-ddproxy';
+        Ext.apply(this, config);
     },
 
     
-    getFxDefaults: function(targetId) {
-        var target = this.targets.get(targetId);
-        if (target) {
-            return target.fxDefaults;
-        }
-        return {};
-    },
+    insertProxy: true,
 
     
-    setFxDefaults: function(targetId, obj) {
-        var target = this.targets.get(targetId);
-        if (target) {
-            target.fxDefaults = Ext.apply(target.fxDefaults || {}, obj);
-        }
-    },
+    setStatus: Ext.emptyFn,
+    reset: Ext.emptyFn,
+    update: Ext.emptyFn,
+    stop: Ext.emptyFn,
+    sync: Ext.emptyFn,
 
     
-    stopAnimation: function(targetId) {
-        var me = this,
-            queue = me.getFxQueue(targetId),
-            ln = queue.length;
-        while (ln) {
-            queue[ln - 1].end();
-            ln--;
-        }
+    getEl: function(){
+        return this.ghost.el;
     },
 
     
-    getActiveAnimation: function(targetId) {
-        var queue = this.getFxQueue(targetId);
-        return (queue && !!queue.length) ? queue[0] : false;
+    getGhost: function(){
+        return this.ghost;
     },
 
     
-    hasFxBlock: function(targetId) {
-        var queue = this.getFxQueue(targetId);
-        return queue && queue[0] && queue[0].block;
+    getProxy: function(){
+        return this.proxy;
     },
 
     
-    getFxQueue: function(targetId) {
-        if (!targetId) {
-            return false;
-        }
-        var me = this,
-            queue = me.fxQueue[targetId],
-            target = me.targets.get(targetId);
+    hide : function(){
+        if (this.ghost) {
+            if (this.proxy) {
+                this.proxy.remove();
+                delete this.proxy;
+            }
 
-        if (!target) {
-            return false;
+            
+            this.panel.unghost(null, false);
+            delete this.ghost;
         }
+    },
 
-        if (!queue) {
-            me.fxQueue[targetId] = [];
-            
-            if (target.type != 'element') {
-                target.target.on('destroy', function() {
-                    me.fxQueue[targetId] = [];
-                });
+    
+    show: function(){
+        if (!this.ghost) {
+            var panelSize = this.panel.getSize();
+            this.panel.el.setVisibilityMode(Ext.Element.DISPLAY);
+            this.ghost = this.panel.ghost();
+            if (this.insertProxy) {
+                
+                
+                this.proxy = this.panel.el.insertSibling({cls: Ext.baseCSSPrefix + 'panel-dd-spacer'});
+                this.proxy.setSize(panelSize);
             }
         }
-        return me.fxQueue[targetId];
     },
 
     
-    queueFx: function(anim) {
-        var me = this,
-            target = anim.target,
-            queue, ln;
-
-        if (!target) {
-            return;
+    repair: function(xy, callback, scope) {
+        this.hide();
+        if (typeof callback == "function") {
+            callback.call(scope || this);
         }
+    },
 
-        queue = me.getFxQueue(target.getId());
-        ln = queue.length;
-
-        if (ln) {
-            if (anim.concurrent) {
-                anim.paused = false;
-            }
-            else {
-                queue[ln - 1].on('afteranimate', function() {
-                    anim.paused = false;
-                });
-            }
-        }
-        else {
-            anim.paused = false;
+    
+    moveProxy : function(parentNode, before){
+        if (this.proxy) {
+            parentNode.insertBefore(this.proxy.dom, before);
         }
-        anim.on('afteranimate', function() {
-            Ext.Array.remove(queue, anim);
-            if (anim.remove) {
-                if (target.type == 'element') {
-                    var el = Ext.get(target.id);
-                    if (el) {
-                        el.remove();
-                    }
-                }
-            }
-        }, this);
-        queue.push(anim);
     }
 });
 
-Ext.define('Ext.fx.target.Target', {
 
-    isAnimTarget: true,
+Ext.define('Ext.layout.component.AbstractDock', {
 
     
-    constructor: function(target) {
-        this.target = target;
-        this.id = this.getId();
-    },
-    
-    getId: function() {
-        return this.target.id;
-    }
-});
-
 
-
-Ext.define('Ext.fx.target.Sprite', {
+    extend: 'Ext.layout.component.Component',
 
     
 
-    extend: 'Ext.fx.target.Target',
+    type: 'dock',
 
     
+    autoSizing: true,
 
-    type: 'draw',
-
-    getFromPrim: function(sprite, attr) {
-        var o;
-        if (attr == 'translate') {
-            o = {
-                x: sprite.attr.translation.x || 0,
-                y: sprite.attr.translation.y || 0
-            };
-        }
-        else if (attr == 'rotate') {
-            o = {
-                degrees: sprite.attr.rotation.degrees || 0,
-                x: sprite.attr.rotation.x,
-                y: sprite.attr.rotation.y
-            };
-        }
-        else {
-            o = sprite.attr[attr];
+    beforeLayout: function() {
+        var returnValue = this.callParent(arguments);
+        if (returnValue !== false && (!this.initializedBorders || this.childrenChanged) && (!this.owner.border || this.owner.manageBodyBorders)) {
+            this.handleItemBorders();
+            this.initializedBorders = true;
         }
-        return o;
+        return returnValue;
     },
+    
+    handleItemBorders: function() {
+        var owner = this.owner,
+            body = owner.body,
+            docked = this.getLayoutItems(),
+            borders = {
+                top: [],
+                right: [],
+                bottom: [],
+                left: []
+            },
+            oldBorders = this.borders,
+            opposites = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right'
+            },
+            i, ln, item, dock, side;
 
-    getAttr: function(attr, val) {
-        return [[this.target, val != undefined ? val : this.getFromPrim(this.target, attr)]];
-    },
+        for (i = 0, ln = docked.length; i < ln; i++) {
+            item = docked[i];
+            dock = item.dock;
+            
+            if (item.ignoreBorderManagement) {
+                continue;
+            }
+            
+            if (!borders[dock].satisfied) {
+                borders[dock].push(item);
+                borders[dock].satisfied = true;
+            }
+            
+            if (!borders.top.satisfied && opposites[dock] !== 'top') {
+                borders.top.push(item);
+            }
+            if (!borders.right.satisfied && opposites[dock] !== 'right') {
+                borders.right.push(item);
+            }            
+            if (!borders.bottom.satisfied && opposites[dock] !== 'bottom') {
+                borders.bottom.push(item);
+            }            
+            if (!borders.left.satisfied && opposites[dock] !== 'left') {
+                borders.left.push(item);
+            }
+        }
 
-    setAttr: function(targetData) {
-        var ln = targetData.length,
-            spriteArr = [],
-            attrs, attr, attrArr, attPtr, spritePtr, idx, value, i, j, x, y, ln2;
-        for (i = 0; i < ln; i++) {
-            attrs = targetData[i].attrs;
-            for (attr in attrs) {
-                attrArr = attrs[attr];
-                ln2 = attrArr.length;
-                for (j = 0; j < ln2; j++) {
-                    spritePtr = attrArr[j][0];
-                    attPtr = attrArr[j][1];
-                    if (attr === 'translate') {
-                        value = {
-                            x: attPtr.x,
-                            y: attPtr.y
-                        };
-                    }
-                    else if (attr === 'rotate') {
-                        x = attPtr.x;
-                        if (isNaN(x)) {
-                            x = null;
-                        }
-                        y = attPtr.y;
-                        if (isNaN(y)) {
-                            y = null;
+        if (oldBorders) {
+            for (side in oldBorders) {
+                if (oldBorders.hasOwnProperty(side)) {
+                    ln = oldBorders[side].length;
+                    if (!owner.manageBodyBorders) {
+                        for (i = 0; i < ln; i++) {
+                            oldBorders[side][i].removeCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);
                         }
-                        value = {
-                            degrees: attPtr.degrees,
-                            x: x,
-                            y: y
-                        };
-                    }
-                    else if (attr === 'width' || attr === 'height' || attr === 'x' || attr === 'y') {
-                        value = parseFloat(attPtr);
-                    }
-                    else {
-                        value = attPtr;
+                        if (!oldBorders[side].satisfied && !owner.bodyBorder) {
+                            body.removeCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);                   
+                        }                    
                     }
-                    idx = Ext.Array.indexOf(spriteArr, spritePtr);
-                    if (idx == -1) {
-                        spriteArr.push([spritePtr, {}]);
-                        idx = spriteArr.length - 1;
+                    else if (oldBorders[side].satisfied) {
+                        body.setStyle('border-' + side + '-width', '');
                     }
-                    spriteArr[idx][1][attr] = value;
                 }
             }
         }
-        ln = spriteArr.length;
-        for (i = 0; i < ln; i++) {
-            spritePtr = spriteArr[i];
-            spritePtr[0].setAttributes(spritePtr[1]);
+                
+        for (side in borders) {
+            if (borders.hasOwnProperty(side)) {
+                ln = borders[side].length;
+                if (!owner.manageBodyBorders) {
+                    for (i = 0; i < ln; i++) {
+                        borders[side][i].addCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);
+                    }
+                    if ((!borders[side].satisfied && !owner.bodyBorder) || owner.bodyBorder === false) {
+                        body.addCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);                   
+                    }                    
+                }
+                else if (borders[side].satisfied) {
+                    body.setStyle('border-' + side + '-width', '1px');
+                }
+            }
         }
-        this.target.redraw();
-    }
-});
-
-
-
-Ext.define('Ext.fx.target.CompositeSprite', {
-
+        
+        this.borders = borders;
+    },
     
-
-    extend: 'Ext.fx.target.Sprite',
-
     
+    onLayout: function(width, height) {
+        if (this.onLayout_running) {
+            return;
+        }
+        this.onLayout_running = true;
+        var me = this,
+            owner = me.owner,
+            body = owner.body,
+            layout = owner.layout,
+            target = me.getTarget(),
+            autoWidth = false,
+            autoHeight = false,
+            padding, border, frameSize;
 
-    getAttr: function(attr, val) {
-        var out = [],
-            target = this.target;
-        target.each(function(sprite) {
-            out.push([sprite, val != undefined ? val : this.getFromPrim(sprite, attr)]);
-        }, this);
-        return out;
-    }
-});
-
+        
+        var info = me.info = {
+            boxes: [],
+            size: {
+                width: width,
+                height: height
+            },
+            bodyBox: {}
+        };
+        
+        delete layout.isAutoDock;
 
-Ext.define('Ext.fx.target.Component', {
+        Ext.applyIf(info, me.getTargetInfo());
 
-    
-   
-    extend: 'Ext.fx.target.Target',
-    
-    
+        
+        if (owner && owner.ownerCt && owner.ownerCt.layout && owner.ownerCt.layout.isLayout) {
+            if (!Ext.isNumber(owner.height) || !Ext.isNumber(owner.width)) {
+                owner.ownerCt.layout.bindToOwnerCtComponent = true;
+            }
+            else {
+                owner.ownerCt.layout.bindToOwnerCtComponent = false;
+            }
+        }
 
-    type: 'component',
+        
+        if (height == null || width == null) {
+            padding = info.padding;
+            border = info.border;
+            frameSize = me.frameSize;
 
-    
-    getPropMethod: {
-        top: function() {
-            return this.getPosition(true)[1];
-        },
-        left: function() {
-            return this.getPosition(true)[0];
-        },
-        x: function() {
-            return this.getPosition()[0];
-        },
-        y: function() {
-            return this.getPosition()[1];
-        },
-        height: function() {
-            return this.getHeight();
-        },
-        width: function() {
-            return this.getWidth();
-        },
-        opacity: function() {
-            return this.el.getStyle('opacity');
-        }
-    },
+            
+            if ((height == null) && (width == null)) {
+                autoHeight = true;
+                autoWidth = true;
+                me.setTargetSize(null);
+                me.setBodyBox({width: null, height: null});
+            }
+            
+            else if (height == null) {
+                autoHeight = true;
+                
+                me.setTargetSize(width);
+                me.setBodyBox({width: width - padding.left - border.left - padding.right - border.right - frameSize.left - frameSize.right, height: null});
+            
+            }
+            else {
+                autoWidth = true;
+                
+                me.setTargetSize(null, height);
+                me.setBodyBox({width: null, height: height - padding.top - padding.bottom - border.top - border.bottom - frameSize.top - frameSize.bottom});
+            }
 
-    compMethod: {
-        top: 'setPosition',
-        left: 'setPosition',
-        x: 'setPagePosition',
-        y: 'setPagePosition',
-        height: 'setSize',
-        width: 'setSize',
-        opacity: 'setOpacity'
-    },
+            
+            if (layout && layout.isLayout) {
+                
+                layout.bindToOwnerCtComponent = true;
+                
+                layout.isAutoDock = layout.autoSize !== true;
+                layout.layout();
 
-    
-    getAttr: function(attr, val) {
-        return [[this.target, val !== undefined ? val : this.getPropMethod[attr].call(this.target)]];
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                info.autoSizedCtLayout = layout.autoSize === true;
+                info.autoHeight = autoHeight;
+                info.autoWidth = autoWidth;
+            }
+
+            
+            
+            
+            
+            
+            me.dockItems();
+            me.setTargetSize(info.size.width, info.size.height);
+        }
+        else {
+            me.setTargetSize(width, height);
+            me.dockItems();
+        }
+        me.callParent(arguments);
+        this.onLayout_running = false;
     },
 
-    setAttr: function(targetData, isFirstFrame, isLastFrame) {
-        var me = this,
-            target = me.target,
-            ln = targetData.length,
-            attrs, attr, o, i, j, meth, targets, left, top, w, h;
-        for (i = 0; i < ln; i++) {
-            attrs = targetData[i].attrs;
-            for (attr in attrs) {
-                targets = attrs[attr].length;
-                meth = {
-                    setPosition: {},
-                    setPagePosition: {},
-                    setSize: {},
-                    setOpacity: {}
-                };
-                for (j = 0; j < targets; j++) {
-                    o = attrs[attr][j];
-                    
-                    
-                    
-                    
-                    meth[me.compMethod[attr]].target = o[0];
-                    meth[me.compMethod[attr]][attr] = o[1];
-                }
-                if (meth.setPosition.target) {
-                    o = meth.setPosition;
-                    left = (o.left === undefined) ? undefined : parseInt(o.left, 10);
-                    top = (o.top === undefined) ? undefined : parseInt(o.top, 10);
-                    o.target.setPosition(left, top);
-                }
-                if (meth.setPagePosition.target) {
-                    o = meth.setPagePosition;
-                    o.target.setPagePosition(o.x, o.y);
-                }
-                if (meth.setSize.target) {
-                    o = meth.setSize;
-                    
-                    w = (o.width === undefined) ? o.target.getWidth() : parseInt(o.width, 10);
-                    h = (o.height === undefined) ? o.target.getHeight() : parseInt(o.height, 10);
+    
+    dockItems : function() {
+        this.calculateDockBoxes();
 
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    if (isLastFrame || me.dynamic) {
-                        o.target.componentLayout.childrenChanged = true;
+        
+        
+        
+        var info = this.info,
+            autoWidth = info.autoWidth,
+            autoHeight = info.autoHeight,
+            boxes = info.boxes,
+            ln = boxes.length,
+            dock, i, item;
 
-                        
-                        if (me.layoutAnimation) {
-                            o.target.setCalculatedSize(w, h);
-                        } else {
-                            o.target.setSize(w, h);
-                        }
-                    }
-                    else {
-                        o.target.el.setSize(w, h);
-                    }
-                }
-                if (meth.setOpacity.target) {
-                    o = meth.setOpacity;
-                    o.target.el.setStyle('opacity', o.opacity);
-                }
+        
+        
+        for (i = 0; i < ln; i++) {
+            dock = boxes[i];
+            item = dock.item;
+            item.setPosition(dock.x, dock.y);
+            if ((autoWidth || autoHeight) && item.layout && item.layout.isLayout) {
+                
+                item.layout.bindToOwnerCtComponent = true;
             }
         }
-    }
-});
 
+        
+        
+        if (!info.autoSizedCtLayout) {
+            if (autoWidth) {
+                info.bodyBox.width = null;
+            }
+            if (autoHeight) {
+                info.bodyBox.height = null;
+            }
+        }
 
-Ext.define('Ext.fx.CubicBezier', {
+        
+        
+        this.setBodyBox(info.bodyBox);
+    },
 
     
+    calculateDockBoxes : function() {
+        if (this.calculateDockBoxes_running) {
+            
+            return;
+        }
+        this.calculateDockBoxes_running = true;
+        
+        
+        
+        var me = this,
+            target = me.getTarget(),
+            items = me.getLayoutItems(),
+            owner = me.owner,
+            bodyEl = owner.body,
+            info = me.info,
+            autoWidth = info.autoWidth,
+            autoHeight = info.autoHeight,
+            size = info.size,
+            ln = items.length,
+            padding = info.padding,
+            border = info.border,
+            frameSize = me.frameSize,
+            item, i, box, rect;
 
-    singleton: true,
+        
+        
+        if (autoHeight) {
+            size.height = bodyEl.getHeight() + padding.top + border.top + padding.bottom + border.bottom + frameSize.top + frameSize.bottom;
+        }
+        else {
+            size.height = target.getHeight();
+        }
+        if (autoWidth) {
+            size.width = bodyEl.getWidth() + padding.left + border.left + padding.right + border.right + frameSize.left + frameSize.right;
+        }
+        else {
+            size.width = target.getWidth();
+        }
 
-    
+        info.bodyBox = {
+            x: padding.left + frameSize.left,
+            y: padding.top + frameSize.top,
+            width: size.width - padding.left - border.left - padding.right - border.right - frameSize.left - frameSize.right,
+            height: size.height - border.top - padding.top - border.bottom - padding.bottom - frameSize.top - frameSize.bottom
+        };
 
-    cubicBezierAtTime: function(t, p1x, p1y, p2x, p2y, duration) {
-        var cx = 3 * p1x,
-            bx = 3 * (p2x - p1x) - cx,
-            ax = 1 - cx - bx,
-            cy = 3 * p1y,
-            by = 3 * (p2y - p1y) - cy,
-            ay = 1 - cy - by;
-        function sampleCurveX(t) {
-            return ((ax * t + bx) * t + cx) * t;
+        
+        for (i = 0; i < ln; i++) {
+            item = items[i];
+            
+            
+            
+            box = me.initBox(item);
+
+            if (autoHeight === true) {
+                box = me.adjustAutoBox(box, i);
+            }
+            else {
+                box = me.adjustSizedBox(box, i);
+            }
+
+            
+            
+            
+            info.boxes.push(box);
         }
-        function solve(x, epsilon) {
-            var t = solveCurveX(x, epsilon);
-            return ((ay * t + by) * t + cy) * t;
+        this.calculateDockBoxes_running = false;
+    },
+
+    
+    adjustSizedBox : function(box, index) {
+        var bodyBox = this.info.bodyBox,
+            frameSize = this.frameSize,
+            info = this.info,
+            padding = info.padding,
+            pos = box.type,
+            border = info.border;
+
+        switch (pos) {
+            case 'top':
+                box.y = bodyBox.y;
+                break;
+
+            case 'left':
+                box.x = bodyBox.x;
+                break;
+
+            case 'bottom':
+                box.y = (bodyBox.y + bodyBox.height) - box.height;
+                break;
+
+            case 'right':
+                box.x = (bodyBox.x + bodyBox.width) - box.width;
+                break;
         }
-        function solveCurveX(x, epsilon) {
-            var t0, t1, t2, x2, d2, i;
-            for (t2 = x, i = 0; i < 8; i++) {
-                x2 = sampleCurveX(t2) - x;
-                if (Math.abs(x2) < epsilon) {
-                    return t2;
-                }
-                d2 = (3 * ax * t2 + 2 * bx) * t2 + cx;
-                if (Math.abs(d2) < 1e-6) {
-                    break;
-                }
-                t2 = t2 - x2 / d2;
+
+        if (box.ignoreFrame) {
+            if (pos == 'bottom') {
+                box.y += (frameSize.bottom + padding.bottom + border.bottom);
             }
-            t0 = 0;
-            t1 = 1;
-            t2 = x;
-            if (t2 < t0) {
-                return t0;
+            else {
+                box.y -= (frameSize.top + padding.top + border.top);
             }
-            if (t2 > t1) {
-                return t1;
+            if (pos == 'right') {
+                box.x += (frameSize.right + padding.right + border.right);
             }
-            while (t0 < t1) {
-                x2 = sampleCurveX(t2);
-                if (Math.abs(x2 - x) < epsilon) {
-                    return t2;
-                }
-                if (x > x2) {
-                    t0 = t2;
-                } else {
-                    t1 = t2;
-                }
-                t2 = (t1 - t0) / 2 + t0;
+            else {
+                box.x -= (frameSize.left + padding.left + border.left);
             }
-            return t2;
         }
-        return solve(t, 1 / (200 * duration));
-    },
 
-    cubicBezier: function(x1, y1, x2, y2) {
-        var fn = function(pos) {
-            return Ext.fx.CubicBezier.cubicBezierAtTime(pos, x1, y1, x2, y2, 1);
-        };
-        fn.toCSS3 = function() {
-            return 'cubic-bezier(' + [x1, y1, x2, y2].join(',') + ')';
-        };
-        fn.reverse = function() {
-            return Ext.fx.CubicBezier.cubicBezier(1 - x2, 1 - y2, 1 - x1, 1 - y1);
-        };
-        return fn;
-    }
-});
+        
+        if (!box.overlay) {
+            switch (pos) {
+                case 'top':
+                    bodyBox.y += box.height;
+                    bodyBox.height -= box.height;
+                    break;
 
-Ext.define('Ext.draw.Color', {
+                case 'left':
+                    bodyBox.x += box.width;
+                    bodyBox.width -= box.width;
+                    break;
 
-    
+                case 'bottom':
+                    bodyBox.height -= box.height;
+                    break;
+
+                case 'right':
+                    bodyBox.width -= box.width;
+                    break;
+            }
+        }
+        return box;
+    },
 
     
+    adjustAutoBox : function (box, index) {
+        var info = this.info,
+            owner = this.owner,
+            bodyBox = info.bodyBox,
+            size = info.size,
+            boxes = info.boxes,
+            boxesLn = boxes.length,
+            pos = box.type,
+            frameSize = this.frameSize,
+            padding = info.padding,
+            border = info.border,
+            autoSizedCtLayout = info.autoSizedCtLayout,
+            ln = (boxesLn < index) ? boxesLn : index,
+            i, adjustBox;
 
-    colorToHexRe: /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/,
-    rgbRe: /\s*rgb\s*\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*\)\s*/,
-    hexRe: /\s*#([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)\s*/,
+        if (pos == 'top' || pos == 'bottom') {
+            
+            for (i = 0; i < ln; i++) {
+                adjustBox = boxes[i];
+                if (adjustBox.stretched && adjustBox.type == 'left' || adjustBox.type == 'right') {
+                    adjustBox.height += box.height;
+                }
+                else if (adjustBox.type == 'bottom') {
+                    adjustBox.y += box.height;
+                }
+            }
+        }
 
-    
-    lightnessFactor: 0.2,
+        switch (pos) {
+            case 'top':
+                box.y = bodyBox.y;
+                if (!box.overlay) {
+                    bodyBox.y += box.height;
+                    if (info.autoHeight) {
+                        size.height += box.height;
+                    } else {
+                        bodyBox.height -= box.height;
+                    }
+                }
+                break;
 
-    
-    constructor : function(red, green, blue) {
-        var me = this,
-            clamp = Ext.Number.constrain;
-        me.r = clamp(red, 0, 255);
-        me.g = clamp(green, 0, 255);
-        me.b = clamp(blue, 0, 255);
-    },
+            case 'bottom':
+                if (!box.overlay) {
+                    if (info.autoHeight) {
+                        size.height += box.height;
+                    } else {
+                        bodyBox.height -= box.height;
+                    }
+                }
+                box.y = (bodyBox.y + bodyBox.height);
+                break;
 
-    
-    getRed: function() {
-        return this.r;
-    },
+            case 'left':
+                box.x = bodyBox.x;
+                if (!box.overlay) {
+                    bodyBox.x += box.width;
+                    if (info.autoWidth) {
+                        size.width += box.width;
+                    } else {
+                        bodyBox.width -= box.width;
+                    }
+                }
+                break;
 
-    
-    getGreen: function() {
-        return this.g;
+            case 'right':
+                if (!box.overlay) {
+                    if (info.autoWidth) {
+                        size.width += box.width;
+                    } else {
+                        bodyBox.width -= box.width;
+                    }
+                }
+                box.x = (bodyBox.x + bodyBox.width);
+                break;
+        }
+
+        if (box.ignoreFrame) {
+            if (pos == 'bottom') {
+                box.y += (frameSize.bottom + padding.bottom + border.bottom);
+            }
+            else {
+                box.y -= (frameSize.top + padding.top + border.top);
+            }
+            if (pos == 'right') {
+                box.x += (frameSize.right + padding.right + border.right);
+            }
+            else {
+                box.x -= (frameSize.left + padding.left + border.left);
+            }
+        }
+        return box;
     },
 
     
-    getBlue: function() {
-        return this.b;
+    initBox : function(item) {
+        var me = this,
+            bodyBox = me.info.bodyBox,
+            horizontal = (item.dock == 'top' || item.dock == 'bottom'),
+            owner = me.owner,
+            frameSize = me.frameSize,
+            info = me.info,
+            padding = info.padding,
+            border = info.border,
+            box = {
+                item: item,
+                overlay: item.overlay,
+                type: item.dock,
+                offsets: Ext.Element.parseBox(item.offsets || {}),
+                ignoreFrame: item.ignoreParentFrame
+            };
+        
+        if (item.stretch !== false) {
+            box.stretched = true;
+            if (horizontal) {
+                box.x = bodyBox.x + box.offsets.left;
+                box.width = bodyBox.width - (box.offsets.left + box.offsets.right);
+                if (box.ignoreFrame) {
+                    box.width += (frameSize.left + frameSize.right + border.left + border.right + padding.left + padding.right);
+                }
+                item.setCalculatedSize(box.width - item.el.getMargin('lr'), undefined, owner);
+            }
+            else {
+                box.y = bodyBox.y + box.offsets.top;
+                box.height = bodyBox.height - (box.offsets.bottom + box.offsets.top);
+                if (box.ignoreFrame) {
+                    box.height += (frameSize.top + frameSize.bottom + border.top + border.bottom + padding.top + padding.bottom);
+                }
+                item.setCalculatedSize(undefined, box.height - item.el.getMargin('tb'), owner);
+
+                
+                
+                if (!Ext.supports.ComputedStyle) {
+                    item.el.repaint();
+                }
+            }
+        }
+        else {
+            item.doComponentLayout();
+            box.width = item.getWidth() - (box.offsets.left + box.offsets.right);
+            box.height = item.getHeight() - (box.offsets.bottom + box.offsets.top);
+            box.y += box.offsets.top;
+            if (horizontal) {
+                box.x = (item.align == 'right') ? bodyBox.width - box.width : bodyBox.x;
+                box.x += box.offsets.left;
+            }
+        }
+
+        
+        
+        if (box.width === undefined) {
+            box.width = item.getWidth() + item.el.getMargin('lr');
+        }
+        if (box.height === undefined) {
+            box.height = item.getHeight() + item.el.getMargin('tb');
+        }
+
+        return box;
     },
 
     
-    getRGB: function() {
-        var me = this;
-        return [me.r, me.g, me.b];
+    getLayoutItems : function() {
+        var it = this.owner.getDockedItems(),
+            ln = it.length,
+            i = 0,
+            result = [];
+        for (; i < ln; i++) {
+            if (it[i].isVisible(true)) {
+                result.push(it[i]);
+            }
+        }
+        return result;
     },
 
     
-    getHSL: function() {
-        var me = this,
-            r = me.r / 255,
-            g = me.g / 255,
-            b = me.b / 255,
-            max = Math.max(r, g, b),
-            min = Math.min(r, g, b),
-            delta = max - min,
-            h,
-            s = 0,
-            l = 0.5 * (max + min);
+    renderItems: function(items, target) {
+        var cns = target.dom.childNodes,
+            cnsLn = cns.length,
+            ln = items.length,
+            domLn = 0,
+            i, j, cn, item;
 
         
-        if (min != max) {
-            s = (l < 0.5) ? delta / (max + min) : delta / (2 - max - min);
-            if (r == max) {
-                h = 60 * (g - b) / delta;
-            } else if (g == max) {
-                h = 120 + 60 * (b - r) / delta;
-            } else {
-                h = 240 + 60 * (r - g) / delta;
+        for (i = 0; i < cnsLn; i++) {
+            cn = Ext.get(cns[i]);
+            for (j = 0; j < ln; j++) {
+                item = items[j];
+                if (item.rendered && (cn.id == item.el.id || cn.contains(item.el.id))) {
+                    break;
+                }
             }
-            if (h < 0) {
-                h += 360;
+
+            if (j === ln) {
+                domLn++;
             }
-            if (h >= 360) {
-                h -= 360;
+        }
+
+        
+        for (i = 0, j = 0; i < ln; i++, j++) {
+            item = items[i];
+
+            
+            
+            
+            
+            
+            
+            
+            
+            if (i === j && (item.dock === 'right' || item.dock === 'bottom')) {
+                j += domLn;
+            }
+
+            
+            if (item && !item.rendered) {
+                this.renderItem(item, target, j);
+            }
+            else if (!this.isValidParent(item, target, j)) {
+                this.moveItem(item, target, j);
             }
         }
-        return [h, s, l];
     },
 
     
-    getLighter: function(factor) {
-        var hsl = this.getHSL();
-        factor = factor || this.lightnessFactor;
-        hsl[2] = Ext.Number.constrain(hsl[2] + factor, 0, 1);
-        return this.fromHSL(hsl[0], hsl[1], hsl[2]);
+    setBodyBox : function(box) {
+        var me = this,
+            owner = me.owner,
+            body = owner.body,
+            info = me.info,
+            bodyMargin = info.bodyMargin,
+            padding = info.padding,
+            border = info.border,
+            frameSize = me.frameSize;
+        
+        
+        if (owner.collapsed) {
+            return;
+        }
+        
+        if (Ext.isNumber(box.width)) {
+            box.width -= bodyMargin.left + bodyMargin.right;
+        }
+        
+        if (Ext.isNumber(box.height)) {
+            box.height -= bodyMargin.top + bodyMargin.bottom;
+        }
+        
+        me.setElementSize(body, box.width, box.height);
+        if (Ext.isNumber(box.x)) {
+            body.setLeft(box.x - padding.left - frameSize.left);
+        }
+        if (Ext.isNumber(box.y)) {
+            body.setTop(box.y - padding.top - frameSize.top);
+        }
     },
 
     
-    getDarker: function(factor) {
-        factor = factor || this.lightnessFactor;
-        return this.getLighter(-factor);
+    configureItem : function(item, pos) {
+        this.callParent(arguments);
+        if (item.dock == 'top' || item.dock == 'bottom') {
+            item.layoutManagedWidth = 1;
+            item.layoutManagedHeight = 2;
+        } else {
+            item.layoutManagedWidth = 2;
+            item.layoutManagedHeight = 1;
+        }
+        
+        item.addCls(Ext.baseCSSPrefix + 'docked');
+        item.addClsWithUI('docked-' + item.dock);
     },
 
-    
-    toString: function() {
-        var me = this,
-            round = Math.round,
-            r = round(me.r).toString(16),
-            g = round(me.g).toString(16),
-            b = round(me.b).toString(16);
-        r = (r.length == 1) ? '0' + r : r;
-        g = (g.length == 1) ? '0' + g : g;
-        b = (b.length == 1) ? '0' + b : b;
-        return ['#', r, g, b].join('');
-    },
+    afterRemove : function(item) {
+        this.callParent(arguments);
+        if (this.itemCls) {
+            item.el.removeCls(this.itemCls + '-' + item.dock);
+        }
+        var dom = item.el.dom;
 
-    
-    toHex: function(color) {
-        if (Ext.isArray(color)) {
-            color = color[0];
+        if (!item.destroying && dom) {
+            dom.parentNode.removeChild(dom);
         }
-        if (!Ext.isString(color)) {
-            return '';
+        this.childrenChanged = true;
+    }
+});
+
+Ext.define('Ext.util.Memento', function () {
+
+    function captureOne (src, target, prop) {
+        src[prop] = target[prop];
+    }
+
+    function removeOne (src, target, prop) {
+        delete src[prop];
+    }
+
+    function restoreOne (src, target, prop) {
+        var value = src[prop];
+        if (value || src.hasOwnProperty(prop)) {
+            restoreValue(target, prop, value);
         }
-        if (color.substr(0, 1) === '#') {
-            return color;
+    }
+
+    function restoreValue (target, prop, value) {
+        if (Ext.isDefined(value)) {
+            target[prop] = value;
+        } else {
+            delete target[prop];
         }
-        var digits = this.colorToHexRe.exec(color);
+    }
 
-        if (Ext.isArray(digits)) {
-            var red = parseInt(digits[2], 10),
-                green = parseInt(digits[3], 10),
-                blue = parseInt(digits[4], 10),
-                rgb = blue | (green << 8) | (red << 16);
-            return digits[1] + '#' + ("000000" + rgb.toString(16)).slice(-6);
+    function doMany (doOne, src, target, props) {
+        if (src) {
+            if (Ext.isArray(props)) {
+                Ext.each(props, function (prop) {
+                    doOne(src, target, prop);
+                });
+            } else {
+                doOne(src, target, props);
+            }
         }
-        else {
-            return '';
+    }
+
+    return {
+        
+        data: null,
+
+        
+        target: null,
+
+        
+        constructor: function (target, props) {
+            if (target) {
+                this.target = target;
+                if (props) {
+                    this.capture(props);
+                }
+            }
+        },
+
+        
+        capture: function (props, target) {
+            doMany(captureOne, this.data || (this.data = {}), target || this.target, props);
+        },
+
+        
+        remove: function (props) {
+            doMany(removeOne, this.data, null, props);
+        },
+
+        
+        restore: function (props, clear, target) {
+            doMany(restoreOne, this.data, target || this.target, props);
+            if (clear !== false) {
+                this.remove(props);
+            }
+        },
+
+        
+        restoreAll: function (clear, target) {
+            var me = this,
+                t = target || this.target;
+
+            Ext.Object.each(me.data, function (prop, value) {
+                restoreValue(t, prop, value);
+            });
+
+            if (clear !== false) {
+                delete me.data;
+            }
         }
+    };
+}());
+
+
+Ext.define('Ext.app.EventBus', {
+    requires: [
+        'Ext.util.Event'
+    ],
+    mixins: {
+        observable: 'Ext.util.Observable'
     },
 
-    
-    fromString: function(str) {
-        var values, r, g, b,
-            parse = parseInt;
+    constructor: function() {
+        this.mixins.observable.constructor.call(this);
+
+        this.bus = {};
+
+        var me = this;
+        Ext.override(Ext.Component, {
+            fireEvent: function(ev) {
+                if (Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false) {
+                    return me.dispatch.call(me, ev, this, arguments);
+                }
+                return false;
+            }
+        });
+    },
+
+    dispatch: function(ev, target, args) {
+        var bus = this.bus,
+            selectors = bus[ev],
+            selector, controllers, id, events, event, i, ln;
 
-        if ((str.length == 4 || str.length == 7) && str.substr(0, 1) === '#') {
-            values = str.match(this.hexRe);
-            if (values) {
-                r = parse(values[1], 16) >> 0;
-                g = parse(values[2], 16) >> 0;
-                b = parse(values[3], 16) >> 0;
-                if (str.length == 4) {
-                    r += (r * 16);
-                    g += (g * 16);
-                    b += (b * 16);
+        if (selectors) {
+            
+            for (selector in selectors) {
+                
+                if (target.is(selector)) {
+                    
+                    controllers = selectors[selector];
+                    for (id in controllers) {
+                        
+                        events = controllers[id];
+                        for (i = 0, ln = events.length; i < ln; i++) {
+                            event = events[i];
+                            
+                            if (event.fire.apply(event, Array.prototype.slice.call(args, 1)) === false) {
+                                return false;
+                            };
+                        }
+                    }
                 }
             }
         }
-        else {
-            values = str.match(this.rgbRe);
-            if (values) {
-                r = values[1];
-                g = values[2];
-                b = values[3];
-            }
+    },
+
+    control: function(selectors, listeners, controller) {
+        var bus = this.bus,
+            selector, fn;
+
+        if (Ext.isString(selectors)) {
+            selector = selectors;
+            selectors = {};
+            selectors[selector] = listeners;
+            this.control(selectors, null, controller);
+            return;
         }
 
-        return (typeof r == 'undefined') ? undefined : Ext.create('Ext.draw.Color', r, g, b);
-    },
+        Ext.Object.each(selectors, function(selector, listeners) {
+            Ext.Object.each(listeners, function(ev, listener) {
+                var options = {},
+                    scope = controller,
+                    event = Ext.create('Ext.util.Event', controller, ev);
 
-    
-    getGrayscale: function() {
-        
-        return this.r * 0.3 + this.g * 0.59 + this.b * 0.11;
-    },
+                
+                if (Ext.isObject(listener)) {
+                    options = listener;
+                    listener = options.fn;
+                    scope = options.scope || controller;
+                    delete options.fn;
+                    delete options.scope;
+                }
 
-    
-    fromHSL: function(h, s, l) {
-        var C, X, m, i, rgb = [],
-            abs = Math.abs,
-            floor = Math.floor;
+                event.addListener(listener, scope, options);
 
-        if (s == 0 || h == null) {
-            
-            rgb = [l, l, l];
-        }
-        else {
-            
-            
-            
-            
-            h /= 60;
-            C = s * (1 - abs(2 * l - 1));
-            X = C * (1 - abs(h - 2 * floor(h / 2) - 1));
-            m = l - C / 2;
-            switch (floor(h)) {
-                case 0:
-                    rgb = [C, X, 0];
-                    break;
-                case 1:
-                    rgb = [X, C, 0];
-                    break;
-                case 2:
-                    rgb = [0, C, X];
-                    break;
-                case 3:
-                    rgb = [0, X, C];
-                    break;
-                case 4:
-                    rgb = [X, 0, C];
-                    break;
-                case 5:
-                    rgb = [C, 0, X];
-                    break;
-            }
-            rgb = [rgb[0] + m, rgb[1] + m, rgb[2] + m];
-        }
-        return Ext.create('Ext.draw.Color', rgb[0] * 255, rgb[1] * 255, rgb[2] * 255);
+                
+                bus[ev] = bus[ev] || {};
+                bus[ev][selector] = bus[ev][selector] || {};
+                bus[ev][selector][controller.id] = bus[ev][selector][controller.id] || [];
+
+                
+                bus[ev][selector][controller.id].push(event);
+            });
+        });
     }
+});
+
+Ext.define('Ext.data.Types', {
+    singleton: true,
+    requires: ['Ext.data.SortTypes']
 }, function() {
-    var prototype = this.prototype;
+    var st = Ext.data.SortTypes;
 
-    
-    this.addStatics({
-        fromHSL: function() {
-            return prototype.fromHSL.apply(prototype, arguments);
+    Ext.apply(Ext.data.Types, {
+        
+        stripRe: /[\$,%]/g,
+
+        
+        AUTO: {
+            convert: function(v) {
+                return v;
+            },
+            sortType: st.none,
+            type: 'auto'
         },
-        fromString: function() {
-            return prototype.fromString.apply(prototype, arguments);
+
+        
+        STRING: {
+            convert: function(v) {
+                var defaultValue = this.useNull ? null : '';
+                return (v === undefined || v === null) ? defaultValue : String(v);
+            },
+            sortType: st.asUCString,
+            type: 'string'
         },
-        toHex: function() {
-            return prototype.toHex.apply(prototype, arguments);
+
+        
+        INT: {
+            convert: function(v) {
+                return v !== undefined && v !== null && v !== '' ?
+                    parseInt(String(v).replace(Ext.data.Types.stripRe, ''), 10) : (this.useNull ? null : 0);
+            },
+            sortType: st.none,
+            type: 'int'
+        },
+
+        
+        FLOAT: {
+            convert: function(v) {
+                return v !== undefined && v !== null && v !== '' ?
+                    parseFloat(String(v).replace(Ext.data.Types.stripRe, ''), 10) : (this.useNull ? null : 0);
+            },
+            sortType: st.none,
+            type: 'float'
+        },
+
+        
+        BOOL: {
+            convert: function(v) {
+                if (this.useNull && (v === undefined || v === null || v === '')) {
+                    return null;
+                }
+                return v === true || v === 'true' || v == 1;
+            },
+            sortType: st.none,
+            type: 'bool'
+        },
+
+        
+        DATE: {
+            convert: function(v) {
+                var df = this.dateFormat,
+                    parsed;
+
+                if (!v) {
+                    return null;
+                }
+                if (Ext.isDate(v)) {
+                    return v;
+                }
+                if (df) {
+                    if (df == 'timestamp') {
+                        return new Date(v*1000);
+                    }
+                    if (df == 'time') {
+                        return new Date(parseInt(v, 10));
+                    }
+                    return Ext.Date.parse(v, df);
+                }
+
+                parsed = Date.parse(v);
+                return parsed ? new Date(parsed) : null;
+            },
+            sortType: st.asDate,
+            type: 'date'
         }
     });
-});
 
+    Ext.apply(Ext.data.Types, {
+        
+        BOOLEAN: this.BOOL,
 
-Ext.define('Ext.dd.StatusProxy', {
-    animRepair: false,
-
-    
-    constructor: function(config){
-        Ext.apply(this, config);
-        this.id = this.id || Ext.id();
-        this.proxy = Ext.createWidget('component', {
-            floating: true,
-            id: this.id,
-            html: '<div class="' + Ext.baseCSSPrefix + 'dd-drop-icon"></div>' +
-                  '<div class="' + Ext.baseCSSPrefix + 'dd-drag-ghost"></div>',
-            cls: Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed,
-            shadow: !config || config.shadow !== false,
-            renderTo: document.body
-        });
+        
+        INTEGER: this.INT,
 
-        this.el = this.proxy.el;
-        this.el.show();
-        this.el.setVisibilityMode(Ext.core.Element.VISIBILITY);
-        this.el.hide();
+        
+        NUMBER: this.FLOAT
+    });
+});
 
-        this.ghost = Ext.get(this.el.dom.childNodes[1]);
-        this.dropStatus = this.dropNotAllowed;
-    },
-    
-    dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
-    
-    dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
 
+Ext.define('Ext.data.Field', {
+    requires: ['Ext.data.Types', 'Ext.data.SortTypes'],
+    alias: 'data.field',
     
-    setStatus : function(cssClass){
-        cssClass = cssClass || this.dropNotAllowed;
-        if(this.dropStatus != cssClass){
-            this.el.replaceCls(this.dropStatus, cssClass);
-            this.dropStatus = cssClass;
+    constructor : function(config) {
+        if (Ext.isString(config)) {
+            config = {name: config};
         }
-    },
+        Ext.apply(this, config);
+        
+        var types = Ext.data.Types,
+            st = this.sortType,
+            t;
 
-    
-    reset : function(clearGhost){
-        this.el.dom.className = Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed;
-        this.dropStatus = this.dropNotAllowed;
-        if(clearGhost){
-            this.ghost.update("");
+        if (this.type) {
+            if (Ext.isString(this.type)) {
+                this.type = types[this.type.toUpperCase()] || types.AUTO;
+            }
+        } else {
+            this.type = types.AUTO;
         }
-    },
 
-    
-    update : function(html){
-        if(typeof html == "string"){
-            this.ghost.update(html);
-        }else{
-            this.ghost.update("");
-            html.style.margin = "0";
-            this.ghost.dom.appendChild(html);
+        
+        if (Ext.isString(st)) {
+            this.sortType = Ext.data.SortTypes[st];
+        } else if(Ext.isEmpty(st)) {
+            this.sortType = this.type.sortType;
         }
-        var el = this.ghost.dom.firstChild; 
-        if(el){
-            Ext.fly(el).setStyle('float', 'none');
+
+        if (!this.convert) {
+            this.convert = this.type.convert;
         }
     },
-
     
-    getEl : function(){
-        return this.el;
-    },
-
     
-    getGhost : function(){
-        return this.ghost;
-    },
-
     
-    hide : function(clear) {
-        this.proxy.hide();
-        if (clear) {
-            this.reset(true);
-        }
-    },
-
     
-    stop : function(){
-        if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
-            this.anim.stop();
-        }
-    },
-
     
-    show : function() {
-        this.proxy.show();
-        this.proxy.toFront();
-    },
-
     
-    sync : function(){
-        this.proxy.el.sync();
-    },
 
     
-    repair : function(xy, callback, scope){
-        this.callback = callback;
-        this.scope = scope;
-        if (xy && this.animRepair !== false) {
-            this.el.addCls(Ext.baseCSSPrefix + 'dd-drag-repair');
-            this.el.hideUnders(true);
-            this.anim = this.el.animate({
-                duration: this.repairDuration || 500,
-                easing: 'ease-out',
-                to: {
-                    x: xy[0],
-                    y: xy[1]
-                },
-                stopAnimation: true,
-                callback: this.afterRepair,
-                scope: this
-            });
-        } else {
-            this.afterRepair();
-        }
-    },
-
+    dateFormat: null,
     
-    afterRepair : function(){
-        this.hide(true);
-        if(typeof this.callback == "function"){
-            this.callback.call(this.scope || this);
-        }
-        this.callback = null;
-        this.scope = null;
-    },
-
-    destroy: function(){
-        Ext.destroy(this.ghost, this.proxy, this.el);
-    }
-});
-
-Ext.define('Ext.panel.Proxy', {
     
-    alternateClassName: 'Ext.dd.PanelProxy',
-
+    useNull: false,
     
-    constructor: function(panel, config){
-        
-        this.panel = panel;
-        this.id = this.panel.id +'-ddproxy';
-        Ext.apply(this, config);
-    },
-
     
-    insertProxy: true,
+    defaultValue: "",
 
     
-    setStatus: Ext.emptyFn,
-    reset: Ext.emptyFn,
-    update: Ext.emptyFn,
-    stop: Ext.emptyFn,
-    sync: Ext.emptyFn,
+    mapping: null,
 
     
-    getEl: function(){
-        return this.ghost.el;
-    },
+    sortType : null,
 
     
-    getGhost: function(){
-        return this.ghost;
-    },
+    sortDir : "ASC",
 
     
-    getProxy: function(){
-        return this.proxy;
-    },
+    allowBlank : true,
 
     
-    hide : function(){
-        if (this.ghost) {
-            if (this.proxy) {
-                this.proxy.remove();
-                delete this.proxy;
-            }
+    persist: true
+});
 
-            
-            this.panel.unghost(null, false);
-            delete this.ghost;
-        }
-    },
 
-    
-    show: function(){
-        if (!this.ghost) {
-            var panelSize = this.panel.getSize();
-            this.panel.el.setVisibilityMode(Ext.core.Element.DISPLAY);
-            this.ghost = this.panel.ghost();
-            if (this.insertProxy) {
-                
-                
-                this.proxy = this.panel.el.insertSibling({cls: Ext.baseCSSPrefix + 'panel-dd-spacer'});
-                this.proxy.setSize(panelSize);
-            }
-        }
-    },
+Ext.define('Ext.util.AbstractMixedCollection', {
+    requires: ['Ext.util.Filter'],
 
-    
-    repair: function(xy, callback, scope) {
-        this.hide();
-        if (typeof callback == "function") {
-            callback.call(scope || this);
-        }
+    mixins: {
+        observable: 'Ext.util.Observable'
     },
 
-    
-    moveProxy : function(parentNode, before){
-        if (this.proxy) {
-            parentNode.insertBefore(this.proxy.dom, before);
-        }
-    }
-});
-
+    constructor: function(allowFunctions, keyFn) {
+        var me = this;
 
-Ext.define('Ext.layout.component.AbstractDock', {
+        me.items = [];
+        me.map = {};
+        me.keys = [];
+        me.length = 0;
 
-    
+        me.addEvents(
+            
+            'clear',
 
-    extend: 'Ext.layout.component.Component',
+            
+            'add',
 
-    
+            
+            'replace',
 
-    type: 'dock',
+            
+            'remove'
+        );
 
-    
-    autoSizing: true,
+        me.allowFunctions = allowFunctions === true;
 
-    beforeLayout: function() {
-        var returnValue = this.callParent(arguments);
-        if (returnValue !== false && (!this.initializedBorders || this.childrenChanged) && (!this.owner.border || this.owner.manageBodyBorders)) {
-            this.handleItemBorders();
-            this.initializedBorders = true;
+        if (keyFn) {
+            me.getKey = keyFn;
         }
-        return returnValue;
+
+        me.mixins.observable.constructor.call(me);
     },
+
     
-    handleItemBorders: function() {
-        var owner = this.owner,
-            body = owner.body,
-            docked = this.getLayoutItems(),
-            borders = {
-                top: [],
-                right: [],
-                bottom: [],
-                left: []
-            },
-            oldBorders = this.borders,
-            opposites = {
-                top: 'bottom',
-                right: 'left',
-                bottom: 'top',
-                left: 'right'
-            },
-            i, ln, item, dock, side;
+    allowFunctions : false,
 
-        for (i = 0, ln = docked.length; i < ln; i++) {
-            item = docked[i];
-            dock = item.dock;
-            
-            if (item.ignoreBorderManagement) {
-                continue;
-            }
-            
-            if (!borders[dock].satisfied) {
-                borders[dock].push(item);
-                borders[dock].satisfied = true;
-            }
-            
-            if (!borders.top.satisfied && opposites[dock] !== 'top') {
-                borders.top.push(item);
-            }
-            if (!borders.right.satisfied && opposites[dock] !== 'right') {
-                borders.right.push(item);
-            }            
-            if (!borders.bottom.satisfied && opposites[dock] !== 'bottom') {
-                borders.bottom.push(item);
-            }            
-            if (!borders.left.satisfied && opposites[dock] !== 'left') {
-                borders.left.push(item);
-            }
-        }
+    
+    add : function(key, obj){
+        var me = this,
+            myObj = obj,
+            myKey = key,
+            old;
 
-        if (oldBorders) {
-            for (side in oldBorders) {
-                if (oldBorders.hasOwnProperty(side)) {
-                    ln = oldBorders[side].length;
-                    if (!owner.manageBodyBorders) {
-                        for (i = 0; i < ln; i++) {
-                            oldBorders[side][i].removeCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);
-                        }
-                        if (!oldBorders[side].satisfied && !owner.bodyBorder) {
-                            body.removeCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);                   
-                        }                    
-                    }
-                    else if (oldBorders[side].satisfied) {
-                        body.setStyle('border-' + side + '-width', '');
-                    }
-                }
-            }
+        if (arguments.length == 1) {
+            myObj = myKey;
+            myKey = me.getKey(myObj);
         }
-                
-        for (side in borders) {
-            if (borders.hasOwnProperty(side)) {
-                ln = borders[side].length;
-                if (!owner.manageBodyBorders) {
-                    for (i = 0; i < ln; i++) {
-                        borders[side][i].addCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);
-                    }
-                    if ((!borders[side].satisfied && !owner.bodyBorder) || owner.bodyBorder === false) {
-                        body.addCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);                   
-                    }                    
-                }
-                else if (borders[side].satisfied) {
-                    body.setStyle('border-' + side + '-width', '1px');
-                }
+        if (typeof myKey != 'undefined' && myKey !== null) {
+            old = me.map[myKey];
+            if (typeof old != 'undefined') {
+                return me.replace(myKey, myObj);
             }
+            me.map[myKey] = myObj;
         }
-        
-        this.borders = borders;
+        me.length++;
+        me.items.push(myObj);
+        me.keys.push(myKey);
+        me.fireEvent('add', me.length - 1, myObj, myKey);
+        return myObj;
     },
+
     
+    getKey : function(o){
+         return o.id;
+    },
+
     
-    onLayout: function(width, height) {
+    replace : function(key, o){
         var me = this,
-            owner = me.owner,
-            body = owner.body,
-            layout = owner.layout,
-            target = me.getTarget(),
-            autoWidth = false,
-            autoHeight = false,
-            padding, border, frameSize;
+            old,
+            index;
 
-        
-        var info = me.info = {
-            boxes: [],
-            size: {
-                width: width,
-                height: height
-            },
-            bodyBox: {}
-        };
-        
-        delete layout.isAutoDock;
+        if (arguments.length == 1) {
+            o = arguments[0];
+            key = me.getKey(o);
+        }
+        old = me.map[key];
+        if (typeof key == 'undefined' || key === null || typeof old == 'undefined') {
+             return me.add(key, o);
+        }
+        index = me.indexOfKey(key);
+        me.items[index] = o;
+        me.map[key] = o;
+        me.fireEvent('replace', key, old, o);
+        return o;
+    },
 
-        Ext.applyIf(info, me.getTargetInfo());
+    
+    addAll : function(objs){
+        var me = this,
+            i = 0,
+            args,
+            len,
+            key;
 
-        
-        if (owner && owner.ownerCt && owner.ownerCt.layout && owner.ownerCt.layout.isLayout) {
-            if (!Ext.isNumber(owner.height) || !Ext.isNumber(owner.width)) {
-                owner.ownerCt.layout.bindToOwnerCtComponent = true;
+        if (arguments.length > 1 || Ext.isArray(objs)) {
+            args = arguments.length > 1 ? arguments : objs;
+            for (len = args.length; i < len; i++) {
+                me.add(args[i]);
             }
-            else {
-                owner.ownerCt.layout.bindToOwnerCtComponent = false;
+        } else {
+            for (key in objs) {
+                if (objs.hasOwnProperty(key)) {
+                    if (me.allowFunctions || typeof objs[key] != 'function') {
+                        me.add(key, objs[key]);
+                    }
+                }
             }
         }
+    },
 
-        
-        if (height === undefined || height === null || width === undefined || width === null) {
-            padding = info.padding;
-            border = info.border;
-            frameSize = me.frameSize;
+    
+    each : function(fn, scope){
+        var items = [].concat(this.items), 
+            i = 0,
+            len = items.length,
+            item;
 
-            
-            if ((height === undefined || height === null) && (width === undefined || width === null)) {
-                autoHeight = true;
-                autoWidth = true;
-                me.setTargetSize(null);
-                me.setBodyBox({width: null, height: null});
-            }
-            
-            else if (height === undefined || height === null) {
-                autoHeight = true;
-                
-                me.setTargetSize(width);
-                me.setBodyBox({width: width - padding.left - border.left - padding.right - border.right - frameSize.left - frameSize.right, height: null});
-            
-            }
-            else {
-                autoWidth = true;
-                
-                me.setTargetSize(null, height);
-                me.setBodyBox({width: null, height: height - padding.top - padding.bottom - border.top - border.bottom - frameSize.top - frameSize.bottom});
+        for (; i < len; i++) {
+            item = items[i];
+            if (fn.call(scope || item, item, i, len) === false) {
+                break;
             }
+        }
+    },
 
-            
-            if (layout && layout.isLayout) {
-                
-                layout.bindToOwnerCtComponent = true;
-                
-                layout.isAutoDock = layout.autoSize !== true;
-                layout.layout();
-
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                info.autoSizedCtLayout = layout.autoSize === true;
-            }
+    
+    eachKey : function(fn, scope){
+        var keys = this.keys,
+            items = this.items,
+            i = 0,
+            len = keys.length;
 
-            
-            
-            
-            
-            
-            me.dockItems(autoWidth, autoHeight);
-            me.setTargetSize(info.size.width, info.size.height);
-        }
-        else {
-            me.setTargetSize(width, height);
-            me.dockItems();
+        for (; i < len; i++) {
+            fn.call(scope || window, keys[i], items[i], i, len);
         }
-        me.callParent(arguments);
     },
 
     
-    dockItems : function(autoWidth, autoHeight) {
-        this.calculateDockBoxes(autoWidth, autoHeight);
-
-        
-        
-        
-        var info = this.info,
-            boxes = info.boxes,
-            ln = boxes.length,
-            dock, i;
+    findBy : function(fn, scope) {
+        var keys = this.keys,
+            items = this.items,
+            i = 0,
+            len = items.length;
 
-        
-        
-        for (i = 0; i < ln; i++) {
-            dock = boxes[i];
-            dock.item.setPosition(dock.x, dock.y);
-            if ((autoWidth || autoHeight) && dock.layout && dock.layout.isLayout) {
-                
-                dock.layout.bindToOwnerCtComponent = true;
+        for (; i < len; i++) {
+            if (fn.call(scope || window, items[i], keys[i])) {
+                return items[i];
             }
         }
+        return null;
+    },
 
-        
-        
-        if (!info.autoSizedCtLayout) {
-            if (autoWidth) {
-                info.bodyBox.width = null;
-            }
-            if (autoHeight) {
-                info.bodyBox.height = null;
-            }
+    find : function() {
+        if (Ext.isDefined(Ext.global.console)) {
+            Ext.global.console.warn('Ext.util.MixedCollection: find has been deprecated. Use findBy instead.');
         }
-
-        
-        
-        this.setBodyBox(info.bodyBox);
+        return this.findBy.apply(this, arguments);
     },
 
     
-    calculateDockBoxes : function(autoWidth, autoHeight) {
-        
-        
-        
+    insert : function(index, key, obj){
         var me = this,
-            target = me.getTarget(),
-            items = me.getLayoutItems(),
-            owner = me.owner,
-            bodyEl = owner.body,
-            info = me.info,
-            size = info.size,
-            ln = items.length,
-            padding = info.padding,
-            border = info.border,
-            frameSize = me.frameSize,
-            item, i, box, rect;
+            myKey = key,
+            myObj = obj;
 
-        
-        
-        if (autoHeight) {
-            size.height = bodyEl.getHeight() + padding.top + border.top + padding.bottom + border.bottom + frameSize.top + frameSize.bottom;
+        if (arguments.length == 2) {
+            myObj = myKey;
+            myKey = me.getKey(myObj);
         }
-        else {
-            size.height = target.getHeight();
+        if (me.containsKey(myKey)) {
+            me.suspendEvents();
+            me.removeAtKey(myKey);
+            me.resumeEvents();
         }
-        if (autoWidth) {
-            size.width = bodyEl.getWidth() + padding.left + border.left + padding.right + border.right + frameSize.left + frameSize.right;
+        if (index >= me.length) {
+            return me.add(myKey, myObj);
         }
-        else {
-            size.width = target.getWidth();
+        me.length++;
+        Ext.Array.splice(me.items, index, 0, myObj);
+        if (typeof myKey != 'undefined' && myKey !== null) {
+            me.map[myKey] = myObj;
         }
+        Ext.Array.splice(me.keys, index, 0, myKey);
+        me.fireEvent('add', index, myObj, myKey);
+        return myObj;
+    },
 
-        info.bodyBox = {
-            x: padding.left + frameSize.left,
-            y: padding.top + frameSize.top,
-            width: size.width - padding.left - border.left - padding.right - border.right - frameSize.left - frameSize.right,
-            height: size.height - border.top - padding.top - border.bottom - padding.bottom - frameSize.top - frameSize.bottom
-        };
-
-        
-        for (i = 0; i < ln; i++) {
-            item = items[i];
-            
-            
-            
-            box = me.initBox(item);
+    
+    remove : function(o){
+        return this.removeAt(this.indexOf(o));
+    },
 
-            if (autoHeight === true) {
-                box = me.adjustAutoBox(box, i);
-            }
-            else {
-                box = me.adjustSizedBox(box, i);
-            }
+    
+    removeAll : function(items){
+        Ext.each(items || [], function(item) {
+            this.remove(item);
+        }, this);
 
-            
-            
-            
-            info.boxes.push(box);
-        }
+        return this;
     },
 
     
-    adjustSizedBox : function(box, index) {
-        var bodyBox = this.info.bodyBox,
-            frameSize = this.frameSize,
-            info = this.info,
-            padding = info.padding,
-            pos = box.type,
-            border = info.border;
+    removeAt : function(index){
+        var me = this,
+            o,
+            key;
 
-        switch (pos) {
-            case 'top':
-                box.y = bodyBox.y;
-                break;
+        if (index < me.length && index >= 0) {
+            me.length--;
+            o = me.items[index];
+            Ext.Array.erase(me.items, index, 1);
+            key = me.keys[index];
+            if (typeof key != 'undefined') {
+                delete me.map[key];
+            }
+            Ext.Array.erase(me.keys, index, 1);
+            me.fireEvent('remove', o, key);
+            return o;
+        }
+        return false;
+    },
 
-            case 'left':
-                box.x = bodyBox.x;
-                break;
+    
+    removeAtKey : function(key){
+        return this.removeAt(this.indexOfKey(key));
+    },
 
-            case 'bottom':
-                box.y = (bodyBox.y + bodyBox.height) - box.height;
-                break;
+    
+    getCount : function(){
+        return this.length;
+    },
 
-            case 'right':
-                box.x = (bodyBox.x + bodyBox.width) - box.width;
-                break;
-        }
+    
+    indexOf : function(o){
+        return Ext.Array.indexOf(this.items, o);
+    },
 
-        if (box.ignoreFrame) {
-            if (pos == 'bottom') {
-                box.y += (frameSize.bottom + padding.bottom + border.bottom);
-            }
-            else {
-                box.y -= (frameSize.top + padding.top + border.top);
-            }
-            if (pos == 'right') {
-                box.x += (frameSize.right + padding.right + border.right);
-            }
-            else {
-                box.x -= (frameSize.left + padding.left + border.left);
-            }
-        }
+    
+    indexOfKey : function(key){
+        return Ext.Array.indexOf(this.keys, key);
+    },
 
-        
-        if (!box.overlay) {
-            switch (pos) {
-                case 'top':
-                    bodyBox.y += box.height;
-                    bodyBox.height -= box.height;
-                    break;
+    
+    get : function(key) {
+        var me = this,
+            mk = me.map[key],
+            item = mk !== undefined ? mk : (typeof key == 'number') ? me.items[key] : undefined;
+        return typeof item != 'function' || me.allowFunctions ? item : null; 
+    },
 
-                case 'left':
-                    bodyBox.x += box.width;
-                    bodyBox.width -= box.width;
-                    break;
+    
+    getAt : function(index) {
+        return this.items[index];
+    },
 
-                case 'bottom':
-                    bodyBox.height -= box.height;
-                    break;
+    
+    getByKey : function(key) {
+        return this.map[key];
+    },
 
-                case 'right':
-                    bodyBox.width -= box.width;
-                    break;
-            }
-        }
-        return box;
+    
+    contains : function(o){
+        return Ext.Array.contains(this.items, o);
     },
 
     
-    adjustAutoBox : function (box, index) {
-        var info = this.info,
-            owner = this.owner,
-            bodyBox = info.bodyBox,
-            size = info.size,
-            boxes = info.boxes,
-            boxesLn = boxes.length,
-            pos = box.type,
-            frameSize = this.frameSize,
-            padding = info.padding,
-            border = info.border,
-            autoSizedCtLayout = info.autoSizedCtLayout,
-            ln = (boxesLn < index) ? boxesLn : index,
-            i, adjustBox;
+    containsKey : function(key){
+        return typeof this.map[key] != 'undefined';
+    },
 
-        if (pos == 'top' || pos == 'bottom') {
-            
-            for (i = 0; i < ln; i++) {
-                adjustBox = boxes[i];
-                if (adjustBox.stretched && adjustBox.type == 'left' || adjustBox.type == 'right') {
-                    adjustBox.height += box.height;
-                }
-                else if (adjustBox.type == 'bottom') {
-                    adjustBox.y += box.height;
-                }
-            }
-        }
+    
+    clear : function(){
+        var me = this;
 
-        switch (pos) {
-            case 'top':
-                box.y = bodyBox.y;
-                if (!box.overlay) {
-                    bodyBox.y += box.height;
-                    if (owner.isFixedHeight()) {
-                        bodyBox.height -= box.height;
-                    } else {
-                        size.height += box.height;
-                    }
-                }
-                break;
+        me.length = 0;
+        me.items = [];
+        me.keys = [];
+        me.map = {};
+        me.fireEvent('clear');
+    },
 
-            case 'bottom':
-                if (!box.overlay) {
-                    if (owner.isFixedHeight()) {
-                        bodyBox.height -= box.height;
-                    } else {
-                        size.height += box.height;
-                    }
-                }
-                box.y = (bodyBox.y + bodyBox.height);
-                break;
+    
+    first : function() {
+        return this.items[0];
+    },
 
-            case 'left':
-                box.x = bodyBox.x;
-                if (!box.overlay) {
-                    bodyBox.x += box.width;
-                    if (owner.isFixedWidth()) {
-                        bodyBox.width -= box.width;
-                    } else {
-                        size.width += box.width;
-                    }
-                }
-                break;
+    
+    last : function() {
+        return this.items[this.length - 1];
+    },
 
-            case 'right':
-                if (!box.overlay) {
-                    if (owner.isFixedWidth()) {
-                        bodyBox.width -= box.width;
-                    } else {
-                        size.width += box.width;
-                    }
-                }
-                box.x = (bodyBox.x + bodyBox.width);
-                break;
-        }
+    
+    sum: function(property, root, start, end) {
+        var values = this.extractValues(property, root),
+            length = values.length,
+            sum    = 0,
+            i;
 
-        if (box.ignoreFrame) {
-            if (pos == 'bottom') {
-                box.y += (frameSize.bottom + padding.bottom + border.bottom);
-            }
-            else {
-                box.y -= (frameSize.top + padding.top + border.top);
-            }
-            if (pos == 'right') {
-                box.x += (frameSize.right + padding.right + border.right);
-            }
-            else {
-                box.x -= (frameSize.left + padding.left + border.left);
-            }
+        start = start || 0;
+        end   = (end || end === 0) ? end : length - 1;
+
+        for (i = start; i <= end; i++) {
+            sum += values[i];
         }
-        return box;
+
+        return sum;
     },
 
     
-    initBox : function(item) {
-        var me = this,
-            bodyBox = me.info.bodyBox,
-            horizontal = (item.dock == 'top' || item.dock == 'bottom'),
-            owner = me.owner,
-            frameSize = me.frameSize,
-            info = me.info,
-            padding = info.padding,
-            border = info.border,
-            box = {
-                item: item,
-                overlay: item.overlay,
-                type: item.dock,
-                offsets: Ext.core.Element.parseBox(item.offsets || {}),
-                ignoreFrame: item.ignoreParentFrame
-            };
-        
-        if (item.stretch !== false) {
-            box.stretched = true;
-            if (horizontal) {
-                box.x = bodyBox.x + box.offsets.left;
-                box.width = bodyBox.width - (box.offsets.left + box.offsets.right);
-                if (box.ignoreFrame) {
-                    box.width += (frameSize.left + frameSize.right + border.left + border.right + padding.left + padding.right);
-                }
-                item.setCalculatedSize(box.width - item.el.getMargin('lr'), undefined, owner);
-            }
-            else {
-                box.y = bodyBox.y + box.offsets.top;
-                box.height = bodyBox.height - (box.offsets.bottom + box.offsets.top);
-                if (box.ignoreFrame) {
-                    box.height += (frameSize.top + frameSize.bottom + border.top + border.bottom + padding.top + padding.bottom);
-                }
-                item.setCalculatedSize(undefined, box.height - item.el.getMargin('tb'), owner);
+    collect: function(property, root, allowNull) {
+        var values = this.extractValues(property, root),
+            length = values.length,
+            hits   = {},
+            unique = [],
+            value, strValue, i;
 
-                
-                
-                if (!Ext.supports.ComputedStyle) {
-                    item.el.repaint();
-                }
-            }
-        }
-        else {
-            item.doComponentLayout();
-            box.width = item.getWidth() - (box.offsets.left + box.offsets.right);
-            box.height = item.getHeight() - (box.offsets.bottom + box.offsets.top);
-            box.y += box.offsets.top;
-            if (horizontal) {
-                box.x = (item.align == 'right') ? bodyBox.width - box.width : bodyBox.x;
-                box.x += box.offsets.left;
+        for (i = 0; i < length; i++) {
+            value = values[i];
+            strValue = String(value);
+
+            if ((allowNull || !Ext.isEmpty(value)) && !hits[strValue]) {
+                hits[strValue] = true;
+                unique.push(value);
             }
         }
 
-        
-        
-        if (box.width == undefined) {
-            box.width = item.getWidth() + item.el.getMargin('lr');
-        }
-        if (box.height == undefined) {
-            box.height = item.getHeight() + item.el.getMargin('tb');
+        return unique;
+    },
+
+    
+    extractValues: function(property, root) {
+        var values = this.items;
+
+        if (root) {
+            values = Ext.Array.pluck(values, root);
         }
 
-        return box;
+        return Ext.Array.pluck(values, property);
     },
 
     
-    getLayoutItems : function() {
-        var it = this.owner.getDockedItems(),
-            ln = it.length,
-            i = 0,
-            result = [];
-        for (; i < ln; i++) {
-            if (it[i].isVisible(true)) {
-                result.push(it[i]);
+    getRange : function(start, end){
+        var me = this,
+            items = me.items,
+            range = [],
+            i;
+
+        if (items.length < 1) {
+            return range;
+        }
+
+        start = start || 0;
+        end = Math.min(typeof end == 'undefined' ? me.length - 1 : end, me.length - 1);
+        if (start <= end) {
+            for (i = start; i <= end; i++) {
+                range[range.length] = items[i];
+            }
+        } else {
+            for (i = start; i >= end; i--) {
+                range[range.length] = items[i];
             }
         }
-        return result;
+        return range;
     },
 
     
-    renderItems: function(items, target) {
-        var cns = target.dom.childNodes,
-            cnsLn = cns.length,
-            ln = items.length,
-            domLn = 0,
-            i, j, cn, item;
+    filter : function(property, value, anyMatch, caseSensitive) {
+        var filters = [],
+            filterFn;
 
         
-        for (i = 0; i < cnsLn; i++) {
-            cn = Ext.get(cns[i]);
-            for (j = 0; j < ln; j++) {
-                item = items[j];
-                if (item.rendered && (cn.id == item.el.id || cn.down('#' + item.el.id))) {
-                    break;
-                }
-            }
-
-            if (j === ln) {
-                domLn++;
-            }
+        if (Ext.isString(property)) {
+            filters.push(Ext.create('Ext.util.Filter', {
+                property     : property,
+                value        : value,
+                anyMatch     : anyMatch,
+                caseSensitive: caseSensitive
+            }));
+        } else if (Ext.isArray(property) || property instanceof Ext.util.Filter) {
+            filters = filters.concat(property);
         }
 
         
-        for (i = 0, j = 0; i < ln; i++, j++) {
-            item = items[i];
+        
+        filterFn = function(record) {
+            var isMatch = true,
+                length = filters.length,
+                i;
 
-            
-            
-            
-            
-            
-            
-            
-            
-            if (i === j && (item.dock === 'right' || item.dock === 'bottom')) {
-                j += domLn;
-            }
+            for (i = 0; i < length; i++) {
+                var filter = filters[i],
+                    fn     = filter.filterFn,
+                    scope  = filter.scope;
 
-            
-            if (item && !item.rendered) {
-                this.renderItem(item, target, j);
-            }
-            else if (!this.isValidParent(item, target, j)) {
-                this.moveItem(item, target, j);
+                isMatch = isMatch && fn.call(scope, record);
             }
-        }
+
+            return isMatch;
+        };
+
+        return this.filterBy(filterFn);
     },
 
     
-    setBodyBox : function(box) {
+    filterBy : function(fn, scope) {
         var me = this,
-            owner = me.owner,
-            body = owner.body,
-            info = me.info,
-            bodyMargin = info.bodyMargin,
-            padding = info.padding,
-            border = info.border,
-            frameSize = me.frameSize;
-        
-        
-        if (owner.collapsed) {
-            return;
-        }
-        
-        if (Ext.isNumber(box.width)) {
-            box.width -= bodyMargin.left + bodyMargin.right;
-        }
-        
-        if (Ext.isNumber(box.height)) {
-            box.height -= bodyMargin.top + bodyMargin.bottom;
-        }
-        
-        me.setElementSize(body, box.width, box.height);
-        if (Ext.isNumber(box.x)) {
-            body.setLeft(box.x - padding.left - frameSize.left);
+            newMC  = new this.self(),
+            keys   = me.keys,
+            items  = me.items,
+            length = items.length,
+            i;
+
+        newMC.getKey = me.getKey;
+
+        for (i = 0; i < length; i++) {
+            if (fn.call(scope || me, items[i], keys[i])) {
+                newMC.add(keys[i], items[i]);
+            }
         }
-        if (Ext.isNumber(box.y)) {
-            body.setTop(box.y - padding.top - frameSize.top);
+
+        return newMC;
+    },
+
+    
+    findIndex : function(property, value, start, anyMatch, caseSensitive){
+        if(Ext.isEmpty(value, false)){
+            return -1;
         }
+        value = this.createValueMatcher(value, anyMatch, caseSensitive);
+        return this.findIndexBy(function(o){
+            return o && value.test(o[property]);
+        }, null, start);
     },
 
     
-    configureItem : function(item, pos) {
-        this.callParent(arguments);
-        if (item.dock == 'top' || item.dock == 'bottom') {
-            item.layoutManagedWidth = 1;
-            item.layoutManagedHeight = 2;
-        } else {
-            item.layoutManagedWidth = 2;
-            item.layoutManagedHeight = 1;
+    findIndexBy : function(fn, scope, start){
+        var me = this,
+            keys = me.keys,
+            items = me.items,
+            i = start || 0,
+            len = items.length;
+
+        for (; i < len; i++) {
+            if (fn.call(scope || me, items[i], keys[i])) {
+                return i;
+            }
         }
-        
-        item.addCls(Ext.baseCSSPrefix + 'docked');
-        item.addClsWithUI('docked-' + item.dock);
+        return -1;
     },
 
-    afterRemove : function(item) {
-        this.callParent(arguments);
-        if (this.itemCls) {
-            item.el.removeCls(this.itemCls + '-' + item.dock);
+    
+    createValueMatcher : function(value, anyMatch, caseSensitive, exactMatch) {
+        if (!value.exec) { 
+            var er = Ext.String.escapeRegex;
+            value = String(value);
+
+            if (anyMatch === true) {
+                value = er(value);
+            } else {
+                value = '^' + er(value);
+                if (exactMatch === true) {
+                    value += '$';
+                }
+            }
+            value = new RegExp(value, caseSensitive ? '' : 'i');
         }
-        var dom = item.el.dom;
+        return value;
+    },
 
-        if (!item.destroying && dom) {
-            dom.parentNode.removeChild(dom);
+    
+    clone : function() {
+        var me = this,
+            copy = new this.self(),
+            keys = me.keys,
+            items = me.items,
+            i = 0,
+            len = items.length;
+
+        for(; i < len; i++){
+            copy.add(keys[i], items[i]);
         }
-        this.childrenChanged = true;
+        copy.getKey = me.getKey;
+        return copy;
     }
 });
 
-Ext.define('Ext.util.Memento', function () {
 
-    function captureOne (src, target, prop) {
-        src[prop] = target[prop];
-    }
+Ext.define("Ext.util.Sortable", {
+    
+    isSortable: true,
 
-    function removeOne (src, target, prop) {
-        delete src[prop];
-    }
+    
+    defaultSortDirection: "ASC",
 
-    function restoreOne (src, target, prop) {
-        var value = src[prop];
-        if (value || src.hasOwnProperty(prop)) {
-            restoreValue(target, prop, value);
+    requires: [
+        'Ext.util.Sorter'
+    ],
+
+    
+
+    
+    initSortable: function() {
+        var me = this,
+            sorters = me.sorters;
+
+        
+        me.sorters = Ext.create('Ext.util.AbstractMixedCollection', false, function(item) {
+            return item.id || item.property;
+        });
+
+        if (sorters) {
+            me.sorters.addAll(me.decodeSorters(sorters));
         }
-    }
+    },
 
-    function restoreValue (target, prop, value) {
-        if (Ext.isDefined(value)) {
-            target[prop] = value;
-        } else {
-            delete target[prop];
+    
+    sort: function(sorters, direction, where, doSort) {
+        var me = this,
+            sorter, sorterFn,
+            newSorters;
+
+        if (Ext.isArray(sorters)) {
+            doSort = where;
+            where = direction;
+            newSorters = sorters;
         }
-    }
+        else if (Ext.isObject(sorters)) {
+            doSort = where;
+            where = direction;
+            newSorters = [sorters];
+        }
+        else if (Ext.isString(sorters)) {
+            sorter = me.sorters.get(sorters);
 
-    function doMany (doOne, src, target, props) {
-        if (src) {
-            if (Ext.isArray(props)) {
-                Ext.each(props, function (prop) {
-                    doOne(src, target, prop);
-                });
-            } else {
-                doOne(src, target, props);
+            if (!sorter) {
+                sorter = {
+                    property : sorters,
+                    direction: direction
+                };
+                newSorters = [sorter];
+            }
+            else if (direction === undefined) {
+                sorter.toggle();
+            }
+            else {
+                sorter.setDirection(direction);
             }
         }
-    }
 
-    return {
-        
-        data: null,
-
-        
-        target: null,
+        if (newSorters && newSorters.length) {
+            newSorters = me.decodeSorters(newSorters);
+            if (Ext.isString(where)) {
+                if (where === 'prepend') {
+                    sorters = me.sorters.clone().items;
 
-        
-        constructor: function (target, props) {
-            if (target) {
-                this.target = target;
-                if (props) {
-                    this.capture(props);
+                    me.sorters.clear();
+                    me.sorters.addAll(newSorters);
+                    me.sorters.addAll(sorters);
+                }
+                else {
+                    me.sorters.addAll(newSorters);
                 }
             }
-        },
+            else {
+                me.sorters.clear();
+                me.sorters.addAll(newSorters);
+            }
+        }
 
-        
-        capture: function (props, target) {
-            doMany(captureOne, this.data || (this.data = {}), target || this.target, props);
-        },
+        if (doSort !== false) {
+            me.onBeforeSort(newSorters);
+            
+            sorters = me.sorters.items;
+            if (sorters.length) {
+                
+                sorterFn = function(r1, r2) {
+                    var result = sorters[0].sort(r1, r2),
+                        length = sorters.length,
+                        i;
 
-        
-        remove: function (props) {
-            doMany(removeOne, this.data, null, props);
-        },
+                        
+                        for (i = 1; i < length; i++) {
+                            result = result || sorters[i].sort.call(this, r1, r2);
+                        }
 
-        
-        restore: function (props, clear, target) {
-            doMany(restoreOne, this.data, target || this.target, props);
-            if (clear !== false) {
-                this.remove(props);
+                    return result;
+                };
+
+                me.doSort(sorterFn);
             }
-        },
+        }
 
-        
-        restoreAll: function (clear, target) {
-            var me = this,
-                t = target || this.target;
+        return sorters;
+    },
 
-            Ext.Object.each(me.data, function (prop, value) {
-                restoreValue(t, prop, value);
-            });
+    onBeforeSort: Ext.emptyFn,
 
-            if (clear !== false) {
-                delete me.data;
+    
+    decodeSorters: function(sorters) {
+        if (!Ext.isArray(sorters)) {
+            if (sorters === undefined) {
+                sorters = [];
+            } else {
+                sorters = [sorters];
             }
         }
-    };
-}());
 
+        var length = sorters.length,
+            Sorter = Ext.util.Sorter,
+            fields = this.model ? this.model.prototype.fields : null,
+            field,
+            config, i;
 
-Ext.define('Ext.app.EventBus', {
-    requires: [
-        'Ext.util.Event'
-    ],
-    mixins: {
-        observable: 'Ext.util.Observable'
-    },
-    
-    constructor: function() {
-        this.mixins.observable.constructor.call(this);
-        
-        this.bus = {};
-        
-        var me = this;
-        Ext.override(Ext.Component, {
-            fireEvent: function(ev) {
-                if (Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false) {
-                    return me.dispatch.call(me, ev, this, arguments);
+        for (i = 0; i < length; i++) {
+            config = sorters[i];
+
+            if (!(config instanceof Sorter)) {
+                if (Ext.isString(config)) {
+                    config = {
+                        property: config
+                    };
+                }
+
+                Ext.applyIf(config, {
+                    root     : this.sortRoot,
+                    direction: "ASC"
+                });
+
+                
+                if (config.fn) {
+                    config.sorterFn = config.fn;
+                }
+
+                
+                if (typeof config == 'function') {
+                    config = {
+                        sorterFn: config
+                    };
                 }
-                return false;
-            }
-        });
-    },
 
-    dispatch: function(ev, target, args) {
-        var bus = this.bus,
-            selectors = bus[ev],
-            selector, controllers, id, events, event, i, ln;
-        
-        if (selectors) {
-            
-            for (selector in selectors) {
                 
-                if (target.is(selector)) {
-                    
-                    controllers = selectors[selector];
-                    for (id in controllers) {
-                        
-                        events = controllers[id];
-                        for (i = 0, ln = events.length; i < ln; i++) {
-                            event = events[i];
-                            
-                            if (event.fire.apply(event, Array.prototype.slice.call(args, 1)) === false) {
-                                return false;
-                            };
-                        }
-                    }
+                if (fields && !config.transform) {
+                    field = fields.get(config.property);
+                    config.transform = field ? field.sortType : undefined;
                 }
+                sorters[i] = Ext.create('Ext.util.Sorter', config);
             }
         }
+
+        return sorters;
     },
-    
-    control: function(selectors, listeners, controller) {
-        var bus = this.bus,
-            selector, fn;
-        
-        if (Ext.isString(selectors)) {
-            selector = selectors;
-            selectors = {};
-            selectors[selector] = listeners;
-            this.control(selectors, null, controller);
-            return;
-        }
-    
-        Ext.Object.each(selectors, function(selector, listeners) {
-            Ext.Object.each(listeners, function(ev, listener) {
-                var options = {},   
-                    scope = controller,
-                    event = Ext.create('Ext.util.Event', controller, ev);
-                
-                
-                if (Ext.isObject(listener)) {
-                    options = listener;
-                    listener = options.fn;
-                    scope = options.scope || controller;
-                    delete options.fn;
-                    delete options.scope;
-                }
-                
-                event.addListener(listener, scope, options);
 
-                
-                bus[ev] = bus[ev] || {};
-                bus[ev][selector] = bus[ev][selector] || {};
-                bus[ev][selector][controller.id] = bus[ev][selector][controller.id] || [];            
-                
-                
-                bus[ev][selector][controller.id].push(event);
-            });
-        });
+    getSorters: function() {
+        return this.sorters.items;
     }
 });
 
-Ext.define('Ext.data.Types', {
-    singleton: true,
-    requires: ['Ext.data.SortTypes']
-}, function() {
-    var st = Ext.data.SortTypes;
+Ext.define('Ext.util.MixedCollection', {
+    extend: 'Ext.util.AbstractMixedCollection',
+    mixins: {
+        sortable: 'Ext.util.Sortable'
+    },
+
     
-    Ext.apply(Ext.data.Types, {
-        
-        stripRe: /[\$,%]/g,
-        
-        
-        AUTO: {
-            convert: function(v) {
-                return v;
-            },
-            sortType: st.none,
-            type: 'auto'
-        },
+    constructor: function() {
+        var me = this;
+        me.callParent(arguments);
+        me.addEvents('sort');
+        me.mixins.sortable.initSortable.call(me);
+    },
 
-        
-        STRING: {
-            convert: function(v) {
-                var defaultValue = this.useNull ? null : '';
-                return (v === undefined || v === null) ? defaultValue : String(v);
-            },
-            sortType: st.asUCString,
-            type: 'string'
-        },
+    doSort: function(sorterFn) {
+        this.sortBy(sorterFn);
+    },
+
+    
+    _sort : function(property, dir, fn){
+        var me = this,
+            i, len,
+            dsc   = String(dir).toUpperCase() == 'DESC' ? -1 : 1,
+
+            
+            c     = [],
+            keys  = me.keys,
+            items = me.items;
 
         
-        INT: {
-            convert: function(v) {
-                return v !== undefined && v !== null && v !== '' ?
-                    parseInt(String(v).replace(Ext.data.Types.stripRe, ''), 10) : (this.useNull ? null : 0);
-            },
-            sortType: st.none,
-            type: 'int'
-        },
-        
-        
-        FLOAT: {
-            convert: function(v) {
-                return v !== undefined && v !== null && v !== '' ?
-                    parseFloat(String(v).replace(Ext.data.Types.stripRe, ''), 10) : (this.useNull ? null : 0);
-            },
-            sortType: st.none,
-            type: 'float'
-        },
-        
+        fn = fn || function(a, b) {
+            return a - b;
+        };
+
         
-        BOOL: {
-            convert: function(v) {
-                if (this.useNull && v === undefined || v === null || v === '') {
-                    return null;
-                }
-                return v === true || v === 'true' || v == 1;
-            },
-            sortType: st.none,
-            type: 'bool'
-        },
+        for(i = 0, len = items.length; i < len; i++){
+            c[c.length] = {
+                key  : keys[i],
+                value: items[i],
+                index: i
+            };
+        }
+
         
+        Ext.Array.sort(c, function(a, b){
+            var v = fn(a[property], b[property]) * dsc;
+            if(v === 0){
+                v = (a.index < b.index ? -1 : 1);
+            }
+            return v;
+        });
+
         
-        DATE: {
-            convert: function(v) {
-                var df = this.dateFormat;
-                if (!v) {
-                    return null;
-                }
-                if (Ext.isDate(v)) {
-                    return v;
-                }
-                if (df) {
-                    if (df == 'timestamp') {
-                        return new Date(v*1000);
-                    }
-                    if (df == 'time') {
-                        return new Date(parseInt(v, 10));
-                    }
-                    return Ext.Date.parse(v, df);
-                }
-                
-                var parsed = Date.parse(v);
-                return parsed ? new Date(parsed) : null;
-            },
-            sortType: st.asDate,
-            type: 'date'
+        for(i = 0, len = c.length; i < len; i++){
+            items[i] = c[i].value;
+            keys[i]  = c[i].key;
         }
-    });
+
+        me.fireEvent('sort', me);
+    },
+
     
-    Ext.apply(Ext.data.Types, {
-        
-        BOOLEAN: this.BOOL,
-        
+    sortBy: function(sorterFn) {
+        var me     = this,
+            items  = me.items,
+            keys   = me.keys,
+            length = items.length,
+            temp   = [],
+            i;
+
         
-        INTEGER: this.INT,
+        for (i = 0; i < length; i++) {
+            temp[i] = {
+                key  : keys[i],
+                value: items[i],
+                index: i
+            };
+        }
+
+        Ext.Array.sort(temp, function(a, b) {
+            var v = sorterFn(a.value, b.value);
+            if (v === 0) {
+                v = (a.index < b.index ? -1 : 1);
+            }
+
+            return v;
+        });
+
         
+        for (i = 0; i < length; i++) {
+            items[i] = temp[i].value;
+            keys[i]  = temp[i].key;
+        }
         
-        NUMBER: this.FLOAT    
-    });
-});
-
+        me.fireEvent('sort', me, items, keys);
+    },
 
-Ext.define('Ext.data.Field', {
-    requires: ['Ext.data.Types', 'Ext.data.SortTypes'],
-    alias: 'data.field',
     
-    constructor : function(config) {
-        if (Ext.isString(config)) {
-            config = {name: config};
-        }
-        Ext.apply(this, config);
+    reorder: function(mapping) {
+        var me = this,
+            items = me.items,
+            index = 0,
+            length = items.length,
+            order = [],
+            remaining = [],
+            oldIndex;
+
+        me.suspendEvents();
+
         
-        var types = Ext.data.Types,
-            st = this.sortType,
-            t;
+        for (oldIndex in mapping) {
+            order[mapping[oldIndex]] = items[oldIndex];
+        }
 
-        if (this.type) {
-            if (Ext.isString(this.type)) {
-                this.type = types[this.type.toUpperCase()] || types.AUTO;
+        for (index = 0; index < length; index++) {
+            if (mapping[index] == undefined) {
+                remaining.push(items[index]);
             }
-        } else {
-            this.type = types.AUTO;
         }
 
-        
-        if (Ext.isString(st)) {
-            this.sortType = Ext.data.SortTypes[st];
-        } else if(Ext.isEmpty(st)) {
-            this.sortType = this.type.sortType;
+        for (index = 0; index < length; index++) {
+            if (order[index] == undefined) {
+                order[index] = remaining.shift();
+            }
         }
 
-        if (!this.convert) {
-            this.convert = this.type.convert;
-        }
+        me.clear();
+        me.addAll(order);
+
+        me.resumeEvents();
+        me.fireEvent('sort', me);
     },
+
     
+    sortByKey : function(dir, fn){
+        this._sort('key', dir, fn || function(a, b){
+            var v1 = String(a).toUpperCase(), v2 = String(b).toUpperCase();
+            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
+        });
+    }
+});
+
+
+Ext.define('Ext.data.Errors', {
+    extend: 'Ext.util.MixedCollection',
+
     
+    isValid: function() {
+        return this.length === 0;
+    },
+
     
-    
-    
-    
-    
-    dateFormat: null,
-    
-    
-    useNull: false,
-    
-    
-    defaultValue: "",
-    
-    mapping: null,
-    
-    sortType : null,
-    
-    sortDir : "ASC",
-    
-    allowBlank : true,
-    
-    
-    persist: true
+    getByField: function(fieldName) {
+        var errors = [],
+            error, field, i;
+
+        for (i = 0; i < this.length; i++) {
+            error = this.items[i];
+
+            if (error.field == fieldName) {
+                errors.push(error);
+            }
+        }
+
+        return errors;
+    }
 });
 
 
@@ -25697,14 +25427,14 @@ Ext.define('Ext.data.reader.Json', {
     extend: 'Ext.data.reader.Reader',
     alternateClassName: 'Ext.data.JsonReader',
     alias : 'reader.json',
-    
+
     root: '',
+
     
-    
-    
+
     
     useSimpleAccessors: false,
-    
+
     
     readRecords: function(data) {
         
@@ -25719,8 +25449,9 @@ Ext.define('Ext.data.reader.Json', {
 
     
     getResponseData: function(response) {
+        var data;
         try {
-            var data = Ext.decode(response.responseText);
+            data = Ext.decode(response.responseText);
         }
         catch (ex) {
             Ext.Error.raise({
@@ -25737,7 +25468,7 @@ Ext.define('Ext.data.reader.Json', {
     
     buildExtractors : function() {
         var me = this;
-        
+
         me.callParent(arguments);
 
         if (me.root) {
@@ -25748,16 +25479,21 @@ Ext.define('Ext.data.reader.Json', {
             };
         }
     },
-    
+
     
     extractData: function(root) {
         var recordName = this.record,
             data = [],
             length, i;
-        
+
         if (recordName) {
             length = root.length;
             
+            if (!length && Ext.isObject(root)) {
+                length = 1;
+                root = [root];
+            }
+
             for (i = 0; i < length; i++) {
                 data[i] = root[i][recordName];
             }
@@ -25770,7 +25506,7 @@ Ext.define('Ext.data.reader.Json', {
     
     createAccessor: function() {
         var re = /[\[\.]/;
-        
+
         return function(expr) {
             if (Ext.isEmpty(expr)) {
                 return Ext.emptyFn;
@@ -25864,6 +25600,10 @@ Ext.define('Ext.data.proxy.Proxy', {
     
     
     
+    
+    
+    
+    
     isProxy: true,
     
     
@@ -26019,97 +25759,92 @@ Ext.define('Ext.data.proxy.Server', {
     alias : 'proxy.server',
     alternateClassName: 'Ext.data.ServerProxy',
     uses  : ['Ext.data.Request'],
+
     
-    
-    
-    
-    
-    
-    
+
     
     pageParam: 'page',
-    
+
     
     startParam: 'start',
 
     
     limitParam: 'limit',
-    
+
     
     groupParam: 'group',
-    
+
     
     sortParam: 'sort',
-    
+
     
     filterParam: 'filter',
-    
+
     
     directionParam: 'dir',
-    
+
     
     simpleSortMode: false,
-    
+
     
     noCache : true,
-    
+
     
     cacheString: "_dc",
-    
+
     
     timeout : 30000,
+
     
-    
-    
-    
+
     constructor: function(config) {
         var me = this;
-        
+
         config = config || {};
         this.addEvents(
             
             'exception'
         );
         me.callParent([config]);
-        
+
         
         me.extraParams = config.extraParams || {};
-        
+
         me.api = config.api || {};
-        
+
         
         me.nocache = me.noCache;
     },
-    
+
     
     create: function() {
         return this.doRequest.apply(this, arguments);
     },
-    
+
     read: function() {
         return this.doRequest.apply(this, arguments);
     },
-    
+
     update: function() {
         return this.doRequest.apply(this, arguments);
     },
-    
+
     destroy: function() {
         return this.doRequest.apply(this, arguments);
     },
-    
+
     
     buildRequest: function(operation) {
         var params = Ext.applyIf(operation.params || {}, this.extraParams || {}),
             request;
+
         
-        
-        params = Ext.applyIf(params, this.getParams(params, operation));
-        
+        params = Ext.applyIf(params, this.getParams(operation));
+
         if (operation.id && !params.id) {
             params.id = operation.id;
         }
-        
+
         request = Ext.create('Ext.data.Request', {
             params   : params,
             action   : operation.action,
@@ -26117,51 +25852,33 @@ Ext.define('Ext.data.proxy.Server', {
             operation: operation,
             url      : operation.url
         });
-        
+
         request.url = this.buildUrl(request);
-        
+
         
         operation.request = request;
-        
+
         return request;
     },
-    
+
     
     processResponse: function(success, operation, request, response, callback, scope){
         var me = this,
             reader,
-            result,
-            records,
-            length,
-            mc,
-            record,
-            i;
-            
+            result;
+
         if (success === true) {
             reader = me.getReader();
             result = reader.read(me.extractResponseData(response));
-            records = result.records;
-            length = records.length;
-            
+
             if (result.success !== false) {
-                mc = Ext.create('Ext.util.MixedCollection', true, function(r) {return r.getId();});
-                mc.addAll(operation.records);
-                for (i = 0; i < length; i++) {
-                    record = mc.get(records[i].getId());
-                    
-                    if (record) {
-                        record.beginEdit();
-                        record.set(record.data);
-                        record.endEdit(true);
-                    }
-                }
-                
                 
                 Ext.apply(operation, {
                     response: response,
                     resultSet: result
                 });
-                
+
+                operation.commitRecords(result.records);
                 operation.setCompleted();
                 operation.setSuccessful();
             } else {
@@ -26170,41 +25887,41 @@ Ext.define('Ext.data.proxy.Server', {
             }
         } else {
             me.setException(operation, response);
-            me.fireEvent('exception', this, response, operation);              
+            me.fireEvent('exception', this, response, operation);
         }
-            
+
         
         if (typeof callback == 'function') {
             callback.call(scope || me, operation);
         }
-            
+
         me.afterRequest(request, success);
     },
-    
+
     
     setException: function(operation, response){
         operation.setException({
             status: response.status,
             statusText: response.statusText
-        });     
+        });
     },
-    
+
     
     extractResponseData: function(response){
-        return response; 
+        return response;
     },
-    
+
     
     applyEncoding: function(value){
         return Ext.encode(value);
     },
-    
+
     
     encodeSorters: function(sorters) {
         var min = [],
             length = sorters.length,
             i = 0;
-        
+
         for (; i < length; i++) {
             min[i] = {
                 property : sorters[i].property,
@@ -26212,15 +25929,15 @@ Ext.define('Ext.data.proxy.Server', {
             };
         }
         return this.applyEncoding(min);
-        
+
     },
-    
+
     
     encodeFilters: function(filters) {
         var min = [],
             length = filters.length,
             i = 0;
-        
+
         for (; i < length; i++) {
             min[i] = {
                 property: filters[i].property,
@@ -26229,12 +25946,11 @@ Ext.define('Ext.data.proxy.Server', {
         }
         return this.applyEncoding(min);
     },
+
     
-    
-    getParams: function(params, operation) {
-        params = params || {};
-        
+    getParams: function(operation) {
         var me             = this,
+            params         = {},
             isDef          = Ext.isDefined,
             groupers       = operation.groupers,
             sorters        = operation.sorters,
@@ -26242,34 +25958,34 @@ Ext.define('Ext.data.proxy.Server', {
             page           = operation.page,
             start          = operation.start,
             limit          = operation.limit,
-            
+
             simpleSortMode = me.simpleSortMode,
-            
+
             pageParam      = me.pageParam,
             startParam     = me.startParam,
             limitParam     = me.limitParam,
             groupParam     = me.groupParam,
             sortParam      = me.sortParam,
             filterParam    = me.filterParam,
-            directionParam       = me.directionParam;
-        
+            directionParam = me.directionParam;
+
         if (pageParam && isDef(page)) {
             params[pageParam] = page;
         }
-        
+
         if (startParam && isDef(start)) {
             params[startParam] = start;
         }
-        
+
         if (limitParam && isDef(limit)) {
             params[limitParam] = limit;
         }
-        
+
         if (groupParam && groupers && groupers.length > 0) {
             
             params[groupParam] = me.encodeSorters(groupers);
         }
-        
+
         if (sortParam && sorters && sorters.length > 0) {
             if (simpleSortMode) {
                 params[sortParam] = sorters[0].property;
@@ -26277,41 +25993,41 @@ Ext.define('Ext.data.proxy.Server', {
             } else {
                 params[sortParam] = me.encodeSorters(sorters);
             }
-            
+
         }
-        
+
         if (filterParam && filters && filters.length > 0) {
             params[filterParam] = me.encodeFilters(filters);
         }
-        
+
         return params;
     },
-    
+
     
     buildUrl: function(request) {
         var me = this,
             url = me.getUrl(request);
-        
-        
+
+
         if (me.noCache) {
             url = Ext.urlAppend(url, Ext.String.format("{0}={1}", me.cacheString, Ext.Date.now()));
         }
-        
+
         return url;
     },
-    
+
     
     getUrl: function(request){
         return request.url || this.api[request.action] || this.url;
     },
-    
+
     
     doRequest: function(operation, callback, scope) {
     },
-    
+
     
     afterRequest: Ext.emptyFn,
-    
+
     onDestroy: function() {
         Ext.destroy(this.reader, this.writer);
     }
@@ -26378,13 +26094,14 @@ Ext.define('Ext.data.proxy.Ajax', {
 
 Ext.define('Ext.data.Model', {
     alternateClassName: 'Ext.data.Record',
-    
+
     mixins: {
         observable: 'Ext.util.Observable'
     },
 
     requires: [
         'Ext.ModelManager',
+        'Ext.data.IdGenerator',
         'Ext.data.Field',
         'Ext.data.Errors',
         'Ext.data.Operation',
@@ -26407,6 +26124,7 @@ Ext.define('Ext.data.Model', {
                 associations = data.associations || [],
                 belongsTo = data.belongsTo,
                 hasMany = data.hasMany,
+                idgen = data.idgen,
 
                 fieldsMixedCollection = new Ext.util.MixedCollection(false, function(field) {
                     return field.name;
@@ -26445,6 +26163,10 @@ Ext.define('Ext.data.Model', {
 
             data.fields = fieldsMixedCollection;
 
+            if (idgen) {
+                data.idgen = Ext.data.IdGenerator.get(idgen);
+            }
+
             
             
             if (belongsTo) {
@@ -26592,7 +26314,20 @@ Ext.define('Ext.data.Model', {
             return id;
         }
     },
+
     
+    idgen: {
+        isGenerator: true,
+        type: 'default',
+
+        generate: function () {
+            return null;
+        },
+        getRecId: function (rec) {
+            return rec.modelName + '-' + rec.internalId;
+        }
+    },
+
     
     editing : false,
 
@@ -26615,30 +26350,43 @@ Ext.define('Ext.data.Model', {
     defaultProxyType: 'ajax',
 
     
+    
+    
+
+    
+
+    
+    
+    
+    
+    
+
+    
 
     
     constructor: function(data, id, raw) {
         data = data || {};
-        
+
         var me = this,
             fields,
             length,
             field,
             name,
             i,
+            newId,
             isArray = Ext.isArray(data),
             newData = isArray ? {} : null; 
 
         
         me.internalId = (id || id === 0) ? id : Ext.data.Model.id(me);
-        
+
         
         me.raw = raw;
 
         Ext.applyIf(me, {
-            data: {}    
+            data: {}
         });
-        
+
         
         me.modified = {};
 
@@ -26658,7 +26406,7 @@ Ext.define('Ext.data.Model', {
             field = fields[i];
             name  = field.name;
 
-            if (isArray){ 
+            if (isArray){
                 
                 
                 newData[name] = data[i];
@@ -26669,39 +26417,47 @@ Ext.define('Ext.data.Model', {
         }
 
         me.set(newData || data);
-        
-        me.dirty = false;
-        me.modified = {};
 
         if (me.getId()) {
             me.phantom = false;
+        } else if (me.phantom) {
+            newId = me.idgen.generate();
+            if (newId !== null) {
+                me.setId(newId);
+            }
         }
 
+        
+        me.dirty = false;
+        me.modified = {};
+
         if (typeof me.init == 'function') {
             me.init();
         }
 
-        me.id = me.modelName + '-' + me.internalId;
+        me.id = me.idgen.getRecId(me);
     },
-    
+
     
     get: function(field) {
         return this[this.persistenceProperty][field];
     },
-    
+
     
     set: function(fieldName, value) {
         var me = this,
             fields = me.fields,
             modified = me.modified,
             convertFields = [],
-            field, key, i, currentValue;
+            field, key, i, currentValue, notEditing, count, length;
 
         
         if (arguments.length == 1 && Ext.isObject(fieldName)) {
+            notEditing = !me.editing;
+            count = 0;
             for (key in fieldName) {
                 if (fieldName.hasOwnProperty(key)) {
-                
+
                     
                     
                     field = fields.get(key);
@@ -26709,16 +26465,30 @@ Ext.define('Ext.data.Model', {
                         convertFields.push(key);
                         continue;
                     }
-                    
+
+                    if (!count && notEditing) {
+                        me.beginEdit();
+                    }
+                    ++count;
                     me.set(key, fieldName[key]);
                 }
             }
 
-            for (i = 0; i < convertFields.length; i++) {
-                field = convertFields[i];
-                me.set(field, fieldName[field]);
+            length = convertFields.length;
+            if (length) {
+                if (!count && notEditing) {
+                    me.beginEdit();
+                }
+                count += length;
+                for (i = 0; i < length; i++) {
+                    field = convertFields[i];
+                    me.set(field, fieldName[field]);
+                }
             }
 
+            if (notEditing && count) {
+                me.endEdit();
+            }
         } else {
             if (fields) {
                 field = fields.get(fieldName);
@@ -26729,7 +26499,7 @@ Ext.define('Ext.data.Model', {
             }
             currentValue = me.get(fieldName);
             me[me.persistenceProperty][fieldName] = value;
-            
+
             if (field && field.persist && !me.isEqual(currentValue, value)) {
                 if (me.isModified(fieldName)) {
                     if (me.isEqual(modified[fieldName], value)) {
@@ -26757,7 +26527,7 @@ Ext.define('Ext.data.Model', {
             }
         }
     },
-    
+
     
     isEqual: function(a, b){
         if (Ext.isDate(a) && Ext.isDate(b)) {
@@ -26765,7 +26535,7 @@ Ext.define('Ext.data.Model', {
         }
         return a === b;
     },
-    
+
     
     beginEdit : function(){
         var me = this;
@@ -26776,7 +26546,7 @@ Ext.define('Ext.data.Model', {
             me.modifiedSave = Ext.apply({}, me.modified);
         }
     },
-    
+
     
     cancelEdit : function(){
         var me = this;
@@ -26791,22 +26561,42 @@ Ext.define('Ext.data.Model', {
             delete me.dirtySave;
         }
     },
-    
+
     
     endEdit : function(silent){
-        var me = this;
+        var me = this,
+            didChange;
+            
         if (me.editing) {
             me.editing = false;
+            didChange = me.dirty || me.changedWhileEditing();
             delete me.modifiedSave;
             delete me.dataSave;
             delete me.dirtySave;
-            if (silent !== true && me.dirty) {
+            if (silent !== true && didChange) {
                 me.afterEdit();
             }
         }
     },
     
     
+    changedWhileEditing: function(){
+        var me = this,
+            saved = me.dataSave,
+            data = me[me.persistenceProperty],
+            key;
+            
+        for (key in data) {
+            if (data.hasOwnProperty(key)) {
+                if (!me.isEqual(data[key], saved[key])) {
+                    return true;
+                }
+            }
+        }
+        return false; 
+    },
+
+    
     getChanges : function(){
         var modified = this.modified,
             changes  = {},
@@ -26820,17 +26610,17 @@ Ext.define('Ext.data.Model', {
 
         return changes;
     },
-    
+
     
     isModified : function(fieldName) {
         return this.modified.hasOwnProperty(fieldName);
     },
-    
+
     
     setDirty : function() {
         var me = this,
             name;
-        
+
         me.dirty = true;
 
         me.fields.each(function(field) {
@@ -26841,7 +26631,7 @@ Ext.define('Ext.data.Model', {
         }, me);
     },
 
-    
+
     
     reject : function(silent) {
         var me = this,
@@ -26868,10 +26658,8 @@ Ext.define('Ext.data.Model', {
     
     commit : function(silent) {
         var me = this;
-        
-        me.dirty = false;
-        me.editing = false;
 
+        me.phantom = me.dirty = me.editing = false;
         me.modified = {};
 
         if (silent !== true) {
@@ -26882,7 +26670,7 @@ Ext.define('Ext.data.Model', {
     
     copy : function(newId) {
         var me = this;
-        
+
         return new me.self(Ext.apply({}, me[me.persistenceProperty]), newId || me.internalId);
     },
 
@@ -27026,7 +26814,7 @@ Ext.define('Ext.data.Model', {
     },
 
     
-    unjoin: function() {
+    unjoin: function(store) {
         delete this.store;
     },
 
@@ -27122,6 +26910,96 @@ Ext.define('Ext.data.Model', {
 });
 
 
+Ext.define('Ext.data.StoreManager', {
+    extend: 'Ext.util.MixedCollection',
+    alternateClassName: ['Ext.StoreMgr', 'Ext.data.StoreMgr', 'Ext.StoreManager'],
+    singleton: true,
+    uses: ['Ext.data.ArrayStore'],
+    
+    
+
+    
+    register : function() {
+        for (var i = 0, s; (s = arguments[i]); i++) {
+            this.add(s);
+        }
+    },
+
+    
+    unregister : function() {
+        for (var i = 0, s; (s = arguments[i]); i++) {
+            this.remove(this.lookup(s));
+        }
+    },
+
+    
+    lookup : function(store) {
+        
+        if (Ext.isArray(store)) {
+            var fields = ['field1'], 
+                expand = !Ext.isArray(store[0]),
+                data = store,
+                i,
+                len;
+                
+            if(expand){
+                data = [];
+                for (i = 0, len = store.length; i < len; ++i) {
+                    data.push([store[i]]);
+                }
+            } else {
+                for(i = 2, len = store[0].length; i <= len; ++i){
+                    fields.push('field' + i);
+                }
+            }
+            return Ext.create('Ext.data.ArrayStore', {
+                data  : data,
+                fields: fields,
+                autoDestroy: true,
+                autoCreated: true,
+                expanded: expand
+            });
+        }
+        
+        if (Ext.isString(store)) {
+            
+            return this.get(store);
+        } else {
+            
+            return Ext.data.AbstractStore.create(store);
+        }
+    },
+
+    
+    getKey : function(o) {
+         return o.storeId;
+    }
+}, function() {    
+    
+    Ext.regStore = function(name, config) {
+        var store;
+
+        if (Ext.isObject(name)) {
+            config = name;
+        } else {
+            config.storeId = name;
+        }
+
+        if (config instanceof Ext.data.Store) {
+            store = config;
+        } else {
+            store = Ext.create('Ext.data.Store', config);
+        }
+
+        return Ext.data.StoreManager.register(store);
+    };
+
+    
+    Ext.getStore = function(name) {
+        return Ext.data.StoreManager.lookup(name);
+    };
+});
+
 
 Ext.define('Ext.Component', {
 
@@ -27152,7 +27030,11 @@ Ext.define('Ext.Component', {
         DIRECTION_BOTTOM: 'bottom',
         DIRECTION_LEFT: 'left',
 
-        VERTICAL_DIRECTION: /^(?:top|bottom)$/
+        VERTICAL_DIRECTION_Re: /^(?:top|bottom)$/,
+
+        
+        
+        INVALID_ID_CHARS_Re: /[\.,\s]/g
     },
 
     
@@ -27172,7 +27054,7 @@ Ext.define('Ext.Component', {
 
     
 
-     
+    
 
     
 
@@ -27195,13 +27077,17 @@ Ext.define('Ext.Component', {
     
     
     
+
+    
     constructor: function(config) {
+        var me = this;
+
         config = config || {};
         if (config.initialConfig) {
 
             
             if (config.isAction) {
-                this.baseAction = config;
+                me.baseAction = config;
             }
             config = config.initialConfig;
             
@@ -27214,18 +27100,21 @@ Ext.define('Ext.Component', {
             };
         }
 
-        this.callParent([config]);
+        me.callParent([config]);
 
         
         
-        if (this.baseAction){
-            this.baseAction.addComponent(this);
+        if (me.baseAction){
+            me.baseAction.addComponent(me);
         }
     },
 
+    
     initComponent: function() {
         var me = this;
 
+        me.callParent();
+
         if (me.listeners) {
             me.on(me.listeners);
             delete me.listeners;
@@ -27242,7 +27131,7 @@ Ext.define('Ext.Component', {
         if (me.floating) {
             me.makeFloating(me.floating);
         } else {
-            me.el.setVisibilityMode(Ext.core.Element[me.hideMode.toUpperCase()]);
+            me.el.setVisibilityMode(Ext.Element[me.hideMode.toUpperCase()]);
         }
 
         if (Ext.isDefined(me.autoScroll)) {
@@ -27297,14 +27186,16 @@ Ext.define('Ext.Component', {
     },
 
     initResizable: function(resizable) {
+        var me = this;
+
         resizable = Ext.apply({
-            target: this,
+            target: me,
             dynamic: false,
-            constrainTo: this.constrainTo,
-            handles: this.resizeHandles
+            constrainTo: me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.getScopeParent()),
+            handles: me.resizeHandles
         }, resizable);
-        resizable.target = this;
-        this.resizer = Ext.create('Ext.resizer.Resizer', resizable);
+        resizable.target = me;
+        me.resizer = Ext.create('Ext.resizer.Resizer', resizable);
     },
 
     getDragEl: function() {
@@ -27314,9 +27205,9 @@ Ext.define('Ext.Component', {
     initDraggable: function() {
         var me = this,
             ddConfig = Ext.applyIf({
-                el: this.getDragEl(),
-                constrainTo: me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.dom.parentNode)
-            }, this.draggable);
+                el: me.getDragEl(),
+                constrainTo: me.constrain ? (me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.getScopeParent())) : undefined
+            }, me.draggable);
 
         
         if (me.constrain || me.constrainDelegate) {
@@ -27324,7 +27215,7 @@ Ext.define('Ext.Component', {
             ddConfig.constrainDelegate = me.constrainDelegate;
         }
 
-        this.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
+        me.dd = Ext.create('Ext.util.ComponentDragger', me, ddConfig);
     },
 
     
@@ -27392,14 +27283,16 @@ Ext.define('Ext.Component', {
         this.fireEvent('move', this, ax, ay);
     },
 
+    
     showAt: function(x, y, animate) {
-        
-        if (this.floating) {
-            this.setPosition(x, y, animate);
+        var me = this;
+
+        if (me.floating) {
+            me.setPosition(x, y, animate);
         } else {
-            this.setPagePosition(x, y, animate);
+            me.setPagePosition(x, y, animate);
         }
-        this.show();
+        me.show();
     },
 
     
@@ -27433,11 +27326,12 @@ Ext.define('Ext.Component', {
 
     
     getBox : function(local){
-        var pos = this.getPosition(local);
-        var s = this.getSize();
-        s.x = pos[0];
-        s.y = pos[1];
-        return s;
+        var pos = this.getPosition(local),
+            size = this.getSize();
+
+        size.x = pos[0];
+        size.y = pos[1];
+        return size;
     },
 
     
@@ -27457,22 +27351,6 @@ Ext.define('Ext.Component', {
     },
 
     
-    adjustSize: function(w, h) {
-        if (this.autoWidth) {
-            w = 'auto';
-        }
-
-        if (this.autoHeight) {
-            h = 'auto';
-        }
-
-        return {
-            width: w,
-            height: h
-        };
-    },
-
-    
     adjustPosition: function(x, y) {
 
         
@@ -27490,26 +27368,36 @@ Ext.define('Ext.Component', {
 
     
     getPosition: function(local) {
-        var el = this.el,
-            xy;
+        var me = this,
+            el = me.el,
+            xy,
+            o;
 
-        if (local === true) {
+        
+        if ((local === true) || (me.floating && !me.floatParent)) {
             return [el.getLeft(true), el.getTop(true)];
         }
-        xy = this.xy || el.getXY();
+        xy = me.xy || el.getXY();
 
         
-        if (this.floating && this.floatParent) {
-            var o = this.floatParent.getTargetEl().getViewRegion();
+        if (me.floating) {
+            o = me.floatParent.getTargetEl().getViewRegion();
             xy[0] -= o.left;
             xy[1] -= o.top;
         }
         return xy;
     },
 
-    
     getId: function() {
-        return this.id || (this.id = (this.getXType() || 'ext-comp') + '-' + this.getAutoId());
+        var me = this,
+            xtype;
+
+        if (!me.id) {
+            xtype = me.getXType();
+            xtype = xtype ? xtype.replace(Ext.Component.INVALID_ID_CHARS_Re, '-') : 'ext-comp';
+            me.id = xtype + '-' + me.getAutoId();
+        }
+        return me.id;
     },
 
     onEnable: function() {
@@ -27528,30 +27416,32 @@ Ext.define('Ext.Component', {
 
     
     show: function(animateTarget, cb, scope) {
-        if (this.rendered && this.isVisible()) {
-            if (this.toFrontOnShow && this.floating) {
-                this.toFront();
+        var me = this;
+
+        if (me.rendered && me.isVisible()) {
+            if (me.toFrontOnShow && me.floating) {
+                me.toFront();
             }
-        } else if (this.fireEvent('beforeshow', this) !== false) {
-            this.hidden = false;
+        } else if (me.fireEvent('beforeshow', me) !== false) {
+            me.hidden = false;
 
             
-            if (!this.rendered && (this.autoRender || this.floating)) {
-                this.doAutoRender();
+            if (!me.rendered && (me.autoRender || me.floating)) {
+                me.doAutoRender();
             }
-            if (this.rendered) {
-                this.beforeShow();
-                this.onShow.apply(this, arguments);
+            if (me.rendered) {
+                me.beforeShow();
+                me.onShow.apply(me, arguments);
 
                 
                 
-                if (this.ownerCt && !this.floating && !(this.ownerCt.suspendLayout || this.ownerCt.layout.layoutBusy)) {
-                    this.ownerCt.doLayout();
+                if (me.ownerCt && !me.floating && !(me.ownerCt.suspendLayout || me.ownerCt.layout.layoutBusy)) {
+                    me.ownerCt.doLayout();
                 }
-                this.afterShow.apply(this, arguments);
+                me.afterShow.apply(me, arguments);
             }
         }
-        return this;
+        return me;
     },
 
     beforeShow: Ext.emptyFn,
@@ -27561,10 +27451,10 @@ Ext.define('Ext.Component', {
         var me = this;
 
         me.el.show();
-        if (this.floating && this.constrain) {
-            this.doConstrain();
-        }
         me.callParent(arguments);
+        if (me.floating && me.constrain) {
+            me.doConstrain();
+        }
     },
 
     afterShow: function(animateTarget, cb, scope) {
@@ -27585,14 +27475,13 @@ Ext.define('Ext.Component', {
             animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget);
             toBox = me.el.getBox();
             fromBox = animateTarget.getBox();
-            fromBox.width += 'px';
-            fromBox.height += 'px';
-            toBox.width += 'px';
-            toBox.height += 'px';
             me.el.addCls(Ext.baseCSSPrefix + 'hide-offsets');
             ghostPanel = me.ghost();
             ghostPanel.el.stopAnimation();
 
+            
+            ghostPanel.el.setX(-10000);
+
             ghostPanel.el.animate({
                 from: fromBox,
                 to: toBox,
@@ -27601,43 +27490,46 @@ Ext.define('Ext.Component', {
                         delete ghostPanel.componentLayout.lastComponentSize;
                         me.unghost();
                         me.el.removeCls(Ext.baseCSSPrefix + 'hide-offsets');
-                        if (me.floating) {
-                            me.toFront();
-                        }
-                        Ext.callback(cb, scope || me);
+                        me.onShowComplete(cb, scope);
                     }
                 }
             });
         }
         else {
-            if (me.floating) {
-                me.toFront();
-            }
-            Ext.callback(cb, scope || me);
+            me.onShowComplete(cb, scope);
+        }
+    },
+
+    onShowComplete: function(cb, scope) {
+        var me = this;
+        if (me.floating) {
+            me.toFront();
         }
+        Ext.callback(cb, scope || me);
         me.fireEvent('show', me);
     },
 
     
     hide: function() {
+        var me = this;
 
         
         
-        this.showOnParentShow = false;
+        me.showOnParentShow = false;
 
-        if (!(this.rendered && !this.isVisible()) && this.fireEvent('beforehide', this) !== false) {
-            this.hidden = true;
-            if (this.rendered) {
-                this.onHide.apply(this, arguments);
+        if (!(me.rendered && !me.isVisible()) && me.fireEvent('beforehide', me) !== false) {
+            me.hidden = true;
+            if (me.rendered) {
+                me.onHide.apply(me, arguments);
 
                 
                 
-                if (this.ownerCt && !this.floating && !(this.ownerCt.suspendLayout || this.ownerCt.layout.layoutBusy)) {
-                    this.ownerCt.doLayout();
+                if (me.ownerCt && !me.floating && !(me.ownerCt.suspendLayout || me.ownerCt.layout.layoutBusy)) {
+                    me.ownerCt.doLayout();
                 }
             }
         }
-        return this;
+        return me;
     },
 
     
@@ -27691,6 +27583,7 @@ Ext.define('Ext.Component', {
         if (me.rendered) {
             Ext.destroy(
                 me.proxy,
+                me.proxyWrap,
                 me.resizer
             );
             
@@ -27794,11 +27687,13 @@ Ext.define('Ext.Component', {
     
     cloneConfig: function(overrides) {
         overrides = overrides || {};
-        var id = overrides.id || Ext.id();
-        var cfg = Ext.applyIf(overrides, this.initialConfig);
+        var id = overrides.id || Ext.id(),
+            cfg = Ext.applyIf(overrides, this.initialConfig),
+            self;
+
         cfg.id = id;
 
-        var self = Ext.getClass(this);
+        self = Ext.getClass(this);
 
         
         return new self(cfg);
@@ -27841,29 +27736,89 @@ Ext.define('Ext.Component', {
     },
 
     getProxy: function() {
-        if (!this.proxy) {
-            this.proxy = this.el.createProxy(Ext.baseCSSPrefix + 'proxy-el', Ext.getBody(), true);
+        var me = this,
+            target;
+
+        if (!me.proxy) {
+            target = Ext.getBody();
+            if (Ext.scopeResetCSS) {
+                me.proxyWrap = target = Ext.getBody().createChild({
+                    cls: Ext.baseCSSPrefix + 'reset'
+                });
+            }
+            me.proxy = me.el.createProxy(Ext.baseCSSPrefix + 'proxy-el', target, true);
         }
-        return this.proxy;
+        return me.proxy;
     }
 
 });
 
 
+Ext.define('Ext.layout.container.AbstractContainer', {
+
+    
+
+    extend: 'Ext.layout.Layout',
+
+    
+
+    type: 'container',
+
+    
+    bindToOwnerCtComponent: false,
+
+    
+    bindToOwnerCtContainer: false,
+
+    
+
+    
+    setItemSize: function(item, width, height) {
+        if (Ext.isObject(width)) {
+            height = width.height;
+            width = width.width;
+        }
+        item.setCalculatedSize(width, height, this.owner);
+    },
+
+    
+    getLayoutItems: function() {
+        return this.owner && this.owner.items && this.owner.items.items || [];
+    },
+
+    
+    beforeLayout: function() {
+        return !this.owner.collapsed && this.callParent(arguments);
+    },
+
+    afterLayout: function() {
+        this.owner.afterLayout(this);
+    },
+    
+     getTarget: function() {
+         return this.owner.getTargetEl();
+     },
+    
+     getRenderTarget: function() {
+         return this.owner.getTargetEl();
+     }
+});
+
+
 Ext.define('Ext.layout.container.Container', {
 
     
 
     extend: 'Ext.layout.container.AbstractContainer',
     alternateClassName: 'Ext.layout.ContainerLayout',
-    
+
     
 
     layoutItem: function(item, box) {
-        box = box || {};
-        if (item.componentLayout.initialized !== true) {
-            this.setItemSize(item, box.width || item.width || undefined, box.height || item.height || undefined);
-            
+        if (box) {
+            item.doComponentLayout(box.width, box.height);
+        } else {
+            item.doComponentLayout();
         }
     },
 
@@ -27934,7 +27889,6 @@ Ext.define('Ext.layout.container.Container', {
     }
 });
 
-
 Ext.define('Ext.layout.container.Auto', {
 
     
@@ -27976,15 +27930,11 @@ Ext.define('Ext.layout.container.Auto', {
     },
 
     configureItem: function(item) {
+        this.callParent(arguments);
 
         
-        
-        if (this.type === 'autocontainer') {
-            item.layoutManagedHeight = 2;
-            item.layoutManagedWidth = 2;
-        }
-
-        this.callParent(arguments);
+        item.layoutManagedHeight = 2;
+        item.layoutManagedWidth = 2;
     }
 });
 
@@ -28018,11 +27968,14 @@ Ext.define('Ext.container.AbstractContainer', {
 
     isContainer : true,
 
+    
+    layoutCounter : 0,
+
     baseCls: Ext.baseCSSPrefix + 'container',
 
     
     bubbleEvents: ['add', 'remove'],
-    
+
     
     initComponent : function(){
         var me = this;
@@ -28036,11 +27989,7 @@ Ext.define('Ext.container.AbstractContainer', {
             
             'add',
             
-            'remove',
-            
-            'beforecardswitch',
-            
-            'cardswitch'
+            'remove'
         );
 
         
@@ -28072,6 +28021,20 @@ Ext.define('Ext.container.AbstractContainer', {
         this.callParent();
     },
 
+    renderChildren: function () {
+        var me = this,
+            layout = me.getLayout();
+
+        me.callParent();
+        
+
+        if (layout) {
+            me.suspendLayout = true;
+            layout.renderChildren();
+            delete me.suspendLayout;
+        }
+    },
+
     
     setLayout : function(layout) {
         var currentLayout = this.layout;
@@ -28124,6 +28087,7 @@ Ext.define('Ext.container.AbstractContainer', {
 
     
     afterLayout : function(layout) {
+        ++this.layoutCounter;
         this.fireEvent('afterlayout', this, layout);
     },
 
@@ -28159,12 +28123,8 @@ Ext.define('Ext.container.AbstractContainer', {
 
             if (Ext.isString(config)) {
                 config = Ext.ComponentManager.get(config);
-                Ext.applyIf(config, defaults);
-            } else if (!config.isComponent) {
-                Ext.applyIf(config, defaults);
-            } else {
-                Ext.applyIf(config, defaults);
             }
+            Ext.applyIf(config, defaults);
         }
 
         return config;
@@ -28217,8 +28177,8 @@ Ext.define('Ext.container.AbstractContainer', {
             me.suspendLayout = true;
             for (i = 0, ln = items.length; i < ln; i++) {
                 item = items[i];
-                
-                
+
+
                 if (index != -1) {
                     item = me.add(index + i, item);
                 } else {
@@ -28252,15 +28212,6 @@ Ext.define('Ext.container.AbstractContainer', {
         return cmp;
     },
 
-    
-    registerFloatingItem: function(cmp) {
-        var me = this;
-        if (!me.floatingItems) {
-            me.floatingItems = Ext.create('Ext.ZIndexManager', me);
-        }
-        me.floatingItems.register(cmp);
-    },
-
     onAdd : Ext.emptyFn,
     onRemove : Ext.emptyFn,
 
@@ -28285,7 +28236,7 @@ Ext.define('Ext.container.AbstractContainer', {
     
     onBeforeAdd : function(item) {
         var me = this;
-        
+
         if (item.ownerCt) {
             item.ownerCt.remove(item, false);
         }
@@ -28432,11 +28383,13 @@ Ext.define('Ext.container.AbstractContainer', {
 
     
     query : function(selector) {
+        selector = selector || '*';
         return Ext.ComponentQuery.query(selector, this);
     },
 
     
     child : function(selector) {
+        selector = selector || '';
         return this.query('> ' + selector)[0] || null;
     },
 
@@ -28470,8 +28423,8 @@ Ext.define('Ext.container.AbstractContainer', {
             }
         }
         layoutCollection.clear();
-    },    
-    
+    },
+
     //@private
 
     
@@ -28479,12 +28432,12 @@ Ext.define('Ext.container.AbstractContainer', {
         Ext.Array.each(this.query('[isFormField]'), function(item) {
             if (item.resetDisable) {
                 item.enable();
-                delete item.resetDisable;             
+                delete item.resetDisable;
             }
         });
         this.callParent();
     },
-    
+
     
     
     onDisable: function() {
@@ -28515,13 +28468,13 @@ Ext.define('Ext.container.AbstractContainer', {
         }
 
         Ext.destroy(
-            me.layout,
-            me.floatingItems
+            me.layout
         );
         me.callParent();
     }
 });
 
+
 Ext.define('Ext.container.Container', {
     extend: 'Ext.container.AbstractContainer',
     alias: 'widget.container',
@@ -28668,10 +28621,16 @@ Ext.define('Ext.menu.Manager', {
     onMouseDown: function(e) {
         var me = this,
             active = me.active,
-            lastShow = me.lastShow;
+            lastShow = me.lastShow,
+            target = e.target;
 
         if (Ext.Date.getElapsed(lastShow) > 50 && active.length > 0 && !e.getTarget('.' + Ext.baseCSSPrefix + 'menu')) {
             me.hideAll();
+            
+            
+            if (Ext.isIE && Ext.fly(target).focusable()) {
+                target.focus();
+            }
         }
     },
 
@@ -28773,6 +28732,140 @@ Ext.define('Ext.menu.Manager', {
     }
 });
 
+Ext.define('Ext.layout.component.Button', {
+
+    
+
+    alias: ['layout.button'],
+
+    extend: 'Ext.layout.component.Component',
+
+    
+
+    type: 'button',
+
+    cellClsRE: /-btn-(tl|br)\b/,
+    htmlRE: /<.*>/,
+
+    beforeLayout: function() {
+        return this.callParent(arguments) || this.lastText !== this.owner.text;
+    },
+
+    
+    onLayout: function(width, height) {
+        var me = this,
+            isNum = Ext.isNumber,
+            owner = me.owner,
+            ownerEl = owner.el,
+            btnEl = owner.btnEl,
+            btnInnerEl = owner.btnInnerEl,
+            btnIconEl = owner.btnIconEl,
+            sizeIconEl = (owner.icon || owner.iconCls) && (owner.iconAlign == "top" || owner.iconAlign == "bottom"),
+            minWidth = owner.minWidth,
+            maxWidth = owner.maxWidth,
+            ownerWidth, btnFrameWidth, metrics;
+
+        me.getTargetInfo();
+        me.callParent(arguments);
+
+        btnInnerEl.unclip();
+        me.setTargetSize(width, height);
+
+        if (!isNum(width)) {
+            
+            
+            
+            if (owner.text && (Ext.isIE6 || Ext.isIE7) && Ext.isStrict && btnEl && btnEl.getWidth() > 20) {
+                btnFrameWidth = me.btnFrameWidth;
+                metrics = Ext.util.TextMetrics.measure(btnInnerEl, owner.text);
+                ownerEl.setWidth(metrics.width + btnFrameWidth + me.adjWidth);
+                btnEl.setWidth(metrics.width + btnFrameWidth);
+                btnInnerEl.setWidth(metrics.width + btnFrameWidth);
+
+                if (sizeIconEl) {
+                    btnIconEl.setWidth(metrics.width + btnFrameWidth);
+                }
+            } else {
+                
+                ownerEl.setWidth(null);
+                btnEl.setWidth(null);
+                btnInnerEl.setWidth(null);
+                btnIconEl.setWidth(null);
+            }
+
+            
+            if (minWidth || maxWidth) {
+                ownerWidth = ownerEl.getWidth();
+                if (minWidth && (ownerWidth < minWidth)) {
+                    me.setTargetSize(minWidth, height);
+                }
+                else if (maxWidth && (ownerWidth > maxWidth)) {
+                    btnInnerEl.clip();
+                    me.setTargetSize(maxWidth, height);
+                }
+            }
+        }
+
+        this.lastText = owner.text;
+    },
+
+    setTargetSize: function(width, height) {
+        var me = this,
+            owner = me.owner,
+            isNum = Ext.isNumber,
+            btnInnerEl = owner.btnInnerEl,
+            btnWidth = (isNum(width) ? width - me.adjWidth : width),
+            btnHeight = (isNum(height) ? height - me.adjHeight : height),
+            btnFrameHeight = me.btnFrameHeight,
+            text = owner.getText(),
+            textHeight;
+
+        me.callParent(arguments);
+        me.setElementSize(owner.btnEl, btnWidth, btnHeight);
+        me.setElementSize(btnInnerEl, btnWidth, btnHeight);
+        if (btnHeight >= 0) {
+            btnInnerEl.setStyle('line-height', btnHeight - btnFrameHeight + 'px');
+        }
+
+        
+        
+        
+        
+        
+        if (text && this.htmlRE.test(text)) {
+            btnInnerEl.setStyle('line-height', 'normal');
+            textHeight = Ext.util.TextMetrics.measure(btnInnerEl, text).height;
+            btnInnerEl.setStyle('padding-top', me.btnFrameTop + Math.max(btnInnerEl.getHeight() - btnFrameHeight - textHeight, 0) / 2 + 'px');
+            me.setElementSize(btnInnerEl, btnWidth, btnHeight);
+        }
+    },
+
+    getTargetInfo: function() {
+        var me = this,
+            owner = me.owner,
+            ownerEl = owner.el,
+            frameSize = me.frameSize,
+            frameBody = owner.frameBody,
+            btnWrap = owner.btnWrap,
+            innerEl = owner.btnInnerEl;
+
+        if (!('adjWidth' in me)) {
+            Ext.apply(me, {
+                
+                adjWidth: frameSize.left + frameSize.right + ownerEl.getBorderWidth('lr') + ownerEl.getPadding('lr') +
+                          btnWrap.getPadding('lr') + (frameBody ? frameBody.getFrameWidth('lr') : 0),
+                adjHeight: frameSize.top + frameSize.bottom + ownerEl.getBorderWidth('tb') + ownerEl.getPadding('tb') +
+                           btnWrap.getPadding('tb') + (frameBody ? frameBody.getFrameWidth('tb') : 0),
+                btnFrameWidth: innerEl.getFrameWidth('lr'),
+                btnFrameHeight: innerEl.getFrameWidth('tb'),
+                btnFrameTop: innerEl.getFrameWidth('t')
+            });
+        }
+
+        return me.callParent();
+    }
+});
+
 Ext.define('Ext.button.Button', {
 
     
@@ -28837,6 +28930,9 @@ Ext.define('Ext.button.Button', {
     menuAlign: 'tl-bl?',
 
     
+    textAlign: 'center',
+
+    
 
     
 
@@ -28845,7 +28941,7 @@ Ext.define('Ext.button.Button', {
 
     
     clickEvent: 'click',
-    
+
     
     preventDefault: true,
 
@@ -28860,52 +28956,54 @@ Ext.define('Ext.button.Button', {
 
     
     pressedCls: 'pressed',
-    
+
     
     overCls: 'over',
-    
+
     
     focusCls: 'focus',
-    
+
     
     menuActiveCls: 'menu-active',
+
     
+
     
-    
+
     
 
     ariaRole: 'button',
 
     
     renderTpl:
-        '<em class="{splitCls}">' +
+        '<em id="{id}-btnWrap" class="{splitCls}">' +
             '<tpl if="href">' +
-                '<a href="{href}" target="{target}"<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl> role="link">' +
-                    '<span class="{baseCls}-inner">' +
+                '<a id="{id}-btnEl" href="{href}" target="{target}"<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl> role="link">' +
+                    '<span id="{id}-btnInnerEl" class="{baseCls}-inner">' +
                         '{text}' +
                     '</span>' +
-                        '<span class="{baseCls}-icon"></span>' +
+                        '<span id="{id}-btnIconEl" class="{baseCls}-icon"></span>' +
                 '</a>' +
             '</tpl>' +
             '<tpl if="!href">' +
-                '<button type="{type}" hidefocus="true"' +
+                '<button id="{id}-btnEl" type="{type}" hidefocus="true"' +
                     
                     
                     '<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl> role="button" autocomplete="off">' +
-                    '<span class="{baseCls}-inner" style="{innerSpanStyle}">' +
+                    '<span id="{id}-btnInnerEl" class="{baseCls}-inner" style="{innerSpanStyle}">' +
                         '{text}' +
                     '</span>' +
-                    '<span class="{baseCls}-icon"></span>' +
+                    '<span id="{id}-btnIconEl" class="{baseCls}-icon {iconCls}">&#160;</span>' +
                 '</button>' +
             '</tpl>' +
         '</em>' ,
 
     
     scale: 'small',
-    
+
     
     allowedScales: ['small', 'medium', 'large'],
-    
+
     
 
     
@@ -28924,7 +29022,7 @@ Ext.define('Ext.button.Button', {
     
 
     
-     
+
     maskOnDisable: false,
 
     
@@ -29005,15 +29103,16 @@ Ext.define('Ext.button.Button', {
     
     setButtonCls: function() {
         var me = this,
-            el = me.el,
-            cls = [];
+            cls = [],
+            btnIconEl = me.btnIconEl,
+            hide = 'x-hide-display';
 
         if (me.useSetClass) {
             if (!Ext.isEmpty(me.oldCls)) {
                 me.removeClsWithUI(me.oldCls);
                 me.removeClsWithUI(me.pressedCls);
             }
-            
+
             
             if (me.iconCls || me.icon) {
                 if (me.text) {
@@ -29021,33 +29120,35 @@ Ext.define('Ext.button.Button', {
                 } else {
                     cls.push('icon');
                 }
-            } else if (me.text) {
-                cls.push('noicon');
+                if (btnIconEl) {
+                    btnIconEl.removeCls(hide);
+                }
+            } else {
+                if (me.text) {
+                    cls.push('noicon');
+                }
+                if (btnIconEl) {
+                    btnIconEl.addCls(hide);
+                }
             }
-            
+
             me.oldCls = cls;
             me.addClsWithUI(cls);
             me.addClsWithUI(me.pressed ? me.pressedCls : null);
         }
     },
-    
+
     
     onRender: function(ct, position) {
         
         var me = this,
             repeater, btn;
-            
+
         
         Ext.applyIf(me.renderData, me.getTemplateArgs());
 
-        
-        Ext.applyIf(me.renderSelectors, {
-            btnEl  : me.href ? 'a' : 'button',
-            btnWrap: 'em',
-            btnInnerEl: '.' + me.baseCls + '-inner',
-            btnIconEl: '.'+ me.baseCls + '-icon'
-        });
-        
+        me.addChildEls('btnEl', 'btnWrap', 'btnInnerEl', 'btnIconEl');
+
         if (me.scale) {
             me.ui = me.ui + '-' + me.scale;
         }
@@ -29057,7 +29158,7 @@ Ext.define('Ext.button.Button', {
 
         
         if (me.split && me.arrowTooltip) {
-            me.arrowEl.dom[me.tooltipType] = me.arrowTooltip;
+            me.arrowEl.dom.setAttribute(me.getTipAttr(), me.arrowTooltip);
         }
 
         
@@ -29082,6 +29183,10 @@ Ext.define('Ext.button.Button', {
             me.setTooltip(me.tooltip, true);
         }
 
+        if (me.textAlign) {
+            me.setTextAlign(me.textAlign);
+        }
+
         
         if (me.handleMouseEvents) {
             me.mon(btn, {
@@ -29145,6 +29250,7 @@ Ext.define('Ext.button.Button', {
             type     : me.type,
             splitCls : me.getSplitCls(),
             cls      : me.cls,
+            iconCls  : me.iconCls || '',
             text     : me.text || '&#160;',
             tabIndex : me.tabIndex,
             innerSpanStyle: innerSpanStyle
@@ -29155,7 +29261,7 @@ Ext.define('Ext.button.Button', {
     getHref: function() {
         var me = this,
             params = Ext.apply({}, me.baseParams);
-            
+
         
         params = Ext.apply(params, me.params);
         return me.href ? Ext.urlAppend(me.href, Ext.Object.toQueryString(params)) : false;
@@ -29184,14 +29290,16 @@ Ext.define('Ext.button.Button', {
     
     setIconCls: function(cls) {
         var me = this,
-            btnIconEl = me.btnIconEl;
+            btnIconEl = me.btnIconEl,
+            oldCls = me.iconCls;
+            
+        me.iconCls = cls;
         if (btnIconEl) {
             
-            btnIconEl.removeCls(me.iconCls);
+            btnIconEl.removeCls(oldCls);
             btnIconEl.addCls(cls || '');
             me.setButtonCls();
         }
-        me.iconCls = cls;
         return me;
     },
 
@@ -29210,7 +29318,7 @@ Ext.define('Ext.button.Button', {
                 tooltip));
                 me.tooltip = tooltip;
             } else {
-                me.btnEl.dom.setAttribute('data-' + this.tooltipType, tooltip);
+                me.btnEl.dom.setAttribute(me.getTipAttr(), tooltip);
             }
         } else {
             me.tooltip = tooltip;
@@ -29219,10 +29327,27 @@ Ext.define('Ext.button.Button', {
     },
 
     
+    setTextAlign: function(align) {
+        var me = this,
+            btnEl = me.btnEl;
+
+        if (btnEl) {
+            btnEl.removeCls(me.baseCls + '-' + me.textAlign);
+            btnEl.addCls(me.baseCls + '-' + align);
+        }
+        me.textAlign = align;
+        return me;
+    },
+
+    getTipAttr: function(){
+        return this.tooltipType == 'qtip' ? 'data-qtip' : 'title';
+    },
+
+    
     getRefItems: function(deep){
         var menu = this.menu,
             items;
-
+        
         if (menu) {
             items = menu.getRefItems(deep);
             items.unshift(menu);
@@ -29244,9 +29369,10 @@ Ext.define('Ext.button.Button', {
             me.clearTip();
         }
         if (me.menu && me.destroyMenu !== false) {
-            Ext.destroy(me.btnEl, me.btnInnerEl, me.menu);
+            Ext.destroy(me.menu);
         }
-        Ext.destroy(me.repeater);
+        Ext.destroy(me.btnInnerEl, me.repeater);
+        me.callParent();
     },
 
     
@@ -29256,10 +29382,8 @@ Ext.define('Ext.button.Button', {
             me.doc.un('mouseover', me.monitorMouseOver, me);
             me.doc.un('mouseup', me.onMouseUp, me);
             delete me.doc;
-            delete me.btnEl;
-            delete me.btnInnerEl;
             Ext.ButtonToggleManager.unregister(me);
-            
+
             Ext.destroy(me.keyMap);
             delete me.keyMap;
         }
@@ -29288,10 +29412,11 @@ Ext.define('Ext.button.Button', {
     
     setIcon: function(icon) {
         var me = this,
-            btnInnerEl = me.btnInnerEl;
+            iconEl = me.btnIconEl;
+            
         me.icon = icon;
-        if (btnInnerEl) {
-            btnInnerEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
+        if (iconEl) {
+            iconEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
             me.setButtonCls();
         }
         return me;
@@ -29305,7 +29430,7 @@ Ext.define('Ext.button.Button', {
     
     toggle: function(state, suppressEvent) {
         var me = this;
-        state = state === undefined ? !me.pressed: !!state;
+        state = state === undefined ? !me.pressed : !!state;
         if (state !== me.pressed) {
             if (me.rendered) {
                 me[state ? 'addClsWithUI': 'removeClsWithUI'](me.pressedCls);
@@ -29319,12 +29444,19 @@ Ext.define('Ext.button.Button', {
         }
         return me;
     },
+    
+    maybeShowMenu: function(){
+        var me = this;
+        if (me.menu && !me.hasVisibleMenu() && !me.ignoreNextClick) {
+            me.showMenu();
+        }
+    },
 
     
     showMenu: function() {
         var me = this;
         if (me.rendered && me.menu) {
-            if (me.tooltip) {
+            if (me.tooltip && me.getTipAttr() != 'title') {
                 Ext.tip.QuickTipManager.getQuickTip().cancelShow(me.btnEl);
             }
             if (me.menu.isVisible()) {
@@ -29365,17 +29497,27 @@ Ext.define('Ext.button.Button', {
             return;
         }
         if (!me.disabled) {
-            if (me.enableToggle && (me.allowDepress !== false || !me.pressed)) {
-                me.toggle();
-            }
-            if (me.menu && !me.hasVisibleMenu() && !me.ignoreNextClick) {
-                me.showMenu();
-            }
-            me.fireEvent('click', me, e);
-            if (me.handler) {
-                me.handler.call(me.scope || me, me, e);
-            }
-            me.onBlur();
+            me.doToggle();
+            me.maybeShowMenu();
+            me.fireHandler(e);
+        }
+    },
+    
+    fireHandler: function(e){
+        var me = this,
+            handler = me.handler;
+            
+        me.fireEvent('click', me, e);
+        if (handler) {
+            handler.call(me.scope || me, me, e);
+        }
+        me.onBlur();
+    },
+    
+    doToggle: function(){
+        var me = this;
+        if (me.enableToggle && (me.allowDepress !== false || !me.pressed)) {
+            me.toggle();
         }
     },
 
@@ -29431,7 +29573,7 @@ Ext.define('Ext.button.Button', {
         var me = this,
             size = me.triggerSize,
             side, sideFirstLetter, undef;
-            
+
         if (size === undef) {
             side = me.arrowAlign;
             sideFirstLetter = side.charAt(0);
@@ -29467,13 +29609,13 @@ Ext.define('Ext.button.Button', {
         delete me.overMenuTrigger;
         me.fireEvent('menutriggerout', me, me.menu, e);
     },
-    
+
     
     enable : function(silent) {
         var me = this;
 
         me.callParent(arguments);
-        
+
         me.removeClsWithUI('disabled');
 
         return me;
@@ -29482,43 +29624,44 @@ Ext.define('Ext.button.Button', {
     
     disable : function(silent) {
         var me = this;
-        
+
         me.callParent(arguments);
-        
+
         me.addClsWithUI('disabled');
+        me.removeClsWithUI(me.overCls);
 
         return me;
     },
-    
+
     
     setScale: function(scale) {
         var me = this,
             ui = me.ui.replace('-' + me.scale, '');
-        
+
         
         if (!Ext.Array.contains(me.allowedScales, scale)) {
             throw('#setScale: scale must be an allowed scale (' + me.allowedScales.join(', ') + ')');
         }
-        
+
         me.scale = scale;
         me.setUI(ui);
     },
-    
+
     
     setUI: function(ui) {
         var me = this;
-        
+
         
         if (me.scale && !ui.match(me.scale)) {
             ui = ui + '-' + me.scale;
         }
-        
+
         me.callParent([ui]);
-        
+
         
         
     },
-    
+
     
     onFocus: function(e) {
         var me = this;
@@ -29617,10 +29760,10 @@ Ext.define('Ext.button.Button', {
     }
 
 }, function() {
-    var groups = {},
-        g, i, l;
+    var groups = {};
 
     function toggleGroup(btn, state) {
+        var g, i, l;
         if (state) {
             g = groups[btn.toggleGroup];
             for (i = 0, l = g.length; i < l; i++) {
@@ -29630,6 +29773,7 @@ Ext.define('Ext.button.Button', {
             }
         }
     }
+
     
     Ext.ButtonToggleManager = {
         register: function(btn) {
@@ -29890,7 +30034,7 @@ Ext.define('Ext.layout.container.boxOverflow.Menu', {
             
             me.menuTrigger = Ext.create('Ext.button.Button', {
                 ownerCt : me.layout.owner, 
-                iconCls : Ext.baseCSSPrefix + layout.owner.getXType() + '-more-icon',
+                iconCls : me.layout.owner.menuTriggerCls,
                 ui      : layout.owner instanceof Ext.toolbar.Toolbar ? 'default-toolbar' : 'default',
                 menu    : me.menu,
                 getSplitCls: function() { return '';},
@@ -29929,7 +30073,6 @@ Ext.define('Ext.layout.container.boxOverflow.Menu', {
     }
 });
 
-
 Ext.define('Ext.util.Region', {
 
     
@@ -30215,7 +30358,7 @@ Ext.define('Ext.dd.DragDropManager', {
 
     
     alternateClassName: ['Ext.dd.DragDropMgr', 'Ext.dd.DDM'],
-    
+
     
     ids: {},
 
@@ -30431,7 +30574,7 @@ Ext.define('Ext.dd.DragDropManager', {
             
             this.handleMouseUp(e);
         }
-        
+
         this.currentTarget = e.getTarget();
         this.dragCurrent = oDD;
 
@@ -30467,7 +30610,7 @@ Ext.define('Ext.dd.DragDropManager', {
     
     handleMouseUp: function(e) {
 
-        if(Ext.tip.QuickTipManager){
+        if(Ext.tip && Ext.tip.QuickTipManager){
             Ext.tip.QuickTipManager.ddEnable();
         }
         if (! this.dragCurrent) {
@@ -30771,7 +30914,7 @@ Ext.define('Ext.dd.DragDropManager', {
         var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
 
         try {
-            pos= Ext.core.Element.getXY(el);
+            pos= Ext.Element.getXY(el);
         } catch (e) { }
 
         if (!pos) {
@@ -30891,22 +31034,25 @@ Ext.define('Ext.dd.DragDropManager', {
 
     
     ElementWrapper: function(el) {
-            
-            this.el = el || null;
-            
-            this.id = this.el && el.id;
-            
-            this.css = this.el && el.style;
-        },
+        
+        this.el = el || null;
+        
+        this.id = this.el && el.id;
+        
+        this.css = this.el && el.style;
+    },
+
+    
+    
 
     
     getPosX: function(el) {
-        return Ext.core.Element.getX(el);
+        return Ext.Element.getX(el);
     },
 
     
     getPosY: function(el) {
-        return Ext.core.Element.getY(el);
+        return Ext.Element.getY(el);
     },
 
     
@@ -30935,7 +31081,7 @@ Ext.define('Ext.dd.DragDropManager', {
             body  = doc.body,
             top   = 0,
             left  = 0;
-            
+
         if (Ext.isGecko4) {
             top  = window.scrollYOffset;
             left = window.scrollXOffset;
@@ -30946,7 +31092,7 @@ Ext.define('Ext.dd.DragDropManager', {
             } else if (body) {
                 top  = body.scrollTop;
                 left = body.scrollLeft;
-            } 
+            }
         }
         return {
             top: top,
@@ -30971,8 +31117,8 @@ Ext.define('Ext.dd.DragDropManager', {
 
     
     moveToEl: function (moveEl, targetEl) {
-        var aCoord = Ext.core.Element.getXY(targetEl);
-        Ext.core.Element.setXY(moveEl, aCoord);
+        var aCoord = Ext.Element.getXY(targetEl);
+        Ext.Element.setXY(moveEl, aCoord);
     },
 
     
@@ -31030,7 +31176,7 @@ Ext.define('Ext.layout.container.Box', {
     alias: ['layout.box'],
     extend: 'Ext.layout.container.Container',
     alternateClassName: 'Ext.layout.BoxLayout',
-    
+
     requires: [
         'Ext.layout.container.boxOverflow.None',
         'Ext.layout.container.boxOverflow.Menu',
@@ -31070,10 +31216,13 @@ Ext.define('Ext.layout.container.Box', {
     
     
     availableSpaceOffset: 0,
-    
+
     
     reserveOffset: true,
+
     
+    shrinkToFit: true,
+
     
     clearInnerCtOnLayout: false,
 
@@ -31158,7 +31307,7 @@ Ext.define('Ext.layout.container.Box', {
             availPerpendicularSize = mmax(0, perpendicularSize - paddingPerpendicular),
 
             innerCtBorderWidth = me.innerCt.getBorderWidth(me.perpendicularLT + me.perpendicularRB),
-            
+
             isStart = me.pack == 'start',
             isCenter = me.pack == 'center',
             isEnd = me.pack == 'end',
@@ -31174,16 +31323,21 @@ Ext.define('Ext.layout.container.Box', {
             minSizes = [],
             calculatedWidth,
 
-            i, child, childParallel, childPerpendicular, childMargins, childSize, minParallel, tmpObj, shortfall, 
-            tooNarrow, availableSpace, minSize, item, length, itemIndex, box, oldSize, newSize, reduction, diff, 
-            flexedBoxes, remainingSpace, remainingFlex, flexedSize, parallelMargins, calcs, offset, 
+            i, child, childParallel, childPerpendicular, childMargins, childSize, minParallel, tmpObj, shortfall,
+            tooNarrow, availableSpace, minSize, item, length, itemIndex, box, oldSize, newSize, reduction, diff,
+            flexedBoxes, remainingSpace, remainingFlex, flexedSize, parallelMargins, calcs, offset,
             perpendicularMargins, stretchSize;
 
         
         for (i = 0; i < visibleCount; i++) {
             child = visibleItems[i];
             childPerpendicular = child[perpendicularPrefix];
-            me.layoutItem(child);
+            if (!child.flex || !(me.align == 'stretch' || me.align == 'stretchmax')) {
+                if (child.componentLayout.initialized !== true) {
+                    me.layoutItem(child);
+                }
+            }
+
             childMargins = child.margins;
             parallelMargins = childMargins[me.parallelBefore] + childMargins[me.parallelAfter];
 
@@ -31219,14 +31373,20 @@ Ext.define('Ext.layout.container.Box', {
             }
 
             
-            maxSize = mmax(maxSize, childPerpendicular + childMargins[me.perpendicularLeftTop] + childMargins[me.perpendicularRightBottom]);
+            
+            maxSize = mmax(maxSize, mmax(childPerpendicular, child[perpendicularMinString]||0) + childMargins[me.perpendicularLeftTop] + childMargins[me.perpendicularRightBottom]);
 
             tmpObj[parallelPrefix] = childParallel || undefinedValue;
+            tmpObj.dirtySize = child.componentLayout.lastComponentSize ? (tmpObj[parallelPrefix] !== child.componentLayout.lastComponentSize[parallelPrefix]) : false;
             tmpObj[perpendicularPrefix] = childPerpendicular || undefinedValue;
             boxes.push(tmpObj);
         }
-        shortfall = desiredSize - parallelSize;
-        tooNarrow = minimumSize > parallelSize;
+
+        
+        if (!me.autoSize) {
+            shortfall = desiredSize - parallelSize;
+            tooNarrow = minimumSize > parallelSize;
+        }
 
         
         availableSpace = mmax(0, parallelSize - nonFlexSize - paddingParallel - (me.reserveOffset ? me.availableSpaceOffset : 0));
@@ -31254,8 +31414,7 @@ Ext.define('Ext.layout.container.Box', {
                         box = boxes[i];
                         box.dirtySize = box.dirtySize || box[parallelPrefix] != minSize;
                         box[parallelPrefix] = minSize;
-                    }
-                    else {
+                    } else if (me.shrinkToFit) {
                         minSizes.push({
                             minSize: minSize,
                             available: boxes[i][parallelPrefix] - minSize,
@@ -31286,6 +31445,7 @@ Ext.define('Ext.layout.container.Box', {
                     box[parallelPrefix] = newSize;
                     shortfall -= reduction;
                 }
+                tooNarrow = (shortfall > 0);
             }
             else {
                 remainingSpace = availableSpace;
@@ -31398,7 +31558,7 @@ Ext.define('Ext.layout.container.Box', {
             }
         };
     },
-    
+
     onRemove: function(comp){
         this.callParent(arguments);
         if (this.overflowHandler) {
@@ -31481,6 +31641,8 @@ Ext.define('Ext.layout.container.Box', {
         me.updateChildBoxes(boxes);
         me.handleTargetOverflow(targetSize);
     },
+    
+    animCallback: Ext.emptyFn,
 
     
     updateChildBoxes: function(boxes) {
@@ -31569,6 +31731,7 @@ Ext.define('Ext.layout.container.Box', {
                 
                 length -= 1;
                 if (!length) {
+                    me.animCallback(anim);
                     me.layoutBusy = false;
                     if (Ext.isFunction(animCallback)) {
                         animCallback();
@@ -31713,6 +31876,8 @@ Ext.define('Ext.layout.container.Box', {
         margins.right  += itemEl.getMargin('r');
         margins.bottom += itemEl.getMargin('b');
         margins.left   += itemEl.getMargin('l');
+        margins.height  = margins.top  + margins.bottom;
+        margins.width   = margins.left + margins.right;
         style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = '0';
 
         
@@ -31721,7 +31886,7 @@ Ext.define('Ext.layout.container.Box', {
 
     
     destroy: function() {
-        Ext.destroy(this.overflowHandler);
+        Ext.destroy(this.innerCt, this.overflowHandler);
         this.callParent(arguments);
     }
 });
@@ -31733,7 +31898,7 @@ Ext.define('Ext.layout.container.HBox', {
     alias: ['layout.hbox'],
     extend: 'Ext.layout.container.Box',
     alternateClassName: 'Ext.layout.HBoxLayout',
-    
+
     
 
     
@@ -31790,7 +31955,7 @@ Ext.define('Ext.layout.container.VBox', {
     alias: ['layout.vbox'],
     extend: 'Ext.layout.container.Box',
     alternateClassName: 'Ext.layout.VBoxLayout',
-    
+
     
 
     
@@ -32129,8 +32294,8 @@ Ext.define('Ext.FocusManager', {
                 ],
                 style: 'top: -100px; left: -100px;'
             });
-            me.focusFrame.setVisibilityMode(Ext.core.Element.DISPLAY);
-            me.focusFrameWidth = me.focusFrame.child('.' + cls + '-top').getHeight();
+            me.focusFrame.setVisibilityMode(Ext.Element.DISPLAY);
+            me.focusFrameWidth = 2;
             me.focusFrame.hide().setLeftTop(0, 0);
         }
     },
@@ -32302,10 +32467,10 @@ Ext.define('Ext.FocusManager', {
                 fl = ff.child(cls + 'left'),
                 fr = ff.child(cls + 'right');
 
-            ft.setWidth(bw - 2).setLeftTop(bl + 1, bt);
-            fb.setWidth(bw - 2).setLeftTop(bl + 1, bt + bh - fw);
-            fl.setHeight(bh - 2).setLeftTop(bl, bt + 1);
-            fr.setHeight(bh - 2).setLeftTop(bl + bw - fw, bt + 1);
+            ft.setWidth(bw).setLeftTop(bl, bt);
+            fb.setWidth(bw).setLeftTop(bl, bt + bh - fw);
+            fl.setHeight(bh - fw - fw).setLeftTop(bl, bt + fw);
+            fr.setHeight(bh - fw - fw).setLeftTop(bl + bw - fw, bt + fw);
 
             ff.show();
         }
@@ -32601,13 +32766,13 @@ Ext.define('Ext.toolbar.Toolbar', {
     ],
     alias: 'widget.toolbar',
     alternateClassName: 'Ext.Toolbar',
-    
+
     isToolbar: true,
     baseCls  : Ext.baseCSSPrefix + 'toolbar',
     ariaRole : 'toolbar',
-    
+
     defaultType: 'button',
-    
+
     
     vertical: false,
 
@@ -32615,12 +32780,15 @@ Ext.define('Ext.toolbar.Toolbar', {
 
     
     enableOverflow: false,
+
     
+    menuTriggerCls: Ext.baseCSSPrefix + 'toolbar-more-icon',
     
-    trackMenus: true,
     
+    trackMenus: true,
+
     itemCls: Ext.baseCSSPrefix + 'toolbar-item',
-    
+
     initComponent: function() {
         var me = this,
             keys;
@@ -32629,7 +32797,7 @@ Ext.define('Ext.toolbar.Toolbar', {
         if (!me.layout && me.enableOverflow) {
             me.layout = { overflowHandler: 'Menu' };
         }
-        
+
         if (me.dock === 'right' || me.dock === 'left') {
             me.vertical = true;
         }
@@ -32641,21 +32809,21 @@ Ext.define('Ext.toolbar.Toolbar', {
             align: me.vertical ? 'stretchmax' : 'middle',
             clearInnerCtOnLayout: true
         });
-        
+
         if (me.vertical) {
             me.addClsWithUI('vertical');
         }
-        
+
         
         if (me.ui === 'footer') {
             me.ignoreBorderManagement = true;
         }
-        
+
         me.callParent();
 
         
         me.addEvents('overflowchange');
-        
+
         
         keys = me.vertical ? ['up', 'down'] : ['left', 'right'];
         Ext.FocusManager.subscribe(me, {
@@ -32663,6 +32831,21 @@ Ext.define('Ext.toolbar.Toolbar', {
         });
     },
 
+    getRefItems: function(deep) {
+        var me = this,
+            items = me.callParent(arguments),
+            layout = me.layout,
+            handler;
+
+        if (deep && me.enableOverflow) {
+            handler = layout.overflowHandler;
+            if (handler && handler.menu) {
+                items = items.concat(handler.menu.getRefItems(deep));
+            }
+        }
+        return items;
+    },
+
     
 
     
@@ -32705,7 +32888,7 @@ Ext.define('Ext.toolbar.Toolbar', {
             var method = remove ? 'mun' : 'mon',
                 me = this;
 
-            me[method](item, 'menutriggerover', me.onButtonTriggerOver, me);
+            me[method](item, 'mouseover', me.onButtonOver, me);
             me[method](item, 'menushow', me.onButtonMenuShow, me);
             me[method](item, 'menuhide', me.onButtonMenuHide, me);
         }
@@ -32721,12 +32904,12 @@ Ext.define('Ext.toolbar.Toolbar', {
         if (component.is('field') || (component.is('button') && this.ui != 'footer')) {
             component.ui = component.ui + '-toolbar';
         }
-        
+
         
         if (component instanceof Ext.toolbar.Separator) {
             component.setUI((this.vertical) ? 'vertical' : 'horizontal');
         }
-        
+
         this.callParent(arguments);
     },
 
@@ -32747,7 +32930,7 @@ Ext.define('Ext.toolbar.Toolbar', {
     },
 
     
-    onButtonTriggerOver: function(btn){
+    onButtonOver: function(btn){
         if (this.activeMenuBtn && this.activeMenuBtn != btn) {
             this.activeMenuBtn.hideMenu();
             btn.showMenu();
@@ -32778,7 +32961,7 @@ Ext.define('Ext.panel.AbstractPanel', {
 
     extend: 'Ext.container.Container',
 
-    requires: ['Ext.util.MixedCollection', 'Ext.core.Element', 'Ext.toolbar.Toolbar'],
+    requires: ['Ext.util.MixedCollection', 'Ext.Element', 'Ext.toolbar.Toolbar'],
 
     
 
@@ -32800,7 +32983,13 @@ Ext.define('Ext.panel.AbstractPanel', {
     
     defaultDockWeights: { top: 1, left: 3, right: 5, bottom: 7 },
 
-    renderTpl: ['<div class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl> {baseCls}-body-{ui}<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>'],
+    renderTpl: [
+        '<div id="{id}-body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>',
+            ' {baseCls}-body-{ui}<tpl if="uiCls">',
+                '<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>',
+            '</tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
+        '</div>'
+    ],
 
     
     
@@ -32819,9 +33008,7 @@ Ext.define('Ext.panel.AbstractPanel', {
             
         );
 
-        Ext.applyIf(me.renderSelectors, {
-            body: '.' + me.baseCls + '-body'
-        });
+        me.addChildEls('body');
 
         
         
@@ -32871,7 +33058,7 @@ Ext.define('Ext.panel.AbstractPanel', {
         var me = this,
             bodyStyle = me.bodyStyle,
             styles = [],
-            Element = Ext.core.Element,
+            Element = Ext.Element,
             prop;
 
         if (Ext.isFunction(bodyStyle)) {
@@ -32991,10 +33178,9 @@ Ext.define('Ext.panel.AbstractPanel', {
 
         if (autoDestroy === true || (autoDestroy !== false && me.autoDestroy)) {
             item.destroy();
-        }
-
-        if (hasLayout && !autoDestroy) {
-            layout.afterRemove(item);
+        } else if (hasLayout) {
+            
+            layout.afterRemove(item);    
         }
 
 
@@ -33208,10 +33394,20 @@ Ext.define('Ext.panel.Header', {
     indicateDrag   : false,
     weight         : -1,
 
-    renderTpl: ['<div class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl><tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>'],
+    renderTpl: [
+        '<div id="{id}-body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>',
+        '<tpl if="uiCls">',
+            '<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>',
+        '</tpl>"',
+        '<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>'],
+
+    
+
+    
 
     initComponent: function() {
         var me = this,
+            ruleStyle,
             rule,
             style,
             titleTextEl,
@@ -33229,9 +33425,7 @@ Ext.define('Ext.panel.Header', {
         me.addClsWithUI(me.orientation);
         me.addClsWithUI(me.dock);
 
-        Ext.applyIf(me.renderSelectors, {
-            body: '.' + me.baseCls + '-body'
-        });
+        me.addChildEls('body');
 
         
         if (!Ext.isEmpty(me.iconCls)) {
@@ -33266,7 +33460,11 @@ Ext.define('Ext.panel.Header', {
             if (Ext.isArray(ui)) {
                 ui = ui[0];
             }
-            rule = Ext.util.CSS.getRule('.' + me.baseCls + '-text-' + ui);
+            ruleStyle = '.' + me.baseCls + '-text-' + ui;
+            if (Ext.scopeResetCSS) {
+                ruleStyle = '.' + Ext.baseCSSPrefix + 'reset ' + ruleStyle;
+            }
+            rule = Ext.util.CSS.getRule(ruleStyle);
             if (rule) {
                 style = rule.style;
             }
@@ -33286,6 +33484,8 @@ Ext.define('Ext.panel.Header', {
                 autoSize: true,
                 margins: '5 0 0 0',
                 items: [ me.textConfig ],
+                
+                
                 renderSelectors: {
                     textEl: '.' + me.baseCls + '-text'
                 }
@@ -33302,15 +33502,16 @@ Ext.define('Ext.panel.Header', {
                 ariaRole  : 'heading',
                 focusable: false,
                 flex : 1,
-                renderTpl : ['<span class="{cls}-text {cls}-text-{ui}">{title}</span>'],
+                cls: me.baseCls + '-text-container',
+                renderTpl : [
+                    '<span id="{id}-textEl" class="{cls}-text {cls}-text-{ui}">{title}</span>'
+                ],
                 renderData: {
                     title: me.title,
                     cls  : me.baseCls,
                     ui   : me.ui
                 },
-                renderSelectors: {
-                    textEl: '.' + me.baseCls + '-text'
-                }
+                childEls: ['textEl']
             });
         }
         me.items.push(me.titleCmp);
@@ -33323,16 +33524,16 @@ Ext.define('Ext.panel.Header', {
     initIconCmp: function() {
         this.iconCmp = Ext.create('Ext.Component', {
             focusable: false,
-            renderTpl : ['<img alt="" src="{blank}" class="{cls}-icon {iconCls}"/>'],
+            renderTpl : [
+                '<img id="{id}-iconEl" alt="" src="{blank}" class="{cls}-icon {iconCls}"/>'
+            ],
             renderData: {
                 blank  : Ext.BLANK_IMAGE_URL,
                 cls    : this.baseCls,
                 iconCls: this.iconCls,
                 orientation: this.orientation
             },
-            renderSelectors: {
-                iconEl: '.' + this.baseCls + '-icon'
-            },
+            childEls: ['iconEl'],
             iconCls: this.iconCls
         });
     },
@@ -33389,7 +33590,7 @@ Ext.define('Ext.panel.Header', {
                 me.bodyCls = classes.join(' ');
             }
         }
+
         return result;
     },
 
@@ -33538,19 +33739,20 @@ Ext.define('Ext.panel.Header', {
 
     
     setIconCls: function(cls) {
-        this.iconCls = cls;
-        if (!this.iconCmp) {
-            this.initIconCmp();
-            this.insert(0, this.iconCmp);
-        }
-        else {
-            if (!cls || !cls.length) {
-                this.iconCmp.destroy();
-            }
-            else {
-                var iconCmp = this.iconCmp,
-                    el      = iconCmp.iconEl;
-
+        var me = this,
+            isEmpty = !cls || !cls.length,
+            iconCmp = me.iconCmp,
+            el;
+        
+        me.iconCls = cls;
+        if (!me.iconCmp && !isEmpty) {
+            me.initIconCmp();
+            me.insert(0, me.iconCmp);
+        } else if (iconCmp) {
+            if (isEmpty) {
+                me.iconCmp.destroy();
+            } else {
+                el = iconCmp.iconEl;
                 el.removeCls(iconCmp.iconCls);
                 el.addCls(cls);
                 iconCmp.iconCls = cls;
@@ -35177,7 +35379,11 @@ Ext.define('Ext.draw.Draw', {
         };
     },
 
+    
     snapEnds: function (from, to, stepsMax) {
+        if (Ext.isDate(from)) {
+            return this.snapEndsByDate(from, to, stepsMax);
+        }
         var step = (to - from) / stepsMax,
             level = Math.floor(Math.log(step) / Math.LN10) + 1,
             m = Math.pow(10, level),
@@ -35215,6 +35421,90 @@ Ext.define('Ext.draw.Draw', {
         };
     },
 
+    
+    snapEndsByDate: function (from, to, stepsMax, lockEnds) {
+        var selectedStep = false, scales = [
+                [Ext.Date.MILLI, [1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500]],
+                [Ext.Date.SECOND, [1, 2, 3, 5, 10, 15, 30]],
+                [Ext.Date.MINUTE, [1, 2, 3, 5, 10, 20, 30]],
+                [Ext.Date.HOUR, [1, 2, 3, 4, 6, 12]],
+                [Ext.Date.DAY, [1, 2, 3, 7, 14]],
+                [Ext.Date.MONTH, [1, 2, 3, 4, 6]]
+            ], j, yearDiff;
+
+        
+        Ext.each(scales, function(scale, i) {
+            for (j = 0; j < scale[1].length; j++) {
+                if (to < Ext.Date.add(from, scale[0], scale[1][j] * stepsMax)) {
+                    selectedStep = [scale[0], scale[1][j]];
+                    return false;
+                }
+            }
+        });
+        if (!selectedStep) {
+            yearDiff = this.snapEnds(from.getFullYear(), to.getFullYear() + 1, stepsMax, lockEnds);
+            selectedStep = [Date.YEAR, Math.round(yearDiff.step)];
+        }
+        return this.snapEndsByDateAndStep(from, to, selectedStep, lockEnds);
+    },
+
+
+    
+    snapEndsByDateAndStep: function(from, to, step, lockEnds) {
+        var fromStat = [from.getFullYear(), from.getMonth(), from.getDate(),
+                from.getHours(), from.getMinutes(), from.getSeconds(), from.getMilliseconds()],
+            steps = 0, testFrom, testTo;
+        if (lockEnds) {
+            testFrom = from;
+        } else {
+            switch (step[0]) {
+                case Ext.Date.MILLI:
+                    testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
+                            fromStat[4], fromStat[5], Math.floor(fromStat[6] / step[1]) * step[1]);
+                    break;
+                case Ext.Date.SECOND:
+                    testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
+                            fromStat[4], Math.floor(fromStat[5] / step[1]) * step[1], 0);
+                    break;
+                case Ext.Date.MINUTE:
+                    testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
+                            Math.floor(fromStat[4] / step[1]) * step[1], 0, 0);
+                    break;
+                case Ext.Date.HOUR:
+                    testFrom = new Date(fromStat[0], fromStat[1], fromStat[2],
+                            Math.floor(fromStat[3] / step[1]) * step[1], 0, 0, 0);
+                    break;
+                case Ext.Date.DAY:
+                    testFrom = new Date(fromStat[0], fromStat[1],
+                            Math.floor(fromStat[2] - 1 / step[1]) * step[1] + 1, 0, 0, 0, 0);
+                    break;
+                case Ext.Date.MONTH:
+                    testFrom = new Date(fromStat[0], Math.floor(fromStat[1] / step[1]) * step[1], 1, 0, 0, 0, 0);
+                    break;
+                default: 
+                    testFrom = new Date(Math.floor(fromStat[0] / step[1]) * step[1], 0, 1, 0, 0, 0, 0);
+                    break;
+            }
+        }
+
+        testTo = testFrom;
+        
+        while (testTo < to) {
+            testTo = Ext.Date.add(testTo, step[0], step[1]);
+            steps++;
+        }
+
+        if (lockEnds) {
+            testTo = to;
+        }
+        return {
+            from : +testFrom,
+            to : +testTo,
+            step : (testTo - testFrom) / steps,
+            steps : steps
+        };
+    },
+
     sorter: function (a, b) {
         return a.offset - b.offset;
     },
@@ -35296,6 +35586,7 @@ Ext.define('Ext.draw.Draw', {
 });
 
 
+
 Ext.define('Ext.fx.PropertyHandler', {
 
     
@@ -35638,6 +35929,11 @@ Ext.define('Ext.fx.Anim', {
     
 
     isAnimation: true,
+
+    
+
+    
+
     
     duration: 250,
 
@@ -35692,7 +35988,9 @@ Ext.define('Ext.fx.Anim', {
 
     
     constructor: function(config) {
-        var me = this;
+        var me = this,
+            curve;
+            
         config = config || {};
         
         if (config.keyframes) {
@@ -35712,8 +36010,8 @@ Ext.define('Ext.fx.Anim', {
         if (!me.easingFn) {
             me.easingFn = String(me.easing).match(me.bezierRE);
             if (me.easingFn && me.easingFn.length == 5) {
-                var curve = me.easingFn;
-                me.easingFn = Ext.fx.cubicBezier(+curve[1], +curve[2], +curve[3], +curve[4]);
+                curve = me.easingFn;
+                me.easingFn = Ext.fx.CubicBezier.cubicBezier(+curve[1], +curve[2], +curve[3], +curve[4]);
             }
         }
         me.id = Ext.id(null, 'ext-anim-');
@@ -35870,14 +36168,14 @@ Ext.enableFx = true;
 
 Ext.define('Ext.dd.DragDrop', {
     requires: ['Ext.dd.DragDropManager'],
-    
+
     
     constructor: function(id, sGroup, config) {
         if(id) {
             this.init(id, sGroup, config);
         }
     },
-    
+
     
 
     
@@ -36046,10 +36344,10 @@ Ext.define('Ext.dd.DragDrop', {
         var b = Ext.get(this.getEl()).getBox(),
             ce = Ext.get(constrainTo),
             s = ce.getScroll(),
-            c, 
+            c,
             cd = ce.dom;
         if(cd == document.body){
-            c = { x: s.left, y: s.top, width: Ext.core.Element.getViewWidth(), height: Ext.core.Element.getViewHeight()};
+            c = { x: s.left, y: s.top, width: Ext.Element.getViewWidth(), height: Ext.Element.getViewHeight()};
         }else{
             var xy = ce.getXY();
             c = {x : xy[0], y: xy[1], width: cd.clientWidth, height: cd.clientHeight};
@@ -36172,7 +36470,7 @@ Ext.define('Ext.dd.DragDrop', {
         var dx = diffX || 0;
         var dy = diffY || 0;
 
-        var p = Ext.core.Element.getXY( el );
+        var p = Ext.Element.getXY( el );
 
         this.initPageX = p[0] - dx;
         this.initPageY = p[1] - dy;
@@ -36185,7 +36483,7 @@ Ext.define('Ext.dd.DragDrop', {
 
     
     setStartPosition: function(pos) {
-        var p = pos || Ext.core.Element.getXY( this.getEl() );
+        var p = pos || Ext.Element.getXY( this.getEl() );
         this.deltaSetXY = null;
 
         this.startPageX = p[0];
@@ -36546,7 +36844,7 @@ Ext.define('Ext.dd.DD', {
         var oCoord = this.getTargetCoord(iPageX, iPageY),
             fly = el.dom ? el : Ext.fly(el, '_dd'),
             elSize = fly.getSize(),
-            EL = Ext.core.Element,
+            EL = Ext.Element,
             vpSize;
 
         if (!this.deltaSetXY) {
@@ -36578,7 +36876,7 @@ Ext.define('Ext.dd.DD', {
             this.lastPageX = iPageX;
             this.lastPageY = iPageY;
         } else {
-            var aCoord = Ext.core.Element.getXY(this.getEl());
+            var aCoord = Ext.Element.getXY(this.getEl());
             this.lastPageX = aCoord[0];
             this.lastPageY = aCoord[1];
         }
@@ -36589,10 +36887,10 @@ Ext.define('Ext.dd.DD', {
 
         if (this.scroll) {
             
-            var clientH = Ext.core.Element.getViewHeight();
+            var clientH = Ext.Element.getViewHeight();
 
             
-            var clientW = Ext.core.Element.getViewWidth();
+            var clientW = Ext.Element.getViewWidth();
 
             
             var st = this.DDMInstance.getScrollTop();
@@ -36868,7 +37166,6 @@ Ext.define('Ext.dd.DragSource', {
     
 
     
-
     dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
     
     dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
@@ -37269,11 +37566,17 @@ Ext.define('Ext.panel.Panel', {
 
     
 
+    
+
     initComponent: function() {
         var me = this,
             cls;
 
         me.addEvents(
+
+            
+            'beforeclose',
+
             
             "beforeexpand",
 
@@ -37304,12 +37607,11 @@ Ext.define('Ext.panel.Panel', {
             me.setUI(me.ui + '-framed');
         }
 
-        me.callParent();
-
-        me.collapseDirection = me.collapseDirection || me.headerPosition || Ext.Component.DIRECTION_TOP;
-
         
         me.bridgeToolbars();
+
+        me.callParent();
+        me.collapseDirection = me.collapseDirection || me.headerPosition || Ext.Component.DIRECTION_TOP;
     },
 
     setBorder: function(border) {
@@ -37391,6 +37693,7 @@ Ext.define('Ext.panel.Panel', {
 
     bridgeToolbars: function() {
         var me = this,
+            docked = [],
             fbar,
             fbarDefaults,
             minButtonWidth = me.minButtonWidth;
@@ -37422,17 +37725,17 @@ Ext.define('Ext.panel.Panel', {
 
         
 
-    
+        
 
         
         if (me.tbar) {
-            me.addDocked(initToolbar(me.tbar, 'top'));
+            docked.push(initToolbar(me.tbar, 'top'));
             me.tbar = null;
         }
 
         
         if (me.bbar) {
-            me.addDocked(initToolbar(me.bbar, 'bottom'));
+            docked.push(initToolbar(me.bbar, 'bottom'));
             me.bbar = null;
         }
 
@@ -37460,28 +37763,37 @@ Ext.define('Ext.panel.Panel', {
                 };
             }
 
-            me.addDocked(fbar);
+            docked.push(fbar);
             me.fbar = null;
         }
 
         
         if (me.lbar) {
-            me.addDocked(initToolbar(me.lbar, 'left'));
+            docked.push(initToolbar(me.lbar, 'left'));
             me.lbar = null;
         }
 
         
         if (me.rbar) {
-            me.addDocked(initToolbar(me.rbar, 'right'));
+            docked.push(initToolbar(me.rbar, 'right'));
             me.rbar = null;
         }
+
+        if (me.dockedItems) {
+            if (!Ext.isArray(me.dockedItems)) {
+                me.dockedItems = [me.dockedItems];
+            }
+            me.dockedItems = me.dockedItems.concat(docked);
+        } else {
+            me.dockedItems = docked;
+        }
     },
 
     
     initTools: function() {
         var me = this;
 
-        me.tools = me.tools || [];
+        me.tools = me.tools ? Ext.Array.clone(me.tools) : [];
 
         
         
@@ -37552,7 +37864,12 @@ Ext.define('Ext.panel.Panel', {
 
     afterRender: function() {
         var me = this;
+
         me.callParent(arguments);
+
+        
+        
+        
         if (me.collapsed) {
             me.collapsed = false;
             me.collapse(null, false, true);
@@ -37620,13 +37937,52 @@ Ext.define('Ext.panel.Panel', {
         return this.body || this.frameBody || this.el;
     },
 
+    
+
+    
+    isVisible: function(deep){
+        var me = this;
+        if (me.collapsed && me.placeholder) {
+            return me.placeholder.isVisible(deep);
+        }
+        return me.callParent(arguments);
+    },
+
+    
+    onHide: function(){
+        var me = this;
+        if (me.collapsed && me.placeholder) {
+            me.placeholder.hide();
+        } else {
+            me.callParent(arguments);
+        }
+    },
+
+    
+    onShow: function(){
+        var me = this;
+        if (me.collapsed && me.placeholder) {
+            
+            me.hidden = true;
+            me.placeholder.show();
+        } else {
+            me.callParent(arguments);
+        }
+    },
+
     addTool: function(tool) {
-        this.tools.push(tool);
-        var header = this.header;
+        var me = this,
+            header = me.header;
+
+        if (Ext.isArray(tool)) {
+            Ext.each(tool, me.addTool, me);
+            return;
+        }
+        me.tools.push(tool);
         if (header) {
             header.addTool(tool);
         }
-        this.updateHeader();
+        me.updateHeader();
     },
 
     getOppositeDirection: function(d) {
@@ -37675,7 +38031,6 @@ Ext.define('Ext.panel.Panel', {
             reExpanderOrientation,
             reExpanderDock,
             getDimension,
-            setDimension,
             collapseDimension;
 
         if (!direction) {
@@ -37698,23 +38053,22 @@ Ext.define('Ext.panel.Panel', {
         switch (direction) {
             case c.DIRECTION_TOP:
             case c.DIRECTION_BOTTOM:
-                me.expandedSize = me.getHeight();
                 reExpanderOrientation = 'horizontal';
                 collapseDimension = 'height';
                 getDimension = 'getHeight';
-                setDimension = 'setHeight';
 
                 
                 
-                
                 for (; i < dockedItemCount; i++) {
                     comp = dockedItems[i];
                     if (comp.isVisible()) {
-                        if (comp.isHeader && (!comp.dock || comp.dock == 'top' || comp.dock == 'bottom')) {
+                        if (comp.isXType('header', true) && (!comp.dock || comp.dock == 'top' || comp.dock == 'bottom')) {
                             reExpander = comp;
                         } else {
                             me.hiddenDocked.push(comp);
                         }
+                    } else if (comp === me.reExpander) {
+                        reExpander = comp;
                     }
                 }
 
@@ -37726,15 +38080,12 @@ Ext.define('Ext.panel.Panel', {
 
             case c.DIRECTION_LEFT:
             case c.DIRECTION_RIGHT:
-                me.expandedSize = me.getWidth();
                 reExpanderOrientation = 'vertical';
                 collapseDimension = 'width';
                 getDimension = 'getWidth';
-                setDimension = 'setWidth';
 
                 
                 
-                
                 for (; i < dockedItemCount; i++) {
                     comp = dockedItems[i];
                     if (comp.isVisible()) {
@@ -37743,6 +38094,8 @@ Ext.define('Ext.panel.Panel', {
                         } else {
                             me.hiddenDocked.push(comp);
                         }
+                    } else if (comp === me.reExpander) {
+                        reExpander = comp;
                     }
                 }
 
@@ -37757,12 +38110,6 @@ Ext.define('Ext.panel.Panel', {
         }
 
         
-        
-        me.setAutoScroll(false);
-        me.suspendLayout = true;
-        me.body.setVisibilityMode(Ext.core.Element.DISPLAY);
-
-        
         if (animate && me.collapseTool) {
             me.collapseTool.disable();
         }
@@ -37774,7 +38121,8 @@ Ext.define('Ext.panel.Panel', {
         
 
         
-        if (reExpander) {
+        if (reExpander && reExpander.rendered) {
+
             
             reExpander.addClsWithUI(me.collapsedCls);
             reExpander.addClsWithUI(me.collapsedCls + '-' + reExpander.dock);
@@ -37856,13 +38204,14 @@ Ext.define('Ext.panel.Panel', {
         if (!me.collapseMemento) {
             me.collapseMemento = new Ext.util.Memento(me);
         }
-        me.collapseMemento.capture(['width', 'height', 'minWidth', 'minHeight']);
+        me.collapseMemento.capture(['width', 'height', 'minWidth', 'minHeight', 'layoutManagedHeight', 'layoutManagedWidth']);
 
         
         me.savedFlex = me.flex;
         me.minWidth = 0;
         me.minHeight = 0;
         delete me.flex;
+        me.suspendLayout = true;
 
         if (animate) {
             me.animate(anim);
@@ -37883,7 +38232,22 @@ Ext.define('Ext.panel.Panel', {
 
         me.collapseMemento.restore(['minWidth', 'minHeight']);
 
-        me.body.hide();
+        
+        
+        
+        if (Ext.Component.VERTICAL_DIRECTION_Re.test(me.expandDirection)) {
+            me.layoutManagedHeight = 2;
+            me.collapseMemento.restore('width', false);
+        } else {
+            me.layoutManagedWidth = 2;
+            me.collapseMemento.restore('height', false);
+        }
+
+        
+        
+        me.saveScrollTop = me.body.dom.scrollTop;
+        me.body.setStyle('display', 'none');
+
         for (; i < l; i++) {
             me.hiddenDocked[i].hide();
         }
@@ -37892,9 +38256,18 @@ Ext.define('Ext.panel.Panel', {
             me.reExpander.show();
         }
         me.collapsed = true;
+        me.suspendLayout = false;
 
         if (!internal) {
-            me.doComponentLayout();
+            if (me.ownerCt) {
+                
+                
+                if (animated) {
+                    me.ownerCt.layout.layout();
+                }
+            } else if (me.reExpander.temporary) {
+                me.doComponentLayout();
+            }
         }
 
         if (me.resizer) {
@@ -37902,13 +38275,6 @@ Ext.define('Ext.panel.Panel', {
         }
 
         
-        if (Ext.Component.VERTICAL_DIRECTION.test(me.expandDirection)) {
-            me.collapseMemento.restore('width');
-        } else {
-            me.collapseMemento.restore('height');
-        }
-
-        
         if (me.collapseTool) {
             me.collapseTool.setType('expand-' + me.expandDirection);
         }
@@ -37966,10 +38332,11 @@ Ext.define('Ext.panel.Panel', {
         }
 
         
-        me.collapsed = false;
+        me.body.setStyle('display', '');
+        me.body.dom.scrollTop = me.saveScrollTop;
 
         
-        me.body.show();
+        me.collapsed = false;
 
         
         me.removeClsWithUI(me.collapsedCls);
@@ -37993,7 +38360,11 @@ Ext.define('Ext.panel.Panel', {
         if ((direction == Ext.Component.DIRECTION_TOP) || (direction == Ext.Component.DIRECTION_BOTTOM)) {
 
             
-            if (me.autoHeight) {
+            
+            me.collapseMemento.restore('height', false);
+
+            
+            if (me.height === undefined) {
                 me.setCalculatedSize(me.width, null);
                 anim.to.height = me.getHeight();
 
@@ -38009,7 +38380,7 @@ Ext.define('Ext.panel.Panel', {
             }
             
             else {
-                anim.to.height = me.expandedSize;
+                anim.to.height = me.height;
             }
 
             
@@ -38021,7 +38392,11 @@ Ext.define('Ext.panel.Panel', {
         } else if ((direction == Ext.Component.DIRECTION_LEFT) || (direction == Ext.Component.DIRECTION_RIGHT)) {
 
             
-            if (me.autoWidth) {
+            
+            me.collapseMemento.restore('width', false);
+
+            
+            if (me.width === undefined) {
                 me.setCalculatedSize(null, me.height);
                 anim.to.width = me.getWidth();
 
@@ -38037,7 +38412,7 @@ Ext.define('Ext.panel.Panel', {
             }
             
             else {
-                anim.to.width = me.expandedSize;
+                anim.to.width = me.width;
             }
 
             
@@ -38067,15 +38442,6 @@ Ext.define('Ext.panel.Panel', {
     afterExpand: function(animated) {
         var me = this;
 
-        if (me.collapseMemento) {
-            
-            
-            
-            me.collapseMemento.restoreAll();
-        }
-
-        me.setAutoScroll(me.initialConfig.autoScroll);
-
         
         if (me.savedFlex) {
             me.flex = me.savedFlex;
@@ -38085,7 +38451,10 @@ Ext.define('Ext.panel.Panel', {
         }
 
         
-        delete me.suspendLayout;
+        if (me.collapseMemento) {
+            me.collapseMemento.restoreAll();
+        }
+
         if (animated && me.ownerCt) {
             
             
@@ -38131,10 +38500,10 @@ Ext.define('Ext.panel.Panel', {
     
     ghostTools : function() {
         var tools = [],
-            origTools = this.initialConfig.tools;
+            headerTools = this.header.query('tool[hidden=false]');
 
-        if (origTools) {
-            Ext.each(origTools, function(tool) {
+        if (headerTools.length) {
+            Ext.each(headerTools, function(tool) {
                 
                 
                 
@@ -38143,8 +38512,7 @@ Ext.define('Ext.panel.Panel', {
                     type: tool.type
                 });
             });
-        }
-        else {
+        } else {
             tools = [{
                 type: 'placeholder'
             }];
@@ -38156,23 +38524,19 @@ Ext.define('Ext.panel.Panel', {
     ghost: function(cls) {
         var me = this,
             ghostPanel = me.ghostPanel,
-            box = me.getBox();
+            box = me.getBox(),
+            header;
 
         if (!ghostPanel) {
             ghostPanel = Ext.create('Ext.panel.Panel', {
-                renderTo: document.body,
+                renderTo: me.floating ? me.el.dom.parentNode : document.body,
                 floating: {
                     shadow: false
                 },
                 frame: Ext.supports.CSS3BorderRadius ? me.frame : false,
-                title: me.title,
                 overlapHeader: me.overlapHeader,
                 headerPosition: me.headerPosition,
-                width: me.getWidth(),
-                height: me.getHeight(),
-                iconCls: me.iconCls,
                 baseCls: me.baseCls,
-                tools: me.ghostTools(),
                 cls: me.baseCls + '-ghost ' + (cls ||'')
             });
             me.ghostPanel = ghostPanel;
@@ -38183,6 +38547,19 @@ Ext.define('Ext.panel.Panel', {
         } else {
             ghostPanel.toFront();
         }
+        header = ghostPanel.header;
+        
+        if (header) {
+            header.suspendLayout = true;
+            Ext.Array.forEach(header.query('tool'), function(tool){
+                header.remove(tool);
+            });
+            header.suspendLayout = false;
+        }
+        ghostPanel.addTool(me.ghostTools());
+        ghostPanel.setTitle(me.title);
+        ghostPanel.setIconCls(me.iconCls);
+
         ghostPanel.el.show();
         ghostPanel.setPosition(box.x, box.y);
         ghostPanel.setSize(box.width, box.height);
@@ -38218,6 +38595,8 @@ Ext.define('Ext.panel.Panel', {
         }
         this.callParent([resizable]);
     }
+}, function(){
+    this.prototype.animCollapse = Ext.enableFx;
 });
 
 
@@ -38332,16 +38711,19 @@ Ext.define('Ext.tip.Tip', {
     ariaRole: 'tooltip',
 
     initComponent: function() {
-        this.callParent(arguments);
+        var me = this;
+
+        me.floating = Ext.apply({}, {shadow: me.shadow}, me.self.prototype.floating);
+        me.callParent(arguments);
 
         
-        this.constrain = this.constrain || this.constrainPosition;
+        me.constrain = me.constrain || me.constrainPosition;
     },
 
     
     showAt : function(xy){
         var me = this;
-        this.callParent();
+        this.callParent(arguments);
         
         if (me.isVisible()) {
             me.setPagePosition(xy[0], xy[1]);
@@ -38364,7 +38746,7 @@ Ext.define('Ext.tip.Tip', {
             el: me.getDragEl(),
             delegate: me.header.el,
             constrain: me,
-            constrainTo: me.el.dom.parentNode
+            constrainTo: me.el.getScopeParent()
         };
         
         Ext.Component.prototype.initDraggable.call(me);
@@ -38429,7 +38811,7 @@ Ext.define('Ext.tip.ToolTip', {
 
         me.callParent(arguments);
         zIndex = parseInt(me.el.getZIndex(), 10) || 0;
-        me.anchorEl.setStyle('z-index', zIndex + 1).setVisibilityMode(Ext.core.Element.DISPLAY);
+        me.anchorEl.setStyle('z-index', zIndex + 1).setVisibilityMode(Ext.Element.DISPLAY);
     },
 
     
@@ -38444,10 +38826,10 @@ Ext.define('Ext.tip.ToolTip', {
             me.mun(tg, 'mouseout', me.onTargetOut, me);
             me.mun(tg, 'mousemove', me.onMouseMove, me);
         }
-        
+
         me.target = t;
         if (t) {
-            
+
             me.mon(t, {
                 
                 
@@ -38475,7 +38857,7 @@ Ext.define('Ext.tip.ToolTip', {
                 if (!me.hidden && me.trackMouse) {
                     xy = me.getTargetXY();
                     if (me.constrainPosition) {
-                        xy = me.el.adjustForConstraints(xy, me.el.dom.parentNode);
+                        xy = me.el.adjustForConstraints(xy, me.el.getScopeParent());
                     }
                     me.setPagePosition(xy);
                 }
@@ -38500,8 +38882,8 @@ Ext.define('Ext.tip.ToolTip', {
             me.targetCounter++;
                 var offsets = me.getOffsets(),
                     xy = (me.anchorToTarget && !me.trackMouse) ? me.el.getAlignToXY(me.anchorTarget, me.getAnchorAlign()) : me.targetXY,
-                    dw = Ext.core.Element.getViewWidth() - 5,
-                    dh = Ext.core.Element.getViewHeight() - 5,
+                    dw = Ext.Element.getViewWidth() - 5,
+                    dh = Ext.Element.getViewHeight() - 5,
                     de = document.documentElement,
                     bd = document.body,
                     scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5,
@@ -38913,7 +39295,7 @@ Ext.define('Ext.tip.QuickTip', {
     
     initComponent : function(){
         var me = this;
-        
+
         me.target = me.target || Ext.getDoc();
         me.targets = me.targets || {};
         me.callParent();
@@ -38925,7 +39307,7 @@ Ext.define('Ext.tip.QuickTip', {
             i = 0,
             len = configs.length,
             target, j, targetLen;
-            
+
         for (; i < len; i++) {
             config = configs[i];
             target = config.target;
@@ -38945,12 +39327,12 @@ Ext.define('Ext.tip.QuickTip', {
     unregister : function(el){
         delete this.targets[Ext.id(el)];
     },
-    
+
     
     cancelShow: function(el){
         var me = this,
             activeTarget = me.activeTarget;
-            
+
         el = Ext.get(el).dom;
         if (me.isVisible()) {
             if (activeTarget && activeTarget.el == el) {
@@ -38960,26 +39342,31 @@ Ext.define('Ext.tip.QuickTip', {
             me.clearTimer('show');
         }
     },
+
     
     getTipCfg: function(e) {
         var t = e.getTarget(),
-            ttp, 
+            titleText = t.title,
             cfg;
-        
-        if(this.interceptTitles && t.title && Ext.isString(t.title)){
-            ttp = t.title;
-            t.qtip = ttp;
+
+        if (this.interceptTitles && titleText && Ext.isString(titleText)) {
+            t.qtip = titleText;
             t.removeAttribute("title");
             e.preventDefault();
-        } 
-        else {            
+            return {
+                text: titleText
+            };
+        }
+        else {
             cfg = this.tagConfig;
             t = e.getTarget('[' + cfg.namespace + cfg.attribute + ']');
             if (t) {
-                ttp = t.getAttribute(cfg.namespace + cfg.attribute);
+                return {
+                    target: t,
+                    text: t.getAttribute(cfg.namespace + cfg.attribute)
+                };
             }
         }
-        return ttp;
     },
 
     
@@ -38989,9 +39376,9 @@ Ext.define('Ext.tip.QuickTip', {
             elTarget,
             cfg,
             ns,
-            ttp,
+            tipConfig,
             autoHide;
-        
+
         if (me.disabled) {
             return;
         }
@@ -39004,13 +39391,13 @@ Ext.define('Ext.tip.QuickTip', {
         if(!target || target.nodeType !== 1 || target == document || target == document.body){
             return;
         }
-        
+
         if (me.activeTarget && ((target == me.activeTarget.el) || Ext.fly(me.activeTarget.el).contains(target))) {
             me.clearTimer('hide');
             me.show();
             return;
         }
-        
+
         if (target) {
             Ext.Object.each(me.targets, function(key, value) {
                 var targetEl = Ext.fly(value.target);
@@ -39033,21 +39420,28 @@ Ext.define('Ext.tip.QuickTip', {
 
         elTarget = Ext.get(target);
         cfg = me.tagConfig;
-        ns = cfg.namespace; 
-        ttp = me.getTipCfg(e);
-        
-        if (ttp) {
+        ns = cfg.namespace;
+        tipConfig = me.getTipCfg(e);
+
+        if (tipConfig) {
+
+            
+            
+            if (tipConfig.target) {
+                target = tipConfig.target;
+                elTarget = Ext.get(target);
+            }
             autoHide = elTarget.getAttribute(ns + cfg.hide);
-                 
+
             me.activeTarget = {
                 el: target,
-                text: ttp,
+                text: tipConfig.text,
                 width: +elTarget.getAttribute(ns + cfg.width) || null,
                 autoHide: autoHide != "user" && autoHide !== 'false',
                 title: elTarget.getAttribute(ns + cfg.title),
                 cls: elTarget.getAttribute(ns + cfg.cls),
                 align: elTarget.getAttribute(ns + cfg.align)
-                
+
             };
             me.anchor = elTarget.getAttribute(ns + cfg.anchor);
             if (me.anchor) {
@@ -39060,7 +39454,7 @@ Ext.define('Ext.tip.QuickTip', {
     
     onTargetOut : function(e){
         var me = this;
-        
+
         
         if (me.activeTarget && e.within(me.activeTarget.el) && !me.getTipCfg(e)) {
             return;
@@ -39076,7 +39470,7 @@ Ext.define('Ext.tip.QuickTip', {
     showAt : function(xy){
         var me = this,
             target = me.activeTarget;
-        
+
         if (target) {
             if (!me.rendered) {
                 me.render(Ext.getBody());
@@ -39101,7 +39495,7 @@ Ext.define('Ext.tip.QuickTip', {
             }
 
             me.setWidth(target.width);
-            
+
             if (me.anchor) {
                 me.constrainPosition = false;
             } else if (target.align) { 
@@ -39603,7 +39997,7 @@ Ext.define('Ext.draw.CompositeSprite', {
             mouseout: me.onMouseOut,
             click: me.onClick
         });
-        me.callParent(arguments);
+        return me.callParent(arguments);
     },
     
     
@@ -39759,21 +40153,20 @@ Ext.define('Ext.draw.CompositeSprite', {
 
 
 
-Ext.define('Ext.layout.component.Draw', {
+Ext.define('Ext.layout.component.Auto', {
 
     
 
-    alias: 'layout.draw',
+    alias: 'layout.autocomponent',
 
-    extend: 'Ext.layout.component.Auto',
+    extend: 'Ext.layout.component.Component',
 
     
 
-    type: 'draw',
+    type: 'autocomponent',
 
     onLayout : function(width, height) {
-        this.owner.surface.setSize(width, height);
-        this.callParent(arguments);
+        this.setTargetSize(width, height);
     }
 });
 
@@ -39912,6 +40305,7 @@ function() {
 
 
 Ext.define('Ext.chart.Mask', {
+    require: ['Ext.chart.MaskLayer'],
     
     constructor: function(config) {
         var me = this;
@@ -40055,12 +40449,7 @@ Ext.define('Ext.chart.Mask', {
                 width: abs(width),
                 height: abs(height)
             };
-            me.mask.updateBox({
-                x: posX - abs(width),
-                y: posY - abs(height),
-                width: abs(width),
-                height: abs(height)
-            });
+            me.mask.updateBox(me.maskSelection);
             me.mask.show();
             me.maskSprite.setAttributes({
                 hidden: true    
@@ -40101,50 +40490,46 @@ Ext.define('Ext.chart.Navigation', {
     constructor: function() {
         this.originalStore = this.store;
     },
-    
+
     
     setZoom: function(zoomConfig) {
         var me = this,
-            store = me.substore || me.store,
+            axes = me.axes,
             bbox = me.chartBBox,
-            len = store.getCount(),
-            from = (zoomConfig.x / bbox.width * len) >> 0,
-            to = Math.ceil(((zoomConfig.x + zoomConfig.width) / bbox.width * len)),
-            recFieldsLen, recFields = [], curField, json = [], obj;
-        
-        store.each(function(rec, i) {
-            if (i < from || i > to) {
-                return;
-            }
-            obj = {};
-            
-            if (!recFields.length) {
-                rec.fields.each(function(f) {
-                    recFields.push(f.name);
-                });
-                recFieldsLen = recFields.length;
-            }
-            
-            for (i = 0; i < recFieldsLen; i++) {
-                curField = recFields[i];
-                obj[curField] = rec.get(curField);
+            xScale = 1 / bbox.width,
+            yScale = 1 / bbox.height,
+            zoomer = {
+                x : zoomConfig.x * xScale,
+                y : zoomConfig.y * yScale,
+                width : zoomConfig.width * xScale,
+                height : zoomConfig.height * yScale
+            };
+        axes.each(function(axis) {
+            var ends = axis.calcEnds();
+            if (axis.position == 'bottom' || axis.position == 'top') {
+                var from = (ends.to - ends.from) * zoomer.x + ends.from,
+                    to = (ends.to - ends.from) * zoomer.width + from;
+                axis.minimum = from;
+                axis.maximum = to;
+            } else {
+                var to = (ends.to - ends.from) * (1 - zoomer.y) + ends.from,
+                    from = to - (ends.to - ends.from) * zoomer.height;
+                axis.minimum = from;
+                axis.maximum = to;
             }
-            json.push(obj);
         });
-        me.store = me.substore = Ext.create('Ext.data.JsonStore', {
-            fields: recFields,
-            data: json
-        });
-        me.redraw(true);
+        me.redraw(false);
     },
 
+    
     restoreZoom: function() {
         this.store = this.substore = this.originalStore;
         this.redraw(true);
     }
-    
+
 });
 
+
 Ext.define('Ext.chart.Shape', {
 
     
@@ -40335,13 +40720,17 @@ Ext.define('Ext.draw.Surface', {
     y: 0,
 
     
+    orderSpritesByZIndex: true,
+
+
+    
     constructor: function(config) {
         var me = this;
         config = config || {};
         Ext.apply(me, config);
 
         me.domRef = Ext.getDoc().dom;
-        
+
         me.customAttributes = {};
 
         me.addEvents(
@@ -40379,7 +40768,12 @@ Ext.define('Ext.draw.Surface', {
     renderItems: Ext.emptyFn,
 
     
-    setViewBox: Ext.emptyFn,
+    setViewBox: function (x, y, width, height) {
+        if (isFinite(x) && isFinite(y) && isFinite(width) && isFinite(height)) {
+            this.viewBox = {x: x, y: y, width: width, height: height};
+            this.applyViewBox();
+        }
+    },
 
     
     addCls: Ext.emptyFn,
@@ -40407,7 +40801,7 @@ Ext.define('Ext.draw.Surface', {
             this.add(items);
         }
     },
-    
+
     
     initBackground: function(config) {
         var me = this,
@@ -40448,7 +40842,7 @@ Ext.define('Ext.draw.Surface', {
             }
         }
     },
-    
+
     
     setSize: function(w, h) {
         if (this.background) {
@@ -40458,6 +40852,7 @@ Ext.define('Ext.draw.Surface', {
                 hidden: false
             }, true);
         }
+        this.applyViewBox();
     },
 
     
@@ -40466,7 +40861,7 @@ Ext.define('Ext.draw.Surface', {
             attrs = {},
             exclude = {},
             sattr = sprite.attr;
-        for (i in sattr) {    
+        for (i in sattr) {
             
             if (this.translateAttrs.hasOwnProperty(i)) {
                 
@@ -40541,28 +40936,45 @@ Ext.define('Ext.draw.Surface', {
             return results;
         }
         sprite = this.prepareItems(args[0], true)[0];
-        this.normalizeSpriteCollection(sprite);
+        this.insertByZIndex(sprite);
         this.onAdd(sprite);
         return sprite;
     },
 
     
-    normalizeSpriteCollection: function(sprite) {
-        var items = this.items,
+    insertByZIndex: function(sprite) {
+        var me = this,
+            sprites = me.items.items,
+            len = sprites.length,
+            ceil = Math.ceil,
             zIndex = sprite.attr.zIndex,
-            idx = items.indexOf(sprite);
+            idx = len,
+            high = idx - 1,
+            low = 0,
+            otherZIndex;
 
-        if (idx < 0 || (idx > 0 && items.getAt(idx - 1).attr.zIndex > zIndex) ||
-                (idx < items.length - 1 && items.getAt(idx + 1).attr.zIndex < zIndex)) {
-            items.removeAt(idx);
-            idx = items.findIndexBy(function(otherSprite) {
-                return otherSprite.attr.zIndex > zIndex;
-            });
-            if (idx < 0) {
-                idx = items.length;
+        if (me.orderSpritesByZIndex && len && zIndex < sprites[high].attr.zIndex) {
+            
+            while (low <= high) {
+                idx = ceil((low + high) / 2);
+                otherZIndex = sprites[idx].attr.zIndex;
+                if (otherZIndex > zIndex) {
+                    high = idx - 1;
+                }
+                else if (otherZIndex < zIndex) {
+                    low = idx + 1;
+                }
+                else {
+                    break;
+                }
+            }
+            
+            while (idx < len && sprites[idx].attr.zIndex <= zIndex) {
+                idx++;
             }
-            items.insert(idx, sprite);
         }
+
+        me.items.insert(idx, sprite);
         return idx;
     },
 
@@ -40613,6 +41025,49 @@ Ext.define('Ext.draw.Surface', {
     onDestroy: Ext.emptyFn,
 
     
+    applyViewBox: function() {
+        var me = this,
+            viewBox = me.viewBox,
+            width = me.width,
+            height = me.height,
+            viewBoxX, viewBoxY, viewBoxWidth, viewBoxHeight,
+            relativeHeight, relativeWidth, size;
+
+        if (viewBox && (width || height)) {
+            viewBoxX = viewBox.x;
+            viewBoxY = viewBox.y;
+            viewBoxWidth = viewBox.width;
+            viewBoxHeight = viewBox.height;
+            relativeHeight = height / viewBoxHeight;
+            relativeWidth = width / viewBoxWidth;
+
+            if (viewBoxWidth * relativeHeight < width) {
+                viewBoxX -= (width - viewBoxWidth * relativeHeight) / 2 / relativeHeight;
+            }
+            if (viewBoxHeight * relativeWidth < height) {
+                viewBoxY -= (height - viewBoxHeight * relativeWidth) / 2 / relativeWidth;
+            }
+
+            size = 1 / Math.min(viewBoxWidth, relativeHeight);
+
+            me.viewBoxShift = {
+                dx: -viewBoxX,
+                dy: -viewBoxY,
+                scale: size
+            };
+        }
+    },
+
+    transformToViewBox: function (x, y) {
+        if (this.viewBoxShift) {
+            var me = this, shift = me.viewBoxShift;
+            return [x * shift.scale - shift.dx, y * shift.scale - shift.dy];
+        } else {
+            return [x, y];
+        }
+    },
+
+    
     applyTransformations: function(sprite) {
             sprite.bbox.transform = 0;
             this.transform(sprite);
@@ -40787,10 +41242,10 @@ Ext.define('Ext.draw.Surface', {
         }
         return items;
     },
-    
+
     
     setText: Ext.emptyFn,
-    
+
     //@private Creates an item and appends it to the surface. Called
 
     
@@ -40808,6 +41263,25 @@ Ext.define('Ext.draw.Surface', {
     }
 });
 
+
+Ext.define('Ext.layout.component.Draw', {
+
+    
+
+    alias: 'layout.draw',
+
+    extend: 'Ext.layout.component.Auto',
+
+    
+
+    type: 'draw',
+
+    onLayout : function(width, height) {
+        this.owner.surface.setSize(width, height);
+        this.callParent(arguments);
+    }
+});
+
 Ext.define('Ext.draw.Component', {
 
     
@@ -40835,9 +41309,8 @@ Ext.define('Ext.draw.Component', {
 
     
     autoSize: false,
-    
-    
 
+    
     initComponent: function() {
         this.callParent(arguments);
 
@@ -40859,22 +41332,22 @@ Ext.define('Ext.draw.Component', {
             bbox, items, width, height, x, y;
         me.callParent(arguments);
 
-        me.createSurface();
+        if (me.createSurface() !== false) {
+            items = me.surface.items;
 
-        items = me.surface.items;
-
-        if (viewBox || autoSize) {
-            bbox = items.getBBox();
-            width = bbox.width;
-            height = bbox.height;
-            x = bbox.x;
-            y = bbox.y;
-            if (me.viewBox) {
-                me.surface.setViewBox(x, y, width, height);
-            }
-            else {
-                
-                me.autoSizeSurface();
+            if (viewBox || autoSize) {
+                bbox = items.getBBox();
+                width = bbox.width;
+                height = bbox.height;
+                x = bbox.x;
+                y = bbox.y;
+                if (me.viewBox) {
+                    me.surface.setViewBox(x, y, width, height);
+                }
+                else {
+                    
+                    me.autoSizeSurface();
+                }
             }
         }
     },
@@ -40911,8 +41384,13 @@ Ext.define('Ext.draw.Component', {
                 height: this.height,
                 renderTo: this.el
             }, this.initialConfig));
+        if (!surface) {
+            
+            return false;
+        }
         this.surface = surface;
 
+
         function refire(eventName) {
             return function(e) {
                 this.fireEvent(eventName, e);
@@ -41142,6 +41620,7 @@ Ext.define('Ext.chart.LegendItem', {
     }
 });
 
+
 Ext.define('Ext.chart.Legend', {
 
     
@@ -41197,7 +41676,7 @@ Ext.define('Ext.chart.Legend', {
         me.items = [];
         
         me.isVertical = ("left|right|float".indexOf(me.position) !== -1);
-        
+
         
         me.origX = me.x;
         me.origY = me.y;
@@ -41206,9 +41685,9 @@ Ext.define('Ext.chart.Legend', {
     
     create: function() {
         var me = this;
+        me.createBox();
         me.createItems();
         if (!me.created && me.isDisplayed()) {
-            me.createBox();
             me.created = true;
 
             
@@ -41243,8 +41722,8 @@ Ext.define('Ext.chart.Legend', {
             math = Math,
             mfloor = math.floor,
             mmax = math.max,
-            index = 0, 
-            i = 0, 
+            index = 0,
+            i = 0,
             len = items ? items.length : 0,
             x, y, spacing, item, bbox, height, width;
 
@@ -41270,7 +41749,7 @@ Ext.define('Ext.chart.Legend', {
                     bbox = item.getBBox();
 
                     
-                    width = bbox.width; 
+                    width = bbox.width;
                     height = bbox.height;
 
                     if (i + j === 0) {
@@ -41317,13 +41796,20 @@ Ext.define('Ext.chart.Legend', {
     
     createBox: function() {
         var me = this,
-            box = me.boxSprite = me.chart.surface.add(Ext.apply({
-                type: 'rect',
-                stroke: me.boxStroke,
-                "stroke-width": me.boxStrokeWidth,
-                fill: me.boxFill,
-                zIndex: me.boxZIndex
-            }, me.getBBox()));
+            box;
+
+        if (me.boxSprite) {
+            me.boxSprite.destroy();
+        }
+        
+        box = me.boxSprite = me.chart.surface.add(Ext.apply({
+            type: 'rect',
+            stroke: me.boxStroke,
+            "stroke-width": me.boxStrokeWidth,
+            fill: me.boxFill,
+            zIndex: me.boxZIndex
+        }, me.getBBox()));
+
         box.redraw();
     },
 
@@ -41343,7 +41829,7 @@ Ext.define('Ext.chart.Legend', {
             chartY = chartBBox.y + insets,
             surface = chart.surface,
             mfloor = Math.floor;
-        
+
         if (me.isDisplayed()) {
             
             switch(me.position) {
@@ -41380,6 +41866,7 @@ Ext.define('Ext.chart.Legend', {
     }
 });
 
+
 Ext.define('Ext.chart.Chart', {
 
     
@@ -41425,10 +41912,17 @@ Ext.define('Ext.chart.Chart', {
 
     
 
+    
+
+    
+
+    
 
     constructor: function(config) {
         var me = this,
             defaultAnim;
+            
+        config = Ext.apply({}, config);
         me.initTheme(config.theme || me.theme);
         if (me.gradients) {
             Ext.apply(config, { gradients: me.gradients });
@@ -41452,6 +41946,10 @@ Ext.define('Ext.chart.Chart', {
         me.mixins.navigation.constructor.call(me, config);
         me.callParent([config]);
     },
+    
+    getChartStore: function(){
+        return this.substore || this.store;    
+    },
 
     initComponent: function() {
         var me = this,
@@ -41728,7 +42226,7 @@ Ext.define('Ext.chart.Chart', {
     
     refresh: function() {
         var me = this;
-        if (me.rendered && me.curWidth != undefined && me.curHeight != undefined) {
+        if (me.rendered && me.curWidth !== undefined && me.curHeight !== undefined) {
             if (me.fireEvent('beforerefresh', me) !== false) {
                 me.redraw();
                 me.fireEvent('refresh', me);
@@ -41741,7 +42239,7 @@ Ext.define('Ext.chart.Chart', {
         var me = this;
         if (!initial && me.store) {
             if (store !== me.store && me.store.autoDestroy) {
-                me.store.destroy();
+                me.store.destroyStore();
             }
             else {
                 me.store.un('datachanged', me.refresh, me);
@@ -41972,7 +42470,7 @@ Ext.define('Ext.chart.Chart', {
 
     
     destroy: function() {
-        this.surface.destroy();
+        Ext.destroy(this.surface);
         this.bindStore(null);
         this.callParent(arguments);
     }
@@ -42149,18 +42647,6 @@ Ext.define('Ext.chart.Label', {
     
 
     requires: ['Ext.draw.Color'],
-    
-    
-
-    
-
-    
-
-    
-
-    
-
-    
 
     
 
@@ -42169,7 +42655,7 @@ Ext.define('Ext.chart.Label', {
     //@private a regex to parse url type colors.
 
     colorStringRe: /url\s*\(\s*#([^\/)]+)\s*\)/,
-    
+
     //@private the mixin constructor. Used internally by Series.
 
     constructor: function(config) {
@@ -42205,104 +42691,111 @@ Ext.define('Ext.chart.Label', {
             color = config.color,
             field = [].concat(config.field),
             group = me.labelsGroup,
+            groupLength = (group || 0) && group.length,
             store = me.chart.store,
             len = store.getCount(),
             itemLength = (items || 0) && items.length,
             ratio = itemLength / len,
             gradientsCount = (gradients || 0) && gradients.length,
             Color = Ext.draw.Color,
-            gradient, i, count, index, j, k, colorStopTotal, colorStopIndex, colorStop, item, label,
+            hides = [],
+            gradient, i, count, groupIndex, index, j, k, colorStopTotal, colorStopIndex, colorStop, item, label,
             storeItem, sprite, spriteColor, spriteBrightness, labelColor, colorString;
 
         if (display == 'none') {
             return;
         }
+        
+        if(itemLength == 0){
+            while(groupLength--)
+                hides.push(groupLength);
+        }else{
+            for (i = 0, count = 0, groupIndex = 0; i < len; i++) {
+                index = 0;
+                for (j = 0; j < ratio; j++) {
+                    item = items[count];
+                    label = group.getAt(groupIndex);
+                    storeItem = store.getAt(i);
+                    
+                    while(this.__excludes && this.__excludes[index] && ratio > 1) {
+                        if(field[j]){
+                            hides.push(groupIndex);
+                        }
+                        index++;
 
-        for (i = 0, count = 0; i < len; i++) {
-            index = 0;
-            for (j = 0; j < ratio; j++) {
-                item = items[count];
-                label = group.getAt(count);
-                storeItem = store.getAt(i);
-                
-                
-                while(this.__excludes && this.__excludes[index]) {
-                    index++;
-                }
-
-                if (!item && label) {
-                    label.hide(true);
-                }
+                    }
 
-                if (item && field[j]) {
-                    if (!label) {
-                        label = me.onCreateLabel(storeItem, item, i, display, j, index);
+                    if (!item && label) {
+                        label.hide(true);
+                        groupIndex++;
                     }
-                    me.onPlaceLabel(label, storeItem, item, i, display, animate, j, index);
 
-                    
-                    if (config.contrast && item.sprite) {
-                        sprite = item.sprite;
-                        
-                        if (sprite._endStyle) {
-                            colorString = sprite._endStyle.fill;
-                        }
-                        else if (sprite._to) {
-                            colorString = sprite._to.fill;
+                    if (item && field[j]) {
+                        if (!label) {
+                            label = me.onCreateLabel(storeItem, item, i, display, j, index);
                         }
-                        else {
-                            colorString = sprite.attr.fill;
-                        }
-                        colorString = colorString || sprite.attr.fill;
-                        
-                        spriteColor = Color.fromString(colorString);
+                        me.onPlaceLabel(label, storeItem, item, i, display, animate, j, index);
+                        groupIndex++;
+
                         
-                        if (colorString && !spriteColor) {
-                            colorString = colorString.match(me.colorStringRe)[1];
-                            for (k = 0; k < gradientsCount; k++) {
-                                gradient = gradients[k];
-                                if (gradient.id == colorString) {
-                                    
-                                    colorStop = 0; colorStopTotal = 0;
-                                    for (colorStopIndex in gradient.stops) {
-                                        colorStop++;
-                                        colorStopTotal += Color.fromString(gradient.stops[colorStopIndex].color).getGrayscale();
+                        if (config.contrast && item.sprite) {
+                            sprite = item.sprite;
+                            
+                            if (sprite._endStyle) {
+                                colorString = sprite._endStyle.fill;
+                            }
+                            else if (sprite._to) {
+                                colorString = sprite._to.fill;
+                            }
+                            else {
+                                colorString = sprite.attr.fill;
+                            }
+                            colorString = colorString || sprite.attr.fill;
+
+                            spriteColor = Color.fromString(colorString);
+                            
+                            if (colorString && !spriteColor) {
+                                colorString = colorString.match(me.colorStringRe)[1];
+                                for (k = 0; k < gradientsCount; k++) {
+                                    gradient = gradients[k];
+                                    if (gradient.id == colorString) {
+                                        
+                                        colorStop = 0; colorStopTotal = 0;
+                                        for (colorStopIndex in gradient.stops) {
+                                            colorStop++;
+                                            colorStopTotal += Color.fromString(gradient.stops[colorStopIndex].color).getGrayscale();
+                                        }
+                                        spriteBrightness = (colorStopTotal / colorStop) / 255;
+                                        break;
                                     }
-                                    spriteBrightness = (colorStopTotal / colorStop) / 255;
-                                    break;
                                 }
                             }
+                            else {
+                                spriteBrightness = spriteColor.getGrayscale() / 255;
+                            }
+                            if (label.isOutside) {
+                                spriteBrightness = 1;
+                            }
+                            labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
+                            labelColor[2] = spriteBrightness > 0.5 ? 0.2 : 0.8;
+                            label.setAttributes({
+                                fill: String(Color.fromHSL.apply({}, labelColor))
+                            }, true);
                         }
-                        else {
-                            spriteBrightness = spriteColor.getGrayscale() / 255;
-                        }
-                        if (label.isOutside) {
-                            spriteBrightness = 1;
-                        }
-                        labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
-                        labelColor[2] = spriteBrightness > 0.5 ? 0.2 : 0.8;
-                        label.setAttributes({
-                            fill: String(Color.fromHSL.apply({}, labelColor))
-                        }, true);
+
                     }
+                    count++;
+                    index++;
                 }
-                count++;
-                index++;
             }
         }
-        me.hideLabels(count);
+        me.hideLabels(hides);
     },
-
-    //@private a method to hide labels.
-
-    hideLabels: function(index) {
-        var labelsGroup = this.labelsGroup, len;
-        if (labelsGroup) {
-            len = labelsGroup.getCount();
-            while (len-->index) {
-                labelsGroup.getAt(len).hide(true);
-            }
-        }
+    hideLabels: function(hides){
+        var labelsGroup = this.labelsGroup,
+            hlen = hides.length;
+        while(hlen--)
+            labelsGroup.getAt(hides[hlen]).hide(true);
     }
 });
 Ext.define('Ext.chart.MaskLayer', {
@@ -42412,7 +42905,10 @@ Ext.define('Ext.chart.Tip', {
                 constrainPosition: false
             });
             me.tooltip = Ext.create('Ext.tip.ToolTip', me.tipConfig);
-            Ext.getBody().on('mousemove', me.tooltip.onMouseMove, me.tooltip);
+            me.chart.surface.on('mousemove', me.tooltip.onMouseMove, me.tooltip);
+            me.chart.surface.on('mouseleave', function() {
+                me.hideTip();
+            });
             if (me.tipConfig.surface) {
                 
                 surface = me.tipConfig.surface;
@@ -42538,53 +43034,56 @@ Ext.define('Ext.chart.axis.Axis', {
     
 
     
+
     
+
     //@private force min/max values from store
 
     forceMinMax: false,
-    
+
     
     dashSize: 3,
-    
+
     
     position: 'bottom',
-    
+
     
     skipFirst: false,
-    
+
     
     length: 0,
-    
+
     
     width: 0,
-    
+
     majorTickSteps: false,
 
     
     applyData: Ext.emptyFn,
 
-    
-    calcEnds: function() {
+    getRange: function () {
         var me = this,
+            store = me.chart.getChartStore(),
+            fields = me.fields,
+            ln = fields.length,
             math = Math,
             mmax = math.max,
             mmin = math.min,
-            store = me.chart.substore || me.chart.store,
-            series = me.chart.series.items,
-            fields = me.fields,
-            ln = fields.length,
+            aggregate = false,
             min = isNaN(me.minimum) ? Infinity : me.minimum,
             max = isNaN(me.maximum) ? -Infinity : me.maximum,
-            prevMin = me.prevMin,
-            prevMax = me.prevMax,
-            aggregate = false,
-            total = 0,
+            total = 0, i, l, value, values, rec,
             excludes = [],
-            outfrom, outto,
-            i, l, values, rec, out;
+            series = me.chart.series.items;
 
         
         
+        
+        
+        
+        
+        
+        
         for (i = 0, l = series.length; !aggregate && i < l; i++) {
             aggregate = aggregate || series[i].stacked;
             excludes = series[i].__excludes || excludes;
@@ -42601,8 +43100,8 @@ Ext.define('Ext.chart.axis.Axis', {
                     rec = record.get(fields[i]);
                     values[+(rec > 0)] += math.abs(rec);
                 }
-                max = mmax(max, -values[0], values[1]);
-                min = mmin(min, -values[0], values[1]);
+                max = mmax(max, -values[0], +values[1]);
+                min = mmin(min, -values[0], +values[1]);
             }
             else {
                 for (i = 0; i < ln; i++) {
@@ -42610,8 +43109,8 @@ Ext.define('Ext.chart.axis.Axis', {
                         continue;
                     }
                     value = record.get(fields[i]);
-                    max = mmax(max, value);
-                    min = mmin(min, value);
+                    max = mmax(max, +value);
+                    min = mmin(min, +value);
                 }
             }
         });
@@ -42622,9 +43121,30 @@ Ext.define('Ext.chart.axis.Axis', {
             min = me.prevMin || 0;
         }
         
-        if (min != max && (max != (max >> 0))) {
-            max = (max >> 0) + 1;
+        if (min != max && (max != Math.floor(max))) {
+            max = Math.floor(max) + 1;
         }
+
+        if (!isNaN(me.minimum)) {
+            min = me.minimum;
+        }
+        
+        if (!isNaN(me.maximum)) {
+            max = me.maximum;
+        }
+
+        return {min: min, max: max};
+    },
+
+    
+    calcEnds: function() {
+        var me = this,
+            fields = me.fields,
+            range = me.getRange(),
+            min = range.min,
+            max = range.max,
+            outfrom, outto, out;
+
         out = Ext.draw.Draw.snapEnds(min, max, me.majorTickSteps !== false ?  (me.majorTickSteps +1) : me.steps);
         outfrom = out.from;
         outto = out.to;
@@ -42646,10 +43166,10 @@ Ext.define('Ext.chart.axis.Axis', {
             
             out.from = me.minimum;
         }
-        
+
         
         out.step = (out.to - out.from) / (outto - outfrom) * out.step;
-        
+
         if (me.adjustMaximumByMajorUnit) {
             out.to += out.step;
         }
@@ -42689,7 +43209,7 @@ Ext.define('Ext.chart.axis.Axis', {
             dashesX,
             dashesY,
             delta;
-        
+
         
         
         
@@ -42709,11 +43229,11 @@ Ext.define('Ext.chart.axis.Axis', {
             path = ["M", x, currentY, "l", length, 0];
             trueLength = length - (gutterX * 2);
         }
-        
+
         delta = trueLength / (steps || 1);
         dashesX = Math.max(subDashesX +1, 0);
         dashesY = Math.max(subDashesY +1, 0);
-        if (me.type == 'Numeric') {
+        if (me.type == 'Numeric' || me.type == 'Time') {
             calcLabels = true;
             me.labels = [stepCalcs.from];
         }
@@ -42796,7 +43316,7 @@ Ext.define('Ext.chart.axis.Axis', {
     
     drawGrid: function() {
         var me = this,
-            surface = me.chart.surface, 
+            surface = me.chart.surface,
             grid = me.grid,
             odd = grid.odd,
             even = grid.even,
@@ -42810,7 +43330,7 @@ Ext.define('Ext.chart.axis.Axis', {
             i = 1,
             path = [], styles, lineWidth, dlineWidth,
             oddPath = [], evenPath = [];
-        
+
         if ((gutter[1] !== 0 && (position == 'left' || position == 'right')) ||
             (gutter[0] !== 0 && (position == 'top' || position == 'bottom'))) {
             i = 0;
@@ -42825,25 +43345,25 @@ Ext.define('Ext.chart.axis.Axis', {
                 lineWidth = (styles.lineWidth || styles['stroke-width'] || 0) / 2;
                 dlineWidth = 2 * lineWidth;
                 if (position == 'left') {
-                    path.push("M", prevPoint[0] + 1 + lineWidth, prevPoint[1] + 0.5 - lineWidth, 
+                    path.push("M", prevPoint[0] + 1 + lineWidth, prevPoint[1] + 0.5 - lineWidth,
                               "L", prevPoint[0] + 1 + width - lineWidth, prevPoint[1] + 0.5 - lineWidth,
                               "L", point[0] + 1 + width - lineWidth, point[1] + 0.5 + lineWidth,
                               "L", point[0] + 1 + lineWidth, point[1] + 0.5 + lineWidth, "Z");
                 }
                 else if (position == 'right') {
-                    path.push("M", prevPoint[0] - lineWidth, prevPoint[1] + 0.5 - lineWidth, 
+                    path.push("M", prevPoint[0] - lineWidth, prevPoint[1] + 0.5 - lineWidth,
                               "L", prevPoint[0] - width + lineWidth, prevPoint[1] + 0.5 - lineWidth,
                               "L", point[0] - width + lineWidth, point[1] + 0.5 + lineWidth,
                               "L", point[0] - lineWidth, point[1] + 0.5 + lineWidth, "Z");
                 }
                 else if (position == 'top') {
-                    path.push("M", prevPoint[0] + 0.5 + lineWidth, prevPoint[1] + 1 + lineWidth, 
+                    path.push("M", prevPoint[0] + 0.5 + lineWidth, prevPoint[1] + 1 + lineWidth,
                               "L", prevPoint[0] + 0.5 + lineWidth, prevPoint[1] + 1 + width - lineWidth,
                               "L", point[0] + 0.5 - lineWidth, point[1] + 1 + width - lineWidth,
                               "L", point[0] + 0.5 - lineWidth, point[1] + 1 + lineWidth, "Z");
                 }
                 else {
-                    path.push("M", prevPoint[0] + 0.5 + lineWidth, prevPoint[1] - lineWidth, 
+                    path.push("M", prevPoint[0] + 0.5 + lineWidth, prevPoint[1] - lineWidth,
                             "L", prevPoint[0] + 0.5 + lineWidth, prevPoint[1] - width + lineWidth,
                             "L", point[0] + 0.5 - lineWidth, point[1] - width + lineWidth,
                             "L", point[0] + 0.5 - lineWidth, point[1] - lineWidth, "Z");
@@ -42882,7 +43402,7 @@ Ext.define('Ext.chart.axis.Axis', {
                         type: 'path',
                         path: evenPath
                     });
-                } 
+                }
                 me.gridEven.setAttributes(Ext.apply({
                     path: evenPath,
                     hidden: false
@@ -42940,8 +43460,8 @@ Ext.define('Ext.chart.axis.Axis', {
         if (me.label.rotation) {
             textLabel.setAttributes({
                 rotation: {
-                    degrees: 0    
-                }    
+                    degrees: 0
+                }
             }, true);
             textLabel._ubbox = textLabel.getBBox();
             textLabel.setAttributes(me.label, true);
@@ -42950,7 +43470,7 @@ Ext.define('Ext.chart.axis.Axis', {
         }
         return textLabel;
     },
-    
+
     rect2pointArray: function(sprite) {
         var surface = this.chart.surface,
             rect = surface.getBBox(sprite, true),
@@ -42966,24 +43486,24 @@ Ext.define('Ext.chart.axis.Axis', {
         
         p1[0] = matrix.x.apply(matrix, p1p);
         p1[1] = matrix.y.apply(matrix, p1p);
-        
+
         p2[0] = matrix.x.apply(matrix, p2p);
         p2[1] = matrix.y.apply(matrix, p2p);
-        
+
         p3[0] = matrix.x.apply(matrix, p3p);
         p3[1] = matrix.y.apply(matrix, p3p);
-        
+
         p4[0] = matrix.x.apply(matrix, p4p);
         p4[1] = matrix.y.apply(matrix, p4p);
         return [p1, p2, p3, p4];
     },
-    
+
     intersect: function(l1, l2) {
         var r1 = this.rect2pointArray(l1),
             r2 = this.rect2pointArray(l2);
         return !!Ext.draw.Draw.intersect(r1, r2).length;
     },
-    
+
     drawHorizontalLabels: function() {
        var  me = this,
             labelConf = me.label,
@@ -43007,8 +43527,8 @@ Ext.define('Ext.chart.axis.Axis', {
         
         point = inflections[0];
         firstLabel = me.getOrCreateLabel(0, me.label.renderer(labels[0]));
-        ratio = Math.abs(Math.sin(labelConf.rotate && (labelConf.rotate.degrees * Math.PI / 180) || 0)) >> 0;
-        
+        ratio = Math.floor(Math.abs(Math.sin(labelConf.rotate && (labelConf.rotate.degrees * Math.PI / 180) || 0)));
+
         for (i = 0; i < ln; i++) {
             point = inflections[i];
             text = me.label.renderer(labels[i]);
@@ -43030,7 +43550,7 @@ Ext.define('Ext.chart.axis.Axis', {
             else {
                 y = point[1] + (me.dashSize * 2) + me.label.padding + (bbox.height / 2);
             }
-            
+
             textLabel.setAttributes({
                 hidden: false,
                 x: x,
@@ -43043,13 +43563,13 @@ Ext.define('Ext.chart.axis.Axis', {
                 textLabel.hide(true);
                 continue;
             }
-            
+
             prevLabel = textLabel;
         }
 
         return maxHeight;
     },
-    
+
     drawVerticalLabels: function() {
         var me = this,
             inflections = me.inflections,
@@ -43073,7 +43593,7 @@ Ext.define('Ext.chart.axis.Axis', {
             text = me.label.renderer(labels[i]);
             textLabel = me.getOrCreateLabel(i, text);
             bbox = textLabel._bbox;
-            
+
             maxWidth = max(maxWidth, bbox.width + me.dashSize + me.label.padding);
             y = point[1];
             if (gutterY < bbox.height / 2) {
@@ -43089,7 +43609,7 @@ Ext.define('Ext.chart.axis.Axis', {
             }
             else {
                 x = point[0] + me.dashSize + me.label.padding + 2;
-            }    
+            }
             textLabel.setAttributes(Ext.apply({
                 hidden: false,
                 x: x,
@@ -43102,7 +43622,7 @@ Ext.define('Ext.chart.axis.Axis', {
             }
             prevLabel = textLabel;
         }
-        
+
         return maxWidth;
     },
 
@@ -43117,7 +43637,7 @@ Ext.define('Ext.chart.axis.Axis', {
             ln, i;
 
         if (position == 'left' || position == 'right') {
-            maxWidth = me.drawVerticalLabels();    
+            maxWidth = me.drawVerticalLabels();
         } else {
             maxHeight = me.drawHorizontalLabels();
         }
@@ -43284,7 +43804,9 @@ Ext.define('Ext.chart.axis.Gauge', {
     extend: 'Ext.chart.axis.Abstract',
 
     
+
     
+
     
 
     
@@ -43353,7 +43875,7 @@ Ext.define('Ext.chart.axis.Gauge', {
             this.drawTitle();
         }
     },
-    
+
     drawTitle: function() {
         var me = this,
             chart = me.chart,
@@ -43361,12 +43883,12 @@ Ext.define('Ext.chart.axis.Gauge', {
             bbox = chart.chartBBox,
             labelSprite = me.titleSprite,
             labelBBox;
-        
+
         if (!labelSprite) {
             me.titleSprite = labelSprite = surface.add({
                 type: 'text',
                 zIndex: 2
-            });    
+            });
         }
         labelSprite.setAttributes(Ext.apply({
             text: me.title
@@ -43459,7 +43981,7 @@ Ext.define('Ext.chart.axis.Numeric', {
         var me = this,
             hasLabel = !!(config.label && config.label.renderer),
             label;
-        
+
         me.callParent([config]);
         label = me.label;
         if (me.roundToDecimal === false) {
@@ -43469,14 +43991,14 @@ Ext.define('Ext.chart.axis.Numeric', {
             label.renderer = function(v) {
                 return me.roundToDecimal(v, me.decimals);
             };
-        } 
+        }
     },
-    
+
     roundToDecimal: function(v, dec) {
         var val = Math.pow(10, dec || 0);
-        return ((v * val) >> 0) / val;
+        return Math.floor(v * val) / val;
     },
-    
+
     
     minimum: NaN,
 
@@ -43757,6 +44279,8 @@ Ext.define('Ext.data.AbstractStore', {
     
     
 
+    
+
     sortRoot: 'data',
     
     
@@ -43782,6 +44306,9 @@ Ext.define('Ext.data.AbstractStore', {
 
             
             'load',
+            
+            
+            'write',
 
             
             'beforesync',
@@ -43815,6 +44342,7 @@ Ext.define('Ext.data.AbstractStore', {
 
             me.implicitModel = true;
         }
+        
 
         
         me.setProxy(me.proxy || me.model.getProxy());
@@ -44206,7 +44734,7 @@ Ext.define('Ext.data.AbstractStore', {
 
     
     isLoading: function() {
-        return this.loading;
+        return !!this.loading;
      }
 });
 
@@ -44231,7 +44759,7 @@ Ext.define('Ext.data.Store', {
 
     alias: 'store.store',
 
-    requires: ['Ext.ModelManager', 'Ext.data.Model', 'Ext.util.Grouper'],
+    requires: ['Ext.data.StoreManager', 'Ext.ModelManager', 'Ext.data.Model', 'Ext.util.Grouper'],
     uses: ['Ext.data.proxy.Memory'],
 
     
@@ -44239,11 +44767,9 @@ Ext.define('Ext.data.Store', {
 
     
     remoteFilter: false,
-    
-    
-    remoteGroup : false,
 
     
+    remoteGroup : false,
 
     
 
@@ -44269,36 +44795,53 @@ Ext.define('Ext.data.Store', {
 
     
     sortOnFilter: true,
-    
+
     
     buffered: false,
-    
+
     
     purgePageCount: 5,
 
     isStore: true,
 
+    onClassExtended: function(cls, data) {
+        var model = data.model;
+
+        if (typeof model == 'string') {
+            var onBeforeClassCreated = data.onBeforeClassCreated;
+
+            data.onBeforeClassCreated = function(cls, data) {
+                var me = this;
+
+                Ext.require(model, function() {
+                    onBeforeClassCreated.call(me, cls, data);
+                });
+            };
+        }
+    },
+
     
     constructor: function(config) {
-        config = config || {};
+        
+        config = Ext.Object.merge({}, config);
 
         var me = this,
             groupers = config.groupers || me.groupers,
             groupField = config.groupField || me.groupField,
             proxy,
             data;
-            
+
         if (config.buffered || me.buffered) {
             me.prefetchData = Ext.create('Ext.util.MixedCollection', false, function(record) {
                 return record.index;
             });
             me.pendingRequests = [];
             me.pagesRequested = [];
-            
+
             me.sortOnLoad = false;
             me.filterOnLoad = false;
         }
-            
+
         me.addEvents(
             
             'beforeprefetch',
@@ -44318,7 +44861,7 @@ Ext.define('Ext.data.Store', {
             me.inlineData = data;
             delete config.data;
         }
-        
+
         if (!groupers && groupField) {
             groupers = [{
                 property : groupField,
@@ -44326,14 +44869,14 @@ Ext.define('Ext.data.Store', {
             }];
         }
         delete config.groupers;
-        
+
         
         me.groupers = Ext.create('Ext.util.MixedCollection');
         me.groupers.addAll(me.decodeGroupers(groupers));
 
         this.callParent([config]);
         
-        
+
         if (me.groupers.items.length) {
             me.sort(me.groupers.items, 'prepend', false);
         }
@@ -44357,11 +44900,14 @@ Ext.define('Ext.data.Store', {
             
         }
     },
-    
+
     onBeforeSort: function() {
-        this.sort(this.groupers.items, 'prepend', false);
+        var groupers = this.groupers;
+        if (groupers.getCount() > 0) {
+            this.sort(groupers.items, 'prepend', false);
+        }
     },
-    
+
     
     decodeGroupers: function(groupers) {
         if (!Ext.isArray(groupers)) {
@@ -44385,7 +44931,7 @@ Ext.define('Ext.data.Store', {
                         property: config
                     };
                 }
-                
+
                 Ext.applyIf(config, {
                     root     : 'data',
                     direction: "ASC"
@@ -44409,13 +44955,14 @@ Ext.define('Ext.data.Store', {
 
         return groupers;
     },
-    
+
     
     group: function(groupers, direction) {
         var me = this,
+            hasNew = false,
             grouper,
             newGroupers;
-            
+
         if (Ext.isArray(groupers)) {
             newGroupers = groupers;
         } else if (Ext.isObject(groupers)) {
@@ -44435,24 +44982,26 @@ Ext.define('Ext.data.Store', {
                 grouper.setDirection(direction);
             }
         }
-        
+
         if (newGroupers && newGroupers.length) {
+            hasNew = true;
             newGroupers = me.decodeGroupers(newGroupers);
             me.groupers.clear();
             me.groupers.addAll(newGroupers);
         }
-        
+
         if (me.remoteGroup) {
             me.load({
                 scope: me,
                 callback: me.fireGroupChange
             });
         } else {
-            me.sort();
-            me.fireEvent('groupchange', me, me.groupers);
+            
+            me.sort(null, null, null, hasNew);
+            me.fireGroupChange();
         }
     },
-    
+
     
     clearGrouping: function(){
         var me = this;
@@ -44471,15 +45020,15 @@ Ext.define('Ext.data.Store', {
             me.fireEvent('groupchange', me, me.groupers);
         }
     },
-    
+
     
     isGrouped: function() {
-        return this.groupers.getCount() > 0;    
+        return this.groupers.getCount() > 0;
     },
-    
+
     
     fireGroupChange: function(){
-        this.fireEvent('groupchange', this, this.groupers);    
+        this.fireEvent('groupchange', this, this.groupers);
     },
 
     
@@ -44599,7 +45148,7 @@ Ext.define('Ext.data.Store', {
             record.set(me.modelDefaults);
             
             records[i] = record;
-            
+
             me.data.insert(index + i, record);
             record.join(me);
 
@@ -44673,11 +45222,11 @@ Ext.define('Ext.data.Store', {
         for (; i < length; i++) {
             record = records[i];
             index = me.data.indexOf(record);
-            
+
             if (me.snapshot) {
                 me.snapshot.remove(record);
             }
-            
+
             if (index > -1) {
                 isPhantom = record.phantom === true;
                 if (!isMove && !isPhantom) {
@@ -44711,7 +45260,7 @@ Ext.define('Ext.data.Store', {
     
     load: function(options) {
         var me = this;
-            
+
         options = options || {};
 
         if (Ext.isFunction(options)) {
@@ -44726,7 +45275,7 @@ Ext.define('Ext.data.Store', {
             start: (me.currentPage - 1) * me.pageSize,
             limit: me.pageSize,
             addRecords: false
-        });      
+        });
 
         return me.callParent([options]);
     },
@@ -44756,7 +45305,7 @@ Ext.define('Ext.data.Store', {
         
         Ext.callback(operation.callback, operation.scope || me, [records, operation, successful]);
     },
-    
+
     
     onCreateRecords: function(records, operation, success) {
         if (success) {
@@ -44928,6 +45477,7 @@ Ext.define('Ext.data.Store', {
     loadData: function(data, append) {
         var model = this.model,
             length = data.length,
+            newData = [],
             i,
             record;
 
@@ -44935,14 +45485,29 @@ Ext.define('Ext.data.Store', {
         for (i = 0; i < length; i++) {
             record = data[i];
 
-            if (! (record instanceof Ext.data.Model)) {
-                data[i] = Ext.ModelManager.create(record, model);
+            if (!(record instanceof Ext.data.Model)) {
+                record = Ext.ModelManager.create(record, model);
             }
+            newData.push(record);
         }
 
-        this.loadRecords(data, {addRecords: append});
+        this.loadRecords(newData, {addRecords: append});
     },
 
+
+    
+    loadRawData : function(data, append) {
+         var me      = this,
+             result  = me.proxy.reader.read(data),
+             records = result.records;
+
+         if (result.success) {
+             me.loadRecords(records, { addRecords: append });
+             me.fireEvent('load', me, records, true);
+         }
+     },
+
+
     
     loadRecords: function(records, options) {
         var me     = this,
@@ -44985,38 +45550,40 @@ Ext.define('Ext.data.Store', {
 
     
     
-    loadPage: function(page) {
+    loadPage: function(page, options) {
         var me = this;
+        options = Ext.apply({}, options);
 
         me.currentPage = page;
 
-        me.read({
+        me.read(Ext.applyIf(options, {
             page: page,
             start: (page - 1) * me.pageSize,
             limit: me.pageSize,
             addRecords: !me.clearOnPageLoad
-        });
+        }));
     },
 
     
-    nextPage: function() {
-        this.loadPage(this.currentPage + 1);
+    nextPage: function(options) {
+        this.loadPage(this.currentPage + 1, options);
     },
 
     
-    previousPage: function() {
-        this.loadPage(this.currentPage - 1);
+    previousPage: function(options) {
+        this.loadPage(this.currentPage - 1, options);
     },
 
     
     clearData: function() {
-        this.data.each(function(record) {
-            record.unjoin();
+        var me = this;
+        me.data.each(function(record) {
+            record.unjoin(me);
         });
 
-        this.data.clear();
+        me.data.clear();
     },
-    
+
     
     
     prefetch: function(options) {
@@ -45044,17 +45611,17 @@ Ext.define('Ext.data.Store', {
             me.loading = true;
             me.proxy.read(operation, me.onProxyPrefetch, me);
         }
-        
+
         return me;
     },
-    
+
     
     prefetchPage: function(page, options) {
         var me = this,
             pageSize = me.pageSize,
             start = (page - 1) * me.pageSize,
             end = start + pageSize;
-        
+
         
         if (Ext.Array.indexOf(me.pagesRequested, page) === -1 && !me.rangeSatisfied(start, end)) {
             options = options || {};
@@ -45066,31 +45633,31 @@ Ext.define('Ext.data.Store', {
                 callback: me.onWaitForGuarantee,
                 scope: me
             });
-            
+
             me.prefetch(options);
         }
-        
+
     },
-    
+
     
     getRequestId: function() {
         this.requestSeed = this.requestSeed || 1;
         return this.requestSeed++;
     },
-    
+
     
     onProxyPrefetch: function(operation) {
         var me         = this,
             resultSet  = operation.getResultSet(),
             records    = operation.getRecords(),
-            
+
             successful = operation.wasSuccessful();
-        
+
         if (resultSet) {
             me.totalCount = resultSet.total;
             me.fireEvent('totalcountchange', me.totalCount);
         }
-        
+
         if (successful) {
             me.cacheRecords(records, operation);
         }
@@ -45098,10 +45665,10 @@ Ext.define('Ext.data.Store', {
         if (operation.page) {
             Ext.Array.remove(me.pagesRequested, operation.page);
         }
-        
+
         me.loading = false;
         me.fireEvent('prefetch', me, records, successful, operation);
-        
+
         
         if (operation.blocking) {
             me.fireEvent('load', me, records, successful);
@@ -45110,32 +45677,32 @@ Ext.define('Ext.data.Store', {
         
         Ext.callback(operation.callback, operation.scope || me, [records, operation, successful]);
     },
-    
+
     
     cacheRecords: function(records, operation) {
         var me     = this,
             i      = 0,
             length = records.length,
             start  = operation ? operation.start : 0;
-        
+
         if (!Ext.isDefined(me.totalCount)) {
             me.totalCount = records.length;
             me.fireEvent('totalcountchange', me.totalCount);
         }
-        
+
         for (; i < length; i++) {
             
             records[i].index = start + i;
         }
-        
+
         me.prefetchData.addAll(records);
         if (me.purgePageCount) {
             me.purgeRecords();
         }
-        
+
     },
-    
-    
+
+
     
     purgeRecords: function() {
         var me = this,
@@ -45148,7 +45715,7 @@ Ext.define('Ext.data.Store', {
             me.prefetchData.removeAt(0);
         }
     },
-    
+
     
     rangeSatisfied: function(start, end) {
         var me = this,
@@ -45163,12 +45730,12 @@ Ext.define('Ext.data.Store', {
         }
         return satisfied;
     },
-    
+
     
     getPageFromRecordIndex: function(index) {
         return Math.floor(index / this.pageSize) + 1;
     },
-    
+
     
     onGuaranteedRange: function() {
         var me = this,
@@ -45178,56 +45745,60 @@ Ext.define('Ext.data.Store', {
             range = [],
             record,
             i = start;
-            
-        
+
+        end = Math.max(0, end);
+
+
         if (start !== me.guaranteedStart && end !== me.guaranteedEnd) {
             me.guaranteedStart = start;
             me.guaranteedEnd = end;
-            
+
             for (; i <= end; i++) {
                 record = me.prefetchData.getByKey(i);
-                range.push(record);
+                if (record) {
+                    range.push(record);
+                }
             }
             me.fireEvent('guaranteedrange', range, start, end);
             if (me.cb) {
                 me.cb.call(me.scope || me, range);
             }
         }
-        
+
         me.unmask();
     },
-    
+
     
     mask: function() {
         this.masked = true;
         this.fireEvent('beforeload');
     },
-    
+
     
     unmask: function() {
         if (this.masked) {
             this.fireEvent('load');
         }
     },
-    
+
     
     hasPendingRequests: function() {
         return this.pendingRequests.length;
     },
-    
-    
+
+
     
     onWaitForGuarantee: function() {
         if (!this.hasPendingRequests()) {
             this.onGuaranteedRange();
         }
     },
-    
+
     
     guaranteeRange: function(start, end, cb, scope) {
-        
+
         end = (end > this.totalCount) ? this.totalCount - 1 : end;
-        
+
         var me = this,
             i = start,
             prefetchData = me.prefetchData,
@@ -45236,7 +45807,7 @@ Ext.define('Ext.data.Store', {
             endLoaded = !!prefetchData.getByKey(end),
             startPage = me.getPageFromRecordIndex(start),
             endPage = me.getPageFromRecordIndex(end);
-            
+
         me.cb = cb;
         me.scope = scope;
 
@@ -45271,7 +45842,7 @@ Ext.define('Ext.data.Store', {
             me.onGuaranteedRange();
         }
     },
-    
+
     
     
     sort: function() {
@@ -45281,7 +45852,7 @@ Ext.define('Ext.data.Store', {
             start,
             end,
             range;
-            
+
         if (me.buffered) {
             if (me.remoteSort) {
                 prefetchData.clear();
@@ -45290,7 +45861,7 @@ Ext.define('Ext.data.Store', {
                 sorters = me.getSorters();
                 start = me.guaranteedStart;
                 end = me.guaranteedEnd;
-                
+
                 if (sorters.length) {
                     prefetchData.sort(sorters);
                     range = prefetchData.getRange();
@@ -45328,7 +45899,7 @@ Ext.define('Ext.data.Store', {
             me.fireEvent('datachanged', me);
         }
     },
-    
+
     
     find: function(property, value, start, anyMatch, caseSensitive, exactMatch) {
         var fn = this.createFilterFn(property, value, anyMatch, caseSensitive, exactMatch);
@@ -45356,7 +45927,7 @@ Ext.define('Ext.data.Store', {
     
     findExact: function(property, value, start) {
         return this.data.findIndexBy(function(rec) {
-            return rec.get(property) === value;
+            return rec.get(property) == value;
         },
         this, start);
     },
@@ -45409,14 +45980,18 @@ Ext.define('Ext.data.Store', {
 
     
     indexOfTotal: function(record) {
-        return record.index || this.indexOf(record);
+        var index = record.index;
+        if (index || index === 0) {
+            return index;
+        }
+        return this.indexOf(record);
     },
 
     
     indexOfId: function(id) {
-        return this.data.indexOfKey(id);
+        return this.indexOf(this.getById(id));
     },
-        
+
     
     removeAll: function(silent) {
         var me = this;
@@ -45601,6 +46176,11 @@ Ext.define('Ext.data.Store', {
             return fn.apply(scope || this, [this.data.items].concat(args));
         }
     }
+}, function() {
+    
+    
+    
+    Ext.regStore('ext-empty-store', {fields: [], proxy: 'proxy'});
 });
 
 
@@ -45629,7 +46209,7 @@ Ext.define('Ext.chart.axis.Time', {
 
     
 
-    extend: 'Ext.chart.axis.Category',
+    extend: 'Ext.chart.axis.Numeric',
 
     alternateClassName: 'Ext.chart.TimeAxis',
 
@@ -45639,560 +46219,1255 @@ Ext.define('Ext.chart.axis.Time', {
 
     
 
-     
-    calculateByLabelSize: true,
     
-     
     dateFormat: false,
+
     
-     
-    groupBy: 'year,month,day',
+    fromDate: false,
+
     
+    toDate: false,
+
     
-    aggregateOp: 'sum',
+    step: [Ext.Date.DAY, 1],
     
     
-    fromDate: false,
+    constrain: false,
+
     
+    roundToDecimal: false,
     
-    toDate: false,
+    constructor: function (config) {
+        var me = this, label, f, df;
+        me.callParent([config]);
+        label = me.label || {};
+        df = this.dateFormat;
+        if (df) {
+            if (label.renderer) {
+                f = label.renderer;
+                label.renderer = function(v) {
+                    v = f(v);
+                    return Ext.Date.format(new Date(f(v)), df);
+                };
+            } else {
+                label.renderer = function(v) {
+                    return Ext.Date.format(new Date(v >> 0), df);
+                };
+            }
+        }
+    },
+
+    doConstrain: function () {
+        var me = this,
+            store = me.chart.store,
+            data = [],
+            series = me.chart.series.items,
+            math = Math,
+            mmax = math.max,
+            mmin = math.min,
+            fields = me.fields,
+            ln = fields.length,
+            range = me.getRange(),
+            min = range.min, max = range.max, i, l, excludes = [],
+            value, values, rec, data = [];
+        for (i = 0, l = series.length; i < l; i++) {
+            excludes[i] = series[i].__excludes;
+        }
+        store.each(function(record) {
+            for (i = 0; i < ln; i++) {
+                if (excludes[i]) {
+                    continue;
+                }
+                value = record.get(fields[i]);
+                if (+value < +min) return;
+                if (+value > +max) return;
+            }
+            data.push(record);
+        })
+        me.chart.substore = Ext.create('Ext.data.JsonStore', { model: store.model, data: data });
+    },
+
     
+    processView: function () {
+        var me = this;
+        if (me.fromDate) {
+            me.minimum = +me.fromDate;
+        }
+        if (me.toDate) {
+            me.maximum = +me.toDate;
+        }
+        if (me.constrain) {
+            me.doConstrain();
+        }
+     },
+
     
-    step: [Ext.Date.DAY, 1],
+    calcEnds: function() {
+        var me = this, range, step = me.step;
+        if (step) {
+            range = me.getRange();
+            range = Ext.draw.Draw.snapEndsByDateAndStep(new Date(range.min), new Date(range.max), Ext.isNumber(step) ? [Date.MILLI, step]: step);
+            if (me.minimum) {
+                range.from = me.minimum;
+            }
+            if (me.maximum) {
+                range.to = me.maximum;
+            }
+            range.step = (range.to - range.from) / range.steps;
+            return range;
+        } else {
+            return me.callParent(arguments);
+        }
+    }
+ });
+
+
+
+Ext.define('Ext.chart.series.Series', {
+
     
+
+    mixins: {
+        observable: 'Ext.util.Observable',
+        labels: 'Ext.chart.Label',
+        highlights: 'Ext.chart.Highlight',
+        tips: 'Ext.chart.Tip',
+        callouts: 'Ext.chart.Callout'
+    },
+
     
-    constrain: false,
+
     
+
     
-    dateMethods: {
-        'year': function(date) {
-            return date.getFullYear();
-        },
-        'month': function(date) {
-            return date.getMonth() + 1;
-        },
-        'day': function(date) {
-            return date.getDate();
-        },
-        'hour': function(date) {
-            return date.getHours();
-        },
-        'minute': function(date) {
-            return date.getMinutes();
-        },
-        'second': function(date) {
-            return date.getSeconds();
-        },
-        'millisecond': function(date) {
-            return date.getMilliseconds();
+
+    
+    type: null,
+
+    
+    title: null,
+
+    
+    showInLegend: true,
+
+    
+    renderer: function(sprite, record, attributes, index, store) {
+        return attributes;
+    },
+
+    
+    shadowAttributes: null,
+
+    //@private triggerdrawlistener flag
+
+    triggerAfterDraw: false,
+
+    
+
+    constructor: function(config) {
+        var me = this;
+        if (config) {
+            Ext.apply(me, config);
         }
+
+        me.shadowGroups = [];
+
+        me.mixins.labels.constructor.call(me, config);
+        me.mixins.highlights.constructor.call(me, config);
+        me.mixins.tips.constructor.call(me, config);
+        me.mixins.callouts.constructor.call(me, config);
+
+        me.addEvents({
+            scope: me,
+            itemmouseover: true,
+            itemmouseout: true,
+            itemmousedown: true,
+            itemmouseup: true,
+            mouseleave: true,
+            afterdraw: true,
+
+            
+            titlechange: true
+        });
+
+        me.mixins.observable.constructor.call(me, config);
+
+        me.on({
+            scope: me,
+            itemmouseover: me.onItemMouseOver,
+            itemmouseout: me.onItemMouseOut,
+            mouseleave: me.onMouseLeave
+        });
     },
     
     
-    aggregateFn: (function() {
-        var etype = (function() {
-            var rgxp = /^\[object\s(.*)\]$/,
-                toString = Object.prototype.toString;
-            return function(e) {
-                return toString.call(e).match(rgxp)[1];
-            };
-        })();
-        return {
-            'sum': function(list) {
-                var i = 0, l = list.length, acum = 0;
-                if (!list.length || etype(list[0]) != 'Number') {
-                    return list[0];
-                }
-                for (; i < l; i++) {
-                    acum += list[i];
-                }
-                return acum;
-            },
-            'max': function(list) {
-                if (!list.length || etype(list[0]) != 'Number') {
-                    return list[0];
-                }
-                return Math.max.apply(Math, list);
-            },
-            'min': function(list) {
-                if (!list.length || etype(list[0]) != 'Number') {
-                    return list[0];
-                }
-                return Math.min.apply(Math, list);
-            },
-            'avg': function(list) {
-                var i = 0, l = list.length, acum = 0;
-                if (!list.length || etype(list[0]) != 'Number') {
-                    return list[0];
+    eachRecord: function(fn, scope) {
+        var chart = this.chart;
+        (chart.substore || chart.store).each(fn, scope);
+    },
+
+    
+    getRecordCount: function() {
+        var chart = this.chart,
+            store = chart.substore || chart.store;
+        return store ? store.getCount() : 0;
+    },
+
+    
+    isExcluded: function(index) {
+        var excludes = this.__excludes;
+        return !!(excludes && excludes[index]);
+    },
+
+    
+    setBBox: function(noGutter) {
+        var me = this,
+            chart = me.chart,
+            chartBBox = chart.chartBBox,
+            gutterX = noGutter ? 0 : chart.maxGutter[0],
+            gutterY = noGutter ? 0 : chart.maxGutter[1],
+            clipBox, bbox;
+
+        clipBox = {
+            x: chartBBox.x,
+            y: chartBBox.y,
+            width: chartBBox.width,
+            height: chartBBox.height
+        };
+        me.clipBox = clipBox;
+
+        bbox = {
+            x: (clipBox.x + gutterX) - (chart.zoom.x * chart.zoom.width),
+            y: (clipBox.y + gutterY) - (chart.zoom.y * chart.zoom.height),
+            width: (clipBox.width - (gutterX * 2)) * chart.zoom.width,
+            height: (clipBox.height - (gutterY * 2)) * chart.zoom.height
+        };
+        me.bbox = bbox;
+    },
+
+    
+    onAnimate: function(sprite, attr) {
+        var me = this;
+        sprite.stopAnimation();
+        if (me.triggerAfterDraw) {
+            return sprite.animate(Ext.applyIf(attr, me.chart.animate));
+        } else {
+            me.triggerAfterDraw = true;
+            return sprite.animate(Ext.apply(Ext.applyIf(attr, me.chart.animate), {
+                listeners: {
+                    'afteranimate': function() {
+                        me.triggerAfterDraw = false;
+                        me.fireEvent('afterrender');
+                    }
                 }
-                for (; i < l; i++) {
-                    acum += list[i];
+            }));
+        }
+    },
+
+    
+    getGutters: function() {
+        return [0, 0];
+    },
+
+    
+    onItemMouseOver: function(item) {
+        var me = this;
+        if (item.series === me) {
+            if (me.highlight) {
+                me.highlightItem(item);
+            }
+            if (me.tooltip) {
+                me.showTip(item);
+            }
+        }
+    },
+
+    
+    onItemMouseOut: function(item) {
+        var me = this;
+        if (item.series === me) {
+            me.unHighlightItem();
+            if (me.tooltip) {
+                me.hideTip(item);
+            }
+        }
+    },
+
+    
+    onMouseLeave: function() {
+        var me = this;
+        me.unHighlightItem();
+        if (me.tooltip) {
+            me.hideTip();
+        }
+    },
+
+    
+    getItemForPoint: function(x, y) {
+        
+        if (!this.items || !this.items.length || this.seriesIsHidden) {
+            return null;
+        }
+        var me = this,
+            items = me.items,
+            bbox = me.bbox,
+            item, i, ln;
+        
+        if (!Ext.draw.Draw.withinBox(x, y, bbox)) {
+            return null;
+        }
+        for (i = 0, ln = items.length; i < ln; i++) {
+            if (items[i] && this.isItemInPoint(x, y, items[i], i)) {
+                return items[i];
+            }
+        }
+
+        return null;
+    },
+
+    isItemInPoint: function(x, y, item, i) {
+        return false;
+    },
+
+    
+    hideAll: function() {
+        var me = this,
+            items = me.items,
+            item, len, i, j, l, sprite, shadows;
+
+        me.seriesIsHidden = true;
+        me._prevShowMarkers = me.showMarkers;
+
+        me.showMarkers = false;
+        
+        me.hideLabels(0);
+        
+        for (i = 0, len = items.length; i < len; i++) {
+            item = items[i];
+            sprite = item.sprite;
+            if (sprite) {
+                sprite.setAttributes({
+                    hidden: true
+                }, true);
+            }
+
+            if (sprite && sprite.shadows) {
+                shadows = sprite.shadows;
+                for (j = 0, l = shadows.length; j < l; ++j) {
+                    shadows[j].setAttributes({
+                        hidden: true
+                    }, true);
                 }
-                return acum / l;
             }
-        };
-    })(),
+        }
+    },
+
     
+    showAll: function() {
+        var me = this,
+            prevAnimate = me.chart.animate;
+        me.chart.animate = false;
+        me.seriesIsHidden = false;
+        me.showMarkers = me._prevShowMarkers;
+        me.drawSeries();
+        me.chart.animate = prevAnimate;
+    },
+
+    
+    getLegendColor: function(index) {
+        var me = this, fill, stroke;
+        if (me.seriesStyle) {
+            fill = me.seriesStyle.fill;
+            stroke = me.seriesStyle.stroke;
+            if (fill && fill != 'none') {
+                return fill;
+            }
+            return stroke;
+        }
+        return '#000';
+    },
+
+    
+    visibleInLegend: function(index){
+        var excludes = this.__excludes;
+        if (excludes) {
+            return !excludes[index];
+        }
+        return !this.seriesIsHidden;
+    },
+
+    
+    setTitle: function(index, title) {
+        var me = this,
+            oldTitle = me.title;
+
+        if (Ext.isString(index)) {
+            title = index;
+            index = 0;
+        }
+
+        if (Ext.isArray(oldTitle)) {
+            oldTitle[index] = title;
+        } else {
+            me.title = title;
+        }
+
+        me.fireEvent('titlechange', title, index);
+    }
+});
+
+
+Ext.define('Ext.chart.series.Cartesian', {
+
+    
+
+    extend: 'Ext.chart.series.Series',
+
+    alternateClassName: ['Ext.chart.CartesianSeries', 'Ext.chart.CartesianChart'],
+
+    
+
+    
+    xField: null,
+
+    
+    yField: null,
+
+    
+    axis: 'left',
+
+    getLegendLabels: function() {
+        var me = this,
+            labels = [],
+            combinations = me.combinations;
+
+        Ext.each([].concat(me.yField), function(yField, i) {
+            var title = me.title;
+            
+            labels.push((Ext.isArray(title) ? title[i] : title) || yField);
+        });
+
+        
+        if (combinations) {
+            Ext.each(combinations, function(combo) {
+                var label0 = labels[combo[0]],
+                    label1 = labels[combo[1]];
+                labels[combo[1]] = label0 + ' & ' + label1;
+                labels.splice(combo[0], 1);
+            });
+        }
+
+        return labels;
+    },
+
+    
+    eachYValue: function(record, fn, scope) {
+        Ext.each(this.getYValueAccessors(), function(accessor, i) {
+            fn.call(scope, accessor(record), i);
+        });
+    },
+
+    
+    getYValueCount: function() {
+        return this.getYValueAccessors().length;
+    },
+
+    combine: function(index1, index2) {
+        var me = this,
+            accessors = me.getYValueAccessors(),
+            accessor1 = accessors[index1],
+            accessor2 = accessors[index2];
+
+        
+        accessors[index2] = function(record) {
+            return accessor1(record) + accessor2(record);
+        };
+        accessors.splice(index1, 1);
+
+        me.callParent([index1, index2]);
+    },
+
+    clearCombinations: function() {
+        
+        delete this.yValueAccessors;
+        this.callParent();
+    },
+
     
-    constrainDates: function() {
-        var fromDate = Ext.Date.clone(this.fromDate),
-            toDate = Ext.Date.clone(this.toDate),
-            step = this.step,
-            field = this.fields,
-            store = this.chart.store,
-            record, recObj, fieldNames = [],
-            newStore = Ext.create('Ext.data.Store', {
-                model: store.model
+    getYValueAccessors: function() {
+        var me = this,
+            accessors = me.yValueAccessors;
+        if (!accessors) {
+            accessors = me.yValueAccessors = [];
+            Ext.each([].concat(me.yField), function(yField) {
+                accessors.push(function(record) {
+                    return record.get(yField);
+                });
             });
-        
-        var getRecordByDate = (function() {
-            var index = 0, l = store.getCount();
-            return function(date) {
-                var rec, recDate;
-                for (; index < l; index++) {
-                    rec = store.getAt(index);
-                    recDate = rec.get(field);
-                    if (+recDate > +date) {
-                        return false;
-                    } else if (+recDate == +date) {
-                        return rec;
-                    }
-                }
-                return false;
-            };
-        })();
-        
-        if (!this.constrain) {
-            this.chart.filteredStore = this.chart.store;
-            return;
         }
+        return accessors;
+    },
 
-        while(+fromDate <= +toDate) {
-            record = getRecordByDate(fromDate);
-            recObj = {};
-            if (record) {
-                newStore.add(record.data);
-            } else {
-                newStore.model.prototype.fields.each(function(f) {
-                    recObj[f.name] = false;
-                });
-                recObj.date = fromDate;
-                newStore.add(recObj);
-            }
-            fromDate = Ext.Date.add(fromDate, step[0], step[1]);
+    
+    getMinMaxXValues: function() {
+        var me = this,
+            min, max,
+            xField = me.xField;
+
+        if (me.getRecordCount() > 0) {
+            min = Infinity;
+            max = -min;
+            me.eachRecord(function(record) {
+                var xValue = record.get(xField);
+                if (xValue > max) {
+                    max = xValue;
+                }
+                if (xValue < min) {
+                    min = xValue;
+                }
+            });
+        } else {
+            min = max = 0;
         }
-         
-        this.chart.filteredStore = newStore;
-    },
-    
-    
-    aggregate: function() {
-        var aggStore = {}, 
-            aggKeys = [], key, value,
-            op = this.aggregateOp,
-            field = this.fields, i,
-            fields = this.groupBy.split(','),
-            curField,
-            recFields = [],
-            recFieldsLen = 0,
-            obj,
-            dates = [],
-            json = [],
-            l = fields.length,
-            dateMethods = this.dateMethods,
-            aggregateFn = this.aggregateFn,
-            store = this.chart.filteredStore || this.chart.store;
-        
-        store.each(function(rec) {
-            
-            if (!recFields.length) {
-                rec.fields.each(function(f) {
-                    recFields.push(f.name);
-                });
-                recFieldsLen = recFields.length;
-            }
-            
-            value = rec.get(field);
-            
-            for (i = 0; i < l; i++) {
-                if (i == 0) {
-                    key = String(dateMethods[fields[i]](value));
+        return [min, max];
+    },
+
+    
+    getMinMaxYValues: function() {
+        var me = this,
+            stacked = me.stacked,
+            min, max,
+            positiveTotal, negativeTotal;
+
+        function eachYValueStacked(yValue, i) {
+            if (!me.isExcluded(i)) {
+                if (yValue < 0) {
+                    negativeTotal += yValue;
                 } else {
-                    key += '||' + dateMethods[fields[i]](value);
+                    positiveTotal += yValue;
                 }
             }
-            
-            if (key in aggStore) {
-                obj = aggStore[key];
-            } else {
-                obj = aggStore[key] = {};
-                aggKeys.push(key);
-                dates.push(value);
-            }
-            
-            for (i = 0; i < recFieldsLen; i++) {
-                curField = recFields[i];
-                if (!obj[curField]) {
-                    obj[curField] = [];
+        }
+
+        function eachYValue(yValue, i) {
+            if (!me.isExcluded(i)) {
+                if (yValue > max) {
+                    max = yValue;
                 }
-                if (rec.get(curField) !== undefined) {
-                    obj[curField].push(rec.get(curField));
+                if (yValue < min) {
+                    min = yValue;
                 }
             }
-        });
-        
-        for (key in aggStore) {
-            obj = aggStore[key];
-            for (i = 0; i < recFieldsLen; i++) {
-                curField = recFields[i];
-                obj[curField] = aggregateFn[op](obj[curField]);
-            }
-            json.push(obj);
         }
-        this.chart.substore = Ext.create('Ext.data.JsonStore', {
-            fields: recFields,
-            data: json
-        });
-        
-        this.dates = dates;
+
+        if (me.getRecordCount() > 0) {
+            min = Infinity;
+            max = -min;
+            me.eachRecord(function(record) {
+                if (stacked) {
+                    positiveTotal = 0;
+                    negativeTotal = 0;
+                    me.eachYValue(record, eachYValueStacked);
+                    if (positiveTotal > max) {
+                        max = positiveTotal;
+                    }
+                    if (negativeTotal < min) {
+                        min = negativeTotal;
+                    }
+                } else {
+                    me.eachYValue(record, eachYValue);
+                }
+            });
+        } else {
+            min = max = 0;
+        }
+        return [min, max];
     },
-    
-    
-     setLabels: function() {
-        var store = this.chart.substore,
-            fields = this.fields,
-            format = this.dateFormat,
-            labels, i, dates = this.dates,
-            formatFn = Ext.Date.format;
-        this.labels = labels = [];
-        store.each(function(record, i) {
-            if (!format) {
-                labels.push(record.get(fields));
-            } else {
-                labels.push(formatFn(dates[i], format));
+
+    getAxesForXAndYFields: function() {
+        var me = this,
+            axes = me.chart.axes,
+            axis = [].concat(me.axis),
+            xAxis, yAxis;
+
+        if (Ext.Array.indexOf(axis, 'top') > -1) {
+            xAxis = 'top';
+        } else if (Ext.Array.indexOf(axis, 'bottom') > -1) {
+            xAxis = 'bottom';
+        } else {
+            if (axes.get('top')) {
+                xAxis = 'top';
+            } else if (axes.get('bottom')) {
+                xAxis = 'bottom';
             }
-         }, this);
-     },
+        }
 
-    processView: function() {
-         
-         if (this.constrain) {
-             this.constrainDates();
-             this.aggregate();
-             this.chart.substore = this.chart.filteredStore;
-         } else {
-             this.aggregate();
-         }
-    },
+        if (Ext.Array.indexOf(axis, 'left') > -1) {
+            yAxis = 'left';
+        } else if (Ext.Array.indexOf(axis, 'right') > -1) {
+            yAxis = 'right';
+        } else {
+            if (axes.get('left')) {
+                yAxis = 'left';
+            } else if (axes.get('right')) {
+                yAxis = 'right';
+            }
+        }
 
-     
-     applyData: function() {
-        this.setLabels();
-        var count = this.chart.substore.getCount();
-         return {
-             from: 0,
-             to: count,
-             steps: count - 1,
-             step: 1
-         };
-     }
- });
+        return {
+            xAxis: xAxis,
+            yAxis: yAxis
+        };
+    }
 
 
+});
 
-Ext.define('Ext.chart.series.Series', {
+
+Ext.define('Ext.chart.series.Area', {
 
     
 
-    mixins: {
-        observable: 'Ext.util.Observable',
-        labels: 'Ext.chart.Label',
-        highlights: 'Ext.chart.Highlight',
-        tips: 'Ext.chart.Tip',
-        callouts: 'Ext.chart.Callout'
-    },
+    extend: 'Ext.chart.series.Cartesian',
 
-    
+    alias: 'series.area',
 
-    
+    requires: ['Ext.chart.axis.Axis', 'Ext.draw.Color', 'Ext.fx.Anim'],
 
     
 
-    
-    type: null,
+    type: 'area',
 
     
-    title: null,
+    stacked: true,
 
     
-    showInLegend: true,
+    style: {},
 
-    
-    renderer: function(sprite, record, attributes, index, store) {
-        return attributes;
+    constructor: function(config) {
+        this.callParent(arguments);
+        var me = this,
+            surface = me.chart.surface,
+            i, l;
+        Ext.apply(me, config, {
+            __excludes: [],
+            highlightCfg: {
+                lineWidth: 3,
+                stroke: '#55c',
+                opacity: 0.8,
+                color: '#f00'
+            }
+        });
+        if (me.highlight) {
+            me.highlightSprite = surface.add({
+                type: 'path',
+                path: ['M', 0, 0],
+                zIndex: 1000,
+                opacity: 0.3,
+                lineWidth: 5,
+                hidden: true,
+                stroke: '#444'
+            });
+        }
+        me.group = surface.getGroup(me.seriesId);
     },
 
     
-    shadowAttributes: null,
+    shrink: function(xValues, yValues, size) {
+        var len = xValues.length,
+            ratio = Math.floor(len / size),
+            i, j,
+            xSum = 0,
+            yCompLen = this.areas.length,
+            ySum = [],
+            xRes = [],
+            yRes = [];
+        
+        for (j = 0; j < yCompLen; ++j) {
+            ySum[j] = 0;
+        }
+        for (i = 0; i < len; ++i) {
+            xSum += xValues[i];
+            for (j = 0; j < yCompLen; ++j) {
+                ySum[j] += yValues[i][j];
+            }
+            if (i % ratio == 0) {
+                
+                xRes.push(xSum/ratio);
+                for (j = 0; j < yCompLen; ++j) {
+                    ySum[j] /= ratio;
+                }
+                yRes.push(ySum);
+                
+                xSum = 0;
+                for (j = 0, ySum = []; j < yCompLen; ++j) {
+                    ySum[j] = 0;
+                }
+            }
+        }
+        return {
+            x: xRes,
+            y: yRes
+        };
+    },
+
     
-    //@private triggerdrawlistener flag
+    getBounds: function() {
+        var me = this,
+            chart = me.chart,
+            store = chart.getChartStore(),
+            areas = [].concat(me.yField),
+            areasLen = areas.length,
+            xValues = [],
+            yValues = [],
+            infinity = Infinity,
+            minX = infinity,
+            minY = infinity,
+            maxX = -infinity,
+            maxY = -infinity,
+            math = Math,
+            mmin = math.min,
+            mmax = math.max,
+            bbox, xScale, yScale, xValue, yValue, areaIndex, acumY, ln, sumValues, clipBox, areaElem;
 
-    triggerAfterDraw: false,
+        me.setBBox();
+        bbox = me.bbox;
 
-    
-    
-    constructor: function(config) {
-        var me = this;
-        if (config) {
-            Ext.apply(me, config);
-        }
         
-        me.shadowGroups = [];
-        
-        me.mixins.labels.constructor.call(me, config);
-        me.mixins.highlights.constructor.call(me, config);
-        me.mixins.tips.constructor.call(me, config);
-        me.mixins.callouts.constructor.call(me, config);
+        if (me.axis) {
+            axis = chart.axes.get(me.axis);
+            if (axis) {
+                out = axis.calcEnds();
+                minY = out.from || axis.prevMin;
+                maxY = mmax(out.to || axis.prevMax, 0);
+            }
+        }
 
-        me.addEvents({
-            scope: me,
-            itemmouseover: true,
-            itemmouseout: true,
-            itemmousedown: true,
-            itemmouseup: true,
-            mouseleave: true,
-            afterdraw: true,
+        if (me.yField && !Ext.isNumber(minY)) {
+            axis = Ext.create('Ext.chart.axis.Axis', {
+                chart: chart,
+                fields: [].concat(me.yField)
+            });
+            out = axis.calcEnds();
+            minY = out.from || axis.prevMin;
+            maxY = mmax(out.to || axis.prevMax, 0);
+        }
 
-            
-            titlechange: true
-        });
+        if (!Ext.isNumber(minY)) {
+            minY = 0;
+        }
+        if (!Ext.isNumber(maxY)) {
+            maxY = 0;
+        }
 
-        me.mixins.observable.constructor.call(me, config);
+        store.each(function(record, i) {
+            xValue = record.get(me.xField);
+            yValue = [];
+            if (typeof xValue != 'number') {
+                xValue = i;
+            }
+            xValues.push(xValue);
+            acumY = 0;
+            for (areaIndex = 0; areaIndex < areasLen; areaIndex++) {
+                areaElem = record.get(areas[areaIndex]);
+                if (typeof areaElem == 'number') {
+                    minY = mmin(minY, areaElem);
+                    yValue.push(areaElem);
+                    acumY += areaElem;
+                }
+            }
+            minX = mmin(minX, xValue);
+            maxX = mmax(maxX, xValue);
+            maxY = mmax(maxY, acumY);
+            yValues.push(yValue);
+        }, me);
 
-        me.on({
-            scope: me,
-            itemmouseover: me.onItemMouseOver,
-            itemmouseout: me.onItemMouseOut,
-            mouseleave: me.onMouseLeave
-        });
+        xScale = bbox.width / ((maxX - minX) || 1);
+        yScale = bbox.height / ((maxY - minY) || 1);
+
+        ln = xValues.length;
+        if ((ln > bbox.width) && me.areas) {
+            sumValues = me.shrink(xValues, yValues, bbox.width);
+            xValues = sumValues.x;
+            yValues = sumValues.y;
+        }
+
+        return {
+            bbox: bbox,
+            minX: minX,
+            minY: minY,
+            xValues: xValues,
+            yValues: yValues,
+            xScale: xScale,
+            yScale: yScale,
+            areasLen: areasLen
+        };
     },
 
     
-    setBBox: function(noGutter) {
+    getPaths: function() {
         var me = this,
             chart = me.chart,
-            chartBBox = chart.chartBBox,
-            gutterX = noGutter ? 0 : chart.maxGutter[0],
-            gutterY = noGutter ? 0 : chart.maxGutter[1],
-            clipBox, bbox;
+            store = chart.getChartStore(),
+            first = true,
+            bounds = me.getBounds(),
+            bbox = bounds.bbox,
+            items = me.items = [],
+            componentPaths = [],
+            componentPath,
+            paths = [],
+            i, ln, x, y, xValue, yValue, acumY, areaIndex, prevAreaIndex, areaElem, path;
 
-        clipBox = {
-            x: chartBBox.x,
-            y: chartBBox.y,
-            width: chartBBox.width,
-            height: chartBBox.height
-        };
-        me.clipBox = clipBox;
+        ln = bounds.xValues.length;
+        
+        for (i = 0; i < ln; i++) {
+            xValue = bounds.xValues[i];
+            yValue = bounds.yValues[i];
+            x = bbox.x + (xValue - bounds.minX) * bounds.xScale;
+            acumY = 0;
+            for (areaIndex = 0; areaIndex < bounds.areasLen; areaIndex++) {
+                
+                if (me.__excludes[areaIndex]) {
+                    continue;
+                }
+                if (!componentPaths[areaIndex]) {
+                    componentPaths[areaIndex] = [];
+                }
+                areaElem = yValue[areaIndex];
+                acumY += areaElem;
+                y = bbox.y + bbox.height - (acumY - bounds.minY) * bounds.yScale;
+                if (!paths[areaIndex]) {
+                    paths[areaIndex] = ['M', x, y];
+                    componentPaths[areaIndex].push(['L', x, y]);
+                } else {
+                    paths[areaIndex].push('L', x, y);
+                    componentPaths[areaIndex].push(['L', x, y]);
+                }
+                if (!items[areaIndex]) {
+                    items[areaIndex] = {
+                        pointsUp: [],
+                        pointsDown: [],
+                        series: me
+                    };
+                }
+                items[areaIndex].pointsUp.push([x, y]);
+            }
+        }
 
-        bbox = {
-            x: (clipBox.x + gutterX) - (chart.zoom.x * chart.zoom.width),
-            y: (clipBox.y + gutterY) - (chart.zoom.y * chart.zoom.height),
-            width: (clipBox.width - (gutterX * 2)) * chart.zoom.width,
-            height: (clipBox.height - (gutterY * 2)) * chart.zoom.height
+        
+        for (areaIndex = 0; areaIndex < bounds.areasLen; areaIndex++) {
+            
+            if (me.__excludes[areaIndex]) {
+                continue;
+            }
+            path = paths[areaIndex];
+            
+            if (areaIndex == 0 || first) {
+                first = false;
+                path.push('L', x, bbox.y + bbox.height,
+                          'L', bbox.x, bbox.y + bbox.height,
+                          'Z');
+            }
+            
+            else {
+                componentPath = componentPaths[prevAreaIndex];
+                componentPath.reverse();
+                path.push('L', x, componentPath[0][2]);
+                for (i = 0; i < ln; i++) {
+                    path.push(componentPath[i][0],
+                              componentPath[i][1],
+                              componentPath[i][2]);
+                    items[areaIndex].pointsDown[ln -i -1] = [componentPath[i][1], componentPath[i][2]];
+                }
+                path.push('L', bbox.x, path[2], 'Z');
+            }
+            prevAreaIndex = areaIndex;
+        }
+        return {
+            paths: paths,
+            areasLen: bounds.areasLen
         };
-        me.bbox = bbox;
     },
 
     
-    onAnimate: function(sprite, attr) {
-        var me = this;
-        sprite.stopAnimation();
-        if (me.triggerAfterDraw) {
-            return sprite.animate(Ext.applyIf(attr, me.chart.animate));
-        } else {
-            me.triggerAfterDraw = true;
-            return sprite.animate(Ext.apply(Ext.applyIf(attr, me.chart.animate), {
-                listeners: {
-                    'afteranimate': function() {
-                        me.triggerAfterDraw = false;
-                        me.fireEvent('afterrender');
-                    }    
-                }    
-            }));
+    drawSeries: function() {
+        var me = this,
+            chart = me.chart,
+            store = chart.getChartStore(),
+            surface = chart.surface,
+            animate = chart.animate,
+            group = me.group,
+            endLineStyle = Ext.apply(me.seriesStyle, me.style),
+            colorArrayStyle = me.colorArrayStyle,
+            colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
+            areaIndex, areaElem, paths, path, rendererAttributes;
+
+        me.unHighlightItem();
+        me.cleanHighlights();
+
+        if (!store || !store.getCount()) {
+            return;
+        }
+
+        paths = me.getPaths();
+
+        if (!me.areas) {
+            me.areas = [];
+        }
+
+        for (areaIndex = 0; areaIndex < paths.areasLen; areaIndex++) {
+            
+            if (me.__excludes[areaIndex]) {
+                continue;
+            }
+            if (!me.areas[areaIndex]) {
+                me.items[areaIndex].sprite = me.areas[areaIndex] = surface.add(Ext.apply({}, {
+                    type: 'path',
+                    group: group,
+                    
+                    path: paths.paths[areaIndex],
+                    stroke: endLineStyle.stroke || colorArrayStyle[areaIndex % colorArrayLength],
+                    fill: colorArrayStyle[areaIndex % colorArrayLength]
+                }, endLineStyle || {}));
+            }
+            areaElem = me.areas[areaIndex];
+            path = paths.paths[areaIndex];
+            if (animate) {
+                
+                rendererAttributes = me.renderer(areaElem, false, {
+                    path: path,
+                    
+                    fill: colorArrayStyle[areaIndex % colorArrayLength],
+                    stroke: endLineStyle.stroke || colorArrayStyle[areaIndex % colorArrayLength]
+                }, areaIndex, store);
+                
+                me.animation = me.onAnimate(areaElem, {
+                    to: rendererAttributes
+                });
+            } else {
+                rendererAttributes = me.renderer(areaElem, false, {
+                    path: path,
+                    
+                    hidden: false,
+                    fill: colorArrayStyle[areaIndex % colorArrayLength],
+                    stroke: endLineStyle.stroke || colorArrayStyle[areaIndex % colorArrayLength]
+                }, areaIndex, store);
+                me.areas[areaIndex].setAttributes(rendererAttributes, true);
+            }
         }
+        me.renderLabels();
+        me.renderCallouts();
     },
+
     
-    
-    getGutters: function() {
-        return [0, 0];
+    onAnimate: function(sprite, attr) {
+        sprite.show();
+        return this.callParent(arguments);
     },
 
     
-    onItemMouseOver: function(item) { 
-        var me = this;
-        if (item.series === me) {
-            if (me.highlight) {
-                me.highlightItem(item);
-            }
-            if (me.tooltip) {
-                me.showTip(item);
-            }
-        }
+    onCreateLabel: function(storeItem, item, i, display) {
+        var me = this,
+            group = me.labelsGroup,
+            config = me.label,
+            bbox = me.bbox,
+            endLabelStyle = Ext.apply(config, me.seriesLabelStyle);
+
+        return me.chart.surface.add(Ext.apply({
+            'type': 'text',
+            'text-anchor': 'middle',
+            'group': group,
+            'x': item.point[0],
+            'y': bbox.y + bbox.height / 2
+        }, endLabelStyle || {}));
     },
 
-    
-    onItemMouseOut: function(item) {
-        var me = this;
-        if (item.series === me) {
-            me.unHighlightItem();
-            if (me.tooltip) {
-                me.hideTip(item);
+    
+    onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
+        var me = this,
+            chart = me.chart,
+            resizing = chart.resizing,
+            config = me.label,
+            format = config.renderer,
+            field = config.field,
+            bbox = me.bbox,
+            x = item.point[0],
+            y = item.point[1],
+            bb, width, height;
+
+        label.setAttributes({
+            text: format(storeItem.get(field[index])),
+            hidden: true
+        }, true);
+
+        bb = label.getBBox();
+        width = bb.width / 2;
+        height = bb.height / 2;
+
+        x = x - width < bbox.x? bbox.x + width : x;
+        x = (x + width > bbox.x + bbox.width) ? (x - (x + width - bbox.x - bbox.width)) : x;
+        y = y - height < bbox.y? bbox.y + height : y;
+        y = (y + height > bbox.y + bbox.height) ? (y - (y + height - bbox.y - bbox.height)) : y;
+
+        if (me.chart.animate && !me.chart.resizing) {
+            label.show(true);
+            me.onAnimate(label, {
+                to: {
+                    x: x,
+                    y: y
+                }
+            });
+        } else {
+            label.setAttributes({
+                x: x,
+                y: y
+            }, true);
+            if (resizing) {
+                me.animation.on('afteranimate', function() {
+                    label.show(true);
+                });
+            } else {
+                label.show(true);
             }
         }
     },
 
     
-    onMouseLeave: function() {
-        var me = this;
-        me.unHighlightItem();
-        if (me.tooltip) {
-            me.hideTip();
+    onPlaceCallout : function(callout, storeItem, item, i, display, animate, index) {
+        var me = this,
+            chart = me.chart,
+            surface = chart.surface,
+            resizing = chart.resizing,
+            config = me.callouts,
+            items = me.items,
+            prev = (i == 0) ? false : items[i -1].point,
+            next = (i == items.length -1) ? false : items[i +1].point,
+            cur = item.point,
+            dir, norm, normal, a, aprev, anext,
+            bbox = callout.label.getBBox(),
+            offsetFromViz = 30,
+            offsetToSide = 10,
+            offsetBox = 3,
+            boxx, boxy, boxw, boxh,
+            p, clipRect = me.clipRect,
+            x, y;
+
+        
+        if (!prev) {
+            prev = cur;
         }
-    },
+        if (!next) {
+            next = cur;
+        }
+        a = (next[1] - prev[1]) / (next[0] - prev[0]);
+        aprev = (cur[1] - prev[1]) / (cur[0] - prev[0]);
+        anext = (next[1] - cur[1]) / (next[0] - cur[0]);
+
+        norm = Math.sqrt(1 + a * a);
+        dir = [1 / norm, a / norm];
+        normal = [-dir[1], dir[0]];
 
-    
-    getItemForPoint: function(x, y) {
         
-        if (!this.items || !this.items.length || this.seriesIsHidden) {
-            return null;
+        if (aprev > 0 && anext < 0 && normal[1] < 0 || aprev < 0 && anext > 0 && normal[1] > 0) {
+            normal[0] *= -1;
+            normal[1] *= -1;
+        } else if (Math.abs(aprev) < Math.abs(anext) && normal[0] < 0 || Math.abs(aprev) > Math.abs(anext) && normal[0] > 0) {
+            normal[0] *= -1;
+            normal[1] *= -1;
         }
-        var me = this,
-            items = me.items,
-            bbox = me.bbox,
-            item, i, ln;
+
         
-        if (!Ext.draw.Draw.withinBox(x, y, bbox)) {
-            return null;
+        x = cur[0] + normal[0] * offsetFromViz;
+        y = cur[1] + normal[1] * offsetFromViz;
+
+        
+        boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
+        boxy = y - bbox.height /2 - offsetBox;
+        boxw = bbox.width + 2 * offsetBox;
+        boxh = bbox.height + 2 * offsetBox;
+
+        
+        
+        if (boxx < clipRect[0] || (boxx + boxw) > (clipRect[0] + clipRect[2])) {
+            normal[0] *= -1;
         }
-        for (i = 0, ln = items.length; i < ln; i++) {
-            if (items[i] && this.isItemInPoint(x, y, items[i], i)) {
-                return items[i];
-            }
+        if (boxy < clipRect[1] || (boxy + boxh) > (clipRect[1] + clipRect[3])) {
+            normal[1] *= -1;
         }
-        
-        return null;
-    },
-    
-    isItemInPoint: function(x, y, item, i) {
-        return false;
-    },
 
-    
-    hideAll: function() {
-        var me = this,
-            items = me.items,
-            item, len, i, sprite;
+        
+        x = cur[0] + normal[0] * offsetFromViz;
+        y = cur[1] + normal[1] * offsetFromViz;
 
-        me.seriesIsHidden = true;
-        me._prevShowMarkers = me.showMarkers;
+        
+        boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
+        boxy = y - bbox.height /2 - offsetBox;
+        boxw = bbox.width + 2 * offsetBox;
+        boxh = bbox.height + 2 * offsetBox;
 
-        me.showMarkers = false;
         
-        me.hideLabels(0);
+        callout.lines.setAttributes({
+            path: ["M", cur[0], cur[1], "L", x, y, "Z"]
+        }, true);
         
-        for (i = 0, len = items.length; i < len; i++) {
-            item = items[i];
-            sprite = item.sprite;
-            if (sprite) {
-                sprite.setAttributes({
-                    hidden: true
-                }, true);
-            }
+        callout.box.setAttributes({
+            x: boxx,
+            y: boxy,
+            width: boxw,
+            height: boxh
+        }, true);
+        
+        callout.label.setAttributes({
+            x: x + (normal[0] > 0? offsetBox : -(bbox.width + offsetBox)),
+            y: y
+        }, true);
+        for (p in callout) {
+            callout[p].show(true);
         }
     },
 
-    
-    showAll: function() {
+    isItemInPoint: function(x, y, item, i) {
         var me = this,
-            prevAnimate = me.chart.animate;
-        me.chart.animate = false;
-        me.seriesIsHidden = false;
-        me.showMarkers = me._prevShowMarkers;
-        me.drawSeries();
-        me.chart.animate = prevAnimate;
+            pointsUp = item.pointsUp,
+            pointsDown = item.pointsDown,
+            abs = Math.abs,
+            dist = Infinity, p, pln, point;
+
+        for (p = 0, pln = pointsUp.length; p < pln; p++) {
+            point = [pointsUp[p][0], pointsUp[p][1]];
+            if (dist > abs(x - point[0])) {
+                dist = abs(x - point[0]);
+            } else {
+                point = pointsUp[p -1];
+                if (y >= point[1] && (!pointsDown.length || y <= (pointsDown[p -1][1]))) {
+                    item.storeIndex = p -1;
+                    item.storeField = me.yField[i];
+                    item.storeItem = me.chart.store.getAt(p -1);
+                    item._points = pointsDown.length? [point, pointsDown[p -1]] : [point];
+                    return true;
+                } else {
+                    break;
+                }
+            }
+        }
+        return false;
     },
+
     
-    
-    getLegendColor: function(index) {
-        var me = this, fill, stroke;
-        if (me.seriesStyle) {
-            fill = me.seriesStyle.fill;
-            stroke = me.seriesStyle.stroke;
-            if (fill && fill != 'none') {
-                return fill;
+    highlightSeries: function() {
+        var area, to, fillColor;
+        if (this._index !== undefined) {
+            area = this.areas[this._index];
+            if (area.__highlightAnim) {
+                area.__highlightAnim.paused = true;
+            }
+            area.__highlighted = true;
+            area.__prevOpacity = area.__prevOpacity || area.attr.opacity || 1;
+            area.__prevFill = area.__prevFill || area.attr.fill;
+            area.__prevLineWidth = area.__prevLineWidth || area.attr.lineWidth;
+            fillColor = Ext.draw.Color.fromString(area.__prevFill);
+            to = {
+                lineWidth: (area.__prevLineWidth || 0) + 2
+            };
+            if (fillColor) {
+                to.fill = fillColor.getLighter(0.2).toString();
+            }
+            else {
+                to.opacity = Math.max(area.__prevOpacity - 0.3, 0);
+            }
+            if (this.chart.animate) {
+                area.__highlightAnim = Ext.create('Ext.fx.Anim', Ext.apply({
+                    target: area,
+                    to: to
+                }, this.chart.animate));
+            }
+            else {
+                area.setAttributes(to, true);
             }
-            return stroke;
         }
-        return '#000';
     },
+
     
-    
-    visibleInLegend: function(index){
-        var excludes = this.__excludes;
-        if (excludes) {
-            return !excludes[index];
+    unHighlightSeries: function() {
+        var area;
+        if (this._index !== undefined) {
+            area = this.areas[this._index];
+            if (area.__highlightAnim) {
+                area.__highlightAnim.paused = true;
+            }
+            if (area.__highlighted) {
+                area.__highlighted = false;
+                area.__highlightAnim = Ext.create('Ext.fx.Anim', {
+                    target: area,
+                    to: {
+                        fill: area.__prevFill,
+                        opacity: area.__prevOpacity,
+                        lineWidth: area.__prevLineWidth
+                    }
+                });
+            }
         }
-        return !this.seriesIsHidden;
     },
 
     
-    setTitle: function(index, title) {
+    highlightItem: function(item) {
         var me = this,
-            oldTitle = me.title;
-
-        if (Ext.isString(index)) {
-            title = index;
-            index = 0;
-        }
-
-        if (Ext.isArray(oldTitle)) {
-            oldTitle[index] = title;
-        } else {
-            me.title = title;
+            points, path;
+        if (!item) {
+            this.highlightSeries();
+            return;
         }
-
-        me.fireEvent('titlechange', title, index);
-    }
-});
-
-
-Ext.define('Ext.chart.series.Cartesian', {
+        points = item._points;
+        path = points.length == 2? ['M', points[0][0], points[0][1], 'L', points[1][0], points[1][1]]
+                : ['M', points[0][0], points[0][1], 'L', points[0][0], me.bbox.y + me.bbox.height];
+        me.highlightSprite.setAttributes({
+            path: path,
+            hidden: false
+        }, true);
+    },
 
     
+    unHighlightItem: function(item) {
+        if (!item) {
+            this.unHighlightSeries();
+        }
 
-    extend: 'Ext.chart.series.Series',
-
-    alternateClassName: ['Ext.chart.CartesianSeries', 'Ext.chart.CartesianChart'],
-
-    
+        if (this.highlightSprite) {
+            this.highlightSprite.hide(true);
+        }
+    },
 
     
-    xField: null,
+    hideAll: function() {
+        if (!isNaN(this._index)) {
+            this.__excludes[this._index] = true;
+            this.areas[this._index].hide(true);
+            this.drawSeries();
+        }
+    },
 
     
-    yField: null,
+    showAll: function() {
+        if (!isNaN(this._index)) {
+            this.__excludes[this._index] = false;
+            this.areas[this._index].show(true);
+            this.drawSeries();
+        }
+    },
 
     
-    axis: 'left'
+    getLegendColor: function(index) {
+        var me = this;
+        return me.colorArrayStyle[index % me.colorArrayStyle.length];
+    }
 });
 
-
 Ext.define('Ext.chart.series.Area', {
 
     
 
     extend: 'Ext.chart.series.Cartesian',
-    
+
     alias: 'series.area',
 
     requires: ['Ext.chart.axis.Axis', 'Ext.draw.Color', 'Ext.fx.Anim'],
@@ -46278,7 +47553,7 @@ Ext.define('Ext.chart.series.Area', {
     getBounds: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             areas = [].concat(me.yField),
             areasLen = areas.length,
             xValues = [],
@@ -46345,8 +47620,8 @@ Ext.define('Ext.chart.series.Area', {
             yValues.push(yValue);
         }, me);
 
-        xScale = bbox.width / (maxX - minX);
-        yScale = bbox.height / (maxY - minY);
+        xScale = bbox.width / ((maxX - minX) || 1);
+        yScale = bbox.height / ((maxY - minY) || 1);
 
         ln = xValues.length;
         if ((ln > bbox.width) && me.areas) {
@@ -46371,7 +47646,7 @@ Ext.define('Ext.chart.series.Area', {
     getPaths: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             first = true,
             bounds = me.getBounds(),
             bbox = bounds.bbox,
@@ -46416,7 +47691,7 @@ Ext.define('Ext.chart.series.Area', {
                 items[areaIndex].pointsUp.push([x, y]);
             }
         }
-        
+
         
         for (areaIndex = 0; areaIndex < bounds.areasLen; areaIndex++) {
             
@@ -46456,7 +47731,7 @@ Ext.define('Ext.chart.series.Area', {
     drawSeries: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             surface = chart.surface,
             animate = chart.animate,
             group = me.group,
@@ -46471,7 +47746,7 @@ Ext.define('Ext.chart.series.Area', {
         if (!store || !store.getCount()) {
             return;
         }
-        
+
         paths = me.getPaths();
 
         if (!me.areas) {
@@ -46497,7 +47772,7 @@ Ext.define('Ext.chart.series.Area', {
             path = paths.paths[areaIndex];
             if (animate) {
                 
-                rendererAttributes = me.renderer(areaElem, false, { 
+                rendererAttributes = me.renderer(areaElem, false, {
                     path: path,
                     
                     fill: colorArrayStyle[areaIndex % colorArrayLength],
@@ -46508,7 +47783,7 @@ Ext.define('Ext.chart.series.Area', {
                     to: rendererAttributes
                 });
             } else {
-                rendererAttributes = me.renderer(areaElem, false, { 
+                rendererAttributes = me.renderer(areaElem, false, {
                     path: path,
                     
                     hidden: false,
@@ -46557,16 +47832,16 @@ Ext.define('Ext.chart.series.Area', {
             x = item.point[0],
             y = item.point[1],
             bb, width, height;
-        
+
         label.setAttributes({
             text: format(storeItem.get(field[index])),
             hidden: true
         }, true);
-        
+
         bb = label.getBBox();
         width = bb.width / 2;
         height = bb.height / 2;
-        
+
         x = x - width < bbox.x? bbox.x + width : x;
         x = (x + width > bbox.x + bbox.width) ? (x - (x + width - bbox.x - bbox.width)) : x;
         y = y - height < bbox.y? bbox.y + height : y;
@@ -46625,11 +47900,11 @@ Ext.define('Ext.chart.series.Area', {
         a = (next[1] - prev[1]) / (next[0] - prev[0]);
         aprev = (cur[1] - prev[1]) / (cur[0] - prev[0]);
         anext = (next[1] - cur[1]) / (next[0] - cur[0]);
-        
+
         norm = Math.sqrt(1 + a * a);
         dir = [1 / norm, a / norm];
         normal = [-dir[1], dir[0]];
-        
+
         
         if (aprev > 0 && anext < 0 && normal[1] < 0 || aprev < 0 && anext > 0 && normal[1] > 0) {
             normal[0] *= -1;
@@ -46642,13 +47917,13 @@ Ext.define('Ext.chart.series.Area', {
         
         x = cur[0] + normal[0] * offsetFromViz;
         y = cur[1] + normal[1] * offsetFromViz;
-        
+
         
         boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
         boxy = y - bbox.height /2 - offsetBox;
         boxw = bbox.width + 2 * offsetBox;
         boxh = bbox.height + 2 * offsetBox;
-        
+
         
         
         if (boxx < clipRect[0] || (boxx + boxw) > (clipRect[0] + clipRect[2])) {
@@ -46661,13 +47936,13 @@ Ext.define('Ext.chart.series.Area', {
         
         x = cur[0] + normal[0] * offsetFromViz;
         y = cur[1] + normal[1] * offsetFromViz;
-        
+
         
         boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
         boxy = y - bbox.height /2 - offsetBox;
         boxw = bbox.width + 2 * offsetBox;
         boxh = bbox.height + 2 * offsetBox;
-        
+
         
         callout.lines.setAttributes({
             path: ["M", cur[0], cur[1], "L", x, y, "Z"]
@@ -46688,14 +47963,14 @@ Ext.define('Ext.chart.series.Area', {
             callout[p].show(true);
         }
     },
-    
+
     isItemInPoint: function(x, y, item, i) {
         var me = this,
             pointsUp = item.pointsUp,
             pointsDown = item.pointsDown,
             abs = Math.abs,
             dist = Infinity, p, pln, point;
-        
+
         for (p = 0, pln = pointsUp.length; p < pln; p++) {
             point = [pointsUp[p][0], pointsUp[p][1]];
             if (dist > abs(x - point[0])) {
@@ -46843,10 +48118,10 @@ Ext.define('Ext.chart.series.Bar', {
     alias: 'series.bar',
     
     column: false,
-    
+
     
     style: {},
-    
+
     
     gutter: 38.2,
 
@@ -46872,7 +48147,7 @@ Ext.define('Ext.chart.series.Bar', {
                 opacity: 0.8,
                 color: '#f00'
             },
-            
+
             shadowAttributes: [{
                 "stroke-width": 6,
                 "stroke-opacity": 0.05,
@@ -46910,11 +48185,11 @@ Ext.define('Ext.chart.series.Bar', {
     
     getBarGirth: function() {
         var me = this,
-            store = me.chart.store,
+            store = me.chart.getChartStore(),
             column = me.column,
             ln = store.getCount(),
             gutter = me.gutter / 100;
-        
+
         return (me.chart.chartBBox[column ? 'width' : 'height'] - me[column ? 'xPadding' : 'yPadding'] * 2) / (ln * (gutter + 1) - gutter);
     },
 
@@ -46930,7 +48205,7 @@ Ext.define('Ext.chart.series.Bar', {
     getBounds: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             bars = [].concat(me.yField),
             barsLen = bars.length,
             groupBarsLen = barsLen,
@@ -46962,8 +48237,8 @@ Ext.define('Ext.chart.series.Bar', {
             axis = chart.axes.get(me.axis);
             if (axis) {
                 out = axis.calcEnds();
-                minY = out.from || axis.prevMin;
-                maxY = mmax(out.to || axis.prevMax, 0);
+                minY = out.from;
+                maxY = out.to;
             }
         }
 
@@ -46973,8 +48248,8 @@ Ext.define('Ext.chart.series.Bar', {
                 fields: [].concat(me.yField)
             });
             out = axis.calcEnds();
-            minY = out.from || axis.prevMin;
-            maxY = mmax(out.to || axis.prevMax, 0);
+            minY = out.from;
+            maxY = out.to;
         }
 
         if (!Ext.isNumber(minY)) {
@@ -47031,7 +48306,7 @@ Ext.define('Ext.chart.series.Bar', {
     getPaths: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             bounds = me.bounds = me.getBounds(),
             items = me.items = [],
             gutter = me.gutter / 100,
@@ -47062,14 +48337,14 @@ Ext.define('Ext.chart.series.Bar', {
             top = bounds.zero;
             totalDim = 0;
             totalNegDim = 0;
-            hasShadow = false; 
+            hasShadow = false;
             for (j = 0, counter = 0; j < barsLen; j++) {
                 
                 if (me.__excludes && me.__excludes[j]) {
                     continue;
                 }
                 yValue = record.get(bounds.bars[j]);
-                height = Math.round((yValue - ((bounds.minY < 0) ? 0 : bounds.minY)) * bounds.scale);
+                height = Math.round((yValue - mmax(bounds.minY, 0)) * bounds.scale);
                 barAttr = {
                     fill: colors[(barsLen > 1 ? j : 0) % colorLength]
                 };
@@ -47175,7 +48450,7 @@ Ext.define('Ext.chart.series.Bar', {
             shadowGroups = me.shadowGroups,
             shadowAttributes = me.shadowAttributes,
             shadowGroupsLn = shadowGroups.length,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             column = me.column,
             items = me.items,
             shadows = [],
@@ -47231,7 +48506,7 @@ Ext.define('Ext.chart.series.Bar', {
     drawSeries: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             surface = chart.surface,
             animate = chart.animate,
             stacked = me.stacked,
@@ -47243,11 +48518,11 @@ Ext.define('Ext.chart.series.Bar', {
             seriesStyle = me.seriesStyle,
             items, ln, i, j, baseAttrs, sprite, rendererAttributes, shadowIndex, shadowGroup,
             bounds, endSeriesStyle, barAttr, attrs, anim;
-        
+
         if (!store || !store.getCount()) {
             return;
         }
-        
+
         
         delete seriesStyle.fill;
         endSeriesStyle = Ext.apply(seriesStyle, this.style);
@@ -47321,7 +48596,7 @@ Ext.define('Ext.chart.series.Bar', {
         }
         me.renderLabels();
     },
-    
+
     
     onCreateLabel: function(storeItem, item, i, display) {
         var me = this,
@@ -47335,7 +48610,7 @@ Ext.define('Ext.chart.series.Bar', {
             group: group
         }, endLabelStyle || {}));
     },
-    
+
     
     onPlaceLabel: function(label, storeItem, item, i, display, animate, j, index) {
         
@@ -47487,14 +48762,14 @@ Ext.define('Ext.chart.series.Bar', {
         sprite.show();
         return this.callParent(arguments);
     },
-    
+
     isItemInPoint: function(x, y, item) {
         var bbox = item.sprite.getBBox();
         return bbox.x <= x && bbox.y <= y
             && (bbox.x + bbox.width) >= x
             && (bbox.y + bbox.height) >= y;
     },
-    
+
     
     hideAll: function() {
         var axes = this.chart.axes;
@@ -47524,12 +48799,12 @@ Ext.define('Ext.chart.series.Bar', {
             });
         }
     },
-    
+
     
     getLegendColor: function(index) {
         var me = this,
             colorLength = me.colorArrayStyle.length;
-        
+
         if (me.style && me.style.fill) {
             return me.style.fill;
         } else {
@@ -47657,7 +48932,7 @@ Ext.define('Ext.chart.series.Gauge', {
 
     initialize: function() {
         var me = this,
-            store = me.chart.substore || me.chart.store;
+            store = me.chart.getChartStore();
         
         me.yField = [];
         if (me.label.field) {
@@ -47756,7 +49031,7 @@ Ext.define('Ext.chart.series.Gauge', {
     drawSeries: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             group = me.group,
             animate = me.chart.animate,
             axis = me.chart.axes.get(0),
@@ -47983,14 +49258,14 @@ Ext.define('Ext.chart.series.Line', {
     
 
     type: 'line',
-    
+
     alias: 'series.line',
-    
+
     
 
     
     selectionTolerance: 20,
-    
+
     
     showMarkers: true,
 
@@ -47999,7 +49274,7 @@ Ext.define('Ext.chart.series.Line', {
 
     
     style: {},
-    
+
     
     smooth: false,
 
@@ -48050,12 +49325,12 @@ Ext.define('Ext.chart.series.Line', {
             me.markerGroup = surface.getGroup(me.seriesId + '-markers');
         }
         if (shadow) {
-            for (i = 0, l = this.shadowAttributes.length; i < l; i++) {
+            for (i = 0, l = me.shadowAttributes.length; i < l; i++) {
                 me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
             }
         }
     },
-    
+
     
     shrink: function(xValues, yValues, size) {
         
@@ -48066,7 +49341,7 @@ Ext.define('Ext.chart.series.Line', {
             ySum = 0,
             xRes = [xValues[0]],
             yRes = [yValues[0]];
-        
+
         for (; i < len; ++i) {
             xSum += xValues[i] || 0;
             ySum += yValues[i] || 0;
@@ -48087,13 +49362,12 @@ Ext.define('Ext.chart.series.Line', {
     drawSeries: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
-            surface = chart.surface,
-            chartBBox = chart.chartBBox,
+            chartAxes = chart.axes,
+            store = chart.getChartStore(),
+            storeCount = store.getCount(),
+            surface = me.chart.surface,
             bbox = {},
             group = me.group,
-            gutterX = chart.maxGutter[0],
-            gutterY = chart.maxGutter[1],
             showMarkers = me.showMarkers,
             markerGroup = me.markerGroup,
             enableShadows = chart.shadow,
@@ -48103,43 +49377,53 @@ Ext.define('Ext.chart.series.Line', {
             lnsh = shadowGroups.length,
             dummyPath = ["M"],
             path = ["M"],
+            renderPath = ["M"],
+            smoothPath = ["M"],
             markerIndex = chart.markerIndex,
             axes = [].concat(me.axis),
-            shadowGroup,
             shadowBarAttr,
             xValues = [],
+            xValueMap = {},
             yValues = [],
-            storeIndices = [],
-            numericAxis = true,
-            axisCount = 0,
+            yValueMap = {},
             onbreak = false,
+            storeIndices = [],
             markerStyle = me.markerStyle,
-            seriesStyle = me.seriesStyle,
-            seriesLabelStyle = me.seriesLabelStyle,
+            seriesStyle = me.style,
             colorArrayStyle = me.colorArrayStyle,
             colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
-            posHash = {
-                'left': 'right',
-                'right': 'left',
-                'top': 'bottom',
-                'bottom': 'top'
-            },
             isNumber = Ext.isNumber,
-            seriesIdx = me.seriesIdx, shadows, shadow, shindex, fromPath, fill, fillPath, rendererAttributes,
-            x, y, prevX, prevY, firstY, markerCount, i, j, ln, axis, ends, marker, markerAux, item, xValue,
+            seriesIdx = me.seriesIdx, 
+            boundAxes = me.getAxesForXAndYFields(),
+            boundXAxis = boundAxes.xAxis,
+            boundYAxis = boundAxes.yAxis,
+            shadows, shadow, shindex, fromPath, fill, fillPath, rendererAttributes,
+            x, y, prevX, prevY, firstX, firstY, markerCount, i, j, ln, axis, ends, marker, markerAux, item, xValue,
             yValue, coords, xScale, yScale, minX, maxX, minY, maxY, line, animation, endMarkerStyle,
-            endLineStyle, type, props, firstMarker, count, smoothPath, renderPath;
-        
-        
-        if (!store || !store.getCount()) {
+            endLineStyle, type, count, items;
+
+        if (me.fireEvent('beforedraw', me) === false) {
             return;
         }
+
         
+        if (!storeCount || me.seriesIsHidden) {
+            items = this.items;
+            if (items) {
+                for (i = 0, ln = items.length; i < ln; ++i) {
+                    if (items[i].sprite) {
+                        items[i].sprite.hide(true);
+                    }
+                }
+            }
+            return;
+        }
+
         
-        endMarkerStyle = Ext.apply(markerStyle, me.markerConfig);
+        endMarkerStyle = Ext.apply(markerStyle || {}, me.markerConfig);
         type = endMarkerStyle.type;
         delete endMarkerStyle.type;
-        endLineStyle = Ext.apply(seriesStyle, me.style);
+        endLineStyle = seriesStyle;
         
         
         if (!endLineStyle['stroke-width']) {
@@ -48163,133 +49447,97 @@ Ext.define('Ext.chart.series.Line', {
                 }, true);
             }
         }
-        
+
         me.unHighlightItem();
         me.cleanHighlights();
 
         me.setBBox();
         bbox = me.bbox;
-
         me.clipRect = [bbox.x, bbox.y, bbox.width, bbox.height];
-
-        chart.axes.each(function(axis) {
-            
-            
-            
-            
-            if (axis.position == me.axis || axis.position != posHash[me.axis]) {
-                axisCount++;
-                if (axis.type != 'Numeric') {
-                    numericAxis = false;
-                    return;
+        for (i = 0, ln = axes.length; i < ln; i++) {
+            axis = chartAxes.get(axes[i]);
+            if (axis) {
+                ends = axis.calcEnds();
+                if (axis.position == 'top' || axis.position == 'bottom') {
+                    minX = ends.from;
+                    maxX = ends.to;
                 }
-                numericAxis = (numericAxis && axis.type == 'Numeric');
-                if (axis) {
-                    ends = axis.calcEnds();
-                    if (axis.position == 'top' || axis.position == 'bottom') {
-                        minX = ends.from;
-                        maxX = ends.to;
-                    }
-                    else {
-                        minY = ends.from;
-                        maxY = ends.to;
-                    }
+                else {
+                    minY = ends.from;
+                    maxY = ends.to;
                 }
             }
-        });
-        
-        
-        
-        
-        if (numericAxis && axisCount == 1) {
-            numericAxis = false;
         }
         
         
         
-        
-        if (me.xField && !isNumber(minX)) {
-            if (me.axis == 'bottom' || me.axis == 'top') {
-                axis = Ext.create('Ext.chart.axis.Axis', {
-                    chart: chart,
-                    fields: [].concat(me.xField)
-                }).calcEnds();
-                minX = axis.from;
-                maxX = axis.to;
-            } else if (numericAxis) {
-                axis = Ext.create('Ext.chart.axis.Axis', {
-                    chart: chart,
-                    fields: [].concat(me.xField),
-                    forceMinMax: true
-                }).calcEnds();
-                minX = axis.from;
-                maxX = axis.to;
-            }
+        if (me.xField && !isNumber(minX) &&
+            (boundXAxis == 'bottom' || boundXAxis == 'top') && 
+            !chartAxes.get(boundXAxis)) {
+            axis = Ext.create('Ext.chart.axis.Axis', {
+                chart: chart,
+                fields: [].concat(me.xField)
+            }).calcEnds();
+            minX = axis.from;
+            maxX = axis.to;
         }
-        
-        if (me.yField && !isNumber(minY)) {
-            if (me.axis == 'right' || me.axis == 'left') {
-                axis = Ext.create('Ext.chart.axis.Axis', {
-                    chart: chart,
-                    fields: [].concat(me.yField)
-                }).calcEnds();
-                minY = axis.from;
-                maxY = axis.to;
-            } else if (numericAxis) {
-                axis = Ext.create('Ext.chart.axis.Axis', {
-                    chart: chart,
-                    fields: [].concat(me.yField),
-                    forceMinMax: true
-                }).calcEnds();
-                minY = axis.from;
-                maxY = axis.to;
-            }
+        if (me.yField && !isNumber(minY) &&
+            (boundYAxis == 'right' || boundYAxis == 'left') &&
+            !chartAxes.get(boundYAxis)) {
+            axis = Ext.create('Ext.chart.axis.Axis', {
+                chart: chart,
+                fields: [].concat(me.yField)
+            }).calcEnds();
+            minY = axis.from;
+            maxY = axis.to;
         }
-        
         if (isNaN(minX)) {
             minX = 0;
-            xScale = bbox.width / (store.getCount() - 1);
+            xScale = bbox.width / ((storeCount - 1) || 1);
         }
         else {
-            
-            
-            
-            xScale = bbox.width / ((maxX - minX) || (store.getCount() - 1));
+            xScale = bbox.width / ((maxX - minX) || (storeCount -1) || 1);
         }
 
         if (isNaN(minY)) {
             minY = 0;
-            yScale = bbox.height / (store.getCount() - 1);
-        } 
+            yScale = bbox.height / ((storeCount - 1) || 1);
+        }
         else {
-            
-            
-            
-            yScale = bbox.height / ((maxY - minY) || (store.getCount() - 1));
+            yScale = bbox.height / ((maxY - minY) || (storeCount - 1) || 1);
         }
+
         
-        store.each(function(record, i) {
+        me.eachRecord(function(record, i) {
             xValue = record.get(me.xField);
+
+            
+            if (typeof xValue == 'string' || typeof xValue == 'object' && !Ext.isDate(xValue)
+                
+                || boundXAxis && chartAxes.get(boundXAxis) && chartAxes.get(boundXAxis).type == 'Category') {
+                    if (xValue in xValueMap) {
+                        xValue = xValueMap[xValue];
+                    } else {
+                        xValue = xValueMap[xValue] = i;
+                    }
+            }
+
+            
             yValue = record.get(me.yField);
             
             if (typeof yValue == 'undefined' || (typeof yValue == 'string' && !yValue)) {
                 return;
             }
             
-            if (typeof xValue == 'string' || typeof xValue == 'object'
-                
-                || (me.axis != 'top' && me.axis != 'bottom' && !numericAxis)) {
-                xValue = i;
-            }
-            if (typeof yValue == 'string' || typeof yValue == 'object'
+            if (typeof yValue == 'string' || typeof yValue == 'object' && !Ext.isDate(yValue)
                 
-                || (me.axis != 'left' && me.axis != 'right' && !numericAxis)) {
+                || boundYAxis && chartAxes.get(boundYAxis) && chartAxes.get(boundYAxis).type == 'Category') {
                 yValue = i;
             }
             storeIndices.push(i);
             xValues.push(xValue);
             yValues.push(yValue);
-        }, me);
+        });
 
         ln = xValues.length;
         if (ln > bbox.width) {
@@ -48318,11 +49566,12 @@ Ext.define('Ext.chart.series.Line', {
                 if (onbreak) {
                     onbreak = false;
                     path.push('M');
-                } 
+                }
                 path = path.concat([x, y]);
             }
             if ((typeof firstY == 'undefined') && (typeof y != 'undefined')) {
                 firstY = y;
+                firstX = x;
             }
             
             if (!me.line || chart.resizing) {
@@ -48357,15 +49606,16 @@ Ext.define('Ext.chart.series.Line', {
                         group: [group, markerGroup],
                         x: 0, y: 0,
                         translate: {
-                            x: prevX || x, 
+                            x: +(prevX || x),
                             y: prevY || (bbox.y + bbox.height / 2)
                         },
-                        value: '"' + xValue + ', ' + yValue + '"'
+                        value: '"' + xValue + ', ' + yValue + '"',
+                        zIndex: 4000
                     }, endMarkerStyle));
                     marker._to = {
                         translate: {
-                            x: x,
-                            y: y
+                            x: +x,
+                            y: +y
                         }
                     };
                 } else {
@@ -48376,12 +49626,12 @@ Ext.define('Ext.chart.series.Line', {
                     }, true);
                     marker._to = {
                         translate: {
-                            x: x, y: y
+                            x: +x, 
+                            y: +y
                         }
                     };
                 }
             }
-
             me.items.push({
                 series: me,
                 value: [xValue, yValue],
@@ -48392,16 +49642,16 @@ Ext.define('Ext.chart.series.Line', {
             prevX = x;
             prevY = y;
         }
-        
+
         if (path.length <= 1) {
             
-            return;    
+            return;
         }
-    
-        if (smooth) {
+
+        if (me.smooth) {
             smoothPath = Ext.draw.Draw.smooth(path, isNumber(smooth) ? smooth : me.defaultSmoothness);
         }
-        
+
         renderPath = smooth ? smoothPath : path;
 
         
@@ -48413,7 +49663,7 @@ Ext.define('Ext.chart.series.Line', {
         } else {
             fromPath = path;
         }
-        
+
         
         if (!me.line) {
             me.line = surface.add(Ext.apply({
@@ -48422,9 +49672,15 @@ Ext.define('Ext.chart.series.Line', {
                 path: dummyPath,
                 stroke: endLineStyle.stroke || endLineStyle.fill
             }, endLineStyle || {}));
+
+            if (enableShadows) {
+                me.line.setAttributes(Ext.apply({}, me.shadowOptions), true);
+            }
+
             
             me.line.setAttributes({
-                fill: 'none'
+                fill: 'none',
+                zIndex: 3000
             });
             if (!endLineStyle.stroke && colorArrayLength) {
                 me.line.setAttributes({
@@ -48433,11 +49689,11 @@ Ext.define('Ext.chart.series.Line', {
             }
             if (enableShadows) {
                 
-                shadows = me.line.shadows = [];                
+                shadows = me.line.shadows = [];
                 for (shindex = 0; shindex < lnsh; shindex++) {
                     shadowBarAttr = shadowAttributes[shindex];
                     shadowBarAttr = Ext.apply({}, shadowBarAttr, { path: dummyPath });
-                    shadow = chart.surface.add(Ext.apply({}, {
+                    shadow = surface.add(Ext.apply({}, {
                         type: 'path',
                         group: shadowGroups[shindex]
                     }, shadowBarAttr));
@@ -48448,8 +49704,8 @@ Ext.define('Ext.chart.series.Line', {
         if (me.fill) {
             fillPath = renderPath.concat([
                 ["L", x, bbox.y + bbox.height],
-                ["L", bbox.x, bbox.y + bbox.height],
-                ["L", bbox.x, firstY]
+                ["L", firstX, bbox.y + bbox.height],
+                ["L", firstX, firstY]
             ]);
             if (!me.fillPath) {
                 me.fillPath = surface.add({
@@ -48472,6 +49728,7 @@ Ext.define('Ext.chart.series.Line', {
             });
             
             delete rendererAttributes.fill;
+            line.show(true);
             if (chart.markerIndex && me.previousPath) {
                 me.animation = animation = me.onAnimate(line, {
                     to: rendererAttributes,
@@ -48488,6 +49745,7 @@ Ext.define('Ext.chart.series.Line', {
             if (enableShadows) {
                 shadows = line.shadows;
                 for(j = 0; j < lnsh; j++) {
+                    shadows[j].show(true);
                     if (chart.markerIndex && me.previousPath) {
                         me.onAnimate(shadows[j], {
                             to: { path: renderPath },
@@ -48502,10 +49760,12 @@ Ext.define('Ext.chart.series.Line', {
             }
             
             if (fill) {
+                me.fillPath.show(true);
                 me.onAnimate(me.fillPath, {
                     to: Ext.apply({}, {
                         path: fillPath,
-                        fill: endLineStyle.fill || colorArrayStyle[seriesIdx % colorArrayLength]
+                        fill: endLineStyle.fill || colorArrayStyle[seriesIdx % colorArrayLength],
+                        'stroke-width': 0
                     }, endLineStyle || {})
                 });
             }
@@ -48520,13 +49780,18 @@ Ext.define('Ext.chart.series.Line', {
                             me.onAnimate(item, {
                                 to: Ext.apply(rendererAttributes, endMarkerStyle || {})
                             });
+                            item.show(true);
                         }
-                    } 
+                    }
                 }
                 for(; count < markerCount; count++) {
                     item = markerGroup.getAt(count);
                     item.hide(true);
                 }
+
+
+
+
             }
         } else {
             rendererAttributes = me.renderer(me.line, false, { path: renderPath, hidden: false }, i, store);
@@ -48541,13 +49806,15 @@ Ext.define('Ext.chart.series.Line', {
                 shadows = me.line.shadows;
                 for(j = 0; j < lnsh; j++) {
                     shadows[j].setAttributes({
-                        path: renderPath
+                        path: renderPath,
+                        hidden: false
                     }, true);
                 }
             }
             if (me.fill) {
                 me.fillPath.setAttributes({
-                    path: fillPath
+                    path: fillPath,
+                    hidden: false
                 }, true);
             }
             if (showMarkers) {
@@ -48558,8 +49825,9 @@ Ext.define('Ext.chart.series.Line', {
                         if (item) {
                             rendererAttributes = me.renderer(item, store.getAt(i), item._to, i, store);
                             item.setAttributes(Ext.apply(endMarkerStyle || {}, rendererAttributes || {}), true);
+                            item.show(true);
                         }
-                    } 
+                    }
                 }
                 for(; count < markerCount; count++) {
                     item = markerGroup.getAt(count);
@@ -48578,8 +49846,10 @@ Ext.define('Ext.chart.series.Line', {
         }
         me.renderLabels();
         me.renderCallouts();
+
+        me.fireEvent('draw', me);
     },
-    
+
     
     onCreateLabel: function(storeItem, item, i, display) {
         var me = this,
@@ -48596,7 +49866,7 @@ Ext.define('Ext.chart.series.Line', {
             'y': bbox.y + bbox.height / 2
         }, endLabelStyle || {}));
     },
-    
+
     
     onPlaceLabel: function(label, storeItem, item, i, display, animate) {
         var me = this,
@@ -48610,12 +49880,12 @@ Ext.define('Ext.chart.series.Line', {
             y = item.point[1],
             radius = item.sprite.attr.radius,
             bb, width, height;
-        
+
         label.setAttributes({
             text: format(storeItem.get(field)),
             hidden: true
         }, true);
-        
+
         if (display == 'rotate') {
             label.setAttributes({
                 'text-anchor': 'start',
@@ -48632,7 +49902,7 @@ Ext.define('Ext.chart.series.Line', {
             x = x < bbox.x? bbox.x : x;
             x = (x + width > bbox.x + bbox.width)? (x - (x + width - bbox.x - bbox.width)) : x;
             y = (y - height < bbox.y)? bbox.y + height : y;
-        
+
         } else if (display == 'under' || display == 'over') {
             
             bb = item.sprite.getBBox();
@@ -48648,7 +49918,7 @@ Ext.define('Ext.chart.series.Line', {
             y = y - height < bbox.y? bbox.y + height : y;
             y = (y + height > bbox.y + bbox.height) ? (y - (y + height - bbox.y - bbox.height)) : y;
         }
-        
+
         if (me.chart.animate && !me.chart.resizing) {
             label.show(true);
             me.onAnimate(label, {
@@ -48662,7 +49932,7 @@ Ext.define('Ext.chart.series.Line', {
                 x: x,
                 y: y
             }, true);
-            if (resizing) {
+            if (resizing && me.animation) {
                 me.animation.on('afteranimate', function() {
                     label.show(true);
                 });
@@ -48677,20 +49947,20 @@ Ext.define('Ext.chart.series.Line', {
     highlightItem: function() {
         var me = this;
         me.callParent(arguments);
-        if (this.line && !this.highlighted) {
-            if (!('__strokeWidth' in this.line)) {
-                this.line.__strokeWidth = this.line.attr['stroke-width'] || 0;
+        if (me.line && !me.highlighted) {
+            if (!('__strokeWidth' in me.line)) {
+                me.line.__strokeWidth = me.line.attr['stroke-width'] || 0;
             }
-            if (this.line.__anim) {
-                this.line.__anim.paused = true;
+            if (me.line.__anim) {
+                me.line.__anim.paused = true;
             }
-            this.line.__anim = Ext.create('Ext.fx.Anim', {
-                target: this.line,
+            me.line.__anim = Ext.create('Ext.fx.Anim', {
+                target: me.line,
                 to: {
-                    'stroke-width': this.line.__strokeWidth + 3
+                    'stroke-width': me.line.__strokeWidth + 3
                 }
             });
-            this.highlighted = true;
+            me.highlighted = true;
         }
     },
 
@@ -48699,14 +49969,14 @@ Ext.define('Ext.chart.series.Line', {
     unHighlightItem: function() {
         var me = this;
         me.callParent(arguments);
-        if (this.line && this.highlighted) {
-            this.line.__anim = Ext.create('Ext.fx.Anim', {
-                target: this.line,
+        if (me.line && me.highlighted) {
+            me.line.__anim = Ext.create('Ext.fx.Anim', {
+                target: me.line,
                 to: {
-                    'stroke-width': this.line.__strokeWidth
+                    'stroke-width': me.line.__strokeWidth
                 }
             });
-            this.highlighted = false;
+            me.highlighted = false;
         }
     },
 
@@ -48716,7 +49986,7 @@ Ext.define('Ext.chart.series.Line', {
         if (!display) {
             return;
         }
-        
+
         var me = this,
             chart = me.chart,
             surface = chart.surface,
@@ -48748,11 +50018,11 @@ Ext.define('Ext.chart.series.Line', {
         a = (next[1] - prev[1]) / (next[0] - prev[0]);
         aprev = (cur[1] - prev[1]) / (cur[0] - prev[0]);
         anext = (next[1] - cur[1]) / (next[0] - cur[0]);
-        
+
         norm = Math.sqrt(1 + a * a);
         dir = [1 / norm, a / norm];
         normal = [-dir[1], dir[0]];
-        
+
         
         if (aprev > 0 && anext < 0 && normal[1] < 0
             || aprev < 0 && anext > 0 && normal[1] > 0) {
@@ -48772,7 +50042,7 @@ Ext.define('Ext.chart.series.Line', {
         boxy = y - bbox.height /2 - offsetBox;
         boxw = bbox.width + 2 * offsetBox;
         boxh = bbox.height + 2 * offsetBox;
-        
+
         
         
         if (boxx < clipRect[0] || (boxx + boxw) > (clipRect[0] + clipRect[2])) {
@@ -48785,13 +50055,13 @@ Ext.define('Ext.chart.series.Line', {
         
         x = cur[0] + normal[0] * offsetFromViz;
         y = cur[1] + normal[1] * offsetFromViz;
-        
+
         
         boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
         boxy = y - bbox.height /2 - offsetBox;
         boxw = bbox.width + 2 * offsetBox;
         boxh = bbox.height + 2 * offsetBox;
-        
+
         if (chart.animate) {
             
             me.onAnimate(callout.lines, {
@@ -48818,7 +50088,7 @@ Ext.define('Ext.chart.series.Line', {
             callout[p].show(true);
         }
     },
-    
+
     isItemInPoint: function(x, y, item, i) {
         var me = this,
             items = me.items,
@@ -48837,10 +50107,10 @@ Ext.define('Ext.chart.series.Line', {
             yIntersect,
             dist1, dist2, dist, midx, midy,
             sqrt = Math.sqrt, abs = Math.abs;
-        
+
         nextItem = items[i];
         prevItem = i && items[i - 1];
-        
+
         if (i >= ln) {
             prevItem = items[ln - 1];
         }
@@ -48853,22 +50123,22 @@ Ext.define('Ext.chart.series.Line', {
         dist1 = sqrt((x - x1) * (x - x1) + (y - y1) * (y - y1));
         dist2 = sqrt((x - x2) * (x - x2) + (y - y2) * (y - y2));
         dist = Math.min(dist1, dist2);
-        
+
         if (dist <= tolerance) {
             return dist == dist1? prevItem : nextItem;
         }
         return false;
     },
-    
+
     
     toggleAll: function(show) {
         var me = this,
             i, ln, shadow, shadows;
         if (!show) {
-            Ext.chart.series.Line.superclass.hideAll.call(me);
+            Ext.chart.series.Cartesian.prototype.hideAll.call(me);
         }
         else {
-            Ext.chart.series.Line.superclass.showAll.call(me);
+            Ext.chart.series.Cartesian.prototype.showAll.call(me);
         }
         if (me.line) {
             me.line.setAttributes({
@@ -48890,18 +50160,19 @@ Ext.define('Ext.chart.series.Line', {
             }, true);
         }
     },
-    
+
     
     hideAll: function() {
         this.toggleAll(false);
     },
-    
+
     
     showAll: function() {
         this.toggleAll(true);
     }
 });
 
+
 Ext.define('Ext.chart.series.Pie', {
 
     
@@ -48913,7 +50184,7 @@ Ext.define('Ext.chart.series.Pie', {
     
 
     type: "pie",
-    
+
     alias: 'series.pie',
 
     rad: Math.PI / 180,
@@ -48934,10 +50205,10 @@ Ext.define('Ext.chart.series.Pie', {
     showInLegend: false,
 
     
-    
+
     
     style: {},
-    
+
     constructor: function(config) {
         this.callParent(arguments);
         var me = this,
@@ -48952,7 +50223,7 @@ Ext.define('Ext.chart.series.Pie', {
                 }
             }
         });
-        Ext.apply(me, config, {            
+        Ext.apply(me, config, {
             shadowAttributes: [{
                 "stroke-width": 6,
                 "stroke-opacity": 1,
@@ -48990,13 +50261,14 @@ Ext.define('Ext.chart.series.Pie', {
         surface.customAttributes.segment = function(opt) {
             return me.getSegment(opt);
         };
+        me.__excludes = me.__excludes || [];
     },
-    
+
     //@private updates some onbefore render parameters.
 
     initialize: function() {
         var me = this,
-            store = me.chart.substore || me.chart.store;
+            store = me.chart.getChartStore();
         
         me.yField = [];
         if (me.label.field) {
@@ -49012,58 +50284,81 @@ Ext.define('Ext.chart.series.Pie', {
             rad = me.rad,
             cos = Math.cos,
             sin = Math.sin,
-            abs = Math.abs,
             x = me.centerX,
             y = me.centerY,
             x1 = 0, x2 = 0, x3 = 0, x4 = 0,
             y1 = 0, y2 = 0, y3 = 0, y4 = 0,
+            x5 = 0, y5 = 0, x6 = 0, y6 = 0,
             delta = 1e-2,
-            r = opt.endRho - opt.startRho,
             startAngle = opt.startAngle,
             endAngle = opt.endAngle,
             midAngle = (startAngle + endAngle) / 2 * rad,
             margin = opt.margin || 0,
-            flag = abs(endAngle - startAngle) > 180,
             a1 = Math.min(startAngle, endAngle) * rad,
             a2 = Math.max(startAngle, endAngle) * rad,
-            singleSlice = false;
-
-        x += margin * cos(midAngle);
-        y += margin * sin(midAngle);
+            c1 = cos(a1), s1 = sin(a1),
+            c2 = cos(a2), s2 = sin(a2),
+            cm = cos(midAngle), sm = sin(midAngle),
+            flag = 0, hsqr2 = 0.7071067811865476; 
 
-        x1 = x + opt.startRho * cos(a1);
-        y1 = y + opt.startRho * sin(a1);
+        if (a2 - a1 < delta) {
+            return {path: ""};
+        }
 
-        x2 = x + opt.endRho * cos(a1);
-        y2 = y + opt.endRho * sin(a1);
+        if (margin !== 0) {
+            x += margin * cm;
+            y += margin * sm;
+        }
 
-        x3 = x + opt.startRho * cos(a2);
-        y3 = y + opt.startRho * sin(a2);
+        x2 = x + opt.endRho * c1;
+        y2 = y + opt.endRho * s1;
 
-        x4 = x + opt.endRho * cos(a2);
-        y4 = y + opt.endRho * sin(a2);
+        x4 = x + opt.endRho * c2;
+        y4 = y + opt.endRho * s2;
 
-        if (abs(x1 - x3) <= delta && abs(y1 - y3) <= delta) {
-            singleSlice = true;
+        if (Math.abs(x2 - x4) + Math.abs(y2 - y4) < delta) {
+            cm = hsqr2;
+            sm = -hsqr2;
+            flag = 1;
         }
+
+        x6 = x + opt.endRho * cm;
+        y6 = y + opt.endRho * sm;
+
         
-        if (singleSlice) {
+        
+
+        if (opt.startRho !== 0) {
+            x1 = x + opt.startRho * c1;
+            y1 = y + opt.startRho * s1;
+    
+            x3 = x + opt.startRho * c2;
+            y3 = y + opt.startRho * s2;
+    
+            x5 = x + opt.startRho * cm;
+            y5 = y + opt.startRho * sm;
+
             return {
                 path: [
-                ["M", x1, y1],
-                ["L", x2, y2],
-                ["A", opt.endRho, opt.endRho, 0, +flag, 1, x4, y4],
-                ["Z"]]
+                    ["M", x2, y2],
+                    ["A", opt.endRho, opt.endRho, 0, 0, 1, x6, y6], ["L", x6, y6],
+                    ["A", opt.endRho, opt.endRho, 0, flag, 1, x4, y4], ["L", x4, y4],
+                    ["L", x3, y3],
+                    ["A", opt.startRho, opt.startRho, 0, flag, 0, x5, y5], ["L", x5, y5],
+                    ["A", opt.startRho, opt.startRho, 0, 0, 0, x1, y1], ["L", x1, y1],
+                    ["Z"]
+                ]
             };
         } else {
             return {
                 path: [
-                ["M", x1, y1],
-                ["L", x2, y2],
-                ["A", opt.endRho, opt.endRho, 0, +flag, 1, x4, y4],
-                ["L", x3, y3],
-                ["A", opt.startRho, opt.startRho, 0, +flag, 0, x1, y1],
-                ["Z"]]
+                    ["M", x, y],
+                    ["L", x2, y2],
+                    ["A", opt.endRho, opt.endRho, 0, 0, 1, x6, y6], ["L", x6, y6],
+                    ["A", opt.endRho, opt.endRho, 0, flag, 1, x4, y4], ["L", x4, y4],
+                    ["L", x, y],
+                    ["Z"]
+                ]
             };
         }
     },
@@ -49078,11 +50373,10 @@ Ext.define('Ext.chart.series.Pie', {
             startAngle = slice.startAngle,
             endAngle = slice.endAngle,
             donut = +me.donut,
-            a1 = Math.min(startAngle, endAngle) * rad,
-            a2 = Math.max(startAngle, endAngle) * rad,
-            midAngle = -(a1 + (a2 - a1) / 2),
-            xm = x + (item.endRho + item.startRho) / 2 * Math.cos(midAngle),
-            ym = y - (item.endRho + item.startRho) / 2 * Math.sin(midAngle);
+            midAngle = -(startAngle + endAngle) * rad / 2,
+            r = (item.endRho + item.startRho) / 2,
+            xm = x + r * Math.cos(midAngle),
+            ym = y - r * Math.sin(midAngle);
 
         item.middle = {
             x: xm,
@@ -49093,7 +50387,7 @@ Ext.define('Ext.chart.series.Pie', {
     
     drawSeries: function() {
         var me = this,
-            store = me.chart.substore || me.chart.store,
+            store = me.chart.getChartStore(),
             group = me.group,
             animate = me.chart.animate,
             field = me.angleField || me.field || me.xField,
@@ -49127,6 +50421,7 @@ Ext.define('Ext.chart.series.Pie', {
             colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
             gutterX = chart.maxGutter[0],
             gutterY = chart.maxGutter[1],
+            abs = Math.abs,
             rendererAttributes,
             shadowGroup,
             shadowAttr,
@@ -49154,7 +50449,7 @@ Ext.define('Ext.chart.series.Pie', {
             path,
             p,
             spriteOptions, bbox;
-        
+
         Ext.apply(seriesStyle, me.style || {});
 
         me.setBBox();
@@ -49165,12 +50460,12 @@ Ext.define('Ext.chart.series.Pie', {
             colorArrayStyle = me.colorSet;
             colorArrayLength = colorArrayStyle.length;
         }
-        
+
         
         if (!store || !store.getCount()) {
             return;
         }
-        
+
         me.unHighlightItem();
         me.cleanHighlights();
 
@@ -49195,25 +50490,26 @@ Ext.define('Ext.chart.series.Pie', {
             }
         }, this);
 
+        totalField = totalField || 1;
         store.each(function(record, i) {
             if (this.__excludes && this.__excludes[i]) {
-                
-                return;
-            } 
-            value = record.get(field);
-            middleAngle = angle - 360 * value / totalField / 2;
-            
-            if (isNaN(middleAngle)) {
-                middleAngle = 360;
-                value = 1;
-                totalField = 1;
+                value = 0;
+            } else {
+                value = record.get(field);
+                if (first == 0) {
+                    first = 1;
+                }
             }
+
             
-            if (!i || first == 0) {
-                angle = 360 - middleAngle;
-                me.firstAngle = angle;
-                middleAngle = angle - 360 * value / totalField / 2;
+            if (first == 1) {
+                first = 2;
+                me.firstAngle = angle = 360 * value / totalField / 2;
+                for (j = 0; j < i; j++) {
+                    slices[j].startAngle = slices[j].endAngle = me.firstAngle;
+                }
             }
+            
             endAngle = angle - 360 * value / totalField;
             slice = {
                 series: me,
@@ -49229,20 +50525,11 @@ Ext.define('Ext.chart.series.Pie', {
                 slice.rho = me.radius;
             }
             slices[i] = slice;
-            if((slice.startAngle % 360) == (slice.endAngle % 360)) {
-                slice.startAngle -= 0.0001;
-            }
             angle = endAngle;
-            first++;
         }, me);
         
-        
         if (enableShadows) {
             for (i = 0, ln = slices.length; i < ln; i++) {
-                if (this.__excludes && this.__excludes[i]) {
-                    
-                    continue;
-                }
                 slice = slices[i];
                 slice.shadowAttrs = [];
                 for (j = 0, rhoAcum = 0, shadows = []; j < layers; j++) {
@@ -49257,7 +50544,8 @@ Ext.define('Ext.chart.series.Pie', {
                             rho: slice.rho,
                             startRho: rhoAcum + (deltaRho * donut / 100),
                             endRho: rhoAcum + deltaRho
-                        }
+                        },
+                        hidden: !slice.value && (slice.startAngle % 360) == (slice.endAngle % 360)
                     };
                     
                     for (shindex = 0, shadows = []; shindex < lnsh; shindex++) {
@@ -49276,9 +50564,7 @@ Ext.define('Ext.chart.series.Pie', {
                                 to: shadowAttr
                             });
                         } else {
-                            shadowAttr = me.renderer(shadow, store.getAt(i), Ext.apply(shadowAttr, {
-                                hidden: false
-                            }), i, store);
+                            shadowAttr = me.renderer(shadow, store.getAt(i), shadowAttr, i, store);
                             shadow.setAttributes(shadowAttr, true);
                         }
                         shadows.push(shadow);
@@ -49289,10 +50575,6 @@ Ext.define('Ext.chart.series.Pie', {
         }
         
         for (i = 0, ln = slices.length; i < ln; i++) {
-            if (this.__excludes && this.__excludes[i]) {
-                
-                continue;
-            }
             slice = slices[i];
             for (j = 0, rhoAcum = 0; j < layers; j++) {
                 sprite = group.getAt(i * layers + j);
@@ -49306,7 +50588,8 @@ Ext.define('Ext.chart.series.Pie', {
                         rho: slice.rho,
                         startRho: rhoAcum + (deltaRho * donut / 100),
                         endRho: rhoAcum + deltaRho
-                    } 
+                    },
+                    hidden: (!slice.value && (slice.startAngle % 360) == (slice.endAngle % 360))
                 }, Ext.apply(seriesStyle, colorArrayStyle && { fill: colorArrayStyle[(layers > 1? j : i) % colorArrayLength] } || {}));
                 item = Ext.apply({},
                 rendererAttributes.segment, {
@@ -49357,7 +50640,7 @@ Ext.define('Ext.chart.series.Pie', {
                 rhoAcum += deltaRho;
             }
         }
-        
+
         
         ln = group.getCount();
         for (i = 0; i < ln; i++) {
@@ -49390,7 +50673,7 @@ Ext.define('Ext.chart.series.Pie', {
             centerY = me.centerY,
             middle = item.middle,
             endLabelStyle = Ext.apply(me.seriesLabelStyle || {}, config || {});
-        
+
         return me.chart.surface.add(Ext.apply({
             'type': 'text',
             'text-anchor': 'middle',
@@ -49422,9 +50705,13 @@ Ext.define('Ext.chart.series.Pie', {
             theta = Math.atan2(y, x || 1),
             dg = theta * 180 / Math.PI,
             prevDg;
-        
+        if (this.__excludes && this.__excludes[i]) {
+            opt.hidden = true;
+        }
         function fixAngle(a) {
-            if (a < 0) a += 360;
+            if (a < 0) {
+                a += 360;
+            }
             return a % 360;
         }
 
@@ -49468,7 +50755,7 @@ Ext.define('Ext.chart.series.Pie', {
         }
         
         opt.translate = {
-            x: 0, y: 0    
+            x: 0, y: 0
         };
         if (animate && !resizing && (display != 'rotate' || prevDg != null)) {
             me.onAnimate(label, {
@@ -49579,8 +50866,8 @@ Ext.define('Ext.chart.series.Pie', {
             startAngle = item.startAngle,
             endAngle = item.endAngle,
             rho = Math.sqrt(dx * dx + dy * dy),
-            angle = Math.atan2(y - cy, x - cx) / me.rad + 360;
-        
+            angle = Math.atan2(y - cy, x - cx) / me.rad;
+
         
         if (angle > me.firstAngle) {
             angle -= 360;
@@ -49588,7 +50875,7 @@ Ext.define('Ext.chart.series.Pie', {
         return (angle <= startAngle && angle > endAngle
                 && rho >= item.startRho && rho <= item.endRho);
     },
-    
+
     
     hideAll: function() {
         var i, l, shadow, shadows, sh, lsh, sprite;
@@ -49614,7 +50901,7 @@ Ext.define('Ext.chart.series.Pie', {
             this.drawSeries();
         }
     },
-    
+
     
     showAll: function() {
         if (!isNaN(this._index)) {
@@ -49628,13 +50915,13 @@ Ext.define('Ext.chart.series.Pie', {
         var me = this,
             rad = me.rad;
         item = item || this.items[this._index];
-        
+
         
         
         
         
         this.unHighlightItem();
-        
+
         if (!item || item.sprite && item.sprite._animating) {
             return;
         }
@@ -49667,7 +50954,7 @@ Ext.define('Ext.chart.series.Pie', {
                 if (Math.abs(y) < 1e-10) {
                     y = 0;
                 }
-                
+
                 if (animate) {
                     label.stopAnimation();
                     label.animate({
@@ -49806,7 +51093,7 @@ Ext.define('Ext.chart.series.Pie', {
         }
         me.callParent(arguments);
     },
-    
+
     
     getLegendColor: function(index) {
         var me = this;
@@ -49829,14 +51116,14 @@ Ext.define('Ext.chart.series.Radar', {
     type: "radar",
     alias: 'series.radar',
 
-    
+
     rad: Math.PI / 180,
 
     showInLegend: false,
 
     
     style: {},
-    
+
     constructor: function(config) {
         this.callParent(arguments);
         var me = this,
@@ -49850,7 +51137,7 @@ Ext.define('Ext.chart.series.Radar', {
     
     drawSeries: function() {
         var me = this,
-            store = me.chart.substore || me.chart.store,
+            store = me.chart.getChartStore(),
             group = me.group,
             sprite,
             chart = me.chart,
@@ -49876,18 +51163,18 @@ Ext.define('Ext.chart.series.Radar', {
             first = chart.resizing || !me.radar,
             axis = chart.axes && chart.axes.get(0),
             aggregate = !(axis && axis.maximum);
-        
+
         me.setBBox();
 
         maxValue = aggregate? 0 : (axis.maximum || 0);
-        
+
         Ext.apply(seriesStyle, me.style || {});
-        
+
         
         if (!store || !store.getCount()) {
             return;
         }
-        
+
         me.unHighlightItem();
         me.cleanHighlights();
 
@@ -49963,7 +51250,7 @@ Ext.define('Ext.chart.series.Radar', {
         me.renderLabels();
         me.renderCallouts();
     },
-    
+
     
     drawMarkers: function() {
         var me = this,
@@ -49971,15 +51258,15 @@ Ext.define('Ext.chart.series.Radar', {
             surface = chart.surface,
             markerStyle = Ext.apply({}, me.markerStyle || {}),
             endMarkerStyle = Ext.apply(markerStyle, me.markerConfig),
-            items = me.items, 
+            items = me.items,
             type = endMarkerStyle.type,
             markerGroup = me.markerGroup,
             centerX = me.centerX,
             centerY = me.centerY,
             item, i, l, marker;
-        
+
         delete endMarkerStyle.type;
-        
+
         for (i = 0, l = items.length; i < l; i++) {
             item = items[i];
             marker = markerGroup.getAt(i);
@@ -50024,7 +51311,7 @@ Ext.define('Ext.chart.series.Radar', {
             }
         }
     },
-    
+
     isItemInPoint: function(x, y, item) {
         var point,
             tolerance = 10,
@@ -50043,7 +51330,7 @@ Ext.define('Ext.chart.series.Radar', {
             centerY = me.centerY,
             point = item.point,
             endLabelStyle = Ext.apply(me.seriesLabelStyle || {}, config);
-        
+
         return me.chart.surface.add(Ext.apply({
             'type': 'text',
             'text-anchor': 'middle',
@@ -50075,14 +51362,14 @@ Ext.define('Ext.chart.series.Radar', {
             hidden: true
         },
         true);
-        
+
         if (resizing) {
             label.setAttributes({
                 x: centerX,
                 y: centerY
             }, true);
         }
-        
+
         if (animate) {
             label.show(true);
             me.onAnimate(label, {
@@ -50119,18 +51406,18 @@ Ext.define('Ext.chart.series.Radar', {
             }
         }
     },
-    
+
     
     hideAll: function() {
         this.toggleAll(false);
         this.hideMarkers(0);
     },
-    
+
     
     showAll: function() {
         this.toggleAll(true);
     },
-    
+
     
     hideMarkers: function(index) {
         var me = this,
@@ -50158,6 +51445,8 @@ Ext.define('Ext.chart.series.Scatter', {
     alias: 'series.scatter',
 
     
+
+    
     
     
 
@@ -50195,14 +51484,14 @@ Ext.define('Ext.chart.series.Scatter', {
     getBounds: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             axes = [].concat(me.axis),
             bbox, xScale, yScale, ln, minX, minY, maxX, maxY, i, axis, ends;
 
         me.setBBox();
         bbox = me.bbox;
 
-        for (i = 0, ln = axes.length; i < ln; i++) { 
+        for (i = 0, ln = axes.length; i < ln; i++) {
             axis = chart.axes.get(axes[i]);
             if (axis) {
                 ends = axis.calcEnds();
@@ -50247,7 +51536,7 @@ Ext.define('Ext.chart.series.Scatter', {
             minY = 0;
             maxY = store.getCount() - 1;
             yScale = bbox.height / (store.getCount() - 1);
-        } 
+        }
         else {
             yScale = bbox.height / (maxY - minY);
         }
@@ -50266,7 +51555,7 @@ Ext.define('Ext.chart.series.Scatter', {
         var me = this,
             chart = me.chart,
             enableShadows = chart.shadow,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             group = me.group,
             bounds = me.bounds = me.getBounds(),
             bbox = me.bbox,
@@ -50289,10 +51578,10 @@ Ext.define('Ext.chart.series.Scatter', {
                 return;
             }
             
-            if (typeof xValue == 'string' || typeof xValue == 'object') {
+            if (typeof xValue == 'string' || typeof xValue == 'object' && !Ext.isDate(xValue)) {
                 xValue = i;
             }
-            if (typeof yValue == 'string' || typeof yValue == 'object') {
+            if (typeof yValue == 'string' || typeof yValue == 'object' && !Ext.isDate(yValue)) {
                 yValue = i;
             }
             x = boxX + (xValue - minX) * xScale;
@@ -50416,7 +51705,7 @@ Ext.define('Ext.chart.series.Scatter', {
     drawSeries: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             group = me.group,
             enableShadows = chart.shadow,
             shadowGroups = me.shadowGroups,
@@ -50463,23 +51752,28 @@ Ext.define('Ext.chart.series.Scatter', {
                 for (shindex = 0; shindex < lnsh; shindex++) {
                     shadowAttribute = Ext.apply({}, shadowAttributes[shindex]);
                     rendererAttributes = me.renderer(shadows[shindex], store.getAt(i), Ext.apply({}, { 
+                        hidden: false,
                         translate: {
                             x: attr.x + (shadowAttribute.translate? shadowAttribute.translate.x : 0),
                             y: attr.y + (shadowAttribute.translate? shadowAttribute.translate.y : 0)
-                        } 
+                        }
                     }, shadowAttribute), i, store);
                     me.onAnimate(shadows[shindex], { to: rendererAttributes });
                 }
             }
             else {
-                rendererAttributes = me.renderer(sprite, store.getAt(i), Ext.apply({ translate: attr }, { hidden: false }), i, store);
+                rendererAttributes = me.renderer(sprite, store.getAt(i), { translate: attr }, i, store);
+                sprite._to = rendererAttributes;
                 sprite.setAttributes(rendererAttributes, true);
                 
                 for (shindex = 0; shindex < lnsh; shindex++) {
-                    shadowAttribute = shadowAttributes[shindex];
-                    rendererAttributes = me.renderer(shadows[shindex], store.getAt(i), Ext.apply({ 
-                        x: attr.x,
-                        y: attr.y
+                    shadowAttribute = Ext.apply({}, shadowAttributes[shindex]);
+                    rendererAttributes = me.renderer(shadows[shindex], store.getAt(i), Ext.apply({}, { 
+                        hidden: false,
+                        translate: {
+                            x: attr.x + (shadowAttribute.translate? shadowAttribute.translate.x : 0),
+                            y: attr.y + (shadowAttribute.translate? shadowAttribute.translate.y : 0)
+                        } 
                     }, shadowAttribute), i, store);
                     shadows[shindex].setAttributes(rendererAttributes, true);
                 }
@@ -50495,7 +51789,7 @@ Ext.define('Ext.chart.series.Scatter', {
         me.renderLabels();
         me.renderCallouts();
     },
-    
+
     
     onCreateLabel: function(storeItem, item, i, display) {
         var me = this,
@@ -50503,7 +51797,7 @@ Ext.define('Ext.chart.series.Scatter', {
             config = me.label,
             endLabelStyle = Ext.apply({}, config, me.seriesLabelStyle),
             bbox = me.bbox;
-        
+
         return me.chart.surface.add(Ext.apply({
             type: 'text',
             group: group,
@@ -50511,7 +51805,7 @@ Ext.define('Ext.chart.series.Scatter', {
             y: bbox.y + bbox.height / 2
         }, endLabelStyle));
     },
-    
+
     
     onPlaceLabel: function(label, storeItem, item, i, display, animate) {
         var me = this,
@@ -50525,12 +51819,12 @@ Ext.define('Ext.chart.series.Scatter', {
             y = item.point[1],
             radius = item.sprite.attr.radius,
             bb, width, height, anim;
-        
+
         label.setAttributes({
             text: format(storeItem.get(field)),
             hidden: true
         }, true);
-        
+
         if (display == 'rotate') {
             label.setAttributes({
                 'text-anchor': 'start',
@@ -50547,7 +51841,7 @@ Ext.define('Ext.chart.series.Scatter', {
             x = x < bbox.x? bbox.x : x;
             x = (x + width > bbox.x + bbox.width)? (x - (x + width - bbox.x - bbox.width)) : x;
             y = (y - height < bbox.y)? bbox.y + height : y;
-        
+
         } else if (display == 'under' || display == 'over') {
             
             bb = item.sprite.getBBox();
@@ -50581,7 +51875,7 @@ Ext.define('Ext.chart.series.Scatter', {
                             y: y
                         }, true);
                         label.show(true);
-                    });   
+                    });
                 }
                 else {
                     label.show(true);
@@ -50597,7 +51891,7 @@ Ext.define('Ext.chart.series.Scatter', {
             }
         }
     },
-    
+
     
     onPlaceCallout: function(callout, storeItem, item, i, display, animate, index) {
         var me = this,
@@ -50615,18 +51909,18 @@ Ext.define('Ext.chart.series.Scatter', {
             boxx, boxy, boxw, boxh,
             p, clipRect = me.bbox,
             x, y;
-    
+
         
         normal = [Math.cos(Math.PI /4), -Math.sin(Math.PI /4)];
         x = cur[0] + normal[0] * offsetFromViz;
         y = cur[1] + normal[1] * offsetFromViz;
-        
+
         
         boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
         boxy = y - bbox.height /2 - offsetBox;
         boxw = bbox.width + 2 * offsetBox;
         boxh = bbox.height + 2 * offsetBox;
-        
+
         
         
         if (boxx < clipRect[0] || (boxx + boxw) > (clipRect[0] + clipRect[2])) {
@@ -50635,17 +51929,17 @@ Ext.define('Ext.chart.series.Scatter', {
         if (boxy < clipRect[1] || (boxy + boxh) > (clipRect[1] + clipRect[3])) {
             normal[1] *= -1;
         }
-    
+
         
         x = cur[0] + normal[0] * offsetFromViz;
         y = cur[1] + normal[1] * offsetFromViz;
-        
+
         
         boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
         boxy = y - bbox.height /2 - offsetBox;
         boxw = bbox.width + 2 * offsetBox;
         boxh = bbox.height + 2 * offsetBox;
-        
+
         if (chart.animate) {
             
             me.onAnimate(callout.lines, {
@@ -50912,93 +52206,93 @@ Ext.define('Ext.data.Batch', {
     mixins: {
         observable: 'Ext.util.Observable'
     },
-    
+
     
     autoStart: false,
-    
+
     
     current: -1,
-    
+
     
     total: 0,
-    
+
     
     isRunning: false,
-    
+
     
     isComplete: false,
-    
+
     
     hasException: false,
-    
+
     
     pauseOnException: true,
+
     
-    
-    constructor: function(config) {   
+    constructor: function(config) {
         var me = this;
-                     
+
         me.addEvents(
           
           'complete',
-          
+
           
           'exception',
-          
+
           
           'operationcomplete'
         );
-        
+
         me.mixins.observable.constructor.call(me, config);
-        
+
         
         me.operations = [];
     },
-    
+
     
     add: function(operation) {
         this.total++;
-        
+
         operation.setBatch(this);
-        
+
         this.operations.push(operation);
     },
-    
+
     
     start: function() {
         this.hasException = false;
         this.isRunning = true;
-        
+
         this.runNextOperation();
     },
-    
+
     
     runNextOperation: function() {
         this.runOperation(this.current + 1);
     },
-    
+
     
     pause: function() {
         this.isRunning = false;
     },
-    
+
     
     runOperation: function(index) {
         var me = this,
             operations = me.operations,
             operation  = operations[index],
             onProxyReturn;
-        
+
         if (operation === undefined) {
             me.isRunning  = false;
             me.isComplete = true;
             me.fireEvent('complete', me, operations[operations.length - 1]);
         } else {
             me.current = index;
-            
+
             onProxyReturn = function(operation) {
                 var hasException = operation.hasException();
-                
+
                 if (hasException) {
                     me.hasException = true;
                     me.fireEvent('exception', me, operation);
@@ -51013,9 +52307,9 @@ Ext.define('Ext.data.Batch', {
                     me.runNextOperation();
                 }
             };
-            
+
             operation.setStarted();
-            
+
             me.proxy[operation.action](operation, onProxyReturn, me);
         }
     }
@@ -51031,9 +52325,8 @@ Ext.define('Ext.data.BelongsToAssociation', {
     
 
     
-    
-    
 
+    
     constructor: function(config) {
         this.callParent(arguments);
 
@@ -51116,7 +52409,7 @@ Ext.define('Ext.data.BelongsToAssociation', {
                 instance = model[instanceName];
                 args = [instance];
                 scope = scope || model;
-                
+
                 
                 
                 
@@ -51148,18 +52441,17 @@ Ext.define('Ext.data.BufferStore', {
     }
 });
 
-
 Ext.define('Ext.direct.Manager', {
-    
+
     
     singleton: true,
-   
+
     mixins: {
         observable: 'Ext.util.Observable'
     },
-    
+
     requires: ['Ext.util.MixedCollection'],
-    
+
     statics: {
         exceptions: {
             TRANSPORT: 'xhr',
@@ -51168,12 +52460,12 @@ Ext.define('Ext.direct.Manager', {
             SERVER: 'exception'
         }
     },
+
     
-    
-   
+
     constructor: function(){
         var me = this;
-       
+
         me.addEvents(
             
             'event',
@@ -51182,17 +52474,17 @@ Ext.define('Ext.direct.Manager', {
         );
         me.transactions = Ext.create('Ext.util.MixedCollection');
         me.providers = Ext.create('Ext.util.MixedCollection');
-        
+
         me.mixins.observable.constructor.call(me);
     },
-    
+
     
     addProvider : function(provider){
         var me = this,
             args = arguments,
             i = 0,
             len;
-            
+
         if (args.length > 1) {
             for (len = args.length; i < len; ++i) {
                 me.addProvider(args[i]);
@@ -51214,18 +52506,19 @@ Ext.define('Ext.direct.Manager', {
 
         return provider;
     },
-    
+
     
     getProvider : function(id){
         return id.isProvider ? id : this.providers.get(id);
     },
-    
+
     
     removeProvider : function(provider){
         var me = this,
-            providers = me.providers,
-            provider = provider.isProvider ? provider : providers.get(provider);
-            
+            providers = me.providers;
+
+        provider = provider.isProvider ? provider : providers.get(provider);
+
         if (provider) {
             provider.un('data', me.onProviderData, me);
             providers.remove(provider);
@@ -51233,7 +52526,7 @@ Ext.define('Ext.direct.Manager', {
         }
         return null;
     },
-    
+
     
     addTransaction: function(transaction){
         this.transactions.add(transaction);
@@ -51251,12 +52544,12 @@ Ext.define('Ext.direct.Manager', {
     getTransaction: function(transaction){
         return transaction.isTransaction ? transaction : this.transactions.get(transaction);
     },
-    
+
     onProviderData : function(provider, event){
         var me = this,
             i = 0,
             len;
-            
+
         if (Ext.isArray(event)) {
             for (len = event.length; i < len; ++i) {
                 me.onProviderData(provider, event[i]);
@@ -51265,7 +52558,7 @@ Ext.define('Ext.direct.Manager', {
         }
         if (event.name && event.name != 'event' && event.name != 'exception') {
             me.fireEvent(event.name, event);
-        } else if (event.type == 'exception') {
+        } else if (event.status === false) {
             me.fireEvent('exception', event);
         }
         me.fireEvent('event', event, provider);
@@ -51278,17 +52571,17 @@ Ext.define('Ext.direct.Manager', {
 
 Ext.define('Ext.data.proxy.Direct', {
     
-    
+
     extend: 'Ext.data.proxy.Server',
     alternateClassName: 'Ext.data.DirectProxy',
-    
+
     alias: 'proxy.direct',
-    
+
     requires: ['Ext.direct.Manager'],
+
     
+
     
-   
-   
     paramOrder: undefined,
 
     
@@ -51296,24 +52589,24 @@ Ext.define('Ext.data.proxy.Direct', {
 
     
     directFn : undefined,
+
     
+
     
-    
-    
-    
+
     
     paramOrderRe: /[\s,|]/,
-    
+
     constructor: function(config){
         var me = this;
-        
+
         Ext.apply(me, config);
         if (Ext.isString(me.paramOrder)) {
             me.paramOrder = me.paramOrder.split(me.paramOrderRe);
         }
         me.callParent(arguments);
     },
-    
+
     doRequest: function(operation, callback, scope) {
         var me = this,
             writer = me.getWriter(),
@@ -51325,16 +52618,16 @@ Ext.define('Ext.data.proxy.Direct', {
             method,
             i = 0,
             len;
-            
-            
+
+
         if (operation.allowWrite()) {
             request = writer.write(request);
         }
-        
+
         if (operation.action == 'read') {
             
             method = fn.directCfg.method;
-            
+
             if (method.ordered) {
                 if (method.len > 0) {
                     if (paramOrder) {
@@ -51351,7 +52644,7 @@ Ext.define('Ext.data.proxy.Direct', {
         } else {
             args.push(request.jsonData);
         }
-        
+
         Ext.apply(request, {
             args: args,
             directFn: fn
@@ -51359,30 +52652,30 @@ Ext.define('Ext.data.proxy.Direct', {
         args.push(me.createRequestCallback(request, operation, callback, scope), me);
         fn.apply(window, args);
     },
-    
+
     
     applyEncoding: function(value){
         return value;
     },
-    
+
     createRequestCallback: function(request, operation, callback, scope){
         var me = this;
-        
+
         return function(data, event){
             me.processResponse(event.status, operation, request, event, callback, scope);
         };
     },
-    
+
     
     extractResponseData: function(response){
         return Ext.isDefined(response.result) ? response.result : response.data;
     },
-    
+
     
     setException: function(operation, response) {
         operation.setException(response.message);
     },
-    
+
     
     buildUrl: function(){
         return '';
@@ -51390,7 +52683,6 @@ Ext.define('Ext.data.proxy.Direct', {
 });
 
 
-
 Ext.define('Ext.data.DirectStore', {
     
     
@@ -51402,7 +52694,6 @@ Ext.define('Ext.data.DirectStore', {
    
     
 
-    
     constructor : function(config){
         config = Ext.apply({}, config);
         if (!config.proxy) {
@@ -51421,7 +52712,6 @@ Ext.define('Ext.data.DirectStore', {
 });
 
 
-
 Ext.define('Ext.util.Inflector', {
 
     
@@ -51453,7 +52743,7 @@ Ext.define('Ext.util.Inflector', {
         [(/s$/i),                     "s"      ],
         [(/$/),                       "s"      ]
     ],
-    
+
     
     singulars: [
       [(/(quiz)zes$/i),                                                    "$1"     ],
@@ -51482,7 +52772,7 @@ Ext.define('Ext.util.Inflector', {
       [(/people$/i),                                                       "person" ],
       [(/s$/i),                                                            ""       ]
     ],
-    
+
     
      uncountable: [
         "sheep",
@@ -51499,27 +52789,27 @@ Ext.define('Ext.util.Inflector', {
         "deer",
         "means"
     ],
-    
+
     
     singular: function(matcher, replacer) {
         this.singulars.unshift([matcher, replacer]);
     },
-    
+
     
     plural: function(matcher, replacer) {
         this.plurals.unshift([matcher, replacer]);
     },
-    
+
     
     clearSingulars: function() {
         this.singulars = [];
     },
-    
+
     
     clearPlurals: function() {
         this.plurals = [];
     },
-    
+
     
     isTransnumeral: function(word) {
         return Ext.Array.indexOf(this.uncountable, word) != -1;
@@ -51534,19 +52824,19 @@ Ext.define('Ext.util.Inflector', {
         var plurals = this.plurals,
             length  = plurals.length,
             tuple, regex, i;
-        
+
         for (i = 0; i < length; i++) {
             tuple = plurals[i];
             regex = tuple[0];
-            
+
             if (regex == word || (regex.test && regex.test(word))) {
                 return word.replace(regex, tuple[1]);
             }
         }
-        
+
         return word;
     },
-    
+
     
     singularize: function(word) {
         if (this.isTransnumeral(word)) {
@@ -51556,30 +52846,30 @@ Ext.define('Ext.util.Inflector', {
         var singulars = this.singulars,
             length    = singulars.length,
             tuple, regex, i;
-        
+
         for (i = 0; i < length; i++) {
             tuple = singulars[i];
             regex = tuple[0];
-            
+
             if (regex == word || (regex.test && regex.test(word))) {
                 return word.replace(regex, tuple[1]);
             }
         }
-        
+
         return word;
     },
-    
+
     
     classify: function(word) {
         return Ext.String.capitalize(this.singularize(word));
     },
-    
+
     
     ordinalize: function(number) {
         var parsed = parseInt(number, 10),
             mod10  = parsed % 10,
             mod100 = parsed % 100;
-        
+
         
         if (11 <= mod100 && mod100 <= 13) {
             return number + "th";
@@ -51628,7 +52918,7 @@ Ext.define('Ext.util.Inflector', {
             vita: 'vitae'
         },
         singular;
-    
+
     for (singular in irregulars) {
         this.plural(singular, irregulars[singular]);
         this.singular(irregulars[singular], singular);
@@ -51746,54 +53036,55 @@ Ext.define('Ext.data.HasManyAssociation', {
 });
 
 Ext.define('Ext.data.JsonP', {
+
     
-    
-    
+
     singleton: true,
-    
+
     statics: {
         requestCount: 0,
         requests: {}
     },
+
     
-    
-    
+
     
     timeout: 30000,
-    
+
     
     disableCaching: true,
-   
+
     
     disableCachingParam: '_dc',
-   
+
     
     callbackKey: 'callback',
-   
+
     
     request: function(options){
         options = Ext.apply({}, options);
-       
-        
-        var me = this, 
-            disableCaching = Ext.isDefined(options.disableCaching) ? options.disableCaching : me.disableCaching, 
-            cacheParam = options.disableCachingParam || me.disableCachingParam, 
-            id = ++me.statics().requestCount, 
-            callbackName = options.callbackName || 'callback' + id, 
-            callbackKey = options.callbackKey || me.callbackKey, 
-            timeout = Ext.isDefined(options.timeout) ? options.timeout : me.timeout, 
-            params = Ext.apply({}, options.params), 
+
+
+        var me = this,
+            disableCaching = Ext.isDefined(options.disableCaching) ? options.disableCaching : me.disableCaching,
+            cacheParam = options.disableCachingParam || me.disableCachingParam,
+            id = ++me.statics().requestCount,
+            callbackName = options.callbackName || 'callback' + id,
+            callbackKey = options.callbackKey || me.callbackKey,
+            timeout = Ext.isDefined(options.timeout) ? options.timeout : me.timeout,
+            params = Ext.apply({}, options.params),
             url = options.url,
-            request, 
+            name = Ext.isSandboxed ? Ext.getUniqueGlobalNamespace() : 'Ext',
+            request,
             script;
-            
-        params[callbackKey] = 'Ext.data.JsonP.' + callbackName;
+
+        params[callbackKey] = name + '.data.JsonP.' + callbackName;
         if (disableCaching) {
             params[cacheParam] = new Date().getTime();
         }
-        
+
         script = me.createScript(url, params);
-        
+
         me.statics().requests[id] = request = {
             url: url,
             params: params,
@@ -51805,22 +53096,22 @@ Ext.define('Ext.data.JsonP', {
             callback: options.callback,
             callbackName: callbackName
         };
-        
+
         if (timeout > 0) {
             request.timeout = setTimeout(Ext.bind(me.handleTimeout, me, [request]), timeout);
         }
-        
+
         me.setupErrorHandling(request);
         me[callbackName] = Ext.bind(me.handleResponse, me, [request], true);
         Ext.getHead().appendChild(script);
         return request;
     },
-    
+
     
     abort: function(request){
         var requests = this.statics().requests,
             key;
-            
+
         if (request) {
             if (!request.id) {
                 request = requests[request];
@@ -51834,40 +53125,40 @@ Ext.define('Ext.data.JsonP', {
             }
         }
     },
-    
+
     
     setupErrorHandling: function(request){
         request.script.onerror = Ext.bind(this.handleError, this, [request]);
     },
-    
+
     
     handleAbort: function(request){
         request.errorType = 'abort';
         this.handleResponse(null, request);
     },
-    
+
     
     handleError: function(request){
         request.errorType = 'error';
         this.handleResponse(null, request);
     },
+
     
     cleanupErrorHandling: function(request){
         request.script.onerror = null;
     },
+
     
     handleTimeout: function(request){
         request.errorType = 'timeout';
         this.handleResponse(null, request);
     },
+
     
     handleResponse: function(result, request){
+
         var success = true;
+
         if (request.timeout) {
             clearTimeout(request.timeout);
         }
@@ -51875,7 +53166,7 @@ Ext.define('Ext.data.JsonP', {
         delete this.statics()[request.id];
         this.cleanupErrorHandling(request);
         Ext.fly(request.script).remove();
+
         if (request.errorType) {
             success = false;
             Ext.callback(request.failure, request.scope, [request.errorType]);
@@ -51884,7 +53175,7 @@ Ext.define('Ext.data.JsonP', {
         }
         Ext.callback(request.callback, request.scope, [success, result, request.errorType]);
     },
-    
+
     
     createScript: function(url, params) {
         var script = document.createElement('script');
@@ -51912,7 +53203,66 @@ Ext.define('Ext.data.JsonPStore', {
 
 Ext.define('Ext.data.NodeInterface', {
     requires: ['Ext.data.Field'],
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
     
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
     statics: {
         
         decorate: function(record) {
@@ -51932,13 +53282,14 @@ Ext.define('Ext.data.NodeInterface', {
                     {name: idName,       type: 'string',  defaultValue: null},
                     {name: 'parentId',   type: 'string',  defaultValue: null},
                     {name: 'index',      type: 'int',     defaultValue: null},
-                    {name: 'depth',      type: 'int',     defaultValue: 0}, 
+                    {name: 'depth',      type: 'int',     defaultValue: 0},
                     {name: 'expanded',   type: 'bool',    defaultValue: false, persist: false},
                     {name: 'expandable', type: 'bool',    defaultValue: true, persist: false},
                     {name: 'checked',    type: 'auto',    defaultValue: null},
                     {name: 'leaf',       type: 'bool',    defaultValue: false, persist: false},
                     {name: 'cls',        type: 'string',  defaultValue: null, persist: false},
                     {name: 'iconCls',    type: 'string',  defaultValue: null, persist: false},
+                    {name: 'icon',       type: 'string',  defaultValue: null, persist: false},
                     {name: 'root',       type: 'boolean', defaultValue: false, persist: false},
                     {name: 'isLast',     type: 'boolean', defaultValue: false, persist: false},
                     {name: 'isFirst',    type: 'boolean', defaultValue: false, persist: false},
@@ -51961,7 +53312,7 @@ Ext.define('Ext.data.NodeInterface', {
                     }
                 }
             }
-            
+
             Ext.applyIf(record, {
                 firstChild: null,
                 lastChild: null,
@@ -51972,7 +53323,7 @@ Ext.define('Ext.data.NodeInterface', {
             });
             
             record.commit(true);
-            
+
             record.enableBubble([
                 
                 "append",
@@ -51997,26 +53348,26 @@ Ext.define('Ext.data.NodeInterface', {
 
                  
                 "beforeinsert",
-                
+
                 
                 "expand",
-                
+
                 
                 "collapse",
-                
+
                 
                 "beforeexpand",
-                
+
                 
                 "beforecollapse",
-                
+
                 
                 "sort"
             ]);
-            
+
             return record;
         },
-        
+
         applyFields: function(modelClass, addFields) {
             var modelPrototype = modelClass.prototype,
                 fields = modelPrototype.fields,
@@ -52024,20 +53375,20 @@ Ext.define('Ext.data.NodeInterface', {
                 ln = addFields.length,
                 addField, i, name,
                 newFields = [];
-                
+
             for (i = 0; i < ln; i++) {
                 addField = addFields[i];
                 if (!Ext.Array.contains(keys, addField.name)) {
                     addField = Ext.create('data.field', addField);
-                    
+
                     newFields.push(addField);
                     fields.add(addField);
                 }
             }
-            
+
             return newFields;
         },
-        
+
         getPrototypeBody: function() {
             return {
                 isNode: true,
@@ -52050,7 +53401,7 @@ Ext.define('Ext.data.NodeInterface', {
                     
                     return Ext.data.NodeInterface.decorate(node);
                 },
-                
+
                 
                 isLeaf : function() {
                     return this.get('leaf') === true;
@@ -52082,8 +53433,8 @@ Ext.define('Ext.data.NodeInterface', {
                     while (parent.parentNode) {
                         ++depth;
                         parent = parent.parentNode;
-                    }                                            
-                    
+                    }
+
                     me.beginEdit();
                     me.set({
                         isFirst: isFirst,
@@ -52096,7 +53447,7 @@ Ext.define('Ext.data.NodeInterface', {
                     if (silent) {
                         me.commit();
                     }
-                    
+
                     for (i = 0; i < len; i++) {
                         children[i].updateInfo(silent);
                     }
@@ -52120,7 +53471,7 @@ Ext.define('Ext.data.NodeInterface', {
                 
                 isExpandable : function() {
                     var me = this;
-                    
+
                     if (me.get('expandable')) {
                         return !(me.isLeaf() || (me.isLoaded() && !me.hasChildNodes()));
                     }
@@ -52143,9 +53494,9 @@ Ext.define('Ext.data.NodeInterface', {
                     } else {
                         
                         node = me.createNode(node);
-                        
+
                         if (suppressEvents !== true && me.fireEvent("beforeappend", me, node) === false) {
-                            return false;                         
+                            return false;
                         }
 
                         index = me.childNodes.length;
@@ -52169,7 +53520,7 @@ Ext.define('Ext.data.NodeInterface', {
                         node.nextSibling = null;
 
                         me.setLastChild(node);
-                                                
+
                         ps = me.childNodes[index - 1];
                         if (ps) {
                             node.previousSibling = ps;
@@ -52180,28 +53531,28 @@ Ext.define('Ext.data.NodeInterface', {
                         }
 
                         node.updateInfo(suppressNodeUpdate);
-                        
+
                         
                         if (!me.isLoaded()) {
-                            me.set('loaded', true);                            
+                            me.set('loaded', true);
                         }
                         
                         else if (me.childNodes.length === 1) {
                             me.set('loaded', me.isLoaded());
                         }
-                        
+
                         if (suppressEvents !== true) {
                             me.fireEvent("append", me, node, index);
 
                             if (oldParent) {
                                 node.fireEvent("move", node, oldParent, me, index);
-                            }                            
+                            }
                         }
 
                         return node;
                     }
                 },
-                
+
                 
                 getBubbleTarget: function() {
                     return this.parentNode;
@@ -52211,7 +53562,7 @@ Ext.define('Ext.data.NodeInterface', {
                 removeChild : function(node, destroy, suppressEvents, suppressNodeUpdate) {
                     var me = this,
                         index = me.indexOf(node);
-                    
+
                     if (index == -1 || (suppressEvents !== true && me.fireEvent("beforeremove", me, node) === false)) {
                         return false;
                     }
@@ -52226,7 +53577,7 @@ Ext.define('Ext.data.NodeInterface', {
                     if (me.lastChild == node) {
                         me.setLastChild(node.previousSibling);
                     }
-                    
+
                     
                     if (node.previousSibling) {
                         node.previousSibling.nextSibling = node.nextSibling;
@@ -52240,13 +53591,13 @@ Ext.define('Ext.data.NodeInterface', {
                     if (suppressEvents !== true) {
                         me.fireEvent("remove", me, node);
                     }
-                    
-                    
+
+
                     
                     if (!me.childNodes.length) {
                         me.set('loaded', me.isLoaded());
                     }
-                    
+
                     if (destroy) {
                         node.destroy(true);
                     } else {
@@ -52275,7 +53626,7 @@ Ext.define('Ext.data.NodeInterface', {
                 
                 clear : function(destroy) {
                     var me = this;
-                    
+
                     
                     me.parentNode = me.previousSibling = me.nextSibling = null;
                     if (destroy) {
@@ -52288,7 +53639,7 @@ Ext.define('Ext.data.NodeInterface', {
                     
                     var me = this,
                         options = me.destroyOptions;
-                    
+
                     if (silent === true) {
                         me.clear(true);
                         Ext.each(me.childNodes, function(n) {
@@ -52311,11 +53662,11 @@ Ext.define('Ext.data.NodeInterface', {
                         oldParent = node.parentNode,
                         refIndex  = index,
                         ps;
-                    
+
                     if (!refNode) { 
                         return me.appendChild(node);
                     }
-                    
+
                     
                     if (node == refNode) {
                         return false;
@@ -52323,11 +53674,11 @@ Ext.define('Ext.data.NodeInterface', {
 
                     
                     node = me.createNode(node);
-                    
+
                     if (suppressEvents !== true && me.fireEvent("beforeinsert", me, node, refNode) === false) {
                         return false;
                     }
-                    
+
                     
                     if (oldParent == me && me.indexOf(node) < index) {
                         refIndex--;
@@ -52347,10 +53698,10 @@ Ext.define('Ext.data.NodeInterface', {
 
                     Ext.Array.splice(me.childNodes, refIndex, 0, node);
                     node.parentNode = me;
-                    
+
                     node.nextSibling = refNode;
                     refNode.previousSibling = node;
-                    
+
                     ps = me.childNodes[refIndex - 1];
                     if (ps) {
                         node.previousSibling = ps;
@@ -52359,12 +53710,12 @@ Ext.define('Ext.data.NodeInterface', {
                     } else {
                         node.previousSibling = null;
                     }
-                    
+
                     node.updateInfo();
-                    
+
                     if (!me.isLoaded()) {
-                        me.set('loaded', true);                            
-                    }    
+                        me.set('loaded', true);
+                    }
                     
                     else if (me.childNodes.length === 1) {
                         me.set('loaded', me.isLoaded());
@@ -52375,13 +53726,13 @@ Ext.define('Ext.data.NodeInterface', {
 
                         if (oldParent) {
                             node.fireEvent("move", node, oldParent, me, refIndex, refNode);
-                        }                        
+                        }
                     }
 
                     return node;
                 },
+
                 
-                    
                 insertChild: function(index, node) {
                     var sibling = this.childNodes[index];
                     if (sibling) {
@@ -52421,7 +53772,7 @@ Ext.define('Ext.data.NodeInterface', {
                 
                 replaceChild : function(newChild, oldChild, suppressEvents) {
                     var s = oldChild ? oldChild.nextSibling : null;
-                    
+
                     this.removeChild(oldChild, suppressEvents);
                     this.insertBefore(newChild, s, suppressEvents);
                     return oldChild;
@@ -52433,6 +53784,21 @@ Ext.define('Ext.data.NodeInterface', {
                 },
 
                 
+                getPath: function(field, separator) {
+                    field = field || this.idProperty;
+                    separator = separator || '/';
+
+                    var path = [this.get(field)],
+                        parent = this.parentNode;
+
+                    while (parent) {
+                        path.unshift(parent.get(field));
+                        parent = parent.parentNode;
+                    }
+                    return separator + path.join(separator);
+                },
+
+                
                 getDepth : function() {
                     return this.get('depth');
                 },
@@ -52532,14 +53898,14 @@ Ext.define('Ext.data.NodeInterface', {
                     var cs  = this.childNodes,
                         ln = cs.length,
                         i, n;
-                    
+
                     if (ln > 0) {
                         Ext.Array.sort(cs, sortFn);
                         for (i = 0; i < ln; i++) {
                             n = cs[i];
                             n.previousSibling = cs[i-1];
                             n.nextSibling = cs[i+1];
-                        
+
                             if (i === 0) {
                                 this.setFirstChild(n);
                                 n.updateInfo();
@@ -52552,34 +53918,34 @@ Ext.define('Ext.data.NodeInterface', {
                                 n.sort(sortFn, true, true);
                             }
                         }
-                        
+
                         if (suppressEvent !== true) {
                             this.fireEvent('sort', this, cs);
                         }
                     }
                 },
-                        
-                        
+
+                
                 isExpanded: function() {
                     return this.get('expanded');
                 },
+
                 
-                 
                 isLoaded: function() {
                     return this.get('loaded');
                 },
 
-                 
+                
                 isLoading: function() {
                     return this.get('loading');
                 },
-                                
-                 
+
+                
                 isRoot: function() {
                     return !this.parentNode;
                 },
+
                 
-                 
                 isVisible: function() {
                     var parent = this.parentNode;
                     while (parent) {
@@ -52590,7 +53956,7 @@ Ext.define('Ext.data.NodeInterface', {
                     }
                     return true;
                 },
-                
+
                 
                 expand: function(recursive, callback, scope) {
                     var me = this;
@@ -52601,42 +53967,41 @@ Ext.define('Ext.data.NodeInterface', {
                     
                     if (!me.isLeaf()) {
                         
-                        if (!me.isLoading() && !me.isExpanded()) {
-                            
-                            
-                            
+                        if (me.isLoading()) {
+                            me.on('expand', function(){
+                                me.expand(recursive, callback, scope);
+                            }, me, {single: true});
+                        } else {
                             
-                            me.fireEvent('beforeexpand', me, function() {
-                                me.set('expanded', true); 
-                                me.fireEvent('expand', me, me.childNodes, false);
+                            if (!me.isExpanded()) {
                                 
                                 
-                                if (recursive) {
-                                    me.expandChildren(true, callback, scope);
-                                }
-                                else {
-                                    Ext.callback(callback, scope || me, [me.childNodes]);                                
-                                }
-                            }, me);                            
-                        }
-                        
-                        else if (recursive) {
-                            me.expandChildren(true, callback, scope);
-                        }
-                        else {
-                            Ext.callback(callback, scope || me, [me.childNodes]);
-                        }
+                                
+                                
+                                me.fireEvent('beforeexpand', me, function(){
+                                    me.set('expanded', true);
+                                    me.fireEvent('expand', me, me.childNodes, false);
 
+                                    
+                                    if (recursive) {
+                                        me.expandChildren(true, callback, scope);
+                                    } else {
+                                        Ext.callback(callback, scope || me, [me.childNodes]);
+                                    }
+                                }, me);
+                            } else if (recursive) {
+                                
+                                me.expandChildren(true, callback, scope);
+                            } else {
+                                Ext.callback(callback, scope || me, [me.childNodes]);
+                            }
+                        }
+                    } else {
                         
-                        
-                        
-                    }
-                    
-                    else {
                         Ext.callback(callback, scope || me); 
                     }
                 },
-                
+
                 
                 expandChildren: function(recursive, callback, scope) {
                     var me = this,
@@ -52653,12 +54018,12 @@ Ext.define('Ext.data.NodeInterface', {
                             nodes[i].expand(recursive, function () {
                                 expanding--;
                                 if (callback && !expanding) {
-                                    Ext.callback(callback, scope || me, [me.childNodes]); 
+                                    Ext.callback(callback, scope || me, [me.childNodes]);
                                 }
-                            });                            
+                            });
                         }
                     }
-                    
+
                     if (!expanding && callback) {
                         Ext.callback(callback, scope || me, [me.childNodes]);                    }
                 },
@@ -52672,17 +54037,17 @@ Ext.define('Ext.data.NodeInterface', {
                         
                         if (!me.collapsing && me.isExpanded()) {
                             me.fireEvent('beforecollapse', me, function() {
-                                me.set('expanded', false); 
+                                me.set('expanded', false);
                                 me.fireEvent('collapse', me, me.childNodes, false);
-                                
+
                                 
                                 if (recursive) {
                                     me.collapseChildren(true, callback, scope);
                                 }
                                 else {
-                                    Ext.callback(callback, scope || me, [me.childNodes]);                                
+                                    Ext.callback(callback, scope || me, [me.childNodes]);
                                 }
-                            }, me);                            
+                            }, me);
                         }
                         
                         else if (recursive) {
@@ -52691,10 +54056,10 @@ Ext.define('Ext.data.NodeInterface', {
                     }
                     
                     else {
-                        Ext.callback(callback, scope || me, [me.childNodes]); 
+                        Ext.callback(callback, scope || me, [me.childNodes]);
                     }
                 },
-                
+
                 
                 collapseChildren: function(recursive, callback, scope) {
                     var me = this,
@@ -52711,12 +54076,12 @@ Ext.define('Ext.data.NodeInterface', {
                             nodes[i].collapse(recursive, function () {
                                 collapsing--;
                                 if (callback && !collapsing) {
-                                    Ext.callback(callback, scope || me, [me.childNodes]); 
+                                    Ext.callback(callback, scope || me, [me.childNodes]);
                                 }
-                            });                            
+                            });
                         }
                     }
-                    
+
                     if (!collapsing && callback) {
                         Ext.callback(callback, scope || me, [me.childNodes]);
                     }
@@ -52968,9 +54333,38 @@ Ext.define('Ext.data.Request', {
     }
 });
 
+Ext.define('Ext.data.SequentialIdGenerator', {
+    extend: 'Ext.data.IdGenerator',
+    alias: 'idgen.sequential',
+
+    constructor: function() {
+        var me = this;
+
+        me.callParent(arguments);
+
+        me.parts = [ me.prefix, ''];
+    },
+
+    
+    prefix: '',
+
+    
+    seed: 1,
+
+    
+    generate: function () {
+        var me = this,
+            parts = me.parts;
+
+        parts[1] = me.seed++;
+        return parts.join('');
+    }
+});
+
+
 Ext.define('Ext.data.Tree', {
     alias: 'data.tree',
-    
+
     mixins: {
         observable: "Ext.util.Observable"
     },
@@ -52981,11 +54375,11 @@ Ext.define('Ext.data.Tree', {
     
     constructor: function(root) {
         var me = this;
+
         
-        me.nodeHash = {};
 
         me.mixins.observable.constructor.call(me);
-                        
+
         if (root) {
             me.setRootNode(root);
         }
@@ -52999,14 +54393,14 @@ Ext.define('Ext.data.Tree', {
     
     setRootNode : function(node) {
         var me = this;
-        
+
         me.root = node;
         Ext.data.NodeInterface.decorate(node);
-        
+
         if (me.fireEvent('beforeappend', null, node) !== false) {
             node.set('root', true);
             node.updateInfo();
-            
+
             me.relayEvents(node, [
                 
                 "append",
@@ -53047,7 +54441,7 @@ Ext.define('Ext.data.Tree', {
                  
                  "rootchange"
             ]);
-            
+
             node.on({
                 scope: me,
                 insert: me.onNodeInsert,
@@ -53055,20 +54449,21 @@ Ext.define('Ext.data.Tree', {
                 remove: me.onNodeRemove
             });
 
-            me.registerNode(node);        
+            me.nodeHash = {};
+            me.registerNode(node);
             me.fireEvent('append', null, node);
             me.fireEvent('rootchange', node);
         }
-            
+
         return node;
     },
-    
+
     
     flatten: function(){
         var nodes = [],
             hash = this.nodeHash,
             key;
-            
+
         for (key in hash) {
             if (hash.hasOwnProperty(key)) {
                 nodes.push(hash[key]);
@@ -53076,20 +54471,20 @@ Ext.define('Ext.data.Tree', {
         }
         return nodes;
     },
-    
+
     
     onNodeInsert: function(parent, node) {
-        this.registerNode(node);
+        this.registerNode(node, true);
     },
-    
+
     
     onNodeAppend: function(parent, node) {
-        this.registerNode(node);
+        this.registerNode(node, true);
     },
-    
+
     
     onNodeRemove: function(parent, node) {
-        this.unregisterNode(node);
+        this.unregisterNode(node, true);
     },
 
     
@@ -53098,20 +54493,30 @@ Ext.define('Ext.data.Tree', {
     },
 
     
-    registerNode : function(node) {
+    registerNode : function(node, includeChildren) {
         this.nodeHash[node.getId() || node.internalId] = node;
+        if (includeChildren === true) {
+            node.eachChild(function(child){
+                this.registerNode(child, true);
+            }, this);
+        }
     },
 
     
-    unregisterNode : function(node) {
+    unregisterNode : function(node, includeChildren) {
         delete this.nodeHash[node.getId() || node.internalId];
+        if (includeChildren === true) {
+            node.eachChild(function(child){
+                this.unregisterNode(child, true);
+            }, this);
+        }
     },
-    
+
     
     sort: function(sorterFn, recursive) {
         this.getRootNode().sort(sorterFn, recursive);
     },
-    
+
      
     filter: function(filters, recursive) {
         this.getRootNode().filter(filters, recursive);
@@ -53133,20 +54538,20 @@ Ext.define('Ext.data.TreeStore', {
 
     
     defaultRootId: 'root',
-    
+
     
     defaultRootProperty: 'children',
 
     
     folderSort: false,
-    
+
     constructor: function(config) {
-        var me = this, 
+        var me = this,
             root,
             fields;
-        
+
         config = Ext.apply({}, config);
-        
+
         
         fields = config.fields || me.fields;
         if (!fields) {
@@ -53154,50 +54559,47 @@ Ext.define('Ext.data.TreeStore', {
         }
 
         me.callParent([config]);
-        
+
         
         me.tree = Ext.create('Ext.data.Tree');
 
         me.relayEvents(me.tree, [
             
             "append",
-            
+
             
             "remove",
-            
+
             
             "move",
-            
+
             
             "insert",
-            
+
             
             "beforeappend",
-            
+
             
             "beforeremove",
-            
+
             
             "beforemove",
-            
+
             
             "beforeinsert",
-             
+
              
              "expand",
-             
+
              
              "collapse",
-             
+
              
              "beforeexpand",
-             
+
              
              "beforecollapse",
 
-                          
-             "sort",
-             
              
              "rootchange"
         ]);
@@ -53220,12 +54622,12 @@ Ext.define('Ext.data.TreeStore', {
             delete me.root;
             me.setRootNode(root);
         }
-        
+
         me.addEvents(
             
-            'rootchange'
+            'sort'
         );
-        
+
         if (Ext.isDefined(me.nodeParameter)) {
             if (Ext.isDefined(Ext.global.console)) {
                 Ext.global.console.warn('Ext.data.TreeStore: nodeParameter has been deprecated. Please use nodeParam instead.');
@@ -53234,12 +54636,12 @@ Ext.define('Ext.data.TreeStore', {
             delete me.nodeParameter;
         }
     },
-    
+
     
     setProxy: function(proxy) {
         var reader,
             needsRoot;
-        
+
         if (proxy instanceof Ext.data.proxy.Proxy) {
             
             needsRoot = Ext.isEmpty(proxy.getReader().root);
@@ -53259,17 +54661,17 @@ Ext.define('Ext.data.TreeStore', {
             reader.buildExtractors(true);
         }
     },
-    
+
     
     onBeforeSort: function() {
         if (this.folderSort) {
             this.sort({
                 property: 'leaf',
                 direction: 'ASC'
-            }, 'prepend', false);    
+            }, 'prepend', false);
         }
     },
-    
+
     
     onBeforeNodeExpand: function(node, callback, scope) {
         if (node.isLoaded()) {
@@ -53286,10 +54688,10 @@ Ext.define('Ext.data.TreeStore', {
                 callback: function() {
                     Ext.callback(callback, scope || node, [node.childNodes]);
                 }
-            });            
+            });
         }
     },
-    
+
     
     getNewRecords: function() {
         return Ext.Array.filter(this.tree.flatten(), this.filterNew);
@@ -53299,28 +54701,28 @@ Ext.define('Ext.data.TreeStore', {
     getUpdatedRecords: function() {
         return Ext.Array.filter(this.tree.flatten(), this.filterUpdated);
     },
-    
+
     
     onBeforeNodeCollapse: function(node, callback, scope) {
         callback.call(scope || node, node.childNodes);
     },
-    
+
     onNodeRemove: function(parent, node) {
         var removed = this.removed;
-        
+
         if (!node.isReplace && Ext.Array.indexOf(removed, node) == -1) {
             removed.push(node);
         }
     },
-    
+
     onNodeAdded: function(parent, node) {
         var proxy = this.getProxy(),
             reader = proxy.getReader(),
             data = node.raw || node.data,
             dataRoot, children;
-            
-        Ext.Array.remove(this.removed, node); 
-        
+
+        Ext.Array.remove(this.removed, node);
+
         if (!node.isLeaf() && !node.isLoaded()) {
             dataRoot = reader.getRoot(data);
             if (dataRoot) {
@@ -53329,12 +54731,12 @@ Ext.define('Ext.data.TreeStore', {
             }
         }
     },
-        
+
     
     setRootNode: function(root) {
         var me = this;
 
-        root = root || {};        
+        root = root || {};
         if (!root.isNode) {
             
             Ext.applyIf(root, {
@@ -53349,20 +54751,20 @@ Ext.define('Ext.data.TreeStore', {
         
         
         me.getProxy().getReader().buildExtractors(true);
-        
+
         
         me.tree.setRootNode(root);
+
         
-        
-        if (!root.isLoaded() && root.isExpanded()) {
+        if (!root.isLoaded() && (me.autoLoad === true || root.isExpanded())) {
             me.load({
                 node: root
             });
         }
-        
+
         return root;
     },
-        
+
     
     getRootNode: function() {
         return this.tree.getRootNode();
@@ -53377,11 +54779,11 @@ Ext.define('Ext.data.TreeStore', {
     load: function(options) {
         options = options || {};
         options.params = options.params || {};
-        
+
         var me = this,
             node = options.node || me.tree.getRootNode(),
             root;
-            
+
         
         
         if (!node) {
@@ -53389,23 +54791,23 @@ Ext.define('Ext.data.TreeStore', {
                 expanded: true
             });
         }
-        
+
         if (me.clearOnLoad) {
-            node.removeAll();
+            node.removeAll(true);
         }
-        
+
         Ext.applyIf(options, {
             node: node
         });
         options.params[me.nodeParam] = node ? node.getId() : 'root';
-        
+
         if (node) {
             node.set('loading', true);
         }
-        
+
         return me.callParent([options]);
     },
-        
+
 
     
     fillNode: function(node, records) {
@@ -53419,12 +54821,12 @@ Ext.define('Ext.data.TreeStore', {
             sortCollection.sort(me.sorters.items);
             records = sortCollection.items;
         }
-        
+
         node.set('loaded', true);
         for (; i < ln; i++) {
             node.appendChild(records[i], undefined, true);
         }
-        
+
         return records;
     },
 
@@ -53435,17 +54837,21 @@ Ext.define('Ext.data.TreeStore', {
             records = operation.getRecords(),
             node = operation.node;
 
+        me.loading = false;
         node.set('loading', false);
         if (successful) {
             records = me.fillNode(node, records);
         }
         
+        
+        
+        
         me.fireEvent('read', me, operation.node, records, successful);
         me.fireEvent('load', me, operation.node, records, successful);
         
         Ext.callback(operation.callback, operation.scope || me, [records, operation, successful]);
     },
-    
+
     
     onCreateRecords: function(records, operation, success) {
         if (success) {
@@ -53522,11 +54928,139 @@ Ext.define('Ext.data.TreeStore', {
         } else {
             me.tree.sort(sorterFn, true);
             me.fireEvent('datachanged', me);
-        }   
+        }
         me.fireEvent('sort', me);
     }
 });
 
+
+Ext.define('Ext.data.UuidGenerator', function () {
+    var twoPow14 = Math.pow(2, 14),
+        twoPow16 = Math.pow(2, 16),
+        twoPow28 = Math.pow(2, 28),
+        twoPow32 = Math.pow(2, 32);
+
+    function toHex (value, length) {
+        var ret = value.toString(16);
+        if (ret.length > length) {
+            ret = ret.substring(ret.length - length); 
+        } else if (ret.length < length) {
+            ret = Ext.String.leftPad(ret, length, '0');
+        }
+        return ret;
+    }
+
+    function rand (lo, hi) {
+        var v = Math.random() * (hi - lo + 1);
+        return Math.floor(v) + lo;
+    }
+
+    function split (bignum) {
+        if (typeof(bignum) == 'number') {
+            var hi = Math.floor(bignum / twoPow32);
+            return {
+                lo: Math.floor(bignum - hi * twoPow32),
+                hi: hi
+            };
+        }
+        return bignum;
+    }
+
+    return {
+        extend: 'Ext.data.IdGenerator',
+
+        alias: 'idgen.uuid',
+
+        id: 'uuid', 
+
+        
+
+        
+
+        
+        version: 4,
+
+        constructor: function() {
+            var me = this;
+
+            me.callParent(arguments);
+
+            me.parts = [];
+            me.init();
+        },
+
+        generate: function () {
+            var me = this,
+                parts = me.parts,
+                ts = me.timestamp;
+
+            
+            parts[0] = toHex(ts.lo, 8);
+            parts[1] = toHex(ts.hi & 0xFFFF, 4);
+            parts[2] = toHex(((ts.hi >>> 16) & 0xFFF) | (me.version << 12), 4);
+            parts[3] = toHex(0x80 | ((me.clockSeq >>> 8) & 0x3F), 2) +
+                       toHex(me.clockSeq & 0xFF, 2);
+            parts[4] = toHex(me.salt.hi, 4) + toHex(me.salt.lo, 8);
+
+            if (me.version == 4) {
+                me.init(); 
+            } else {
+                
+                ++ts.lo;
+                if (ts.lo >= twoPow32) { 
+                    ts.lo = 0;
+                    ++ts.hi;
+                }
+            }
+
+            return parts.join('-').toLowerCase();
+        },
+
+        getRecId: function (rec) {
+            return rec.getId();
+        },
+
+        
+        init: function () {
+            var me = this,
+                salt, time;
+
+            if (me.version == 4) {
+                
+                
+                
+                
+                me.clockSeq = rand(0, twoPow14-1);
+
+                
+                salt = me.salt || (me.salt = {});
+                time = me.timestamp || (me.timestamp = {});
+
+                
+                salt.lo = rand(0, twoPow32-1);
+                salt.hi = rand(0, twoPow16-1);
+                time.lo = rand(0, twoPow32-1);
+                time.hi = rand(0, twoPow28-1);
+            } else {
+                
+                me.salt = split(me.salt);
+                me.timestamp = split(me.timestamp);
+
+                
+                
+                me.salt.hi |= 0x100;
+            }
+        },
+
+        
+        reconfigure: function (config) {
+            Ext.apply(this, config);
+            this.init();
+        }
+    };
+}());
+
+
 Ext.define('Ext.data.XmlStore', {
     extend: 'Ext.data.Store',
     alternateClassName: 'Ext.data.XmlStore',
@@ -53553,7 +55087,7 @@ Ext.define('Ext.data.XmlStore', {
 Ext.define('Ext.data.proxy.Client', {
     extend: 'Ext.data.proxy.Proxy',
     alternateClassName: 'Ext.data.ClientProxy',
-    
+
     
     clear: function() {
     }
@@ -53604,12 +55138,12 @@ Ext.define('Ext.data.proxy.JsonP', {
             disableCaching: false, 
             callback: me.createRequestCallback(request, operation, callback, scope)
         });
-        
+
         
         if (me.autoAppendParams) {
             request.params = {};
         }
-        
+
         request.jsonp = Ext.data.JsonP.request(request);
         
         request.params = params;
@@ -53628,7 +55162,7 @@ Ext.define('Ext.data.proxy.JsonP', {
             me.processResponse(success, operation, request, response, callback, scope);
         };
     },
-    
+
     
     setException: function(operation, response) {
         operation.setException(operation.request.jsonp.errorType);
@@ -53645,7 +55179,7 @@ Ext.define('Ext.data.proxy.JsonP', {
             filter, i;
 
         delete params.filters;
+
         if (me.autoAppendParams) {
             url = Ext.urlAppend(url, Ext.Object.toQueryString(params));
         }
@@ -53702,14 +55236,14 @@ Ext.define('Ext.data.proxy.JsonP', {
 Ext.define('Ext.data.proxy.WebStorage', {
     extend: 'Ext.data.proxy.Client',
     alternateClassName: 'Ext.data.WebStorageProxy',
-    
+
     
     id: undefined,
 
     
     constructor: function(config) {
         this.callParent(arguments);
-        
+
         
         this.cache = {};
 
@@ -53727,7 +55261,7 @@ Ext.define('Ext.data.proxy.WebStorage', {
             length  = records.length,
             ids     = this.getIds(),
             id, record, i;
-        
+
         operation.setStarted();
 
         for (i = 0; i < length; i++) {
@@ -53762,11 +55296,11 @@ Ext.define('Ext.data.proxy.WebStorage', {
             ids     = this.getIds(),
             length  = ids.length,
             i, recordData, record;
-        
+
         
         if (operation.id) {
             record = this.getRecord(operation.id);
-            
+
             if (record) {
                 records.push(record);
                 operation.setSuccessful();
@@ -53777,7 +55311,7 @@ Ext.define('Ext.data.proxy.WebStorage', {
             }
             operation.setSuccessful();
         }
-        
+
         operation.setCompleted();
 
         operation.resultSet = Ext.create('Ext.data.ResultSet', {
@@ -53803,7 +55337,7 @@ Ext.define('Ext.data.proxy.WebStorage', {
         for (i = 0; i < length; i++) {
             record = records[i];
             this.setRecord(record);
-            
+
             
             
             id = record.getId();
@@ -53837,7 +55371,7 @@ Ext.define('Ext.data.proxy.WebStorage', {
         }
 
         this.setIds(newIds);
-        
+
         operation.setCompleted();
         operation.setSuccessful();
 
@@ -53872,7 +55406,7 @@ Ext.define('Ext.data.proxy.WebStorage', {
 
             this.cache[id] = record;
         }
-        
+
         return this.cache[id];
     },
 
@@ -53906,10 +55440,10 @@ Ext.define('Ext.data.proxy.WebStorage', {
 
         obj = me.getStorageObject();
         key = me.getRecordKey(id);
-        
+
         
         me.cache[id] = record;
-        
+
         
         obj.removeItem(key);
         obj.setItem(key, Ext.encode(data));
@@ -53919,7 +55453,7 @@ Ext.define('Ext.data.proxy.WebStorage', {
     removeRecord: function(id, updateIds) {
         var me = this,
             ids;
-            
+
         if (id.isModel) {
             id = id.getId();
         }
@@ -53968,9 +55502,9 @@ Ext.define('Ext.data.proxy.WebStorage', {
     setIds: function(ids) {
         var obj = this.getStorageObject(),
             str = ids.join(",");
-        
+
         obj.removeItem(this.id);
-        
+
         if (!Ext.isEmpty(str)) {
             obj.setItem(this.id, str);
         }
@@ -53982,15 +55516,15 @@ Ext.define('Ext.data.proxy.WebStorage', {
             key  = this.getRecordCounterKey(),
             last = obj.getItem(key),
             ids, id;
-        
+
         if (last === null) {
             ids = this.getIds();
             last = ids[ids.length - 1] || 0;
         }
-        
+
         id = parseInt(last, 10) + 1;
         obj.setItem(key, id);
-        
+
         return id;
     },
 
@@ -54144,16 +55678,18 @@ Ext.define('Ext.data.reader.Array', {
         this.callParent(arguments);
         
         var fields = this.model.prototype.fields.items,
+            i = 0,
             length = fields.length,
             extractorFunctions = [],
-            i;
+            map;
         
-        for (i = 0; i < length; i++) {
+        for (; i < length; i++) {
+            map = fields[i].mapping;
             extractorFunctions.push(function(index) {
                 return function(data) {
                     return data[index];
                 };
-            }(fields[i].mapping || i));
+            }(map !== null ? map : i));
         }
         
         this.extractorFunctions = extractorFunctions;
@@ -54165,26 +55701,26 @@ Ext.define('Ext.data.reader.Xml', {
     extend: 'Ext.data.reader.Reader',
     alternateClassName: 'Ext.data.XmlReader',
     alias : 'reader.xml',
-    
+
     
 
     
     createAccessor: function(expr) {
         var me = this;
-        
+
         if (Ext.isEmpty(expr)) {
             return Ext.emptyFn;
         }
-        
+
         if (Ext.isFunction(expr)) {
             return expr;
         }
-        
+
         return function(root) {
             return me.getNodeValue(Ext.DomQuery.selectNode(expr, root));
         };
     },
-    
+
     getNodeValue: function(node) {
         if (node && node.firstChild) {
             return node.firstChild.nodeValue;
@@ -54209,7 +55745,7 @@ Ext.define('Ext.data.reader.Xml', {
     getRoot: function(data) {
         var nodeName = data.nodeName,
             root     = this.root;
-        
+
         if (!root || (nodeName && nodeName == root)) {
             return data;
         } else if (Ext.DomQuery.isXml(data)) {
@@ -54223,8 +55759,8 @@ Ext.define('Ext.data.reader.Xml', {
     
     extractData: function(root) {
         var recordName = this.record;
-        
-        
+
+
         if (recordName != root.nodeName) {
             root = Ext.DomQuery.select(recordName, root);
         } else {
@@ -54232,7 +55768,7 @@ Ext.define('Ext.data.reader.Xml', {
         }
         return this.callParent([root]);
     },
-    
+
     
     getAssociatedDataRoot: function(data, associationName) {
         return Ext.DomQuery.select(associationName, data)[0];
@@ -54244,7 +55780,7 @@ Ext.define('Ext.data.reader.Xml', {
         if (Ext.isArray(doc)) {
             doc = doc[0];
         }
-        
+
         
         this.xmlData = doc;
         return this.callParent([doc]);
@@ -54319,22 +55855,22 @@ Ext.define('Ext.data.writer.Xml', {
 
 
 Ext.define('Ext.direct.Event', {
+
     
-    
-   
+
     alias: 'direct.event',
-    
+
     requires: ['Ext.direct.Manager'],
+
     
-    
-   
+
     status: true,
 
     
     constructor: function(config) {
         Ext.apply(this, config);
     },
-    
+
     
     getData: function(){
         return this.data;
@@ -54374,36 +55910,36 @@ Ext.define('Ext.direct.ExceptionEvent', {
 
 
 Ext.define('Ext.direct.Provider', {
+
     
-    
-   
+
    alias: 'direct.provider',
-   
+
     mixins: {
-        observable: 'Ext.util.Observable'   
+        observable: 'Ext.util.Observable'
     },
-   
+
     
+
    
-   
-    
+
     constructor : function(config){
         var me = this;
-        
+
         Ext.apply(me, config);
         me.addEvents(
-                        
+            
             'connect',
-                        
+            
             'disconnect',
-                        
+            
             'data',
-                                    
+            
             'exception'
         );
         me.mixins.observable.constructor.call(me, config);
     },
-    
+
     
     isConnected: function(){
         return false;
@@ -54411,7 +55947,7 @@ Ext.define('Ext.direct.Provider', {
 
     
     connect: Ext.emptyFn,
-    
+
     
     disconnect: Ext.emptyFn
 });
@@ -54419,17 +55955,17 @@ Ext.define('Ext.direct.Provider', {
 
 
 Ext.define('Ext.direct.JsonProvider', {
+
     
-    
-    
+
     extend: 'Ext.direct.Provider',
-    
+
     alias: 'direct.jsonprovider',
-    
+
     uses: ['Ext.direct.ExceptionEvent'],
+
     
-    
-   
+
    
    parseResponse: function(response){
         if (!Ext.isEmpty(response.responseText)) {
@@ -54448,7 +55984,7 @@ Ext.define('Ext.direct.JsonProvider', {
             event,
             i = 0,
             len;
-            
+
         try{
             data = this.parseResponse(response);
         } catch(e) {
@@ -54460,7 +55996,7 @@ Ext.define('Ext.direct.JsonProvider', {
             });
             return [event];
         }
-        
+
         if (Ext.isArray(data)) {
             for (len = data.length; i < len; ++i) {
                 events.push(this.createEvent(data[i]));
@@ -54470,7 +56006,7 @@ Ext.define('Ext.direct.JsonProvider', {
         }
         return events;
     },
-    
+
     
     createEvent: function(response){
         return Ext.create('direct.' + response.type, response);
@@ -54577,12 +56113,12 @@ Ext.define('Ext.direct.PollingProvider', {
 });
 
 Ext.define('Ext.direct.RemotingMethod', {
-    
+
     constructor: function(config){
         var me = this,
             params = Ext.isDefined(config.params) ? config.params : config.len,
             name;
-            
+
         me.name = config.name;
         me.formHandler = config.formHandler;
         if (Ext.isNumber(params)) {
@@ -54598,7 +56134,7 @@ Ext.define('Ext.direct.RemotingMethod', {
             });
         }
     },
-    
+
     
     getCallData: function(args){
         var me = this,
@@ -54608,7 +56144,7 @@ Ext.define('Ext.direct.RemotingMethod', {
             callback,
             scope,
             name;
-            
+
         if (me.ordered) {
             callback = args[len];
             scope = args[len + 1];
@@ -54619,7 +56155,7 @@ Ext.define('Ext.direct.RemotingMethod', {
             data = Ext.apply({}, args[0]);
             callback = args[1];
             scope = args[2];
-            
+
             
             for (name in data) {
                 if (data.hasOwnProperty(name)) {
@@ -54629,11 +56165,11 @@ Ext.define('Ext.direct.RemotingMethod', {
                 }
             }
         }
-        
+
         return {
             data: data,
             callback: callback,
-            scope: scope    
+            scope: scope
         };
     }
 });
@@ -55154,14 +56690,14 @@ Ext.define('Ext.draw.Matrix', {
 
     toFilter: function() {
         var me = this;
-        return "progid:DXImageTransform.Microsoft.Matrix(M11=" + me.get(0, 0) +
+        return "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',FilterType=bilinear,M11=" + me.get(0, 0) +
             ", M12=" + me.get(0, 1) + ", M21=" + me.get(1, 0) + ", M22=" + me.get(1, 1) +
             ", Dx=" + me.get(0, 2) + ", Dy=" + me.get(1, 2) + ")";
     },
 
     offset: function() {
         var matrix = this.matrix;
-        return [matrix[0][2].toFixed(4), matrix[1][2].toFixed(4)];
+        return [(matrix[0][2] || 0).toFixed(4), (matrix[1][2] || 0).toFixed(4)];
     },
 
     
@@ -55182,7 +56718,7 @@ Ext.define('Ext.draw.Matrix', {
             row;
 
         
-        row = [[matrix[0][0], matrix[0][1]], [matrix[1][1], matrix[1][1]]];
+        row = [[matrix[0][0], matrix[0][1]], [matrix[1][0], matrix[1][1]]];
         out.scaleX = Math.sqrt(norm(row[0]));
         normalize(row[0]);
 
@@ -55202,6 +56738,7 @@ Ext.define('Ext.draw.Matrix', {
     }
 });
 
+
 Ext.define('Ext.draw.SpriteDD', {
     extend: 'Ext.dd.DragSource',
 
@@ -55231,7 +56768,7 @@ Ext.define('Ext.draw.SpriteDD', {
         bbox = sprite.getBBox();
         
         try {
-            pos = Ext.core.Element.getXY(el);
+            pos = Ext.Element.getXY(el);
         } catch (e) { }
 
         if (!pos) {
@@ -55250,77 +56787,75 @@ Ext.define('Ext.draw.SpriteDD', {
      
     startDrag: function(x, y) {
         var me = this,
-            attr = me.sprite.attr,
-            trans = attr.translation;
-        if (me.sprite.vml) {
-            me.prevX = x + attr.x;
-            me.prevY = y + attr.y;
-        } else {
-            me.prevX = x - trans.x;
-            me.prevY = y - trans.y;
-        }
+            attr = me.sprite.attr;
+        me.prev = me.sprite.surface.transformToViewBox(x, y);
     },
 
     onDrag: function(e) {
         var xy = e.getXY(),
             me = this,
             sprite = me.sprite,
-            attr = sprite.attr;
-        me.translateX = xy[0] - me.prevX;
-        me.translateY = xy[1] - me.prevY;
+            attr = sprite.attr, dx, dy;
+        xy = me.sprite.surface.transformToViewBox(xy[0], xy[1]);
+        dx = xy[0] - me.prev[0];
+        dy = xy[1] - me.prev[1];
         sprite.setAttributes({
             translate: {
-                x: me.translateX,
-                y: me.translateY
+                x: attr.translation.x + dx,
+                y: attr.translation.y + dy
             }
         }, true);
-        if (sprite.vml) {
-            me.prevX = xy[0] + attr.x || 0;
-            me.prevY = xy[1] + attr.y || 0;
-        }
+        me.prev = xy;
+    },
+
+    setDragElPos: function () {
+        
+        return false;
     }
 });
 
 Ext.define('Ext.draw.Sprite', {
+
     
+
+    mixins: {
+        observable: 'Ext.util.Observable',
+        animate: 'Ext.util.Animate'
+    },
+
+    requires: ['Ext.draw.SpriteDD'],
+
     
+
     
+
     
+
     
+
     
+
     
+
     
+
     
+
     
+
     
+
     
+
     
+
     
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
+
     
 
-    mixins: {
-        observable: 'Ext.util.Observable',
-        animate: 'Ext.util.Animate'
-    },
+    
 
-    requires: ['Ext.draw.SpriteDD'],
+    
 
     
 
@@ -55402,6 +56937,7 @@ Ext.define('Ext.draw.Sprite', {
     },
 
     
+
     initDraggable: function() {
         var me = this;
         me.draggable = true;
@@ -55474,7 +57010,7 @@ Ext.define('Ext.draw.Sprite', {
         rotate = attrs.rotate;
         rotation = spriteAttrs.rotation;
         if (rotate) {
-            if ((rotate.x && rotate.x !== rotation.x) || 
+            if ((rotate.x && rotate.x !== rotation.x) ||
                 (rotate.y && rotate.y !== rotation.y) ||
                 (rotate.degrees && rotate.degrees !== rotation.degrees)) {
                 Ext.apply(rotation, rotate);
@@ -55486,7 +57022,7 @@ Ext.define('Ext.draw.Sprite', {
         scale = attrs.scale;
         scaling = spriteAttrs.scaling;
         if (scale) {
-            if ((scale.x && scale.x !== scaling.x) || 
+            if ((scale.x && scale.x !== scaling.x) ||
                 (scale.y && scale.y !== scaling.y) ||
                 (scale.cx && scale.cx !== scaling.cx) ||
                 (scale.cy && scale.cy !== scaling.cy)) {
@@ -55509,7 +57045,7 @@ Ext.define('Ext.draw.Sprite', {
     getBBox: function() {
         return this.surface.getBBox(this);
     },
-    
+
     setText: function(text) {
         return this.surface.setText(this, text);
     },
@@ -55586,7 +57122,7 @@ Ext.define('Ext.draw.engine.Svg', {
 
     extend: 'Ext.draw.Surface',
 
-    requires: ['Ext.draw.Draw', 'Ext.draw.Sprite', 'Ext.draw.Matrix', 'Ext.core.Element'],
+    requires: ['Ext.draw.Draw', 'Ext.draw.Sprite', 'Ext.draw.Matrix', 'Ext.Element'],
 
     
 
@@ -56135,17 +57671,19 @@ Ext.define('Ext.draw.engine.Svg', {
 
     
     applyZIndex: function(sprite) {
-        var idx = this.normalizeSpriteCollection(sprite),
+        var me = this,
+            items = me.items,
+            idx = items.indexOf(sprite),
             el = sprite.el,
             prevEl;
-        if (this.el.dom.childNodes[idx + 2] !== el.dom) { 
+        if (me.el.dom.childNodes[idx + 2] !== el.dom) { 
             if (idx > 0) {
                 
                 do {
-                    prevEl = this.items.getAt(--idx).el;
+                    prevEl = items.getAt(--idx).el;
                 } while (!prevEl && idx > 0);
             }
-            el.insertAfter(prevEl || this.bgRect);
+            el.insertAfter(prevEl || me.bgRect);
         }
         sprite.zIndexDirty = false;
     },
@@ -56276,7 +57814,7 @@ Ext.define('Ext.draw.engine.Vml', {
 
     extend: 'Ext.draw.Surface',
 
-    requires: ['Ext.draw.Draw', 'Ext.draw.Color', 'Ext.draw.Sprite', 'Ext.draw.Matrix', 'Ext.core.Element'],
+    requires: ['Ext.draw.Draw', 'Ext.draw.Color', 'Ext.draw.Sprite', 'Ext.draw.Matrix', 'Ext.Element'],
 
     
 
@@ -56298,8 +57836,11 @@ Ext.define('Ext.draw.engine.Vml', {
     coordsize: 1000,
     coordorigin: '0 0',
 
-    // @private
-    // Convert an SVG standard path into a VML path
+    // VML uses CSS z-index and therefore doesn't need sprites to be kept in zIndex order
+    orderSpritesByZIndex: false,
+
+    
+    
     path2vml: function (path) {
         var me = this,
             nonVML =  me.NonVmlPathRe,
@@ -56343,7 +57884,7 @@ Ext.define('Ext.draw.engine.Vml', {
         return res.join(" ");
     },
 
-    // @private - set of attributes which need to be translated from the sprite API to the native browser API
+    
     translateAttrs: {
         radius: "r",
         radiusX: "rx",
@@ -56354,7 +57895,7 @@ Ext.define('Ext.draw.engine.Vml', {
         strokeLinejoin: "stroke-linejoin"
     },
 
-    // @private - Minimun set of defaults for different types of sprites.
+    
     minDefaults: {
         circle: {
             fill: "none",
@@ -56421,17 +57962,17 @@ Ext.define('Ext.draw.engine.Vml', {
         }
     },
 
-    // private
+    
     onMouseEnter: function(e) {
         this.fireEvent("mouseenter", e);
     },
 
-    // private
+    
     onMouseLeave: function(e) {
         this.fireEvent("mouseleave", e);
     },
 
-    // @private - Normalize a delegated single event from the main container to each sprite and sprite group
+    
     processEvent: function(name, e) {
         var target = e.getTarget(),
             surface = this.surface,
@@ -56443,7 +57984,7 @@ Ext.define('Ext.draw.engine.Vml', {
         }
     },
 
-    // Create the VML element/elements and append them to the DOM
+    
     createSpriteElement: function(sprite) {
         var me = this,
             attr = sprite.attr,
@@ -56451,7 +57992,7 @@ Ext.define('Ext.draw.engine.Vml', {
             zoom = me.zoom,
             vml = sprite.vml || (sprite.vml = {}),
             round = Math.round,
-            el = (type === 'image') ? me.createNode('image') : me.createNode('shape'),
+            el = me.createNode('shape'),
             path, skew, textPath;
 
         el.coordsize = zoom + ' ' + zoom;
@@ -56483,7 +58024,7 @@ Ext.define('Ext.draw.engine.Vml', {
         return sprite.el;
     },
 
-    // @private - Get bounding box for the sprite.  The Sprite itself has the public method.
+    
     getBBox: function (sprite, isWithoutTransform) {
         var realPath = this["getPath" + sprite.type](sprite);
         if (isWithoutTransform) {
@@ -56528,24 +58069,9 @@ Ext.define('Ext.draw.engine.Vml', {
             me.setZIndex(sprite);
         }
 
-        // Apply minimum default attributes
+        
         Ext.applyIf(scrubbedAttrs, me.minDefaults[sprite.type]);
 
-        if (sprite.type == 'image') {
-            Ext.apply(sprite.attr, {
-                x: scrubbedAttrs.x,
-                y: scrubbedAttrs.y,
-                width: scrubbedAttrs.width,
-                height: scrubbedAttrs.height
-            });
-            bbox = sprite.getBBox();
-            el.setStyle({
-                width: bbox.width + 'px',
-                height: bbox.height + 'px'
-            });
-            dom.src = scrubbedAttrs.src;
-        }
-
         if (dom.href) {
             dom.href = scrubbedAttrs.href;
         }
@@ -56559,13 +58085,13 @@ Ext.define('Ext.draw.engine.Vml', {
             dom.cursor = scrubbedAttrs.cursor;
         }
 
-        // Change visibility
+        
         if (sprite.dirtyHidden) {
             (scrubbedAttrs.hidden) ? me.hidePrim(sprite) : me.showPrim(sprite);
             sprite.dirtyHidden = false;
         }
 
-        // Update path
+        
         if (sprite.dirtyPath) {
             if (sprite.type == "circle" || sprite.type == "ellipse") {
                 var cx = scrubbedAttrs.x,
@@ -56580,34 +58106,34 @@ Ext.define('Ext.draw.engine.Vml', {
                             Math.round(cx * me.zoom));
                 sprite.dirtyPath = false;
             }
-            else if (sprite.type !== "text" && sprite.type !== 'image') {
+            else if (sprite.type !== "text") {
                 sprite.attr.path = scrubbedAttrs.path = me.setPaths(sprite, scrubbedAttrs) || scrubbedAttrs.path;
                 dom.path = me.path2vml(scrubbedAttrs.path);
                 sprite.dirtyPath = false;
             }
         }
 
-        // Apply clipping
+        
         if ("clip-rect" in scrubbedAttrs) {
             me.setClip(sprite, scrubbedAttrs);
         }
 
-        // Handle text (special handling required)
+        
         if (sprite.type == "text") {
             me.setTextAttributes(sprite, scrubbedAttrs);
         }
 
-        // Handle fill and opacity
-        if (scrubbedAttrs.opacity  || scrubbedAttrs['stroke-opacity'] || scrubbedAttrs.fill) {
+        
+        if (sprite.type == 'image' || scrubbedAttrs.opacity  || scrubbedAttrs['fill-opacity'] || scrubbedAttrs.fill) {
             me.setFill(sprite, scrubbedAttrs);
         }
 
-        // Handle stroke (all fills require a stroke element)
+        
         if (scrubbedAttrs.stroke || scrubbedAttrs['stroke-opacity'] || scrubbedAttrs.fill) {
             me.setStroke(sprite, scrubbedAttrs);
         }
         
-        //set styles
+        
         style = spriteAttr.style;
         if (style) {
             el.setStyle(style);
@@ -56625,10 +58151,10 @@ Ext.define('Ext.draw.engine.Vml', {
         }
     },
 
-    // Normalize all virtualized types into paths.
+    
     setPaths: function(sprite, params) {
         var spriteAttr = sprite.attr;
-        // Clear bbox cache
+        
         sprite.bbox.plain = null;
         sprite.bbox.transform = null;
         if (sprite.type == 'circle') {
@@ -56640,7 +58166,7 @@ Ext.define('Ext.draw.engine.Vml', {
             spriteAttr.ry = params.ry;
             return Ext.draw.Draw.ellipsePath(sprite);
         }
-        else if (sprite.type == 'rect') {
+        else if (sprite.type == 'rect' || sprite.type == 'image') {
             spriteAttr.rx = spriteAttr.ry = params.r;
             return Ext.draw.Draw.rectPath(sprite);
         }
@@ -56652,23 +58178,27 @@ Ext.define('Ext.draw.engine.Vml', {
 
     setFill: function(sprite, params) {
         var me = this,
-            el = sprite.el.dom,
-            fillEl = el.fill,
-            newfill = false,
+            el = sprite.el,
+            dom = el.dom,
+            fillEl = dom.getElementsByTagName('fill')[0],
             opacity, gradient, fillUrl, rotation, angle;
 
-        if (!fillEl) {
-            // NOT an expando (but it sure looks like one)...
-            fillEl = el.fill = me.createNode("fill");
-            newfill = true;
+        if (fillEl) {
+            dom.removeChild(fillEl);
+        } else {
+            fillEl = me.createNode('fill');
         }
         if (Ext.isArray(params.fill)) {
             params.fill = params.fill[0];
         }
-        if (params.fill == "none") {
+        if (sprite.type == 'image') {
+            fillEl.on = true;
+            fillEl.src = params.src;
+            fillEl.type = "tile";
+            fillEl.rotate = true;
+        } else if (params.fill == "none") {
             fillEl.on = false;
-        }
-        else {
+        } else {
             if (typeof params.opacity == "number") {
                 fillEl.opacity = params.opacity;
             }
@@ -56680,39 +58210,38 @@ Ext.define('Ext.draw.engine.Vml', {
                 fillUrl = params.fill.match(me.fillUrlRe);
                 if (fillUrl) {
                     fillUrl = fillUrl[1];
-                    // If the URL matches one of the registered gradients, render that gradient
+                    
                     if (fillUrl.charAt(0) == "#") {
                         gradient = me.gradientsColl.getByKey(fillUrl.substring(1));
                     }
                     if (gradient) {
-                        // VML angle is offset and inverted from standard, and must be adjusted to match rotation transform
+                        
                         rotation = params.rotation;
                         angle = -(gradient.angle + 270 + (rotation ? rotation.degrees : 0)) % 360;
-                        // IE will flip the angle at 0 degrees...
+                        
                         if (angle === 0) {
                             angle = 180;
                         }
                         fillEl.angle = angle;
                         fillEl.type = "gradient";
                         fillEl.method = "sigma";
-                        fillEl.colors.value = gradient.colors;
+                        fillEl.colors = gradient.colors;
                     }
-                    // Otherwise treat it as an image
+                    
                     else {
                         fillEl.src = fillUrl;
                         fillEl.type = "tile";
+                        fillEl.rotate = true;
                     }
                 }
                 else {
-                    fillEl.color = Ext.draw.Color.toHex(params.fill);
+                    fillEl.color = Ext.draw.Color.toHex(params.fill) || params.fill;
                     fillEl.src = "";
                     fillEl.type = "solid";
                 }
             }
         }
-        if (newfill) {
-            el.appendChild(fillEl);
-        }
+        dom.appendChild(fillEl);
     },
 
     setStroke: function(sprite, params) {
@@ -56735,7 +58264,7 @@ Ext.define('Ext.draw.engine.Vml', {
         else {
             strokeEl.on = true;
             if (params.stroke && !params.stroke.match(me.fillUrlRe)) {
-                // VML does NOT support a gradient stroke :(
+                
                 strokeEl.color = Ext.draw.Color.toHex(params.stroke);
             }
             strokeEl.joinstyle = params["stroke-linejoin"];
@@ -56743,7 +58272,7 @@ Ext.define('Ext.draw.engine.Vml', {
             strokeEl.miterlimit = params["stroke-miterlimit"] || 8;
             width = parseFloat(params["stroke-width"] || 1) * 0.75;
             opacity = params["stroke-opacity"] || 1;
-            // VML Does not support stroke widths under 1, so we're going to fiddle with stroke-opacity instead.
+            
             if (Ext.isNumber(width) && width < 1) {
                 strokeEl.weight = 1;
                 strokeEl.opacity = opacity * width;
@@ -56944,24 +58473,26 @@ Ext.define('Ext.draw.engine.Vml', {
         this.callParent(arguments);
     },
 
+    
+    createNode : (function () {
+        try {
+            var doc = Ext.getDoc().dom;
+            if (!doc.namespaces.rvml) {
+                doc.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
+            }
+            return function (tagName) {
+                return doc.createElement("<rvml:" + tagName + ' class="rvml">');
+            };
+        } catch (e) {
+            return function (tagName) {
+                return doc.createElement("<" + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
+            };
+        }
+    })(),
+
     render: function (container) {
         var me = this,
             doc = Ext.getDoc().dom;
-        
-        if (!me.createNode) {
-            try {
-                if (!doc.namespaces.rvml) {
-                    doc.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
-                }
-                me.createNode = function (tagName) {
-                    return doc.createElement("<rvml:" + tagName + ' class="rvml">');
-                };
-            } catch (e) {
-                me.createNode = function (tagName) {
-                    return doc.createElement("<" + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
-                };
-            }
-        }
 
         if (!me.el) {
             var el = doc.createElement("div");
@@ -57026,92 +58557,130 @@ Ext.define('Ext.draw.engine.Vml', {
         };
     },
 
-    transform: function(sprite) {
+    extractTransform: function (sprite) {
         var me = this,
-            matrix = Ext.create('Ext.draw.Matrix'),
-            transforms = sprite.transformations,
-            transformsLength = transforms.length,
-            i = 0,
-            deltaDegrees = 0,
-            deltaScaleX = 1,
-            deltaScaleY = 1,
-            flip = "",
-            el = sprite.el,
-            dom = el.dom,
-            domStyle = dom.style,
-            zoom = me.zoom,
-            skew = sprite.skew,
-            deltaX, deltaY, transform, type, compensate, y, fill, newAngle,zoomScaleX, zoomScaleY, newOrigin;
+            matrix = Ext.create('Ext.draw.Matrix'), scale,
+            transformstions, tranformationsLength,
+            transform, i = 0,
+            shift = me.viewBoxShift;
 
-        for (; i < transformsLength; i++) {
-            transform = transforms[i];
-            type = transform.type;
-            if (type == "translate") {
-                matrix.translate(transform.x, transform.y);
-            }
-            else if (type == "rotate") {
-                matrix.rotate(transform.degrees, transform.x, transform.y);
-                deltaDegrees += transform.degrees;
-            }
-            else if (type == "scale") {
-                matrix.scale(transform.x, transform.y, transform.centerX, transform.centerY);
-                deltaScaleX *= transform.x;
-                deltaScaleY *= transform.y;
+        for(transformstions = sprite.transformations, tranformationsLength = transformstions.length;
+            i < tranformationsLength; i ++) {
+            transform = transformstions[i];
+            switch (transform.type) {
+                case 'translate' :
+                    matrix.translate(transform.x, transform.y);
+                    break;
+                case 'rotate':
+                    matrix.rotate(transform.degrees, transform.x, transform.y);
+                    break;
+                case 'scale':
+                    matrix.scale(transform.x || transform.scale, transform.y || transform.scale, transform.centerX, transform.centerY);
+                    break;
             }
         }
 
-        if (me.viewBoxShift) {
-            matrix.scale(me.viewBoxShift.scale, me.viewBoxShift.scale, -1, -1);
-            matrix.add(1, 0, 0, 1, me.viewBoxShift.dx, me.viewBoxShift.dy);
+        if (shift) {
+            matrix.add(1, 0, 0, 1, shift.dx, shift.dy);
+            matrix.prepend(shift.scale, 0, 0, shift.scale, 0, 0);
         }
+        
+        return sprite.matrix = matrix;
+    },
 
-        sprite.matrix = matrix;
+    setSimpleCoords: function(sprite, sx, sy, dx, dy, rotate) {
+        var me = this,
+            matrix = sprite.matrix,
+            dom = sprite.el.dom,
+            style = dom.style,
+            yFlipper = 1,
+            flip = "",
+            fill = dom.getElementsByTagName('fill')[0],
+            kx = me.zoom / sx,
+            ky = me.zoom / sy,
+            rotationCompensation;
+        if (!sx || !sy) {
+            return;
+        }
+        dom.coordsize = Math.abs(kx) + ' ' + Math.abs(ky);
+        style.rotation = rotate * (sx * sy < 0 ? -1 : 1);
+        if (rotate) {
+            rotationCompensation = me.rotationCompensation(rotate, dx, dy);
+            dx = rotationCompensation.x;
+            dy = rotationCompensation.y;
+        }
+        if (sx < 0) {
+            flip += "x"
+        }
+        if (sy < 0) {
+            flip += " y";
+            yFlipper = -1;
+        }
+        style.flip = flip;
+        dom.coordorigin = (dx * -kx) + ' ' + (dy * -ky);
+        if (fill) {
+            dom.removeChild(fill);
+            rotationCompensation = me.rotationCompensation(rotate, matrix.x(sprite.x, sprite.y), matrix.y(sprite.x, sprite.y));
+            fill.position = rotationCompensation.x * yFlipper + ' ' + rotationCompensation.y * yFlipper;
+            fill.size = sprite.width * Math.abs(sx) + ' ' + sprite.height * Math.abs(sy);
+            dom.appendChild(fill);
+        }
+    },
+
+    transform : function (sprite) {
+        var me = this,
+            el = sprite.el,
+            skew = sprite.skew,
+            dom = el.dom,
+            domStyle = dom.style,
+            matrix = me.extractTransform(sprite).clone(),
+            split, zoom = me.zoom,
+            fill = dom.getElementsByTagName('fill')[0],
+            isPatt = !String(sprite.fill).indexOf("url("),
+            offset, c;
 
 
         
 
-        if (sprite.type != "image" && skew) {
+        if (sprite.type != "image" && skew && !isPatt) {
             
             skew.matrix = matrix.toString();
-            skew.offset = matrix.offset();
-        }
-        else {
-            deltaX = matrix.matrix[0][2];
-            deltaY = matrix.matrix[1][2];
             
-            zoomScaleX = zoom / deltaScaleX;
-            zoomScaleY = zoom / deltaScaleY;
-
-            dom.coordsize = Math.abs(zoomScaleX) + " " + Math.abs(zoomScaleY);
-
             
-            newAngle = deltaDegrees * (deltaScaleX * ((deltaScaleY < 0) ? -1 : 1));
-            if (newAngle != domStyle.rotation && !(newAngle === 0 && !domStyle.rotation)) {
-                domStyle.rotation = newAngle;
-            }
-            if (deltaDegrees) {
-                
-                compensate = me.rotationCompensation(deltaDegrees, deltaX, deltaY);
-                deltaX = compensate.x;
-                deltaY = compensate.y;
-            }
-
             
-            if (deltaScaleX < 0) {
-                flip += "x";
+            offset = matrix.offset();
+            if (offset[0] > 32767) {
+                offset[0] = 32767;
+            } else if (offset[0] < -32768) {
+                offset[0] = -32768
             }
-            if (deltaScaleY < 0) {
-                flip += " y";
-                y = -1;
+            if (offset[1] > 32767) {
+                offset[1] = 32767;
+            } else if (offset[1] < -32768) {
+                offset[1] = -32768
             }
-            if (flip != "" && !dom.style.flip) {
-                domStyle.flip = flip;
-            }
-
-            
-            newOrigin = (deltaX * -zoomScaleX) + " " + (deltaY * -zoomScaleY);
-            if (newOrigin != dom.coordorigin) {
-                dom.coordorigin = (deltaX * -zoomScaleX) + " " + (deltaY * -zoomScaleY);
+            skew.offset = offset;
+        } else {
+            if (skew) {
+                skew.matrix = "1 0 0 1";
+                skew.offset = "0 0";
+            }
+            split = matrix.split();
+            if (split.isSimple) {
+                domStyle.filter = '';
+                me.setSimpleCoords(sprite, split.scaleX, split.scaleY, split.translateX, split.translateY, split.rotate / Math.PI * 180);
+            } else {
+                domStyle.filter = matrix.toFilter();
+                var bb = me.getBBox(sprite),
+                    dx = bb.x - sprite.x,
+                    dy = bb.y - sprite.y;
+                dom.coordorigin = (dx * -zoom) + ' ' + (dy * -zoom);
+                if (fill) {
+                    dom.removeChild(fill);
+                    fill.position = dx + ' ' + dy;
+                    fill.size = sprite.width * sprite.scale.x + ' ' + sprite.height * 1.1;
+                    dom.appendChild(fill);
+                }
             }
         }
     },
@@ -57276,16 +58845,39 @@ Ext.define('Ext.layout.container.Fit', {
     extend: 'Ext.layout.container.AbstractFit',
     alias: 'layout.fit',
     alternateClassName: 'Ext.layout.FitLayout',
+    requires: ['Ext.layout.container.Box'],
 
     
-   
+
+    
+    defaultMargins: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+    },
+
     
     onLayout : function() {
-        var me = this;
+        var me = this,
+            size,
+            item,
+            margins;
         me.callParent();
 
         if (me.owner.items.length) {
-            me.setItemBox(me.owner.items.get(0), me.getLayoutTargetSize());
+            item = me.owner.items.get(0);
+            margins = item.margins || me.defaultMargins;
+            size = me.getLayoutTargetSize();
+            size.width  -= margins.width;
+            size.height -= margins.height;
+            me.setItemBox(item, size);
+
+            
+            
+            if (margins.left || margins.top) {
+                item.setPosition(margins.left, margins.top);
+            }
         }
     },
 
@@ -57315,6 +58907,10 @@ Ext.define('Ext.layout.container.Fit', {
 
         this.callParent(arguments);
     }
+}, function() {
+    
+    
+    this.prototype.renderItem = Ext.layout.container.Box.prototype.renderItem;
 });
 
 Ext.define('Ext.layout.container.AbstractCard', {
@@ -57336,7 +58932,7 @@ Ext.define('Ext.layout.container.AbstractCard', {
 
     beforeLayout: function() {
         var me = this;
-        me.activeItem = me.getActiveItem();
+        me.getActiveItem();
         if (me.activeItem && me.deferredRender) {
             me.renderItems([me.activeItem], me.getRenderTarget());
             return true;
@@ -57346,6 +58942,13 @@ Ext.define('Ext.layout.container.AbstractCard', {
         }
     },
 
+    renderChildren: function () {
+        if (!this.deferredRender) {
+            this.getActiveItem();
+            this.callParent();
+        }
+    },
+
     onLayout: function() {
         var me = this,
             activeItem = me.activeItem,
@@ -57482,7 +59085,6 @@ Ext.define('Ext.selection.Model', {
     
     selected: null,
 
-
     
     pruneRemoved: true,
 
@@ -57494,7 +59096,7 @@ Ext.define('Ext.selection.Model', {
 
         me.addEvents(
             
-             'selectionchange'
+            'selectionchange'
         );
 
         me.modes = {
@@ -57518,7 +59120,7 @@ Ext.define('Ext.selection.Model', {
 
         if(!initial && me.store){
             if(store !== me.store && me.store.autoDestroy){
-                me.store.destroy();
+                me.store.destroyStore();
             }else{
                 me.store.un("add", me.onStoreAdd, me);
                 me.store.un("clear", me.onStoreClear, me);
@@ -57673,7 +59275,10 @@ Ext.define('Ext.selection.Model', {
 
     
     select: function(records, keepExisting, suppressEvent) {
-        this.doSelect(records, keepExisting, suppressEvent);
+        
+        if (Ext.isDefined(records)) {
+            this.doSelect(records, keepExisting, suppressEvent);
+        }
     },
 
     
@@ -57764,7 +59369,7 @@ Ext.define('Ext.selection.Model', {
         }
 
         len = records.length;
-        
+
         for (; i < len; i++) {
             record = records[i];
             if (me.isSelected(record)) {
@@ -58129,6 +59734,11 @@ Ext.define('Ext.selection.DataViewModel', {
                 me.fireEvent(eventName, me, record);
             }
         }
+    },
+    
+    destroy: function(){
+        Ext.destroy(this.keyNav);
+        this.callParent();
     }
 });
 
@@ -58137,6 +59747,14 @@ Ext.define('Ext.state.CookieProvider', {
     extend: 'Ext.state.Provider',
 
     
+
+    
+
+    
+
+    
+
+    
     constructor : function(config){
         var me = this;
         me.path = "/";
@@ -58146,11 +59764,11 @@ Ext.define('Ext.state.CookieProvider', {
         me.callParent(arguments);
         me.state = me.readCookies();
     },
-    
+
     
     set : function(name, value){
         var me = this;
-        
+
         if(typeof value == "undefined" || value === null){
             me.clear(name);
             return;
@@ -58175,7 +59793,7 @@ Ext.define('Ext.state.CookieProvider', {
             matches,
             name,
             value;
-            
+
         while((matches = re.exec(c)) != null){
             name = matches[1];
             value = matches[2];
@@ -58189,7 +59807,7 @@ Ext.define('Ext.state.CookieProvider', {
     
     setCookie : function(name, value){
         var me = this;
-        
+
         document.cookie = me.prefix + name + "=" + me.encodeValue(value) +
            ((me.expires == null) ? "" : ("; expires=" + me.expires.toGMTString())) +
            ((me.path == null) ? "" : ("; path=" + me.path)) +
@@ -58200,7 +59818,7 @@ Ext.define('Ext.state.CookieProvider', {
     
     clearCookie : function(name){
         var me = this;
-        
+
         document.cookie = me.prefix + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
            ((me.path == null) ? "" : ("; path=" + me.path)) +
            ((me.domain == null) ? "" : ("; domain=" + me.domain)) +
@@ -58274,7 +59892,6 @@ Ext.define('Ext.state.LocalStorageProvider', {
 });
 
 
-
 Ext.define('Ext.util.Point', {
 
     
@@ -58291,6 +59908,7 @@ Ext.define('Ext.util.Point', {
 
     
 
+    
     constructor: function(x, y) {
         this.callParent([y, x, y, x]);
     },
@@ -58328,6 +59946,196 @@ Ext.define('Ext.util.Point', {
 });
 
 
+
+Ext.define('Ext.LoadMask', {
+
+    extend: 'Ext.Component',
+
+    alias: 'widget.loadmask',
+
+    
+
+    mixins: {
+        floating: 'Ext.util.Floating'
+    },
+
+    uses: ['Ext.data.StoreManager'],
+
+    
+
+    
+
+    
+    msg : 'Loading...',
+    
+    msgCls : Ext.baseCSSPrefix + 'mask-loading',
+    
+    
+    useMsg: true,
+
+    
+    disabled: false,
+
+    baseCls: Ext.baseCSSPrefix + 'mask-msg',
+
+    renderTpl: '<div style="position:relative" class="{msgCls}"></div>',
+
+    
+    modal: true,
+
+    
+    floating: {
+        shadow: 'frame'
+    },
+
+    
+    focusOnToFront: false,
+
+    
+    constructor : function(el, config) {
+        var me = this;
+
+        
+        if (el.isComponent) {
+            me.ownerCt = el;
+            me.bindComponent(el);
+        }
+        
+        else {
+            me.ownerCt = new Ext.Component({
+                el: Ext.get(el),
+                rendered: true,
+                componentLayoutCounter: 1
+            });
+            me.container = el;
+        }
+        me.callParent([config]);
+
+        if (me.store) {
+            me.bindStore(me.store, true);
+        }
+        me.renderData = {
+            msgCls: me.msgCls
+        };
+        me.renderSelectors = {
+            msgEl: 'div'
+        };
+    },
+
+    bindComponent: function(comp) {
+        this.mon(comp, {
+            resize: this.onComponentResize,
+            scope: this
+        });
+    },
+
+    afterRender: function() {
+        this.callParent(arguments);
+        this.container = this.floatParent.getContentTarget();
+    },
+
+    
+    onComponentResize: function() {
+        var me = this;
+        if (me.rendered && me.isVisible()) {
+            me.toFront();
+            me.center();
+        }
+    },
+
+    
+    bindStore : function(store, initial) {
+        var me = this;
+
+        if (!initial && me.store) {
+            me.mun(me.store, {
+                scope: me,
+                beforeload: me.onBeforeLoad,
+                load: me.onLoad,
+                exception: me.onLoad
+            });
+            if (!store) {
+                me.store = null;
+            }
+        }
+        if (store) {
+            store = Ext.data.StoreManager.lookup(store);
+            me.mon(store, {
+                scope: me,
+                beforeload: me.onBeforeLoad,
+                load: me.onLoad,
+                exception: me.onLoad
+            });
+
+        }
+        me.store = store;
+        if (store && store.isLoading()) {
+            me.onBeforeLoad();
+        }
+    },
+
+    onDisable : function() {
+        this.callParent(arguments);
+        if (this.loading) {
+            this.onLoad();
+        }
+    },
+
+    
+    onBeforeLoad : function() {
+        var me = this,
+            owner = me.ownerCt || me.floatParent,
+            origin;
+        if (!this.disabled) {
+            
+            
+            if (owner.componentLayoutCounter) {
+                Ext.Component.prototype.show.call(me);
+            } else {
+                
+                origin = owner.afterComponentLayout;
+                owner.afterComponentLayout = function() {
+                    owner.afterComponentLayout = origin;
+                    origin.apply(owner, arguments);
+                    if(me.loading) {
+                        Ext.Component.prototype.show.call(me);
+                    }
+                };
+            }
+        }
+    },
+
+    onHide: function(){
+        var me = this;
+        me.callParent(arguments);
+        me.showOnParentShow = true;
+    },
+
+    onShow: function() {
+        var me = this,
+            msgEl = me.msgEl;
+            
+        me.callParent(arguments);
+        me.loading = true;
+        if (me.useMsg) {
+            msgEl.show().update(me.msg);
+        } else {
+            msgEl.parent().hide();
+        }
+    },
+
+    afterShow: function() {
+        this.callParent(arguments);
+        this.center();
+    },
+
+    
+    onLoad : function() {
+        this.loading = false;
+        Ext.Component.prototype.hide.call(this);
+    }
+});
+
 Ext.define('Ext.view.AbstractView', {
     extend: 'Ext.Component',
     alternateClassName: 'Ext.view.AbstractView',
@@ -58353,6 +60161,9 @@ Ext.define('Ext.view.AbstractView', {
     
 
     
+    deferInitialRefresh: true,
+
+    
 
     
     itemCls: Ext.baseCSSPrefix + 'dataview-item',
@@ -58363,7 +60174,7 @@ Ext.define('Ext.view.AbstractView', {
 
     
     loadingText: 'Loading...',
-    
+
     
     loadMask: true,
 
@@ -58441,6 +60252,8 @@ Ext.define('Ext.view.AbstractView', {
             
             'refresh',
             
+            'viewready',
+            
             'itemupdate',
             
             'itemadd',
@@ -58450,9 +60263,8 @@ Ext.define('Ext.view.AbstractView', {
 
         me.addCmpEvents();
 
-        if (me.store) {
-            me.store = Ext.data.StoreManager.lookup(me.store);
-        }
+        
+        me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');
         me.all = new Ext.CompositeElementLite();
     },
 
@@ -58476,7 +60288,7 @@ Ext.define('Ext.view.AbstractView', {
             
             
             
-            me.loadMask = Ext.create('Ext.LoadMask', me.floating ? me : me.ownerCt || me, cfg);
+            me.loadMask = Ext.create('Ext.LoadMask', me, cfg);
             me.loadMask.on({
                 scope: me,
                 beforeshow: me.onMaskBeforeShow,
@@ -58484,19 +60296,21 @@ Ext.define('Ext.view.AbstractView', {
             });
         }
     },
-    
+
     onMaskBeforeShow: function(){
-        var me = this;
-        me.getSelectionModel().deselectAll();
-        me.all.clear();
-        if (me.loadingHeight) {
-            me.setCalculatedSize(undefined, me.loadingHeight);
+        var loadingHeight = this.loadingHeight;
+        
+        this.getSelectionModel().deselectAll();
+        if (loadingHeight) {
+            this.setCalculatedSize(undefined, loadingHeight);
         }
     },
-    
+
     onMaskHide: function(){
-        if (!this.destroying && this.loadingHeight) {
-            this.setHeight(this.height);
+        var me = this;
+        
+        if (!me.destroying && me.loadingHeight) {
+            me.setHeight(me.height);
         }
     },
 
@@ -58555,7 +60369,7 @@ Ext.define('Ext.view.AbstractView', {
             el,
             records;
 
-        if (!me.rendered) {
+        if (!me.rendered || me.isDestroyed) {
             return;
         }
 
@@ -58578,6 +60392,15 @@ Ext.define('Ext.view.AbstractView', {
         me.selModel.refresh();
         me.hasSkippedEmptyText = true;
         me.fireEvent('refresh', me);
+
+        
+        
+        if (!me.viewReady) {
+            
+            
+            me.viewReady = true;
+            me.fireEvent('viewready', me);
+        }
     },
 
     
@@ -58617,14 +60440,15 @@ Ext.define('Ext.view.AbstractView', {
 
         if (index > -1){
             node = me.bufferRender([record], index)[0];
-
-            me.all.replaceElement(index, node, true);
-            me.updateIndexes(index, index);
-
             
-            
-            me.selModel.refresh();
-            me.fireEvent('itemupdate', record, index, node);
+            if (me.getNode(record)) {
+                me.all.replaceElement(index, node, true);
+                me.updateIndexes(index, index);
+                
+                
+                me.selModel.refresh();
+                me.fireEvent('itemupdate', record, index, node);
+            }
         }
 
     },
@@ -58652,8 +60476,7 @@ Ext.define('Ext.view.AbstractView', {
 
         if (index < all.getCount()) {
             all.item(index).insertSibling(nodes, 'before', true);
-        }
-        else {
+        } else {
             all.last().insertSibling(nodes, 'after', true);
         }
 
@@ -58684,10 +60507,12 @@ Ext.define('Ext.view.AbstractView', {
     
     updateIndexes : function(startIndex, endIndex) {
         var ns = this.all.elements,
-            records = this.store.getRange();
+            records = this.store.getRange(),
+            i;
+            
         startIndex = startIndex || 0;
         endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
-        for(var i = startIndex; i <= endIndex; i++){
+        for(i = startIndex; i <= endIndex; i++){
             ns[i].viewIndex = i;
             ns[i].viewRecordId = records[i].internalId;
             if (!ns[i].boundView) {
@@ -58703,11 +60528,12 @@ Ext.define('Ext.view.AbstractView', {
 
     
     bindStore : function(store, initial) {
-        var me = this;
+        var me = this,
+            maskStore;
 
         if (!initial && me.store) {
             if (store !== me.store && me.store.autoDestroy) {
-                me.store.destroy();
+                me.store.destroyStore();
             }
             else {
                 me.mun(me.store, {
@@ -58720,7 +60546,8 @@ Ext.define('Ext.view.AbstractView', {
                 });
             }
             if (!store) {
-                if (me.loadMask) {
+                
+                if (me.loadMask && me.loadMask.bindStore) {
                     me.loadMask.bindStore(null);
                 }
                 me.store = null;
@@ -58736,17 +60563,37 @@ Ext.define('Ext.view.AbstractView', {
                 update: me.onUpdate,
                 clear: me.refresh
             });
-            if (me.loadMask) {
-                me.loadMask.bindStore(store);
+            
+            if (me.loadMask && me.loadMask.bindStore) {
+                
+                if (Ext.Array.contains(store.alias, 'store.node')) {
+                    maskStore = this.ownerCt.store;
+                } else {
+                    maskStore = store;
+                }
+                me.loadMask.bindStore(maskStore);
             }
         }
 
+        
+        
+        me.viewReady = false;
+
         me.store = store;
         
         me.getSelectionModel().bind(store);
 
-        if (store && (!initial || store.getCount())) {
-            me.refresh(true);
+        
+        if (store) {
+            if (initial && me.deferInitialRefresh) {
+                Ext.Function.defer(function () {
+                    if (!me.isDestroyed) {
+                        me.refresh(true);
+                    }
+                }, 1);
+            } else {
+                me.refresh(true);
+            }
         }
     },
 
@@ -58821,14 +60668,19 @@ Ext.define('Ext.view.AbstractView', {
 
     
     getNode : function(nodeInfo) {
+        if (!this.rendered) {
+            return null;
+        }
         if (Ext.isString(nodeInfo)) {
             return document.getElementById(nodeInfo);
-        } else if (Ext.isNumber(nodeInfo)) {
+        }
+        if (Ext.isNumber(nodeInfo)) {
             return this.all.elements[nodeInfo];
-        } else if (nodeInfo instanceof Ext.data.Model) {
+        }
+        if (nodeInfo instanceof Ext.data.Model) {
             return this.getNodeByRecord(nodeInfo);
         }
-        return nodeInfo;
+        return nodeInfo; 
     },
 
     
@@ -58887,13 +60739,19 @@ Ext.define('Ext.view.AbstractView', {
     
     onItemSelect: function(record) {
         var node = this.getNode(record);
-        Ext.fly(node).addCls(this.selectedItemCls);
+        
+        if (node) {
+            Ext.fly(node).addCls(this.selectedItemCls);
+        }
     },
 
     
     onItemDeselect: function(record) {
         var node = this.getNode(record);
-        Ext.fly(node).removeCls(this.selectedItemCls);
+        
+        if (node) {
+            Ext.fly(node).removeCls(this.selectedItemCls);
+        }
     },
 
     getItemSelector: function() {
@@ -59051,7 +60909,7 @@ Ext.define('Ext.Action', {
         var items = this.items,
             i = 0,
             len = items.length;
-            
+
         for(; i < len; i++){
             items[i][fnName].apply(items[i], args);
         }
@@ -59209,8 +61067,10 @@ Ext.define('Ext.Editor', {
         me.addEvents(
             
             'beforestartedit',
+
             
             'startedit',
+
             
             'beforecomplete',
             
@@ -59230,19 +61090,22 @@ Ext.define('Ext.Editor', {
     
     onRender : function(ct, position) {
         var me = this,
-            field = me.field;
+            field = me.field,
+            inputEl = field.inputEl;
 
         me.callParent(arguments);
 
         field.render(me.el);
         
         
-        field.inputEl.dom.name = '';
-        if (me.swallowKeys) {
-            field.inputEl.swallowEvent([
-                'keypress', 
-                'keydown'   
-            ]);
+        if (inputEl) {
+            inputEl.dom.name = '';
+            if (me.swallowKeys) {
+                inputEl.swallowEvent([
+                    'keypress', 
+                    'keydown'   
+                ]);
+            }
         }
     },
 
@@ -59469,13 +61332,13 @@ Ext.define('Ext.Layer', {
         shims: []
     },
 
-    extend: 'Ext.core.Element',
+    extend: 'Ext.Element',
 
     
     constructor: function(config, existingEl) {
         config = config || {};
         var me = this,
-            dh = Ext.core.DomHelper,
+            dh = Ext.DomHelper,
             cp = config.parentEl,
             pel = cp ? Ext.getDom(cp) : document.body,
         hm = config.hideMode;
@@ -59504,14 +61367,14 @@ Ext.define('Ext.Layer', {
         
         
         if (hm) {
-            me.setVisibilityMode(Ext.core.Element[hm.toUpperCase()]);
-            if (me.visibilityMode == Ext.core.Element.ASCLASS) {
+            me.setVisibilityMode(Ext.Element[hm.toUpperCase()]);
+            if (me.visibilityMode == Ext.Element.ASCLASS) {
                 me.visibilityCls = config.visibilityCls;
             }
         } else if (config.useDisplay) {
-            me.setVisibilityMode(Ext.core.Element.DISPLAY);
+            me.setVisibilityMode(Ext.Element.DISPLAY);
         } else {
-            me.setVisibilityMode(Ext.core.Element.VISIBILITY);
+            me.setVisibilityMode(Ext.Element.VISIBILITY);
         }
 
         if (config.id) {
@@ -59534,7 +61397,7 @@ Ext.define('Ext.Layer', {
         if (config.hidden === true) {
             me.hide();
         } else {
-            this.show();
+            me.show();
         }
     },
 
@@ -59566,29 +61429,35 @@ Ext.define('Ext.Layer', {
     },
 
     hideShim: function() {
-        if (this.shim) {
-            this.shim.setDisplayed(false);
-            this.self.shims.push(this.shim);
-            delete this.shim;
+        var me = this;
+        
+        if (me.shim) {
+            me.shim.setDisplayed(false);
+            me.self.shims.push(me.shim);
+            delete me.shim;
         }
     },
 
     disableShadow: function() {
-        if (this.shadow) {
-            this.shadowDisabled = true;
-            this.shadow.hide();
-            this.lastShadowOffset = this.shadowOffset;
-            this.shadowOffset = 0;
+        var me = this;
+        
+        if (me.shadow && !me.shadowDisabled) {
+            me.shadowDisabled = true;
+            me.shadow.hide();
+            me.lastShadowOffset = me.shadowOffset;
+            me.shadowOffset = 0;
         }
     },
 
     enableShadow: function(show) {
-        if (this.shadow) {
-            this.shadowDisabled = false;
-            this.shadowOffset = this.lastShadowOffset;
-            delete this.lastShadowOffset;
+        var me = this;
+        
+        if (me.shadow && me.shadowDisabled) {
+            me.shadowDisabled = false;
+            me.shadowOffset = me.lastShadowOffset;
+            delete me.lastShadowOffset;
             if (show) {
-                this.sync(true);
+                me.sync(true);
             }
         }
     },
@@ -59599,17 +61468,17 @@ Ext.define('Ext.Layer', {
             shadow = me.shadow,
             shadowPos, shimStyle, shadowSize;
 
-        if (!this.updating && this.isVisible() && (shadow || this.useShim)) {
-            var shim = this.getShim(),
-                l = this.getLeft(true),
-                t = this.getTop(true),
-                w = this.getWidth(),
-                h = this.getHeight(),
+        if (!me.updating && me.isVisible() && (shadow || me.useShim)) {
+            var shim = me.getShim(),
+                l = me.getLeft(true),
+                t = me.getTop(true),
+                w = me.dom.offsetWidth,
+                h = me.dom.offsetHeight,
                 shimIndex;
 
-            if (shadow && !this.shadowDisabled) {
+            if (shadow && !me.shadowDisabled) {
                 if (doShow && !shadow.isVisible()) {
-                    shadow.show(this);
+                    shadow.show(me);
                 } else {
                     shadow.realign(l, t, w, h);
                 }
@@ -59625,6 +61494,12 @@ Ext.define('Ext.Layer', {
                         shadowPos = shadow.el.getXY();
                         shimStyle = shim.dom.style;
                         shadowSize = shadow.el.getSize();
+                        if (Ext.supports.CSS3BoxShadow) {
+                            shadowSize.height += 6;
+                            shadowSize.width += 4;
+                            shadowPos[0] -= 2;
+                            shadowPos[1] -= 4;
+                        }
                         shimStyle.left = (shadowPos[0]) + 'px';
                         shimStyle.top = (shadowPos[1]) + 'px';
                         shimStyle.width = (shadowSize.width) + 'px';
@@ -59645,7 +61520,7 @@ Ext.define('Ext.Layer', {
                 shim.setLeftTop(l, t);
             }
         }
-        return this;
+        return me;
     },
 
     remove: function() {
@@ -59675,8 +61550,8 @@ Ext.define('Ext.Layer', {
     
     constrainXY: function() {
         if (this.constrain) {
-            var vw = Ext.core.Element.getViewWidth(),
-                vh = Ext.core.Element.getViewHeight(),
+            var vw = Ext.Element.getViewWidth(),
+                vh = Ext.Element.getViewHeight(),
                 s = Ext.getDoc().getScroll(),
                 xy = this.getXY(),
                 x = xy[0],
@@ -59732,13 +61607,13 @@ Ext.define('Ext.Layer', {
 
         
         if (!visible) {
-            this.hideUnders(true);
+            me.hideUnders(true);
         }
-        this.callParent([visible, animate, duration, callback, easing]);
+        me.callParent([visible, animate, duration, callback, easing]);
         if (!animate) {
             cb();
         }
-        return this;
+        return me;
     },
 
     
@@ -59777,17 +61652,18 @@ Ext.define('Ext.Layer', {
     },
 
     setXY: function(xy, animate, duration, callback, easing) {
-
+        var me = this;
         
-        callback = this.createCB(callback);
+        
+        callback = me.createCB(callback);
 
-        this.fixDisplay();
-        this.beforeAction();
-        this.callParent([xy, animate, duration, callback, easing]);
+        me.fixDisplay();
+        me.beforeAction();
+        me.callParent([xy, animate, duration, callback, easing]);
         if (!animate) {
             callback();
         }
-        return this;
+        return me;
     },
 
     
@@ -59818,70 +61694,86 @@ Ext.define('Ext.Layer', {
 
     
     setSize: function(w, h, animate, duration, callback, easing) {
+        var me = this;
+        
         
-        callback = this.createCB(callback);
+        callback = me.createCB(callback);
 
-        this.beforeAction();
-        this.callParent([w, h, animate, duration, callback, easing]);
+        me.beforeAction();
+        me.callParent([w, h, animate, duration, callback, easing]);
         if (!animate) {
             callback();
         }
-        return this;
+        return me;
     },
 
     
     setWidth: function(w, animate, duration, callback, easing) {
+        var me = this;
         
-        callback = this.createCB(callback);
+        
+        callback = me.createCB(callback);
 
-        this.beforeAction();
-        this.callParent([w, animate, duration, callback, easing]);
+        me.beforeAction();
+        me.callParent([w, animate, duration, callback, easing]);
         if (!animate) {
             callback();
         }
-        return this;
+        return me;
     },
 
     
     setHeight: function(h, animate, duration, callback, easing) {
+        var me = this;
+        
         
-        callback = this.createCB(callback);
+        callback = me.createCB(callback);
 
-        this.beforeAction();
-        this.callParent([h, animate, duration, callback, easing]);
+        me.beforeAction();
+        me.callParent([h, animate, duration, callback, easing]);
         if (!animate) {
             callback();
         }
-        return this;
+        return me;
     },
 
     
     setBounds: function(x, y, width, height, animate, duration, callback, easing) {
+        var me = this;
         
-        callback = this.createCB(callback);
+        
+        callback = me.createCB(callback);
 
-        this.beforeAction();
+        me.beforeAction();
         if (!animate) {
-            Ext.Layer.superclass.setXY.call(this, [x, y]);
-            Ext.Layer.superclass.setSize.call(this, width, height);
+            Ext.Layer.superclass.setXY.call(me, [x, y]);
+            Ext.Layer.superclass.setSize.call(me, width, height);
             callback();
         } else {
-            this.callParent([x, y, width, height, animate, duration, callback, easing]);
+            me.callParent([x, y, width, height, animate, duration, callback, easing]);
         }
-        return this;
+        return me;
     },
 
     
     setZIndex: function(zindex) {
-        this.zindex = zindex;
-        if (this.getShim()) {
-            this.shim.setStyle('z-index', zindex++);
+        var me = this;
+        
+        me.zindex = zindex;
+        if (me.getShim()) {
+            me.shim.setStyle('z-index', zindex++);
         }
+        if (me.shadow) {
+            me.shadow.setZIndex(zindex++);
+        }
+        return me.setStyle('z-index', zindex);
+    },
+    
+    setOpacity: function(opacity){
         if (this.shadow) {
-            this.shadow.setZIndex(zindex++);
+            this.shadow.setOpacity(opacity);
         }
-        this.setStyle('z-index', zindex);
-        return this;
+        return this.callParent(arguments);
     }
 });
 
@@ -59925,6 +61817,15 @@ Ext.define('Ext.ProgressBar', {
     ],
 
     uses: ['Ext.fx.Anim'],
+
+   
+
+   
+
+   
+
+   
+
    
     baseCls: Ext.baseCSSPrefix + 'progress',
 
@@ -59943,7 +61844,7 @@ Ext.define('Ext.ProgressBar', {
         '<div class="{baseCls}-text {baseCls}-text-back">',
             '<div>&#160;</div>',
         '</div>',
-        '<div class="{baseCls}-bar">',
+        '<div id="{id}-bar" class="{baseCls}-bar">',
             '<div class="{baseCls}-text">',
                 '<div>&#160;</div>',
             '</div>',
@@ -59956,11 +61857,7 @@ Ext.define('Ext.ProgressBar', {
     initComponent: function() {
         this.callParent();
 
-        this.renderSelectors = Ext.apply(this.renderSelectors || {}, {
-            textTopEl: '.' + this.baseCls + '-text',
-            textBackEl: '.' + this.baseCls + '-text-back',
-            bar: '.' + this.baseCls + '-bar'
-        });
+        this.addChildEls('bar');
 
         this.addEvents(
             
@@ -59971,9 +61868,11 @@ Ext.define('Ext.ProgressBar', {
     afterRender : function() {
         var me = this;
 
+        
+        
         me.textEl = me.textEl ? Ext.get(me.textEl) : me.el.select('.' + me.baseCls + '-text');
 
-        this.callParent(arguments);
+        me.callParent(arguments);
 
         if (me.value) {
             me.updateProgress(me.value, me.text);
@@ -59985,38 +61884,47 @@ Ext.define('Ext.ProgressBar', {
 
     
     updateProgress: function(value, text, animate) {
-        var newWidth;
-        this.value = value || 0;
+        var me = this,
+            newWidth;
+            
+        me.value = value || 0;
         if (text) {
-            this.updateText(text);
+            me.updateText(text);
         }
-        if (this.rendered && !this.isDestroyed) {
-            newWidth = Math.floor(this.value * this.el.getWidth(true));
-            if (Ext.isForcedBorderBox) {
-                newWidth += this.bar.getBorderWidth("lr");
-            }
-            if (animate === true || (animate !== false && this.animate)) {
-                this.bar.stopAnimation();
-                this.bar.animate(Ext.apply({
-                    to: {
-                        width: newWidth + 'px'
-                    }
-                }, this.animate));
+        if (me.rendered && !me.isDestroyed) {
+            if (me.isVisible(true)) {
+                newWidth = Math.floor(me.value * me.el.getWidth(true));
+                if (Ext.isForcedBorderBox) {
+                    newWidth += me.bar.getBorderWidth("lr");
+                }
+                if (animate === true || (animate !== false && me.animate)) {
+                    me.bar.stopAnimation();
+                    me.bar.animate(Ext.apply({
+                        to: {
+                            width: newWidth + 'px'
+                        }
+                    }, me.animate));
+                } else {
+                    me.bar.setWidth(newWidth);
+                }
             } else {
-                this.bar.setWidth(newWidth);
+                
+                me.doComponentLayout();
             }
         }
-        this.fireEvent('update', this, this.value, text);
-        return this;
+        me.fireEvent('update', me, me.value, text);
+        return me;
     },
 
     
     updateText: function(text) {
-        this.text = text;
-        if (this.rendered) {
-            this.textEl.update(this.text);
+        var me = this;
+        
+        me.text = text;
+        if (me.rendered) {
+            me.textEl.update(me.text);
         }
-        return this;
+        return me;
     },
 
     applyText : function(text) {
@@ -60025,28 +61933,30 @@ Ext.define('Ext.ProgressBar', {
 
     
     wait: function(o) {
-        if (!this.waitTimer) {
-            var scope = this;
+        var me = this;
+            
+        if (!me.waitTimer) {
+            scope = me;
             o = o || {};
-            this.updateText(o.text);
-            this.waitTimer = Ext.TaskManager.start({
+            me.updateText(o.text);
+            me.waitTimer = Ext.TaskManager.start({
                 run: function(i){
                     var inc = o.increment || 10;
                     i -= 1;
-                    this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);
+                    me.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);
                 },
                 interval: o.interval || 1000,
                 duration: o.duration,
                 onStop: function(){
                     if (o.fn) {
-                        o.fn.apply(o.scope || this);
+                        o.fn.apply(o.scope || me);
                     }
-                    this.reset();
+                    me.reset();
                 },
                 scope: scope
             });
         }
-        return this;
+        return me;
     },
 
     
@@ -60056,39 +61966,45 @@ Ext.define('Ext.ProgressBar', {
 
     
     reset: function(hide){
-        this.updateProgress(0);
-        this.clearTimer();
+        var me = this;
+        
+        me.updateProgress(0);
+        me.clearTimer();
         if (hide === true) {
-            this.hide();
+            me.hide();
         }
-        return this;
+        return me;
     },
 
     
     clearTimer: function(){
-        if (this.waitTimer) {
-            this.waitTimer.onStop = null; 
-            Ext.TaskManager.stop(this.waitTimer);
-            this.waitTimer = null;
+        var me = this;
+        
+        if (me.waitTimer) {
+            me.waitTimer.onStop = null; 
+            Ext.TaskManager.stop(me.waitTimer);
+            me.waitTimer = null;
         }
     },
 
     onDestroy: function(){
-        this.clearTimer();
-        if (this.rendered) {
-            if (this.textEl.isComposite) {
-                this.textEl.clear();
+        var me = this;
+        
+        me.clearTimer();
+        if (me.rendered) {
+            if (me.textEl.isComposite) {
+                me.textEl.clear();
             }
-            Ext.destroyMembers(this, 'textEl', 'progressBar', 'textTopEl');
+            Ext.destroyMembers(me, 'textEl', 'progressBar');
         }
-        this.callParent();
+        me.callParent();
     }
 });
 
 
 Ext.define('Ext.ShadowPool', {
     singleton: true,
-    requires: ['Ext.core.DomHelper'],
+    requires: ['Ext.DomHelper'],
 
     markup: function() {
         if (Ext.supports.CSS3BoxShadow) {
@@ -60121,7 +62037,7 @@ Ext.define('Ext.ShadowPool', {
     pull: function() {
         var sh = this.shadows.shift();
         if (!sh) {
-            sh = Ext.get(Ext.core.DomHelper.insertHtml("beforeBegin", document.body.firstChild, this.markup));
+            sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, this.markup));
             sh.autoBoxAdjust = false;
         }
         return sh;
@@ -60144,17 +62060,21 @@ Ext.define('Ext.Shadow', {
 
     
     constructor: function(config) {
-        Ext.apply(this, config);
-        if (typeof this.mode != "string") {
-            this.mode = this.defaultMode;
-        }
-        var offset = this.offset,
+        var me = this,
             adjusts = {
                 h: 0
             },
-            rad = Math.floor(this.offset / 2);
-
-        switch (this.mode.toLowerCase()) {
+            offset,
+            rad;
+        
+        Ext.apply(me, config);
+        if (!Ext.isString(me.mode)) {
+            me.mode = me.defaultMode;
+        }
+        offset = me.offset;
+        rad = Math.floor(offset / 2);
+        me.opacity = 50;
+        switch (me.mode.toLowerCase()) {
             
             case "drop":
                 if (Ext.supports.CSS3BoxShadow) {
@@ -60211,7 +62131,7 @@ Ext.define('Ext.Shadow', {
                     break;
                 }
         }
-        this.adjusts = adjusts;
+        me.adjusts = adjusts;
     },
 
     
@@ -60223,24 +62143,28 @@ Ext.define('Ext.Shadow', {
 
     
     show: function(target) {
+        var me = this,
+            index;
+        
         target = Ext.get(target);
-        if (!this.el) {
-            this.el = Ext.ShadowPool.pull();
-            if (this.el.dom.nextSibling != target.dom) {
-                this.el.insertBefore(target);
+        if (!me.el) {
+            me.el = Ext.ShadowPool.pull();
+            if (me.el.dom.nextSibling != target.dom) {
+                me.el.insertBefore(target);
             }
         }
-        this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10) - 1);
+        index = (parseInt(target.getStyle("z-index"), 10) - 1) || 0;
+        me.el.setStyle("z-index", me.zIndex || index);
         if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {
-            this.el.dom.style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (this.offset) + ")";
+            me.el.dom.style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=" + me.opacity + ") progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (me.offset) + ")";
         }
-        this.realign(
+        me.realign(
             target.getLeft(true),
             target.getTop(true),
-            target.getWidth(),
-            target.getHeight()
+            target.dom.offsetWidth,
+            target.dom.offsetHeight
         );
-        this.el.dom.style.display = "block";
+        me.el.dom.style.display = "block";
     },
 
     
@@ -60291,10 +62215,12 @@ Ext.define('Ext.Shadow', {
 
     
     hide: function() {
-        if (this.el) {
-            this.el.dom.style.display = "none";
-            Ext.ShadowPool.push(this.el);
-            delete this.el;
+        var me = this;
+        
+        if (me.el) {
+            me.el.dom.style.display = "none";
+            Ext.ShadowPool.push(me.el);
+            delete me.el;
         }
     },
 
@@ -60304,17 +62230,31 @@ Ext.define('Ext.Shadow', {
         if (this.el) {
             this.el.setStyle("z-index", z);
         }
+    },
+    
+    
+    setOpacity: function(opacity){
+        if (this.el) {
+            if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {
+                opacity = Math.floor(opacity * 100 / 2) / 100;
+            }
+            this.opacity = opacity;
+            this.el.setOpacity(opacity);
+        }
     }
 });
 
 Ext.define('Ext.button.Split', {
 
     
-
     alias: 'widget.splitbutton',
 
     extend: 'Ext.button.Button',
     alternateClassName: 'Ext.SplitButton',
+    
+    
+    
+    
 
     
     arrowCls      : 'split',
@@ -60327,7 +62267,7 @@ Ext.define('Ext.button.Split', {
         this.addEvents("arrowclick");
     },
 
-     
+    
     setArrowHandler : function(handler, scope){
         this.arrowHandler = handler;
         this.scope = scope;
@@ -60340,22 +62280,14 @@ Ext.define('Ext.button.Split', {
         e.preventDefault();
         if (!me.disabled) {
             if (me.overMenuTrigger) {
-                if (me.menu && !me.menu.isVisible() && !me.ignoreNextClick) {
-                    me.showMenu();
-                }
+                me.maybeShowMenu();
                 me.fireEvent("arrowclick", me, e);
                 if (me.arrowHandler) {
                     me.arrowHandler.call(me.scope || me, me, e);
                 }
             } else {
-                if (me.enableToggle) {
-                    me.toggle();
-                }
-                me.fireEvent("click", me, e);
-                if (me.handler) {
-                    me.handler.call(me.scope || me, me, e);
-                }
-                me.onBlur();
+                me.doToggle();
+                me.fireHandler();
             }
         }
     }
@@ -60513,9 +62445,9 @@ Ext.define('Ext.container.ButtonGroup', {
 
     
     frame: true,
-    
+
     frameHeader: false,
-    
+
     internalDefaults: {removeMode: 'container', hideParent: true},
 
     initComponent : function(){
@@ -60536,7 +62468,7 @@ Ext.define('Ext.container.ButtonGroup', {
 
     afterLayout: function() {
         var me = this;
-        
+
         me.callParent(arguments);
 
         
@@ -60545,11 +62477,16 @@ Ext.define('Ext.container.ButtonGroup', {
             var t = me.getTargetEl();
             t.setWidth(me.layout.table.offsetWidth + t.getPadding('lr'));
         }
+
+        
+        if (Ext.isIE7) {
+            me.el.repaint();
+        }
     },
 
     afterRender: function() {
         var me = this;
-        
+
         
         if (me.header) {
             
@@ -60569,10 +62506,10 @@ Ext.define('Ext.container.ButtonGroup', {
             });
             me.suspendLayout = false;
         }
-        
+
         me.callParent(arguments);
     },
-    
+
     
     onBeforeAdd: function(component) {
         if (component.is('button')) {
@@ -60613,19 +62550,33 @@ Ext.define('Ext.container.Viewport', {
     
     
     
+
     
+
     
+
+    
+
+    
+
     
+
     
+
     
+
     
+
     
+
     
+
     
 
     isViewport: true,
 
     ariaRole: 'application',
+
     initComponent : function() {
         var me = this,
             html = Ext.fly(document.body.parentNode),
@@ -60643,8 +62594,8 @@ Ext.define('Ext.container.Viewport', {
         me.allowDomMove = false;
         Ext.EventManager.onWindowResize(me.fireResize, me);
         me.renderTo = me.el;
-        me.width = Ext.core.Element.getViewportWidth();
-        me.height = Ext.core.Element.getViewportHeight();
+        me.width = Ext.Element.getViewportWidth();
+        me.height = Ext.Element.getViewportHeight();
     },
 
     fireResize : function(w, h){
@@ -61159,7 +63110,7 @@ Ext.define('Ext.dd.DragZone', {
 
     
     getRepairXY : function(e){
-        return Ext.core.Element.fly(this.dragData.ddel).getXY();
+        return Ext.Element.fly(this.dragData.ddel).getXY();
     },
 
     destroy : function(){
@@ -61734,7 +63685,7 @@ Ext.define('Ext.form.action.Action', {
     
 
     
-
+    submitEmptyText : true,
     
 
     
@@ -61930,7 +63881,7 @@ Ext.define('Ext.form.action.Submit', {
         }
 
         
-        formEl = Ext.core.DomHelper.append(Ext.getBody(), formSpec);
+        formEl = Ext.DomHelper.append(Ext.getBody(), formSpec);
 
         
         
@@ -62084,12 +64035,13 @@ Ext.define("Ext.form.Labelable", {
     
     labelableRenderTpl: [
         '<tpl if="!hideLabel && !(!fieldLabel && hideEmptyLabel)">',
-            '<label<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
+            '<label id="{id}-labelEl"<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
+                '<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
                 '<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
             '</label>',
         '</tpl>',
-        '<div class="{baseBodyCls} {fieldBodyCls}"<tpl if="inputId"> id="{baseBodyCls}-{inputId}"</tpl> role="presentation">{subTplMarkup}</div>',
-        '<div class="{errorMsgCls}" style="display:none"></div>',
+        '<div class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" role="presentation">{subTplMarkup}</div>',
+        '<div id="{id}-errorEl" class="{errorMsgCls}" style="display:none"></div>',
         '<div class="{clearCls}" role="presentation"><!-- --></div>',
         {
             compiled: true,
@@ -62114,6 +64066,8 @@ Ext.define("Ext.form.Labelable", {
     labelCls: Ext.baseCSSPrefix + 'form-item-label',
 
     
+
+    
     errorMsgCls: Ext.baseCSSPrefix + 'form-error-msg',
 
     
@@ -62182,6 +64136,8 @@ Ext.define("Ext.form.Labelable", {
     getLabelableRenderData: function() {
         var me = this,
             labelAlign = me.labelAlign,
+            labelCls = me.labelCls,
+            labelClsExtra = me.labelClsExtra,
             labelPad = me.labelPad,
             labelStyle;
 
@@ -62201,27 +64157,27 @@ Ext.define("Ext.form.Labelable", {
             {
                 inputId: me.getInputId(),
                 fieldLabel: me.getFieldLabel(),
+                labelCls: labelClsExtra ? labelCls + ' ' + labelClsExtra : labelCls,
                 labelStyle: labelStyle + (me.labelStyle || ''),
                 subTplMarkup: me.getSubTplMarkup()
             },
             me,
-            'hideLabel,hideEmptyLabel,labelCls,fieldBodyCls,baseBodyCls,errorMsgCls,clearCls,labelSeparator',
+            'hideLabel,hideEmptyLabel,fieldBodyCls,baseBodyCls,errorMsgCls,clearCls,labelSeparator',
             true
         );
     },
 
-    
-    getLabelableSelectors: function() {
-        return {
+    onLabelableRender: function () {
+        this.addChildEls(
             
-            labelEl: 'label.' + this.labelCls,
+            'labelEl',
 
             
-            bodyEl: '.' + this.baseBodyCls,
+            'bodyEl',
 
             
-            errorEl: '.' + this.errorMsgCls
-        };
+            'errorEl'
+        );
     },
 
     
@@ -62312,12 +64268,11 @@ Ext.define("Ext.form.Labelable", {
 
 
 Ext.define('Ext.form.field.Field', {
-
     
     isFormField : true,
 
     
-    
+
     
 
     
@@ -62368,7 +64323,7 @@ Ext.define('Ext.form.field.Field', {
     getValue: function() {
         return this.value;
     },
-    
+
     
     setValue: function(value) {
         var me = this;
@@ -62381,6 +64336,11 @@ Ext.define('Ext.form.field.Field', {
     isEqual: function(value1, value2) {
         return String(value1) === String(value2);
     },
+    
+    
+    isEqualAsString: function(value1, value2){
+        return String(Ext.value(value1, '')) === String(Ext.value(value2, ''));    
+    },
 
     
     getSubmitData: function() {
@@ -62407,7 +64367,7 @@ Ext.define('Ext.form.field.Field', {
     
     reset : function(){
         var me = this;
-        
+
         me.setValue(me.originalValue);
         me.clearInvalid();
         
@@ -62486,9 +64446,14 @@ Ext.define('Ext.form.field.Field', {
 
     
     batchChanges: function(fn) {
-        this.suspendCheckChange++;
-        fn();
-        this.suspendCheckChange--;
+        try {
+            this.suspendCheckChange++;
+            fn();
+        } catch(e){
+            throw e;
+        } finally {
+            this.suspendCheckChange--;
+        }
         this.checkChange();
     },
 
@@ -62606,6 +64571,10 @@ Ext.define('Ext.layout.component.field.Field', {
 
         me.activeError = owner.getActiveError();
     },
+    
+    onFocus: function(){
+        this.getErrorStrategy().onFocus(this.owner);    
+    },
 
 
     
@@ -62735,6 +64704,18 @@ Ext.define('Ext.layout.component.field.Field', {
                 el.setStyle(name, value);
             }
         }
+        
+        function showTip(owner) {
+            var tip = Ext.layout.component.field.Field.tip,
+                target;
+                
+            if (tip && tip.isVisible()) {
+                target = tip.activeTarget;
+                if (target && target.el === owner.getActionEl().dom) {
+                    tip.toFront(true);
+                }
+            }
+        }
 
         var applyIf = Ext.applyIf,
             emptyFn = Ext.emptyFn,
@@ -62745,7 +64726,8 @@ Ext.define('Ext.layout.component.field.Field', {
                 adjustHorizInsets: emptyFn,
                 adjustVertInsets: emptyFn,
                 layoutHoriz: emptyFn,
-                layoutVert: emptyFn
+                layoutVert: emptyFn,
+                onFocus: emptyFn
             };
 
         return {
@@ -62774,7 +64756,8 @@ Ext.define('Ext.layout.component.field.Field', {
                     if (owner.hasActiveError()) {
                         setStyle(owner.errorEl, 'top', info.insets.top + 'px');
                     }
-                }
+                },
+                onFocus: showTip
             }, base),
 
             
@@ -62807,7 +64790,8 @@ Ext.define('Ext.layout.component.field.Field', {
                     setDisplayed(owner.errorEl, false);
                     Ext.layout.component.field.Field.initTip();
                     owner.getActionEl().dom.setAttribute('data-errorqtip', owner.getActiveError() || '');
-                }
+                },
+                onFocus: showTip
             }, base),
 
             
@@ -63002,7 +64986,6 @@ Ext.define('Ext.layout.component.field.TextArea', {
 
 });
 
-
 Ext.define('Ext.layout.container.Anchor', {
 
     
@@ -63014,7 +64997,6 @@ Ext.define('Ext.layout.container.Anchor', {
     
 
     
-
     type: 'anchor',
 
     
@@ -63055,7 +65037,7 @@ Ext.define('Ext.layout.container.Anchor', {
 
         
         if (!Ext.supports.RightMargin) {
-            cleaner = Ext.core.Element.getRightMarginFixCleaner(target);
+            cleaner = Ext.Element.getRightMarginFixCleaner(target);
             target.addCls(Ext.baseCSSPrefix + 'inline-children');
         }
 
@@ -63272,12 +65254,19 @@ Ext.define('Ext.window.Window', {
     alias: 'widget.window',
 
     
+
     
+
     
+
     
+
     
+
     
+
     
+
     
 
     
@@ -63332,11 +65321,11 @@ Ext.define('Ext.window.Window', {
     floating: true,
 
     ariaRole: 'alertdialog',
-    
+
     itemCls: 'x-window-item',
 
     overlapHeader: true,
-    
+
     ignoreHeaderBorderManagement: true,
 
     
@@ -63345,13 +65334,18 @@ Ext.define('Ext.window.Window', {
         me.callParent();
         me.addEvents(
             
+
             
+
             
             'resize',
+
             
             'maximize',
+
             
             'minimize',
+
             
             'restore'
         );
@@ -63413,9 +65407,14 @@ Ext.define('Ext.window.Window', {
     },
 
     
-    onMouseDown: function () {
+    onMouseDown: function (e) {
+        var preventFocus;
+            
         if (this.floating) {
-            this.toFront();
+            if (Ext.fly(e.getTarget()).focusable()) {
+                preventFocus = true;
+            }
+            this.toFront(preventFocus);
         }
     },
 
@@ -63453,6 +65452,11 @@ Ext.define('Ext.window.Window', {
 
         
         me.mon(me.el, 'mousedown', me.onMouseDown, me);
+        
+        
+        me.el.set({
+            tabIndex: -1
+        });
 
         
         if (me.maximized) {
@@ -63483,7 +65487,7 @@ Ext.define('Ext.window.Window', {
         if (!me.header) {
             me.updateHeader(true);
         }
-        
+
         
         if (me.header) {
             ddConfig = Ext.applyIf({
@@ -63584,11 +65588,10 @@ Ext.define('Ext.window.Window', {
         var me = this,
             animating = animateTarget || me.animateTarget;
 
+
         
-        if (animating) {
-            
-            me.doConstrain();
-        }
+        
+
         
         
         me.callParent(arguments);
@@ -63614,10 +65617,12 @@ Ext.define('Ext.window.Window', {
         
         if (me.hidden) {
             me.fireEvent('close', me);
-            me[me.closeAction]();
+            if (me.closeAction == 'destroy') {
+                this.destroy();
+            }
         } else {
             
-            me.hide(me.animTarget, me.doClose, me);
+            me.hide(me.animateTarget, me.doClose, me);
         }
     },
 
@@ -63789,6 +65794,7 @@ Ext.define('Ext.window.Window', {
     
 });
 
+
 Ext.define('Ext.form.field.Base', {
     extend: 'Ext.Component',
     mixins: {
@@ -63799,7 +65805,8 @@ Ext.define('Ext.form.field.Base', {
     alternateClassName: ['Ext.form.Field', 'Ext.form.BaseField'],
     requires: ['Ext.util.DelayedTask', 'Ext.XTemplate', 'Ext.layout.component.field.Field'],
 
-    fieldSubTpl: [
+    
+    fieldSubTpl: [ 
         '<input id="{id}" type="{type}" ',
         '<tpl if="name">name="{name}" </tpl>',
         '<tpl if="size">size="{size}" </tpl>',
@@ -63855,9 +65862,9 @@ Ext.define('Ext.form.field.Base', {
 
     
     hasFocus : false,
-    
+
     baseCls: Ext.baseCSSPrefix + 'field',
-    
+
     maskOnDisable: false,
 
     
@@ -63900,6 +65907,7 @@ Ext.define('Ext.form.field.Base', {
 
         return Ext.applyIf(me.subTplData, {
             id: inputId,
+            cmpId: me.id,
             name: me.name || inputId,
             type: type,
             size: me.size || 20,
@@ -63910,6 +65918,14 @@ Ext.define('Ext.form.field.Base', {
         });
     },
 
+    afterRender: function() {
+        this.callParent();
+        
+        if (this.inputEl) {
+            this.inputEl.selectable();
+        }
+    },
+
     
     getSubTplMarkup: function() {
         return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
@@ -63940,15 +65956,12 @@ Ext.define('Ext.form.field.Base', {
     
     onRender : function() {
         var me = this,
-            fieldStyle = me.fieldStyle,
-            renderSelectors = me.renderSelectors;
+            fieldStyle = me.fieldStyle;
 
-        Ext.applyIf(renderSelectors, me.getLabelableSelectors());
+        me.onLabelableRender();
 
-        Ext.applyIf(renderSelectors, {
-            
-            inputEl: '.' + me.fieldCls
-        });
+        
+        me.addChildEls({ name: 'inputEl', id: me.getInputId() });
 
         me.callParent(arguments);
 
@@ -64169,6 +66182,7 @@ Ext.define('Ext.form.field.Base', {
         }
         if (!me.hasFocus) {
             me.hasFocus = true;
+            me.componentLayout.onFocus();
             me.fireEvent('focus', me);
         }
     },
@@ -64181,6 +66195,11 @@ Ext.define('Ext.form.field.Base', {
         var me = this,
             focusCls = me.focusCls,
             inputEl = me.inputEl;
+
+        if (me.destroying) {
+            return;
+        }
+
         me.beforeBlur();
         if (focusCls && inputEl) {
             inputEl.removeCls(focusCls);
@@ -64274,7 +66293,7 @@ Ext.define('Ext.form.field.Text', {
     alternateClassName: ['Ext.form.TextField', 'Ext.form.Text'],
 
     
-    
+
     
 
     
@@ -64284,13 +66303,13 @@ Ext.define('Ext.form.field.Text', {
 
     
     growMin : 30,
-    
+
     
     growMax : 800,
 
     
     growAppend: 'W',
-    
+
     
 
     
@@ -64299,33 +66318,33 @@ Ext.define('Ext.form.field.Text', {
 
     
     allowBlank : true,
-    
+
     
     minLength : 0,
-    
+
     
     maxLength : Number.MAX_VALUE,
-    
+
     
 
     
     minLengthText : 'The minimum length for this field is {0}',
-    
+
     
     maxLengthText : 'The maximum length for this field is {0}',
+
     
-    
-    
+
     
     blankText : 'This field is required',
-    
+
     
 
     
 
     
     regexText : '',
-    
+
     
 
     
@@ -64356,7 +66375,7 @@ Ext.define('Ext.form.field.Text', {
     initEvents : function(){
         var me = this,
             el = me.inputEl;
-        
+
         me.callParent();
         if(me.selectOnFocus || me.emptyText){
             me.mon(el, 'mousedown', me.onMouseDown, me);
@@ -64377,7 +66396,7 @@ Ext.define('Ext.form.field.Text', {
 
     
     isEqual: function(value1, value2) {
-        return String(Ext.value(value1, '')) === String(Ext.value(value2, ''));
+        return this.isEqualAsString(value1, value2);
     },
 
     
@@ -64385,7 +66404,7 @@ Ext.define('Ext.form.field.Text', {
         this.callParent();
         this.autoSize();
     },
-    
+
     afterRender: function(){
         var me = this;
         if (me.enforceMaxLength) {
@@ -64408,7 +66427,7 @@ Ext.define('Ext.form.field.Text', {
         var me = this,
             stripRe = me.stripCharsRe,
             newValue;
-            
+
         if (stripRe) {
             newValue = value.replace(stripRe, '');
             if (newValue !== value) {
@@ -64460,13 +66479,13 @@ Ext.define('Ext.form.field.Text', {
 
         if (me.rendered && emptyText) {
             isEmpty = me.getRawValue().length < 1 && !me.hasFocus;
-            
+
             if (Ext.supports.Placeholder) {
                 me.inputEl.dom.placeholder = emptyText;
             } else if (isEmpty) {
                 me.setRawValue(emptyText);
             }
-            
+
             
             
             if (isEmpty) {
@@ -64511,16 +66530,17 @@ Ext.define('Ext.form.field.Text', {
 
     
     filterKeys : function(e){
-        if(e.ctrlKey){
+        
+        if (e.ctrlKey && !e.altKey) {
             return;
         }
         var key = e.getKey(),
             charCode = String.fromCharCode(e.getCharCode());
-            
+
         if(Ext.isGecko && (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE && e.button === -1))){
             return;
         }
-        
+
         if(!Ext.isGecko && e.isSpecialKey() && !charCode){
             return;
         }
@@ -64543,11 +66563,11 @@ Ext.define('Ext.form.field.Text', {
     setValue: function(value) {
         var me = this,
             inputEl = me.inputEl;
-        
+
         if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
             inputEl.removeCls(me.emptyCls);
         }
-        
+
         me.callParent(arguments);
 
         me.applyEmptyText();
@@ -64613,7 +66633,7 @@ Ext.define('Ext.form.field.Text', {
             el = me.inputEl.dom,
             undef,
             range;
-            
+
         if (v.length > 0) {
             start = start === undef ? 0 : start;
             end = end === undef ? v.length : end;
@@ -64780,8 +66800,6 @@ Ext.define('Ext.window.MessageBox', {
         'Ext.ProgressBar'
     ],
 
-    alternateClassName: 'Ext.MessageBox',
-
     alias: 'widget.messagebox',
 
     
@@ -65022,18 +67040,13 @@ Ext.define('Ext.window.MessageBox', {
             me.width = initialWidth;
             me.render(Ext.getBody());
         } else {
-            me.hidden = false;
             me.setSize(initialWidth, me.maxHeight);
         }
         me.setPosition(-10000, -10000);
 
         
         me.closable = cfg.closable && !cfg.wait;
-        if (cfg.closable === false) {
-            me.tools.close.hide();
-        } else {
-            me.tools.close.show();
-        }
+        me.header.child('[type=close]').setVisible(cfg.closable !== false);
 
         
         if (!cfg.title && !me.closable) {
@@ -65111,7 +67124,6 @@ Ext.define('Ext.window.MessageBox', {
         } else {
             me.bottomTb.show();
         }
-        me.hidden = true;
     },
 
     
@@ -65121,7 +67133,7 @@ Ext.define('Ext.window.MessageBox', {
         me.reconfigure(cfg);
         me.addCls(cfg.cls);
         if (cfg.animateTarget) {
-            me.doAutoSize(false);
+            me.doAutoSize(true);
             me.callParent();
         } else {
             me.callParent();
@@ -65282,12 +67294,14 @@ Ext.define('Ext.window.MessageBox', {
             cfg = {
                 title: cfg,
                 msg: msg,
+                progress: true,
                 progressText: progressText
             };
         }
         return this.show(cfg);
     }
 }, function() {
+    
     Ext.MessageBox = Ext.Msg = new this();
 });
 
@@ -65343,7 +67357,9 @@ Ext.define('Ext.form.Basic', {
     },
 
     
+
     
+
     
 
     
@@ -65401,10 +67417,15 @@ Ext.define('Ext.form.Basic', {
 
         if (child.isFormField) {
             handleField(child);
-        }
-        else if (isContainer) {
+        } else if (isContainer) {
             
-            Ext.Array.forEach(child.query('[isFormField]'), handleField);
+            if (child.isDestroyed) {
+                
+                
+                delete me._fields;
+            } else {
+                Ext.Array.forEach(child.query('[isFormField]'), handleField);
+            }
         }
 
         
@@ -65427,12 +67448,15 @@ Ext.define('Ext.form.Basic', {
         return fields;
     },
 
+    
     getBoundItems: function() {
         var boundItems = this._boundItems;
-        if (!boundItems) {
+        
+        if (!boundItems || boundItems.getCount() === 0) {
             boundItems = this._boundItems = Ext.create('Ext.util.MixedCollection');
             boundItems.addAll(this.owner.query('[formBind]'));
         }
+        
         return boundItems;
     },
 
@@ -65554,7 +67578,7 @@ Ext.define('Ext.form.Basic', {
         this._record = record;
         return this.setValues(record.data);
     },
-    
+
     
     getRecord: function() {
         return this._record;
@@ -66034,7 +68058,7 @@ Ext.define('Ext.form.FieldContainer', {
 
     
     combineErrors: false,
-    
+
     maskOnDisable: false,
 
     initComponent: function() {
@@ -66063,11 +68087,9 @@ Ext.define('Ext.form.FieldContainer', {
     },
 
     onRender: function() {
-        var me = this,
-            renderSelectors = me.renderSelectors,
-            applyIf = Ext.applyIf;
+        var me = this;
 
-        applyIf(renderSelectors, me.getLabelableSelectors());
+        me.onLabelableRender();
 
         me.callParent(arguments);
     },
@@ -66424,8 +68446,8 @@ Ext.define('Ext.form.FieldSet', {
     
     ariaRole: '',
 
-    renderTpl: ['<div class="{baseCls}-body"></div>'],
-    
+    renderTpl: ['<div id="{id}-body" class="{baseCls}-body"></div>'],
+
     maskOnDisable: false,
 
     getElConfig: function(){
@@ -66442,9 +68464,7 @@ Ext.define('Ext.form.FieldSet', {
         me.initLegend();
 
         
-        Ext.applyIf(me.renderSelectors, {
-            body: '.' + baseCls + '-body'
-        });
+        me.addChildEls('body');
 
         if (me.collapsed) {
             me.addCls(baseCls + '-collapsed');
@@ -66484,8 +68504,23 @@ Ext.define('Ext.form.FieldSet', {
             legend = me.legend = Ext.create('Ext.container.Container', {
                 baseCls: me.baseCls + '-header',
                 ariaRole: '',
+                ownerCt: this,
                 getElConfig: function(){
-                    return {tag: 'legend', cls: this.baseCls};
+                    var result = {
+                        tag: 'legend',
+                        cls: this.baseCls
+                    };
+
+                    
+                    
+                    
+                    
+                    if (!Ext.isGecko3) {
+                        result.children = [{
+                            cls: Ext.baseCSSPrefix + 'clear'
+                        }];
+                    }
+                    return result;
                 },
                 items: legendItems
             });
@@ -66502,10 +68537,16 @@ Ext.define('Ext.form.FieldSet', {
         var me = this;
         me.titleCmp = Ext.create('Ext.Component', {
             html: me.title,
+            getElConfig: function() {
+                return {
+                    tag: Ext.isGecko3 ? 'span' : 'div',
+                    cls: me.titleCmp.cls,
+                    id: me.titleCmp.id
+                };
+            },
             cls: me.baseCls + '-header-text'
         });
         return me.titleCmp;
-        
     },
 
     
@@ -66514,8 +68555,15 @@ Ext.define('Ext.form.FieldSet', {
     createCheckboxCmp: function() {
         var me = this,
             suffix = '-checkbox';
-            
+
         me.checkboxCmp = Ext.create('Ext.form.field.Checkbox', {
+            getElConfig: function() {
+                return {
+                    tag: Ext.isGecko3 ? 'span' : 'div',
+                    id: me.checkboxCmp.id,
+                    cls: me.checkboxCmp.cls
+                };
+            },
             name: me.checkboxName || me.id + suffix,
             cls: me.baseCls + '-header' + suffix,
             checked: !me.collapsed,
@@ -66533,13 +68581,20 @@ Ext.define('Ext.form.FieldSet', {
     createToggleCmp: function() {
         var me = this;
         me.toggleCmp = Ext.create('Ext.panel.Tool', {
+            getElConfig: function() {
+                return {
+                    tag: Ext.isGecko3 ? 'span' : 'div',
+                    id: me.toggleCmp.id,
+                    cls: me.toggleCmp.cls
+                };
+            },
             type: 'toggle',
             handler: me.toggle,
             scope: me
         });
         return me.toggleCmp;
     },
-    
+
     
     setTitle: function(title) {
         var me = this;
@@ -66548,15 +68603,15 @@ Ext.define('Ext.form.FieldSet', {
         me.titleCmp.update(title);
         return me;
     },
-    
+
     getTargetEl : function() {
         return this.body || this.frameBody || this.el;
     },
-    
+
     getContentTarget: function() {
         return this.body;
     },
-    
+
     
     getRefItems: function(deep) {
         var refItems = this.callParent(arguments),
@@ -66576,7 +68631,7 @@ Ext.define('Ext.form.FieldSet', {
     expand : function(){
         return this.setExpanded(true);
     },
-    
+
     
     collapse : function() {
         return this.setExpanded(false);
@@ -66588,11 +68643,11 @@ Ext.define('Ext.form.FieldSet', {
             checkboxCmp = me.checkboxCmp;
 
         expanded = !!expanded;
-        
+
         if (checkboxCmp) {
             checkboxCmp.setValue(expanded);
         }
-        
+
         if (expanded) {
             me.removeCls(me.baseCls + '-collapsed');
         } else {
@@ -66689,11 +68744,11 @@ Ext.define('Ext.form.Panel', {
 
     initComponent: function() {
         var me = this;
-        
+
         if (me.frame) {
             me.border = false;
         }
-        
+
         me.initFieldAncestor();
         me.callParent();
 
@@ -66714,7 +68769,7 @@ Ext.define('Ext.form.Panel', {
     initItems: function() {
         
         var me = this;
-        
+
         me.form = me.createForm();
         me.callParent();
         me.form.initialize();
@@ -66729,17 +68784,17 @@ Ext.define('Ext.form.Panel', {
     getForm: function() {
         return this.form;
     },
-    
+
     
     loadRecord: function(record) {
         return this.getForm().loadRecord(record);
     },
-    
+
     
     getRecord: function() {
         return this.getForm().getRecord();
     },
-    
+
     
     getValues: function() {
         return this.getForm().getValues();
@@ -66816,17 +68871,30 @@ Ext.define('Ext.form.RadioGroup', {
     allowBlank : true,
     
     blankText : 'You must select one item in this group',
-    
+
     
     defaultType : 'radiofield',
-    
+
     
     groupCls : Ext.baseCSSPrefix + 'form-radio-group',
 
     getBoxes: function() {
         return this.query('[isRadio]');
-    }
+    },
 
+    
+    setValue: function(value) {
+        var me = this;
+        if (Ext.isObject(value)) {
+            Ext.Object.each(value, function(name, cbValue) {
+                var radios = Ext.form.RadioManager.getWithValue(name, cbValue);
+                radios.each(function(cb) {
+                    cb.setValue(true);
+                });
+            });
+        }
+        return me;
+    }
 });
 
 
@@ -66964,9 +69032,10 @@ Ext.define('Ext.form.field.Checkbox', {
     alternateClassName: 'Ext.form.Checkbox',
     requires: ['Ext.XTemplate', 'Ext.form.CheckboxManager'],
 
+    
     fieldSubTpl: [
         '<tpl if="boxLabel && boxLabelAlign == \'before\'">',
-            '<label class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">{boxLabel}</label>',
+            '<label id="{cmpId}-boxLabelEl" class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">{boxLabel}</label>',
         '</tpl>',
         
         
@@ -66975,7 +69044,7 @@ Ext.define('Ext.form.field.Checkbox', {
             '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
             'class="{fieldCls} {typeCls}" autocomplete="off" hidefocus="true" />',
         '<tpl if="boxLabel && boxLabelAlign == \'after\'">',
-            '<label class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">{boxLabel}</label>',
+            '<label id="{cmpId}-boxLabelEl" class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">{boxLabel}</label>',
         '</tpl>',
         {
             disableFormats: true,
@@ -67043,10 +69112,10 @@ Ext.define('Ext.form.field.Checkbox', {
     
     onRender : function(ct, position) {
         var me = this;
-        Ext.applyIf(me.renderSelectors, {
-            
-            boxLabelEl: 'label.' + me.boxLabelCls
-        });
+
+        
+        me.addChildEls('boxLabelEl');
+
         Ext.applyIf(me.subTplData, {
             boxLabel: me.boxLabel,
             boxLabelCls: me.boxLabelCls,
@@ -67092,8 +69161,8 @@ Ext.define('Ext.form.field.Checkbox', {
         var me = this,
             inputEl = me.inputEl,
             inputValue = me.inputValue,
-            checked = (value === true || value === 'true' || value === '1' ||
-                      ((Ext.isString(value) && inputValue) ? value == inputValue : me.onRe.test(value)));
+            checked = (value === true || value === 'true' || value === '1' || value === 1 ||
+                (((Ext.isString(value) || Ext.isNumber(value)) && inputValue) ? value == inputValue : me.onRe.test(value)));
 
         if (inputEl) {
             inputEl.dom.setAttribute('aria-checked', checked);
@@ -67140,6 +69209,12 @@ Ext.define('Ext.form.field.Checkbox', {
     },
 
     
+    beforeDestroy: function(){
+        this.callParent();
+        this.getManager().removeAtKey(this.id);
+    },
+
+    
     getManager: function() {
         return Ext.form.CheckboxManager;
     },
@@ -67165,6 +69240,7 @@ Ext.define('Ext.form.field.Checkbox', {
     },
 
     
+    
     getBodyNaturalWidth: function() {
         var me = this,
             bodyEl = me.bodyEl,
@@ -67635,14 +69711,14 @@ Ext.define('Ext.toolbar.TextItem', {
     requires: ['Ext.XTemplate'],
     alias: 'widget.tbtext',
     alternateClassName: 'Ext.Toolbar.TextItem',
-    
+
     
     text: '',
-    
+
     renderTpl: '{text}',
     
     baseCls: Ext.baseCSSPrefix + 'toolbar-text',
-    
+
     onRender : function() {
         Ext.apply(this.renderData, {
             text: this.text
@@ -67664,16 +69740,17 @@ Ext.define('Ext.toolbar.TextItem', {
 Ext.define('Ext.form.field.Trigger', {
     extend:'Ext.form.field.Text',
     alias: ['widget.triggerfield', 'widget.trigger'],
-    requires: ['Ext.core.DomHelper', 'Ext.util.ClickRepeater', 'Ext.layout.component.field.Trigger'],
+    requires: ['Ext.DomHelper', 'Ext.util.ClickRepeater', 'Ext.layout.component.field.Trigger'],
     alternateClassName: ['Ext.form.TriggerField', 'Ext.form.TwinTriggerField', 'Ext.form.Trigger'],
 
+    
     fieldSubTpl: [
         '<input id="{id}" type="{type}" ',
             '<tpl if="name">name="{name}" </tpl>',
             '<tpl if="size">size="{size}" </tpl>',
             '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
             'class="{fieldCls} {typeCls}" autocomplete="off" />',
-        '<div class="{triggerWrapCls}" role="presentation">',
+        '<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">',
             '{triggerEl}',
             '<div class="{clearCls}" role="presentation"></div>',
         '</div>',
@@ -67748,13 +69825,12 @@ Ext.define('Ext.form.field.Trigger', {
         }
         triggerConfigs[i - 1].cls += ' ' + triggerBaseCls + '-last';
 
-        Ext.applyIf(me.renderSelectors, {
-            
-            triggerWrap: '.' + triggerWrapCls
-        });
+        
+        me.addChildEls('triggerWrap');
+
         Ext.applyIf(me.subTplData, {
             triggerWrapCls: triggerWrapCls,
-            triggerEl: Ext.core.DomHelper.markup(triggerConfigs),
+            triggerEl: Ext.DomHelper.markup(triggerConfigs),
             clearCls: me.clearCls
         });
 
@@ -67763,7 +69839,7 @@ Ext.define('Ext.form.field.Trigger', {
         
         me.triggerEl = Ext.select('.' + triggerBaseCls, true, me.triggerWrap.dom);
 
-        me.doc = Ext.isIE ? Ext.getBody() : Ext.getDoc();
+        me.doc = Ext.getDoc();
         me.initTrigger();
     },
 
@@ -67780,6 +69856,7 @@ Ext.define('Ext.form.field.Trigger', {
     afterRender: function() {
         this.callParent();
         this.updateEditState();
+        this.triggerEl.unselectable();
     },
 
     updateEditState: function() {
@@ -67887,7 +69964,7 @@ Ext.define('Ext.form.field.Trigger', {
     
     onFocus: function() {
         var me = this;
-        this.callParent();
+        me.callParent();
         if (!me.mimicing) {
             me.bodyEl.addCls(me.wrapFocusCls);
             me.mimicing = true;
@@ -68068,28 +70145,36 @@ Ext.define('Ext.form.field.Picker', {
     
     alignPicker: function() {
         var me = this,
-            picker, isAbove,
-            aboveSfx = '-above';
+            picker;
 
-        if (this.isExpanded) {
+        if (me.isExpanded) {
             picker = me.getPicker();
             if (me.matchFieldWidth) {
                 
                 picker.setSize(me.bodyEl.getWidth(), picker.store && picker.store.getCount() ? null : 0);
             }
             if (picker.isFloating()) {
-                picker.alignTo(me.inputEl, me.pickerAlign, me.pickerOffset);
-
-                
-                
-                isAbove = picker.el.getY() < me.inputEl.getY();
-                me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
-                picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
+                me.doAlign();
             }
         }
     },
 
     
+    doAlign: function(){
+        var me = this,
+            picker = me.picker,
+            aboveSfx = '-above',
+            isAbove;
+
+        me.picker.alignTo(me.inputEl, me.pickerAlign, me.pickerOffset);
+        
+        
+        isAbove = picker.el.getY() < me.inputEl.getY();
+        me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
+        picker[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
+    },
+
+    
     collapse: function() {
         if (this.isExpanded && !this.isDestroyed) {
             var me = this,
@@ -68159,9 +70244,15 @@ Ext.define('Ext.form.field.Picker', {
     },
 
     onDestroy : function(){
-        var me = this;
+        var me = this,
+            picker = me.picker;
+
         Ext.EventManager.removeResizeListener(me.alignPicker, me);
-        Ext.destroy(me.picker, me.keyNav);
+        Ext.destroy(me.keyNav);
+        if (picker) {
+            delete picker.pickerField;
+            picker.destroy();
+        }
         me.callParent();
     }
 
@@ -68522,35 +70613,47 @@ Ext.define('Ext.toolbar.Paging', {
     alternateClassName: 'Ext.PagingToolbar',
     requires: ['Ext.toolbar.TextItem', 'Ext.form.field.Number'],
     
+
     
     displayInfo: false,
+
     
     prependButtons: false,
+
     
     displayMsg : 'Displaying {0} - {1} of {2}',
+
     
     emptyMsg : 'No data to display',
+
     
     beforePageText : 'Page',
+
     
     afterPageText : 'of {0}',
+
     
     firstText : 'First Page',
+
     
     prevText : 'Previous Page',
+
     
     nextText : 'Next Page',
+
     
     lastText : 'Last Page',
+
     
     refreshText : 'Refresh',
+
     
     inputItemWidth : 30,
-    
+
     
     getPagingItems: function() {
         var me = this;
-        
+
         return [{
             itemId: 'first',
             tooltip: me.firstText,
@@ -68626,30 +70729,31 @@ Ext.define('Ext.toolbar.Paging', {
         var me = this,
             pagingItems = me.getPagingItems(),
             userItems   = me.items || me.buttons || [];
-            
+
         if (me.prependButtons) {
             me.items = userItems.concat(pagingItems);
         } else {
             me.items = pagingItems.concat(userItems);
         }
         delete me.buttons;
-        
+
         if (me.displayInfo) {
             me.items.push('->');
             me.items.push({xtype: 'tbtext', itemId: 'displayItem'});
         }
-        
+
         me.callParent();
-        
+
         me.addEvents(
             
             'change',
+
             
             'beforechange'
         );
         me.on('afterlayout', me.onLoad, me, {single: true});
 
-        me.bindStore(me.store, true);
+        me.bindStore(me.store || 'ext-empty-store', true);
     },
     
     updateInfo : function(){
@@ -68683,7 +70787,7 @@ Ext.define('Ext.toolbar.Paging', {
             currPage,
             pageCount,
             afterText;
-            
+
         if (!me.rendered) {
             return;
         }
@@ -68708,14 +70812,14 @@ Ext.define('Ext.toolbar.Paging', {
     getPageData : function(){
         var store = this.store,
             totalCount = store.getTotalCount();
-            
+
         return {
             total : totalCount,
             currentPage : store.currentPage,
             pageCount: Math.ceil(totalCount / store.pageSize),
             fromRecord: ((store.currentPage - 1) * store.pageSize) + 1,
             toRecord: Math.min(store.currentPage * store.pageSize, totalCount)
-            
+
         };
     },
 
@@ -68731,7 +70835,7 @@ Ext.define('Ext.toolbar.Paging', {
     readPageFromInput : function(pageData){
         var v = this.child('#inputItem').getValue(),
             pageNum = parseInt(v, 10);
-            
+
         if (!v || isNaN(pageNum)) {
             this.child('#inputItem').setValue(pageData.currentPage);
             return false;
@@ -68810,7 +70914,7 @@ Ext.define('Ext.toolbar.Paging', {
     movePrevious : function(){
         var me = this,
             prev = me.store.currentPage - 1;
-        
+
         if (prev > 0) {
             if (me.fireEvent('beforechange', me, prev) !== false) {
                 me.store.previousPage();
@@ -68823,7 +70927,7 @@ Ext.define('Ext.toolbar.Paging', {
         var me = this,
             total = me.getPageData().pageCount,
             next = me.store.currentPage + 1;
-               
+
         if (next <= total) {
             if (me.fireEvent('beforechange', me, next) !== false) {
                 me.store.nextPage();
@@ -68833,9 +70937,9 @@ Ext.define('Ext.toolbar.Paging', {
 
     
     moveLast : function(){
-        var me = this, 
+        var me = this,
             last = me.getPageData().pageCount;
-        
+
         if (me.fireEvent('beforechange', me, last) !== false) {
             me.store.loadPage(last);
         }
@@ -68845,7 +70949,7 @@ Ext.define('Ext.toolbar.Paging', {
     doRefresh : function(){
         var me = this,
             current = me.store.currentPage;
-        
+
         if (me.fireEvent('beforechange', me, current) !== false) {
             me.store.loadPage(current);
         }
@@ -68854,10 +70958,10 @@ Ext.define('Ext.toolbar.Paging', {
     
     bindStore : function(store, initial){
         var me = this;
-        
+
         if (!initial && me.store) {
             if(store !== me.store && me.store.autoDestroy){
-                me.store.destroy();
+                me.store.destroyStore();
             }else{
                 me.store.un('beforeload', me.beforeLoad, me);
                 me.store.un('load', me.onLoad, me);
@@ -68911,6 +71015,7 @@ Ext.define('Ext.view.BoundList', {
     
     autoScroll: true,
     baseCls: Ext.baseCSSPrefix + 'boundlist',
+    itemCls: Ext.baseCSSPrefix + 'boundlist-item',
     listItemCls: '',
     shadow: false,
     trackOver: true,
@@ -68920,13 +71025,13 @@ Ext.define('Ext.view.BoundList', {
 
     componentLayout: 'boundlist',
 
-    renderTpl: ['<div class="list-ct"></div>'],
+    renderTpl: ['<div id="{id}-listEl" class="list-ct"></div>'],
 
     initComponent: function() {
         var me = this,
             baseCls = me.baseCls,
-            itemCls = baseCls + '-item';
-        me.itemCls = itemCls;
+            itemCls = me.itemCls;
+            
         me.selectedItemCls = baseCls + '-selected';
         me.overItemCls = baseCls + '-item-over';
         me.itemSelector = "." + itemCls;
@@ -68953,9 +71058,7 @@ Ext.define('Ext.view.BoundList', {
 
         me.callParent();
 
-        Ext.applyIf(me.renderSelectors, {
-            listEl: '.list-ct'
-        });
+        me.addChildEls('listEl');
     },
 
     createPagingToolbar: function() {
@@ -69111,6 +71214,40 @@ Ext.define('Ext.form.field.ComboBox', {
     triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
 
     
+    hiddenDataCls: Ext.baseCSSPrefix + 'hide-display ' + Ext.baseCSSPrefix + 'form-data-hidden',
+
+    
+    fieldSubTpl: [
+        '<div class="{hiddenDataCls}" role="presentation"></div>',
+        '<input id="{id}" type="{type}" ',
+            '<tpl if="size">size="{size}" </tpl>',
+            '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
+            'class="{fieldCls} {typeCls}" autocomplete="off" />',
+        '<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">',
+            '{triggerEl}',
+            '<div class="{clearCls}" role="presentation"></div>',
+        '</div>',
+        {
+            compiled: true,
+            disableFormats: true
+        }
+    ],
+
+    getSubTplData: function(){
+        var me = this;
+        Ext.applyIf(me.subTplData, {
+            hiddenDataCls: me.hiddenDataCls
+        });
+        return me.callParent(arguments);
+    },
+
+    afterRender: function(){
+        var me = this;
+        me.callParent(arguments);
+        me.setHiddenValue(me.value);
+    },
+
+    
 
     
     multiSelect: false,
@@ -69187,19 +71324,27 @@ Ext.define('Ext.form.field.ComboBox', {
             transform = me.transform,
             transformSelect, isLocalMode;
 
+        Ext.applyIf(me.renderSelectors, {
+            hiddenDataEl: '.' + me.hiddenDataCls.split(' ').join('.')
+        });
+        
 
         this.addEvents(
             
+            'beforequery',
 
             
-            'beforequery',
+            'select',
 
             
-            'select'
+            'beforeselect',
+
+            
+            'beforedeselect'
         );
 
         
-        if (!store && transform) {
+        if (transform) {
             transformSelect = Ext.getDom(transform);
             if (transformSelect) {
                 store = Ext.Array.map(Ext.Array.from(transformSelect.options), function(option) {
@@ -69214,7 +71359,7 @@ Ext.define('Ext.form.field.ComboBox', {
             }
         }
 
-        me.bindStore(store, true);
+        me.bindStore(store || 'ext-empty-store', true);
         store = me.store;
         if (store.autoCreated) {
             me.queryMode = 'local';
@@ -69240,7 +71385,7 @@ Ext.define('Ext.form.field.ComboBox', {
         if (!me.displayTpl) {
             me.displayTpl = Ext.create('Ext.XTemplate',
                 '<tpl for=".">' +
-                    '{[typeof values === "string" ? values : values.' + me.displayField + ']}' +
+                    '{[typeof values === "string" ? values : values["' + me.displayField + '"]]}' +
                     '<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
                 '</tpl>'
             );
@@ -69265,14 +71410,14 @@ Ext.define('Ext.form.field.ComboBox', {
         }
     },
 
+    
+    getStore : function(){
+        return this.store;
+    },
+
     beforeBlur: function() {
-        var me = this;
-        me.doQueryTask.cancel();
-        if (me.forceSelection) {
-            me.assertValue();
-        } else {
-            me.collapse();
-        }
+        this.doQueryTask.cancel();
+        this.assertValue();
     },
 
     
@@ -69281,20 +71426,22 @@ Ext.define('Ext.form.field.ComboBox', {
             value = me.getRawValue(),
             rec;
 
-        if (me.multiSelect) {
-            
-            
-            if (value !== me.getDisplayValue()) {
-                me.setValue(me.lastSelection);
-            }
-        } else {
-            
-            
-            rec = me.findRecordByDisplay(value);
-            if (rec) {
-                me.select(rec);
+        if (me.forceSelection) {
+            if (me.multiSelect) {
+                
+                
+                if (value !== me.getDisplayValue()) {
+                    me.setValue(me.lastSelection);
+                }
             } else {
-                me.setValue(me.lastSelection);
+                
+                
+                rec = me.findRecordByDisplay(value);
+                if (rec) {
+                    me.select(rec);
+                } else {
+                    me.setValue(me.lastSelection);
+                }
             }
         }
         me.collapse();
@@ -69335,7 +71482,7 @@ Ext.define('Ext.form.field.ComboBox', {
         
         if (oldStore && !initial) {
             if (oldStore !== store && oldStore.autoDestroy) {
-                oldStore.destroy();
+                oldStore.destroyStore();
             } else {
                 oldStore.un({
                     scope: me,
@@ -69372,19 +71519,38 @@ Ext.define('Ext.form.field.ComboBox', {
         var me = this,
             value = me.value;
 
-        me.syncSelection();
-        if (me.picker && !me.picker.getSelectionModel().hasSelection()) {
-            me.doAutoSelect();
+        
+        if (me.rawQuery) {
+            me.rawQuery = false;
+            me.syncSelection();
+            if (me.picker && !me.picker.getSelectionModel().hasSelection()) {
+                me.doAutoSelect();
+            }
+        }
+        
+        else {
+            
+            if (me.value) {
+                me.setValue(me.value);
+            } else {
+                
+                
+                if (me.store.getCount()) {
+                    me.doAutoSelect();
+                } else {
+                    me.setValue('');
+                }
+            }
         }
     },
 
     
     doRawQuery: function() {
-        this.doQuery(this.getRawValue());
+        this.doQuery(this.getRawValue(), false, true);
     },
 
     
-    doQuery: function(queryString, forceAll) {
+    doQuery: function(queryString, forceAll, rawQuery) {
         queryString = queryString || '';
 
         
@@ -69427,10 +71593,18 @@ Ext.define('Ext.form.field.ComboBox', {
                     }
                 } else {
                     
+                    me.rawQuery = rawQuery;
+
                     
-                    store.load({
-                        params: me.getParams(queryString)
-                    });
+                    
+                    if (me.pageSize) {
+                        
+                        me.loadPage(1);
+                    } else {
+                        store.load({
+                            params: me.getParams(queryString)
+                        });
+                    }
                 }
             }
 
@@ -69451,21 +71625,27 @@ Ext.define('Ext.form.field.ComboBox', {
         return true;
     },
 
+    loadPage: function(pageNum){
+        this.store.loadPage(pageNum, {
+            params: this.getParams(this.lastQuery)
+        });
+    },
+
+    onPageChange: function(toolbar, newPage){
+        
+        this.loadPage(newPage);
+        return false;
+    },
+
     
     getParams: function(queryString) {
-        var p = {},
-            pageSize = this.pageSize,
+        var params = {},
             param = this.queryParam;
 
         if (param) {
-            p[param] = queryString;
-        }
-
-        if (pageSize) {
-            p.start = 0;
-            p.limit = pageSize;
+            params[param] = queryString;
         }
-        return p;
+        return params;
     },
 
     
@@ -69503,7 +71683,7 @@ Ext.define('Ext.form.field.ComboBox', {
                 if (me.triggerAction === 'all') {
                     me.doQuery(me.allQuery, true);
                 } else {
-                    me.doQuery(me.getRawValue());
+                    me.doQuery(me.getRawValue(), false, true);
                 }
             }
             me.inputEl.focus();
@@ -69541,12 +71721,18 @@ Ext.define('Ext.form.field.ComboBox', {
             me.mon(me.inputEl, 'keyup', me.onKeyUp, me);
         }
     },
+    
+    onDestroy: function(){
+        this.bindStore(null);
+        this.callParent();    
+    },
 
     createPicker: function() {
         var me = this,
             picker,
             menuCls = Ext.baseCSSPrefix + 'menu',
             opts = Ext.apply({
+                pickerField: me,
                 selModel: {
                     mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
                 },
@@ -69562,6 +71748,9 @@ Ext.define('Ext.form.field.ComboBox', {
             }, me.listConfig, me.defaultListConfig);
 
         picker = me.picker = Ext.create('Ext.view.BoundList', opts);
+        if (me.pageSize) {
+            picker.pagingToolbar.on('beforechange', me.onPageChange, me);
+        }
 
         me.mon(picker, {
             itemclick: me.onItemClick,
@@ -69569,11 +71758,30 @@ Ext.define('Ext.form.field.ComboBox', {
             scope: me
         });
 
-        me.mon(picker.getSelectionModel(), 'selectionchange', me.onListSelectionChange, me);
+        me.mon(picker.getSelectionModel(), {
+            'beforeselect': me.onBeforeSelect,
+            'beforedeselect': me.onBeforeDeselect,
+            'selectionchange': me.onListSelectionChange,
+            scope: me
+        });
 
         return picker;
     },
 
+    alignPicker: function(){
+        var me = this,
+            picker = me.picker,
+            heightAbove = me.getPosition()[1] - Ext.getBody().getScroll().top,
+            heightBelow = Ext.Element.getViewHeight() - heightAbove - me.getHeight(),
+            space = Math.max(heightAbove, heightBelow);
+
+        me.callParent();
+        if (picker.getHeight() > space) {
+            picker.setHeight(space - 5); 
+            me.doAlign();
+        }
+    },
+
     onListRefresh: function() {
         this.alignPicker();
         this.syncSelection();
@@ -69589,11 +71797,22 @@ Ext.define('Ext.form.field.ComboBox', {
         if (!me.multiSelect && lastSelection) {
             selected = lastSelection[0];
             if (selected && (record.get(valueField) === selected.get(valueField))) {
+                
+                me.displayTplData = [record.data];
+                me.setRawValue(me.getDisplayValue());
                 me.collapse();
             }
         }
     },
 
+    onBeforeSelect: function(list, record) {
+        return this.fireEvent('beforeselect', this, record, record.index);
+    },
+
+    onBeforeDeselect: function(list, record) {
+        return this.fireEvent('beforedeselect', this, record, record.index);
+    },
+
     onListSelectionChange: function(list, selectedRecords) {
         var me = this,
             isMulti = me.multiSelect,
@@ -69670,9 +71889,13 @@ Ext.define('Ext.form.field.ComboBox', {
             idx = ds.findExact(field, value);
         return idx !== -1 ? ds.getAt(idx) : false;
     },
+
+    
     findRecordByValue: function(value) {
         return this.findRecord(this.valueField, value);
     },
+
+    
     findRecordByDisplay: function(value) {
         return this.findRecord(this.displayField, value);
     },
@@ -69690,6 +71913,7 @@ Ext.define('Ext.form.field.ComboBox', {
         if (me.store.loading) {
             
             me.value = value;
+            me.setHiddenValue(me.value);
             return me;
         }
 
@@ -69712,14 +71936,19 @@ Ext.define('Ext.form.field.ComboBox', {
             
             else {
                 
-                if (Ext.isDefined(valueNotFoundText)) {
+                if (!me.forceSelection) {
+                    displayTplData.push(value[i]);
+                    processedValue.push(value[i]);
+                }
+                
+                else if (Ext.isDefined(valueNotFoundText)) {
                     displayTplData.push(valueNotFoundText);
                 }
-                processedValue.push(value[i]);
             }
         }
 
         
+        me.setHiddenValue(processedValue);
         me.value = me.multiSelect ? processedValue : processedValue[0];
         if (!Ext.isDefined(me.value)) {
             me.value = null;
@@ -69744,6 +71973,37 @@ Ext.define('Ext.form.field.ComboBox', {
     },
 
     
+    setHiddenValue: function(values){
+        var me = this, i;
+        if (!me.hiddenDataEl) {
+            return;
+        }
+        values = Ext.Array.from(values);
+        var dom = me.hiddenDataEl.dom,
+            childNodes = dom.childNodes,
+            input = childNodes[0],
+            valueCount = values.length,
+            childrenCount = childNodes.length;
+        
+        if (!input && valueCount > 0) {
+            me.hiddenDataEl.update(Ext.DomHelper.markup({tag:'input', type:'hidden', name:me.name}));
+            childrenCount = 1;
+            input = dom.firstChild;
+        }
+        while (childrenCount > valueCount) {
+            dom.removeChild(childNodes[0]);
+            -- childrenCount;
+        }
+        while (childrenCount < valueCount) {
+            dom.appendChild(input.cloneNode(true));
+            ++ childrenCount;
+        }
+        for (i = 0; i < valueCount; i++) {
+            childNodes[i].value = values[i];
+        }
+    },
+
+    
     getDisplayValue: function() {
         return this.displayTpl.apply(this.displayTplData);
     },
@@ -69835,7 +72095,7 @@ Ext.define('Ext.picker.Month', {
     alternateClassName: 'Ext.MonthPicker',
 
     renderTpl: [
-        '<div class="{baseCls}-body">',
+        '<div id="{id}-bodyEl" class="{baseCls}-body">',
           '<div class="{baseCls}-months">',
               '<tpl for="months">',
                   '<div class="{parent.baseCls}-item {parent.baseCls}-month"><a href="#" hidefocus="on">{.}</a></div>',
@@ -69843,17 +72103,17 @@ Ext.define('Ext.picker.Month', {
           '</div>',
           '<div class="{baseCls}-years">',
               '<div class="{baseCls}-yearnav">',
-                  '<button class="{baseCls}-yearnav-prev"></button>',
-                  '<button class="{baseCls}-yearnav-next"></button>',
+                  '<button id="{id}-prevEl" class="{baseCls}-yearnav-prev"></button>',
+                  '<button id="{id}-nextEl" class="{baseCls}-yearnav-next"></button>',
               '</div>',
               '<tpl for="years">',
                   '<div class="{parent.baseCls}-item {parent.baseCls}-year"><a href="#" hidefocus="on">{.}</a></div>',
               '</tpl>',
           '</div>',
+          '<div class="' + Ext.baseCSSPrefix + 'clear"></div>',
         '</div>',
-        '<div class="' + Ext.baseCSSPrefix + 'clear"></div>',
         '<tpl if="showButtons">',
-          '<div class="{baseCls}-buttons"></div>',
+          '<div id="{id}-buttonsEl" class="{baseCls}-buttons"></div>',
         '</tpl>'
     ],
 
@@ -69873,7 +72133,7 @@ Ext.define('Ext.picker.Month', {
 
     
     width: 178,
-    
+
     
     smallCls: Ext.baseCSSPrefix + 'monthpicker-small',
 
@@ -69935,13 +72195,9 @@ Ext.define('Ext.picker.Month', {
             showButtons: me.showButtons
         });
 
-        Ext.apply(me.renderSelectors, {
-            bodyEl: '.' + me.baseCls + '-body',
-            prevEl: '.' + me.baseCls + '-yearnav-prev',
-            nextEl: '.' + me.baseCls + '-yearnav-next',
-            buttonsEl: '.' + me.baseCls + '-buttons'
-        });
-        this.callParent([ct, position]);
+        me.addChildEls('bodyEl', 'prevEl', 'nextEl', 'buttonsEl');
+
+        me.callParent(arguments);
     },
 
     
@@ -70147,8 +72403,8 @@ Ext.define('Ext.picker.Month', {
     beforeDestroy: function(){
         var me = this;
         me.years = me.months = null;
-        Ext.destroyMembers('backRepeater', 'nextRepeater', 'okBtn', 'cancelBtn');
-        this.callParent();
+        Ext.destroyMembers(me, 'backRepeater', 'nextRepeater', 'okBtn', 'cancelBtn');
+        me.callParent();
     }
 });
 
@@ -70171,11 +72427,11 @@ Ext.define('Ext.picker.Date', {
     renderTpl: [
         '<div class="{cls}" id="{id}" role="grid" title="{ariaTitle} {value:this.longDay}">',
             '<div role="presentation" class="{baseCls}-header">',
-                '<div class="{baseCls}-prev"><a href="#" role="button" title="{prevText}"></a></div>',
-                '<div class="{baseCls}-month"></div>',
-                '<div class="{baseCls}-next"><a href="#" role="button" title="{nextText}"></a></div>',
+                '<div class="{baseCls}-prev"><a id="{id}-prevEl" href="#" role="button" title="{prevText}"></a></div>',
+                '<div class="{baseCls}-month" id="{id}-middleBtnEl"></div>',
+                '<div class="{baseCls}-next"><a id="{id}-nextEl" href="#" role="button" title="{nextText}"></a></div>',
             '</div>',
-            '<table class="{baseCls}-inner" cellspacing="0" role="presentation">',
+            '<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="presentation">',
                 '<thead role="presentation"><tr role="presentation">',
                     '<tpl for="dayNames">',
                         '<th role="columnheader" title="{.}"><span>{.:this.firstInitial}</span></th>',
@@ -70193,7 +72449,7 @@ Ext.define('Ext.picker.Date', {
                 '</tr></tbody>',
             '</table>',
             '<tpl if="showToday">',
-                '<div role="presentation" class="{baseCls}-footer"></div>',
+                '<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer"></div>',
             '</tpl>',
         '</div>',
         {
@@ -70214,41 +72470,62 @@ Ext.define('Ext.picker.Date', {
     ],
 
     ariaTitle: 'Date Picker',
+
     
     todayText : 'Today',
+
     
+
     
+
     
     todayTip : '{0} (Spacebar)',
+
     
     minText : 'This date is before the minimum date',
+
     
     maxText : 'This date is after the maximum date',
+
     
+
     
     disabledDaysText : 'Disabled',
+
     
     disabledDatesText : 'Disabled',
+
     
+
     
+
     
     nextText : 'Next Month (Control+Right)',
+
     
     prevText : 'Previous Month (Control+Left)',
+
     
     monthYearText : 'Choose a month (Control+Up/Down to move years)',
+
     
     startDay : 0,
+
     
     showToday : true,
+
     
+
     
+
     
+
     
+
     
 
     
-    disableAnim: true,
+    disableAnim: false,
 
     
     baseCls: Ext.baseCSSPrefix + 'datepicker',
@@ -70311,8 +72588,7 @@ Ext.define('Ext.picker.Date', {
             today = Ext.Date.format(new Date(), me.format);
 
         Ext.applyIf(me, {
-            renderData: {},
-            renderSelectors: {}
+            renderData: {}
         });
 
         Ext.apply(me.renderData, {
@@ -70326,13 +72602,7 @@ Ext.define('Ext.picker.Date', {
         });
         me.getTpl('renderTpl').longDayFormat = me.longDayFormat;
 
-        Ext.apply(me.renderSelectors, {
-            eventEl: 'table.' + me.baseCls + '-inner',
-            prevEl: '.' + me.baseCls + '-prev a',
-            nextEl: '.' + me.baseCls + '-next a',
-            middleBtnEl: '.' + me.baseCls + '-month',
-            footerEl: '.' + me.baseCls + '-footer'
-        });
+        me.addChildEls('eventEl', 'prevEl', 'nextEl', 'middleBtnEl', 'footerEl');
 
         this.callParent(arguments);
         me.el.unselectable();
@@ -70528,65 +72798,68 @@ Ext.define('Ext.picker.Date', {
 
     
     getActive: function(){
-        return this.activeDate || me.value;
+        return this.activeDate || this.value;
     },
 
     
     runAnimation: function(isHide){
-        var options = {
-                target: this.monthPicker,
-                duration: 200
+        var picker = this.monthPicker,
+            options = {
+                duration: 200,
+                callback: function(){
+                    if (isHide) {
+                        picker.hide();
+                    } else {
+                        picker.show();
+                    }
+                }
             };
 
-        Ext.fx.Manager.run();
         if (isHide) {
-            
+            picker.el.slideOut('t', options);
         } else {
-            
+            picker.el.slideIn('t', options);
         }
-        Ext.create('Ext.fx.Anim', options);
     },
 
     
-    hideMonthPicker : function(){
+    hideMonthPicker : function(animate){
         var me = this,
             picker = me.monthPicker;
 
         if (picker) {
-            if (me.disableAnim) {
-                picker.hide();
+            if (me.shouldAnimate(animate)) {
+                me.runAnimation(true);
             } else {
-                this.runAnimation(true);
+                picker.hide();
             }
         }
         return me;
     },
 
     
-    showMonthPicker : function(){
-
+    showMonthPicker : function(animate){
         var me = this,
-            picker,
-            size,
-            top,
-            left;
-
-
+            picker;
+        
         if (me.rendered && !me.disabled) {
-            size = me.getSize();
             picker = me.createMonthPicker();
-            picker.show();
-            picker.setSize(size);
             picker.setValue(me.getActive());
-
-            if (me.disableAnim) {
-                picker.setPosition(-1, -1);
-            } else {
+            picker.setSize(me.getSize());
+            picker.setPosition(-1, -1);
+            if (me.shouldAnimate(animate)) {
                 me.runAnimation(false);
+            } else {
+                picker.show();
             }
         }
         return me;
     },
+    
+    
+    shouldAnimate: function(animate){
+        return Ext.isDefined(animate) ? animate : !this.disableAnim;
+    },
 
     
     createMonthPicker: function(){
@@ -70607,8 +72880,11 @@ Ext.define('Ext.picker.Date', {
                     monthdblclick: me.onOkClick
                 }
             });
-
-            me.on('beforehide', me.hideMonthPicker, me);
+            if (!me.disableAnim) {
+                
+                picker.el.setStyle('display', 'none');
+            }
+            me.on('beforehide', Ext.Function.bind(me.hideMonthPicker, me, [false]));
         }
         return picker;
     },
@@ -70881,6 +73157,7 @@ Ext.define('Ext.picker.Date', {
             delete me.textNodes;
             delete me.cells.elements;
         }
+        me.callParent();
     },
 
     
@@ -70932,7 +73209,7 @@ Ext.define('Ext.form.field.Date', {
     
     
     
-    
+
     
 
     
@@ -70944,7 +73221,7 @@ Ext.define('Ext.form.field.Date', {
     matchFieldWidth: false,
     
     startDay: 0,
-    
+
     initComponent : function(){
         var me = this,
             isString = Ext.isString,
@@ -70997,7 +73274,7 @@ Ext.define('Ext.form.field.Date', {
     setDisabledDates : function(dd){
         var me = this,
             picker = me.picker;
-            
+
         me.disabledDates = dd;
         me.initDisabledDays();
         if (picker) {
@@ -71008,7 +73285,7 @@ Ext.define('Ext.form.field.Date', {
     
     setDisabledDays : function(dd){
         var picker = this.picker;
-            
+
         this.disabledDays = dd;
         if (picker) {
             picker.setDisabledDays(dd);
@@ -71020,7 +73297,7 @@ Ext.define('Ext.form.field.Date', {
         var me = this,
             picker = me.picker,
             minValue = (Ext.isString(dt) ? me.parseDate(dt) : dt);
-            
+
         me.minValue = minValue;
         if (picker) {
             picker.minText = Ext.String.format(me.minText, me.formatDate(me.minValue));
@@ -71033,7 +73310,7 @@ Ext.define('Ext.form.field.Date', {
         var me = this,
             picker = me.picker,
             maxValue = (Ext.isString(dt) ? me.parseDate(dt) : dt);
-            
+
         me.maxValue = maxValue;
         if (picker) {
             picker.maxText = Ext.String.format(me.maxText, me.formatDate(me.maxValue));
@@ -71115,7 +73392,7 @@ Ext.define('Ext.form.field.Date', {
             utilDate = Ext.Date,
             parsedDate,
             result = null;
-            
+
         if (utilDate.formatContainsHourInfo(format)) {
             
             result = utilDate.parse(value, format);
@@ -71128,14 +73405,13 @@ Ext.define('Ext.form.field.Date', {
         }
         return result;
     },
-    
+
     
     getSubmitValue: function() {
-        var me = this,
-            format = me.submitFormat || me.format,
-            value = me.getValue();
-            
-        return value ? Ext.Date.format(value, format) : null;
+        var format = this.submitFormat || this.format,
+            value = this.getValue();
+
+        return value ? Ext.Date.format(value, format) : '';
     },
 
     
@@ -71171,6 +73447,7 @@ Ext.define('Ext.form.field.Date', {
             format = Ext.String.format;
 
         return Ext.create('Ext.picker.Date', {
+            pickerField: me,
             ownerCt: me.ownerCt,
             renderTo: document.body,
             floating: true,
@@ -71201,7 +73478,7 @@ Ext.define('Ext.form.field.Date', {
 
     onSelect: function(m, d) {
         var me = this;
-        
+
         me.setValue(d);
         me.fireEvent('select', me, d);
         me.collapse();
@@ -71209,9 +73486,8 @@ Ext.define('Ext.form.field.Date', {
 
     
     onExpand: function() {
-        var me = this,
-            value = me.getValue();
-        me.picker.setValue(Ext.isDate(value) ? value : new Date());
+        var value = this.getValue();
+        this.picker.setValue(Ext.isDate(value) ? value : new Date());
     },
 
     
@@ -71224,11 +73500,11 @@ Ext.define('Ext.form.field.Date', {
         var me = this,
             v = me.parseDate(me.getRawValue()),
             focusTask = me.focusTask;
-        
+
         if (focusTask) {
             focusTask.cancel();
         }
-        
+
         if (v) {
             me.setValue(v);
         }
@@ -71328,9 +73604,10 @@ Ext.define("Ext.form.field.File", {
     
     fieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',
 
-
     
     readOnly: true,
+
+    
     componentLayout: 'filefield',
 
     
@@ -71360,6 +73637,7 @@ Ext.define("Ext.form.field.File", {
     createButton: function() {
         var me = this;
         me.button = Ext.widget('button', Ext.apply({
+            ui: me.ui,
             renderTo: me.bodyEl,
             text: me.buttonText,
             cls: Ext.baseCSSPrefix + 'form-file-btn',
@@ -71390,9 +73668,13 @@ Ext.define("Ext.form.field.File", {
     setValue: Ext.emptyFn,
 
     reset : function(){
-        this.fileInputEl.remove();
-        this.createFileInput();
-        this.callParent();
+        var me = this;
+        if (me.rendered) {
+            me.fileInputEl.remove();
+            me.createFileInput();
+            me.inputEl.dom.value = '';
+        }
+        me.callParent();
     },
 
     onDisable: function(){
@@ -71451,6 +73733,11 @@ Ext.define('Ext.form.field.Hidden', {
         this.formItemCls += '-hidden';
         this.callParent();    
     },
+    
+    
+    isEqual: function(value1, value2) {
+        return this.isEqualAsString(value1, value2);
+    },
 
     
     initEvents: Ext.emptyFn,
@@ -71469,16 +73756,16 @@ Ext.define('Ext.picker.Color', {
     requires: 'Ext.XTemplate',
     alias: 'widget.colorpicker',
     alternateClassName: 'Ext.ColorPalette',
-    
+
     
     componentCls : Ext.baseCSSPrefix + 'color-picker',
-    
+
     
     selectedCls: Ext.baseCSSPrefix + 'color-picker-selected',
-    
+
     
     value : null,
-    
+
     
     clickEvent :'click',
 
@@ -71495,20 +73782,24 @@ Ext.define('Ext.picker.Color', {
     ],
 
     
+
     
-    
+
     colorRe: /(?:^|\s)color-(.{6})(?:\s|$)/,
     
-    constructor: function() {
-        this.renderTpl = Ext.create('Ext.XTemplate', '<tpl for="colors"><a href="#" class="color-{.}" hidefocus="on"><em><span style="background:#{.}" unselectable="on">&#160;</span></em></a></tpl>');
-        this.callParent(arguments);
-    },
-    
+    renderTpl: [
+        '<tpl for="colors">',
+            '<a href="#" class="color-{.}" hidefocus="on">',
+                '<em><span style="background:#{.}" unselectable="on">&#160;</span></em>',
+            '</a>',
+        '</tpl>'
+    ],
+
     
     initComponent : function(){
         var me = this;
-        
-        this.callParent(arguments);
+
+        me.callParent(arguments);
         me.addEvents(
             
             'select'
@@ -71524,12 +73815,12 @@ Ext.define('Ext.picker.Color', {
     onRender : function(container, position){
         var me = this,
             clickEvent = me.clickEvent;
-            
+
         Ext.apply(me.renderData, {
             itemCls: me.itemCls,
-            colors: me.colors    
+            colors: me.colors
         });
-        this.callParent(arguments);
+        me.callParent(arguments);
 
         me.mon(me.el, clickEvent, me.handleClick, me, {delegate: 'a'});
         
@@ -71542,8 +73833,8 @@ Ext.define('Ext.picker.Color', {
     afterRender : function(){
         var me = this,
             value;
-            
-        this.callParent(arguments);
+
+        me.callParent(arguments);
         if (me.value) {
             value = me.value;
             me.value = null;
@@ -71555,7 +73846,7 @@ Ext.define('Ext.picker.Color', {
     handleClick : function(event, target){
         var me = this,
             color;
-            
+
         event.stopEvent();
         if (!me.disabled) {
             color = target.className.match(me.colorRe)[1];
@@ -71565,19 +73856,19 @@ Ext.define('Ext.picker.Color', {
 
     
     select : function(color, suppressEvent){
-        
+
         var me = this,
             selectedCls = me.selectedCls,
             value = me.value,
             el;
-            
+
         color = color.replace('#', '');
         if (!me.rendered) {
             me.value = color;
             return;
         }
-        
-        
+
+
         if (color != value || me.allowReselect) {
             el = me.el;
 
@@ -71591,7 +73882,7 @@ Ext.define('Ext.picker.Color', {
             }
         }
     },
-    
+
     
     getValue: function(){
         return this.value || null;
@@ -71649,10 +73940,10 @@ Ext.define('Ext.form.field.HtmlEditor', {
     ],
 
     fieldSubTpl: [
-        '<div class="{toolbarWrapCls}"></div>',
-        '<textarea id="{id}" name="{name}" tabIndex="-1" class="{textareaCls}" ',
+        '<div id="{cmpId}-toolbarWrap" class="{toolbarWrapCls}"></div>',
+        '<textarea id="{cmpId}-textareaEl" name="{name}" tabIndex="-1" class="{textareaCls}" ',
             'style="{size}" autocomplete="off"></textarea>',
-        '<iframe name="{iframeName}" frameBorder="0" style="overflow:auto;{size}" src="{iframeSrc}"></iframe>',
+        '<iframe id="{cmpId}-iframeEl" name="{iframeName}" frameBorder="0" style="overflow:auto;{size}" src="{iframeSrc}"></iframe>',
         {
             compiled: true,
             disableFormats: true
@@ -71703,7 +73994,7 @@ Ext.define('Ext.form.field.HtmlEditor', {
     hideMode:'offsets',
 
     maskOnDisable: true,
-    
+
     
     initComponent : function(){
         var me = this;
@@ -71759,7 +74050,7 @@ Ext.define('Ext.form.field.HtmlEditor', {
         if (me.enableFont && !Ext.isSafari2) {
             fontSelectItem = Ext.widget('component', {
                 renderTpl: [
-                    '<select class="{cls}">',
+                    '<select id="{id}-selectEl" class="{cls}">',
                         '<tpl for="fonts">',
                             '<option value="{[values.toLowerCase()]}" style="font-family:{.}"<tpl if="values.toLowerCase()==parent.defaultFont"> selected</tpl>>{.}</option>',
                         '</tpl>',
@@ -71770,9 +74061,7 @@ Ext.define('Ext.form.field.HtmlEditor', {
                     fonts: me.fontFamilies,
                     defaultFont: me.defaultFont
                 },
-                renderSelectors: {
-                    selectEl: 'select'
-                },
+                childEls: ['selectEl'],
                 onDisable: function() {
                     var selectEl = this.selectEl;
                     if (selectEl) {
@@ -71993,16 +74282,11 @@ Ext.define('Ext.form.field.HtmlEditor', {
 
     
     onRender: function() {
-        var me = this,
-            renderSelectors = me.renderSelectors;
+        var me = this;
 
-        Ext.applyIf(renderSelectors, me.getLabelableSelectors());
+        me.onLabelableRender();
 
-        Ext.applyIf(renderSelectors, {
-            toolbarWrap: 'div.' + Ext.baseCSSPrefix + 'html-editor-tb',
-            iframeEl: 'iframe',
-            textareaEl: 'textarea'
-        });
+        me.addChildEls('toolbarWrap', 'iframeEl', 'textareaEl');
 
         me.callParent(arguments);
 
@@ -72034,6 +74318,8 @@ Ext.define('Ext.form.field.HtmlEditor', {
     getSubTplData: function() {
         var cssPrefix = Ext.baseCSSPrefix;
         return {
+            cmpId: this.id,
+            id: this.getInputId(),
             toolbarWrapCls: cssPrefix + 'html-editor-tb',
             textareaCls: cssPrefix + 'hidden',
             iframeName: Ext.id(),
@@ -72043,7 +74329,8 @@ Ext.define('Ext.form.field.HtmlEditor', {
     },
 
     getSubTplMarkup: function() {
-        return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
+        var data = this.getSubTplData();
+        return this.getTpl('fieldSubTpl').apply(data);
     },
 
     getBodyNaturalWidth: function() {
@@ -72269,7 +74556,7 @@ Ext.define('Ext.form.field.HtmlEditor', {
             ss['background-attachment'] = 'fixed'; 
             dbody.bgProperties = 'fixed'; 
 
-            Ext.core.DomHelper.applyStyles(dbody, ss);
+            Ext.DomHelper.applyStyles(dbody, ss);
 
             doc = me.getDoc();
 
@@ -72347,7 +74634,7 @@ Ext.define('Ext.form.field.HtmlEditor', {
             } catch(e) {
                 
             }
-            Ext.destroyMembers('tb', 'toolbarWrap', 'iframeEl', 'textareaEl');
+            Ext.destroyMembers(me, 'tb', 'toolbarWrap', 'iframeEl', 'textareaEl');
         }
         me.callParent();
     },
@@ -72787,12 +75074,6 @@ Ext.define('Ext.form.field.Radio', {
     },
 
     
-    beforeDestroy: function(){
-        this.callParent();
-        this.getManager().removeAtKey(this.id);
-    },
-
-    
     getManager: function() {
         return Ext.form.RadioManager;
     }
@@ -72818,7 +75099,7 @@ Ext.define('Ext.picker.Time', {
     displayField: 'disp',
 
     
-    initDate: [2008,1,1],
+    initDate: [2008,0,1],
 
     componentCls: Ext.baseCSSPrefix + 'timepicker',
 
@@ -72829,16 +75110,16 @@ Ext.define('Ext.picker.Time', {
         var me = this,
             dateUtil = Ext.Date,
             clearTime = dateUtil.clearTime,
-            initDate = me.initDate.join('/');
+            initDate = me.initDate;
 
         
-        me.absMin = clearTime(new Date(initDate));
-        me.absMax = dateUtil.add(clearTime(new Date(initDate)), 'mi', (24 * 60) - 1);
+        me.absMin = clearTime(new Date(initDate[0], initDate[1], initDate[2]));
+        me.absMax = dateUtil.add(clearTime(new Date(initDate[0], initDate[1], initDate[2])), 'mi', (24 * 60) - 1);
 
         me.store = me.createStore();
         me.updateList();
 
-        this.callParent();
+        me.callParent();
     },
 
     
@@ -72856,7 +75137,7 @@ Ext.define('Ext.picker.Time', {
     
     normalizeDate: function(date) {
         var initDate = this.initDate;
-        date.setFullYear(initDate[0], initDate[1] - 1, initDate[2]);
+        date.setFullYear(initDate[0], initDate[1], initDate[2]);
         return date;
     },
 
@@ -73102,6 +75383,7 @@ Ext.define('Ext.form.field.Time', {
     createPicker: function() {
         var me = this,
             picker = Ext.create('Ext.picker.Time', {
+                pickerField: me,
                 selModel: {
                     mode: 'SINGLE'
                 },
@@ -73273,8 +75555,10 @@ Ext.define('Ext.grid.ColumnLayout', {
 
     reserveOffset: false,
 
+    shrinkToFit: false,
+
     
-    clearInnerCtOnLayout: false,
+    clearInnerCtOnLayout: true,
 
     beforeLayout: function() {
         var me = this,
@@ -73296,19 +75580,17 @@ Ext.define('Ext.grid.ColumnLayout', {
         me.innerCt.setHeight(23);
 
         
-        if (me.align == 'stretchmax') {
-            for (; i < len; i++) {
-                item = items[i];
-                item.el.setStyle({
-                    height: 'auto'
-                });
-                item.titleContainer.setStyle({
-                    height: 'auto',
-                    paddingTop: '0'
-                });
-                if (item.componentLayout && item.componentLayout.lastComponentSize) {
-                    item.componentLayout.lastComponentSize.height = item.el.dom.offsetHeight;
-                }
+        for (; i < len; i++) {
+            item = items[i];
+            item.el.setStyle({
+                height: 'auto'
+            });
+            item.titleContainer.setStyle({
+                height: 'auto',
+                paddingTop: '0'
+            });
+            if (item.componentLayout && item.componentLayout.lastComponentSize) {
+                item.componentLayout.lastComponentSize.height = item.el.dom.offsetHeight;
             }
         }
         return returnValue;
@@ -73322,7 +75604,7 @@ Ext.define('Ext.grid.ColumnLayout', {
             metaData = calculations.meta,
             len = boxes.length, i = 0, box, item;
 
-        if (targetSize.width && !me.isColumn) {
+        if (targetSize.width && !me.isHeader) {
             
             if (me.owner.forceFit) {
 
@@ -73351,16 +75633,84 @@ Ext.define('Ext.grid.ColumnLayout', {
 
     afterLayout: function() {
         var me = this,
+            owner = me.owner,
+            topGrid,
+            bothHeaderCts,
+            otherHeaderCt,
+            thisHeight,
+            otherHeight,
+            modifiedGrid,
             i = 0,
-            items = me.getLayoutItems(),
-            len = items.length;
+            items,
+            len,
+            headerHeight;
 
         me.callParent(arguments);
 
         
-        if (!me.owner.hideHeaders && me.align == 'stretchmax') {
+        if (!me.owner.hideHeaders) {
+
+            
+            
+            if (owner.lockableInjected) {
+                topGrid = owner.up('tablepanel').up('tablepanel');
+                bothHeaderCts = topGrid.query('headercontainer:not([isHeader])');
+                otherHeaderCt = (bothHeaderCts[0] === owner) ? bothHeaderCts[1] : bothHeaderCts[0];
+
+                
+                if (!otherHeaderCt.rendered) {
+                    return;
+                }
+
+                
+                otherHeight = otherHeaderCt.layout.getRenderTarget().getViewSize().height;
+                if (!otherHeight) {
+                    return;
+                }
+                thisHeight = this.getRenderTarget().getViewSize().height;
+                if (!thisHeight) {
+                    return;
+                }
+
+                
+                
+                topGrid.componentLayout.layoutBusy = true;
+
+                
+                headerHeight = thisHeight;
+
+                
+                if (thisHeight > otherHeight) {
+                    otherHeaderCt.layout.align = 'stretch';
+                    otherHeaderCt.setCalculatedSize(otherHeaderCt.getWidth(), owner.getHeight(), otherHeaderCt.ownerCt);
+                    delete otherHeaderCt.layout.align;
+                    modifiedGrid = otherHeaderCt.up('tablepanel');
+                } else if (otherHeight > thisHeight) {
+                    headerHeight = otherHeight;
+                    this.align = 'stretch';
+                    owner.setCalculatedSize(owner.getWidth(), otherHeaderCt.getHeight(), owner.ownerCt);
+                    delete this.align;
+                    modifiedGrid = owner.up('tablepanel');
+                }
+                topGrid.componentLayout.layoutBusy = false;
+
+                
+                items = bothHeaderCts[0].layout.getLayoutItems().concat(bothHeaderCts[1].layout.getLayoutItems());
+            } else {
+                headerHeight = this.getRenderTarget().getViewSize().height;
+                items = me.getLayoutItems();
+            }
+
+            len = items.length;
             for (; i < len; i++) {
-                items[i].setPadding();
+                items[i].setPadding(headerHeight);
+            }
+
+            
+            if (modifiedGrid) {
+                setTimeout(function() {
+                    modifiedGrid.doLayout();
+                }, 1);
             }
         }
     },
@@ -73372,7 +75722,7 @@ Ext.define('Ext.grid.ColumnLayout', {
             extra;
 
         
-        if (!me.isColumn) {
+        if (!me.isHeader) {
             me.tooNarrow = calcs.meta.tooNarrow;
             extra = (me.reserveOffset ? me.availableSpaceOffset : 0);
 
@@ -73395,13 +75745,13 @@ Ext.define('Ext.grid.ColumnLayout', {
 });
 
 Ext.define('Ext.grid.LockingView', {
-    
+
     mixins: {
         observable: 'Ext.util.Observable'
     },
-    
+
     eventRelayRe: /^(beforeitem|beforecontainer|item|container|cell)/,
-    
+
     constructor: function(config){
         var me = this,
             eventNames = [],
@@ -73410,7 +75760,7 @@ Ext.define('Ext.grid.LockingView', {
             normal = config.normal.getView(),
             events,
             event;
-        
+
         Ext.apply(me, {
             lockedView: locked,
             normalView: normal,
@@ -73419,7 +75769,7 @@ Ext.define('Ext.grid.LockingView', {
             panel: config.panel
         });
         me.mixins.observable.constructor.call(me, config);
-        
+
         
         events = locked.events;
         for (event in events) {
@@ -73429,49 +75779,49 @@ Ext.define('Ext.grid.LockingView', {
         }
         me.relayEvents(locked, eventNames);
         me.relayEvents(normal, eventNames);
-        
+
         normal.on({
             scope: me,
             itemmouseleave: me.onItemMouseLeave,
             itemmouseenter: me.onItemMouseEnter
         });
-        
+
         locked.on({
             scope: me,
             itemmouseleave: me.onItemMouseLeave,
             itemmouseenter: me.onItemMouseEnter
         });
     },
-    
+
     getGridColumns: function() {
         var cols = this.lockedGrid.headerCt.getGridColumns();
         return cols.concat(this.normalGrid.headerCt.getGridColumns());
     },
-    
+
     getEl: function(column){
         return this.getViewForColumn(column).getEl();
     },
-    
+
     getViewForColumn: function(column) {
         var view = this.lockedView,
             inLocked;
-        
+
         view.headerCt.cascade(function(col){
             if (col === column) {
                 inLocked = true;
                 return false;
             }
         });
-        
+
         return inLocked ? view : this.normalView;
     },
-    
+
     onItemMouseEnter: function(view, record){
         var me = this,
             locked = me.lockedView,
             other = me.normalView,
             item;
-            
+
         if (view.trackOver) {
             if (view !== locked) {
                 other = locked;
@@ -73480,12 +75830,12 @@ Ext.define('Ext.grid.LockingView', {
             other.highlightItem(item);
         }
     },
-    
+
     onItemMouseLeave: function(view, record){
         var me = this,
             locked = me.lockedView,
             other = me.normalView;
-            
+
         if (view.trackOver) {
             if (view !== locked) {
                 other = locked;
@@ -73493,37 +75843,37 @@ Ext.define('Ext.grid.LockingView', {
             other.clearHighlight();
         }
     },
-    
+
     relayFn: function(name, args){
         args = args || [];
-        
+
         var view = this.lockedView;
-        view[name].apply(view, args || []);    
+        view[name].apply(view, args || []);
         view = this.normalView;
-        view[name].apply(view, args || []);   
+        view[name].apply(view, args || []);
     },
-    
+
     getSelectionModel: function(){
-        return this.panel.getSelectionModel();    
+        return this.panel.getSelectionModel();
     },
-    
+
     getStore: function(){
         return this.panel.store;
     },
-    
+
     getNode: function(nodeInfo){
         
         return this.normalView.getNode(nodeInfo);
     },
-    
+
     getCell: function(record, column){
         var view = this.getViewForColumn(column),
             row;
-            
+
         row = view.getNode(record);
         return Ext.fly(row).down(column.getCellSelector());
     },
-    
+
     getRecord: function(node){
         var result = this.lockedView.getRecord(node);
         if (!node) {
@@ -73531,53 +75881,55 @@ Ext.define('Ext.grid.LockingView', {
         }
         return result;
     },
-    
+
     addElListener: function(eventName, fn, scope){
         this.relayFn('addElListener', arguments);
     },
-    
+
     refreshNode: function(){
         this.relayFn('refreshNode', arguments);
     },
-    
+
     refresh: function(){
         this.relayFn('refresh', arguments);
     },
-    
+
     bindStore: function(){
         this.relayFn('bindStore', arguments);
     },
-    
+
     addRowCls: function(){
         this.relayFn('addRowCls', arguments);
     },
-    
+
     removeRowCls: function(){
         this.relayFn('removeRowCls', arguments);
     }
-       
+
 });
 
 Ext.define('Ext.grid.Lockable', {
-    
+
     requires: ['Ext.grid.LockingView'],
-    
+
     
     syncRowHeight: true,
-    
-    
-    
+
     
 
     
+
     
+
     
     spacerHidden: true,
-    
+
+    headerCounter: 0,
+
     
     unlockText: 'Unlock',
     lockText: 'Lock',
-    
+
     determineXTypeToCreate: function() {
         var me = this,
             typeToCreate;
@@ -73589,17 +75941,17 @@ Ext.define('Ext.grid.Lockable', {
                 xtypesLn   = xtypes.length,
                 xtype      = xtypes[xtypesLn - 1],
                 superxtype = xtypes[xtypesLn - 2];
-                
+
             if (superxtype !== 'tablepanel') {
                 typeToCreate = superxtype;
             } else {
                 typeToCreate = xtype;
             }
         }
-        
+
         return typeToCreate;
     },
-    
+
     
     
     injectLockable: function() {
@@ -73637,9 +75989,9 @@ Ext.define('Ext.grid.Lockable', {
             columns,
             lockedHeaderCt,
             normalHeaderCt;
-        
+
         me.addCls(Ext.baseCSSPrefix + 'grid-locked');
-        
+
         
         
         
@@ -73651,59 +76003,69 @@ Ext.define('Ext.grid.Lockable', {
         for (i = 0; i < me.lockedCfgCopy.length; i++) {
             delete me[me.lockedCfgCopy[i]];
         }
-        
+
+        me.addEvents(
+            
+            'lockcolumn',
+
+            
+            'unlockcolumn'
+        );
+
+        me.addStateEvents(['lockcolumn', 'unlockcolumn']);
+
         me.lockedHeights = [];
         me.normalHeights = [];
-        
+
         columns = me.processColumns(me.columns);
 
-        lockedGrid.width = columns.lockedWidth;
+        lockedGrid.width = columns.lockedWidth + Ext.num(selModel.headerWidth, 0);
         lockedGrid.columns = columns.locked;
         normalGrid.columns = columns.normal;
-        
+
         me.store = Ext.StoreManager.lookup(me.store);
         lockedGrid.store = me.store;
         normalGrid.store = me.store;
-        
+
         
         normalGrid.flex = 1;
         lockedGrid.viewConfig = me.lockedViewConfig || {};
         lockedGrid.viewConfig.loadingUseMsg = false;
         normalGrid.viewConfig = me.normalViewConfig || {};
-        
+
         Ext.applyIf(lockedGrid.viewConfig, me.viewConfig);
         Ext.applyIf(normalGrid.viewConfig, me.viewConfig);
-        
+
         me.normalGrid = Ext.ComponentManager.create(normalGrid);
         me.lockedGrid = Ext.ComponentManager.create(lockedGrid);
-        
+
         me.view = Ext.create('Ext.grid.LockingView', {
             locked: me.lockedGrid,
             normal: me.normalGrid,
-            panel: me    
+            panel: me
         });
-        
+
         if (me.syncRowHeight) {
             me.lockedGrid.getView().on({
                 refresh: me.onLockedGridAfterRefresh,
                 itemupdate: me.onLockedGridAfterUpdate,
                 scope: me
             });
-            
+
             me.normalGrid.getView().on({
                 refresh: me.onNormalGridAfterRefresh,
                 itemupdate: me.onNormalGridAfterUpdate,
                 scope: me
             });
         }
-        
+
         lockedHeaderCt = me.lockedGrid.headerCt;
         normalHeaderCt = me.normalGrid.headerCt;
-        
+
         lockedHeaderCt.lockedCt = true;
         lockedHeaderCt.lockableInjected = true;
         normalHeaderCt.lockableInjected = true;
-        
+
         lockedHeaderCt.on({
             columnshow: me.onLockedHeaderShow,
             columnhide: me.onLockedHeaderHide,
@@ -73712,99 +76074,113 @@ Ext.define('Ext.grid.Lockable', {
             columnresize: me.onLockedHeaderResize,
             scope: me
         });
-        
+
         normalHeaderCt.on({
             columnmove: me.onNormalHeaderMove,
             sortchange: me.onNormalHeaderSortChange,
             scope: me
         });
-        
+
         me.normalGrid.on({
             scrollershow: me.onScrollerShow,
             scrollerhide: me.onScrollerHide,
             scope: me
         });
-        
+
         me.lockedGrid.on('afterlayout', me.onLockedGridAfterLayout, me, {single: true});
-        
+
         me.modifyHeaderCt();
         me.items = [me.lockedGrid, me.normalGrid];
 
+        me.relayHeaderCtEvents(lockedHeaderCt);
+        me.relayHeaderCtEvents(normalHeaderCt);
+
         me.layout = {
             type: 'hbox',
             align: 'stretch'
         };
     },
-    
+
     processColumns: function(columns){
         
         var i = 0,
             len = columns.length,
-            lockedWidth = 0,
+            lockedWidth = 1,
             lockedHeaders = [],
             normalHeaders = [],
             column;
-            
+
         for (; i < len; ++i) {
             column = columns[i];
             
             
             column.processed = true;
             if (column.locked) {
-                lockedWidth += column.width;
+                if (!column.hidden) {
+                    lockedWidth += column.width || Ext.grid.header.Container.prototype.defaultWidth;
+                }
                 lockedHeaders.push(column);
             } else {
                 normalHeaders.push(column);
             }
+            if (!column.headerId) {
+                column.headerId = (column.initialConfig || column).id || ('L' + (++this.headerCounter));
+            }
         }
         return {
             lockedWidth: lockedWidth,
             locked: lockedHeaders,
-            normal: normalHeaders    
+            normal: normalHeaders
         };
     },
-    
+
     
     onLockedGridAfterLayout: function() {
         var me         = this,
             lockedView = me.lockedGrid.getView();
         lockedView.on({
-            refresh: me.createSpacer,
             beforerefresh: me.destroySpacer,
             scope: me
         });
     },
-    
+
     
     onLockedHeaderMove: function() {
         if (this.syncRowHeight) {
             this.onNormalGridAfterRefresh();
         }
     },
-    
+
     
     onNormalHeaderMove: function() {
         if (this.syncRowHeight) {
             this.onLockedGridAfterRefresh();
         }
     },
+
     
     
-    
-    createSpacer: function() {
+    getSpacerEl: function() {
         var me   = this,
+            w,
+            view,
+            el;
+
+        if (!me.spacerEl) {
             
             
-            w    = Ext.getScrollBarWidth() + (Ext.isIE ? 2 : 0),
-            view = me.lockedGrid.getView(),
+            w    = Ext.getScrollBarWidth() + (Ext.isIE ? 2 : 0);
+            view = me.lockedGrid.getView();
             el   = view.el;
 
-        me.spacerEl = Ext.core.DomHelper.append(el, {
-            cls: me.spacerHidden ? (Ext.baseCSSPrefix + 'hidden') : '',
-            style: 'height: ' + w + 'px;'
-        }, true);
+            me.spacerEl = Ext.DomHelper.append(el, {
+                cls: me.spacerHidden ? (Ext.baseCSSPrefix + 'hidden') : '',
+                style: 'height: ' + w + 'px;'
+            }, true);
+        }
+        return me.spacerEl;
     },
-    
+
     destroySpacer: function() {
         var me = this;
         if (me.spacerEl) {
@@ -73812,7 +76188,7 @@ Ext.define('Ext.grid.Lockable', {
             delete me.spacerEl;
         }
     },
-    
+
     
     onLockedGridAfterRefresh: function() {
         var me     = this,
@@ -73821,16 +76197,16 @@ Ext.define('Ext.grid.Lockable', {
             rowEls = el.query(view.getItemSelector()),
             ln     = rowEls.length,
             i = 0;
-            
+
         
         me.lockedHeights = [];
-        
+
         for (; i < ln; i++) {
             me.lockedHeights[i] = rowEls[i].clientHeight;
         }
         me.syncRowHeights();
     },
-    
+
     
     onNormalGridAfterRefresh: function() {
         var me     = this,
@@ -73839,28 +76215,28 @@ Ext.define('Ext.grid.Lockable', {
             rowEls = el.query(view.getItemSelector()),
             ln     = rowEls.length,
             i = 0;
-            
+
         
         me.normalHeights = [];
-        
+
         for (; i < ln; i++) {
             me.normalHeights[i] = rowEls[i].clientHeight;
         }
         me.syncRowHeights();
     },
-    
+
     
     onLockedGridAfterUpdate: function(record, index, node) {
         this.lockedHeights[index] = node.clientHeight;
         this.syncRowHeights();
     },
-    
+
     
     onNormalGridAfterUpdate: function(record, index, node) {
         this.normalHeights[index] = node.clientHeight;
         this.syncRowHeights();
     },
-    
+
     
     
     syncRowHeights: function() {
@@ -73897,7 +76273,7 @@ Ext.define('Ext.grid.Lockable', {
 
             
             me.normalGrid.invalidateScroller();
-            
+
             
             
             if (vertScroller && vertScroller.setViewScrollTop) {
@@ -73910,55 +76286,56 @@ Ext.define('Ext.grid.Lockable', {
                 normalView.el.dom.scrollTop = scrollTop;
                 lockedView.el.dom.scrollTop = scrollTop;
             }
-            
+
             
             me.lockedHeights = [];
             me.normalHeights = [];
         }
     },
-    
+
     
     onScrollerShow: function(scroller, direction) {
         if (direction === 'horizontal') {
             this.spacerHidden = false;
-            this.spacerEl.removeCls(Ext.baseCSSPrefix + 'hidden');
+            this.getSpacerEl().removeCls(Ext.baseCSSPrefix + 'hidden');
         }
     },
-    
+
     
     onScrollerHide: function(scroller, direction) {
         if (direction === 'horizontal') {
             this.spacerHidden = true;
-            this.spacerEl.addCls(Ext.baseCSSPrefix + 'hidden');
+            if (this.spacerEl) {
+                this.spacerEl.addCls(Ext.baseCSSPrefix + 'hidden');
+            }
         }
     },
 
-    
+
     
     modifyHeaderCt: function() {
         var me = this;
         me.lockedGrid.headerCt.getMenuItems = me.getMenuItems(true);
         me.normalGrid.headerCt.getMenuItems = me.getMenuItems(false);
     },
-    
+
     onUnlockMenuClick: function() {
         this.unlock();
     },
-    
+
     onLockMenuClick: function() {
         this.lock();
     },
-    
+
     getMenuItems: function(locked) {
         var me            = this,
             unlockText    = me.unlockText,
             lockText      = me.lockText,
-            
-            unlockCls     = 'xg-hmenu-unlock',
-            lockCls       = 'xg-hmenu-lock',
+            unlockCls     = Ext.baseCSSPrefix + 'hmenu-unlock',
+            lockCls       = Ext.baseCSSPrefix + 'hmenu-lock',
             unlockHandler = Ext.Function.bind(me.onUnlockMenuClick, me),
             lockHandler   = Ext.Function.bind(me.onLockMenuClick, me);
-        
+
         
         return function() {
             var o = Ext.grid.header.Container.prototype.getMenuItems.call(this);
@@ -73977,7 +76354,7 @@ Ext.define('Ext.grid.Lockable', {
             return o;
         };
     },
-    
+
     
     
     lock: function(activeHd, toIdx) {
@@ -73986,18 +76363,19 @@ Ext.define('Ext.grid.Lockable', {
             lockedGrid = me.lockedGrid,
             normalHCt  = normalGrid.headerCt,
             lockedHCt  = lockedGrid.headerCt;
-            
+
         activeHd = activeHd || normalHCt.getMenu().activeHeader;
-        
+
         
         
         if (activeHd.flex) {
             activeHd.width = activeHd.getWidth();
             delete activeHd.flex;
         }
-        
+
         normalHCt.remove(activeHd, false);
         lockedHCt.suspendLayout = true;
+        activeHd.locked = true;
         if (Ext.isDefined(toIdx)) {
             lockedHCt.insert(toIdx, activeHd);
         } else {
@@ -74005,35 +76383,38 @@ Ext.define('Ext.grid.Lockable', {
         }
         lockedHCt.suspendLayout = false;
         me.syncLockedSection();
+
+        me.fireEvent('lockcolumn', me, activeHd);
     },
-    
+
     syncLockedSection: function() {
         var me = this;
         me.syncLockedWidth();
         me.lockedGrid.getView().refresh();
         me.normalGrid.getView().refresh();
     },
-    
+
     
     
     syncLockedWidth: function() {
         var me = this,
             width = me.lockedGrid.headerCt.getFullWidth(true);
-        me.lockedGrid.setWidth(width);
+        me.lockedGrid.setWidth(width+1); 
+        me.doComponentLayout();
     },
-    
+
     onLockedHeaderResize: function() {
         this.syncLockedWidth();
     },
-    
+
     onLockedHeaderHide: function() {
         this.syncLockedWidth();
     },
-    
+
     onLockedHeaderShow: function() {
         this.syncLockedWidth();
     },
-    
+
     onLockedHeaderSortChange: function(headerCt, header, sortState) {
         if (sortState) {
             
@@ -74041,7 +76422,7 @@ Ext.define('Ext.grid.Lockable', {
             this.normalGrid.headerCt.clearOtherSortStates(null, true);
         }
     },
-    
+
     onNormalHeaderSortChange: function(headerCt, header, sortState) {
         if (sortState) {
             
@@ -74049,7 +76430,7 @@ Ext.define('Ext.grid.Lockable', {
             this.lockedGrid.headerCt.clearOtherSortStates(null, true);
         }
     },
-    
+
     
     
     unlock: function(activeHd, toIdx) {
@@ -74063,30 +76444,97 @@ Ext.define('Ext.grid.Lockable', {
             toIdx = 0;
         }
         activeHd = activeHd || lockedHCt.getMenu().activeHeader;
-        
+
         lockedHCt.remove(activeHd, false);
         me.syncLockedWidth();
         me.lockedGrid.getView().refresh();
+        activeHd.locked = false;
         normalHCt.insert(toIdx, activeHd);
         me.normalGrid.getView().refresh();
+
+        me.fireEvent('unlockcolumn', me, activeHd);
     },
-    
+
+    applyColumnsState: function (columns) {
+        var me = this,
+            lockedGrid = me.lockedGrid,
+            lockedHeaderCt = lockedGrid.headerCt,
+            normalHeaderCt = me.normalGrid.headerCt,
+            lockedCols = lockedHeaderCt.items,
+            normalCols = normalHeaderCt.items,
+            existing,
+            locked = [],
+            normal = [],
+            lockedDefault,
+            lockedWidth = 1;
+
+        Ext.each(columns, function (col) {
+            function matches (item) {
+                return item.headerId == col.id;
+            }
+
+            lockedDefault = true;
+            if (!(existing = lockedCols.findBy(matches))) {
+                existing = normalCols.findBy(matches);
+                lockedDefault = false;
+            }
+
+            if (existing) {
+                if (existing.applyColumnState) {
+                    existing.applyColumnState(col);
+                }
+                if (!Ext.isDefined(existing.locked)) {
+                    existing.locked = lockedDefault;
+                }
+                if (existing.locked) {
+                    locked.push(existing);
+                    if (!existing.hidden && Ext.isNumber(existing.width)) {
+                        lockedWidth += existing.width;
+                    }
+                } else {
+                    normal.push(existing);
+                }
+            }
+        });
+
+        
+        if (locked.length + normal.length == lockedCols.getCount() + normalCols.getCount()) {
+            lockedHeaderCt.removeAll(false);
+            normalHeaderCt.removeAll(false);
+
+            lockedHeaderCt.add(locked);
+            normalHeaderCt.add(normal);
+
+            lockedGrid.setWidth(lockedWidth);
+        }
+    },
+
+    getColumnsState: function () {
+        var me = this,
+            locked = me.lockedGrid.headerCt.getColumnsState(),
+            normal = me.normalGrid.headerCt.getColumnsState();
+
+        return locked.concat(normal);
+    },
+
     
     reconfigureLockable: function(store, columns) {
         var me = this,
             lockedGrid = me.lockedGrid,
             normalGrid = me.normalGrid;
-        
+
         if (columns) {
+            lockedGrid.headerCt.suspendLayout = true;
+            normalGrid.headerCt.suspendLayout = true;
             lockedGrid.headerCt.removeAll();
             normalGrid.headerCt.removeAll();
-            
+
             columns = me.processColumns(columns);
             lockedGrid.setWidth(columns.lockedWidth);
             lockedGrid.headerCt.add(columns.locked);
             normalGrid.headerCt.add(columns.normal);
         }
-        
+
         if (store) {
             store = Ext.data.StoreManager.lookup(store);
             me.store = store;
@@ -74096,6 +76544,13 @@ Ext.define('Ext.grid.Lockable', {
             lockedGrid.getView().refresh();
             normalGrid.getView().refresh();
         }
+
+        if (columns) {
+            lockedGrid.headerCt.suspendLayout = false;
+            normalGrid.headerCt.suspendLayout = false;
+            lockedGrid.headerCt.forceComponentLayout();
+            normalGrid.headerCt.forceComponentLayout();
+        }
     }
 });
 
@@ -74104,7 +76559,7 @@ Ext.define('Ext.grid.Scroller', {
     extend: 'Ext.Component',
     alias: 'widget.gridscroller',
     weight: 110,
-    cls: Ext.baseCSSPrefix + 'scroller',
+    baseCls: Ext.baseCSSPrefix + 'scroller',
     focusable: false,
     reservedSpace: 0,
 
@@ -74117,23 +76572,21 @@ Ext.define('Ext.grid.Scroller', {
     initComponent: function() {
         var me       = this,
             dock     = me.dock,
-            cls      = Ext.baseCSSPrefix + 'scroller-vertical',
-            sizeProp = 'width';
+            cls      = Ext.baseCSSPrefix + 'scroller-vertical';
 
         me.offsets = {bottom: 0};
         me.scrollProp = 'scrollTop';
         me.vertical = true;
+        me.sizeProp = 'width';
 
         if (dock === 'top' || dock === 'bottom') {
             cls = Ext.baseCSSPrefix + 'scroller-horizontal';
-            sizeProp = 'height';
+            me.sizeProp = 'height';
             me.scrollProp = 'scrollLeft';
             me.vertical = false;
             me.weight += 5;
         }
 
-        me[sizeProp] = me.scrollerSize = Ext.getScrollbarSize()[sizeProp];
-
         me.cls += (' ' + cls);
 
         Ext.applyIf(me.renderSelectors, {
@@ -74142,6 +76595,13 @@ Ext.define('Ext.grid.Scroller', {
         });
         me.callParent();
     },
+    
+    ensureDimension: function(){
+        var me = this,
+            sizeProp = me.sizeProp;
+            
+        me[sizeProp] = me.scrollerSize = Ext.getScrollbarSize()[sizeProp];  
+    },
 
     initRenderData: function () {
         var me = this,
@@ -74375,8 +76835,8 @@ Ext.define('Ext.grid.PagingScroller', {
         var me = this,
             ds = me.store;
 
-        ds.on('guaranteedrange', this.onGuaranteedRange, this);
-        this.callParent(arguments);
+        ds.on('guaranteedrange', me.onGuaranteedRange, me);
+        me.callParent(arguments);
     },
 
     onGuaranteedRange: function(range, start, end) {
@@ -74394,12 +76854,15 @@ Ext.define('Ext.grid.PagingScroller', {
             if (me.rendered) {
                 me.invalidate();
             } else {
-                me.on('afterrender', this.invalidate, this, {single: true});
+                me.on('afterrender', me.invalidate, me, {single: true});
             }
             me.firstLoad = true;
         } else {
             
-            me.syncTo();
+            
+            if (me.scrollEl && me.scrollEl.dom && me.scrollEl.dom.scrollHeight) {
+                me.syncTo();
+            }
         }
     },
 
@@ -74414,6 +76877,7 @@ Ext.define('Ext.grid.PagingScroller', {
             clientHeight  = scrollerElDom.clientHeight,
             scrollTop     = scrollerElDom.scrollTop,
             useMaximum;
+            
 
         
         
@@ -74449,7 +76913,7 @@ Ext.define('Ext.grid.PagingScroller', {
             guaranteedStart = store.guaranteedStart,
             guaranteedEnd = store.guaranteedEnd,
             totalCount = store.getTotalCount(),
-            numFromEdge = Math.ceil(me.percentageFromEdge * store.pageSize),
+            numFromEdge = Math.ceil(me.percentageFromEdge * pageSize),
             position = t.scrollTop,
             visibleStart = Math.floor(position / me.rowHeight),
             view = panel.down('tableview'),
@@ -74457,30 +76921,41 @@ Ext.define('Ext.grid.PagingScroller', {
             visibleHeight = viewEl.getHeight(),
             visibleAhead = Math.ceil(visibleHeight / me.rowHeight),
             visibleEnd = visibleStart + visibleAhead,
-            prevPage = Math.floor(visibleStart / store.pageSize),
-            nextPage = Math.floor(visibleEnd / store.pageSize) + 2,
-            lastPage = Math.ceil(totalCount / store.pageSize),
-            
-            requestStart = Math.floor(visibleStart / me.snapIncrement) * me.snapIncrement,
+            prevPage = Math.floor(visibleStart / pageSize),
+            nextPage = Math.floor(visibleEnd / pageSize) + 2,
+            lastPage = Math.ceil(totalCount / pageSize),
+            snap = me.snapIncrement,
+            requestStart = Math.floor(visibleStart / snap) * snap,
             requestEnd = requestStart + pageSize - 1,
             activePrefetch = me.activePrefetch;
 
         me.visibleStart = visibleStart;
         me.visibleEnd = visibleEnd;
-
+        
+        
         me.syncScroll = true;
         if (totalCount >= pageSize) {
             
             if (requestEnd > totalCount - 1) {
-                this.cancelLoad();
+                me.cancelLoad();
                 if (store.rangeSatisfied(totalCount - pageSize, totalCount - 1)) {
                     me.syncScroll = true;
                 }
                 store.guaranteeRange(totalCount - pageSize, totalCount - 1);
             
-            } else if (visibleStart < guaranteedStart || visibleEnd > guaranteedEnd) {
+            } else if (visibleStart <= guaranteedStart || visibleEnd > guaranteedEnd) {
+                if (visibleStart <= guaranteedStart) {
+                    
+                    requestStart -= snap;
+                    requestEnd -= snap;
+                    
+                    if (requestStart < 0) {
+                        requestStart = 0;
+                        requestEnd = pageSize;
+                    }
+                }
                 if (store.rangeSatisfied(requestStart, requestEnd)) {
-                    this.cancelLoad();
+                    me.cancelLoad();
                     store.guaranteeRange(requestStart, requestEnd);
                 } else {
                     store.mask();
@@ -74505,20 +76980,21 @@ Ext.define('Ext.grid.PagingScroller', {
     getSizeCalculation: function() {
         
         
-        var owner = this.ownerGrid,
+        var me     = this,
+            owner  = me.ownerGrid,
             view   = owner.getView(),
-            store  = this.store,
-            dock   = this.dock,
-            elDom  = this.el.dom,
+            store  = me.store,
+            dock   = me.dock,
+            elDom  = me.el.dom,
             width  = 1,
             height = 1;
 
-        if (!this.rowHeight) {
-            this.rowHeight = view.el.down(view.getItemSelector()).getHeight(false, true);
+        if (!me.rowHeight) {
+            me.rowHeight = view.el.down(view.getItemSelector()).getHeight(false, true);
         }
 
         
-        height = store[(!store.remoteFilter && store.isFiltered()) ? 'getCount' : 'getTotalCount']() * this.rowHeight;
+        height = store[(!store.remoteFilter && store.isFiltered()) ? 'getCount' : 'getTotalCount']() * me.rowHeight;
 
         if (isNaN(width)) {
             width = 1;
@@ -74552,7 +77028,8 @@ Ext.define('Ext.grid.PagingScroller', {
     },
 
     setViewScrollTop: function(scrollTop, useMax) {
-        var owner = this.getPanel(),
+        var me = this,
+            owner = me.getPanel(),
             items = owner.query('tableview'),
             i = 0,
             len = items.length,
@@ -74560,15 +77037,15 @@ Ext.define('Ext.grid.PagingScroller', {
             centerEl,
             calcScrollTop,
             maxScrollTop,
-            scrollerElDom = this.el.dom;
+            scrollerElDom = me.el.dom;
 
         owner.virtualScrollTop = scrollTop;
 
         center = items[1] || items[0];
         centerEl = center.el.dom;
 
-        maxScrollTop = ((owner.store.pageSize * this.rowHeight) - centerEl.clientHeight);
-        calcScrollTop = (scrollTop % ((owner.store.pageSize * this.rowHeight) + 1));
+        maxScrollTop = ((owner.store.pageSize * me.rowHeight) - centerEl.clientHeight);
+        calcScrollTop = (scrollTop % ((owner.store.pageSize * me.rowHeight) + 1));
         if (useMax) {
             calcScrollTop = maxScrollTop;
         }
@@ -74583,6 +77060,7 @@ Ext.define('Ext.grid.PagingScroller', {
     }
 });
 
+
 Ext.define('Ext.panel.Table', {
     extend: 'Ext.panel.Panel',
 
@@ -74595,7 +77073,7 @@ Ext.define('Ext.panel.Table', {
         'Ext.grid.Lockable'
     ],
 
-    cls: Ext.baseCSSPrefix + 'grid',
+    extraBaseCls: Ext.baseCSSPrefix + 'grid',
     extraBodyCls: Ext.baseCSSPrefix + 'grid-body',
 
     layout: 'fit',
@@ -74603,10 +77081,25 @@ Ext.define('Ext.panel.Table', {
     hasView: false,
 
     
+    
     viewType: null,
+
+    
+
+    
+
+    
     selType: 'rowmodel',
 
     
+
+    
+
+    
+
+    
+
+    
     scrollDelta: 40,
 
     
@@ -74621,8 +77114,15 @@ Ext.define('Ext.panel.Table', {
     
 
     
+
+     deferRowRender: true,
+     
+    
     sortableColumns: true,
 
+    
+    enableLocking: false,
+
     verticalScrollDock: 'right',
     verticalScrollerType: 'gridscroller',
 
@@ -74655,20 +77155,14 @@ Ext.define('Ext.panel.Table', {
             view,
             border = me.border;
 
-        
-        
-        
-        
-        
-        
-        
-        me.injectView = Ext.Function.createThrottled(me.injectView, 30, me);
-
         if (me.hideHeaders) {
             border = false;
         }
 
         
+        me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');
+
+        
         
         if (headerCtCfg instanceof Ext.grid.header.Container) {
             me.headerCt = headerCtCfg;
@@ -74693,17 +77187,18 @@ Ext.define('Ext.panel.Table', {
 
              
              
-             if (Ext.ComponentQuery.query('{locked !== undefined}{processed != true}', me.columns).length) {
+             if (me.enableLocking || Ext.ComponentQuery.query('{locked !== undefined}{processed != true}', me.columns).length) {
                  me.self.mixin('lockable', Ext.grid.Lockable);
                  me.injectLockable();
              }
         }
 
-        me.store = Ext.data.StoreManager.lookup(me.store);
         me.addEvents(
             
             'reconfigure',
             
+            'viewready',
+            
             'scrollerhide',
             
             'scrollershow'
@@ -74711,6 +77206,9 @@ Ext.define('Ext.panel.Table', {
 
         me.bodyCls = me.bodyCls || '';
         me.bodyCls += (' ' + me.extraBodyCls);
+        
+        me.cls = me.cls || '';
+        me.cls += (' ' + me.extraBaseCls);
 
         
         delete me.autoScroll;
@@ -74770,9 +77268,12 @@ Ext.define('Ext.panel.Table', {
                 });
             }
 
-            me.headerCt.on('columnresize', me.onHeaderResize, me);
-            me.relayEvents(me.headerCt, ['columnresize', 'columnmove', 'columnhide', 'columnshow', 'sortchange']);
+            me.headerCt.on('resize', me.onHeaderResize, me);
+            me.relayHeaderCtEvents(me.headerCt);
             me.features = me.features || [];
+            if (!Ext.isArray(me.features)) {
+                me.features = [me.features];
+            }
             me.dockedItems = me.dockedItems || [];
             me.dockedItems.unshift(me.headerCt);
             me.viewConfig = me.viewConfig || {};
@@ -74782,80 +77283,119 @@ Ext.define('Ext.panel.Table', {
             
             view = me.getView();
 
-            if (view) {
-                me.mon(view.store, {
-                    load: me.onStoreLoad,
-                    scope: me
-                });
-                me.mon(view, {
-                    refresh: me.onViewRefresh,
-                    scope: me
-                });
-                this.relayEvents(view, [
-                    
-                    'beforeitemmousedown',
-                    
-                    'beforeitemmouseup',
-                    
-                    'beforeitemmouseenter',
-                    
-                    'beforeitemmouseleave',
-                    
-                    'beforeitemclick',
-                    
-                    'beforeitemdblclick',
-                    
-                    'beforeitemcontextmenu',
-                    
-                    'itemmousedown',
-                    
-                    'itemmouseup',
-                    
-                    'itemmouseenter',
+            view.on({
+                afterrender: function () {
                     
-                    'itemmouseleave',
+                    view.el.scroll = Ext.Function.bind(me.elScroll, me);
                     
-                    'itemclick',
                     
-                    'itemdblclick',
-                    
-                    'itemcontextmenu',
-                    
-                    'beforecontainermousedown',
-                    
-                    'beforecontainermouseup',
-                    
-                    'beforecontainermouseover',
-                    
-                    'beforecontainermouseout',
-                    
-                    'beforecontainerclick',
-                    
-                    'beforecontainerdblclick',
-                    
-                    'beforecontainercontextmenu',
-                    
-                    'containermouseup',
-                    
-                    'containermouseover',
-                    
-                    'containermouseout',
-                    
-                    'containerclick',
-                    
-                    'containerdblclick',
-                    
-                    'containercontextmenu',
+                    me.mon(view.el, {
+                        mousewheel: me.onMouseWheel,
+                        scope: me
+                    });
+                },
+                single: true
+            });
+            me.items = [view];
+            me.hasView = true;
 
-                    
-                    'selectionchange',
-                    
-                    'beforeselect'
-                ]);
-            }
+            me.mon(view.store, {
+                load: me.onStoreLoad,
+                scope: me
+            });
+            me.mon(view, {
+                viewReady: me.onViewReady,
+                resize: me.onViewResize,
+                refresh: {
+                    fn: me.onViewRefresh,
+                    scope: me,
+                    buffer: 50
+                },
+                scope: me
+            });
+            this.relayEvents(view, [
+                
+                'beforeitemmousedown',
+                
+                'beforeitemmouseup',
+                
+                'beforeitemmouseenter',
+                
+                'beforeitemmouseleave',
+                
+                'beforeitemclick',
+                
+                'beforeitemdblclick',
+                
+                'beforeitemcontextmenu',
+                
+                'itemmousedown',
+                
+                'itemmouseup',
+                
+                'itemmouseenter',
+                
+                'itemmouseleave',
+                
+                'itemclick',
+                
+                'itemdblclick',
+                
+                'itemcontextmenu',
+                
+                'beforecontainermousedown',
+                
+                'beforecontainermouseup',
+                
+                'beforecontainermouseover',
+                
+                'beforecontainermouseout',
+                
+                'beforecontainerclick',
+                
+                'beforecontainerdblclick',
+                
+                'beforecontainercontextmenu',
+                
+                'containermouseup',
+                
+                'containermouseover',
+                
+                'containermouseout',
+                
+                'containerclick',
+                
+                'containerdblclick',
+                
+                'containercontextmenu',
+                
+                'selectionchange',
+                
+                'beforeselect',
+                
+                'select',
+                
+                'beforedeselect',
+                
+                'deselect'
+            ]);
         }
+
         me.callParent(arguments);
     },
+    
+    onRender: function(){
+        var vScroll = this.verticalScroller,
+            hScroll = this.horizontalScroller;
+
+        if (vScroll) {
+            vScroll.ensureDimension();
+        }
+        if (hScroll) {
+            hScroll.ensureDimension();
+        }
+        this.callParent(arguments);    
+    },
 
     
     initStateEvents: function(){
@@ -74896,40 +77436,27 @@ Ext.define('Ext.panel.Table', {
         return ret;
     },
 
-    getState: function(){
-        var state = this.callParent(),
-            sorter = this.store.sorters.first(),
-            headers = this.headerCt.items.items,
-            header,
-            len = headers.length,
-            i = 0;
-
-        state.columns = [];
-        for (; i < len; i++) {
-            header = headers[i];
-            state.columns[i] = {
-                id: header.headerId
-            };
-
+    relayHeaderCtEvents: function (headerCt) {
+        this.relayEvents(headerCt, [
             
+            'columnresize',
             
+            'columnmove',
             
-            if (header.hidden !== (header.initialConfig.hidden||header.self.prototype.hidden)) {
-                state.columns[i].hidden = header.hidden;
-            }
-            if (header.sortable !== header.initialConfig.sortable) {
-                state.columns[i].sortable = header.sortable;
-            }
-            if (header.flex) {
-                if (header.flex !== header.initialConfig.flex) {
-                    state.columns[i].flex = header.flex;
-                }
-            } else {
-                if (header.width !== header.initialConfig.width) {
-                    state.columns[i].width = header.width;
-                }
-            }
-        }
+            'columnhide',
+            
+            'columnshow',
+            
+            'sortchange'
+        ]);
+    },
+
+    getState: function(){
+        var me = this,
+            state = me.callParent(),
+            sorter = me.store.sorters.first();
+
+        state.columns = (me.headerCt || me).getColumnsState();
 
         if (sorter) {
             state.sort = {
@@ -74937,60 +77464,25 @@ Ext.define('Ext.panel.Table', {
                 direction: sorter.direction
             };
         }
+
         return state;
     },
 
     applyState: function(state) {
-        var headers = state.columns,
-            length = headers ? headers.length : 0,
-            headerCt = this.headerCt,
-            items = headerCt.items,
+        var me = this,
             sorter = state.sort,
-            store = this.store,
-            i = 0,
-            index,
-            headerState,
-            header;
+            store = me.store,
+            columns = state.columns;
 
-        headerCt.suspendLayout = true;
+        delete state.columns;
 
         
         
-        this.callParent(arguments);
-
-        for (; i < length; ++i) {
-            headerState = headers[i];
-            header = headerCt.down('gridcolumn[headerId=' + headerState.id + ']');
-            index = items.indexOf(header);
-            if (i !== index) {
-                headerCt.moveHeader(index, i);
-            }
+        me.callParent(arguments);
 
-            
-            
-            if (Ext.isDefined(headerState.hidden)) {
-                header.hidden = headerState.hidden;
-            }
-            if (Ext.isDefined(headerState.sortable)) {
-                header.sortable = headerState.sortable;
-            }
-            if (Ext.isDefined(headerState.flex)) {
-                delete header.width;
-                header.flex = headerState.flex;
-            } else if (Ext.isDefined(headerState.width)) {
-                delete header.flex;
-                header.minWidth = headerState.width;
-                if (header.rendered) {
-                    header.setWidth(headerState.width);
-                } else {
-                    header.width = headerState.width;
-                }
-            }
+        if (columns) {
+            (me.headerCt || me).applyColumnsState(columns);
         }
-        headerCt.suspendLayout = false;
-
-        
-        headerCt.doLayout();
 
         if (sorter) {
             if (store.remoteSort) {
@@ -75018,7 +77510,7 @@ Ext.define('Ext.panel.Table', {
         if (!me.view) {
             sm = me.getSelectionModel();
             me.view = me.createComponent(Ext.apply({}, me.viewConfig, {
-                deferRowRender: me.deferRowRender,
+                deferInitialRefresh: me.deferRowRender,
                 xtype: me.viewType,
                 store: me.store,
                 headerCt: me.headerCt,
@@ -75050,58 +77542,24 @@ Ext.define('Ext.panel.Table', {
         if (direction === "up" || direction === "left") {
             distance = -distance;
         }
-
+        
         if (direction === "down" || direction === "up") {
             scroller = me.getVerticalScroller();
-            scroller.scrollByDeltaY(distance);
+            
+            
+            if (scroller) {
+                scroller.scrollByDeltaY(distance);
+            }
         } else {
             scroller = me.getHorizontalScroller();
-            scroller.scrollByDeltaX(distance);
-        }
-    },
-
-    
-    injectView: function() {
-        if (!this.hasView && !this.collapsed) {
-            var me   = this,
-                view = me.getView();
-
-            me.hasView = true;
-            me.add(view);
-
-            function viewReady () {
-                
-                view.el.scroll = Ext.Function.bind(me.elScroll, me);
-                
-                
-                me.mon(view.el, {
-                    mousewheel: me.onMouseWheel,
-                    scope: me
-                });
-                if (!me.height) {
-                    me.doComponentLayout();
-                }
-            }
-
-            if (view.rendered) {
-                viewReady();
-            } else {
-                view.on({
-                    afterrender: viewReady,
-                    single: true
-                });
+            
+            
+            if (scroller) {
+                scroller.scrollByDeltaX(distance);
             }
         }
     },
 
-    afterExpand: function() {
-        
-        this.callParent(arguments);
-        if (!this.hasView) {
-            this.injectView();
-        }
-    },
-
     
     processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
         var me = this,
@@ -75115,7 +77573,13 @@ Ext.define('Ext.panel.Table', {
 
     
     determineScrollbars: function() {
+        
+        if (this.determineScrollbarsRunning) {
+            return;
+        }
+        this.determineScrollbarsRunning = true;
         var me = this,
+            view = me.view,
             box,
             tableEl,
             scrollWidth,
@@ -75129,11 +77593,12 @@ Ext.define('Ext.panel.Table', {
             reqScrollbars = 0; 
 
         
-        if (!me.collapsed && me.view && me.view.el && me.view.el.dom.firstChild) {
+        if (!me.collapsed && view && view.viewReady) {
 
             
             
-            box = me.layout.getLayoutTargetSize();
+            box = view.el.getSize();
+
             clientWidth  = box.width  + ((curScrollbars & 1) ? verticalScroller.width : 0);
             clientHeight = box.height + ((curScrollbars & 2) ? horizontalScroller.height : 0);
 
@@ -75146,7 +77611,7 @@ Ext.define('Ext.panel.Table', {
             if (verticalScroller && verticalScroller.el) {
                 scrollHeight = verticalScroller.getSizeCalculation().height;
             } else {
-                tableEl = me.view.el.child('table', true);
+                tableEl = view.el.child('table', true);
                 scrollHeight = tableEl ? tableEl.offsetHeight : 0;
             }
 
@@ -75193,30 +77658,26 @@ Ext.define('Ext.panel.Table', {
                 me.suspendLayout = false;
 
                 
+                me.doComponentLayout();
                 
-                me.changingScrollBars = true;
-                me.doComponentLayout(me.getWidth(), me.getHeight(), false, me.ownerCt);
-                me.changingScrollBars = false;
+                me.getLayout().layout();
             }
         }
+        delete me.determineScrollbarsRunning;
     },
 
-    afterComponentLayout: function() {
-        var me = this;
-        me.callParent(arguments);
-
-        
-        me.injectView();
+    onViewResize: function() {
+        this.determineScrollbars();
+    },
 
-        
-        if (!me.changingScrollBars) {
-            me.determineScrollbars();
-        }
-        me.invalidateScroller();
+    afterComponentLayout: function() {
+        this.callParent(arguments);
+        this.determineScrollbars();
+        this.invalidateScroller();
     },
 
     onHeaderResize: function() {
-        if (this.view && this.view.rendered) {
+        if (!this.componentLayout.layoutBusy && this.view && this.view.rendered) {
             this.determineScrollbars();
             this.invalidateScroller();
         }
@@ -75302,7 +77763,9 @@ Ext.define('Ext.panel.Table', {
         
         if (layout && layout.reserveOffset !== reserveOffset) {
             layout.reserveOffset = reserveOffset;
-            headerCt.doLayout();
+            if (!this.suspendLayout) {
+                headerCt.doLayout();
+            }
         }
     },
 
@@ -75346,7 +77809,7 @@ Ext.define('Ext.panel.Table', {
         var me = this,
             vertScroller = me.getVerticalScroller(),
             horizScroller = me.getHorizontalScroller(),
-            scrollDelta = me.scrollDelta / -5,
+            scrollDelta = -me.scrollDelta,
             deltas = e.getWheelDeltas(),
             deltaX = scrollDelta * deltas.x,
             deltaY = scrollDelta * deltas.y,
@@ -75388,10 +77851,25 @@ Ext.define('Ext.panel.Table', {
     },
 
     
+    onViewReady: function() {
+        var me = this;
+        me.fireEvent('viewready', me);
+        if (me.deferRowRender) {
+            me.determineScrollbars();
+            me.invalidateScroller();
+        }
+    },
+
+    
     onViewRefresh: function() {
-        this.determineScrollbars();
-        if (this.invalidateScrollerOnRefresh) {
-            this.invalidateScroller();
+        var me = this;
+
+        
+        if (!me.rendering) {
+            this.determineScrollbars();
+            if (this.invalidateScrollerOnRefresh) {
+                this.invalidateScroller();
+            }
         }
     },
 
@@ -75426,7 +77904,7 @@ Ext.define('Ext.panel.Table', {
 
     
     scrollByDeltaX: function(deltaX) {
-        var horizontalScroller = this.getVerticalScroller();
+        var horizontalScroller = this.getHorizontalScroller();
 
         if (horizontalScroller) {
             horizontalScroller.scrollByDeltaX(deltaX);
@@ -75438,7 +77916,7 @@ Ext.define('Ext.panel.Table', {
         var me = this;
 
         if (!me.lhsMarker) {
-            me.lhsMarker = Ext.core.DomHelper.append(me.el, {
+            me.lhsMarker = Ext.DomHelper.append(me.el, {
                 cls: Ext.baseCSSPrefix + 'grid-resize-marker'
             }, true);
         }
@@ -75450,7 +77928,7 @@ Ext.define('Ext.panel.Table', {
         var me = this;
 
         if (!me.rhsMarker) {
-            me.rhsMarker = Ext.core.DomHelper.append(me.el, {
+            me.rhsMarker = Ext.DomHelper.append(me.el, {
                 cls: Ext.baseCSSPrefix + 'grid-resize-marker'
             }, true);
         }
@@ -75528,6 +78006,14 @@ Ext.define('Ext.panel.Table', {
         me.store = store;
         me.getView().bindStore(store);
     },
+    
+    beforeDestroy: function(){
+        
+        
+        
+        Ext.destroy(this.horizontalScroller, this.verticalScroller);
+        this.callParent();
+    },
 
     
     reconfigure: function(store, columns) {
@@ -75537,12 +78023,10 @@ Ext.define('Ext.panel.Table', {
         if (me.lockable) {
             me.reconfigureLockable(store, columns);
         } else {
-            headerCt.suspendLayout = true;
-            headerCt.removeAll();
             if (columns) {
+                headerCt.suspendLayout = true;
+                headerCt.removeAll();
                 headerCt.add(columns);
-            } else {
-                headerCt.doLayout();
             }
             if (store) {
                 store = Ext.StoreManager.lookup(store);
@@ -75551,6 +78035,7 @@ Ext.define('Ext.panel.Table', {
                 me.getView().refresh();
             }
             if (columns) {
+                headerCt.suspendLayout = false;
                 me.forceComponentLayout();
             }
         }
@@ -75567,7 +78052,7 @@ Ext.define('Ext.view.Table', {
         'Ext.util.MixedCollection'
     ],
 
-    cls: Ext.baseCSSPrefix + 'grid-view',
+    baseCls: Ext.baseCSSPrefix + 'grid-view',
 
     
     itemSelector: '.' + Ext.baseCSSPrefix + 'grid-row',
@@ -75591,15 +78076,6 @@ Ext.define('Ext.view.Table', {
     initComponent: function() {
         var me = this;
 
-        if (me.deferRowRender !== false) {
-            me.refresh = function() {
-                delete me.refresh;
-                setTimeout(function() {
-                    me.refresh();
-                }, 0);
-            };
-        }
-
         me.scrollState = {};
         me.selModel.view = me;
         me.headerCt.view = me;
@@ -75805,7 +78281,9 @@ Ext.define('Ext.view.Table', {
             el.select('.' + Ext.baseCSSPrefix + 'grid-col-resizer-'+header.id).setWidth(w);
             el.select('.' + Ext.baseCSSPrefix + 'grid-table-resizer').setWidth(me.headerCt.getFullWidth());
             me.restoreScrollState();
-            me.setNewTemplate();
+            if (!me.ignoreTemplate) {
+                me.setNewTemplate();
+            }
             if (!suppressFocus) {
                 me.el.focus();
             }
@@ -75814,17 +78292,20 @@ Ext.define('Ext.view.Table', {
 
     
     onHeaderShow: function(headerCt, header, suppressFocus) {
+        var me = this;
+        me.ignoreTemplate = true;
         
         if (header.oldWidth) {
-            this.onHeaderResize(header, header.oldWidth, suppressFocus);
+            me.onHeaderResize(header, header.oldWidth, suppressFocus);
             delete header.oldWidth;
         
         
         
         } else if (header.width && !header.flex) {
-            this.onHeaderResize(header, header.width, suppressFocus);
+            me.onHeaderResize(header, header.width, suppressFocus);
         }
-        this.setNewTemplate();
+        delete me.ignoreTemplate;
+        me.setNewTemplate();
     },
 
     
@@ -76016,21 +78497,25 @@ Ext.define('Ext.view.Table', {
 
     
     saveScrollState: function() {
-        var dom = this.el.dom,
-            state = this.scrollState;
-
-        state.left = dom.scrollLeft;
-        state.top = dom.scrollTop;
+        if (this.rendered) {
+            var dom = this.el.dom, 
+                state = this.scrollState;
+            
+            state.left = dom.scrollLeft;
+            state.top = dom.scrollTop;
+        }
     },
 
     
     restoreScrollState: function() {
-        var dom = this.el.dom,
-            state = this.scrollState,
-            headerEl = this.headerCt.el.dom;
-
-        headerEl.scrollLeft = dom.scrollLeft = state.left;
-        dom.scrollTop = state.top;
+        if (this.rendered) {
+            var dom = this.el.dom, 
+                state = this.scrollState, 
+                headerEl = this.headerCt.el.dom;
+            
+            headerEl.scrollLeft = dom.scrollLeft = state.left;
+            dom.scrollTop = state.top;
+        }
     },
 
     
@@ -76363,15 +78848,15 @@ Ext.define('Ext.grid.View', {
 
     
     stripeRows: true,
-    
+
     invalidateScrollerOnRefresh: true,
-    
+
     
     scrollToTop : function(){
         if (this.rendered) {
             var section = this.ownerCt,
                 verticalScroller = section.verticalScroller;
-                
+
             if (verticalScroller) {
                 verticalScroller.scrollToTop();
             }
@@ -76383,19 +78868,19 @@ Ext.define('Ext.grid.View', {
         this.callParent(arguments);
         this.doStripeRows(index);
     },
-    
+
     
     onRemove: function(ds, records, index) {
         this.callParent(arguments);
         this.doStripeRows(index);
     },
-    
+
     onUpdate: function(ds, record, operation) {
         var index = ds.indexOf(record);
         this.callParent(arguments);
         this.doStripeRows(index, index);
     },
-    
+
     
     doStripeRows: function(startRow, endRow) {
         
@@ -76404,7 +78889,7 @@ Ext.define('Ext.grid.View', {
                 rowsLn = rows.length,
                 i      = 0,
                 row;
-                
+
             for (; i < rowsLn; i++) {
                 row = rows[i];
                 
@@ -76417,7 +78902,7 @@ Ext.define('Ext.grid.View', {
             }
         }
     },
-    
+
     refresh: function(firstPass) {
         this.callParent(arguments);
         this.doStripeRows(0);
@@ -76436,31 +78921,31 @@ Ext.define('Ext.grid.Panel', {
     alias: ['widget.gridpanel', 'widget.grid'],
     alternateClassName: ['Ext.list.ListView', 'Ext.ListView', 'Ext.grid.GridPanel'],
     viewType: 'gridview',
-    
+
     lockable: false,
-    
+
     
     
     normalCfgCopy: ['invalidateScrollerOnRefresh', 'verticalScroller', 'verticalScrollDock', 'verticalScrollerType', 'scroll'],
     lockedCfgCopy: ['invalidateScrollerOnRefresh'],
+
     
-    
-    
+
     initComponent: function() {
         var me = this;
 
         if (me.columnLines) {
             me.setColumnLines(me.columnLines);
         }
-        
+
         me.callParent();
     },
-    
+
     setColumnLines: function(show) {
         var me = this,
             method = (show) ? 'addClsWithUI' : 'removeClsWithUI';
-        
-        me[method]('with-col-lines')
+
+        me[method]('with-col-lines');
     }
 });
 
@@ -76472,6 +78957,7 @@ Ext.define('Ext.grid.Panel', {
 
 
 
+
 Ext.define('Ext.grid.RowEditor', {
     extend: 'Ext.form.Panel',
     requires: [
@@ -76885,7 +79371,9 @@ Ext.define('Ext.grid.RowEditor', {
         
         
         me.columns.add(field.id, column);
-        
+        if (column.hidden) {
+            me.onColumnHide(column);
+        }
         if (me.isVisible() && me.context) {
             me.renderColumnData(field, me.context.record);
         }
@@ -77234,6 +79722,55 @@ Ext.define('Ext.grid.header.Container', {
         Ext.destroy(this.resizer, this.reorderer);
         this.callParent();
     },
+    
+    applyDefaults: function(config){
+        
+        if (config && !config.isComponent && config.xtype == 'rownumberer') {
+            return config;
+        }
+        return this.callParent([config]);
+    },
+
+    applyColumnsState: function(columns) {
+        if (!columns || !columns.length) {
+            return;
+        }
+
+        var me = this,
+            i = 0,
+            index,
+            col;
+
+        Ext.each(columns, function (columnState) {
+            col = me.down('gridcolumn[headerId=' + columnState.id + ']');
+            if (col) {
+                index = me.items.indexOf(col);
+                if (i !== index) {
+                    me.moveHeader(index, i);
+                }
+
+                if (col.applyColumnState) {
+                    col.applyColumnState(columnState);
+                }
+                ++i;
+            }
+        });
+    },
+
+    getColumnsState: function () {
+        var me = this,
+            columns = [],
+            state;
+
+        me.items.each(function (col) {
+            state = col.getColumnState && col.getColumnState();
+            if (state) {
+                columns.push(state);
+            }
+        });
+
+        return columns;
+    },
 
     
     
@@ -77241,7 +79778,7 @@ Ext.define('Ext.grid.header.Container', {
     onAdd: function(c) {
         var me = this;
         if (!c.headerId) {
-            c.headerId = 'h' + (++me.headerCounter);
+            c.headerId = c.initialConfig.id || ('h' + (++me.headerCounter));
         }
         me.callParent(arguments);
         me.purgeCache();
@@ -77297,14 +79834,14 @@ Ext.define('Ext.grid.header.Container', {
                         me.pastLastHeaderEl.removeCls(me.lastHeaderCls);
                     }
                     lastHeaderEl.addCls(me.lastHeaderCls);
-                    me.pastLastHeaderEl = lastHeaderEl
+                    me.pastLastHeaderEl = lastHeaderEl;
                 }
             }
         }
 
     },
 
-    onHeaderShow: function(header) {
+    onHeaderShow: function(header, preventLayout) {
         
         var me = this,
             gridSection = me.ownerCt,
@@ -77355,7 +79892,20 @@ Ext.define('Ext.grid.header.Container', {
         me.fireEvent('columnshow', me, header);
 
         
-        me.doLayout();
+        if (preventLayout !== true) {
+            me.doLayout();
+        }
+    },
+
+    doComponentLayout: function(){
+        var me = this;
+        if (me.view && me.view.saveScrollState) {
+            me.view.saveScrollState();
+        }
+        me.callParent(arguments);
+        if (me.view && me.view.restoreScrollState) {
+            me.view.restoreScrollState();
+        }
     },
 
     onHeaderHide: function(header, suppressLayout) {
@@ -77441,7 +79991,6 @@ Ext.define('Ext.grid.header.Container', {
         if (this.view && this.view.rendered) {
             this.view.onHeaderResize(header, w, suppressFocus);
         }
-        this.fireEvent('columnresize', this, header, w);
     },
 
     onHeaderClick: function(header, e, t) {
@@ -77495,6 +80044,7 @@ Ext.define('Ext.grid.header.Container', {
         var me = this;
         
         delete me.gridDataColumns;
+        delete me.hideableColumns;
 
         
         if (me.menu) {
@@ -77507,7 +80057,7 @@ Ext.define('Ext.grid.header.Container', {
         var me = this,
             gridSection = me.ownerCt;
 
-        if (gridSection) {
+        if (gridSection && gridSection.onHeaderMove) {
             gridSection.onHeaderMove(me, header, fromIdx, toIdx);
         }
         me.fireEvent("columnmove", me, header, fromIdx, toIdx);
@@ -77542,17 +80092,17 @@ Ext.define('Ext.grid.header.Container', {
             menuItems = [{
                 itemId: 'ascItem',
                 text: me.sortAscText,
-                cls: 'xg-hmenu-sort-asc',
+                cls: Ext.baseCSSPrefix + 'hmenu-sort-asc',
                 handler: me.onSortAscClick,
                 scope: me
             },{
                 itemId: 'descItem',
                 text: me.sortDescText,
-                cls: 'xg-hmenu-sort-desc',
+                cls: Ext.baseCSSPrefix + 'hmenu-sort-desc',
                 handler: me.onSortDescClick,
                 scope: me
             }];
-        };
+        }
         if (hideableColumns && hideableColumns.length) {
             menuItems.push('-', {
                 itemId: 'columnItem',
@@ -77631,14 +80181,14 @@ Ext.define('Ext.grid.header.Container', {
         for (; i < headersLn; i++) {
             header = headers[i];
 
-            if (header.hidden) {
+            if (header.hidden || header.up('headercontainer[hidden=true]')) {
                 width = 0;
             } else {
                 width = header.getDesiredWidth();
                 
                 
                 
-                if ((i == 0) && (Ext.isIE6 || Ext.isIE7)) {
+                if ((i === 0) && (Ext.isIE6 || Ext.isIE7)) {
                     width += 1;
                 }
             }
@@ -77723,6 +80273,17 @@ Ext.define('Ext.grid.header.Container', {
     },
 
     
+    getHideableColumns: function(refreshCache) {
+        var me = this,
+            result = refreshCache ? null : me.hideableColumns;
+
+        if (!result) {
+            result = me.hideableColumns = me.query('[hideable]');
+        }
+        return result;
+    },
+
+    
     getHeaderIndex: function(header) {
         var columns = this.getGridColumns();
         return Ext.Array.indexOf(columns, header);
@@ -77817,11 +80378,13 @@ Ext.define('Ext.grid.column.Column', {
     possibleSortStates: ['ASC', 'DESC'],
 
     renderTpl:
-        '<div class="' + Ext.baseCSSPrefix + 'column-header-inner">' +
-            '<span class="' + Ext.baseCSSPrefix + 'column-header-text">' +
+        '<div id="{id}-titleContainer" class="' + Ext.baseCSSPrefix + 'column-header-inner">' +
+            '<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'column-header-text">' +
                 '{text}' +
             '</span>' +
-            '<tpl if="!values.menuDisabled"><div class="' + Ext.baseCSSPrefix + 'column-header-trigger"></div></tpl>' +
+            '<tpl if="!values.menuDisabled">'+
+                '<div id="{id}-triggerEl" class="' + Ext.baseCSSPrefix + 'column-header-trigger"></div>'+
+            '</tpl>' +
         '</div>',
 
     
@@ -77830,7 +80393,7 @@ Ext.define('Ext.grid.column.Column', {
     dataIndex: null,
 
     
-    text: '&#160',
+    text: '&#160;',
 
     
     sortable: true,
@@ -77838,7 +80401,7 @@ Ext.define('Ext.grid.column.Column', {
     
 
     
-     
+
     
 
     
@@ -77867,12 +80430,17 @@ Ext.define('Ext.grid.column.Column', {
     
 
     
+
+    
+
+    
     isHeader: true,
 
     initComponent: function() {
         var me = this,
             i,
-            len;
+            len,
+            item;
 
         if (Ext.isDefined(me.header)) {
             me.text = me.header;
@@ -77908,21 +80476,20 @@ Ext.define('Ext.grid.column.Column', {
 
             
             for (i = 0, len = me.items.length; i < len; i++) {
-                me.width += me.items[i].width || Ext.grid.header.Container.prototype.defaultWidth;
+                item = me.items[i];
+                if (!item.hidden) {
+                    me.width += item.width || Ext.grid.header.Container.prototype.defaultWidth;
+                }
             }
             me.minWidth = me.width;
 
             me.cls = (me.cls||'') + ' ' + Ext.baseCSSPrefix + 'group-header';
             me.sortable = false;
-            me.fixed = true;
+            me.resizable = false;
             me.align = 'center';
         }
 
-        Ext.applyIf(me.renderSelectors, {
-            titleContainer: '.' + Ext.baseCSSPrefix + 'column-header-inner',
-            triggerEl: '.' + Ext.baseCSSPrefix + 'column-header-trigger',
-            textEl: '.' + Ext.baseCSSPrefix + 'column-header-text'
-        });
+        me.addChildEls('titleContainer', 'triggerEl', 'textEl');
 
         
         me.callParent(arguments);
@@ -77931,11 +80498,13 @@ Ext.define('Ext.grid.column.Column', {
     onAdd: function(childHeader) {
         childHeader.isSubHeader = true;
         childHeader.addCls(Ext.baseCSSPrefix + 'group-sub-header');
+        this.callParent(arguments);
     },
 
     onRemove: function(childHeader) {
         childHeader.isSubHeader = false;
         childHeader.removeCls(Ext.baseCSSPrefix + 'group-sub-header');
+        this.callParent(arguments);
     },
 
     initRenderData: function() {
@@ -77948,6 +80517,60 @@ Ext.define('Ext.grid.column.Column', {
         return me.callParent(arguments);
     },
 
+    applyColumnState: function (state) {
+        var me = this,
+            defined = Ext.isDefined;
+            
+        
+        me.applyColumnsState(state.columns);
+
+        
+        
+        if (defined(state.hidden)) {
+            me.hidden = state.hidden;
+        }
+        if (defined(state.locked)) {
+            me.locked = state.locked;
+        }
+        if (defined(state.sortable)) {
+            me.sortable = state.sortable;
+        }
+        if (defined(state.width)) {
+            delete me.flex;
+            me.width = state.width;
+        } else if (defined(state.flex)) {
+            delete me.width;
+            me.flex = state.flex;
+        }
+    },
+
+    getColumnState: function () {
+        var me = this,
+            columns = [],
+            state = {
+                id: me.headerId
+            };
+
+        me.savePropsToState(['hidden', 'sortable', 'locked', 'flex', 'width'], state);
+        
+        if (me.isGroupHeader) {
+            me.items.each(function(column){
+                columns.push(column.getColumnState());
+            });
+            if (columns.length) {
+                state.columns = columns;
+            }
+        } else if (me.isSubHeader && me.ownerCt.hidden) {
+            
+            delete me.hidden;
+        }
+
+        if ('width' in state) {
+            delete state.flex; 
+        }
+        return state;
+    },
+
     
     setText: function(text) {
         this.text = text;
@@ -77967,6 +80590,18 @@ Ext.define('Ext.grid.column.Column', {
         return this.isGroupColumn ? false : this.getOwnerHeaderCt().getHeaderIndex(this);
     },
 
+    onRender: function() {
+        var me = this,
+            grid = me.up('tablepanel');
+
+        
+        
+        if (grid && (!me.sortable || grid.sortableColumns === false) && !me.groupable && !me.lockable && (grid.enableColumnHide === false || !me.getOwnerHeaderCt().getHideableColumns().length)) {
+            me.menuDisabled = true;
+        }
+        me.callParent(arguments);
+    },
+
     afterRender: function() {
         var me = this,
             el = me.el;
@@ -78004,44 +80639,39 @@ Ext.define('Ext.grid.column.Column', {
         });
     },
 
-    setSize: function(width, height) {
+    
+    setWidth: function(width,  doLayout) {
         var me = this,
             headerCt = me.ownerCt,
-            ownerHeaderCt = me.getOwnerHeaderCt(),
             siblings,
             len, i,
             oldWidth = me.getWidth(),
-            newWidth = 0,
-            readyForSizing = true,
-            hidden,
+            groupWidth = 0,
             sibling;
 
         if (width !== oldWidth) {
+            me.oldWidth = oldWidth;
+
+            
+            
+            me.minWidth = me.width = width;
 
             
             if (headerCt.isGroupHeader) {
                 siblings = headerCt.items.items;
                 len = siblings.length;
 
-                
                 for (i = 0; i < len; i++) {
                     sibling = siblings[i];
-                    hidden = sibling.hidden;
-                    if (!sibling.rendered && !hidden) {
-                        readyForSizing = false;
-                        break;
-                    }
-                    if (!hidden) {
-                        newWidth += (sibling === me) ? width : sibling.getWidth();
+                    if (!sibling.hidden) {
+                        groupWidth += (sibling === me) ? width : sibling.getWidth();
                     }
                 }
-
-                if (readyForSizing) {
-                    headerCt.minWidth = newWidth;
-                    headerCt.setWidth(newWidth);
-                }
+                headerCt.setWidth(groupWidth, doLayout);
+            } else if (doLayout !== false) {
+                
+                headerCt.doLayout();
             }
-            me.callParent(arguments);
         }
     },
 
@@ -78057,18 +80687,21 @@ Ext.define('Ext.grid.column.Column', {
         if (width && !me.isGroupHeader && ownerHeaderCt) {
             ownerHeaderCt.onHeaderResize(me, width, true);
         }
+        if (me.oldWidth && (width !== me.oldWidth)) {
+            ownerHeaderCt.fireEvent('columnresize', ownerHeaderCt, this, width);
+        }
+        delete me.oldWidth;
     },
 
     
     
-    setPadding: function() {
+    
+    setPadding: function(headerHeight) {
         var me = this,
-            headerHeight,
-            lineHeight = parseInt(me.textEl.getStyle('line-height'), 10);
+            lineHeight = Ext.util.TextMetrics.measure(me.textEl.dom, me.text).height;
 
         
         if (!me.isGroupHeader) {
-            headerHeight = me.el.getViewSize().height;
             if (me.titleContainer.getHeight() < headerHeight) {
                 me.titleContainer.dom.style.height = headerHeight + 'px';
             }
@@ -78090,7 +80723,8 @@ Ext.define('Ext.grid.column.Column', {
 
     onDestroy: function() {
         var me = this;
-        Ext.destroy(me.keyNav);
+        
+        Ext.destroy(me.textEl, me.keyNav);
         delete me.keyNav;
         me.callParent(arguments);
     },
@@ -78259,22 +80893,30 @@ Ext.define('Ext.grid.column.Column', {
 
     show: function() {
         var me = this,
-            ownerCt = me.getOwnerHeaderCt(),
-            lb,
+            ownerCt = me.ownerCt,
+            ownerCtCompLayout = ownerCt.componentLayout,
+            ownerCtCompLayoutBusy = ownerCtCompLayout.layoutBusy,
+            ownerCtLayout = ownerCt.layout,
+            ownerCtLayoutBusy = ownerCtLayout.layoutBusy,
             items,
             len, i,
+            item,
             newWidth = 0;
 
         
-        lb = me.ownerCt.componentLayout.layoutBusy;
-        me.ownerCt.componentLayout.layoutBusy = true;
+
+        
+        ownerCtCompLayout.layoutBusy = ownerCtLayout.layoutBusy = true;
+
         me.callParent(arguments);
-        me.ownerCt.componentLayout.layoutBusy = lb;
+
+        ownerCtCompLayout.layoutBusy = ownerCtCompLayoutBusy;
+        ownerCtLayout.layoutBusy = ownerCtLayoutBusy;
 
         
         if (me.isSubHeader) {
-            if (!me.ownerCt.isVisible()) {
-                me.ownerCt.show();
+            if (!ownerCt.isVisible()) {
+                ownerCt.show();
             }
         }
 
@@ -78282,23 +80924,29 @@ Ext.define('Ext.grid.column.Column', {
         if (me.isGroupHeader && !me.query(':not([hidden])').length) {
             items = me.query('>*');
             for (i = 0, len = items.length; i < len; i++) {
-                items[i].show();
+                item = items[i];
+                item.preventLayout = true;
+                item.show();
+                newWidth += item.getWidth();
+                delete item.preventLayout;
             }
+            me.setWidth(newWidth);
         }
 
         
-        if (me.ownerCt.isGroupHeader) {
-            items = me.ownerCt.query('>:not([hidden])');
+        if (ownerCt.isGroupHeader && me.preventLayout !== true) {
+            items = ownerCt.query('>:not([hidden])');
             for (i = 0, len = items.length; i < len; i++) {
                 newWidth += items[i].getWidth();
             }
-            me.ownerCt.minWidth = newWidth;
-            me.ownerCt.setWidth(newWidth);
+            ownerCt.minWidth = newWidth;
+            ownerCt.setWidth(newWidth);
         }
 
         
+        ownerCt = me.getOwnerHeaderCt();
         if (ownerCt) {
-            ownerCt.onHeaderShow(me);
+            ownerCt.onHeaderShow(me, me.preventLayout);
         }
     },
 
@@ -78343,15 +80991,16 @@ Ext.define('Ext.grid.column.Column', {
 
     
     
-    
-
 
     
+    
 });
 
+
 Ext.define('Ext.grid.RowNumberer', {
     extend: 'Ext.grid.column.Column',
     alias: 'widget.rownumberer',
+
     
     text: "&#160",
 
@@ -78371,7 +81020,7 @@ Ext.define('Ext.grid.RowNumberer', {
     },
 
     
-    fixed: true,
+    resizable: false,
     hideable: false,
     menuDisabled: true,
     dataIndex: '',
@@ -78420,7 +81069,7 @@ Ext.define('Ext.view.DropZone', {
     fireViewEvent: function() {
         var me = this,
             result;
-            
+
         me.lock();
         result = me.view.fireEvent.apply(me.view, arguments);
         me.unlock();
@@ -78528,7 +81177,7 @@ Ext.define('Ext.view.DropZone', {
     
     onNodeOver: function(node, dragZone, e, data) {
         var me = this;
-        
+
         if (!Ext.Array.contains(data.records, me.view.getRecord(node))) {
             me.positionIndicator(node, data, e);
         }
@@ -78539,7 +81188,7 @@ Ext.define('Ext.view.DropZone', {
     
     notifyOut: function(node, dragZone, e, data) {
         var me = this;
-        
+
         me.callParent(arguments);
         delete me.overRecord;
         delete me.currentPosition;
@@ -78599,6 +81248,12 @@ Ext.define('Ext.view.DropZone', {
             }
         }
         return performOperation;
+    },
+    
+    destroy: function(){
+        Ext.destroy(this.indicator);
+        delete this.indicator;
+        this.callParent();
     }
 });
 
@@ -78649,13 +81304,15 @@ Ext.define('Ext.grid.column.Action', {
     
     
     
+    
+    
     header: '&#160;',
 
-    actionIdRe: /x-action-col-(\d+)/,
+    actionIdRe: new RegExp(Ext.baseCSSPrefix + 'action-col-(\\d+)'),
 
     
     altText: '',
-    
+
     sortable: false,
 
     constructor: function(config) {
@@ -78682,8 +81339,10 @@ Ext.define('Ext.grid.column.Action', {
             meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
             for (i = 0; i < l; i++) {
                 item = items[i];
+                item.disable = Ext.Function.bind(me.disableAction, me, [i]);
+                item.enable = Ext.Function.bind(me.enableAction, me, [i]);
                 v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
-                    '" class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' +  (item.iconCls || '') + 
+                    '" class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.disabled ? Ext.baseCSSPrefix + 'item-disabled' : ' ') + (item.iconCls || '') +
                     ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || '')) + '"' +
                     ((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + ' />';
             }
@@ -78691,6 +81350,32 @@ Ext.define('Ext.grid.column.Action', {
         };
     },
 
+    
+    enableAction: function(index) {
+        var me = this;
+
+        if (!index) {
+            index = 0;
+        } else if (!Ext.isNumber(index)) {
+            index = Ext.Array.indexOf(me.items, index);
+        }
+        me.items[index].disabled = false;
+        me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).removeCls(me.disabledCls);
+    },
+
+    
+    disableAction: function(index) {
+        var me = this;
+
+        if (!index) {
+            index = 0;
+        } else if (!Ext.isNumber(index)) {
+            index = Ext.Array.indexOf(me.items, index);
+        }
+        me.items[index].disabled = true;
+        me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).addCls(me.disabledCls);
+    },
+
     destroy: function() {
         delete this.items;
         delete this.renderer;
@@ -78702,12 +81387,13 @@ Ext.define('Ext.grid.column.Action', {
         var me = this,
             match = e.getTarget().className.match(me.actionIdRe),
             item, fn;
+            
         if (match) {
             item = me.items[parseInt(match[1], 10)];
             if (item) {
                 if (type == 'click') {
                     fn = item.handler || me.handler;
-                    if (fn) {
+                    if (fn && !item.disabled) {
                         fn.call(item.scope || me.scope || me, view, recordIndex, cellIndex, item, e);
                     }
                 } else if (type == 'mousedown' && item.stopSelection !== false) {
@@ -78767,11 +81453,15 @@ Ext.define('Ext.grid.column.Date', {
     alternateClassName: 'Ext.grid.DateColumn',
 
     
-    format : Ext.Date.defaultFormat,
 
-    constructor: function(cfg){
-        this.callParent(arguments);
-        this.renderer = Ext.util.Format.dateRenderer(this.format);
+    initComponent: function(){
+        var me = this;
+        
+        me.callParent(arguments);
+        if (!me.format) {
+            me.format = Ext.Date.defaultFormat;
+        }
+        me.renderer = Ext.util.Format.dateRenderer(me.format);
     }
 });
 
@@ -78783,6 +81473,7 @@ Ext.define('Ext.grid.column.Number', {
 
     
     format : '0,000.00',
+
     constructor: function(cfg) {
         this.callParent(arguments);
         this.renderer = Ext.util.Format.numberRenderer(this.format);
@@ -78796,6 +81487,7 @@ Ext.define('Ext.grid.column.Template', {
     alternateClassName: 'Ext.grid.TemplateColumn',
 
     
+
     constructor: function(cfg){
         var me = this,
             tpl;
@@ -78919,9 +81611,10 @@ Ext.define('Ext.grid.feature.AbstractSummary', {
     
     
     printSummaryRow: function(index){
-        var inner = this.view.getTableChunker().metaRowTpl.join('');
+        var inner = this.view.getTableChunker().metaRowTpl.join(''),
+            prefix = Ext.baseCSSPrefix;
         
-        inner = inner.replace('x-grid-row', 'x-grid-row-summary');
+        inner = inner.replace(prefix + 'grid-row', prefix + 'grid-row-summary');
         inner = inner.replace('{{id}}', '{gridSummaryValue}');
         inner = inner.replace(this.nestedIdRe, '{id$1}');  
         inner = inner.replace('{[this.embedRowCls()]}', '{rowCls}');
@@ -79068,8 +81761,10 @@ Ext.define('Ext.grid.feature.Grouping', {
     eventSelector: '.' + Ext.baseCSSPrefix + 'grid-group-hd',
 
     constructor: function() {
-        this.collapsedState = {};
-        this.callParent(arguments);
+        var me = this;
+        
+        me.collapsedState = {};
+        me.callParent(arguments);
     },
     
     
@@ -79114,33 +81809,46 @@ Ext.define('Ext.grid.feature.Grouping', {
             store = view.store,
             groupToggleMenuItem;
             
+        me.lastGroupField = me.getGroupField();
+
         if (me.lastGroupIndex) {
             store.group(me.lastGroupIndex);
         }
         me.callParent();
         groupToggleMenuItem = me.view.headerCt.getMenu().down('#groupToggleMenuItem');
         groupToggleMenuItem.setChecked(true, true);
-        view.refresh();
+        me.refreshIf();
     },
 
     disable: function() {
         var me    = this,
             view  = me.view,
             store = view.store,
+            remote = store.remoteGroup,
             groupToggleMenuItem,
             lastGroup;
             
         lastGroup = store.groupers.first();
         if (lastGroup) {
             me.lastGroupIndex = lastGroup.property;
-            store.groupers.clear();
+            me.block();
+            store.clearGrouping();
+            me.unblock();
         }
         
         me.callParent();
         groupToggleMenuItem = me.view.headerCt.getMenu().down('#groupToggleMenuItem');
         groupToggleMenuItem.setChecked(true, true);
         groupToggleMenuItem.setChecked(false, true);
-        view.refresh();
+        if (!remote) {
+            view.refresh();
+        }
+    },
+    
+    refreshIf: function() {
+        if (this.blockRefresh !== true) {
+            this.view.refresh();
+        }    
     },
 
     getFeatureTpl: function(values, parent, x, xcount) {
@@ -79180,8 +81888,7 @@ Ext.define('Ext.grid.feature.Grouping', {
     
     attachEvents: function() {
         var me = this,
-            view = me.view,
-            header, headerId, menu, menuItem;
+            view = me.view;
 
         view.on({
             scope: me,
@@ -79195,16 +81902,10 @@ Ext.define('Ext.grid.feature.Grouping', {
         if (me.enableGroupingMenu) {
             me.injectGroupingMenu();
         }
-
-        if (me.hideGroupedHeader) {
-            header = view.headerCt.down('gridcolumn[dataIndex=' + me.getGroupField() + ']');
-            headerId = header.id;
-            menu = view.headerCt.getMenu();
-            menuItem = menu.down('menuitem[headerId='+ headerId +']');
-            if (menuItem) {
-                menuItem.setChecked(false);
-            }
-        }
+        me.lastGroupField = me.getGroupField();
+        me.block();
+        me.onGroupChange();
+        me.unblock();
     },
     
     injectGroupingMenu: function() {
@@ -79237,6 +81938,7 @@ Ext.define('Ext.grid.feature.Grouping', {
         return function() {
             var o = Ext.grid.header.Container.prototype.getMenuItems.call(this);
             o.push('-', {
+                iconCls: Ext.baseCSSPrefix + 'group-by-icon',
                 itemId: 'groupMenuItem',
                 text: groupByText,
                 handler: groupMenuItemClick
@@ -79256,15 +81958,30 @@ Ext.define('Ext.grid.feature.Grouping', {
 
     
     onGroupMenuItemClick: function(menuItem, e) {
-        var menu = menuItem.parentMenu,
+        var me = this,
+            menu = menuItem.parentMenu,
             hdr  = menu.activeHeader,
-            view = this.view;
+            view = me.view,
+            store = view.store,
+            remote = store.remoteGroup;
 
-        delete this.lastGroupIndex;
-        this.enable();
-        view.store.group(hdr.dataIndex);
-        this.pruneGroupedHeader();
-        
+        delete me.lastGroupIndex;
+        me.block();
+        me.enable();
+        store.group(hdr.dataIndex);
+        me.pruneGroupedHeader();
+        me.unblock();
+        if (!remote) {
+            view.refresh();
+        }  
+    },
+    
+    block: function(){
+        this.blockRefresh = this.view.blockRefresh = true;
+    },
+    
+    unblock: function(){
+        this.blockRefresh = this.view.blockRefresh = false;
     },
 
     
@@ -79345,7 +82062,37 @@ Ext.define('Ext.grid.feature.Grouping', {
     },
     
     onGroupChange: function(){
-        this.view.refresh();
+        var me = this,
+            field = me.getGroupField(),
+            menuItem;
+            
+        if (me.hideGroupedHeader) {
+            if (me.lastGroupField) {
+                menuItem = me.getMenuItem(me.lastGroupField);
+                if (menuItem) {
+                    menuItem.setChecked(true);
+                }
+            }
+            if (field) {
+                menuItem = me.getMenuItem(field);
+                if (menuItem) {
+                    menuItem.setChecked(false);
+                }
+            }
+        }
+        if (me.blockRefresh !== true) {
+            me.view.refresh();
+        }
+        me.lastGroupField = field;
+    },
+    
+    
+    getMenuItem: function(dataIndex){
+        var view = this.view,
+            header = view.headerCt.down('gridcolumn[dataIndex=' + dataIndex + ']'),
+            menu = view.headerCt.getMenu();
+            
+        return menu.down('menuitem[headerId='+ header.id +']');
     },
 
     
@@ -79465,24 +82212,24 @@ Ext.define('Ext.grid.feature.Grouping', {
 
 
 Ext.define('Ext.grid.feature.GroupingSummary', {
+
     
-    
-    
+
     extend: 'Ext.grid.feature.Grouping',
-    
+
     alias: 'feature.groupingsummary',
-    
+
     mixins: {
         summary: 'Ext.grid.feature.AbstractSummary'
     },
-    
+
     
 
-     
+
    
    getFeatureTpl: function() {
         var tpl = this.callParent(arguments);
-            
+
         if (this.showSummaryRow) {
             
             tpl = tpl.replace('</tpl>', '');
@@ -79490,12 +82237,12 @@ Ext.define('Ext.grid.feature.GroupingSummary', {
         }
         return tpl;
     },
-    
+
     
     getFragmentTpl: function() {
         var me = this,
             fragments = me.callParent();
-            
+
         Ext.apply(fragments, me.getSummaryFragments());
         if (me.showSummaryRow) {
             
@@ -79504,7 +82251,7 @@ Ext.define('Ext.grid.feature.GroupingSummary', {
         }
         return fragments;
     },
-    
+
     
     getPrintData: function(index){
         var me = this,
@@ -79515,7 +82262,7 @@ Ext.define('Ext.grid.feature.GroupingSummary', {
             name = me.summaryGroups[index - 1].name,
             active = me.summaryData[name],
             column;
-            
+
         for (; i < length; ++i) {
             column = columns[i];
             column.gridSummaryValue = this.getColumnValue(column, active);
@@ -79523,7 +82270,7 @@ Ext.define('Ext.grid.feature.GroupingSummary', {
         }
         return data;
     },
-    
+
     
     generateSummaryData: function(){
         var me = this,
@@ -79541,12 +82288,12 @@ Ext.define('Ext.grid.feature.GroupingSummary', {
             root,
             key,
             comp;
-            
+
         for (i = 0, length = groups.length; i < length; ++i) {
             data[groups[i].name] = {};
         }
+
         
-    
         if (me.remoteRoot && reader.rawData) {
             
             root = reader.root;
@@ -79559,21 +82306,21 @@ Ext.define('Ext.grid.feature.GroupingSummary', {
             reader.root = root;
             reader.buildExtractors(true);
         }
-        
+
         for (i = 0, length = columns.length; i < length; ++i) {
             comp = Ext.getCmp(columns[i].id);
             fieldData = me.getSummary(store, comp.summaryType, comp.dataIndex, true);
-            
+
             for (key in fieldData) {
                 if (fieldData.hasOwnProperty(key)) {
                     data[key][comp.id] = fieldData[key];
                 }
             }
-            
+
             for (key in remoteData) {
                 if (remoteData.hasOwnProperty(key)) {
                     remote = remoteData[key][comp.dataIndex];
-                    if (remote !== undefined) {
+                    if (remote !== undefined && data[key] !== undefined) {
                         data[key][comp.id] = remote;
                     }
                 }
@@ -79863,7 +82610,7 @@ Ext.define('Ext.grid.header.DropZone', {
 
     getTopIndicator: function() {
         if (!this.topIndicator) {
-            this.topIndicator = Ext.core.DomHelper.append(Ext.getBody(), {
+            this.topIndicator = Ext.DomHelper.append(Ext.getBody(), {
                 cls: "col-move-top",
                 html: "&#160;"
             }, true);
@@ -79873,7 +82620,7 @@ Ext.define('Ext.grid.header.DropZone', {
 
     getBottomIndicator: function() {
         if (!this.bottomIndicator) {
-            this.bottomIndicator = Ext.core.DomHelper.append(Ext.getBody(), {
+            this.bottomIndicator = Ext.DomHelper.append(Ext.getBody(), {
                 cls: "col-move-bottom",
                 html: "&#160;"
             }, true);
@@ -80090,7 +82837,6 @@ Ext.define('Ext.grid.header.DropZone', {
 });
 
 
-
 Ext.define('Ext.grid.plugin.Editing', {
     alias: 'editing.editing',
 
@@ -80147,7 +82893,7 @@ Ext.define('Ext.grid.plugin.Editing', {
         grid.isEditable = true;
         grid.editingPlugin = grid.view.editingPlugin = me;
     },
-    
+
     
     onReconfigure: function(){
         this.initFieldAccessors(this.view.getGridColumns());
@@ -80392,6 +83138,7 @@ Ext.define('Ext.grid.plugin.Editing', {
     }
 });
 
+
 Ext.define('Ext.grid.plugin.CellEditing', {
     alias: 'plugin.cellediting',
     extend: 'Ext.grid.plugin.Editing',
@@ -80452,9 +83199,9 @@ Ext.define('Ext.grid.plugin.CellEditing', {
     
     startEdit: function(record, columnHeader) {
         var me = this,
-            ed   = me.getEditor(record, columnHeader),
             value = record.get(columnHeader.dataIndex),
-            context = me.getEditingContext(record, columnHeader);
+            context = me.getEditingContext(record, columnHeader),
+            ed;
 
         record = context.record;
         columnHeader = context.column;
@@ -80463,17 +83210,18 @@ Ext.define('Ext.grid.plugin.CellEditing', {
         
         me.completeEdit();
 
+        context.originalValue = context.value = value;
+        if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', context) === false || context.cancel) {
+            return false;
+        }
+        
         
         if (columnHeader && !columnHeader.getEditor(record)) {
             return false;
         }
-
+        
+        ed = me.getEditor(record, columnHeader);
         if (ed) {
-            context.originalValue = context.value = value;
-            if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', context) === false || context.cancel) {
-                return false;
-            }
-
             me.context = context;
             me.setActiveEditor(ed);
             me.setActiveRecord(record);
@@ -80555,6 +83303,14 @@ Ext.define('Ext.grid.plugin.CellEditing', {
             return editor;
         }
     },
+    
+    
+    setColumnField: function(column, field) {
+        var ed = this.editors.getByKey(column.getItemId());
+        Ext.destroy(ed, column.field);
+        this.editors.removeAtKey(column.getItemId());
+        this.callParent(arguments);
+    },
 
     
     getCell: function(record, column) {
@@ -80601,8 +83357,6 @@ Ext.define('Ext.grid.plugin.CellEditing', {
             }
             me.context.value = value;
             me.fireEvent('edit', me, me.context);
-            
-
         }
     },
 
@@ -80673,6 +83427,28 @@ Ext.define('Ext.grid.plugin.DragDrop', {
         Ext.destroy(this.dragZone, this.dropZone);
     },
 
+    enable: function() {
+        var me = this;
+        if (me.dragZone) {
+            me.dragZone.unlock();
+        }
+        if (me.dropZone) {
+            me.dropZone.unlock();
+        }
+        me.callParent();
+    },
+
+    disable: function() {
+        var me = this;
+        if (me.dragZone) {
+            me.dragZone.lock();
+        }
+        if (me.dropZone) {
+            me.dropZone.lock();
+        }
+        me.callParent();
+    },
+
     onViewRender : function(view) {
         var me = this;
 
@@ -80735,7 +83511,7 @@ Ext.define('Ext.grid.plugin.HeaderResizer', {
     extend: 'Ext.util.Observable',
     requires: ['Ext.dd.DragTracker', 'Ext.util.Region'],
     alias: 'plugin.gridheaderresizer',
-    
+
     disabled: false,
 
     
@@ -80802,7 +83578,8 @@ Ext.define('Ext.grid.plugin.HeaderResizer', {
 
                 
                 if (overHeader.isOnLeftEdge(e)) {
-                    resizeHeader = overHeader.previousNode('gridcolumn:not([hidden]):not([isGroupHeader])');
+                    resizeHeader = overHeader.previousNode('gridcolumn:not([hidden])');
+
                 }
                 
                 else if (overHeader.isOnRightEdge(e)) {
@@ -80819,11 +83596,12 @@ Ext.define('Ext.grid.plugin.HeaderResizer', {
                     
                     
                     if (resizeHeader.isGroupHeader) {
-                        resizeHeader = resizeHeader.getVisibleGridColumns();
-                        resizeHeader = resizeHeader[resizeHeader.length - 1];
+                        resizeHeader = resizeHeader.down(':not([isGroupHeader]):not([hidden]):last');
                     }
 
-                    if (resizeHeader && !(resizeHeader.fixed || this.disabled)) {
+                    
+                    
+                    if (resizeHeader && !(resizeHeader.fixed || (resizeHeader.resizable === false) || this.disabled)) {
                         this.activeHd = resizeHeader;
                         overHeader.el.dom.style.cursor = this.eResizeCursor;
                     }
@@ -80953,38 +83731,32 @@ Ext.define('Ext.grid.plugin.HeaderResizer', {
                 delete dragHd.flex;
             }
 
+            this.headerCt.suspendLayout = true;
+            dragHd.setWidth(this.origWidth + offset[0], false);
+
+            
+            
             
             
             if (this.headerCt.forceFit) {
                 nextHd = dragHd.nextNode('gridcolumn:not([hidden]):not([isGroupHeader])');
                 if (nextHd) {
-                    this.headerCt.componentLayout.layoutBusy = true;
+                    delete nextHd.flex;
+                    nextHd.setWidth(nextHd.getWidth() - offset[0], false);
                 }
             }
-
-            
-            
-            dragHd.minWidth = this.origWidth + offset[0];
-            dragHd.setWidth(dragHd.minWidth);
-
-            
-            
-            if (nextHd) {
-                delete nextHd.flex;
-                nextHd.setWidth(nextHd.getWidth() - offset[0]);
-                this.headerCt.componentLayout.layoutBusy = false;
-                this.headerCt.doComponentLayout();
-            }
+            this.headerCt.suspendLayout = false;
+            this.headerCt.doComponentLayout(this.headerCt.getFullWidth());
         }
     },
-    
+
     disable: function() {
         this.disabled = true;
         if (this.tracker) {
             this.tracker.disable();
         }
     },
-    
+
     enable: function() {
         this.disabled = false;
         if (this.tracker) {
@@ -81014,6 +83786,9 @@ Ext.define('Ext.grid.plugin.RowEditing', {
     
     
     
+    
+    
+    
 
     constructor: function() {
         var me = this;
@@ -81055,6 +83830,8 @@ Ext.define('Ext.grid.plugin.RowEditing', {
         if (me.editing) {
             me.getEditor().cancelEdit();
             me.callParent(arguments);
+            
+            me.fireEvent('canceledit', me.context);
         }
     },
 
@@ -81070,7 +83847,26 @@ Ext.define('Ext.grid.plugin.RowEditing', {
 
     
     validateEdit: function() {
-        var me = this;
+        var me             = this,
+            editor         = me.editor,
+            context        = me.context,
+            record         = context.record,
+            newValues      = {},
+            originalValues = {},
+            name;
+
+        editor.items.each(function(item) {
+            name = item.name;
+
+            newValues[name]      = item.getValue();
+            originalValues[name] = record.get(name);
+        });
+
+        Ext.apply(context, {
+            newValues      : newValues,
+            originalValues : originalValues
+        });
+
         return me.callParent(arguments) && me.getEditor().completeEdit();
     },
 
@@ -81150,10 +83946,10 @@ Ext.define('Ext.grid.plugin.RowEditing', {
         if (column.isHeader) {
             var me = this,
                 editor;
-            
+
             me.initFieldAccessors(column);
             editor = me.getEditor();
-            
+
             if (editor && editor.onColumnAdd) {
                 editor.onColumnAdd(column);
             }
@@ -81165,11 +83961,11 @@ Ext.define('Ext.grid.plugin.RowEditing', {
         if (column.isHeader) {
             var me = this,
                 editor = me.getEditor();
-    
+
             if (editor && editor.onColumnRemove) {
                 editor.onColumnRemove(column);
             }
-            me.removeFieldAccessors(column);  
+            me.removeFieldAccessors(column);
         }
     },
 
@@ -81178,7 +83974,7 @@ Ext.define('Ext.grid.plugin.RowEditing', {
         if (column.isHeader) {
             var me = this,
                 editor = me.getEditor();
-    
+
             if (editor && editor.onColumnResize) {
                 editor.onColumnResize(column, width);
             }
@@ -81226,6 +84022,7 @@ Ext.define('Ext.grid.plugin.RowEditing', {
     }
 });
 
+
 Ext.define('Ext.grid.property.Grid', {
 
     extend: 'Ext.grid.Panel',
@@ -81835,14 +84632,12 @@ Ext.define('Ext.layout.component.field.Slider', {
 });
 
 
-
 Ext.define('Ext.layout.container.Absolute', {
 
     
 
     alias: 'layout.absolute',
     extend: 'Ext.layout.container.Anchor',
-    requires: ['Ext.chart.axis.Axis', 'Ext.fx.Anim'],
     alternateClassName: 'Ext.layout.AbsoluteLayout',
 
     
@@ -81883,18 +84678,25 @@ Ext.define('Ext.layout.container.Accordion', {
     alias: ['layout.accordion'],
     alternateClassName: 'Ext.layout.AccordionLayout',
 
+    itemCls: Ext.baseCSSPrefix + 'box-item ' + Ext.baseCSSPrefix + 'accordion-item',
+
     align: 'stretch',
 
     
     fill : true,
+
     
     autoWidth : true,
+
     
     titleCollapse : true,
+
     
     hideCollapseTool : false,
+
     
     collapseFirst : false,
+
     
     animate : true,
     
@@ -81924,7 +84726,7 @@ Ext.define('Ext.layout.container.Accordion', {
 
         me.callParent(arguments);
         if (me.fill) {
-            if (!me.owner.el.dom.style.height || !me.getLayoutTargetSize().height) {
+            if (!(me.owner.el.dom.style.height || me.getLayoutTargetSize().height)) {
                 return false;
             }
         } else {
@@ -81940,8 +84742,7 @@ Ext.define('Ext.layout.container.Accordion', {
             i = 0,
             comp,
             targetSize = me.getLayoutTargetSize(),
-            renderedPanels = [],
-            border;
+            renderedPanels = [];
 
         for (; i < ln; i++) {
             comp = items[i];
@@ -81994,6 +84795,7 @@ Ext.define('Ext.layout.container.Accordion', {
                     comp.autoHeight = true;
                     comp.autoScroll = false;
                 }
+                comp.border = comp.collapsed;
             }
         }
 
@@ -82001,7 +84803,7 @@ Ext.define('Ext.layout.container.Accordion', {
         if (ln && me.expandedItem === undefined) {
             me.expandedItem = 0;
             comp = items[0];
-            comp.collapsed = false;
+            comp.collapsed = comp.border = false;
             if (me.fill) {
                 comp.flex = 1;
             }
@@ -82058,6 +84860,12 @@ Ext.define('Ext.layout.container.Accordion', {
         for (i = 0; i < ln; i++) {
             child = children[i];
 
+            
+            
+            if (Ext.isWindows) {
+                child.el.dom.scrollTop = 0;
+            }
+
             if (siblingCollapsed) {
                 child.header.removeCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded');
             }
@@ -82074,6 +84882,21 @@ Ext.define('Ext.layout.container.Accordion', {
             siblingCollapsed = child.collapsed;
         }
     },
+    
+    animCallback: function(){
+        Ext.Array.forEach(this.toCollapse, function(comp){
+            comp.fireEvent('collapse', comp);
+        });
+        
+        Ext.Array.forEach(this.toExpand, function(comp){
+            comp.fireEvent('expand', comp);
+        });    
+    },
+    
+    setupEvents: function(){
+        this.toCollapse = [];
+        this.toExpand = [];    
+    },
 
     
     
@@ -82085,6 +84908,7 @@ Ext.define('Ext.layout.container.Accordion', {
             i = 0,
             comp;
 
+        me.setupEvents();
         for (; i < len; i++) {
             comp = it[i];
             if (comp === toExpand && comp.collapsed) {
@@ -82095,7 +84919,12 @@ Ext.define('Ext.layout.container.Accordion', {
         }
 
         me.animate = me.initialAnimate;
-        me.layout();
+        if (me.activeOnTop) {
+            
+            me.owner.insert(0, toExpand); 
+        } else {
+            me.layout();
+        }
         me.animate = false;
         return false;
     },
@@ -82105,6 +84934,7 @@ Ext.define('Ext.layout.container.Accordion', {
             toExpand = comp.next() || comp.prev(),
             expanded = me.multi ? me.owner.query('>panel:not([collapsed])') : [];
 
+        me.setupEvents();
         
         
         if (me.multi) {
@@ -82153,7 +84983,11 @@ Ext.define('Ext.layout.container.Accordion', {
         comp.el.setHeight(comp.height);
         comp.collapsed = true;
         delete comp.flex;
-        comp.fireEvent('collapse', comp);
+        if (this.initialAnimate) {
+            this.toCollapse.push(comp);
+        } else {
+            comp.fireEvent('collapse', comp);
+        }
         if (comp.collapseTool) {
             comp.collapseTool.setType('expand-' + comp.getOppositeDirection(comp.collapseDirection));
         }
@@ -82180,7 +85014,11 @@ Ext.define('Ext.layout.container.Accordion', {
         comp.flex = 1;
         comp.removeCls(comp.collapsedCls);
         comp.header.removeCls(comp.collapsedHeaderCls);
-        comp.fireEvent('expand', comp);
+         if (this.initialAnimate) {
+            this.toExpand.push(comp);
+        } else {
+            comp.fireEvent('expand', comp);
+        }
         if (comp.collapseTool) {
             comp.collapseTool.setType('collapse-' + comp.collapseDirection);
         }
@@ -82195,7 +85033,10 @@ Ext.define('Ext.resizer.Splitter', {
     alias: 'widget.splitter',
 
     renderTpl: [
-        '<tpl if="collapsible===true"><div class="' + Ext.baseCSSPrefix + 'collapse-el ' + Ext.baseCSSPrefix + 'layout-split-{collapseDir}">&nbsp;</div></tpl>'
+        '<tpl if="collapsible===true">',
+            '<div id="{id}-collapseEl" class="', Ext.baseCSSPrefix, 'collapse-el ',
+                    Ext.baseCSSPrefix, 'layout-split-{collapseDir}">&nbsp;</div>',
+        '</tpl>'
     ],
 
     baseCls: Ext.baseCSSPrefix + 'splitter',
@@ -82214,7 +85055,7 @@ Ext.define('Ext.resizer.Splitter', {
 
     
     defaultSplitMax: 1000,
-    
+
     
 
     width: 5,
@@ -82234,9 +85075,8 @@ Ext.define('Ext.resizer.Splitter', {
             collapseDir: collapseDir,
             collapsible: me.collapsible || target.collapsible
         });
-        Ext.applyIf(me.renderSelectors, {
-            collapseEl: '.' + Ext.baseCSSPrefix + 'collapse-el'
-        });
+
+        me.addChildEls('collapseEl');
 
         this.callParent(arguments);
 
@@ -82290,7 +85130,7 @@ Ext.define('Ext.resizer.Splitter', {
 
     getCollapseTarget: function() {
         var me = this;
-        
+
         return me.collapseTarget.isComponent ? me.collapseTarget : me.collapseTarget == 'prev' ? me.previousSibling() : me.nextSibling();
     },
 
@@ -82395,6 +85235,8 @@ Ext.define('Ext.layout.container.Border', {
 
         
         this.shadowLayout.beforeLayout();
+
+        
     },
 
     renderItems: function(items, target) {
@@ -82403,6 +85245,14 @@ Ext.define('Ext.layout.container.Border', {
     renderItem: function(item) {
     },
 
+    renderChildren: function() {
+        if (!this.borderLayoutInitialized) {
+            this.initializeBorderLayout();
+        }
+
+        this.shadowLayout.renderChildren();
+    },
+
     
     getVisibleItems: function() {
         return Ext.ComponentQuery.query(':not([slideOutAnim])', this.callParent(arguments));
@@ -82433,7 +85283,7 @@ Ext.define('Ext.layout.container.Border', {
 
                 
                 comp.borderCollapse = comp.collapsed;
-                delete comp.collapsed;
+                comp.collapsed = false;
 
                 comp.on({
                     beforecollapse: me.onBeforeRegionCollapse,
@@ -82851,6 +85701,10 @@ Ext.define('Ext.layout.container.Border', {
 
     
     onBeforeRegionCollapse: function(comp, direction, animate) {
+        if (comp.collapsedChangingLayout) {
+            return false;
+        }
+        comp.collapsedChangingLayout = true;
         var me = this,
             compEl = comp.el,
             width,
@@ -82925,6 +85779,7 @@ Ext.define('Ext.layout.container.Border', {
             delete me.shadowContainer.layout.layoutBusy;
             delete me.layoutBusy;
             delete me.owner.componentLayout.layoutBusy;
+            delete comp.collapsedChangingLayout;
 
             
             comp.collapsed = true;
@@ -82969,7 +85824,8 @@ Ext.define('Ext.layout.container.Border', {
 
     
     onBeforeRegionExpand: function(comp, animate) {
-        this.onPlaceHolderToolClick(null, null, null, {client: comp});
+        
+        this.onPlaceHolderToolClick(null, null, null, {client: comp, shouldFireBeforeexpand: false});
         return false;
     },
 
@@ -82991,6 +85847,13 @@ Ext.define('Ext.layout.container.Border', {
             scsl = shadowContainer.suspendLayout,
             isFloating;
 
+        if (comp.collapsedChangingLayout) {
+            return false;
+        }
+        if (tool.shouldFireBeforeexpand !== false && comp.fireEvent('beforeexpand', comp, true) === false) {
+            return false;
+        }
+        comp.collapsedChangingLayout = true;
         
         
         
@@ -83066,6 +85929,7 @@ Ext.define('Ext.layout.container.Border', {
             delete me.shadowContainer.layout.layoutBusy;
             delete me.layoutBusy;
             delete me.owner.componentLayout.layoutBusy;
+            delete comp.collapsedChangingLayout;
 
             
             comp.removeCls(Ext.baseCSSPrefix + 'border-region-slide-in');
@@ -83352,7 +86216,6 @@ Ext.define('Ext.layout.container.Card', {
     },
 
     configureItem: function(item) {
-
         
         
         item.layoutManagedHeight = 0;
@@ -83452,9 +86315,9 @@ Ext.define('Ext.layout.container.Column', {
             item = items[i];
             if (item.columnWidth) {
                 columnWidth = Math.floor(item.columnWidth * availableWidth) - parallelMargins[i];
-                if (item.getWidth() != columnWidth) {
-                    me.setItemSize(item, columnWidth, item.height);
-                }
+                me.setItemSize(item, columnWidth, item.height);
+            } else {
+                me.layoutItem(item);
             }
         }
 
@@ -83479,17 +86342,14 @@ Ext.define('Ext.layout.container.Column', {
     },
 
     configureItem: function(item) {
+        this.callParent(arguments);
+
         if (item.columnWidth) {
             item.layoutManagedWidth = 1;
-        } else {
-            item.layoutManagedWidth = 2;
         }
-        item.layoutManagedHeight = 2;
-        this.callParent(arguments);
     }
 });
 
-
 Ext.define('Ext.layout.container.Table', {
 
     
@@ -83689,6 +86549,8 @@ Ext.define('Ext.menu.Item', {
     
 
     
+
+    
     activeCls: Ext.baseCSSPrefix + 'menu-item-active',
 
     
@@ -83737,11 +86599,11 @@ Ext.define('Ext.menu.Item', {
             '{text}',
         '</tpl>',
         '<tpl if="!plain">',
-            '<a class="' + Ext.baseCSSPrefix + 'menu-item-link" href="{href}" <tpl if="hrefTarget">target="{hrefTarget}"</tpl> hidefocus="true" unselectable="on">',
-                '<img src="{icon}" class="' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}" />',
-                '<span class="' + Ext.baseCSSPrefix + 'menu-item-text" <tpl if="menu">style="margin-right: 17px;"</tpl> >{text}</span>',
+            '<a id="{id}-itemEl" class="' + Ext.baseCSSPrefix + 'menu-item-link" href="{href}" <tpl if="hrefTarget">target="{hrefTarget}"</tpl> hidefocus="true" unselectable="on">',
+                '<img id="{id}-iconEl" src="{icon}" class="' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}" />',
+                '<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'menu-item-text" <tpl if="menu">style="margin-right: 17px;"</tpl> >{text}</span>',
                 '<tpl if="menu">',
-                    '<img src="' + Ext.BLANK_IMAGE_URL + '" class="' + Ext.baseCSSPrefix + 'menu-item-arrow" />',
+                    '<img id="{id}-arrowEl" src="{blank}" class="' + Ext.baseCSSPrefix + 'menu-item-arrow" />',
                 '</tpl>',
             '</a>',
         '</tpl>'
@@ -83914,24 +86776,20 @@ Ext.define('Ext.menu.Item', {
 
     onRender: function(ct, pos) {
         var me = this,
-            prefix = '.' + Ext.baseCSSPrefix;
+            blank = Ext.BLANK_IMAGE_URL;
 
         Ext.applyIf(me.renderData, {
             href: me.href || '#',
             hrefTarget: me.hrefTarget,
-            icon: me.icon || Ext.BLANK_IMAGE_URL,
+            icon: me.icon || blank,
             iconCls: me.iconCls + (me.checkChangeDisabled ? ' ' + me.disabledCls : ''),
             menu: Ext.isDefined(me.menu),
             plain: me.plain,
-            text: me.text
+            text: me.text,
+            blank: blank
         });
 
-        Ext.applyIf(me.renderSelectors, {
-            itemEl: prefix + 'menu-item-link',
-            iconEl: prefix + 'menu-item-icon',
-            textEl: prefix + 'menu-item-text',
-            arrowEl: prefix + 'menu-item-arrow'
-        });
+        me.addChildEls('itemEl', 'iconEl', 'textEl', 'arrowEl');
 
         me.callParent(arguments);
     },
@@ -84101,10 +86959,14 @@ Ext.define('Ext.menu.KeyNav', {
     },
 
     enter: function(e) {
-        var menu = this.menu;
-
+        var menu = this.menu,
+            focused = menu.focusedItem;
         if (menu.activeItem) {
             menu.onClick(e);
+        } else if (focused && focused.isFormField) {
+            
+            return true;
         }
     },
 
@@ -84199,58 +87061,54 @@ Ext.define('Ext.menu.KeyNav', {
 Ext.define('Ext.menu.Separator', {
     extend: 'Ext.menu.Item',
     alias: 'widget.menuseparator',
+
     
-    
-    
+
     
     canActivate: false,
+
     
+
     
-     
-    
-     
+
     
-     
+
     focusable: false,
-     
-    
-    
+
     
+
     
+
     
     hideOnClick: false,
+
     
+
     
+
     
+
     
+
     
+
     
-    
-    
-    
-    
-    
-    
-    
+
     
     plain: true,
-    
+
     
     separatorCls: Ext.baseCSSPrefix + 'menu-item-separator',
-    
+
     
     text: '&#160;',
-    
+
     onRender: function(ct, pos) {
         var me = this,
             sepCls = me.separatorCls;
-            
+
         me.cls += ' ' + sepCls;
-        
-        Ext.applyIf(me.renderSelectors, {
-            itemSepEl: '.' + sepCls
-        });
-        
+
         me.callParent(arguments);
     }
 });
@@ -84269,6 +87127,8 @@ Ext.define('Ext.menu.Menu', {
     ],
 
     
+
+    
     allowOtherMenus: false,
 
     
@@ -84411,7 +87271,7 @@ Ext.define('Ext.menu.Menu', {
         
         
         
-        if ((!Ext.iStrict && Ext.isIE) || Ext.isIE6) {
+        if ((!Ext.isStrict && Ext.isIE) || Ext.isIE6) {
             var innerCt = me.layout.getRenderTarget(),
                 innerCtWidth = 0,
                 dis = me.dockedItems,
@@ -84435,6 +87295,10 @@ Ext.define('Ext.menu.Menu', {
             me.el.setWidth(newWidth);
         }
     },
+    
+    getBubbleTarget: function(){
+        return this.parentMenu || this.callParent();
+    },
 
     
     canActivateItem: function(item) {
@@ -84451,7 +87315,9 @@ Ext.define('Ext.menu.Menu', {
                 delete me.activeItem;
             }
         }
-        if (me.focusedItem) {
+
+        
+        if (me.focusedItem && !me.filtered) {
             me.focusedItem.blur();
             if (!me.focusedItem.$focused) {
                 delete me.focusedItem;
@@ -84698,6 +87564,7 @@ Ext.define('Ext.menu.Menu', {
 
             
             me.doAutoRender();
+            delete me.needsLayout;
 
             
             cmp = cmp.el || cmp;
@@ -84713,14 +87580,6 @@ Ext.define('Ext.menu.Menu', {
         }
         return me;
     },
-    
-    
-    showAt: function(){
-        this.callParent(arguments);
-        if (this.floating) {
-            this.doConstrain();
-        }    
-    },
 
     doConstrain : function() {
         var me = this,
@@ -84733,7 +87592,8 @@ Ext.define('Ext.menu.Menu', {
         me.setSize();
         full = me.getHeight();
         if (me.floating) {
-            parentEl = Ext.fly(me.el.dom.parentNode);
+            
+            parentEl = Ext.fly(me.el.getScopeParent());
             scrollTop = parentEl.getScroll().top;
             viewHeight = parentEl.getViewSize().height;
             
@@ -84762,7 +87622,7 @@ Ext.define('Ext.menu.Menu', {
                 me.iconSepEl.setHeight(me.layout.getRenderTarget().dom.scrollHeight);
             }
         }
-        vector = me.getConstrainVector(me.el.dom.parentNode);
+        vector = me.getConstrainVector(me.el.getScopeParent());
         if (vector) {
             me.setPosition(me.getPosition()[0] + vector[0]);
         }
@@ -84770,6 +87630,7 @@ Ext.define('Ext.menu.Menu', {
     }
 });
 
+
  Ext.define('Ext.menu.ColorPicker', {
      extend: 'Ext.menu.Menu',
 
@@ -84794,8 +87655,11 @@ Ext.define('Ext.menu.Menu', {
     
 
     initComponent : function(){
-        var me = this;
+        var me = this,
+            cfg = Ext.apply({}, me.initialConfig);
 
+        
+        delete cfg.listeners;
         Ext.apply(me, {
             plain: true,
             showSeparator: false,
@@ -84803,7 +87667,7 @@ Ext.define('Ext.menu.Menu', {
                 cls: Ext.baseCSSPrefix + 'menu-color-item',
                 id: me.pickerId,
                 xtype: 'colorpicker'
-            }, me.initialConfig)
+            }, cfg)
         });
 
         me.callParent(arguments);
@@ -84888,16 +87752,19 @@ Ext.define('Ext.panel.Tool', {
     toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
     toolOverCls: Ext.baseCSSPrefix + 'tool-over',
     ariaRole: 'button',
-    renderTpl: ['<img src="{blank}" class="{baseCls}-{type}" role="presentation"/>'],
-    
-    
-    
-    
-    
+    renderTpl: ['<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation"/>'],
+
     
+
     
+
     
+
     
+
+     
+    tooltipType: 'qtip',
+
     
     stopEvent: true,
 
@@ -84907,8 +87774,8 @@ Ext.define('Ext.panel.Tool', {
             
             'click'
         );
-        
-        
+
+
         me.type = me.type || me.id;
 
         Ext.applyIf(me.renderData, {
@@ -84916,22 +87783,29 @@ Ext.define('Ext.panel.Tool', {
             blank: Ext.BLANK_IMAGE_URL,
             type: me.type
         });
-        me.renderSelectors.toolEl = '.' + me.baseCls + '-' + me.type;
+
+        me.addChildEls('toolEl');
+
+        
+        me.tooltip = me.tooltip || me.qtip;
         me.callParent();
     },
 
     
     afterRender: function() {
-        var me = this;
+        var me = this,
+            attr;
+
         me.callParent(arguments);
-        if (me.qtip) {
-            if (Ext.isObject(me.qtip)) {
+        if (me.tooltip) {
+            if (Ext.isObject(me.tooltip)) {
                 Ext.tip.QuickTipManager.register(Ext.apply({
                     target: me.id
-                }, me.qtip));
+                }, me.tooltip));
             }
             else {
-                me.toolEl.dom.qtip = me.qtip;
+                attr = me.tooltipType == 'qtip' ? 'data-qtip' : 'title';
+                me.toolEl.dom.setAttribute(attr, me.tooltip);
             }
         }
 
@@ -84947,7 +87821,7 @@ Ext.define('Ext.panel.Tool', {
     
     setType: function(type) {
         var me = this;
-        
+
         me.type = type;
         if (me.rendered) {
             me.toolEl.dom.className = me.baseCls + '-' + type;
@@ -84964,7 +87838,7 @@ Ext.define('Ext.panel.Tool', {
     onClick: function(e, target) {
         var me = this,
             owner;
-            
+
         if (me.disabled) {
             return false;
         }
@@ -84982,12 +87856,12 @@ Ext.define('Ext.panel.Tool', {
         me.fireEvent('click', me, e);
         return true;
     },
-    
+
     
     onDestroy: function(){
         if (Ext.isObject(this.tooltip)) {
             Ext.tip.QuickTipManager.unregister(this.id);
-        }    
+        }
         this.callParent();
     },
 
@@ -85045,7 +87919,6 @@ Ext.define('Ext.resizer.Resizer', {
     handleCls: Ext.baseCSSPrefix + 'resizable-handle',
     pinnedCls: Ext.baseCSSPrefix + 'resizable-pinned',
     overCls:   Ext.baseCSSPrefix + 'resizable-over',
-    proxyCls:  Ext.baseCSSPrefix + 'resizable-proxy',
     wrapCls:   Ext.baseCSSPrefix + 'resizable-wrap',
 
     
@@ -85343,6 +88216,8 @@ Ext.define('Ext.resizer.ResizeTracker', {
 
     
     constrainTo: null,
+    
+    proxyCls:  Ext.baseCSSPrefix + 'resizable-proxy',
 
     constructor: function(config) {
         var me = this;
@@ -85395,15 +88270,41 @@ Ext.define('Ext.resizer.ResizeTracker', {
 
     
     getDynamicTarget: function() {
-        var d = this.target;
-        if (this.dynamic) {
-            return d;
-        } else if (!this.proxy) {
-            this.proxy = d.isComponent ? d.getProxy().addCls(Ext.baseCSSPrefix + 'resizable-proxy') : d.createProxy({tag: 'div', cls: Ext.baseCSSPrefix + 'resizable-proxy', id: d.id + '-rzproxy'}, Ext.getBody());
-            this.proxy.removeCls(Ext.baseCSSPrefix + 'proxy-el');
+        var me = this,
+            target = me.target;
+            
+        if (me.dynamic) {
+            return target;
+        } else if (!me.proxy) {
+            me.proxy = me.createProxy(target);
         }
-        this.proxy.show();
-        return this.proxy;
+        me.proxy.show();
+        return me.proxy;
+    },
+    
+    
+    createProxy: function(target){
+        var proxy,
+            cls = this.proxyCls,
+            renderTo;
+            
+        if (target.isComponent) {
+            proxy = target.getProxy().addCls(cls);
+        } else {
+            renderTo = Ext.getBody();
+            if (Ext.scopeResetCSS) {
+                renderTo = Ext.getBody().createChild({
+                    cls: Ext.baseCSSPrefix + 'reset'
+                });
+            }
+            proxy = target.createProxy({
+                tag: 'div',
+                cls: cls,
+                id: target.id + '-rzproxy'
+            }, renderTo);
+        }
+        proxy.removeCls(Ext.baseCSSPrefix + 'proxy-el');
+        return proxy;
     },
 
     onStart: function(e) {
@@ -85674,7 +88575,7 @@ Ext.define('Ext.resizer.SplitterTracker', {
             html: '&#160;'
         });
         overlay.unselectable();
-        overlay.setSize(Ext.core.Element.getViewWidth(true), Ext.core.Element.getViewHeight(true));
+        overlay.setSize(Ext.Element.getViewWidth(true), Ext.Element.getViewHeight(true));
         overlay.show();
         
         
@@ -85846,10 +88747,10 @@ Ext.define('Ext.selection.CellModel', {
     extend: 'Ext.selection.Model',
     alias: 'selection.cellmodel',
     requires: ['Ext.util.KeyNav'],
-    
+
     
     enableKeyNav: true,
-    
+
     
     preventWrap: false,
 
@@ -85857,11 +88758,11 @@ Ext.define('Ext.selection.CellModel', {
         this.addEvents(
             
             'deselect',
-            
+
             
             'select'
         );
-        this.callParent(arguments);    
+        this.callParent(arguments);
     },
 
     bindComponent: function(view) {
@@ -85884,7 +88785,7 @@ Ext.define('Ext.selection.CellModel', {
 
     initKeyNav: function(view) {
         var me = this;
-        
+
         if (!view.rendered) {
             view.on('render', Ext.Function.bind(me.initKeyNav, me, [view], 0), me, {single: true});
             return;
@@ -85905,7 +88806,7 @@ Ext.define('Ext.selection.CellModel', {
             scope: me
         });
     },
-    
+
     getHeaderCt: function() {
         return this.primaryView.headerCt;
     },
@@ -85921,11 +88822,11 @@ Ext.define('Ext.selection.CellModel', {
     onKeyLeft: function(e, t) {
         this.move('left', e);
     },
-    
+
     onKeyRight: function(e, t) {
         this.move('right', e);
     },
-    
+
     move: function(dir, e) {
         var me = this,
             pos = me.primaryView.walkCells(me.getCurrentPosition(), dir, e, me.preventWrap);
@@ -85939,11 +88840,11 @@ Ext.define('Ext.selection.CellModel', {
     getCurrentPosition: function() {
         return this.position;
     },
-    
+
     
     setCurrentPosition: function(pos) {
         var me = this;
-        
+
         if (me.position) {
             me.onCellDeselect(me.position);
         }
@@ -86040,6 +88941,9 @@ Ext.define('Ext.selection.RowModel', {
 
     
     enableKeyNav: true,
+    
+    
+    ignoreRightMouseSelection: true,
 
     constructor: function(){
         this.addEvents(
@@ -86330,8 +89234,20 @@ Ext.define('Ext.selection.RowModel', {
     
     onRowMouseDown: function(view, record, item, index, e) {
         view.el.focus();
+        if (!this.allowRightMouseSelection(e)) {
+            return;
+        }
         this.selectWithEvent(record, e);
     },
+    
+    
+    allowRightMouseSelection: function(e) {
+        var disallow = this.ignoreRightMouseSelection && e.button !== 0;
+        if (disallow) {
+            disallow = this.hasSelection();
+        }
+        return !disallow;
+    },
 
     
     
@@ -86422,25 +89338,54 @@ Ext.define('Ext.selection.CheckboxModel', {
     
     checkOnly: false,
 
+    headerWidth: 24,
+
     
     checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
 
-    bindComponent: function() {
-        this.sortable = false;
-        this.callParent(arguments);
+    bindComponent: function(view) {
+        var me = this;
 
-        var view     = this.views[0],
+        me.sortable = false;
+        me.callParent(arguments);
+        if (!me.hasLockedHeader() || view.headerCt.lockedCt) {
+            
+            view.headerCt.on('headerclick', me.onHeaderClick, me);
+            me.addCheckbox(true);
+            me.mon(view.ownerCt, 'reconfigure', me.addCheckbox, me);
+        }
+    },
+
+    hasLockedHeader: function(){
+        var hasLocked = false;
+        Ext.each(this.views, function(view){
+            if (view.headerCt.lockedCt) {
+                hasLocked = true;
+                return false;
+            }
+        });
+        return hasLocked;
+    },
+
+    
+    addCheckbox: function(initial){
+        var me = this,
+            checkbox = me.injectCheckbox,
+            view = me.views[0],
             headerCt = view.headerCt;
 
-        if (this.injectCheckbox !== false) {
-            if (this.injectCheckbox == 'first') {
-                this.injectCheckbox = 0;
-            } else if (this.injectCheckbox == 'last') {
-                this.injectCheckbox = headerCt.getColumnCount();
+        if (checkbox !== false) {
+            if (checkbox == 'first') {
+                checkbox = 0;
+            } else if (checkbox == 'last') {
+                checkbox = headerCt.getColumnCount();
             }
-            headerCt.add(this.injectCheckbox,  this.getHeaderConfig());
+            headerCt.add(checkbox,  me.getHeaderConfig());
+        }
+
+        if (initial !== true) {
+            view.refresh();
         }
-        headerCt.on('headerclick', this.onHeaderClick, this);
     },
 
     
@@ -86475,17 +89420,21 @@ Ext.define('Ext.selection.CheckboxModel', {
 
     
     getHeaderConfig: function() {
+        var me = this;
+
         return {
             isCheckerHd: true,
             text : '&#160;',
-            width: 24,
+            width: me.headerWidth,
             sortable: false,
-            fixed: true,
+            draggable: false,
+            resizable: false,
             hideable: false,
             menuDisabled: true,
             dataIndex: '',
             cls: Ext.baseCSSPrefix + 'column-header-checkbox ',
-            renderer: Ext.Function.bind(this.renderer, this)
+            renderer: Ext.Function.bind(me.renderer, me),
+            locked: me.hasLockedHeader()
         };
     },
 
@@ -86500,6 +89449,10 @@ Ext.define('Ext.selection.CheckboxModel', {
         view.el.focus();
         var me = this,
             checker = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-checker');
+            
+        if (!me.allowRightMouseSelection(e)) {
+            return;
+        }
 
         
         if (me.checkOnly && !checker) {
@@ -86587,16 +89540,15 @@ Ext.define('Ext.selection.TreeModel', {
     },
     
     onKeyPress: function(e, t) {
-        var selected, checked;
+        var key = e.getKey(),
+            selected, 
+            checked;
         
-        if (e.getKey() === e.SPACE || e.getKey() === e.ENTER) {
+        if (key === e.SPACE || key === e.ENTER) {
             e.stopEvent();
             selected = this.getLastSelected();
-            if (selected && selected.isLeaf()) {
-                checked = selected.get('checked');
-                if (Ext.isBoolean(checked)) {
-                    selected.set('checked', !checked);
-                }
+            if (selected) {
+                this.view.onCheckChange(selected);
             }
         } else {
             this.callParent(arguments);
@@ -86609,11 +89561,13 @@ Ext.define('Ext.slider.Thumb', {
     requires: ['Ext.dd.DragTracker', 'Ext.util.Format'],
     
     topZIndex: 10000,
+
     
+
     
     constructor: function(config) {
         var me = this;
-        
+
         
         Ext.apply(me, config || {}, {
             cls: Ext.baseCSSPrefix + 'slider-thumb',
@@ -86631,14 +89585,14 @@ Ext.define('Ext.slider.Thumb', {
     
     render: function() {
         var me = this;
-        
+
         me.el = me.slider.innerEl.insertFirst({cls: me.cls});
         if (me.disabled) {
             me.disable();
         }
         me.initEvents();
     },
-    
+
     
     move: function(v, animate){
         if(!animate){
@@ -86658,16 +89612,16 @@ Ext.define('Ext.slider.Thumb', {
     bringToFront: function() {
         this.el.setStyle('zIndex', this.topZIndex);
     },
-    
+
     
     sendToBack: function() {
         this.el.setStyle('zIndex', '');
     },
-    
+
     
     enable: function() {
         var me = this;
-        
+
         me.disabled = false;
         if (me.el) {
             me.el.removeCls(me.slider.disabledCls);
@@ -86677,7 +89631,7 @@ Ext.define('Ext.slider.Thumb', {
     
     disable: function() {
         var me = this;
-        
+
         me.disabled = true;
         if (me.el) {
             me.el.addCls(me.slider.disabledCls);
@@ -86715,7 +89669,7 @@ Ext.define('Ext.slider.Thumb', {
     
     onDragStart: function(e){
         var me = this;
-        
+
         me.el.addCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
         me.dragging = true;
         me.dragStartValue = me.value;
@@ -86739,7 +89693,7 @@ Ext.define('Ext.slider.Thumb', {
             if (below !== undefined && newValue <= below.value) {
                 newValue = below.value;
             }
-            
+
             if (above !== undefined && newValue >= above.value) {
                 newValue = above.value;
             }
@@ -86809,12 +89763,12 @@ Ext.define('Ext.slider.Tip', {
     minWidth: 10,
     alias: 'widget.slidertip',
     offsets : [0, -10],
-    
+
     isSliderTip: true,
 
     init: function(slider) {
         var me = this;
-        
+
         slider.on({
             scope    : me,
             dragstart: me.onSlide,
@@ -86852,11 +89806,12 @@ Ext.define('Ext.slider.Multi', {
         'Ext.layout.component.field.Slider'
     ],
 
+    
     fieldSubTpl: [
-        '<div class="' + Ext.baseCSSPrefix + 'slider {fieldCls} {vertical}" aria-valuemin="{minValue}" aria-valuemax="{maxValue}" aria-valuenow="{value}" aria-valuetext="{value}">',
-            '<div class="' + Ext.baseCSSPrefix + 'slider-end" role="presentation">',
-                '<div class="' + Ext.baseCSSPrefix + 'slider-inner" role="presentation">',
-                    '<a class="' + Ext.baseCSSPrefix + 'slider-focus" href="#" tabIndex="-1" hidefocus="on" role="presentation"></a>',
+        '<div id="{id}" class="' + Ext.baseCSSPrefix + 'slider {fieldCls} {vertical}" aria-valuemin="{minValue}" aria-valuemax="{maxValue}" aria-valuenow="{value}" aria-valuetext="{value}">',
+            '<div id="{cmpId}-endEl" class="' + Ext.baseCSSPrefix + 'slider-end" role="presentation">',
+                '<div id="{cmpId}-innerEl" class="' + Ext.baseCSSPrefix + 'slider-inner" role="presentation">',
+                    '<a id="{cmpId}-focusEl" class="' + Ext.baseCSSPrefix + 'slider-focus" href="#" tabIndex="-1" hidefocus="on" role="presentation"></a>',
                 '</div>',
             '</div>',
         '</div>',
@@ -86872,14 +89827,19 @@ Ext.define('Ext.slider.Multi', {
 
     
     vertical: false,
+
     
     minValue: 0,
+
     
     maxValue: 100,
+
     
     decimalPrecision: 0,
+
     
     keyIncrement: 1,
+
     
     increment: 0,
 
@@ -86888,6 +89848,7 @@ Ext.define('Ext.slider.Multi', {
 
     
     clickToChange : true,
+
     
     animate: true,
 
@@ -87029,11 +89990,7 @@ Ext.define('Ext.slider.Multi', {
             value: me.value
         });
 
-        Ext.applyIf(me.renderSelectors, {
-            endEl: '.' + Ext.baseCSSPrefix + 'slider-end',
-            innerEl: '.' + Ext.baseCSSPrefix + 'slider-inner',
-            focusEl: '.' + Ext.baseCSSPrefix + 'slider-focus'
-        });
+        me.addChildEls('endEl', 'innerEl', 'focusEl');
 
         me.callParent(arguments);
 
@@ -87219,7 +90176,9 @@ Ext.define('Ext.slider.Multi', {
             t;
 
         me.minValue = val;
-        me.inputEl.dom.setAttribute('aria-valuemin', val);
+        if (me.rendered) {
+            me.inputEl.dom.setAttribute('aria-valuemin', val);
+        }
 
         for (; i < len; ++i) {
             t = thumbs[i];
@@ -87237,7 +90196,9 @@ Ext.define('Ext.slider.Multi', {
             t;
 
         me.maxValue = val;
-        me.inputEl.dom.setAttribute('aria-valuemax', val);
+        if (me.rendered) {
+            me.inputEl.dom.setAttribute('aria-valuemax', val);
+        }
 
         for (; i < len; ++i) {
             t = thumbs[i];
@@ -87408,7 +90369,7 @@ Ext.define('Ext.slider.Multi', {
     beforeDestroy : function() {
         var me = this;
 
-        Ext.destroyMembers(me.innerEl, me.endEl, me.focusEl);
+        Ext.destroy(me.innerEl, me.endEl, me.focusEl);
         Ext.each(me.thumbs, function(thumb) {
             Ext.destroy(thumb);
         }, me);
@@ -87481,7 +90442,7 @@ Ext.define('Ext.slider.Single', {
 Ext.define('Ext.tab.Tab', {
     extend: 'Ext.button.Button',
     alias: 'widget.tab',
-    
+
     requires: [
         'Ext.layout.component.Tab',
         'Ext.util.KeyNav'
@@ -87495,7 +90456,7 @@ Ext.define('Ext.tab.Tab', {
 
     
     activeCls: 'active',
-    
+
     
 
     
@@ -87515,7 +90476,7 @@ Ext.define('Ext.tab.Tab', {
     scale: false,
 
     position: 'top',
-    
+
     initComponent: function() {
         var me = this;
 
@@ -87532,7 +90493,7 @@ Ext.define('Ext.tab.Tab', {
             
             'close'
         );
-        
+
         me.callParent(arguments);
 
         if (me.card) {
@@ -87542,36 +90503,55 @@ Ext.define('Ext.tab.Tab', {
 
     
     onRender: function() {
-        var me = this;
-        
+        var me = this,
+            tabBar = me.up('tabbar'),
+            tabPanel = me.up('tabpanel');
+
         me.addClsWithUI(me.position);
-        
+
         
         
 
         me.syncClosableUI();
 
-        me.callParent(arguments);
         
+        if (!me.minWidth) {
+            me.minWidth = (tabBar) ? tabBar.minTabWidth : me.minWidth;
+            if (!me.minWidth && tabPanel) {
+                me.minWidth = tabPanel.minTabWidth;
+            }
+            if (me.minWidth && me.iconCls) {
+                me.minWidth += 25;
+            }
+        }
+        if (!me.maxWidth) {
+            me.maxWidth = (tabBar) ? tabBar.maxTabWidth : me.maxWidth;
+            if (!me.maxWidth && tabPanel) {
+                me.maxWidth = tabPanel.maxTabWidth;
+            }
+        }
+
+        me.callParent(arguments);
+
         if (me.active) {
             me.activate(true);
         }
 
         me.syncClosableElements();
-        
+
         me.keyNav = Ext.create('Ext.util.KeyNav', me.el, {
             enter: me.onEnterKey,
             del: me.onDeleteKey,
             scope: me
         });
     },
-    
+
     
     enable : function(silent) {
         var me = this;
 
         me.callParent(arguments);
-        
+
         me.removeClsWithUI(me.position + '-disabled');
 
         return me;
@@ -87580,14 +90560,14 @@ Ext.define('Ext.tab.Tab', {
     
     disable : function(silent) {
         var me = this;
-        
+
         me.callParent(arguments);
-        
+
         me.addClsWithUI(me.position + '-disabled');
 
         return me;
     },
-    
+
     
     onDestroy: function() {
         var me = this;
@@ -87692,34 +90672,34 @@ Ext.define('Ext.tab.Tab', {
             }
         }
     },
-    
+
     
     fireClose: function(){
         this.fireEvent('close', this);
     },
-    
+
     
     onEnterKey: function(e) {
         var me = this;
-        
+
         if (me.tabBar) {
             me.tabBar.onClick(e, me.el);
         }
     },
-    
+
    
     onDeleteKey: function(e) {
         var me = this;
-        
+
         if (me.closable) {
             me.onCloseClick();
         }
     },
-    
+
     
     activate : function(supressEvent) {
         var me = this;
-        
+
         me.active = true;
         me.addClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
 
@@ -87731,10 +90711,10 @@ Ext.define('Ext.tab.Tab', {
     
     deactivate : function(supressEvent) {
         var me = this;
-        
+
         me.active = false;
         me.removeClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
-        
+
         if (supressEvent !== true) {
             me.fireEvent('deactivate', me);
         }
@@ -87752,6 +90732,12 @@ Ext.define('Ext.tab.Bar', {
         'Ext.FocusManager'
     ],
 
+    isTabBar: true,
+    
+    
+    
+    
+
     
     defaultType: 'tab',
 
@@ -87760,15 +90746,13 @@ Ext.define('Ext.tab.Bar', {
 
     
     renderTpl: [
-        '<div class="{baseCls}-body<tpl if="ui"> {baseCls}-body-{ui}<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>',
-        '<div class="{baseCls}-strip<tpl if="ui"> {baseCls}-strip-{ui}<tpl for="uiCls"> {parent.baseCls}-strip-{parent.ui}-{.}</tpl></tpl>"></div>'
+        '<div id="{id}-body" class="{baseCls}-body <tpl if="bodyCls"> {bodyCls}</tpl> <tpl if="ui"> {baseCls}-body-{ui}<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>',
+        '<div id="{id}-strip" class="{baseCls}-strip<tpl if="ui"> {baseCls}-strip-{ui}<tpl for="uiCls"> {parent.baseCls}-strip-{parent.ui}-{.}</tpl></tpl>"></div>'
     ],
 
     
-    minTabWidth: 30,
 
     
-    maxTabWidth: undefined,
 
     
     initComponent: function() {
@@ -87778,7 +90762,7 @@ Ext.define('Ext.tab.Bar', {
         if (me.plain) {
             me.setUI(me.ui + '-plain');
         }
-        
+
         me.addClsWithUI(me.dock);
 
         me.addEvents(
@@ -87786,40 +90770,43 @@ Ext.define('Ext.tab.Bar', {
             'change'
         );
 
-        Ext.applyIf(me.renderSelectors, {
-            body : '.' + me.baseCls + '-body',
-            strip: '.' + me.baseCls + '-strip'
-        });
+        me.addChildEls('body', 'strip');
         me.callParent(arguments);
 
         
         me.layout.align = (me.orientation == 'vertical') ? 'left' : 'top';
         me.layout.overflowHandler = Ext.create('Ext.layout.container.boxOverflow.Scroller', me.layout);
-        me.items.removeAt(me.items.getCount() - 1);
-        me.items.removeAt(me.items.getCount() - 1);
-        
+
+        me.remove(me.titleCmp);
+        delete me.titleCmp;
+
         
         keys = me.orientation == 'vertical' ? ['up', 'down'] : ['left', 'right'];
         Ext.FocusManager.subscribe(me, {
             keys: keys
         });
+
+        Ext.apply(me.renderData, {
+            bodyCls: me.bodyCls
+        });
     },
 
     
     onAdd: function(tab) {
-        var me = this,
-            tabPanel = me.tabPanel,
-            hasOwner = !!tabPanel;
-
-        me.callParent(arguments);
-        tab.position = me.dock;
-        if (hasOwner) {
-            tab.minWidth = tabPanel.minTabWidth;
+        tab.position = this.dock;
+        this.callParent(arguments);
+    },
+    
+    onRemove: function(tab) {
+        var me = this;
+        
+        if (tab === me.previousTab) {
+            me.previousTab = null;
         }
-        else {
-            tab.minWidth = me.minTabWidth + (tab.iconCls ? 25 : 0);
+        if (me.items.getCount() === 0) {
+            me.activeTab = null;
         }
-        tab.maxWidth = me.maxTabWidth || (hasOwner ? tabPanel.maxTabWidth : undefined);
+        me.callParent(arguments);    
     },
 
     
@@ -87832,12 +90819,12 @@ Ext.define('Ext.tab.Bar', {
             delegate: '.' + Ext.baseCSSPrefix + 'tab'
         });
         me.callParent(arguments);
-        
+
     },
 
     afterComponentLayout : function() {
         var me = this;
-        
+
         me.callParent(arguments);
         me.strip.setWidth(me.el.getWidth());
     },
@@ -87846,8 +90833,7 @@ Ext.define('Ext.tab.Bar', {
     onClick: function(e, target) {
         
         var tab = Ext.getCmp(target.id),
-            tabPanel = this.tabPanel,
-            allowActive = true;
+            tabPanel = this.tabPanel;
 
         target = e.getTarget();
 
@@ -87872,13 +90858,13 @@ Ext.define('Ext.tab.Bar', {
             card = tab.card,
             tabPanel = me.tabPanel,
             nextTab;
-            
+
         if (card && card.fireEvent('beforeclose', card) === false) {
             return false;
         }
 
         if (tab.active && me.items.getCount() > 1) {
-            nextTab = tab.next('tab') || me.items.items[0];
+            nextTab = me.previousTab || tab.next('tab') || me.items.first();
             me.setActiveTab(nextTab);
             if (tabPanel) {
                 tabPanel.setActiveTab(nextTab.card);
@@ -87892,7 +90878,7 @@ Ext.define('Ext.tab.Bar', {
             card.fireEvent('close', card);
             tabPanel.remove(card);
         }
-        
+
         if (nextTab) {
             nextTab.focus();
         }
@@ -87905,19 +90891,21 @@ Ext.define('Ext.tab.Bar', {
         }
         var me = this;
         if (me.activeTab) {
+            me.previousTab = me.activeTab;
             me.activeTab.deactivate();
         }
         tab.activate();
-        
+
         if (me.rendered) {
             me.layout.layout();
-            tab.el.scrollIntoView(me.layout.getRenderTarget());
+            tab.el && tab.el.scrollIntoView(me.layout.getRenderTarget());
         }
         me.activeTab = tab;
         me.fireEvent('change', me, tab, tab.card);
     }
 });
 
+
 Ext.define('Ext.tab.Panel', {
     extend: 'Ext.panel.Panel',
     alias: 'widget.tabpanel',
@@ -87927,7 +90915,11 @@ Ext.define('Ext.tab.Panel', {
 
     
     tabPosition : 'top',
+
     
+
+    
+
     
 
     
@@ -87942,6 +90934,10 @@ Ext.define('Ext.tab.Panel', {
     itemCls: 'x-tabpanel-child',
 
     
+    minTabWidth: undefined,
+
+    
+    maxTabWidth: undefined,
 
     
     deferredRender : true,
@@ -87993,7 +90989,7 @@ Ext.define('Ext.tab.Panel', {
     afterInitialLayout: function() {
         var me = this,
             card = me.getComponent(me.activeTab);
-            
+
         if (card) {
             me.layout.setActiveItem(card);
         }
@@ -88007,17 +91003,17 @@ Ext.define('Ext.tab.Panel', {
         card = me.getComponent(card);
         if (card) {
             previous = me.getActiveTab();
-            
+
             if (previous && previous !== card && me.fireEvent('beforetabchange', me, card, previous) === false) {
                 return false;
             }
-            
+
             me.tabBar.setActiveTab(card.tab);
             me.activeTab = card;
             if (me.rendered) {
                 me.layout.setActiveItem(card);
             }
-            
+
             if (previous && previous !== card) {
                 me.fireEvent('tabchange', me, card, previous);
             }
@@ -88046,13 +91042,13 @@ Ext.define('Ext.tab.Panel', {
                 hidden: item.hidden,
                 tabBar: me.tabBar
             };
-            
+
         if (item.closeText) {
             defaultConfig.closeText = item.closeText;
         }
         cfg = Ext.applyIf(cfg, defaultConfig);
         item.tab = me.tabBar.insert(index, cfg);
-        
+
         item.on({
             scope : me,
             enable: me.onItemEnable,
@@ -88079,31 +91075,31 @@ Ext.define('Ext.tab.Panel', {
             me.setActiveTab(0);
         }
     },
-    
+
     
     onItemEnable: function(item){
         item.tab.enable();
     },
 
-        
+    
     onItemDisable: function(item){
         item.tab.disable();
     },
-    
+
     
     onItemBeforeShow: function(item) {
         if (item !== this.activeTab) {
             this.setActiveTab(item);
             return false;
-        }    
+        }
     },
-    
+
     
     onItemIconChange: function(item, newIconCls) {
         item.tab.setIconCls(newIconCls);
         this.getTabBar().doLayout();
     },
-    
+
     
     onItemTitleChange: function(item, newTitle) {
         item.tab.setText(newTitle);
@@ -88116,12 +91112,14 @@ Ext.define('Ext.tab.Panel', {
         var me = this,
             items = me.items,
             
+            
+            
             hasItemsLeft = items.getCount() > 1;
 
         if (me.destroying || !hasItemsLeft) {
             me.activeTab = null;
         } else if (item === me.activeTab) {
-             me.setActiveTab(item.next() || items.getAt(0)); 
+             me.setActiveTab(item.next() || items.getAt(0));
         }
         me.callParent(arguments);
 
@@ -88133,7 +91131,7 @@ Ext.define('Ext.tab.Panel', {
     
     onRemove: function(item, autoDestroy) {
         var me = this;
-        
+
         item.un({
             scope : me,
             enable: me.onItemEnable,
@@ -88193,7 +91191,7 @@ Ext.define('Ext.tree.Column', {
                                 record.get('checked') ? 'aria-checked="true"' : ''
                             ));
                             if (record.get('checked')) {
-                                metaData.tdCls += (' ' + Ext.baseCSSPrefix + 'tree-checked');
+                                metaData.tdCls += (' ' + treePrefix + 'checked');
                             }
                         }
                         if (record.isLast()) {
@@ -88221,12 +91219,14 @@ Ext.define('Ext.tree.Column', {
                 record = record.parentNode;
             }
             if (href) {
-                formattedValue = format('<a href="{0}" target="{1}">{2}</a>', href, target, formattedValue);
+                buf.push('<a href="', href, '" target="', target, '">', formattedValue, '</a>');
+            } else {
+                buf.push(formattedValue);
             }
             if (cls) {
                 metaData.tdCls += ' ' + cls;
             }
-            return buf.join("") + formattedValue;
+            return buf.join('');
         };
         this.callParent(arguments);
     },
@@ -88247,6 +91247,11 @@ Ext.define('Ext.tree.View', {
     checkboxSelector: '.' + Ext.baseCSSPrefix + 'tree-checkbox',
     expanderIconOverCls: Ext.baseCSSPrefix + 'tree-expander-over',
 
+    
+    
+    
+    nodeAnimWrapCls: Ext.baseCSSPrefix + 'tree-animator-wrap',
+
     blockRefresh: true,
 
     
@@ -88284,7 +91289,17 @@ Ext.define('Ext.tree.View', {
         me.animQueue = {};
         me.callParent(arguments);
     },
-    
+
+    processUIEvent: function(e) {
+        
+        
+        
+        if (e.getTarget('.' + this.nodeAnimWrapCls, this.el)) {
+            return false;
+        }
+        return this.callParent(arguments);
+    },
+
     onClear: function(){
         this.store.removeAll();    
     },
@@ -88300,7 +91315,6 @@ Ext.define('Ext.tree.View', {
     
     onRender: function() {
         var me = this,
-            opts = {delegate: me.expanderSelector},
             el;
 
         me.callParent(arguments);
@@ -88320,14 +91334,20 @@ Ext.define('Ext.tree.View', {
     },
 
     onCheckboxChange: function(e, t) {
-        var item = e.getTarget(this.getItemSelector(), this.getTargetEl()),
-            record, value;
+        var me = this,
+            item = e.getTarget(me.getItemSelector(), me.getTargetEl());
             
         if (item) {
-            record = this.getRecord(item);
-            value = !record.get('checked');
-            record.set('checked', value);
-            this.fireEvent('checkchange', record, value);
+            me.onCheckChange(me.getRecord(item));
+        }
+    },
+    
+    onCheckChange: function(record){
+        var checked = record.get('checked');
+        if (Ext.isBoolean(checked)) {
+            checked = !checked;
+            record.set('checked', checked);
+            this.fireEvent('checkchange', record, checked);
         }
     },
 
@@ -88363,7 +91383,7 @@ Ext.define('Ext.tree.View', {
             tag: 'tr',
             html: [
                 '<td colspan="' + headerCt.getColumnCount() + '">',
-                    '<div class="' + Ext.baseCSSPrefix + 'tree-animator-wrap' + '">',
+                    '<div class="' + this.nodeAnimWrapCls + '">',
                         '<table class="' + Ext.baseCSSPrefix + 'grid-table" style="width: ' + headerCt.getFullWidth() + 'px;"><tbody>',
                             thHtml,
                         '</tbody></table>',
@@ -88450,6 +91470,36 @@ Ext.define('Ext.tree.View', {
         }
     },
     
+    beginBulkUpdate: function(){
+        this.bulkUpdate = true;
+        this.ownerCt.changingScrollbars = true;  
+    },
+    
+    endBulkUpdate: function(){
+        var me = this,
+            ownerCt = me.ownerCt;
+        
+        me.bulkUpdate = false;
+        me.ownerCt.changingScrollbars = true;  
+        me.resetScrollers();  
+    },
+    
+    onRemove : function(ds, record, index) {
+        var me = this,
+            bulk = me.bulkUpdate;
+
+        me.doRemove(record, index);
+        if (!bulk) {
+            me.updateIndexes(index);
+        }
+        if (me.store.getCount() === 0){
+            me.refresh();
+        }
+        if (!bulk) {
+            me.fireEvent('itemremove', record, index);
+        }
+    },
+    
     doRemove: function(record, index) {
         
         
@@ -88537,10 +91587,12 @@ Ext.define('Ext.tree.View', {
     },
     
     resetScrollers: function(){
-        var panel = this.panel;
-        
-        panel.determineScrollbars();
-        panel.invalidateScroller();
+        if (!this.bulkUpdate) {
+            var panel = this.panel;
+            
+            panel.determineScrollbars();
+            panel.invalidateScroller();
+        }
     },
 
     onBeforeCollapse: function(parent, records, index) {
@@ -88701,45 +91753,45 @@ Ext.define('Ext.tree.Panel', {
     requires: ['Ext.tree.View', 'Ext.selection.TreeModel', 'Ext.tree.Column'],
     viewType: 'treeview',
     selType: 'treemodel',
-    
+
     treeCls: Ext.baseCSSPrefix + 'tree-panel',
 
     deferRowRender: false,
 
     
     lines: true,
-    
+
     
     useArrows: false,
-    
+
     
     singleExpand: false,
-    
+
     ddConfig: {
         enableDrag: true,
         enableDrop: true
     },
+
     
-    
-            
+
     
     rootVisible: true,
+
     
-        
     displayField: 'text',
 
     
     root: null,
-    
+
     
     
     normalCfgCopy: ['displayField', 'root', 'singleExpand', 'useArrows', 'lines', 'rootVisible', 'scroll'],
     lockedCfgCopy: ['displayField', 'root', 'singleExpand', 'useArrows', 'lines', 'rootVisible'],
 
     
+
     
-     
-    
+
     constructor: function(config) {
         config = config || {};
         if (config.animate === undefined) {
@@ -88747,10 +91799,10 @@ Ext.define('Ext.tree.Panel', {
         }
         this.enableAnimations = config.animate;
         delete config.animate;
-        
+
         this.callParent([config]);
     },
-    
+
     initComponent: function() {
         var me = this,
             cls = [me.treeCls];
@@ -88759,13 +91811,13 @@ Ext.define('Ext.tree.Panel', {
             cls.push(Ext.baseCSSPrefix + 'tree-arrows');
             me.lines = false;
         }
-        
+
         if (me.lines) {
             cls.push(Ext.baseCSSPrefix + 'tree-lines');
         } else if (!me.useArrows) {
             cls.push(Ext.baseCSSPrefix + 'tree-no-lines');
         }
-        
+
         if (Ext.isString(me.store)) {
             me.store = Ext.StoreMgr.lookup(me.store);
         } else if (!me.store || Ext.isObject(me.store) && !me.store.isStore) {
@@ -88781,14 +91833,14 @@ Ext.define('Ext.tree.Panel', {
             if (me.folderSort !== undefined) {
                 me.store.folderSort = me.folderSort;
                 me.store.sort();
-            }            
+            }
         }
+
         
         
         
         
-        
-        
+
         me.viewConfig = Ext.applyIf(me.viewConfig || {}, {
             rootVisible: me.rootVisible,
             animate: me.enableAnimations,
@@ -88796,59 +91848,59 @@ Ext.define('Ext.tree.Panel', {
             node: me.store.getRootNode(),
             hideHeaders: me.hideHeaders
         });
-        
+
         me.mon(me.store, {
             scope: me,
             rootchange: me.onRootChange,
             clear: me.onClear
         });
-    
+
         me.relayEvents(me.store, [
             
             'beforeload',
 
             
-            'load'   
+            'load'
         ]);
-        
+
         me.store.on({
             
             append: me.createRelayer('itemappend'),
-            
+
             
             remove: me.createRelayer('itemremove'),
-            
+
             
             move: me.createRelayer('itemmove'),
-            
+
             
             insert: me.createRelayer('iteminsert'),
-            
+
             
             beforeappend: me.createRelayer('beforeitemappend'),
-            
+
             
             beforeremove: me.createRelayer('beforeitemremove'),
-            
+
             
             beforemove: me.createRelayer('beforeitemmove'),
-            
+
             
             beforeinsert: me.createRelayer('beforeiteminsert'),
-             
+
             
             expand: me.createRelayer('itemexpand'),
-             
+
             
             collapse: me.createRelayer('itemcollapse'),
-             
+
             
             beforeexpand: me.createRelayer('beforeitemexpand'),
-             
+
             
             beforecollapse: me.createRelayer('beforeitemcollapse')
         });
-        
+
         
         if (!me.columns) {
             if (me.initialConfig.hideHeaders === undefined) {
@@ -88858,21 +91910,21 @@ Ext.define('Ext.tree.Panel', {
                 xtype    : 'treecolumn',
                 text     : 'Name',
                 flex     : 1,
-                dataIndex: me.displayField         
+                dataIndex: me.displayField
             }];
         }
-        
+
         if (me.cls) {
             cls.push(me.cls);
         }
         me.cls = cls.join(' ');
         me.callParent();
-        
+
         me.relayEvents(me.getView(), [
             
             'checkchange'
         ]);
-            
+
         
         if (!me.getView().rootVisible && !me.getRootNode()) {
             me.setRootNode({
@@ -88880,19 +91932,21 @@ Ext.define('Ext.tree.Panel', {
             });
         }
     },
-    
+
     onClear: function(){
         this.view.onClear();
     },
+
     
     setRootNode: function() {
         return this.store.setRootNode.apply(this.store, arguments);
     },
+
     
     getRootNode: function() {
         return this.store.getRootNode();
     },
-    
+
     onRootChange: function(root) {
         this.view.setRootNode(root);
     },
@@ -88901,29 +91955,45 @@ Ext.define('Ext.tree.Panel', {
     getChecked: function() {
         return this.getView().getChecked();
     },
-    
+
     isItemChecked: function(rec) {
         return rec.get('checked');
     },
-        
+
     
     expandAll : function(callback, scope) {
-        var root = this.getRootNode();
+        var root = this.getRootNode(),
+            animate = this.enableAnimations,
+            view = this.getView();
         if (root) {
+            if (!animate) {
+                view.beginBulkUpdate();
+            }
             root.expand(true, callback, scope);
+            if (!animate) {
+                view.endBulkUpdate();
+            }
         }
     },
 
     
     collapseAll : function(callback, scope) {
-        var root = this.getRootNode();
+        var root = this.getRootNode(),
+            animate = this.enableAnimations,
+            view = this.getView();
+
         if (root) {
-            if (this.getView().rootVisible) {
-                root.collapse(true, callback, scope);
+            if (!animate) {
+                view.beginBulkUpdate();
             }
-            else {
+            if (view.rootVisible) {
+                root.collapse(true, callback, scope);
+            } else {
                 root.collapseChildren(true, callback, scope);
             }
+            if (!animate) {
+                view.endBulkUpdate();
+            }
         }
     },
 
@@ -88935,22 +92005,22 @@ Ext.define('Ext.tree.Panel', {
             view = me.getView(),
             keys,
             expander;
-        
+
         field = field || me.getRootNode().idProperty;
         separator = separator || '/';
-        
+
         if (Ext.isEmpty(path)) {
             Ext.callback(callback, scope || me, [false, null]);
             return;
         }
-        
+
         keys = path.split(separator);
         if (current.get(field) != keys[1]) {
             
             Ext.callback(callback, scope || me, [false, current]);
             return;
         }
-        
+
         expander = function(){
             if (++index === keys.length) {
                 Ext.callback(callback, scope || me, [true, current]);
@@ -88966,19 +92036,19 @@ Ext.define('Ext.tree.Panel', {
         };
         current.expand(false, expander);
     },
-    
+
     
     selectPath: function(path, field, separator, callback, scope) {
         var me = this,
             keys,
             last;
-        
+
         field = field || me.getRootNode().idProperty;
         separator = separator || '/';
-        
+
         keys = path.split(separator);
         last = keys.pop();
-        
+
         me.expandPath(keys.join(separator), field, separator, function(success, node){
             var doSuccess = false;
             if (success && node) {
@@ -89447,13 +92517,13 @@ Ext.define('Ext.tree.plugin.TreeViewDragDrop', {
 
     
     enableDrag: true,
-    
+
     
     nodeHighlightColor: 'c3daf9',
-    
+
     
     nodeHighlightOnDrop: Ext.enableFx,
-    
+
     
     nodeHighlightOnRepair: Ext.enableFx,
 
@@ -89564,7 +92634,7 @@ Ext.define('Ext.util.CSS', function() {
             this.rules = {};
             this.initialized = false;
         },
+
         
         createStyleSheet : function(cssText, id) {
             var ss,
@@ -89633,7 +92703,7 @@ Ext.define('Ext.util.CSS', function() {
                 for (; i >= 0; --i) {
                     selectorText = ssRules[i].selectorText;
                     if (selectorText) {
+
                         
                         selectorText = selectorText.split(',');
                         selectors = selectorText.length;
@@ -89658,7 +92728,7 @@ Ext.define('Ext.util.CSS', function() {
                         if (!ds[i].disabled) {
                             this.cacheStyleSheet(ds[i]);
                         }
-                    } catch(e) {} 
+                    } catch(e) {}
                 }
             }
             return rules;
@@ -89704,7 +92774,7 @@ Ext.define('Ext.util.History', {
     mixins: {
         observable: 'Ext.util.Observable'
     },
-    
+
     constructor: function() {
         var me = this;
         me.oldIEMode = Ext.isIE6 || Ext.isIE7 || !Ext.isStrict && Ext.isIE8;
@@ -89713,18 +92783,18 @@ Ext.define('Ext.util.History', {
         me.ready = false;
         me.currentToken = null;
     },
-    
+
     getHash: function() {
         var href = window.location.href,
             i = href.indexOf("#");
-            
+
         return i >= 0 ? href.substr(i + 1) : null;
     },
 
     doSave: function() {
         this.hiddenField.value = this.currentToken;
     },
-    
+
 
     handleStateChange: function(token) {
         this.currentToken = token;
@@ -89732,8 +92802,8 @@ Ext.define('Ext.util.History', {
     },
 
     updateIFrame: function(token) {
-        var html = '<html><body><div id="state">' + 
-                    Ext.util.Format.htmlEncode(token) + 
+        var html = '<html><body><div id="state">' +
+                    Ext.util.Format.htmlEncode(token) +
                     '</div></body></html>';
 
         try {
@@ -89750,17 +92820,17 @@ Ext.define('Ext.util.History', {
     checkIFrame: function () {
         var me = this,
             contentWindow = me.iframe.contentWindow;
-            
+
         if (!contentWindow || !contentWindow.document) {
             Ext.Function.defer(this.checkIFrame, 10, this);
             return;
         }
-       
+
         var doc = contentWindow.document,
             elem = doc.getElementById("state"),
             oldToken = elem ? elem.innerText : null,
             oldHash = me.getHash();
-           
+
         Ext.TaskManager.start({
             run: function () {
                 var doc = contentWindow.document,
@@ -89778,17 +92848,17 @@ Ext.define('Ext.util.History', {
                     oldHash = newHash;
                     me.updateIFrame(newHash);
                 }
-            }, 
+            },
             interval: 50,
             scope: me
         });
         me.ready = true;
-        me.fireEvent('ready', me);            
+        me.fireEvent('ready', me);
     },
 
     startUp: function () {
         var me = this;
-        
+
         me.currentToken = me.hiddenField.value || this.getHash();
 
         if (me.oldIEMode) {
@@ -89810,7 +92880,7 @@ Ext.define('Ext.util.History', {
             me.ready = true;
             me.fireEvent('ready', me);
         }
-        
+
     },
 
     
@@ -89821,32 +92891,32 @@ Ext.define('Ext.util.History', {
     
     init: function (onReady, scope) {
         var me = this;
-        
+
         if (me.ready) {
             Ext.callback(onReady, scope, [me]);
             return;
         }
-        
+
         if (!Ext.isReady) {
             Ext.onReady(function() {
                 me.init(onReady, scope);
             });
             return;
         }
-        
+
         me.hiddenField = Ext.getDom(me.fieldId);
-        
+
         if (me.oldIEMode) {
             me.iframe = Ext.getDom(me.iframeId);
         }
-        
+
         me.addEvents(
             
             'ready',
             
             'change'
         );
-        
+
         if (onReady) {
             me.on('ready', onReady, scope, {single: true});
         }
@@ -89856,13 +92926,13 @@ Ext.define('Ext.util.History', {
     
     add: function (token, preventDup) {
         var me = this;
-        
+
         if (preventDup !== false) {
             if (me.getToken() === token) {
                 return true;
             }
         }
-        
+
         if (me.oldIEMode) {
             return me.updateIFrame(token);
         } else {