add extjs 6.0.1 sources

[extjs.git] / extjs / build / packages / ux / modern / ux-debug.js

/**
 * This is a base class for more advanced "simlets" (simulated servers). A simlet is asked
 * to provide a response given a {@link Ext.ux.ajax.SimXhr} instance.
 */\r
Ext.define('Ext.ux.ajax.Simlet', function() {\r
    var urlRegex = /([^?#]*)(#.*)?$/,\r
        dateRegex = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/,\r
        intRegex = /^[+-]?\d+$/,\r
        floatRegex = /^[+-]?\d+\.\d+$/;\r
    function parseParamValue(value) {\r
        var m;\r
        if (Ext.isDefined(value)) {\r
            value = decodeURIComponent(value);\r
            if (intRegex.test(value)) {\r
                value = parseInt(value, 10);\r
            } else if (floatRegex.test(value)) {\r
                value = parseFloat(value);\r
            } else if (!!(m = dateRegex.test(value))) {\r
                value = new Date(Date.UTC(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +m[6]));\r
            }\r
        }\r
        return value;\r
    }\r
    return {\r
        alias: 'simlet.basic',\r
        isSimlet: true,\r
        responseProps: [\r
            'responseText',\r
            'responseXML',\r
            'status',\r
            'statusText'\r
        ],\r
        /**
         * @cfg {Number} responseText
         */\r
        /**
         * @cfg {Number} responseXML
         */\r
        /**
         * @cfg {Object} responseHeaders
         */\r
        /**
         * @cfg {Number} status
         */\r
        status: 200,\r
        /**
         * @cfg {String} statusText
         */\r
        statusText: 'OK',\r
        constructor: function(config) {\r
            Ext.apply(this, config);\r
        },\r
        doGet: function(ctx) {\r
            var me = this,\r
                ret = {};\r
            Ext.Array.forEach(me.responseProps, function(prop) {\r
                if (prop in me) {\r
                    ret[prop] = me[prop];\r
                }\r
            });\r
            return ret;\r
        },\r
        doPost: function(ctx) {\r
            var me = this,\r
                ret = {};\r
            Ext.Array.forEach(me.responseProps, function(prop) {\r
                if (prop in me) {\r
                    ret[prop] = me[prop];\r
                }\r
            });\r
            return ret;\r
        },\r
        doRedirect: function(ctx) {\r
            return false;\r
        },\r
        doDelete: function(ctx) {\r
            var me = this,\r
                xhr = ctx.xhr,\r
                records = xhr.options.records;\r
            me.removeFromData(ctx, records);\r
        },\r
        /**
         * Performs the action requested by the given XHR and returns an object to be applied
         * on to the XHR (containing `status`, `responseText`, etc.). For the most part,
         * this is delegated to `doMethod` methods on this class, such as `doGet`.
         *
         * @param {Ext.ux.ajax.SimXhr} xhr The simulated XMLHttpRequest instance.
         * @return {Object} The response properties to add to the XMLHttpRequest.
         */\r
        exec: function(xhr) {\r
            var me = this,\r
                ret = {},\r
                method = 'do' + Ext.String.capitalize(xhr.method.toLowerCase()),\r
                // doGet\r
                fn = me[method];\r
            if (fn) {\r
                ret = fn.call(me, me.getCtx(xhr.method, xhr.url, xhr));\r
            } else {\r
                ret = {\r
                    status: 405,\r
                    statusText: 'Method Not Allowed'\r
                };\r
            }\r
            return ret;\r
        },\r
        getCtx: function(method, url, xhr) {\r
            return {\r
                method: method,\r
                params: this.parseQueryString(url),\r
                url: url,\r
                xhr: xhr\r
            };\r
        },\r
        openRequest: function(method, url, options, async) {\r
            var ctx = this.getCtx(method, url),\r
                redirect = this.doRedirect(ctx),\r
                xhr;\r
            if (options.action === 'destroy') {\r
                method = 'delete';\r
            }\r
            if (redirect) {\r
                xhr = redirect;\r
            } else {\r
                xhr = new Ext.ux.ajax.SimXhr({\r
                    mgr: this.manager,\r
                    simlet: this,\r
                    options: options\r
                });\r
                xhr.open(method, url, async);\r
            }\r
            return xhr;\r
        },\r
        parseQueryString: function(str) {\r
            var m = urlRegex.exec(str),\r
                ret = {},\r
                key, value, i, n;\r
            if (m && m[1]) {\r
                var pair,\r
                    parts = m[1].split('&');\r
                for (i = 0 , n = parts.length; i < n; ++i) {\r
                    if ((pair = parts[i].split('='))[0]) {\r
                        key = decodeURIComponent(pair.shift());\r
                        value = parseParamValue((pair.length > 1) ? pair.join('=') : pair[0]);\r
                        if (!(key in ret)) {\r
                            ret[key] = value;\r
                        } else if (Ext.isArray(ret[key])) {\r
                            ret[key].push(value);\r
                        } else {\r
                            ret[key] = [\r
                                ret[key],\r
                                value\r
                            ];\r
                        }\r
                    }\r
                }\r
            }\r
            return ret;\r
        },\r
        redirect: function(method, url, params) {\r
            switch (arguments.length) {\r
                case 2:\r
                    if (typeof url == 'string') {\r
                        break;\r
                    };\r
                    params = url;\r
                // fall...\r
                case 1:\r
                    url = method;\r
                    method = 'GET';\r
                    break;\r
            }\r
            if (params) {\r
                url = Ext.urlAppend(url, Ext.Object.toQueryString(params));\r
            }\r
            return this.manager.openRequest(method, url);\r
        },\r
        removeFromData: function(ctx, records) {\r
            var me = this,\r
                data = me.getData(ctx),\r
                model = (ctx.xhr.options.proxy && ctx.xhr.options.proxy.getModel()) || {},\r
                idProperty = model.idProperty || 'id';\r
            Ext.each(records, function(record) {\r
                var id = record.get(idProperty);\r
                for (var i = data.length; i-- > 0; ) {\r
                    if (data[i][idProperty] === id) {\r
                        me.deleteRecord(i);\r
                        break;\r
                    }\r
                }\r
            });\r
        }\r
    };\r
}());\r
\r
/**
 * This base class is used to handle data preparation (e.g., sorting, filtering and
 * group summary).
 */\r
Ext.define('Ext.ux.ajax.DataSimlet', function() {\r
    function makeSortFn(def, cmp) {\r
        var order = def.direction,\r
            sign = (order && order.toUpperCase() === 'DESC') ? -1 : 1;\r
        return function(leftRec, rightRec) {\r
            var lhs = leftRec[def.property],\r
                rhs = rightRec[def.property],\r
                c = (lhs < rhs) ? -1 : ((rhs < lhs) ? 1 : 0);\r
            if (c || !cmp) {\r
                return c * sign;\r
            }\r
            return cmp(leftRec, rightRec);\r
        };\r
    }\r
    function makeSortFns(defs, cmp) {\r
        for (var sortFn = cmp,\r
            i = defs && defs.length; i; ) {\r
            sortFn = makeSortFn(defs[--i], sortFn);\r
        }\r
        return sortFn;\r
    }\r
    return {\r
        extend: 'Ext.ux.ajax.Simlet',\r
        buildNodes: function(node, path) {\r
            var me = this,\r
                nodeData = {\r
                    data: []\r
                },\r
                len = node.length,\r
                children, i, child, name;\r
            me.nodes[path] = nodeData;\r
            for (i = 0; i < len; ++i) {\r
                nodeData.data.push(child = node[i]);\r
                name = child.text || child.title;\r
                child.id = path ? path + '/' + name : name;\r
                children = child.children;\r
                if (!(child.leaf = !children)) {\r
                    delete child.children;\r
                    me.buildNodes(children, child.id);\r
                }\r
            }\r
        },\r
        deleteRecord: function(pos) {\r
            if (this.data && typeof this.data !== 'function') {\r
                Ext.Array.removeAt(this.data, pos);\r
            }\r
        },\r
        fixTree: function(ctx, tree) {\r
            var me = this,\r
                node = ctx.params.node,\r
                nodes;\r
            if (!(nodes = me.nodes)) {\r
                me.nodes = nodes = {};\r
                me.buildNodes(tree, '');\r
            }\r
            node = nodes[node];\r
            if (node) {\r
                if (me.node) {\r
                    me.node.sortedData = me.sortedData;\r
                    me.node.currentOrder = me.currentOrder;\r
                }\r
                me.node = node;\r
                me.data = node.data;\r
                me.sortedData = node.sortedData;\r
                me.currentOrder = node.currentOrder;\r
            } else {\r
                me.data = null;\r
            }\r
        },\r
        getData: function(ctx) {\r
            var me = this,\r
                params = ctx.params,\r
                order = (params.filter || '') + (params.group || '') + '-' + (params.sort || '') + '-' + (params.dir || ''),\r
                tree = me.tree,\r
                dynamicData, data, fields, sortFn;\r
            if (tree) {\r
                me.fixTree(ctx, tree);\r
            }\r
            data = me.data;\r
            if (typeof data === 'function') {\r
                dynamicData = true;\r
                data = data.call(this, ctx);\r
            }\r
            // If order is '--' then it means we had no order passed, due to the string concat above\r
            if (!data || order === '--') {\r
                return data || [];\r
            }\r
            if (!dynamicData && order == me.currentOrder) {\r
                return me.sortedData;\r
            }\r
            ctx.filterSpec = params.filter && Ext.decode(params.filter);\r
            ctx.groupSpec = params.group && Ext.decode(params.group);\r
            fields = params.sort;\r
            if (params.dir) {\r
                fields = [\r
                    {\r
                        direction: params.dir,\r
                        property: fields\r
                    }\r
                ];\r
            } else {\r
                fields = Ext.decode(params.sort);\r
            }\r
            if (ctx.filterSpec) {\r
                var filters = new Ext.util.FilterCollection();\r
                filters.add(this.processFilters(ctx.filterSpec));\r
                data = Ext.Array.filter(data, filters.getFilterFn());\r
            }\r
            sortFn = makeSortFns((ctx.sortSpec = fields));\r
            if (ctx.groupSpec) {\r
                sortFn = makeSortFns([\r
                    ctx.groupSpec\r
                ], sortFn);\r
            }\r
            // If a straight Ajax request, data may not be an array.\r
            // If an Array, preserve 'physical' order of raw data...\r
            data = Ext.isArray(data) ? data.slice(0) : data;\r
            if (sortFn) {\r
                Ext.Array.sort(data, sortFn);\r
            }\r
            me.sortedData = data;\r
            me.currentOrder = order;\r
            return data;\r
        },\r
        processFilters: Ext.identityFn,\r
        getPage: function(ctx, data) {\r
            var ret = data,\r
                length = data.length,\r
                start = ctx.params.start || 0,\r
                end = ctx.params.limit ? Math.min(length, start + ctx.params.limit) : length;\r
            if (start || end < length) {\r
                ret = ret.slice(start, end);\r
            }\r
            return ret;\r
        },\r
        getGroupSummary: function(groupField, rows, ctx) {\r
            return rows[0];\r
        },\r
        getSummary: function(ctx, data, page) {\r
            var me = this,\r
                groupField = ctx.groupSpec.property,\r
                accum,\r
                todo = {},\r
                summary = [],\r
                fieldValue, lastFieldValue;\r
            Ext.each(page, function(rec) {\r
                fieldValue = rec[groupField];\r
                todo[fieldValue] = true;\r
            });\r
            function flush() {\r
                if (accum) {\r
                    summary.push(me.getGroupSummary(groupField, accum, ctx));\r
                    accum = null;\r
                }\r
            }\r
            // data is ordered primarily by the groupField, so one pass can pick up all\r
            // the summaries one at a time.\r
            Ext.each(data, function(rec) {\r
                fieldValue = rec[groupField];\r
                if (lastFieldValue !== fieldValue) {\r
                    flush();\r
                    lastFieldValue = fieldValue;\r
                }\r
                if (!todo[fieldValue]) {\r
                    // if we have even 1 summary, we have summarized all that we need\r
                    // (again because data and page are ordered by groupField)\r
                    return !summary.length;\r
                }\r
                if (accum) {\r
                    accum.push(rec);\r
                } else {\r
                    accum = [\r
                        rec\r
                    ];\r
                }\r
                return true;\r
            });\r
            flush();\r
            // make sure that last pesky summary goes...\r
            return summary;\r
        }\r
    };\r
}());\r
\r
/**
 * JSON Simlet.
 */\r
Ext.define('Ext.ux.ajax.JsonSimlet', {\r
    extend: 'Ext.ux.ajax.DataSimlet',\r
    alias: 'simlet.json',\r
    doGet: function(ctx) {\r
        var me = this,\r
            data = me.getData(ctx),\r
            page = me.getPage(ctx, data),\r
            reader = ctx.xhr.options.proxy && ctx.xhr.options.proxy.getReader(),\r
            root = reader && reader.getRootProperty(),\r
            ret = me.callParent(arguments),\r
            // pick up status/statusText\r
            response = {};\r
        if (root && Ext.isArray(page)) {\r
            response[root] = page;\r
            response[reader.getTotalProperty()] = data.length;\r
        } else {\r
            response = page;\r
        }\r
        if (ctx.groupSpec) {\r
            response.summaryData = me.getSummary(ctx, data, page);\r
        }\r
        ret.responseText = Ext.encode(response);\r
        return ret;\r
    },\r
    doPost: function(ctx) {\r
        return this.doGet(ctx);\r
    }\r
});\r
\r
/**
 * Simulates an XMLHttpRequest object's methods and properties but is backed by a
 * {@link Ext.ux.ajax.Simlet} instance that provides the data.
 */\r
Ext.define('Ext.ux.ajax.SimXhr', {\r
    readyState: 0,\r
    mgr: null,\r
    simlet: null,\r
    constructor: function(config) {\r
        var me = this;\r
        Ext.apply(me, config);\r
        me.requestHeaders = {};\r
    },\r
    abort: function() {\r
        var me = this;\r
        if (me.timer) {\r
            clearTimeout(me.timer);\r
            me.timer = null;\r
        }\r
        me.aborted = true;\r
    },\r
    getAllResponseHeaders: function() {\r
        var headers = [];\r
        if (Ext.isObject(this.responseHeaders)) {\r
            Ext.Object.each(this.responseHeaders, function(name, value) {\r
                headers.push(name + ': ' + value);\r
            });\r
        }\r
        return headers.join('\r\n');\r
    },\r
    getResponseHeader: function(header) {\r
        var headers = this.responseHeaders;\r
        return (headers && headers[header]) || null;\r
    },\r
    open: function(method, url, async, user, password) {\r
        var me = this;\r
        me.method = method;\r
        me.url = url;\r
        me.async = async !== false;\r
        me.user = user;\r
        me.password = password;\r
        me.setReadyState(1);\r
    },\r
    overrideMimeType: function(mimeType) {\r
        this.mimeType = mimeType;\r
    },\r
    schedule: function() {\r
        var me = this,\r
            delay = me.mgr.delay;\r
        if (delay) {\r
            me.timer = setTimeout(function() {\r
                me.onTick();\r
            }, delay);\r
        } else {\r
            me.onTick();\r
        }\r
    },\r
    send: function(body) {\r
        var me = this;\r
        me.body = body;\r
        if (me.async) {\r
            me.schedule();\r
        } else {\r
            me.onComplete();\r
        }\r
    },\r
    setReadyState: function(state) {\r
        var me = this;\r
        if (me.readyState != state) {\r
            me.readyState = state;\r
            me.onreadystatechange();\r
        }\r
    },\r
    setRequestHeader: function(header, value) {\r
        this.requestHeaders[header] = value;\r
    },\r
    // handlers\r
    onreadystatechange: Ext.emptyFn,\r
    onComplete: function() {\r
        var me = this,\r
            callback;\r
        me.readyState = 4;\r
        Ext.apply(me, me.simlet.exec(me));\r
        callback = me.jsonpCallback;\r
        if (callback) {\r
            var text = callback + '(' + me.responseText + ')';\r
            eval(text);\r
        }\r
    },\r
    onTick: function() {\r
        var me = this;\r
        me.timer = null;\r
        me.onComplete();\r
        me.onreadystatechange && me.onreadystatechange();\r
    }\r
});\r
\r
/**
 * This singleton manages simulated Ajax responses. This allows application logic to be
 * written unaware that its Ajax calls are being handled by simulations ("simlets"). This
 * is currently done by hooking {@link Ext.data.Connection} methods, so all users of that
 * class (and {@link Ext.Ajax} since it is a derived class) qualify for simulation.
 *
 * The requires hooks are inserted when either the {@link #init} method is called or the
 * first {@link Ext.ux.ajax.Simlet} is registered. For example:
 *
 *      Ext.onReady(function () {
 *          initAjaxSim();
 *
 *          // normal stuff
 *      });
 *
 *      function initAjaxSim () {
 *          Ext.ux.ajax.SimManager.init({
 *              delay: 300
 *          }).register({
 *              '/app/data/url': {
 *                  type: 'json',  // use JsonSimlet (type is like xtype for components)
 *                  data: [
 *                      { foo: 42, bar: 'abc' },
 *                      ...
 *                  ]
 *              }
 *          });
 *      }
 *
 * As many URL's as desired can be registered and associated with a {@link Ext.ux.ajax.Simlet}. To make
 * non-simulated Ajax requests once this singleton is initialized, add a `nosim:true` option
 * to the Ajax options:
 *
 *      Ext.Ajax.request({
 *          url: 'page.php',
 *          nosim: true, // ignored by normal Ajax request
 *          params: {
 *              id: 1
 *          },
 *          success: function(response){
 *              var text = response.responseText;
 *              // process server response here
 *          }
 *      });
 */\r
Ext.define('Ext.ux.ajax.SimManager', {\r
    singleton: true,\r
    requires: [\r
        'Ext.data.Connection',\r
        'Ext.ux.ajax.SimXhr',\r
        'Ext.ux.ajax.Simlet',\r
        'Ext.ux.ajax.JsonSimlet'\r
    ],\r
    /**
     * @cfg {Ext.ux.ajax.Simlet} defaultSimlet
     * The {@link Ext.ux.ajax.Simlet} instance to use for non-matching URL's. By default, this will
     * return 404. Set this to null to use real Ajax calls for non-matching URL's.
     */\r
    /**
     * @cfg {String} defaultType
     * The default `type` to apply to generic {@link Ext.ux.ajax.Simlet} configuration objects. The
     * default is 'basic'.
     */\r
    defaultType: 'basic',\r
    /**
     * @cfg {Number} delay
     * The number of milliseconds to delay before delivering a response to an async request.
     */\r
    delay: 150,\r
    /**
     * @property {Boolean} ready
     * True once this singleton has initialized and applied its Ajax hooks.
     * @private
     */\r
    ready: false,\r
    constructor: function() {\r
        this.simlets = [];\r
    },\r
    getSimlet: function(url) {\r
        // Strip down to base URL (no query parameters or hash):\r
        var me = this,\r
            index = url.indexOf('?'),\r
            simlets = me.simlets,\r
            len = simlets.length,\r
            i, simlet, simUrl, match;\r
        if (index < 0) {\r
            index = url.indexOf('#');\r
        }\r
        if (index > 0) {\r
            url = url.substring(0, index);\r
        }\r
        for (i = 0; i < len; ++i) {\r
            simlet = simlets[i];\r
            simUrl = simlet.url;\r
            if (simUrl instanceof RegExp) {\r
                match = simUrl.test(url);\r
            } else {\r
                match = simUrl === url;\r
            }\r
            if (match) {\r
                return simlet;\r
            }\r
        }\r
        return me.defaultSimlet;\r
    },\r
    getXhr: function(method, url, options, async) {\r
        var simlet = this.getSimlet(url);\r
        if (simlet) {\r
            return simlet.openRequest(method, url, options, async);\r
        }\r
        return null;\r
    },\r
    /**
     * Initializes this singleton and applies configuration options.
     * @param {Object} config An optional object with configuration properties to apply.
     * @return {Ext.ux.ajax.SimManager} this
     */\r
    init: function(config) {\r
        var me = this;\r
        Ext.apply(me, config);\r
        if (!me.ready) {\r
            me.ready = true;\r
            if (!('defaultSimlet' in me)) {\r
                me.defaultSimlet = new Ext.ux.ajax.Simlet({\r
                    status: 404,\r
                    statusText: 'Not Found'\r
                });\r
            }\r
            me._openRequest = Ext.data.Connection.prototype.openRequest;\r
            Ext.data.request.Ajax.override({\r
                openRequest: function(options, requestOptions, async) {\r
                    var xhr = !options.nosim && me.getXhr(requestOptions.method, requestOptions.url, options, async);\r
                    if (!xhr) {\r
                        xhr = this.callParent(arguments);\r
                    }\r
                    return xhr;\r
                }\r
            });\r
            if (Ext.data.JsonP) {\r
                Ext.data.JsonP.self.override({\r
                    createScript: function(url, params, options) {\r
                        var fullUrl = Ext.urlAppend(url, Ext.Object.toQueryString(params)),\r
                            script = !options.nosim && me.getXhr('GET', fullUrl, options, true);\r
                        if (!script) {\r
                            script = this.callParent(arguments);\r
                        }\r
                        return script;\r
                    },\r
                    loadScript: function(request) {\r
                        var script = request.script;\r
                        if (script.simlet) {\r
                            script.jsonpCallback = request.params[request.callbackKey];\r
                            script.send(null);\r
                            // Ext.data.JsonP will attempt dom removal of a script tag, so emulate its presence\r
                            request.script = document.createElement('script');\r
                        } else {\r
                            this.callParent(arguments);\r
                        }\r
                    }\r
                });\r
            }\r
        }\r
        return me;\r
    },\r
    openRequest: function(method, url, async) {\r
        var opt = {\r
                method: method,\r
                url: url\r
            };\r
        return this._openRequest.call(Ext.data.Connection.prototype, {}, opt, async);\r
    },\r
    /**
     * Registeres one or more {@link Ext.ux.ajax.Simlet} instances.
     * @param {Array/Object} simlet Either a {@link Ext.ux.ajax.Simlet} instance or config, an Array
     * of such elements or an Object keyed by URL with values that are {@link Ext.ux.ajax.Simlet}
     * instances or configs.
     */\r
    register: function(simlet) {\r
        var me = this;\r
        me.init();\r
        function reg(one) {\r
            var simlet = one;\r
            if (!simlet.isSimlet) {\r
                simlet = Ext.create('simlet.' + (simlet.type || simlet.stype || me.defaultType), one);\r
            }\r
            me.simlets.push(simlet);\r
            simlet.manager = me;\r
        }\r
        if (Ext.isArray(simlet)) {\r
            Ext.each(simlet, reg);\r
        } else if (simlet.isSimlet || simlet.url) {\r
            reg(simlet);\r
        } else {\r
            Ext.Object.each(simlet, function(url, s) {\r
                s.url = url;\r
                reg(s);\r
            });\r
        }\r
        return me;\r
    }\r
});\r
\r
/**
 * This class simulates XML-based requests.
 */\r
Ext.define('Ext.ux.ajax.XmlSimlet', {\r
    extend: 'Ext.ux.ajax.DataSimlet',\r
    alias: 'simlet.xml',\r
    /**
     * This template is used to populate the XML response. The configuration of the Reader
     * is available so that its `root` and `record` properties can be used as well as the
     * `fields` of the associated `model`. But beyond that, the way these pieces are put
     * together in the document requires the flexibility of a template.
     */\r
    xmlTpl: [\r
        '<{root}>\n',\r
        '<tpl for="data">',\r
        '    <{parent.record}>\n',\r
        '<tpl for="parent.fields">',\r
        '        <{name}>{[parent[values.name]]}</{name}>\n',\r
        '</tpl>',\r
        '    </{parent.record}>\n',\r
        '</tpl>',\r
        '</{root}>'\r
    ],\r
    doGet: function(ctx) {\r
        var me = this,\r
            data = me.getData(ctx),\r
            page = me.getPage(ctx, data),\r
            proxy = ctx.xhr.options.operation.getProxy(),\r
            reader = proxy && proxy.getReader(),\r
            model = reader && reader.getModel(),\r
            ret = me.callParent(arguments),\r
            // pick up status/statusText\r
            response = {\r
                data: page,\r
                reader: reader,\r
                fields: model && model.fields,\r
                root: reader && reader.getRootProperty(),\r
                record: reader && reader.record\r
            },\r
            tpl, xml, doc;\r
        if (ctx.groupSpec) {\r
            response.summaryData = me.getSummary(ctx, data, page);\r
        }\r
        // If a straight Ajax request there won't be an xmlTpl.\r
        if (me.xmlTpl) {\r
            tpl = Ext.XTemplate.getTpl(me, 'xmlTpl');\r
            xml = tpl.apply(response);\r
        } else {\r
            xml = data;\r
        }\r
        if (typeof DOMParser != 'undefined') {\r
            doc = (new DOMParser()).parseFromString(xml, "text/xml");\r
        } else {\r
            // IE doesn't have DOMParser, but fortunately, there is an ActiveX for XML\r
            doc = new ActiveXObject("Microsoft.XMLDOM");\r
            doc.async = false;\r
            doc.loadXML(xml);\r
        }\r
        ret.responseText = xml;\r
        ret.responseXML = doc;\r
        return ret;\r
    },\r
    fixTree: function() {\r
        this.callParent(arguments);\r
        var buffer = [];\r
        this.buildTreeXml(this.data, buffer);\r
        this.data = buffer.join('');\r
    },\r
    buildTreeXml: function(nodes, buffer) {\r
        var rootProperty = this.rootProperty,\r
            recordProperty = this.recordProperty;\r
        buffer.push('<', rootProperty, '>');\r
        Ext.Array.forEach(nodes, function(node) {\r
            buffer.push('<', recordProperty, '>');\r
            for (var key in node) {\r
                if (key == 'children') {\r
                    this.buildTreeXml(node.children, buffer);\r
                } else {\r
                    buffer.push('<', key, '>', node[key], '</', key, '>');\r
                }\r
            }\r
            buffer.push('</', recordProperty, '>');\r
        });\r
        buffer.push('</', rootProperty, '>');\r
    }\r
});\r
\r
/**
 * This is the base class for {@link Ext.ux.event.Recorder} and {@link Ext.ux.event.Player}.
 */\r
Ext.define('Ext.ux.event.Driver', {\r
    extend: 'Ext.util.Observable',\r
    active: null,\r
    specialKeysByName: {\r
        PGUP: 33,\r
        PGDN: 34,\r
        END: 35,\r
        HOME: 36,\r
        LEFT: 37,\r
        UP: 38,\r
        RIGHT: 39,\r
        DOWN: 40\r
    },\r
    specialKeysByCode: {},\r
    /**
     * @event start
     * Fires when this object is started.
     * @param {Ext.ux.event.Driver} this
     */\r
    /**
     * @event stop
     * Fires when this object is stopped.
     * @param {Ext.ux.event.Driver} this
     */\r
    getTextSelection: function(el) {\r
        // See https://code.google.com/p/rangyinputs/source/browse/trunk/rangyinputs_jquery.js\r
        var doc = el.ownerDocument,\r
            range, range2, start, end;\r
        if (typeof el.selectionStart === "number") {\r
            start = el.selectionStart;\r
            end = el.selectionEnd;\r
        } else if (doc.selection) {\r
            range = doc.selection.createRange();\r
            range2 = el.createTextRange();\r
            range2.setEndPoint('EndToStart', range);\r
            start = range2.text.length;\r
            end = start + range.text.length;\r
        }\r
        return [\r
            start,\r
            end\r
        ];\r
    },\r
    getTime: function() {\r
        return new Date().getTime();\r
    },\r
    /**
     * Returns the number of milliseconds since start was called.
     */\r
    getTimestamp: function() {\r
        var d = this.getTime();\r
        return d - this.startTime;\r
    },\r
    onStart: function() {},\r
    onStop: function() {},\r
    /**
     * Starts this object. If this object is already started, nothing happens.
     */\r
    start: function() {\r
        var me = this;\r
        if (!me.active) {\r
            me.active = new Date();\r
            me.startTime = me.getTime();\r
            me.onStart();\r
            me.fireEvent('start', me);\r
        }\r
    },\r
    /**
     * Stops this object. If this object is not started, nothing happens.
     */\r
    stop: function() {\r
        var me = this;\r
        if (me.active) {\r
            me.active = null;\r
            me.onStop();\r
            me.fireEvent('stop', me);\r
        }\r
    }\r
}, function() {\r
    var proto = this.prototype;\r
    Ext.Object.each(proto.specialKeysByName, function(name, value) {\r
        proto.specialKeysByCode[value] = name;\r
    });\r
});\r
\r
/**
 * Event maker.
 */\r
Ext.define('Ext.ux.event.Maker', {\r
    eventQueue: [],\r
    startAfter: 500,\r
    timerIncrement: 500,\r
    currentTiming: 0,\r
    constructor: function(config) {\r
        var me = this;\r
        me.currentTiming = me.startAfter;\r
        if (!Ext.isArray(config)) {\r
            config = [\r
                config\r
            ];\r
        }\r
        Ext.Array.each(config, function(item) {\r
            item.el = item.el || 'el';\r
            Ext.Array.each(Ext.ComponentQuery.query(item.cmpQuery), function(cmp) {\r
                var event = {},\r
                    x, y, el;\r
                if (!item.domQuery) {\r
                    el = cmp[item.el];\r
                } else {\r
                    el = cmp.el.down(item.domQuery);\r
                }\r
                event.target = '#' + el.dom.id;\r
                event.type = item.type;\r
                event.button = config.button || 0;\r
                x = el.getX() + (el.getWidth() / 2);\r
                y = el.getY() + (el.getHeight() / 2);\r
                event.xy = [\r
                    x,\r
                    y\r
                ];\r
                event.ts = me.currentTiming;\r
                me.currentTiming += me.timerIncrement;\r
                me.eventQueue.push(event);\r
            });\r
            if (item.screenshot) {\r
                me.eventQueue[me.eventQueue.length - 1].screenshot = true;\r
            }\r
        });\r
        return me.eventQueue;\r
    }\r
});\r
\r
/**
 * @extends Ext.ux.event.Driver
 * This class manages the playback of an array of "event descriptors". For details on the
 * contents of an "event descriptor", see {@link Ext.ux.event.Recorder}. The events recorded by the
 * {@link Ext.ux.event.Recorder} class are designed to serve as input for this class.
 * 
 * The simplest use of this class is to instantiate it with an {@link #eventQueue} and call
 * {@link #method-start}. Like so:
 *
 *      var player = Ext.create('Ext.ux.event.Player', {
 *          eventQueue: [ ... ],
 *          speed: 2,  // play at 2x speed
 *          listeners: {
 *              stop: function () {
 *                  player = null; // all done
 *              }
 *          }
 *      });
 *
 *      player.start();
 *
 * A more complex use would be to incorporate keyframe generation after playing certain
 * events.
 *
 *      var player = Ext.create('Ext.ux.event.Player', {
 *          eventQueue: [ ... ],
 *          keyFrameEvents: {
 *              click: true
 *          },
 *          listeners: {
 *              stop: function () {
 *                  // play has completed... probably time for another keyframe...
 *                  player = null;
 *              },
 *              keyframe: onKeyFrame
 *          }
 *      });
 *
 *      player.start();
 *
 * If a keyframe can be handled immediately (synchronously), the listener would be:
 *
 *      function onKeyFrame () {
 *          handleKeyFrame();
 *      }
 *
 *  If the keyframe event is always handled asynchronously, then the event listener is only
 *  a bit more:
 *
 *      function onKeyFrame (p, eventDescriptor) {
 *          eventDescriptor.defer(); // pause event playback...
 *
 *          handleKeyFrame(function () {
 *              eventDescriptor.finish(); // ...resume event playback
 *          });
 *      }
 *
 * Finally, if the keyframe could be either handled synchronously or asynchronously (perhaps
 * differently by browser), a slightly more complex listener is required.
 *
 *      function onKeyFrame (p, eventDescriptor) {
 *          var async;
 *
 *          handleKeyFrame(function () {
 *              // either this callback is being called immediately by handleKeyFrame (in
 *              // which case async is undefined) or it is being called later (in which case
 *              // async will be true).
 *
 *              if (async) {
 *                  eventDescriptor.finish();
 *              } else {
 *                  async = false;
 *              }
 *          });
 *
 *          // either the callback was called (and async is now false) or it was not
 *          // called (and async remains undefined).
 *
 *          if (async !== false) {
 *              eventDescriptor.defer();
 *              async = true; // let the callback know that we have gone async
 *          }
 *      }
 */\r
Ext.define('Ext.ux.event.Player', function(Player) {\r
    var defaults = {},\r
        mouseEvents = {},\r
        keyEvents = {},\r
        doc,\r
        //HTML events supported\r
        uiEvents = {},\r
        //events that bubble by default\r
        bubbleEvents = {\r
            //scroll:     1,\r
            resize: 1,\r
            reset: 1,\r
            submit: 1,\r
            change: 1,\r
            select: 1,\r
            error: 1,\r
            abort: 1\r
        };\r
    Ext.each([\r
        'click',\r
        'dblclick',\r
        'mouseover',\r
        'mouseout',\r
        'mousedown',\r
        'mouseup',\r
        'mousemove'\r
    ], function(type) {\r
        bubbleEvents[type] = defaults[type] = mouseEvents[type] = {\r
            bubbles: true,\r
            cancelable: (type != "mousemove"),\r
            // mousemove cannot be cancelled\r
            detail: 1,\r
            screenX: 0,\r
            screenY: 0,\r
            clientX: 0,\r
            clientY: 0,\r
            ctrlKey: false,\r
            altKey: false,\r
            shiftKey: false,\r
            metaKey: false,\r
            button: 0\r
        };\r
    });\r
    Ext.each([\r
        'keydown',\r
        'keyup',\r
        'keypress'\r
    ], function(type) {\r
        bubbleEvents[type] = defaults[type] = keyEvents[type] = {\r
            bubbles: true,\r
            cancelable: true,\r
            ctrlKey: false,\r
            altKey: false,\r
            shiftKey: false,\r
            metaKey: false,\r
            keyCode: 0,\r
            charCode: 0\r
        };\r
    });\r
    Ext.each([\r
        'blur',\r
        'change',\r
        'focus',\r
        'resize',\r
        'scroll',\r
        'select'\r
    ], function(type) {\r
        defaults[type] = uiEvents[type] = {\r
            bubbles: (type in bubbleEvents),\r
            cancelable: false,\r
            detail: 1\r
        };\r
    });\r
    var inputSpecialKeys = {\r
            8: function(target, start, end) {\r
                // backspace: 8,\r
                if (start < end) {\r
                    target.value = target.value.substring(0, start) + target.value.substring(end);\r
                } else if (start > 0) {\r
                    target.value = target.value.substring(0, --start) + target.value.substring(end);\r
                }\r
                this.setTextSelection(target, start, start);\r
            },\r
            46: function(target, start, end) {\r
                // delete: 46\r
                if (start < end) {\r
                    target.value = target.value.substring(0, start) + target.value.substring(end);\r
                } else if (start < target.value.length - 1) {\r
                    target.value = target.value.substring(0, start) + target.value.substring(start + 1);\r
                }\r
                this.setTextSelection(target, start, start);\r
            }\r
        };\r
    return {\r
        extend: 'Ext.ux.event.Driver',\r
        /**
     * @cfg {Array} eventQueue The event queue to playback. This must be provided before
     * the {@link #method-start} method is called.
     */\r
        /**
     * @cfg {Object} keyFrameEvents An object that describes the events that should generate
     * keyframe events. For example, `{ click: true }` would generate keyframe events after
     * each `click` event.
     */\r
        keyFrameEvents: {\r
            click: true\r
        },\r
        /**
     * @cfg {Boolean} pauseForAnimations True to pause event playback during animations, false
     * to ignore animations. Default is true.
     */\r
        pauseForAnimations: true,\r
        /**
     * @cfg {Number} speed The playback speed multiplier. Default is 1.0 (to playback at the
     * recorded speed). A value of 2 would playback at 2x speed.
     */\r
        speed: 1,\r
        stallTime: 0,\r
        _inputSpecialKeys: {\r
            INPUT: inputSpecialKeys,\r
            TEXTAREA: Ext.apply({}, //13: function (target, start, end) { // enter: 8,\r
            //TODO ?\r
            //}\r
            inputSpecialKeys)\r
        },\r
        tagPathRegEx: /(\w+)(?:\[(\d+)\])?/,\r
        /**
     * @event beforeplay
     * Fires before an event is played.
     * @param {Ext.ux.event.Player} this
     * @param {Object} eventDescriptor The event descriptor about to be played.
     */\r
        /**
     * @event keyframe
     * Fires when this player reaches a keyframe. Typically, this is after events
     * like `click` are injected and any resulting animations have been completed.
     * @param {Ext.ux.event.Player} this
     * @param {Object} eventDescriptor The keyframe event descriptor.
     */\r
        constructor: function(config) {\r
            var me = this;\r
            me.callParent(arguments);\r
            me.timerFn = function() {\r
                me.onTick();\r
            };\r
            me.attachTo = me.attachTo || window;\r
            doc = me.attachTo.document;\r
        },\r
        /**
     * Returns the element given is XPath-like description.
     * @param {String} xpath The XPath-like description of the element.
     * @return {HTMLElement}
     */\r
        getElementFromXPath: function(xpath) {\r
            var me = this,\r
                parts = xpath.split('/'),\r
                regex = me.tagPathRegEx,\r
                i, n, m, count, tag, child,\r
                el = me.attachTo.document;\r
            el = (parts[0] == '~') ? el.body : el.getElementById(parts[0].substring(1));\r
            // remove '#'\r
            for (i = 1 , n = parts.length; el && i < n; ++i) {\r
                m = regex.exec(parts[i]);\r
                count = m[2] ? parseInt(m[2], 10) : 1;\r
                tag = m[1].toUpperCase();\r
                for (child = el.firstChild; child; child = child.nextSibling) {\r
                    if (child.tagName == tag) {\r
                        if (count == 1) {\r
                            break;\r
                        }\r
                        --count;\r
                    }\r
                }\r
                el = child;\r
            }\r
            return el;\r
        },\r
        // Moving across a line break only counts as moving one character in a TextRange, whereas a line break in\r
        // the textarea value is two characters. This function corrects for that by converting a text offset into a\r
        // range character offset by subtracting one character for every line break in the textarea prior to the\r
        // offset\r
        offsetToRangeCharacterMove: function(el, offset) {\r
            return offset - (el.value.slice(0, offset).split("\r\n").length - 1);\r
        },\r
        setTextSelection: function(el, startOffset, endOffset) {\r
            // See https://code.google.com/p/rangyinputs/source/browse/trunk/rangyinputs_jquery.js\r
            if (startOffset < 0) {\r
                startOffset += el.value.length;\r
            }\r
            if (endOffset == null) {\r
                endOffset = startOffset;\r
            }\r
            if (endOffset < 0) {\r
                endOffset += el.value.length;\r
            }\r
            if (typeof el.selectionStart === "number") {\r
                el.selectionStart = startOffset;\r
                el.selectionEnd = endOffset;\r
            } else {\r
                var range = el.createTextRange();\r
                var startCharMove = this.offsetToRangeCharacterMove(el, startOffset);\r
                range.collapse(true);\r
                if (startOffset == endOffset) {\r
                    range.move("character", startCharMove);\r
                } else {\r
                    range.moveEnd("character", this.offsetToRangeCharacterMove(el, endOffset));\r
                    range.moveStart("character", startCharMove);\r
                }\r
                range.select();\r
            }\r
        },\r
        getTimeIndex: function() {\r
            var t = this.getTimestamp() - this.stallTime;\r
            return t * this.speed;\r
        },\r
        makeToken: function(eventDescriptor, signal) {\r
            var me = this,\r
                t0;\r
            eventDescriptor[signal] = true;\r
            eventDescriptor.defer = function() {\r
                eventDescriptor[signal] = false;\r
                t0 = me.getTime();\r
            };\r
            eventDescriptor.finish = function() {\r
                eventDescriptor[signal] = true;\r
                me.stallTime += me.getTime() - t0;\r
                me.schedule();\r
            };\r
        },\r
        /**
     * This method is called after an event has been played to prepare for the next event.
     * @param {Object} eventDescriptor The descriptor of the event just played.
     */\r
        nextEvent: function(eventDescriptor) {\r
            var me = this,\r
                index = ++me.queueIndex;\r
            // keyframe events are inserted after a keyFrameEvent is played.\r
            if (me.keyFrameEvents[eventDescriptor.type]) {\r
                Ext.Array.insert(me.eventQueue, index, [\r
                    {\r
                        keyframe: true,\r
                        ts: eventDescriptor.ts\r
                    }\r
                ]);\r
            }\r
        },\r
        /**
     * This method returns the event descriptor at the front of the queue. This does not
     * dequeue the event. Repeated calls return the same object (until {@link #nextEvent}
     * is called).
     */\r
        peekEvent: function() {\r
            return this.eventQueue[this.queueIndex] || null;\r
        },\r
        /**
     * Replaces an event in the queue with an array of events. This is often used to roll
     * up a multi-step pseudo-event and expand it just-in-time to be played. The process
     * for doing this in a derived class would be this:
     * 
     *      Ext.define('My.Player', {
     *          extend: 'Ext.ux.event.Player',
     *
     *          peekEvent: function () {
     *              var event = this.callParent();
     *
     *              if (event.multiStepSpecial) {
     *                  this.replaceEvent(null, [
     *                      ... expand to actual events
     *                  ]);
     *
     *                  event = this.callParent(); // get the new next event
     *              }
     *
     *              return event;
     *          }
     *      });
     * 
     * This method ensures that the `beforeplay` hook (if any) from the replaced event is
     * placed on the first new event and the `afterplay` hook (if any) is placed on the
     * last new event.
     * 
     * @param {Number} index The queue index to replace. Pass `null` to replace the event
     * at the current `queueIndex`.
     * @param {Event[]} events The array of events with which to replace the specified
     * event.
     */\r
        replaceEvent: function(index, events) {\r
            for (var t,\r
                i = 0,\r
                n = events.length; i < n; ++i) {\r
                if (i) {\r
                    t = events[i - 1];\r
                    delete t.afterplay;\r
                    delete t.screenshot;\r
                    delete events[i].beforeplay;\r
                }\r
            }\r
            Ext.Array.replace(this.eventQueue, (index == null) ? this.queueIndex : index, 1, events);\r
        },\r
        /**
     * This method dequeues and injects events until it has arrived at the time index. If
     * no events are ready (based on the time index), this method does nothing.
     * @return {Boolean} True if there is more to do; false if not (at least for now).
     */\r
        processEvents: function() {\r
            var me = this,\r
                animations = me.pauseForAnimations && me.attachTo.Ext.fx.Manager.items,\r
                eventDescriptor;\r
            while ((eventDescriptor = me.peekEvent()) !== null) {\r
                if (animations && animations.getCount()) {\r
                    return true;\r
                }\r
                if (eventDescriptor.keyframe) {\r
                    if (!me.processKeyFrame(eventDescriptor)) {\r
                        return false;\r
                    }\r
                    me.nextEvent(eventDescriptor);\r
                } else if (eventDescriptor.ts <= me.getTimeIndex() && me.fireEvent('beforeplay', me, eventDescriptor) !== false && me.playEvent(eventDescriptor)) {\r
                    me.nextEvent(eventDescriptor);\r
                } else {\r
                    return true;\r
                }\r
            }\r
            me.stop();\r
            return false;\r
        },\r
        /**
     * This method is called when a keyframe is reached. This will fire the keyframe event.
     * If the keyframe has been handled, true is returned. Otherwise, false is returned.
     * @param {Object} eventDescriptor The event descriptor of the keyframe.
     * @return {Boolean} True if the keyframe was handled, false if not.
     */\r
        processKeyFrame: function(eventDescriptor) {\r
            var me = this;\r
            // only fire keyframe event (and setup the eventDescriptor) once...\r
            if (!eventDescriptor.defer) {\r
                me.makeToken(eventDescriptor, 'done');\r
                me.fireEvent('keyframe', me, eventDescriptor);\r
            }\r
            return eventDescriptor.done;\r
        },\r
        /**
     * Called to inject the given event on the specified target.
     * @param {HTMLElement} target The target of the event.
     * @param {Object} event The event to inject. The properties of this object should be
     * those of standard DOM events but vary based on the `type` property. For details on
     * event types and their properties, see the class documentation.
     */\r
        injectEvent: function(target, event) {\r
            var me = this,\r
                type = event.type,\r
                options = Ext.apply({}, event, defaults[type]),\r
                handler;\r
            if (type === 'type') {\r
                handler = me._inputSpecialKeys[target.tagName];\r
                if (handler) {\r
                    return me.injectTypeInputEvent(target, event, handler);\r
                }\r
                return me.injectTypeEvent(target, event);\r
            }\r
            if (type === 'focus' && target.focus) {\r
                target.focus();\r
                return true;\r
            }\r
            if (type === 'blur' && target.blur) {\r
                target.blur();\r
                return true;\r
            }\r
            if (type === 'scroll') {\r
                target.scrollLeft = event.pos[0];\r
                target.scrollTop = event.pos[1];\r
                return true;\r
            }\r
            if (type === 'mduclick') {\r
                return me.injectEvent(target, Ext.applyIf({\r
                    type: 'mousedown'\r
                }, event)) && me.injectEvent(target, Ext.applyIf({\r
                    type: 'mouseup'\r
                }, event)) && me.injectEvent(target, Ext.applyIf({\r
                    type: 'click'\r
                }, event));\r
            }\r
            if (mouseEvents[type]) {\r
                return Player.injectMouseEvent(target, options, me.attachTo);\r
            }\r
            if (keyEvents[type]) {\r
                return Player.injectKeyEvent(target, options, me.attachTo);\r
            }\r
            if (uiEvents[type]) {\r
                return Player.injectUIEvent(target, type, options.bubbles, options.cancelable, options.view || me.attachTo, options.detail);\r
            }\r
            return false;\r
        },\r
        injectTypeEvent: function(target, event) {\r
            var me = this,\r
                text = event.text,\r
                xlat = [],\r
                ch, chUp, i, n, sel, upper, isInput;\r
            if (text) {\r
                delete event.text;\r
                upper = text.toUpperCase();\r
                for (i = 0 , n = text.length; i < n; ++i) {\r
                    ch = text.charCodeAt(i);\r
                    chUp = upper.charCodeAt(i);\r
                    xlat.push(Ext.applyIf({\r
                        type: 'keydown',\r
                        charCode: chUp,\r
                        keyCode: chUp\r
                    }, event), Ext.applyIf({\r
                        type: 'keypress',\r
                        charCode: ch,\r
                        keyCode: ch\r
                    }, event), Ext.applyIf({\r
                        type: 'keyup',\r
                        charCode: chUp,\r
                        keyCode: chUp\r
                    }, event));\r
                }\r
            } else {\r
                xlat.push(Ext.applyIf({\r
                    type: 'keydown',\r
                    charCode: event.keyCode\r
                }, event), Ext.applyIf({\r
                    type: 'keyup',\r
                    charCode: event.keyCode\r
                }, event));\r
            }\r
            for (i = 0 , n = xlat.length; i < n; ++i) {\r
                me.injectEvent(target, xlat[i]);\r
            }\r
            return true;\r
        },\r
        injectTypeInputEvent: function(target, event, handler) {\r
            var me = this,\r
                text = event.text,\r
                sel, n;\r
            if (handler) {\r
                sel = me.getTextSelection(target);\r
                if (text) {\r
                    n = sel[0];\r
                    target.value = target.value.substring(0, n) + text + target.value.substring(sel[1]);\r
                    n += text.length;\r
                    me.setTextSelection(target, n, n);\r
                } else {\r
                    if (!(handler = handler[event.keyCode])) {\r
                        // no handler for the special key for this element\r
                        if ('caret' in event) {\r
                            me.setTextSelection(target, event.caret, event.caret);\r
                        } else if (event.selection) {\r
                            me.setTextSelection(target, event.selection[0], event.selection[1]);\r
                        }\r
                        return me.injectTypeEvent(target, event);\r
                    }\r
                    handler.call(this, target, sel[0], sel[1]);\r
                    return true;\r
                }\r
            }\r
            return true;\r
        },\r
        playEvent: function(eventDescriptor) {\r
            var me = this,\r
                target = me.getElementFromXPath(eventDescriptor.target),\r
                event;\r
            if (!target) {\r
                // not present (yet)... wait for element present...\r
                // TODO - need a timeout here\r
                return false;\r
            }\r
            if (!me.playEventHook(eventDescriptor, 'beforeplay')) {\r
                return false;\r
            }\r
            if (!eventDescriptor.injected) {\r
                eventDescriptor.injected = true;\r
                event = me.translateEvent(eventDescriptor, target);\r
                me.injectEvent(target, event);\r
            }\r
            return me.playEventHook(eventDescriptor, 'afterplay');\r
        },\r
        playEventHook: function(eventDescriptor, hookName) {\r
            var me = this,\r
                doneName = hookName + '.done',\r
                firedName = hookName + '.fired',\r
                hook = eventDescriptor[hookName];\r
            if (hook && !eventDescriptor[doneName]) {\r
                if (!eventDescriptor[firedName]) {\r
                    eventDescriptor[firedName] = true;\r
                    me.makeToken(eventDescriptor, doneName);\r
                    if (me.eventScope && Ext.isString(hook)) {\r
                        hook = me.eventScope[hook];\r
                    }\r
                    if (hook) {\r
                        hook.call(me.eventScope || me, eventDescriptor);\r
                    }\r
                }\r
                return false;\r
            }\r
            return true;\r
        },\r
        schedule: function() {\r
            var me = this;\r
            if (!me.timer) {\r
                me.timer = setTimeout(me.timerFn, 10);\r
            }\r
        },\r
        _translateAcross: [\r
            'type',\r
            'button',\r
            'charCode',\r
            'keyCode',\r
            'caret',\r
            'pos',\r
            'text',\r
            'selection'\r
        ],\r
        translateEvent: function(eventDescriptor, target) {\r
            var me = this,\r
                event = {},\r
                modKeys = eventDescriptor.modKeys || '',\r
                names = me._translateAcross,\r
                i = names.length,\r
                name, xy;\r
            while (i--) {\r
                name = names[i];\r
                if (name in eventDescriptor) {\r
                    event[name] = eventDescriptor[name];\r
                }\r
            }\r
            event.altKey = modKeys.indexOf('A') > 0;\r
            event.ctrlKey = modKeys.indexOf('C') > 0;\r
            event.metaKey = modKeys.indexOf('M') > 0;\r
            event.shiftKey = modKeys.indexOf('S') > 0;\r
            if (target && 'x' in eventDescriptor) {\r
                xy = Ext.fly(target).getXY();\r
                xy[0] += eventDescriptor.x;\r
                xy[1] += eventDescriptor.y;\r
            } else if ('x' in eventDescriptor) {\r
                xy = [\r
                    eventDescriptor.x,\r
                    eventDescriptor.y\r
                ];\r
            } else if ('px' in eventDescriptor) {\r
                xy = [\r
                    eventDescriptor.px,\r
                    eventDescriptor.py\r
                ];\r
            }\r
            if (xy) {\r
                event.clientX = event.screenX = xy[0];\r
                event.clientY = event.screenY = xy[1];\r
            }\r
            if (eventDescriptor.key) {\r
                event.keyCode = me.specialKeysByName[eventDescriptor.key];\r
            }\r
            if (eventDescriptor.type === 'wheel') {\r
                if ('onwheel' in me.attachTo.document) {\r
                    event.wheelX = eventDescriptor.dx;\r
                    event.wheelY = eventDescriptor.dy;\r
                } else {\r
                    event.type = 'mousewheel';\r
                    event.wheelDeltaX = -40 * eventDescriptor.dx;\r
                    event.wheelDeltaY = event.wheelDelta = -40 * eventDescriptor.dy;\r
                }\r
            }\r
            return event;\r
        },\r
        //---------------------------------\r
        // Driver overrides\r
        onStart: function() {\r
            var me = this;\r
            me.queueIndex = 0;\r
            me.schedule();\r
        },\r
        onStop: function() {\r
            var me = this;\r
            if (me.timer) {\r
                clearTimeout(me.timer);\r
                me.timer = null;\r
            }\r
        },\r
        //---------------------------------\r
        onTick: function() {\r
            var me = this;\r
            me.timer = null;\r
            if (me.processEvents()) {\r
                me.schedule();\r
            }\r
        },\r
        statics: {\r
            ieButtonCodeMap: {\r
                0: 1,\r
                1: 4,\r
                2: 2\r
            },\r
            /**
         * Injects a key event using the given event information to populate the event
         * object.
         * 
         * **Note:** `keydown` causes Safari 2.x to crash.
         * 
         * @param {HTMLElement} target The target of the given event.
         * @param {Object} options Object object containing all of the event injection
         * options.
         * @param {String} options.type The type of event to fire. This can be any one of
         * the following: `keyup`, `keydown` and `keypress`.
         * @param {Boolean} [options.bubbles=true] `tru` if the event can be bubbled up.
         * DOM Level 3 specifies that all key events bubble by default.
         * @param {Boolean} [options.cancelable=true] `true` if the event can be canceled
         * using `preventDefault`. DOM Level 3 specifies that all key events can be
         * cancelled.
         * @param {Boolean} [options.ctrlKey=false] `true` if one of the CTRL keys is
         * pressed while the event is firing.
         * @param {Boolean} [options.altKey=false] `true` if one of the ALT keys is
         * pressed while the event is firing.
         * @param {Boolean} [options.shiftKey=false] `true` if one of the SHIFT keys is
         * pressed while the event is firing.
         * @param {Boolean} [options.metaKey=false] `true` if one of the META keys is
         * pressed while the event is firing.
         * @param {Number} [options.keyCode=0] The code for the key that is in use.
         * @param {Number} [options.charCode=0] The Unicode code for the character 
         * associated with the key being used.
         * @param {Window} [view=window] The view containing the target. This is typically
         * the window object.
         * @private
         */\r
            injectKeyEvent: function(target, options, view) {\r
                var type = options.type,\r
                    customEvent = null;\r
                if (type === 'textevent') {\r
                    type = 'keypress';\r
                }\r
                view = view || window;\r
                //check for DOM-compliant browsers first\r
                if (doc.createEvent) {\r
                    try {\r
                        customEvent = doc.createEvent("KeyEvents");\r
                        // Interesting problem: Firefox implemented a non-standard\r
                        // version of initKeyEvent() based on DOM Level 2 specs.\r
                        // Key event was removed from DOM Level 2 and re-introduced\r
                        // in DOM Level 3 with a different interface. Firefox is the\r
                        // only browser with any implementation of Key Events, so for\r
                        // now, assume it's Firefox if the above line doesn't error.\r
                        // @TODO: Decipher between Firefox's implementation and a correct one.\r
                        customEvent.initKeyEvent(type, options.bubbles, options.cancelable, view, options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.keyCode, options.charCode);\r
                    } catch (ex) {\r
                        // If it got here, that means key events aren't officially supported. \r
                        // Safari/WebKit is a real problem now. WebKit 522 won't let you\r
                        // set keyCode, charCode, or other properties if you use a\r
                        // UIEvent, so we first must try to create a generic event. The\r
                        // fun part is that this will throw an error on Safari 2.x. The\r
                        // end result is that we need another try...catch statement just to\r
                        // deal with this mess.\r
                        try {\r
                            //try to create generic event - will fail in Safari 2.x\r
                            customEvent = doc.createEvent("Events");\r
                        } catch (uierror) {\r
                            //the above failed, so create a UIEvent for Safari 2.x\r
                            customEvent = doc.createEvent("UIEvents");\r
                        } finally {\r
                            customEvent.initEvent(type, options.bubbles, options.cancelable);\r
                            customEvent.view = view;\r
                            customEvent.altKey = options.altKey;\r
                            customEvent.ctrlKey = options.ctrlKey;\r
                            customEvent.shiftKey = options.shiftKey;\r
                            customEvent.metaKey = options.metaKey;\r
                            customEvent.keyCode = options.keyCode;\r
                            customEvent.charCode = options.charCode;\r
                        }\r
                    }\r
                    target.dispatchEvent(customEvent);\r
                } else if (doc.createEventObject) {\r
                    //IE\r
                    customEvent = doc.createEventObject();\r
                    customEvent.bubbles = options.bubbles;\r
                    customEvent.cancelable = options.cancelable;\r
                    customEvent.view = view;\r
                    customEvent.ctrlKey = options.ctrlKey;\r
                    customEvent.altKey = options.altKey;\r
                    customEvent.shiftKey = options.shiftKey;\r
                    customEvent.metaKey = options.metaKey;\r
                    // IE doesn't support charCode explicitly. CharCode should\r
                    // take precedence over any keyCode value for accurate\r
                    // representation.\r
                    customEvent.keyCode = (options.charCode > 0) ? options.charCode : options.keyCode;\r
                    target.fireEvent("on" + type, customEvent);\r
                } else {\r
                    return false;\r
                }\r
                return true;\r
            },\r
            /**
         * Injects a mouse event using the given event information to populate the event
         * object.
         *
         * @param {HTMLElement} target The target of the given event.
         * @param {Object} options Object object containing all of the event injection
         * options.
         * @param {String} options.type The type of event to fire. This can be any one of
         * the following: `click`, `dblclick`, `mousedown`, `mouseup`, `mouseout`,
         * `mouseover` and `mousemove`.
         * @param {Boolean} [options.bubbles=true] `tru` if the event can be bubbled up.
         * DOM Level 2 specifies that all mouse events bubble by default.
         * @param {Boolean} [options.cancelable=true] `true` if the event can be canceled
         * using `preventDefault`. DOM Level 2 specifies that all mouse events except
         * `mousemove` can be cancelled. This defaults to `false` for `mousemove`.
         * @param {Boolean} [options.ctrlKey=false] `true` if one of the CTRL keys is
         * pressed while the event is firing.
         * @param {Boolean} [options.altKey=false] `true` if one of the ALT keys is
         * pressed while the event is firing.
         * @param {Boolean} [options.shiftKey=false] `true` if one of the SHIFT keys is
         * pressed while the event is firing.
         * @param {Boolean} [options.metaKey=false] `true` if one of the META keys is
         * pressed while the event is firing.
         * @param {Number} [options.detail=1] The number of times the mouse button has 
         * been used.
         * @param {Number} [options.screenX=0] The x-coordinate on the screen at which point
         * the event occurred.
         * @param {Number} [options.screenY=0] The y-coordinate on the screen at which point
         * the event occurred.
         * @param {Number} [options.clientX=0] The x-coordinate on the client at which point
         * the event occurred.
         * @param {Number} [options.clientY=0] The y-coordinate on the client at which point
         * the event occurred.
         * @param {Number} [options.button=0] The button being pressed while the event is
         * executing. The value should be 0 for the primary mouse button (typically the
         * left button), 1 for the tertiary mouse button (typically the middle button),
         * and 2 for the secondary mouse button (typically the right button).
         * @param {HTMLElement} [options.relatedTarget=null] For `mouseout` events, this
         * is the element that the mouse has moved to. For `mouseover` events, this is
         * the element that the mouse has moved from. This argument is ignored for all
         * other events.
         * @param {Window} [view=window] The view containing the target. This is typically
         * the window object.
         * @private
         */\r
            injectMouseEvent: function(target, options, view) {\r
                var type = options.type,\r
                    customEvent = null;\r
                view = view || window;\r
                //check for DOM-compliant browsers first\r
                if (doc.createEvent) {\r
                    customEvent = doc.createEvent("MouseEvents");\r
                    //Safari 2.x (WebKit 418) still doesn't implement initMouseEvent()\r
                    if (customEvent.initMouseEvent) {\r
                        customEvent.initMouseEvent(type, options.bubbles, options.cancelable, view, options.detail, options.screenX, options.screenY, options.clientX, options.clientY, options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, options.relatedTarget);\r
                    } else {\r
                        //Safari\r
                        //the closest thing available in Safari 2.x is UIEvents\r
                        customEvent = doc.createEvent("UIEvents");\r
                        customEvent.initEvent(type, options.bubbles, options.cancelable);\r
                        customEvent.view = view;\r
                        customEvent.detail = options.detail;\r
                        customEvent.screenX = options.screenX;\r
                        customEvent.screenY = options.screenY;\r
                        customEvent.clientX = options.clientX;\r
                        customEvent.clientY = options.clientY;\r
                        customEvent.ctrlKey = options.ctrlKey;\r
                        customEvent.altKey = options.altKey;\r
                        customEvent.metaKey = options.metaKey;\r
                        customEvent.shiftKey = options.shiftKey;\r
                        customEvent.button = options.button;\r
                        customEvent.relatedTarget = options.relatedTarget;\r
                    }\r
                    /*
                 * Check to see if relatedTarget has been assigned. Firefox
                 * versions less than 2.0 don't allow it to be assigned via
                 * initMouseEvent() and the property is readonly after event
                 * creation, so in order to keep YAHOO.util.getRelatedTarget()
                 * working, assign to the IE proprietary toElement property
                 * for mouseout event and fromElement property for mouseover
                 * event.
                 */\r
                    if (options.relatedTarget && !customEvent.relatedTarget) {\r
                        if (type == "mouseout") {\r
                            customEvent.toElement = options.relatedTarget;\r
                        } else if (type == "mouseover") {\r
                            customEvent.fromElement = options.relatedTarget;\r
                        }\r
                    }\r
                    target.dispatchEvent(customEvent);\r
                } else if (doc.createEventObject) {\r
                    //IE\r
                    customEvent = doc.createEventObject();\r
                    customEvent.bubbles = options.bubbles;\r
                    customEvent.cancelable = options.cancelable;\r
                    customEvent.view = view;\r
                    customEvent.detail = options.detail;\r
                    customEvent.screenX = options.screenX;\r
                    customEvent.screenY = options.screenY;\r
                    customEvent.clientX = options.clientX;\r
                    customEvent.clientY = options.clientY;\r
                    customEvent.ctrlKey = options.ctrlKey;\r
                    customEvent.altKey = options.altKey;\r
                    customEvent.metaKey = options.metaKey;\r
                    customEvent.shiftKey = options.shiftKey;\r
                    customEvent.button = Player.ieButtonCodeMap[options.button] || 0;\r
                    /*
                 * Have to use relatedTarget because IE won't allow assignment
                 * to toElement or fromElement on generic events. This keeps
                 * YAHOO.util.customEvent.getRelatedTarget() functional.
                 */\r
                    customEvent.relatedTarget = options.relatedTarget;\r
                    target.fireEvent('on' + type, customEvent);\r
                } else {\r
                    return false;\r
                }\r
                return true;\r
            },\r
            /**
         * Injects a UI event using the given event information to populate the event
         * object.
         * 
         * @param {HTMLElement} target The target of the given event.
         * @param {Object} options
         * @param {String} options.type The type of event to fire. This can be any one of
         * the following: `click`, `dblclick`, `mousedown`, `mouseup`, `mouseout`,
         * `mouseover` and `mousemove`.
         * @param {Boolean} [options.bubbles=true] `tru` if the event can be bubbled up.
         * DOM Level 2 specifies that all mouse events bubble by default.
         * @param {Boolean} [options.cancelable=true] `true` if the event can be canceled
         * using `preventDefault`. DOM Level 2 specifies that all mouse events except
         * `mousemove` can be canceled. This defaults to `false` for `mousemove`.
         * @param {Number} [options.detail=1] The number of times the mouse button has been
         * used.
         * @param {Window} [view=window] The view containing the target. This is typically
         * the window object.
         * @private
         */\r
            injectUIEvent: function(target, options, view) {\r
                var customEvent = null;\r
                view = view || window;\r
                //check for DOM-compliant browsers first\r
                if (doc.createEvent) {\r
                    //just a generic UI Event object is needed\r
                    customEvent = doc.createEvent("UIEvents");\r
                    customEvent.initUIEvent(options.type, options.bubbles, options.cancelable, view, options.detail);\r
                    target.dispatchEvent(customEvent);\r
                } else if (doc.createEventObject) {\r
                    //IE\r
                    customEvent = doc.createEventObject();\r
                    customEvent.bubbles = options.bubbles;\r
                    customEvent.cancelable = options.cancelable;\r
                    customEvent.view = view;\r
                    customEvent.detail = options.detail;\r
                    target.fireEvent("on" + options.type, customEvent);\r
                } else {\r
                    return false;\r
                }\r
                return true;\r
            }\r
        }\r
    };\r
});\r
// statics\r
\r
/**
 * @extends Ext.ux.event.Driver
 * Event recorder.
 */\r
Ext.define('Ext.ux.event.Recorder', function(Recorder) {\r
    function apply() {\r
        var a = arguments,\r
            n = a.length,\r
            obj = {\r
                kind: 'other'\r
            },\r
            i;\r
        for (i = 0; i < n; ++i) {\r
            Ext.apply(obj, arguments[i]);\r
        }\r
        if (obj.alt && !obj.event) {\r
            obj.event = obj.alt;\r
        }\r
        return obj;\r
    }\r
    function key(extra) {\r
        return apply({\r
            kind: 'keyboard',\r
            modKeys: true,\r
            key: true\r
        }, extra);\r
    }\r
    function mouse(extra) {\r
        return apply({\r
            kind: 'mouse',\r
            button: true,\r
            modKeys: true,\r
            xy: true\r
        }, extra);\r
    }\r
    var eventsToRecord = {\r
            keydown: key(),\r
            keypress: key(),\r
            keyup: key(),\r
            dragmove: mouse({\r
                alt: 'mousemove',\r
                pageCoords: true,\r
                whileDrag: true\r
            }),\r
            mousemove: mouse({\r
                pageCoords: true\r
            }),\r
            mouseover: mouse(),\r
            mouseout: mouse(),\r
            click: mouse(),\r
            wheel: mouse({\r
                wheel: true\r
            }),\r
            mousedown: mouse({\r
                press: true\r
            }),\r
            mouseup: mouse({\r
                release: true\r
            }),\r
            scroll: apply({\r
                listen: false\r
            }),\r
            focus: apply(),\r
            blur: apply()\r
        };\r
    for (var key in eventsToRecord) {\r
        if (!eventsToRecord[key].event) {\r
            eventsToRecord[key].event = key;\r
        }\r
    }\r
    eventsToRecord.wheel.event = null;\r
    // must detect later\r
    return {\r
        extend: 'Ext.ux.event.Driver',\r
        /**
         * @event add
         * Fires when an event is added to the recording.
         * @param {Ext.ux.event.Recorder} this
         * @param {Object} eventDescriptor The event descriptor.
         */\r
        /**
         * @event coalesce
         * Fires when an event is coalesced. This edits the tail of the recorded
         * event list.
         * @param {Ext.ux.event.Recorder} this
         * @param {Object} eventDescriptor The event descriptor that was coalesced.
         */\r
        eventsToRecord: eventsToRecord,\r
        ignoreIdRegEx: /ext-gen(?:\d+)/,\r
        inputRe: /^(input|textarea)$/i,\r
        constructor: function(config) {\r
            var me = this,\r
                events = config && config.eventsToRecord;\r
            if (events) {\r
                me.eventsToRecord = Ext.apply(Ext.apply({}, me.eventsToRecord), // duplicate\r
                events);\r
                // and merge\r
                delete config.eventsToRecord;\r
            }\r
            // don't smash\r
            me.callParent(arguments);\r
            me.clear();\r
            me.modKeys = [];\r
            me.attachTo = me.attachTo || window;\r
        },\r
        clear: function() {\r
            this.eventsRecorded = [];\r
        },\r
        listenToEvent: function(event) {\r
            var me = this,\r
                el = me.attachTo.document.body,\r
                fn = function() {\r
                    return me.onEvent.apply(me, arguments);\r
                },\r
                cleaner = {};\r
            if (el.attachEvent && el.ownerDocument.documentMode < 10) {\r
                event = 'on' + event;\r
                el.attachEvent(event, fn);\r
                cleaner.destroy = function() {\r
                    if (fn) {\r
                        el.detachEvent(event, fn);\r
                        fn = null;\r
                    }\r
                };\r
            } else {\r
                el.addEventListener(event, fn, true);\r
                cleaner.destroy = function() {\r
                    if (fn) {\r
                        el.removeEventListener(event, fn, true);\r
                        fn = null;\r
                    }\r
                };\r
            }\r
            return cleaner;\r
        },\r
        coalesce: function(rec, ev) {\r
            var me = this,\r
                events = me.eventsRecorded,\r
                length = events.length,\r
                tail = length && events[length - 1],\r
                tail2 = (length > 1) && events[length - 2],\r
                tail3 = (length > 2) && events[length - 3];\r
            if (!tail) {\r
                return false;\r
            }\r
            if (rec.type === 'mousemove') {\r
                if (tail.type === 'mousemove' && rec.ts - tail.ts < 200) {\r
                    rec.ts = tail.ts;\r
                    events[length - 1] = rec;\r
                    return true;\r
                }\r
            } else if (rec.type === 'click') {\r
                if (tail2 && tail.type === 'mouseup' && tail2.type === 'mousedown') {\r
                    if (rec.button == tail.button && rec.button == tail2.button && rec.target == tail.target && rec.target == tail2.target && me.samePt(rec, tail) && me.samePt(rec, tail2)) {\r
                        events.pop();\r
                        // remove mouseup\r
                        tail2.type = 'mduclick';\r
                        return true;\r
                    }\r
                }\r
            } else if (rec.type === 'keyup') {\r
                // tail3 = { type: "type",     text: "..." },\r
                // tail2 = { type: "keydown",  charCode: 65, keyCode: 65 },\r
                // tail  = { type: "keypress", charCode: 97, keyCode: 97 },\r
                // rec   = { type: "keyup",    charCode: 65, keyCode: 65 },\r
                if (tail2 && tail.type === 'keypress' && tail2.type === 'keydown') {\r
                    if (rec.target === tail.target && rec.target === tail2.target) {\r
                        events.pop();\r
                        // remove keypress\r
                        tail2.type = 'type';\r
                        tail2.text = String.fromCharCode(tail.charCode);\r
                        delete tail2.charCode;\r
                        delete tail2.keyCode;\r
                        if (tail3 && tail3.type === 'type') {\r
                            if (tail3.text && tail3.target === tail2.target) {\r
                                tail3.text += tail2.text;\r
                                events.pop();\r
                            }\r
                        }\r
                        return true;\r
                    }\r
                }\r
                // tail = { type: "keydown", charCode: 40, keyCode: 40 },\r
                // rec  = { type: "keyup",   charCode: 40, keyCode: 40 },\r
                else if (me.completeKeyStroke(tail, rec)) {\r
                    tail.type = 'type';\r
                    me.completeSpecialKeyStroke(ev.target, tail, rec);\r
                    return true;\r
                }\r
                // tail2 = { type: "keydown", charCode: 40, keyCode: 40 },\r
                // tail  = { type: "scroll",  ... },\r
                // rec   = { type: "keyup",   charCode: 40, keyCode: 40 },\r
                else if (tail.type === 'scroll' && me.completeKeyStroke(tail2, rec)) {\r
                    tail2.type = 'type';\r
                    me.completeSpecialKeyStroke(ev.target, tail2, rec);\r
                    // swap the order of type and scroll events\r
                    events.pop();\r
                    events.pop();\r
                    events.push(tail, tail2);\r
                    return true;\r
                }\r
            }\r
            return false;\r
        },\r
        completeKeyStroke: function(down, up) {\r
            if (down && down.type === 'keydown' && down.keyCode === up.keyCode) {\r
                delete down.charCode;\r
                return true;\r
            }\r
            return false;\r
        },\r
        completeSpecialKeyStroke: function(target, down, up) {\r
            var key = this.specialKeysByCode[up.keyCode];\r
            if (key && this.inputRe.test(target.tagName)) {\r
                // home,end,arrow keys + shift get crazy, so encode selection/caret\r
                delete down.keyCode;\r
                down.key = key;\r
                down.selection = this.getTextSelection(target);\r
                if (down.selection[0] === down.selection[1]) {\r
                    down.caret = down.selection[0];\r
                    delete down.selection;\r
                }\r
                return true;\r
            }\r
            return false;\r
        },\r
        getElementXPath: function(el) {\r
            var me = this,\r
                good = false,\r
                xpath = [],\r
                count, sibling, t, tag;\r
            for (t = el; t; t = t.parentNode) {\r
                if (t == me.attachTo.document.body) {\r
                    xpath.unshift('~');\r
                    good = true;\r
                    break;\r
                }\r
                if (t.id && !me.ignoreIdRegEx.test(t.id)) {\r
                    xpath.unshift('#' + t.id);\r
                    good = true;\r
                    break;\r
                }\r
                for (count = 1 , sibling = t; !!(sibling = sibling.previousSibling); ) {\r
                    if (sibling.tagName == t.tagName) {\r
                        ++count;\r
                    }\r
                }\r
                tag = t.tagName.toLowerCase();\r
                if (count < 2) {\r
                    xpath.unshift(tag);\r
                } else {\r
                    xpath.unshift(tag + '[' + count + ']');\r
                }\r
            }\r
            return good ? xpath.join('/') : null;\r
        },\r
        getRecordedEvents: function() {\r
            return this.eventsRecorded;\r
        },\r
        onEvent: function(ev) {\r
            var me = this,\r
                e = new Ext.event.Event(ev),\r
                info = me.eventsToRecord[e.type],\r
                root, modKeys, elXY,\r
                rec = {\r
                    type: e.type,\r
                    ts: me.getTimestamp(),\r
                    target: me.getElementXPath(e.target)\r
                },\r
                xy;\r
            if (!info || !rec.target) {\r
                return;\r
            }\r
            root = e.target.ownerDocument;\r
            root = root.defaultView || root.parentWindow;\r
            // Standards || IE\r
            if (root !== me.attachTo) {\r
                return;\r
            }\r
            if (me.eventsToRecord.scroll) {\r
                me.syncScroll(e.target);\r
            }\r
            if (info.xy) {\r
                xy = e.getXY();\r
                if (info.pageCoords || !rec.target) {\r
                    rec.px = xy[0];\r
                    rec.py = xy[1];\r
                } else {\r
                    elXY = Ext.fly(e.getTarget()).getXY();\r
                    xy[0] -= elXY[0];\r
                    xy[1] -= elXY[1];\r
                    rec.x = xy[0];\r
                    rec.y = xy[1];\r
                }\r
            }\r
            if (info.button) {\r
                if ('buttons' in ev) {\r
                    rec.button = ev.buttons;\r
                } else // LEFT=1, RIGHT=2, MIDDLE=4, etc.\r
                {\r
                    rec.button = ev.button;\r
                }\r
                if (!rec.button && info.whileDrag) {\r
                    return;\r
                }\r
            }\r
            if (info.wheel) {\r
                rec.type = 'wheel';\r
                if (info.event === 'wheel') {\r
                    // Current FireFox (technically IE9+ if we use addEventListener but\r
                    // checking document.onwheel does not detect this)\r
                    rec.dx = ev.deltaX;\r
                    rec.dy = ev.deltaY;\r
                } else if (typeof ev.wheelDeltaX === 'number') {\r
                    // new WebKit has both X & Y\r
                    rec.dx = -1 / 40 * ev.wheelDeltaX;\r
                    rec.dy = -1 / 40 * ev.wheelDeltaY;\r
                } else if (ev.wheelDelta) {\r
                    // old WebKit and IE\r
                    rec.dy = -1 / 40 * ev.wheelDelta;\r
                } else if (ev.detail) {\r
                    // Old Gecko\r
                    rec.dy = ev.detail;\r
                }\r
            }\r
            if (info.modKeys) {\r
                me.modKeys[0] = e.altKey ? 'A' : '';\r
                me.modKeys[1] = e.ctrlKey ? 'C' : '';\r
                me.modKeys[2] = e.metaKey ? 'M' : '';\r
                me.modKeys[3] = e.shiftKey ? 'S' : '';\r
                modKeys = me.modKeys.join('');\r
                if (modKeys) {\r
                    rec.modKeys = modKeys;\r
                }\r
            }\r
            if (info.key) {\r
                rec.charCode = e.getCharCode();\r
                rec.keyCode = e.getKey();\r
            }\r
            if (me.coalesce(rec, e)) {\r
                me.fireEvent('coalesce', me, rec);\r
            } else {\r
                me.eventsRecorded.push(rec);\r
                me.fireEvent('add', me, rec);\r
            }\r
        },\r
        onStart: function() {\r
            var me = this,\r
                ddm = me.attachTo.Ext.dd.DragDropManager,\r
                evproto = me.attachTo.Ext.EventObjectImpl.prototype,\r
                special = [];\r
            // FireFox does not support the 'mousewheel' event but does support the\r
            // 'wheel' event instead.\r
            Recorder.prototype.eventsToRecord.wheel.event = ('onwheel' in me.attachTo.document) ? 'wheel' : 'mousewheel';\r
            me.listeners = [];\r
            Ext.Object.each(me.eventsToRecord, function(name, value) {\r
                if (value && value.listen !== false) {\r
                    if (!value.event) {\r
                        value.event = name;\r
                    }\r
                    if (value.alt && value.alt !== name) {\r
                        // The 'drag' event is just mousemove while buttons are pressed,\r
                        // so if there is a mousemove entry as well, ignore the drag\r
                        if (!me.eventsToRecord[value.alt]) {\r
                            special.push(value);\r
                        }\r
                    } else {\r
                        me.listeners.push(me.listenToEvent(value.event));\r
                    }\r
                }\r
            });\r
            Ext.each(special, function(info) {\r
                me.eventsToRecord[info.alt] = info;\r
                me.listeners.push(me.listenToEvent(info.alt));\r
            });\r
            me.ddmStopEvent = ddm.stopEvent;\r
            ddm.stopEvent = Ext.Function.createSequence(ddm.stopEvent, function(e) {\r
                me.onEvent(e);\r
            });\r
            me.evStopEvent = evproto.stopEvent;\r
            evproto.stopEvent = Ext.Function.createSequence(evproto.stopEvent, function() {\r
                me.onEvent(this);\r
            });\r
        },\r
        onStop: function() {\r
            var me = this;\r
            Ext.destroy(me.listeners);\r
            me.listeners = null;\r
            me.attachTo.Ext.dd.DragDropManager.stopEvent = me.ddmStopEvent;\r
            me.attachTo.Ext.EventObjectImpl.prototype.stopEvent = me.evStopEvent;\r
        },\r
        samePt: function(pt1, pt2) {\r
            return pt1.x == pt2.x && pt1.y == pt2.y;\r
        },\r
        syncScroll: function(el) {\r
            var me = this,\r
                ts = me.getTimestamp(),\r
                oldX, oldY, x, y, scrolled, rec;\r
            for (var p = el; p; p = p.parentNode) {\r
                oldX = p.$lastScrollLeft;\r
                oldY = p.$lastScrollTop;\r
                x = p.scrollLeft;\r
                y = p.scrollTop;\r
                scrolled = false;\r
                if (oldX !== x) {\r
                    if (x) {\r
                        scrolled = true;\r
                    }\r
                    p.$lastScrollLeft = x;\r
                }\r
                if (oldY !== y) {\r
                    if (y) {\r
                        scrolled = true;\r
                    }\r
                    p.$lastScrollTop = y;\r
                }\r
                if (scrolled) {\r
                    //console.log('scroll x:' + x + ' y:' + y, p);\r
                    me.eventsRecorded.push(rec = {\r
                        type: 'scroll',\r
                        target: me.getElementXPath(p),\r
                        ts: ts,\r
                        pos: [\r
                            x,\r
                            y\r
                        ]\r
                    });\r
                    me.fireEvent('add', me, rec);\r
                }\r
                if (p.tagName === 'BODY') {\r
                    break;\r
                }\r
            }\r
        }\r
    };\r
});\r
\r
/**
 * This base class can be used by derived classes to dynamically require Google API's.
 */\r
Ext.define('Ext.ux.google.Api', {\r
    mixins: [\r
        'Ext.mixin.Mashup'\r
    ],\r
    requiredScripts: [\r
        '//www.google.com/jsapi'\r
    ],\r
    statics: {\r
        loadedModules: {}\r
    },\r
    /*
             *  feeds: [ callback1, callback2, .... ]  transitions to -> feeds : true  (when complete)
             */\r
    onClassExtended: function(cls, data, hooks) {\r
        var onBeforeClassCreated = hooks.onBeforeCreated,\r
            Api = this;\r
        // the Ext.ux.google.Api class\r
        hooks.onBeforeCreated = function(cls, data) {\r
            var me = this,\r
                apis = [],\r
                requiresGoogle = Ext.Array.from(data.requiresGoogle),\r
                loadedModules = Api.loadedModules,\r
                remaining = 0,\r
                callback = function() {\r
                    if (!--remaining) {\r
                        onBeforeClassCreated.call(me, cls, data, hooks);\r
                    }\r
                    Ext.env.Ready.unblock();\r
                },\r
                api, i, length;\r
            /*
             *  requiresGoogle: [
             *      'feeds',
             *      { api: 'feeds', version: '1.x',
             *        callback : fn, nocss : true }  //optionals
             *  ]
             */\r
            length = requiresGoogle.length;\r
            for (i = 0; i < length; ++i) {\r
                if (Ext.isString(api = requiresGoogle[i])) {\r
                    apis.push({\r
                        api: api\r
                    });\r
                } else if (Ext.isObject(api)) {\r
                    apis.push(Ext.apply({}, api));\r
                }\r
            }\r
            Ext.each(apis, function(api) {\r
                var name = api.api,\r
                    version = String(api.version || '1.x'),\r
                    module = loadedModules[name];\r
                if (!module) {\r
                    ++remaining;\r
                    Ext.env.Ready.block();\r
                    loadedModules[name] = module = [\r
                        callback\r
                    ].concat(api.callback || []);\r
                    delete api.api;\r
                    delete api.version;\r
                    //TODO:  window.google assertion?\r
                    google.load(name, version, Ext.applyIf({\r
                        callback: function() {\r
                            loadedModules[name] = true;\r
                            for (var n = module.length; n-- > 0; ) {\r
                                module[n]();\r
                            }\r
                        }\r
                    }, //iterate callbacks in reverse\r
                    api));\r
                } else if (module !== true) {\r
                    module.push(callback);\r
                }\r
            });\r
            if (!remaining) {\r
                onBeforeClassCreated.call(me, cls, data, hooks);\r
            }\r
        };\r
    }\r
});\r
\r
/**
 * This class, when required, ensures that the Google RSS Feeds API is available.
 */\r
Ext.define('Ext.ux.google.Feeds', {\r
    extend: 'Ext.ux.google.Api',\r
    requiresGoogle: {\r
        api: 'feeds',\r
        nocss: true\r
    }\r
});\r
\r