compass_ae_sencha 1.0.0

data/public/stylesheets/clifton/resources/assets/test.js

@@ -0,0 +1,997 @@
+
+/**
+ * @class Ext.ux.event.Driver
+ * This is the base class for {@link Recorder} and {@link Player}.
+ */
+Ext.define('Ext.ux.event.Driver', {
+    active: null,
+    mixins: {
+        observable: 'Ext.util.Observable'
+    },
+
+    constructor: function (config) {
+        var me = this;
+
+        me.mixins.observable.constructor.apply(this, arguments);
+
+        me.addEvents(
+            /**
+             * @event start
+             * Fires when this object is started.
+             * @param {Ext.ux.event.Driver} this
+             */
+            'start',
+
+            /**
+             * @event stop
+             * Fires when this object is stopped.
+             * @param {Ext.ux.event.Driver} this
+             */
+            'stop'
+        );
+    },
+
+    /**
+     * Returns the number of milliseconds since start was called.
+     */
+    getTimestamp: function () {
+        var d = new Date();
+        return d.getTime() - this.startTime;
+    },
+
+    onStart: function () {},
+
+    onStop: function () {},
+
+    /**
+     * Starts this object. If this object is already started, nothing happens.
+     */
+    start: function () {
+        var me = this;
+
+        if (!me.active) {
+            me.active = new Date();
+            me.startTime = me.active.getTime();
+            me.onStart();
+            me.fireEvent('start', me);
+        }
+    },
+
+    /**
+     * Stops this object. If this object is not started, nothing happens.
+     */
+    stop: function () {
+        var me = this;
+
+        if (me.active) {
+            me.active = null;
+            me.onStop();
+            me.fireEvent('stop', me);
+        }
+    }
+});
+
+/**
+ * @class Ext.ux.event.Player
+ * @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 Recorder}. The events recorded by the
+ * {@link 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 #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
+ *          }
+ *      }
+ *
+ * @markdown
+ */
+Ext.define('Ext.ux.event.Player', {
+    extend: 'Ext.ux.event.Driver',
+
+    /**
+     * @cfg {Array} eventQueue The event queue to playback. This must be provided before
+     * the {@link #start} method is called.
+     */
+
+    /**
+     * @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.
+     */
+    keyFrameEvents: {
+        click: true
+    },
+
+    /**
+     * @cfg {Boolean} pauseForAnimations True to pause event playback during animations, false
+     * to ignore animations. Default is true.
+     */
+    pauseForAnimations: true,
+
+    /**
+     * @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.
+     */
+    speed: 1.0,
+
+    tagPathRegEx: /(\w+)(?:\[(\d+)\])?/,
+    
+    
+    screenshotTimeout: 500,
+    
+    constructor: function (config) {
+        var me = this;
+        
+        me.callParent(arguments);
+
+        me.addEvents(
+            /**
+             * @event beforeplay
+             * Fires before an event is played.
+             * @param {Ext.ux.event.Player} this
+             * @param {Object} eventDescriptor The event descriptor about to be played.
+             */
+            'beforeplay',
+
+            /**
+             * @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.
+             */
+            'keyframe'
+        );
+
+        me.eventObject = new Ext.EventObjectImpl();
+
+        me.timerFn = function () {
+            me.onTick();
+        };
+        me.attachTo = me.attachTo || window;
+    },
+    
+    /**
+     * Returns the element given is XPath-like description.
+     * @param {String} xpath The XPath-like description of the element.
+     * @return {HTMLElement}
+     */
+    getElementFromXPath: function (xpath) {
+        var me = this,
+            parts = xpath.split('/'),
+            regex = me.tagPathRegEx,
+            i, n, m, count, tag, child,
+            el = me.attachTo.document;
+
+        el = (parts[0] == '~') ? el.body
+                    : el.getElementById(parts[0].substring(1)); // remove '#'
+
+        for (i = 1, n = parts.length; el && i < n; ++i) {
+            m = regex.exec(parts[i]);
+            count = m[2] ? parseInt(m[2], 10) : 1;
+            tag = m[1].toUpperCase();
+
+            for (child = el.firstChild; child; child = child.nextSibling) {
+                if (child.tagName == tag) {
+                    if (count == 1) {
+                        break;
+                    }
+                    --count;
+                }
+            }
+
+            el = child;
+        }
+
+        return el;
+    },
+
+    /**
+     * 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.
+     */
+    nextEvent: function (eventDescriptor) {
+        var me = this, index;
+        
+        if (eventDescriptor.screenshot) {  
+            eventDescriptor.played = true;
+            return;
+        }
+        
+        if (eventDescriptor.after) {
+            eventDescriptor.after();
+            delete eventDescriptor.after;
+            return;
+        }
+            
+        index = ++me.queueIndex;
+        // keyframe events are inserted after a keyFrameEvent is played.
+        if (me.keyFrameEvents[eventDescriptor.type]) {
+            Ext.Array.insert(me.eventQueue, index, [
+                { keyframe: true, ts: eventDescriptor.ts }
+            ]);
+        }
+    },
+
+    /**
+     * 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).
+     */
+    peekEvent: function () {
+        var me = this,
+            queue = me.eventQueue,
+            index = me.queueIndex,
+            eventDescriptor = queue[index],
+            type = eventDescriptor && eventDescriptor.type,
+            tmp;
+        
+        if (type == 'mduclick') {
+            tmp = [
+                Ext.applyIf({ type: 'mousedown' }, eventDescriptor),
+                Ext.applyIf({ type: 'mouseup' }, eventDescriptor),
+                Ext.applyIf({ type: 'click' }, eventDescriptor)
+            ];
+            delete tmp[0].screenshot;
+            delete tmp[0].after;
+            delete tmp[1].screenshot;
+            delete tmp[1].after;
+            Ext.Array.replace(queue, index, 1, tmp);
+        }
+
+//        if (type == 'drag') {
+//
+//            Ext.Array.replace(queue, index, 1, me.createDrag(eventDescriptor));
+//            return queue[index];
+//        }
+        return queue[index] || null;
+    },
+    
+    // TODO
+//    dragStep: 5,
+//    
+//    createDrag: function(eventDescriptor) {
+//        var me = this,
+//            tmp = [
+//             Ext.applyIf({ type: 'mousedown' }, eventDescriptor)
+//        ],
+//        
+//        from = me.getTarget(eventDescriptor).xy,
+//        to = me.getTarget(eventDescriptor.dropTo).xy,
+//        i = 0,
+//        xinc, yinc, x, y;
+//        
+//
+//        
+//        xinc = (to[0] - from[0]) / me.dragStep;
+//        
+//        yinc =  (to[1] - from[1]) / me.dragStep;
+//        
+//        x = from[0] + xinc;
+//        y = from[1] + yinc;
+//        
+//        
+//        for (i = 0; i < me.dragStep; i++) {
+//            tmp.push(Ext.applyIf({ type: 'mousemove', xy: [x,y]}, eventDescriptor));
+//            x += xinc;
+//            y += yinc;
+//        }
+//        
+//        tmp.push(Ext.applyIf({ type: 'mouseup' }, eventDescriptor.dropTo));
+//        
+//        return tmp;
+//    },
+    /**
+     * 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).
+     */
+    processEvents: function () {
+        var me = this,
+            animations = me.pauseForAnimations && me.attachTo.Ext.fx.Manager.items,
+            eventDescriptor;
+        while ((eventDescriptor = me.peekEvent()) !== null) {
+            
+            if (animations && animations.getCount()) {
+                return true;
+            }
+                    
+            if (eventDescriptor.screenshot && eventDescriptor.played) {
+                delete eventDescriptor.screenshot;
+                delete eventDescriptor.played;
+                me.snap();
+                me.nextEvent(eventDescriptor);
+                continue;
+            }
+            if (eventDescriptor.keyframe) {
+                if (!me.processKeyFrame(eventDescriptor)) {
+                    return false;
+                }
+                me.nextEvent(eventDescriptor);
+            } else if (eventDescriptor.ts <= me.timeIndex  || !eventDescriptor.ts &&
+                       me.fireEvent('beforeplay', me, eventDescriptor) !== false &&
+                       me.playEvent(eventDescriptor)) {
+                me.nextEvent(eventDescriptor);
+                if (eventDescriptor.played) {
+                    return true;
+                }
+            } else {
+                return true;
+            }
+        }
+        me.stop();
+        return false;
+    },
+
+    snap: function() {
+       if (window.__x && __x.poll) {                    
+          __x.poll.sendSyncRequest({cmd: 'screenshot'});
+       } else {
+          alert('sreenshot');
+       }
+    },
+    
+    /**
+     * 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} The event descriptor of the keyframe.
+     * @return {Boolean} True if the keyframe was handled, false if not.
+     */
+    processKeyFrame: function (eventDescriptor) {
+        var me = this;
+
+        // only fire keyframe event (and setup the eventDescriptor) once...
+        if (!eventDescriptor.defer) {
+            eventDescriptor.done = true;
+
+            eventDescriptor.defer = function () {
+                eventDescriptor.done = false;
+            };
+
+            eventDescriptor.finish = function () {
+                eventDescriptor.done = true;
+                me.schedule();
+            };
+
+            me.fireEvent('keyframe', me, eventDescriptor);
+        }
+
+        return eventDescriptor.done;
+    },
+
+    /**
+     * Called to inject the given event on the specified target.
+     * @param {HTMLElement} target The target of the event.
+     * @param {Ext.EventObject} The event to inject.
+     */
+    injectEvent: function (target, event) {
+        event.injectEvent(target);
+    },
+
+    playEvent: function (eventDescriptor) {
+        var me = this,
+            target,
+            event;
+
+        if (eventDescriptor.cmpQuery || eventDescriptor.domQuery) {
+            me.getTarget(eventDescriptor);
+        }
+        
+        if (eventDescriptor.target) {
+            target = me.getElementFromXPath(eventDescriptor.target);
+        }
+        
+        if (!target) {
+            // not present (yet)... wait for element present...
+            // TODO - need a timeout here
+            return false;
+        }
+
+        event = me.translateEvent(eventDescriptor, target);
+        me.injectEvent(target, event);
+        return true;
+    },
+
+    schedule: function () {
+        var me = this;
+        if (!me.timer) {
+            me.timer = setTimeout(me.timerFn, 250);
+        }
+    },
+
+    translateEvent: function (eventDescriptor, target) {
+        var me = this,
+            event = me.eventObject,
+            modKeys = eventDescriptor.modKeys || '',
+            xy;
+
+        if ('xy' in eventDescriptor) {
+            event.xy = xy = Ext.fly(target).getXY();
+            xy[0] += eventDescriptor.xy[0];
+            xy[1] += eventDescriptor.xy[1];
+        }
+
+
+        if ('wheel' in eventDescriptor) {
+            // see getWheelDelta
+        }
+
+        event.type = eventDescriptor.type;
+        event.button = eventDescriptor.button;
+        event.altKey = modKeys.indexOf('A') > 0;
+        event.ctrlKey = modKeys.indexOf('C') > 0;
+        event.metaKey = modKeys.indexOf('M') > 0;
+        event.shiftKey = modKeys.indexOf('S') > 0;
+
+
+        return event;
+    },
+
+    getTarget: function(eventDescriptor) {
+        var me = this;
+        eventDescriptor.el = eventDescriptor.el || 'el';
+        if (eventDescriptor.cmpQuery) {
+            me.findTarget(eventDescriptor, Ext.ComponentQuery.query(eventDescriptor.cmpQuery)[0]);
+        } else {
+            me.findTarget(eventDescriptor);
+        }
+        
+        return eventDescriptor;
+    },
+    
+    findTarget: function(eventDescriptor, cmp) {
+        var me = this,
+            x, y, el, offsetX, offsetY;
+        if (cmp) {
+            if (!eventDescriptor.domQuery) {
+                el = cmp[eventDescriptor.el];
+            } else {
+                el = cmp.el.down(eventDescriptor.domQuery);
+            }
+        } else {
+    
+            el = Ext.get(Ext.DomQuery.selectNode(eventDescriptor.domQuery));
+        }
+        try {
+            eventDescriptor.target = '#' + el.dom.id;
+            if (!eventDescriptor.xy) {
+                if (eventDescriptor.offset) {
+                    offsetX = eventDescriptor.offset[0];
+                    offsetY = eventDescriptor.offset[1];
+                    if (offsetX > 0) {
+                        x = offsetX;
+                    } else {
+                        x = el.getWidth() - offsetX;
+                    }
+                    if (offsetY > 0) {
+                        y = offsetY;
+                    } else {
+                        y = el.getHeight() - offsetY;
+                    }
+                // default centering
+                } else {
+                    x = (el.getWidth() / 2);
+                    y = (el.getHeight() / 2);
+                }
+                eventDescriptor.xy = [x,y];
+            }
+            
+        
+        } catch(e) {}
+        
+        return eventDescriptor;
+    },
+    
+    //---------------------------------
+    // Driver overrides
+
+    onStart: function () {
+        var me = this;
+
+        me.queueIndex = 0;
+        me.schedule();
+    },
+
+    onStop: function () {
+        var me = this;
+
+        if (me.timer) {
+            clearTimeout(me.timer);
+            me.timer = null;
+        }
+        if (window.__x && __x.poll) {
+            __x.poll.sendSyncRequest({cmd: 'finish'});
+        }
+    },
+
+    //---------------------------------
+
+    onTick: function () {
+        var me = this;
+
+        me.timer = null;
+        me.timeIndex = me.getTimestamp() * me.speed;
+
+        if (me.processEvents()) {
+            me.schedule();
+        }
+    }
+});
+
+Ext.define('Ext.ux.event.Maker', {
+
+    eventQueue: [],
+    
+    startAfter: 0,
+    
+    timerIncrement: 2000,
+    
+    currentTiming: 0,
+    
+    constructor: function(config) {
+        var me = this;
+        
+        me.currentTiming = me.startAfter;
+        
+        if(!Ext.isArray(config)) {
+            config = [config];
+        }
+        
+        Ext.Array.each(config, function(item) {
+            item.el = item.el || 'el';
+            if (item.cmpQuery) {
+                Ext.Array.each(Ext.ComponentQuery.query(item.cmpQuery), function(cmp) {
+                    me.generateEvent(item, cmp);
+                });
+            } else {
+                me.generateEvent(item);
+            }
+            if (item.endingScreenshot) {
+                me.eventQueue[me.eventQueue.length - 1].screenshot = true;
+            }
+        });
+
+        return me.eventQueue;
+    },
+    
+    generateEvent: function(item, cmp) {
+        var me = this,
+            event = {}, x, y, el;
+        if (cmp) {
+            if (!item.domQuery) {
+                el = cmp[item.el];
+            } else {
+                el = cmp.el.down(item.domQuery);
+                
+            }
+        } else {
+            el = Ext.get(Ext.DomQuery.selectNode(item.domQuery));
+        }
+        event.target = '#' + el.dom.id;
+
+//        event.type = item.type;
+
+//        event.key = item.key;
+//        event.button = item.button || 0;
+
+        x = el.getX() + (el.getWidth() / 2);
+        y = el.getY() + (el.getHeight() / 2);
+
+        event.xy = [x,y];
+
+        event.ts = me.currentTiming;
+
+        event.screenshot = item.screenshot;
+        me.currentTiming += me.timerIncrement;
+        
+        me.eventQueue.push(event);
+    }
+});
+
+Ext.onReady(function() {
+    if (!window.__x) {
+         __x = {};
+    } else {
+        __x.poll.interval = 50;
+        __x.poll.connect(); 
+    }
+   
+//        
+//    
+      __x.player = Ext.create('Ext.ux.event.Player', {
+             eventQueue: [{
+                 cmpQuery: 'panel[title="Collapsed Panel"] > header > tool[type=expand-bottom]',
+                
+                 domQuery: 'img',
+                 
+                 type: 'mduclick',
+                 
+                 screenshot: true
+             },{
+                cmpQuery: 'panel[title="Collapsed Panel"] > header > tool[type=collapse-top]',
+                
+                 domQuery: 'img',
+                 
+                 type: 'mduclick',
+                 
+                 screenshot: true
+             },{
+                     
+                 cmpQuery: 'panel[title="Masked Panel"] > header > tool[type=collapse-top]',
+                
+                 domQuery: 'img',
+                 
+                 type: 'mduclick',
+                 
+                 screenshot: true
+            },{
+                 cmpQuery: 'panel[title="Masked Panel"] > header > tool[type=collapse-bottom]',
+                
+                 domQuery: 'img',
+                 
+                 type: 'mduclick',
+                 
+                 screenshot: true
+            },{
+                cmpQuery: 'panel[title="Collapsed Framed Panel"] > header > tool[type=expand-bottom]',
+                
+                domQuery: 'img',
+                 
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'panel[title="Collapsed Framed Panel"] > header > tool[type=collapse-top]',
+                
+                domQuery: 'img',
+                 
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'window[title=Window] > toolbar > button[text=Submit]',
+                
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'button[text=Yes]',
+                
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'window[title=Window] > header > tool[type=collapse-top]',
+                
+                domQuery: 'img',
+                 
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'window[title=Window] > header > tool[type=collapse-bottom]',
+                
+                domQuery: 'img',
+                 
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{ 
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=top] > buttongroup > button[text=Menu Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mouseover'
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=top] > buttongroup > button[text=Menu Button]',
+                
+                offset: [-2, -3],
+                
+                type: 'mousemove'
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=top] > buttongroup > button[text=Menu Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=top] > buttongroup > button[text=Menu Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mduclick',
+                 
+                screenshot: true
+                
+            },{ 
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=top] > buttongroup > button[text=Menu Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mouseout',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=top] > buttongroup > button[text=Cut]',
+                
+                offset: [-2, -2],
+                
+                type: 'mouseover'
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=top] > buttongroup > button[text=Cut]',
+                
+                offset: [-2, -3],
+                
+                type: 'mousemove'
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=top] > buttongroup > button[text=Cut]',
+                
+                offset: [-2, -2],
+                
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=top] > buttongroup > button[text=Cut]',
+                
+                offset: [-2, -2],
+                
+                type: 'mduclick',
+                 
+                screenshot: true
+
+            },{ 
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=top] > buttongroup > button[text=Cut]',
+                
+                offset: [-2, -2],
+                
+                type: 'mouseout',
+                 
+                screenshot: true
+            },{
+                
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Menu Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mouseover'
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Menu Button]',
+                
+                offset: [-2, -3],
+                
+                type: 'mousemove'
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Menu Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Menu Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mduclick',
+                 
+                screenshot: true
+                
+            },{ 
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Menu Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mouseout',
+                 
+                screenshot: true
+            },{
+                
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Split Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mouseover'
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Split Button]',
+                
+                offset: [-2, -3],
+                
+                type: 'mousemove'
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Split Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Split Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Split Button]',
+                
+                offset: [-2, -2],
+                
+                type: 'mouseout',
+                 
+                screenshot: true
+            },{                
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Toggle Button]',
+                
+                type: 'mduclick',
+                 
+                screenshot: true
+            },{
+                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Toggle Button]',
+                
+                type: 'mduclick',
+                 
+                screenshot: true                
+
+//            },{                
+//                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Menu Button]',
+//                
+//                domQuery: '.x-btn-split',
+//                
+//                type: 'mduclick',
+//                 
+//                screenshot: true
+//            },{
+//                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Menu Button]',
+//                
+//                domQuery: '.x-btn-split',
+//                
+//                type: 'mduclick',
+//                 
+//                screenshot: true
+//            },{  
+//                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Split Button]',
+//                
+//                domQuery: '.x-btn-split',
+//                
+//                type: 'mduclick',
+//                 
+//                screenshot: true
+//            },{
+//                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Split Button]',
+//                
+//                domQuery: '.x-btn-split',
+//                
+//                type: 'mduclick',
+//                 
+//                screenshot: true
+//            },{ 
+//                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Toggle Button]',
+//                
+//                type: 'mduclick',
+//                 
+//                screenshot: true
+//            },{
+//                cmpQuery: 'panel[title=Basic Panel With Toolbars] > toolbar[dock=bottom] > button[text=Toggle Button]',
+//                
+//                type: 'mduclick',
+//                 
+//                screenshot: true
+//            },{ 
+//                cmpQuery: 'combo',
+//                
+//                domQuery: '.x-form-trigger',
+//                
+//                type: 'mduclick',
+//                
+//                screenshot: true
+//            }, {
+//                cmpQuery: 'boundlist',
+//                
+//                domQuery: '.x-boundlist-item',
+//                
+//                type: 'mduclick',
+//                
+//                screenshot: true
+             
+//            }, {
+//                cmpQuery: 'grid[title=Array Grid] > headercontainer > gridcolumn[text=Company]',
+//                
+//                domQuery: '.x-column-header-text',
+//                
+//                type: 'drag',
+//                
+//                dropTo: {
+//                     cmpQuery: 'grid[title=Array Grid] > headercontainer > gridcolumn[text=Price]',
+//                
+//                     domQuery: '.x-column-header-text'
+//                },
+//                
+//                screenshot: true
+                
+            }]
+     });
+     if (!window.__x.poll) {
+        __x.player.start();
+     }
+     
+});