The source code

    /*!
     * Ext JS Library 3.3.1
     * Copyright(c) 2006-2010 Sencha Inc.
     * licensing@sencha.com
     * http://www.sencha.com/license
     */
    Ext.ns('Ext.ux.grid');

    /**
     * @class Ext.ux.grid.BufferView
     * @extends Ext.grid.GridView
     * A custom GridView which renders rows on an as-needed basis.
     */
    Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
    	/**
    	 * @cfg {Number} rowHeight
    	 * The height of a row in the grid.
    	 */
    	rowHeight: 19,

    	/**
    	 * @cfg {Number} borderHeight
    	 * The combined height of border-top and border-bottom of a row.
    	 */
    	borderHeight: 2,

    	/**
    	 * @cfg {Boolean/Number} scrollDelay
    	 * The number of milliseconds before rendering rows out of the visible
    	 * viewing area. Defaults to 100. Rows will render immediately with a config
    	 * of false.
    	 */
    	scrollDelay: 100,

    	/**
    	 * @cfg {Number} cacheSize
    	 * The number of rows to look forward and backwards from the currently viewable
    	 * area.  The cache applies only to rows that have been rendered already.
    	 */
    	cacheSize: 20,

    	/**
    	 * @cfg {Number} cleanDelay
    	 * The number of milliseconds to buffer cleaning of extra rows not in the
    	 * cache.
    	 */
    	cleanDelay: 500,

    	initTemplates : function(){
    		Ext.ux.grid.BufferView.superclass.initTemplates.call(this);
    		var ts = this.templates;
    		// empty div to act as a place holder for a row
    	        ts.rowHolder = new Ext.Template(
    		        ''
    		);
    		ts.rowHolder.disableFormats = true;
    		ts.rowHolder.compile();

    		ts.rowBody = new Ext.Template(
    		        '',
    			'{cells}',
    			(this.enableRowBody ? '{body}' : ''),
    			''
    		);
    		ts.rowBody.disableFormats = true;
    		ts.rowBody.compile();
    	},

    	getStyleRowHeight : function(){
    		return Ext.isBorderBox ? (this.rowHeight + this.borderHeight) : this.rowHeight;
    	},

    	getCalculatedRowHeight : function(){
    		return this.rowHeight + this.borderHeight;
    	},

    	getVisibleRowCount : function(){
    		var rh = this.getCalculatedRowHeight(),
    		    visibleHeight = this.scroller.dom.clientHeight;
    		return (visibleHeight < 1) ? 0 : Math.ceil(visibleHeight / rh);
    	},

    	getVisibleRows: function(){
    		var count = this.getVisibleRowCount(),
    		    sc = this.scroller.dom.scrollTop,
    		    start = (sc === 0 ? 0 : Math.floor(sc/this.getCalculatedRowHeight())-1);
    		return {
    			first: Math.max(start, 0),
    			last: Math.min(start + count + 2, this.ds.getCount()-1)
    		};
    	},

    	doRender : function(cs, rs, ds, startRow, colCount, stripe, onlyBody){
    		var ts = this.templates,
                ct = ts.cell,
                rt = ts.row,
                rb = ts.rowBody,
                last = colCount-1,
    		    rh = this.getStyleRowHeight(),
    		    vr = this.getVisibleRows(),
    		    tstyle = 'width:'+this.getTotalWidth()+';height:'+rh+'px;',
    		    // buffers
    		    buf = [],
                cb,
                c,
                p = {},
                rp = {tstyle: tstyle},
                r;
    		for (var j = 0, len = rs.length; j < len; j++) {
    			r = rs[j]; cb = [];
    			var rowIndex = (j+startRow),
    			    visible = rowIndex >= vr.first && rowIndex <= vr.last;
    			if (visible) {
    				for (var i = 0; i < colCount; i++) {
    					c = cs[i];
    					p.id = c.id;
    					p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
    					p.attr = p.cellAttr = "";
    					p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
    					p.style = c.style;
    					if (p.value === undefined || p.value === "") {
    						p.value = " ";
    					}
    					if (r.dirty && typeof r.modified[c.name] !== 'undefined') {
    						p.css += ' x-grid3-dirty-cell';
    					}
    					cb[cb.length] = ct.apply(p);
    				}
    			}
    			var alt = [];
    			if(stripe && ((rowIndex+1) % 2 === 0)){
    			    alt[0] = "x-grid3-row-alt";
    			}
    			if(r.dirty){
    			    alt[1] = " x-grid3-dirty-row";
    			}
    			rp.cols = colCount;
    			if(this.getRowClass){
    			    alt[2] = this.getRowClass(r, rowIndex, rp, ds);
    			}
    			rp.alt = alt.join(" ");
    			rp.cells = cb.join("");
    			buf[buf.length] =  !visible ? ts.rowHolder.apply(rp) : (onlyBody ? rb.apply(rp) : rt.apply(rp));
    		}
    		return buf.join("");
    	},

    	isRowRendered: function(index){
    		var row = this.getRow(index);
    		return row && row.childNodes.length > 0;
    	},

    	syncScroll: function(){
    		Ext.ux.grid.BufferView.superclass.syncScroll.apply(this, arguments);
    		this.update();
    	},

    	// a (optionally) buffered method to update contents of gridview
    	update: function(){
    		if (this.scrollDelay) {
    			if (!this.renderTask) {
    				this.renderTask = new Ext.util.DelayedTask(this.doUpdate, this);
    			}
    			this.renderTask.delay(this.scrollDelay);
    		}else{
    			this.doUpdate();
    		}
    	},

        onRemove : function(ds, record, index, isUpdate){
            Ext.ux.grid.BufferView.superclass.onRemove.apply(this, arguments);
            if(isUpdate !== true){
                this.update();
            }
        },

    	doUpdate: function(){
    		if (this.getVisibleRowCount() > 0) {
    			var g = this.grid,
                    cm = g.colModel,
                    ds = g.store,
        	        cs = this.getColumnData(),
    		        vr = this.getVisibleRows(),
                    row;
    			for (var i = vr.first; i <= vr.last; i++) {
    				// if row is NOT rendered and is visible, render it
    				if(!this.isRowRendered(i) && (row = this.getRow(i))){
    					var html = this.doRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true);
    					row.innerHTML = html;
    				}
    			}
    			this.clean();
    		}
    	},

    	// a buffered method to clean rows
    	clean : function(){
    		if(!this.cleanTask){
    			this.cleanTask = new Ext.util.DelayedTask(this.doClean, this);
    		}
    		this.cleanTask.delay(this.cleanDelay);
    	},

    	doClean: function(){
    		if (this.getVisibleRowCount() > 0) {
    			var vr = this.getVisibleRows();
    			vr.first -= this.cacheSize;
    			vr.last += this.cacheSize;

    			var i = 0, rows = this.getRows();
    			// if first is less than 0, all rows have been rendered
    			// so lets clean the end...
    			if(vr.first <= 0){
    				i = vr.last + 1;
    			}
    			for(var len = this.ds.getCount(); i < len; i++){
    				// if current row is outside of first and last and
    				// has content, update the innerHTML to nothing
    				if ((i < vr.first || i > vr.last) && rows[i].innerHTML) {
    					rows[i].innerHTML = '';
    				}
    			}
    		}
    	},

        removeTask: function(name){
            var task = this[name];
            if(task && task.cancel){
                task.cancel();
                this[name] = null;
            }
        },

        destroy : function(){
            this.removeTask('cleanTask');
            this.removeTask('renderTask');
            Ext.ux.grid.BufferView.superclass.destroy.call(this);
        },

    	layout: function(){
    		Ext.ux.grid.BufferView.superclass.layout.call(this);
    		this.update();
    	}
    });// We are adding these custom layouts to a namespace that does not
    // exist by default in Ext, so we have to add the namespace first:
    Ext.ns('Ext.ux.layout');

    /**
     * @class Ext.ux.layout.CenterLayout
     * @extends Ext.layout.FitLayout
     * This is a very simple layout style used to center contents within a container.  This layout works within
     * nested containers and can also be used as expected as a Viewport layout to center the page layout.
     * As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
     * the layout.  The layout does not require any config options, although the child panel contained within the
     * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by
     * default, but you can specify autoHeight:true to allow it to autosize based on its content height.
     * Example usage:
     *
    // The content panel is centered in the container
    var p = new Ext.Panel({
        title: 'Center Layout',
        layout: 'ux.center',
        items: [{
            title: 'Centered Content',
            width: '75%',
            html: 'Some content'
        }]
    });

    // If you leave the title blank and specify no border
    // you'll create a non-visual, structural panel just
    // for centering the contents in the main container.
    var p = new Ext.Panel({
        layout: 'ux.center',
        border: false,
        items: [{
            title: 'Centered Content',
            width: 300,
            autoHeight: true,
            html: 'Some content'
        }]
    });

     */
    Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
    	// private
        setItemSize : function(item, size){
            this.container.addClass('ux-layout-center');
            item.addClass('ux-layout-center-item');
            if(item && size.height > 0){
                if(item.width){
                    size.width = item.width;
                }
                item.setSize(size);
            }
        }
    });

    Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
    Ext.ns('Ext.ux.grid');

    /**
     * @class Ext.ux.grid.CheckColumn
     * @extends Ext.grid.Column
     * A Column subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.
     * Note. As of ExtJS 3.3 this no longer has to be configured as a plugin of the GridPanel.
     * Example usage:
     *
    var cm = new Ext.grid.ColumnModel([{
           header: 'Foo',
           ...
        },{
           xtype: 'checkcolumn',
           header: 'Indoor?',
           dataIndex: 'indoor',
           width: 55
        }
    ]);

    // create the grid
    var grid = new Ext.grid.EditorGridPanel({
        ...
        colModel: cm,
        ...
    });
     *
     * In addition to toggling a Boolean value within the record data, this
     * class toggles a css class between 'x-grid3-check-col' and
     * 'x-grid3-check-col-on' to alter the background image used for
     * a column.
     */
    Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {

        /**
         * @private
         * Process and refire events routed from the GridView's processEvent method.
         */
        processEvent : function(name, e, grid, rowIndex, colIndex){
            if (name == 'mousedown') {
                var record = grid.store.getAt(rowIndex);
                record.set(this.dataIndex, !record.data[this.dataIndex]);
                return false; // Cancel row selection.
            } else {
                return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
            }
        },

        renderer : function(v, p, record){
            p.css += ' x-grid3-check-col-td';
            return String.format(' ', v ? '-on' : '');
        },

        // Deprecate use as a plugin. Remove in 4.0
        init: Ext.emptyFn
    });

    // register ptype. Deprecate. Remove in 4.0
    Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

    // backwards compat. Remove in 4.0
    Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;

    // register Column xtype
    Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;Ext.ns('Ext.ux.grid');

    Ext.ux.grid.ColumnHeaderGroup = Ext.extend(Ext.util.Observable, {

        constructor: function(config){
            this.config = config;
        },

        init: function(grid){
            Ext.applyIf(grid.colModel, this.config);
            Ext.apply(grid.getView(), this.viewConfig);
        },

        viewConfig: {
            initTemplates: function(){
                this.constructor.prototype.initTemplates.apply(this, arguments);
                var ts = this.templates || {};
                if(!ts.gcell){
                    ts.gcell = new Ext.XTemplate('', '', this.grid.enableHdMenu ? '' : '', '{value}');
                }
                this.templates = ts;
                this.hrowRe = new RegExp("ux-grid-hd-group-row-(\\d+)", "");
            },

            renderHeaders: function(){
                var ts = this.templates, headers = [], cm = this.cm, rows = cm.rows, tstyle = 'width:' + this.getTotalWidth() + ';';

                for(var row = 0, rlen = rows.length; row < rlen; row++){
                    var r = rows[row], cells = [];
                    for(var i = 0, gcol = 0, len = r.length; i < len; i++){
                        var group = r[i];
                        group.colspan = group.colspan || 1;
                        var id = this.getColumnId(group.dataIndex ? cm.findColumnIndex(group.dataIndex) : gcol), gs = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle.call(this, group, gcol);
                        cells[i] = ts.gcell.apply({
                            cls: 'ux-grid-hd-group-cell',
                            id: id,
                            row: row,
                            style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (group.align ? 'text-align:' + group.align + ';' : ''),
                            tooltip: group.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + group.tooltip + '"' : '',
                            istyle: group.align == 'right' ? 'padding-right:16px' : '',
                            btn: this.grid.enableHdMenu && group.header,
                            value: group.header || ' '
                        });
                        gcol += group.colspan;
                    }
                    headers[row] = ts.header.apply({
                        tstyle: tstyle,
                        cells: cells.join('')
                    });
                }
                headers.push(this.constructor.prototype.renderHeaders.apply(this, arguments));
                return headers.join('');
            },

            onColumnWidthUpdated: function(){
                this.constructor.prototype.onColumnWidthUpdated.apply(this, arguments);
                Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
            },

            onAllColumnWidthsUpdated: function(){
                this.constructor.prototype.onAllColumnWidthsUpdated.apply(this, arguments);
                Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
            },

            onColumnHiddenUpdated: function(){
                this.constructor.prototype.onColumnHiddenUpdated.apply(this, arguments);
                Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
            },

            getHeaderCell: function(index){
                return this.mainHd.query(this.cellSelector)[index];
            },

            findHeaderCell: function(el){
                return el ? this.fly(el).findParent('td.x-grid3-hd', this.cellSelectorDepth) : false;
            },

            findHeaderIndex: function(el){
                var cell = this.findHeaderCell(el);
                return cell ? this.getCellIndex(cell) : false;
            },

            updateSortIcon: function(col, dir){
                var sc = this.sortClasses, hds = this.mainHd.select(this.cellSelector).removeClass(sc);
                hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
            },

            handleHdDown: function(e, t){
                var el = Ext.get(t);
                if(el.hasClass('x-grid3-hd-btn')){
                    e.stopEvent();
                    var hd = this.findHeaderCell(t);
                    Ext.fly(hd).addClass('x-grid3-hd-menu-open');
                    var index = this.getCellIndex(hd);
                    this.hdCtxIndex = index;
                    var ms = this.hmenu.items, cm = this.cm;
                    ms.get('asc').setDisabled(!cm.isSortable(index));
                    ms.get('desc').setDisabled(!cm.isSortable(index));
                    this.hmenu.on('hide', function(){
                        Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
                    }, this, {
                        single: true
                    });
                    this.hmenu.show(t, 'tl-bl?');
                }else if(el.hasClass('ux-grid-hd-group-cell') || Ext.fly(t).up('.ux-grid-hd-group-cell')){
                    e.stopEvent();
                }
            },

            handleHdMove: function(e, t){
                var hd = this.findHeaderCell(this.activeHdRef);
                if(hd && !this.headersDisabled && !Ext.fly(hd).hasClass('ux-grid-hd-group-cell')){
                    var hw = this.splitHandleWidth || 5, r = this.activeHdRegion, x = e.getPageX(), ss = hd.style, cur = '';
                    if(this.grid.enableColumnResize !== false){
                        if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex - 1)){
                            cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'e-resize' : 'col-resize'; // col-resize
                                                                                                    // not
                                                                                                    // always
                                                                                                    // supported
                        }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){
                            cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize';
                        }
                    }
                    ss.cursor = cur;
                }
            },

            handleHdOver: function(e, t){
                var hd = this.findHeaderCell(t);
                if(hd && !this.headersDisabled){
                    this.activeHdRef = t;
                    this.activeHdIndex = this.getCellIndex(hd);
                    var fly = this.fly(hd);
                    this.activeHdRegion = fly.getRegion();
                    if(!(this.cm.isMenuDisabled(this.activeHdIndex) || fly.hasClass('ux-grid-hd-group-cell'))){
                        fly.addClass('x-grid3-hd-over');
                        this.activeHdBtn = fly.child('.x-grid3-hd-btn');
                        if(this.activeHdBtn){
                            this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight - 1) + 'px';
                        }
                    }
                }
            },

            handleHdOut: function(e, t){
                var hd = this.findHeaderCell(t);
                if(hd && (!Ext.isIE || !e.within(hd, true))){
                    this.activeHdRef = null;
                    this.fly(hd).removeClass('x-grid3-hd-over');
                    hd.style.cursor = '';
                }
            },

            handleHdMenuClick: function(item){
                var index = this.hdCtxIndex, cm = this.cm, ds = this.ds, id = item.getItemId();
                switch(id){
                    case 'asc':
                        ds.sort(cm.getDataIndex(index), 'ASC');
                        break;
                    case 'desc':
                        ds.sort(cm.getDataIndex(index), 'DESC');
                        break;
                    default:
                        if(id.substr(0, 6) == 'group-'){
                            var i = id.split('-'), row = parseInt(i[1], 10), col = parseInt(i[2], 10), r = this.cm.rows[row], group, gcol = 0;
                            for(var i = 0, len = r.length; i < len; i++){
                                group = r[i];
                                if(col >= gcol && col < gcol + group.colspan){
                                    break;
                                }
                                gcol += group.colspan;
                            }
                            if(item.checked){
                                var max = cm.getColumnsBy(this.isHideableColumn, this).length;
                                for(var i = gcol, len = gcol + group.colspan; i < len; i++){
                                    if(!cm.isHidden(i)){
                                        max--;
                                    }
                                }
                                if(max < 1){
                                    this.onDenyColumnHide();
                                    return false;
                                }
                            }
                            for(var i = gcol, len = gcol + group.colspan; i < len; i++){
                                if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){
                                    cm.setHidden(i, item.checked);
                                }
                            }
                        }else if(id.substr(0, 4) == 'col-'){
                            index = cm.getIndexById(id.substr(4));
                            if(index != -1){
                                if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
                                    this.onDenyColumnHide();
                                    return false;
                                }
                                cm.setHidden(index, item.checked);
                            }
                        }
                        if(id.substr(0, 6) == 'group-' || id.substr(0, 4) == 'col-'){
                            item.checked = !item.checked;
                            if(item.menu){
                                var updateChildren = function(menu){
                                    menu.items.each(function(childItem){
                                        if(!childItem.disabled){
                                            childItem.setChecked(item.checked, false);
                                            if(childItem.menu){
                                                updateChildren(childItem.menu);
                                            }
                                        }
                                    });
                                }
                                updateChildren(item.menu);
                            }
                            var parentMenu = item, parentItem;
                            while(parentMenu = parentMenu.parentMenu){
                                if(!parentMenu.parentMenu || !(parentItem = parentMenu.parentMenu.items.get(parentMenu.getItemId())) || !parentItem.setChecked){
                                    break;
                                }
                                var checked = parentMenu.items.findIndexBy(function(m){
                                    return m.checked;
                                }) >= 0;
                                parentItem.setChecked(checked, true);
                            }
                            item.checked = !item.checked;
                        }
                }
                return true;
            },

            beforeColMenuShow: function(){
                var cm = this.cm, rows = this.cm.rows;
                this.colMenu.removeAll();
                for(var col = 0, clen = cm.getColumnCount(); col < clen; col++){
                    var menu = this.colMenu, title = cm.getColumnHeader(col), text = [];
                    if(cm.config[col].fixed !== true && cm.config[col].hideable !== false){
                        for(var row = 0, rlen = rows.length; row < rlen; row++){
                            var r = rows[row], group, gcol = 0;
                            for(var i = 0, len = r.length; i < len; i++){
                                group = r[i];
                                if(col >= gcol && col < gcol + group.colspan){
                                    break;
                                }
                                gcol += group.colspan;
                            }
                            if(group && group.header){
                                if(cm.hierarchicalColMenu){
                                    var gid = 'group-' + row + '-' + gcol,
                                        item = menu.items ? menu.getComponent(gid) : null,
                                        submenu = item ? item.menu : null;
                                    if(!submenu){
                                        submenu = new Ext.menu.Menu({
                                            itemId: gid
                                        });
                                        submenu.on("itemclick", this.handleHdMenuClick, this);
                                        var checked = false, disabled = true;
                                        for(var c = gcol, lc = gcol + group.colspan; c < lc; c++){
                                            if(!cm.isHidden(c)){
                                                checked = true;
                                            }
                                            if(cm.config[c].hideable !== false){
                                                disabled = false;
                                            }
                                        }
                                        menu.add({
                                            itemId: gid,
                                            text: group.header,
                                            menu: submenu,
                                            hideOnClick: false,
                                            checked: checked,
                                            disabled: disabled
                                        });
                                    }
                                    menu = submenu;
                                }else{
                                    text.push(group.header);
                                }
                            }
                        }
                        text.push(title);
                        menu.add(new Ext.menu.CheckItem({
                            itemId: "col-" + cm.getColumnId(col),
                            text: text.join(' '),
                            checked: !cm.isHidden(col),
                            hideOnClick: false,
                            disabled: cm.config[col].hideable === false
                        }));
                    }
                }
            },

            afterRenderUI: function(){
                this.constructor.prototype.afterRenderUI.apply(this, arguments);
                Ext.apply(this.columnDrop, Ext.ux.grid.ColumnHeaderGroup.prototype.columnDropConfig);
                Ext.apply(this.splitZone, Ext.ux.grid.ColumnHeaderGroup.prototype.splitZoneConfig);
            }
        },

        splitZoneConfig: {
            allowHeaderDrag: function(e){
                return !e.getTarget(null, null, true).hasClass('ux-grid-hd-group-cell');
            }
        },

        columnDropConfig: {
            getTargetFromEvent: function(e){
                var t = Ext.lib.Event.getTarget(e);
                return this.view.findHeaderCell(t);
            },

            positionIndicator: function(h, n, e){
                var data = Ext.ux.grid.ColumnHeaderGroup.prototype.getDragDropData.call(this, h, n, e);
                if(data === false){
                    return false;
                }
                var px = data.px + this.proxyOffsets[0];
                this.proxyTop.setLeftTop(px, data.r.top + this.proxyOffsets[1]);
                this.proxyTop.show();
                this.proxyBottom.setLeftTop(px, data.r.bottom);
                this.proxyBottom.show();
                return data.pt;
            },

            onNodeDrop: function(n, dd, e, data){
                var h = data.header;
                if(h != n){
                    var d = Ext.ux.grid.ColumnHeaderGroup.prototype.getDragDropData.call(this, h, n, e);
                    if(d === false){
                        return false;
                    }
                    var cm = this.grid.colModel, right = d.oldIndex < d.newIndex, rows = cm.rows;
                    for(var row = d.row, rlen = rows.length; row < rlen; row++){
                        var r = rows[row], len = r.length, fromIx = 0, span = 1, toIx = len;
                        for(var i = 0, gcol = 0; i < len; i++){
                            var group = r[i];
                            if(d.oldIndex >= gcol && d.oldIndex < gcol + group.colspan){
                                fromIx = i;
                            }
                            if(d.oldIndex + d.colspan - 1 >= gcol && d.oldIndex + d.colspan - 1 < gcol + group.colspan){
                                span = i - fromIx + 1;
                            }
                            if(d.newIndex >= gcol && d.newIndex < gcol + group.colspan){
                                toIx = i;
                            }
                            gcol += group.colspan;
                        }
                        var groups = r.splice(fromIx, span);
                        rows[row] = r.splice(0, toIx - (right ? span : 0)).concat(groups).concat(r);
                    }
                    for(var c = 0; c < d.colspan; c++){
                        var oldIx = d.oldIndex + (right ? 0 : c), newIx = d.newIndex + (right ? -1 : c);
                        cm.moveColumn(oldIx, newIx);
                        this.grid.fireEvent("columnmove", oldIx, newIx);
                    }
                    return true;
                }
                return false;
            }
        },

        getGroupStyle: function(group, gcol){
            var width = 0, hidden = true;
            for(var i = gcol, len = gcol + group.colspan; i < len; i++){
                if(!this.cm.isHidden(i)){
                    var cw = this.cm.getColumnWidth(i);
                    if(typeof cw == 'number'){
                        width += cw;
                    }
                    hidden = false;
                }
            }
            return {
                width: (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2) ? width : Math.max(width - this.borderWidth, 0)) + 'px',
                hidden: hidden
            };
        },

        updateGroupStyles: function(col){
            var tables = this.mainHd.query('.x-grid3-header-offset > table'), tw = this.getTotalWidth(), rows = this.cm.rows;
            for(var row = 0; row < tables.length; row++){
                tables[row].style.width = tw;
                if(row < rows.length){
                    var cells = tables[row].firstChild.firstChild.childNodes;
                    for(var i = 0, gcol = 0; i < cells.length; i++){
                        var group = rows[row][i];
                        if((typeof col != 'number') || (col >= gcol && col < gcol + group.colspan)){
                            var gs = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle.call(this, group, gcol);
                            cells[i].style.width = gs.width;
                            cells[i].style.display = gs.hidden ? 'none' : '';
                        }
                        gcol += group.colspan;
                    }
                }
            }
        },

        getGroupRowIndex: function(el){
            if(el){
                var m = el.className.match(this.hrowRe);
                if(m && m[1]){
                    return parseInt(m[1], 10);
                }
            }
            return this.cm.rows.length;
        },

        getGroupSpan: function(row, col){
            if(row < 0){
                return {
                    col: 0,
                    colspan: this.cm.getColumnCount()
                };
            }
            var r = this.cm.rows[row];
            if(r){
                for(var i = 0, gcol = 0, len = r.length; i < len; i++){
                    var group = r[i];
                    if(col >= gcol && col < gcol + group.colspan){
                        return {
                            col: gcol,
                            colspan: group.colspan
                        };
                    }
                    gcol += group.colspan;
                }
                return {
                    col: gcol,
                    colspan: 0
                };
            }
            return {
                col: col,
                colspan: 1
            };
        },

        getDragDropData: function(h, n, e){
            if(h.parentNode != n.parentNode){
                return false;
            }
            var cm = this.grid.colModel, x = Ext.lib.Event.getPageX(e), r = Ext.lib.Dom.getRegion(n.firstChild), px, pt;
            if((r.right - x) <= (r.right - r.left) / 2){
                px = r.right + this.view.borderWidth;
                pt = "after";
            }else{
                px = r.left;
                pt = "before";
            }
            var oldIndex = this.view.getCellIndex(h), newIndex = this.view.getCellIndex(n);
            if(cm.isFixed(newIndex)){
                return false;
            }
            var row = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupRowIndex.call(this.view, h),
                oldGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row, oldIndex),
                newGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row, newIndex),
                oldIndex = oldGroup.col;
                newIndex = newGroup.col + (pt == "after" ? newGroup.colspan : 0);
            if(newIndex >= oldGroup.col && newIndex <= oldGroup.col + oldGroup.colspan){
                return false;
            }
            var parentGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row - 1, oldIndex);
            if(newIndex < parentGroup.col || newIndex > parentGroup.col + parentGroup.colspan){
                return false;
            }
            return {
                r: r,
                px: px,
                pt: pt,
                row: row,
                oldIndex: oldIndex,
                newIndex: newIndex,
                colspan: oldGroup.colspan
            };
        }
    });Ext.ns('Ext.ux.tree');

    /**
     * @class Ext.ux.tree.ColumnTree
     * @extends Ext.tree.TreePanel
     *
     * @xtype columntree
     */
    Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
        lines : false,
        borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
        cls : 'x-column-tree',

        onRender : function(){
            Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
            this.headers = this.header.createChild({cls:'x-tree-headers'});

            var cols = this.columns, c;
            var totalWidth = 0;
            var scrollOffset = 19; // similar to Ext.grid.GridView default

            for(var i = 0, len = cols.length; i < len; i++){
                 c = cols[i];
                 totalWidth += c.width;
                 this.headers.createChild({
                     cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
                     cn: {
                         cls:'x-tree-hd-text',
                         html: c.header
                     },
                     style:'width:'+(c.width-this.borderWidth)+'px;'
                 });
            }
            this.headers.createChild({cls:'x-clear'});
            // prevent floats from wrapping when clipped
            this.headers.setWidth(totalWidth+scrollOffset);
            this.innerCt.setWidth(totalWidth);
        }
    });

    Ext.reg('columntree', Ext.ux.tree.ColumnTree);

    //backwards compat
    Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;

    /**
     * @class Ext.ux.tree.ColumnNodeUI
     * @extends Ext.tree.TreeNodeUI
     */
    Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
        focus: Ext.emptyFn, // prevent odd scrolling behavior

        renderElements : function(n, a, targetNode, bulkRender){
            this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

            var t = n.getOwnerTree();
            var cols = t.columns;
            var bw = t.borderWidth;
            var c = cols[0];

            var buf = [
                 '',
                    '',
                        '',this.indentMarkup,"",
                        '',
                        '',
                        '',
                        '', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"",
                    ""];
             for(var i = 1, len = cols.length; i < len; i++){
                 c = cols[i];

                 buf.push('',
                            '',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"",
                          "");
             }
             buf.push(
                '',
                '',
                "");

            if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
                this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
                                    n.nextSibling.ui.getEl(), buf.join(""));
            }else{
                this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
            }

            this.elNode = this.wrap.childNodes[0];
            this.ctNode = this.wrap.childNodes[1];
            var cs = this.elNode.firstChild.childNodes;
            this.indentNode = cs[0];
            this.ecNode = cs[1];
            this.iconNode = cs[2];
            this.anchor = cs[3];
            this.textNode = cs[3].firstChild;
        }
    });

    //backwards compat
    Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;
    /**
     * @class Ext.DataView.LabelEditor
     * @extends Ext.Editor
     *
     */
    Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
        alignment: "tl-tl",
        hideEl : false,
        cls: "x-small-editor",
        shim: false,
        completeOnEnter: true,
        cancelOnEsc: true,
        labelSelector: 'span.x-editable',

        constructor: function(cfg, field){
            Ext.DataView.LabelEditor.superclass.constructor.call(this,
                field || new Ext.form.TextField({
                    allowBlank: false,
                    growMin:90,
                    growMax:240,
                    grow:true,
                    selectOnFocus:true
                }), cfg
            );
        },

        init : function(view){
            this.view = view;
            view.on('render', this.initEditor, this);
            this.on('complete', this.onSave, this);
        },

        initEditor : function(){
            this.view.on({
                scope: this,
                containerclick: this.doBlur,
                click: this.doBlur
            });
            this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
        },

        doBlur: function(){
            if(this.editing){
                this.field.blur();
            }
        },

        onMouseDown : function(e, target){
            if(!e.ctrlKey && !e.shiftKey){
                var item = this.view.findItemFromChild(target);
                e.stopEvent();
                var record = this.view.store.getAt(this.view.indexOf(item));
                this.startEdit(target, record.data[this.dataIndex]);
                this.activeRecord = record;
            }else{
                e.preventDefault();
            }
        },

        onSave : function(ed, value){
            this.activeRecord.set(this.dataIndex, value);
        }
    });

    Ext.DataView.DragSelector = function(cfg){
        cfg = cfg || {};
        var view, proxy, tracker;
        var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
        var dragSafe = cfg.dragSafe === true;

        this.init = function(dataView){
            view = dataView;
            view.on('render', onRender);
        };

        function fillRegions(){
            rs = [];
            view.all.each(function(el){
                rs[rs.length] = el.getRegion();
            });
            bodyRegion = view.el.getRegion();
        }

        function cancelClick(){
            return false;
        }

        function onBeforeStart(e){
            return !dragSafe || e.target == view.el.dom;
        }

        function onStart(e){
            view.on('containerclick', cancelClick, view, {single:true});
            if(!proxy){
                proxy = view.el.createChild({cls:'x-view-selector'});
            }else{
                if(proxy.dom.parentNode !== view.el.dom){
                    view.el.dom.appendChild(proxy.dom);
                }
                proxy.setDisplayed('block');
            }
            fillRegions();
            view.clearSelections();
        }

        function onDrag(e){
            var startXY = tracker.startXY;
            var xy = tracker.getXY();

            var x = Math.min(startXY[0], xy[0]);
            var y = Math.min(startXY[1], xy[1]);
            var w = Math.abs(startXY[0] - xy[0]);
            var h = Math.abs(startXY[1] - xy[1]);

            dragRegion.left = x;
            dragRegion.top = y;
            dragRegion.right = x+w;
            dragRegion.bottom = y+h;

            dragRegion.constrainTo(bodyRegion);
            proxy.setRegion(dragRegion);

            for(var i = 0, len = rs.length; i < len; i++){
                var r = rs[i], sel = dragRegion.intersect(r);
                if(sel && !r.selected){
                    r.selected = true;
                    view.select(i, true);
                }else if(!sel && r.selected){
                    r.selected = false;
                    view.deselect(i);
                }
            }
        }

        function onEnd(e){
            if (!Ext.isIE) {
                view.un('containerclick', cancelClick, view);
            }
            if(proxy){
                proxy.setDisplayed(false);
            }
        }

        function onRender(view){
            tracker = new Ext.dd.DragTracker({
                onBeforeStart: onBeforeStart,
                onStart: onStart,
                onDrag: onDrag,
                onEnd: onEnd
            });
            tracker.initEl(view.el);
        }
    };Ext.ns('Ext.ux.form');

    /**
     * @class Ext.ux.form.FileUploadField
     * @extends Ext.form.TextField
     * Creates a file upload field.
     * @xtype fileuploadfield
     */
    Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField,  {
        /**
         * @cfg {String} buttonText The button text to display on the upload button (defaults to
         * 'Browse...').  Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
         * value will be used instead if available.
         */
        buttonText: 'Browse...',
        /**
         * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
         * text field (defaults to false).  If true, all inherited TextField members will still be available.
         */
        buttonOnly: false,
        /**
         * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
         * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false.
         */
        buttonOffset: 3,
        /**
         * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
         */

        // private
        readOnly: true,

        /**
         * @hide
         * @method autoSize
         */
        autoSize: Ext.emptyFn,

        // private
        initComponent: function(){
            Ext.ux.form.FileUploadField.superclass.initComponent.call(this);

            this.addEvents(
                /**
                 * @event fileselected
                 * Fires when the underlying file input field's value has changed from the user
                 * selecting a new file from the system file selection dialog.
                 * @param {Ext.ux.form.FileUploadField} this
                 * @param {String} value The file value returned by the underlying file input field
                 */
                'fileselected'
            );
        },

        // private
        onRender : function(ct, position){
            Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);

            this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
            this.el.addClass('x-form-file-text');
            this.el.dom.removeAttribute('name');
            this.createFileInput();

            var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
                text: this.buttonText
            });
            this.button = new Ext.Button(Ext.apply(btnCfg, {
                renderTo: this.wrap,
                cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
            }));

            if(this.buttonOnly){
                this.el.hide();
                this.wrap.setWidth(this.button.getEl().getWidth());
            }

            this.bindListeners();
            this.resizeEl = this.positionEl = this.wrap;
        },

        bindListeners: function(){
            this.fileInput.on({
                scope: this,
                mouseenter: function() {
                    this.button.addClass(['x-btn-over','x-btn-focus'])
                },
                mouseleave: function(){
                    this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
                },
                mousedown: function(){
                    this.button.addClass('x-btn-click')
                },
                mouseup: function(){
                    this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
                },
                change: function(){
                    var v = this.fileInput.dom.value;
                    this.setValue(v);
                    this.fireEvent('fileselected', this, v);
                }
            });
        },

        createFileInput : function() {
            this.fileInput = this.wrap.createChild({
                id: this.getFileInputId(),
                name: this.name||this.getId(),
                cls: 'x-form-file',
                tag: 'input',
                type: 'file',
                size: 1
            });
        },

        reset : function(){
            this.fileInput.remove();
            this.createFileInput();
            this.bindListeners();
            Ext.ux.form.FileUploadField.superclass.reset.call(this);
        },

        // private
        getFileInputId: function(){
            return this.id + '-file';
        },

        // private
        onResize : function(w, h){
            Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);

            this.wrap.setWidth(w);

            if(!this.buttonOnly){
                var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
                this.el.setWidth(w);
            }
        },

        // private
        onDestroy: function(){
            Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
            Ext.destroy(this.fileInput, this.button, this.wrap);
        },

        onDisable: function(){
            Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
            this.doDisable(true);
        },

        onEnable: function(){
            Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
            this.doDisable(false);

        },

        // private
        doDisable: function(disabled){
            this.fileInput.dom.disabled = disabled;
            this.button.setDisabled(disabled);
        },

        // private
        preFocus : Ext.emptyFn,

        // private
        alignErrorIcon : function(){
            this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
        }

    });

    Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);

    // backwards compat
    Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
    /**
     * @class Ext.ux.GMapPanel
     * @extends Ext.Panel
     * @author Shea Frederick
     */
    Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
        initComponent : function(){

            var defConfig = {
                plain: true,
                zoomLevel: 3,
                yaw: 180,
                pitch: 0,
                zoom: 0,
                gmapType: 'map',
                border: false
            };

            Ext.applyIf(this,defConfig);

            Ext.ux.GMapPanel.superclass.initComponent.call(this);

        },
        afterRender : function(){

            var wh = this.ownerCt.getSize();
            Ext.applyIf(this, wh);

            Ext.ux.GMapPanel.superclass.afterRender.call(this);

            if (this.gmapType === 'map'){
                this.gmap = new GMap2(this.body.dom);
            }

            if (this.gmapType === 'panorama'){
                this.gmap = new GStreetviewPanorama(this.body.dom);
            }

            if (typeof this.addControl == 'object' && this.gmapType === 'map') {
                this.gmap.addControl(this.addControl);
            }

            if (typeof this.setCenter === 'object') {
                if (typeof this.setCenter.geoCodeAddr === 'string'){
                    this.geoCodeLookup(this.setCenter.geoCodeAddr);
                }else{
                    if (this.gmapType === 'map'){
                        var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
                        this.gmap.setCenter(point, this.zoomLevel);
                    }
                    if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
                        this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
                    }
                }
                if (this.gmapType === 'panorama'){
                    this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
                }
            }

            GEvent.bind(this.gmap, 'load', this, function(){
                this.onMapReady();
            });

        },
        onMapReady : function(){
            this.addMarkers(this.markers);
            this.addMapControls();
            this.addOptions();
        },
        onResize : function(w, h){

            if (typeof this.getMap() == 'object') {
                this.gmap.checkResize();
            }

            Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);

        },
        setSize : function(width, height, animate){

            if (typeof this.getMap() == 'object') {
                this.gmap.checkResize();
            }

            Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);

        },
        getMap : function(){

            return this.gmap;

        },
        getCenter : function(){

            return this.getMap().getCenter();

        },
        getCenterLatLng : function(){

            var ll = this.getCenter();
            return {lat: ll.lat(), lng: ll.lng()};

        },
        addMarkers : function(markers) {

            if (Ext.isArray(markers)){
                for (var i = 0; i < markers.length; i++) {
                    var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
                    this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
                }
            }

        },
        addMarker : function(point, marker, clear, center, listeners){

            Ext.applyIf(marker,G_DEFAULT_ICON);

            if (clear === true){
                this.getMap().clearOverlays();
            }
            if (center === true) {
                this.getMap().setCenter(point, this.zoomLevel);
            }

            var mark = new GMarker(point,marker);
            if (typeof listeners === 'object'){
                for (evt in listeners) {
                    GEvent.bind(mark, evt, this, listeners[evt]);
                }
            }
            this.getMap().addOverlay(mark);

        },
        addMapControls : function(){

            if (this.gmapType === 'map') {
                if (Ext.isArray(this.mapControls)) {
                    for(i=0;i
    Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
                    }else{
                        point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
                        if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
                            this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
                        }
                    }
                }
            }

        }

    });

    Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.namespace('Ext.ux.grid');

    /**
     * @class Ext.ux.grid.GridFilters
     * @extends Ext.util.Observable
     * GridFilter is a plugin (ptype='gridfilters') for grids that
     * allow for a slightly more robust representation of filtering than what is
     * provided by the default store.
     * Filtering is adjusted by the user using the grid's column header menu
     * (this menu can be disabled through configuration). Through this menu users
     * can configure, enable, and disable filters for each column.
     * Features:
     *
     * Filtering implementations :
     *
     * Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can
     * be backed by a Ext.data.Store), and Boolean. Additional custom filter types
     * and menus are easily created by extending Ext.ux.grid.filter.Filter.
     *
     * Graphical indicators :
     *
     * Columns that are filtered have {@link #filterCls a configurable css class}
     * applied to the column headers.
     *
     * Paging :
     *
     * If specified as a plugin to the grid's configured PagingToolbar, the current page
     * will be reset to page 1 whenever you update the filters.
     *
     * Automatic Reconfiguration :
     *
     * Filters automatically reconfigure when the grid 'reconfigure' event fires.
     *
     * Stateful :
     * Filter information will be persisted across page loads by specifying a
     * stateId in the Grid configuration.
     *
     * The filter collection binds to the
     * {@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}
     * and {@link Ext.grid.GridPanel#beforestatesave beforestatesave}
     * events in order to be stateful.
     *
     * Grid Changes :
     *
     * A filters property is added to the grid pointing to
     * this plugin.
     * A filterupdate event is added to the grid and is
     * fired upon onStateChange completion.
     *
     * Server side code examples :
     *
     * PHP - (Thanks VinylFox)
     * Ruby on Rails - (Thanks Zyclops)
     * Ruby on Rails - (Thanks Rotomaul)
     * Python - (Thanks Matt)
     * Grails - (Thanks Mike)
     *
     *
     * Example usage:
     *
    var store = new Ext.data.GroupingStore({
        ...
    });

    var filters = new Ext.ux.grid.GridFilters({
        autoReload: false, //don't reload automatically
        local: true, //only filter locally
        // filters may be configured through the plugin,
        // or in the column definition within the column model configuration
        filters: [{
            type: 'numeric',
            dataIndex: 'id'
        }, {
            type: 'string',
            dataIndex: 'name'
        }, {
            type: 'numeric',
            dataIndex: 'price'
        }, {
            type: 'date',
            dataIndex: 'dateAdded'
        }, {
            type: 'list',
            dataIndex: 'size',
            options: ['extra small', 'small', 'medium', 'large', 'extra large'],
            phpMode: true
        }, {
            type: 'boolean',
            dataIndex: 'visible'
        }]
    });
    var cm = new Ext.grid.ColumnModel([{
        ...
    }]);

    var grid = new Ext.grid.GridPanel({
         ds: store,
         cm: cm,
         view: new Ext.grid.GroupingView(),
         plugins: [filters],
         height: 400,
         width: 700,
         bbar: new Ext.PagingToolbar({
             store: store,
             pageSize: 15,
             plugins: [filters] //reset page to page 1 if filters change
         })
     });

    store.load({params: {start: 0, limit: 15}});

    // a filters property is added to the grid
    grid.filters
     *
     */
    Ext.ux.grid.GridFilters = Ext.extend(Ext.util.Observable, {
        /**
         * @cfg {Boolean} autoReload
         * Defaults to true, reloading the datasource when a filter change happens.
         * Set this to false to prevent the datastore from being reloaded if there
         * are changes to the filters.  See {@link updateBuffer}.
         */
        autoReload : true,
        /**
         * @cfg {Boolean} encode
         * Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to
         * encode the filter query parameter sent with a remote request.
         * Defaults to false.
         */
        /**
         * @cfg {Array} filters
         * An Array of filters config objects. Refer to each filter type class for
         * configuration details specific to each filter type. Filters for Strings,
         * Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters
         * available.
         */
        /**
         * @cfg {String} filterCls
         * The css class to be applied to column headers with active filters.
         * Defaults to 'ux-filterd-column'.
         */
        filterCls : 'ux-filtered-column',
        /**
         * @cfg {Boolean} local
         * true to use Ext.data.Store filter functions (local filtering)
         * instead of the default (false) server side filtering.
         */
        local : false,
        /**
         * @cfg {String} menuFilterText
         * defaults to 'Filters'.
         */
        menuFilterText : 'Filters',
        /**
         * @cfg {String} paramPrefix
         * The url parameter prefix for the filters.
         * Defaults to 'filter'.
         */
        paramPrefix : 'filter',
        /**
         * @cfg {Boolean} showMenu
         * Defaults to true, including a filter submenu in the default header menu.
         */
        showMenu : true,
        /**
         * @cfg {String} stateId
         * Name of the value to be used to store state information.
         */
        stateId : undefined,
        /**
         * @cfg {Integer} updateBuffer
         * Number of milliseconds to defer store updates since the last filter change.
         */
        updateBuffer : 500,

        /** @private */
        constructor : function (config) {
            config = config || {};
            this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);
            this.filters = new Ext.util.MixedCollection();
            this.filters.getKey = function (o) {
                return o ? o.dataIndex : null;
            };
            this.addFilters(config.filters);
            delete config.filters;
            Ext.apply(this, config);
        },

        /** @private */
        init : function (grid) {
            if (grid instanceof Ext.grid.GridPanel) {
                this.grid = grid;

                this.bindStore(this.grid.getStore(), true);
                // assumes no filters were passed in the constructor, so try and use ones from the colModel
                if(this.filters.getCount() == 0){
                    this.addFilters(this.grid.getColumnModel());
                }

                this.grid.filters = this;

                this.grid.addEvents({'filterupdate': true});

                grid.on({
                    scope: this,
                    beforestaterestore: this.applyState,
                    beforestatesave: this.saveState,
                    beforedestroy: this.destroy,
                    reconfigure: this.onReconfigure
                });

                if (grid.rendered){
                    this.onRender();
                } else {
                    grid.on({
                        scope: this,
                        single: true,
                        render: this.onRender
                    });
                }

            } else if (grid instanceof Ext.PagingToolbar) {
                this.toolbar = grid;
            }
        },

        /**
         * @private
         * Handler for the grid's beforestaterestore event (fires before the state of the
         * grid is restored).
         * @param {Object} grid The grid object
         * @param {Object} state The hash of state values returned from the StateProvider.
         */
        applyState : function (grid, state) {
            var key, filter;
            this.applyingState = true;
            this.clearFilters();
            if (state.filters) {
                for (key in state.filters) {
                    filter = this.filters.get(key);
                    if (filter) {
                        filter.setValue(state.filters[key]);
                        filter.setActive(true);
                    }
                }
            }
            this.deferredUpdate.cancel();
            if (this.local) {
                this.reload();
            }
            delete this.applyingState;
            delete state.filters;
        },

        /**
         * Saves the state of all active filters
         * @param {Object} grid
         * @param {Object} state
         * @return {Boolean}
         */
        saveState : function (grid, state) {
            var filters = {};
            this.filters.each(function (filter) {
                if (filter.active) {
                    filters[filter.dataIndex] = filter.getValue();
                }
            });
            return (state.filters = filters);
        },

        /**
         * @private
         * Handler called when the grid is rendered
         */
        onRender : function () {
            this.grid.getView().on('refresh', this.onRefresh, this);
            this.createMenu();
        },

        /**
         * @private
         * Handler called by the grid 'beforedestroy' event
         */
        destroy : function () {
            this.removeAll();
            this.purgeListeners();

            if(this.filterMenu){
                Ext.menu.MenuMgr.unregister(this.filterMenu);
                this.filterMenu.destroy();
                 this.filterMenu = this.menu.menu = null;
            }
        },

        /**
         * Remove all filters, permanently destroying them.
         */
        removeAll : function () {
            if(this.filters){
                Ext.destroy.apply(Ext, this.filters.items);
                // remove all items from the collection
                this.filters.clear();
            }
        },

        /**
         * Changes the data store bound to this view and refreshes it.
         * @param {Store} store The store to bind to this view
         */
        bindStore : function(store, initial){
            if(!initial && this.store){
                if (this.local) {
                    store.un('load', this.onLoad, this);
                } else {
                    store.un('beforeload', this.onBeforeLoad, this);
                }
            }
            if(store){
                if (this.local) {
                    store.on('load', this.onLoad, this);
                } else {
                    store.on('beforeload', this.onBeforeLoad, this);
                }
            }
            this.store = store;
        },

        /**
         * @private
         * Handler called when the grid reconfigure event fires
         */
        onReconfigure : function () {
            this.bindStore(this.grid.getStore());
            this.store.clearFilter();
            this.removeAll();
            this.addFilters(this.grid.getColumnModel());
            this.updateColumnHeadings();
        },

        createMenu : function () {
            var view = this.grid.getView(),
                hmenu = view.hmenu;

            if (this.showMenu && hmenu) {

                this.sep  = hmenu.addSeparator();
                this.filterMenu = new Ext.menu.Menu({
                    id: this.grid.id + '-filters-menu'
                });
                this.menu = hmenu.add({
                    checked: false,
                    itemId: 'filters',
                    text: this.menuFilterText,
                    menu: this.filterMenu
                });

                this.menu.on({
                    scope: this,
                    checkchange: this.onCheckChange,
                    beforecheckchange: this.onBeforeCheck
                });
                hmenu.on('beforeshow', this.onMenu, this);
            }
            this.updateColumnHeadings();
        },

        /**
         * @private
         * Get the filter menu from the filters MixedCollection based on the clicked header
         */
        getMenuFilter : function () {
            var view = this.grid.getView();
            if (!view || view.hdCtxIndex === undefined) {
                return null;
            }
            return this.filters.get(
                view.cm.config[view.hdCtxIndex].dataIndex
            );
        },

        /**
         * @private
         * Handler called by the grid's hmenu beforeshow event
         */
        onMenu : function (filterMenu) {
            var filter = this.getMenuFilter();

            if (filter) {
    /*
    TODO: lazy rendering
                if (!filter.menu) {
                    filter.menu = filter.createMenu();
                }
    */
                this.menu.menu = filter.menu;
                this.menu.setChecked(filter.active, false);
                // disable the menu if filter.disabled explicitly set to true
                this.menu.setDisabled(filter.disabled === true);
            }

            this.menu.setVisible(filter !== undefined);
            this.sep.setVisible(filter !== undefined);
        },

        /** @private */
        onCheckChange : function (item, value) {
            this.getMenuFilter().setActive(value);
        },

        /** @private */
        onBeforeCheck : function (check, value) {
            return !value || this.getMenuFilter().isActivatable();
        },

        /**
         * @private
         * Handler for all events on filters.
         * @param {String} event Event name
         * @param {Object} filter Standard signature of the event before the event is fired
         */
        onStateChange : function (event, filter) {
            if (event === 'serialize') {
                return;
            }

            if (filter == this.getMenuFilter()) {
                this.menu.setChecked(filter.active, false);
            }

            if ((this.autoReload || this.local) && !this.applyingState) {
                this.deferredUpdate.delay(this.updateBuffer);
            }
            this.updateColumnHeadings();

            if (!this.applyingState) {
                this.grid.saveState();
            }
            this.grid.fireEvent('filterupdate', this, filter);
        },

        /**
         * @private
         * Handler for store's beforeload event when configured for remote filtering
         * @param {Object} store
         * @param {Object} options
         */
        onBeforeLoad : function (store, options) {
            options.params = options.params || {};
            this.cleanParams(options.params);
            var params = this.buildQuery(this.getFilterData());
            Ext.apply(options.params, params);
        },

        /**
         * @private
         * Handler for store's load event when configured for local filtering
         * @param {Object} store
         * @param {Object} options
         */
        onLoad : function (store, options) {
            store.filterBy(this.getRecordFilter());
        },

        /**
         * @private
         * Handler called when the grid's view is refreshed
         */
        onRefresh : function () {
            this.updateColumnHeadings();
        },

        /**
         * Update the styles for the header row based on the active filters
         */
        updateColumnHeadings : function () {
            var view = this.grid.getView(),
                i, len, filter;
            if (view.mainHd) {
                for (i = 0, len = view.cm.config.length; i < len; i++) {
                    filter = this.getFilter(view.cm.config[i].dataIndex);
                    Ext.fly(view.getHeaderCell(i))[filter && filter.active ? 'addClass' : 'removeClass'](this.filterCls);
                }
            }
        },

        /** @private */
        reload : function () {
            if (this.local) {
                this.grid.store.clearFilter(true);
                this.grid.store.filterBy(this.getRecordFilter());
            } else {
                var start,
                    store = this.grid.store;
                this.deferredUpdate.cancel();
                if (this.toolbar) {
                    start = store.paramNames.start;
                    if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {
                        store.lastOptions.params[start] = 0;
                    }
                }
                store.reload();
            }
        },

        /**
         * Method factory that generates a record validator for the filters active at the time
         * of invokation.
         * @private
         */
        getRecordFilter : function () {
            var f = [], len, i;
            this.filters.each(function (filter) {
                if (filter.active) {
                    f.push(filter);
                }
            });

            len = f.length;
            return function (record) {
                for (i = 0; i < len; i++) {
                    if (!f[i].validateRecord(record)) {
                        return false;
                    }
                }
                return true;
            };
        },

        /**
         * Adds a filter to the collection and observes it for state change.
         * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.
         * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.
         */
        addFilter : function (config) {
            var Cls = this.getFilterClass(config.type),
                filter = config.menu ? config : (new Cls(config));
            this.filters.add(filter);

            Ext.util.Observable.capture(filter, this.onStateChange, this);
            return filter;
        },

        /**
         * Adds filters to the collection.
         * @param {Array/Ext.grid.ColumnModel} filters Either an Array of
         * filter configuration objects or an Ext.grid.ColumnModel.  The columns
         * of a passed Ext.grid.ColumnModel will be examined for a filter
         * property and, if present, will be used as the filter configuration object.
         */
        addFilters : function (filters) {
            if (filters) {
                var i, len, filter, cm = false, dI;
                if (filters instanceof Ext.grid.ColumnModel) {
                    filters = filters.config;
                    cm = true;
                }
                for (i = 0, len = filters.length; i < len; i++) {
                    filter = false;
                    if (cm) {
                        dI = filters[i].dataIndex;
                        filter = filters[i].filter || filters[i].filterable;
                        if (filter){
                            filter = (filter === true) ? {} : filter;
                            Ext.apply(filter, {dataIndex:dI});
                            // filter type is specified in order of preference:
                            //     filter type specified in config
                            //     type specified in store's field's type config
                            filter.type = filter.type || this.store.fields.get(dI).type.type;
                        }
                    } else {
                        filter = filters[i];
                    }
                    // if filter config found add filter for the column
                    if (filter) {
                        this.addFilter(filter);
                    }
                }
            }
        },

        /**
         * Returns a filter for the given dataIndex, if one exists.
         * @param {String} dataIndex The dataIndex of the desired filter object.
         * @return {Ext.ux.grid.filter.Filter}
         */
        getFilter : function (dataIndex) {
            return this.filters.get(dataIndex);
        },

        /**
         * Turns all filters off. This does not clear the configuration information
         * (see {@link #removeAll}).
         */
        clearFilters : function () {
            this.filters.each(function (filter) {
                filter.setActive(false);
            });
        },

        /**
         * Returns an Array of the currently active filters.
         * @return {Array} filters Array of the currently active filters.
         */
        getFilterData : function () {
            var filters = [], i, len;

            this.filters.each(function (f) {
                if (f.active) {
                    var d = [].concat(f.serialize());
                    for (i = 0, len = d.length; i < len; i++) {
                        filters.push({
                            field: f.dataIndex,
                            data: d[i]
                        });
                    }
                }
            });
            return filters;
        },

        /**
         * Function to take the active filters data and build it into a query.
         * The format of the query depends on the {@link #encode}
         * configuration:
         *
         *
         * false : Default
         *
         * Flatten into query string of the form (assuming {@link #paramPrefix}='filters':
         *
    filters[0][field]="someDataIndex"&
    filters[0][data][comparison]="someValue1"&
    filters[0][data][type]="someValue2"&
    filters[0][data][value]="someValue3"&
         *
         *
         * true :
         *
         * JSON encode the filter data
         *
    filters[0][field]="someDataIndex"&
    filters[0][data][comparison]="someValue1"&
    filters[0][data][type]="someValue2"&
    filters[0][data][value]="someValue3"&
         *
         *
         *
         * Override this method to customize the format of the filter query for remote requests.
         * @param {Array} filters A collection of objects representing active filters and their configuration.
         *    Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured
         *    to be unique as any one filter may be a composite of more basic filters for the same dataIndex.
         * @return {Object} Query keys and values
         */
        buildQuery : function (filters) {
            var p = {}, i, f, root, dataPrefix, key, tmp,
                len = filters.length;

            if (!this.encode){
                for (i = 0; i < len; i++) {
                    f = filters[i];
                    root = [this.paramPrefix, '[', i, ']'].join('');
                    p[root + '[field]'] = f.field;

                    dataPrefix = root + '[data]';
                    for (key in f.data) {
                        p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];
                    }
                }
            } else {
                tmp = [];
                for (i = 0; i < len; i++) {
                    f = filters[i];
                    tmp.push(Ext.apply(
                        {},
                        {field: f.field},
                        f.data
                    ));
                }
                // only build if there is active filter
                if (tmp.length > 0){
                    p[this.paramPrefix] = Ext.util.JSON.encode(tmp);
                }
            }
            return p;
        },

        /**
         * Removes filter related query parameters from the provided object.
         * @param {Object} p Query parameters that may contain filter related fields.
         */
        cleanParams : function (p) {
            // if encoding just delete the property
            if (this.encode) {
                delete p[this.paramPrefix];
            // otherwise scrub the object of filter data
            } else {
                var regex, key;
                regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');
                for (key in p) {
                    if (regex.test(key)) {
                        delete p[key];
                    }
                }
            }
        },

        /**
         * Function for locating filter classes, overwrite this with your favorite
         * loader to provide dynamic filter loading.
         * @param {String} type The type of filter to load ('Filter' is automatically
         * appended to the passed type; eg, 'string' becomes 'StringFilter').
         * @return {Class} The Ext.ux.grid.filter.Class
         */
        getFilterClass : function (type) {
            // map the supported Ext.data.Field type values into a supported filter
            switch(type) {
                case 'auto':
                  type = 'string';
                  break;
                case 'int':
                case 'float':
                  type = 'numeric';
                  break;
                case 'bool':
                  type = 'boolean';
                  break;
            }
            return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];
        }
    });

    // register ptype
    Ext.preg('gridfilters', Ext.ux.grid.GridFilters);
    Ext.namespace('Ext.ux.grid.filter');

    /**
     * @class Ext.ux.grid.filter.Filter
     * @extends Ext.util.Observable
     * Abstract base class for filter implementations.
     */
    Ext.ux.grid.filter.Filter = Ext.extend(Ext.util.Observable, {
        /**
         * @cfg {Boolean} active
         * Indicates the initial status of the filter (defaults to false).
         */
        active : false,
        /**
         * True if this filter is active.  Use setActive() to alter after configuration.
         * @type Boolean
         * @property active
         */
        /**
         * @cfg {String} dataIndex
         * The {@link Ext.data.Store} dataIndex of the field this filter represents.
         * The dataIndex does not actually have to exist in the store.
         */
        dataIndex : null,
        /**
         * The filter configuration menu that will be installed into the filter submenu of a column menu.
         * @type Ext.menu.Menu
         * @property
         */
        menu : null,
        /**
         * @cfg {Number} updateBuffer
         * Number of milliseconds to wait after user interaction to fire an update. Only supported
         * by filters: 'list', 'numeric', and 'string'. Defaults to 500.
         */
        updateBuffer : 500,

        constructor : function (config) {
            Ext.apply(this, config);

            this.addEvents(
                /**
                 * @event activate
                 * Fires when an inactive filter becomes active
                 * @param {Ext.ux.grid.filter.Filter} this
                 */
                'activate',
                /**
                 * @event deactivate
                 * Fires when an active filter becomes inactive
                 * @param {Ext.ux.grid.filter.Filter} this
                 */
                'deactivate',
                /**
                 * @event serialize
                 * Fires after the serialization process. Use this to attach additional parameters to serialization
                 * data before it is encoded and sent to the server.
                 * @param {Array/Object} data A map or collection of maps representing the current filter configuration.
                 * @param {Ext.ux.grid.filter.Filter} filter The filter being serialized.
                 */
                'serialize',
                /**
                 * @event update
                 * Fires when a filter configuration has changed
                 * @param {Ext.ux.grid.filter.Filter} this The filter object.
                 */
                'update'
            );
            Ext.ux.grid.filter.Filter.superclass.constructor.call(this);

            this.menu = new Ext.menu.Menu();
            this.init(config);
            if(config && config.value){
                this.setValue(config.value);
                this.setActive(config.active !== false, true);
                delete config.value;
            }
        },

        /**
         * Destroys this filter by purging any event listeners, and removing any menus.
         */
        destroy : function(){
            if (this.menu){
                this.menu.destroy();
            }
            this.purgeListeners();
        },

        /**
         * Template method to be implemented by all subclasses that is to
         * initialize the filter and install required menu items.
         * Defaults to Ext.emptyFn.
         */
        init : Ext.emptyFn,

        /**
         * Template method to be implemented by all subclasses that is to
         * get and return the value of the filter.
         * Defaults to Ext.emptyFn.
         * @return {Object} The 'serialized' form of this filter
         * @methodOf Ext.ux.grid.filter.Filter
         */
        getValue : Ext.emptyFn,

        /**
         * Template method to be implemented by all subclasses that is to
         * set the value of the filter and fire the 'update' event.
         * Defaults to Ext.emptyFn.
         * @param {Object} data The value to set the filter
         * @methodOf Ext.ux.grid.filter.Filter
         */
        setValue : Ext.emptyFn,

        /**
         * Template method to be implemented by all subclasses that is to
         * return true if the filter has enough configuration information to be activated.
         * Defaults to return true.
         * @return {Boolean}
         */
        isActivatable : function(){
            return true;
        },

        /**
         * Template method to be implemented by all subclasses that is to
         * get and return serialized filter data for transmission to the server.
         * Defaults to Ext.emptyFn.
         */
        getSerialArgs : Ext.emptyFn,

        /**
         * Template method to be implemented by all subclasses that is to
         * validates the provided Ext.data.Record against the filters configuration.
         * Defaults to return true.
         * @param {Ext.data.Record} record The record to validate
         * @return {Boolean} true if the record is valid within the bounds
         * of the filter, false otherwise.
         */
        validateRecord : function(){
            return true;
        },

        /**
         * Returns the serialized filter data for transmission to the server
         * and fires the 'serialize' event.
         * @return {Object/Array} An object or collection of objects containing
         * key value pairs representing the current configuration of the filter.
         * @methodOf Ext.ux.grid.filter.Filter
         */
        serialize : function(){
            var args = this.getSerialArgs();
            this.fireEvent('serialize', args, this);
            return args;
        },

        /** @private */
        fireUpdate : function(){
            if (this.active) {
                this.fireEvent('update', this);
            }
            this.setActive(this.isActivatable());
        },

        /**
         * Sets the status of the filter and fires the appropriate events.
         * @param {Boolean} active        The new filter state.
         * @param {Boolean} suppressEvent True to prevent events from being fired.
         * @methodOf Ext.ux.grid.filter.Filter
         */
        setActive : function(active, suppressEvent){
            if(this.active != active){
                this.active = active;
                if (suppressEvent !== true) {
                    this.fireEvent(active ? 'activate' : 'deactivate', this);
                }
            }
        }
    });/**
     * @class Ext.ux.grid.filter.BooleanFilter
     * @extends Ext.ux.grid.filter.Filter
     * Boolean filters use unique radio group IDs (so you can have more than one!)
     * Example Usage:
     *
    var filters = new Ext.ux.grid.GridFilters({
        ...
        filters: [{
            // required configs
            type: 'boolean',
            dataIndex: 'visible'

            // optional configs
            defaultValue: null, // leave unselected (false selected by default)
            yesText: 'Yes',     // default
            noText: 'No'        // default
        }]
    });
     *
     */
    Ext.ux.grid.filter.BooleanFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
    	/**
    	 * @cfg {Boolean} defaultValue
    	 * Set this to null if you do not want either option to be checked by default. Defaults to false.
    	 */
    	defaultValue : false,
    	/**
    	 * @cfg {String} yesText
    	 * Defaults to 'Yes'.
    	 */
    	yesText : 'Yes',
    	/**
    	 * @cfg {String} noText
    	 * Defaults to 'No'.
    	 */
    	noText : 'No',

        /**
         * @private
         * Template method that is to initialize the filter and install required menu items.
         */
        init : function (config) {
            var gId = Ext.id();
    		this.options = [
    			new Ext.menu.CheckItem({text: this.yesText, group: gId, checked: this.defaultValue === true}),
    			new Ext.menu.CheckItem({text: this.noText, group: gId, checked: this.defaultValue === false})];

    		this.menu.add(this.options[0], this.options[1]);

    		for(var i=0; i/**
         * Template method that is to validate the provided Ext.data.Record
         * against the filters configuration.
         * @param {Ext.data.Record} record The record to validate
         * @return {Boolean} true if the record is valid within the bounds
         * of the filter, false otherwise.
         */
        validateRecord : function (record) {
    		return record.get(this.dataIndex) == this.getValue();
    	}
    });/**
     * @class Ext.ux.grid.filter.DateFilter
     * @extends Ext.ux.grid.filter.Filter
     * Filter by a configurable Ext.menu.DateMenu
     * Example Usage:
     *
    var filters = new Ext.ux.grid.GridFilters({
        ...
        filters: [{
            // required configs
            type: 'date',
            dataIndex: 'dateAdded',

            // optional configs
            dateFormat: 'm/d/Y',  // default
            beforeText: 'Before', // default
            afterText: 'After',   // default
            onText: 'On',         // default
            pickerOpts: {
                // any DateMenu configs
            },

            active: true // default is false
        }]
    });
     *
     */
    Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
        /**
         * @cfg {String} afterText
         * Defaults to 'After'.
         */
        afterText : 'After',
        /**
         * @cfg {String} beforeText
         * Defaults to 'Before'.
         */
        beforeText : 'Before',
        /**
         * @cfg {Object} compareMap
         * Map for assigning the comparison values used in serialization.
         */
        compareMap : {
            before: 'lt',
            after:  'gt',
            on:     'eq'
        },
        /**
         * @cfg {String} dateFormat
         * The date format to return when using getValue.
         * Defaults to 'm/d/Y'.
         */
        dateFormat : 'm/d/Y',

        /**
         * @cfg {Date} maxDate
         * Allowable date as passed to the Ext.DatePicker
         * Defaults to undefined.
         */
        /**
         * @cfg {Date} minDate
         * Allowable date as passed to the Ext.DatePicker
         * Defaults to undefined.
         */
        /**
         * @cfg {Array} menuItems
         * The items to be shown in this menu
         * Defaults to:
         * menuItems : ['before', 'after', '-', 'on'],
         *
         */
        menuItems : ['before', 'after', '-', 'on'],

        /**
         * @cfg {Object} menuItemCfgs
         * Default configuration options for each menu item
         */
        menuItemCfgs : {
            selectOnFocus: true,
            width: 125
        },

        /**
         * @cfg {String} onText
         * Defaults to 'On'.
         */
        onText : 'On',

        /**
         * @cfg {Object} pickerOpts
         * Configuration options for the date picker associated with each field.
         */
        pickerOpts : {},

        /**
         * @private
         * Template method that is to initialize the filter and install required menu items.
         */
        init : function (config) {
            var menuCfg, i, len, item, cfg, Cls;

            menuCfg = Ext.apply(this.pickerOpts, {
                minDate: this.minDate,
                maxDate: this.maxDate,
                format:  this.dateFormat,
                listeners: {
                    scope: this,
                    select: this.onMenuSelect
                }
            });

            this.fields = {};
            for (i = 0, len = this.menuItems.length; i < len; i++) {
                item = this.menuItems[i];
                if (item !== '-') {
                    cfg = {
                        itemId: 'range-' + item,
                        text: this[item + 'Text'],
                        menu: new Ext.menu.DateMenu(
                            Ext.apply(menuCfg, {
                                itemId: item
                            })
                        ),
                        listeners: {
                            scope: this,
                            checkchange: this.onCheckChange
                        }
                    };
                    Cls = Ext.menu.CheckItem;
                    item = this.fields[item] = new Cls(cfg);
                }
                //this.add(item);
                this.menu.add(item);
            }
        },

        onCheckChange : function () {
            this.setActive(this.isActivatable());
            this.fireEvent('update', this);
        },

        /**
         * @private
         * Handler method called when there is a keyup event on an input
         * item of this menu.
         */
        onInputKeyUp : function (field, e) {
            var k = e.getKey();
            if (k == e.RETURN && field.isValid()) {
                e.stopEvent();
                this.menu.hide(true);
                return;
            }
        },

        /**
         * Handler for when the menu for a field fires the 'select' event
         * @param {Object} date
         * @param {Object} menuItem
         * @param {Object} value
         * @param {Object} picker
         */
        onMenuSelect : function (menuItem, value, picker) {
            var fields = this.fields,
                field = this.fields[menuItem.itemId];

            field.setChecked(true);

            if (field == fields.on) {
                fields.before.setChecked(false, true);
                fields.after.setChecked(false, true);
            } else {
                fields.on.setChecked(false, true);
                if (field == fields.after && fields.before.menu.picker.value < value) {
                    fields.before.setChecked(false, true);
                } else if (field == fields.before && fields.after.menu.picker.value > value) {
                    fields.after.setChecked(false, true);
                }
            }
            this.fireEvent('update', this);
        },

        /**
         * @private
         * Template method that is to get and return the value of the filter.
         * @return {String} The value of this filter
         */
        getValue : function () {
            var key, result = {};
            for (key in this.fields) {
                if (this.fields[key].checked) {
                    result[key] = this.fields[key].menu.picker.getValue();
                }
            }
            return result;
        },

        /**
         * @private
         * Template method that is to set the value of the filter.
         * @param {Object} value The value to set the filter
         * @param {Boolean} preserve true to preserve the checked status
         * of the other fields.  Defaults to false, unchecking the
         * other fields
         */
        setValue : function (value, preserve) {
            var key;
            for (key in this.fields) {
                if(value[key]){
                    this.fields[key].menu.picker.setValue(value[key]);
                    this.fields[key].setChecked(true);
                } else if (!preserve) {
                    this.fields[key].setChecked(false);
                }
            }
            this.fireEvent('update', this);
        },

        /**
         * @private
         * Template method that is to return true if the filter
         * has enough configuration information to be activated.
         * @return {Boolean}
         */
        isActivatable : function () {
            var key;
            for (key in this.fields) {
                if (this.fields[key].checked) {
                    return true;
                }
            }
            return false;
        },

        /**
         * @private
         * Template method that is to get and return serialized filter data for
         * transmission to the server.
         * @return {Object/Array} An object or collection of objects containing
         * key value pairs representing the current configuration of the filter.
         */
        getSerialArgs : function () {
            var args = [];
            for (var key in this.fields) {
                if(this.fields[key].checked){
                    args.push({
                        type: 'date',
                        comparison: this.compareMap[key],
                        value: this.getFieldValue(key).format(this.dateFormat)
                    });
                }
            }
            return args;
        },

        /**
         * Get and return the date menu picker value
         * @param {String} item The field identifier ('before', 'after', 'on')
         * @return {Date} Gets the current selected value of the date field
         */
        getFieldValue : function(item){
            return this.fields[item].menu.picker.getValue();
        },

        /**
         * Gets the menu picker associated with the passed field
         * @param {String} item The field identifier ('before', 'after', 'on')
         * @return {Object} The menu picker
         */
        getPicker : function(item){
            return this.fields[item].menu.picker;
        },

        /**
         * Template method that is to validate the provided Ext.data.Record
         * against the filters configuration.
         * @param {Ext.data.Record} record The record to validate
         * @return {Boolean} true if the record is valid within the bounds
         * of the filter, false otherwise.
         */
        validateRecord : function (record) {
            var key,
                pickerValue,
                val = record.get(this.dataIndex);

            if(!Ext.isDate(val)){
                return false;
            }
            val = val.clearTime(true).getTime();

            for (key in this.fields) {
                if (this.fields[key].checked) {
                    pickerValue = this.getFieldValue(key).clearTime(true).getTime();
                    if (key == 'before' && pickerValue <= val) {
                        return false;
                    }
                    if (key == 'after' && pickerValue >= val) {
                        return false;
                    }
                    if (key == 'on' && pickerValue != val) {
                        return false;
                    }
                }
            }
            return true;
        }
    });/**
     * @class Ext.ux.grid.filter.ListFilter
     * @extends Ext.ux.grid.filter.Filter
     * List filters are able to be preloaded/backed by an Ext.data.Store to load
     * their options the first time they are shown. ListFilter utilizes the
     * {@link Ext.ux.menu.ListMenu} component.
     * Although not shown here, this class accepts all configuration options
     * for {@link Ext.ux.menu.ListMenu}.
     *
     * Example Usage:
     *
    var filters = new Ext.ux.grid.GridFilters({
        ...
        filters: [{
            type: 'list',
            dataIndex: 'size',
            phpMode: true,
            // options will be used as data to implicitly creates an ArrayStore
            options: ['extra small', 'small', 'medium', 'large', 'extra large']
        }]
    });
     *
     *
     */
    Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, {

        /**
         * @cfg {Array} options
         * data to be used to implicitly create a data store
         * to back this list when the data source is local. If the
         * data for the list is remote, use the {@link #store}
         * config instead.
         *
    Each item within the provided array may be in one of the
         * following formats:
         *
         * Array :
         *
    options: [
        [11, 'extra small'],
        [18, 'small'],
        [22, 'medium'],
        [35, 'large'],
        [44, 'extra large']
    ]
         *
         *
         * Object :
         *
    labelField: 'name', // override default of 'text'
    options: [
        {id: 11, name:'extra small'},
        {id: 18, name:'small'},
        {id: 22, name:'medium'},
        {id: 35, name:'large'},
        {id: 44, name:'extra large'}
    ]
         *
         *
         * String :
         *
         * options: ['extra small', 'small', 'medium', 'large', 'extra large']
         *
         *
         */
        /**
         * @cfg {Boolean} phpMode
         * Adjust the format of this filter. Defaults to false.
         *
    When GridFilters @cfg encode = false (default):
         *
    // phpMode == false (default):
    filter[0][data][type] list
    filter[0][data][value] value1
    filter[0][data][value] value2
    filter[0][field] prod

    // phpMode == true:
    filter[0][data][type] list
    filter[0][data][value] value1, value2
    filter[0][field] prod
         *
         * When GridFilters @cfg encode = true:
         *
    // phpMode == false (default):
    filter : [{"type":"list","value":["small","medium"],"field":"size"}]

    // phpMode == true:
    filter : [{"type":"list","value":"small,medium","field":"size"}]
         *
         */
        phpMode : false,
        /**
         * @cfg {Ext.data.Store} store
         * The {@link Ext.data.Store} this list should use as its data source
         * when the data source is remote. If the data for the list
         * is local, use the {@link #options} config instead.
         */

        /**
         * @private
         * Template method that is to initialize the filter and install required menu items.
         * @param {Object} config
         */
        init : function (config) {
            this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);

            // if a menu already existed, do clean up first
            if (this.menu){
                this.menu.destroy();
            }
            this.menu = new Ext.ux.menu.ListMenu(config);
            this.menu.on('checkchange', this.onCheckChange, this);
        },

        /**
         * @private
         * Template method that is to get and return the value of the filter.
         * @return {String} The value of this filter
         */
        getValue : function () {
            return this.menu.getSelected();
        },
        /**
         * @private
         * Template method that is to set the value of the filter.
         * @param {Object} value The value to set the filter
         */
        setValue : function (value) {
            this.menu.setSelected(value);
            this.fireEvent('update', this);
        },

        /**
         * @private
         * Template method that is to return true if the filter
         * has enough configuration information to be activated.
         * @return {Boolean}
         */
        isActivatable : function () {
            return this.getValue().length > 0;
        },

        /**
         * @private
         * Template method that is to get and return serialized filter data for
         * transmission to the server.
         * @return {Object/Array} An object or collection of objects containing
         * key value pairs representing the current configuration of the filter.
         */
        getSerialArgs : function () {
            var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};
            return args;
        },

        /** @private */
        onCheckChange : function(){
            this.dt.delay(this.updateBuffer);
        },

        /**
         * Template method that is to validate the provided Ext.data.Record
         * against the filters configuration.
         * @param {Ext.data.Record} record The record to validate
         * @return {Boolean} true if the record is valid within the bounds
         * of the filter, false otherwise.
         */
        validateRecord : function (record) {
            return this.getValue().indexOf(record.get(this.dataIndex)) > -1;
        }
    });/**
     * @class Ext.ux.grid.filter.NumericFilter
     * @extends Ext.ux.grid.filter.Filter
     * Filters using an Ext.ux.menu.RangeMenu.
     * Example Usage:
     *
    var filters = new Ext.ux.grid.GridFilters({
        ...
        filters: [{
            type: 'numeric',
            dataIndex: 'price'
        }]
    });
     *
     */
    Ext.ux.grid.filter.NumericFilter = Ext.extend(Ext.ux.grid.filter.Filter, {

        /**
         * @cfg {Object} fieldCls
         * The Class to use to construct each field item within this menu
         * Defaults to:
         * fieldCls : Ext.form.NumberField
         *
         */
        fieldCls : Ext.form.NumberField,
        /**
         * @cfg {Object} fieldCfg
         * The default configuration options for any field item unless superseded
         * by the {@link #fields} configuration.
         * Defaults to:
         * fieldCfg : {}
         *
         * Example usage:
         *
    fieldCfg : {
        width: 150,
    },
         *
         */
        /**
         * @cfg {Object} fields
         * The field items may be configured individually
         * Defaults to undefined.
         * Example usage:
         *
    fields : {
        gt: { // override fieldCfg options
            width: 200,
            fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}
        }
    },
         *
         */
        /**
         * @cfg {Object} iconCls
         * The iconCls to be applied to each comparator field item.
         * Defaults to:
    iconCls : {
        gt : 'ux-rangemenu-gt',
        lt : 'ux-rangemenu-lt',
        eq : 'ux-rangemenu-eq'
    }
         *
         */
        iconCls : {
            gt : 'ux-rangemenu-gt',
            lt : 'ux-rangemenu-lt',
            eq : 'ux-rangemenu-eq'
        },

        /**
         * @cfg {Object} menuItemCfgs
         * Default configuration options for each menu item
         * Defaults to:
    menuItemCfgs : {
        emptyText: 'Enter Filter Text...',
        selectOnFocus: true,
        width: 125
    }
         *
         */
        menuItemCfgs : {
            emptyText: 'Enter Filter Text...',
            selectOnFocus: true,
            width: 125
        },

        /**
         * @cfg {Array} menuItems
         * The items to be shown in this menu.  Items are added to the menu
         * according to their position within this array. Defaults to:
         * menuItems : ['lt','gt','-','eq']
         *
         */
        menuItems : ['lt', 'gt', '-', 'eq'],

        /**
         * @private
         * Template method that is to initialize the filter and install required menu items.
         */
        init : function (config) {
            // if a menu already existed, do clean up first
            if (this.menu){
                this.menu.destroy();
            }
            this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, {
                // pass along filter configs to the menu
                fieldCfg : this.fieldCfg || {},
                fieldCls : this.fieldCls,
                fields : this.fields || {},
                iconCls: this.iconCls,
                menuItemCfgs: this.menuItemCfgs,
                menuItems: this.menuItems,
                updateBuffer: this.updateBuffer
            }));
            // relay the event fired by the menu
            this.menu.on('update', this.fireUpdate, this);
        },

        /**
         * @private
         * Template method that is to get and return the value of the filter.
         * @return {String} The value of this filter
         */
        getValue : function () {
            return this.menu.getValue();
        },

        /**
         * @private
         * Template method that is to set the value of the filter.
         * @param {Object} value The value to set the filter
         */
        setValue : function (value) {
            this.menu.setValue(value);
        },

        /**
         * @private
         * Template method that is to return true if the filter
         * has enough configuration information to be activated.
         * @return {Boolean}
         */
        isActivatable : function () {
            var values = this.getValue();
            for (key in values) {
                if (values[key] !== undefined) {
                    return true;
                }
            }
            return false;
        },

        /**
         * @private
         * Template method that is to get and return serialized filter data for
         * transmission to the server.
         * @return {Object/Array} An object or collection of objects containing
         * key value pairs representing the current configuration of the filter.
         */
        getSerialArgs : function () {
            var key,
                args = [],
                values = this.menu.getValue();
            for (key in values) {
                args.push({
                    type: 'numeric',
                    comparison: key,
                    value: values[key]
                });
            }
            return args;
        },

        /**
         * Template method that is to validate the provided Ext.data.Record
         * against the filters configuration.
         * @param {Ext.data.Record} record The record to validate
         * @return {Boolean} true if the record is valid within the bounds
         * of the filter, false otherwise.
         */
        validateRecord : function (record) {
            var val = record.get(this.dataIndex),
                values = this.getValue();
            if (values.eq !== undefined && val != values.eq) {
                return false;
            }
            if (values.lt !== undefined && val >= values.lt) {
                return false;
            }
            if (values.gt !== undefined && val <= values.gt) {
                return false;
            }
            return true;
        }
    });/**
     * @class Ext.ux.grid.filter.StringFilter
     * @extends Ext.ux.grid.filter.Filter
     * Filter by a configurable Ext.form.TextField
     * Example Usage:
     *
    var filters = new Ext.ux.grid.GridFilters({
        ...
        filters: [{
            // required configs
            type: 'string',
            dataIndex: 'name',

            // optional configs
            value: 'foo',
            active: true, // default is false
            iconCls: 'ux-gridfilter-text-icon' // default
            // any Ext.form.TextField configs accepted
        }]
    });
     *
     */
    Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {

        /**
         * @cfg {String} iconCls
         * The iconCls to be applied to the menu item.
         * Defaults to 'ux-gridfilter-text-icon'.
         */
        iconCls : 'ux-gridfilter-text-icon',

        emptyText: 'Enter Filter Text...',
        selectOnFocus: true,
        width: 125,

        /**
         * @private
         * Template method that is to initialize the filter and install required menu items.
         */
        init : function (config) {
            Ext.applyIf(config, {
                enableKeyEvents: true,
                iconCls: this.iconCls,
                listeners: {
                    scope: this,
                    keyup: this.onInputKeyUp
                }
            });

            this.inputItem = new Ext.form.TextField(config);
            this.menu.add(this.inputItem);
            this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
        },

        /**
         * @private
         * Template method that is to get and return the value of the filter.
         * @return {String} The value of this filter
         */
        getValue : function () {
            return this.inputItem.getValue();
        },

        /**
         * @private
         * Template method that is to set the value of the filter.
         * @param {Object} value The value to set the filter
         */
        setValue : function (value) {
            this.inputItem.setValue(value);
            this.fireEvent('update', this);
        },

        /**
         * @private
         * Template method that is to return true if the filter
         * has enough configuration information to be activated.
         * @return {Boolean}
         */
        isActivatable : function () {
            return this.inputItem.getValue().length > 0;
        },

        /**
         * @private
         * Template method that is to get and return serialized filter data for
         * transmission to the server.
         * @return {Object/Array} An object or collection of objects containing
         * key value pairs representing the current configuration of the filter.
         */
        getSerialArgs : function () {
            return {type: 'string', value: this.getValue()};
        },

        /**
         * Template method that is to validate the provided Ext.data.Record
         * against the filters configuration.
         * @param {Ext.data.Record} record The record to validate
         * @return {Boolean} true if the record is valid within the bounds
         * of the filter, false otherwise.
         */
        validateRecord : function (record) {
            var val = record.get(this.dataIndex);

            if(typeof val != 'string') {
                return (this.getValue().length === 0);
            }

            return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
        },

        /**
         * @private
         * Handler method called when there is a keyup event on this.inputItem
         */
        onInputKeyUp : function (field, e) {
            var k = e.getKey();
            if (k == e.RETURN && field.isValid()) {
                e.stopEvent();
                this.menu.hide(true);
                return;
            }
            // restart the timer
            this.updateTask.delay(this.updateBuffer);
        }
    });
    Ext.namespace('Ext.ux.menu');

    /**
     * @class Ext.ux.menu.ListMenu
     * @extends Ext.menu.Menu
     * This is a supporting class for {@link Ext.ux.grid.filter.ListFilter}.
     * Although not listed as configuration options for this class, this class
     * also accepts all configuration options from {@link Ext.ux.grid.filter.ListFilter}.
     */
    Ext.ux.menu.ListMenu = Ext.extend(Ext.menu.Menu, {
        /**
         * @cfg {String} labelField
         * Defaults to 'text'.
         */
        labelField :  'text',
        /**
         * @cfg {String} paramPrefix
         * Defaults to 'Loading...'.
         */
        loadingText : 'Loading...',
        /**
         * @cfg {Boolean} loadOnShow
         * Defaults to true.
         */
        loadOnShow : true,
        /**
         * @cfg {Boolean} single
         * Specify true to group all items in this list into a single-select
         * radio button group. Defaults to false.
         */
        single : false,

        constructor : function (cfg) {
            this.selected = [];
            this.addEvents(
                /**
                 * @event checkchange
                 * Fires when there is a change in checked items from this list
                 * @param {Object} item Ext.menu.CheckItem
                 * @param {Object} checked The checked value that was set
                 */
                'checkchange'
            );

            Ext.ux.menu.ListMenu.superclass.constructor.call(this, cfg = cfg || {});

            if(!cfg.store && cfg.options){
                var options = [];
                for(var i=0, len=cfg.options.length; i/**
         * Lists will initially show a 'loading' item while the data is retrieved from the store.
         * In some cases the loaded data will result in a list that goes off the screen to the
         * right (as placement calculations were done with the loading item). This adapter will
         * allow show to be called with no arguments to show with the previous arguments and
         * thus recalculate the width and potentially hang the menu from the left.
         */
        show : function () {
            var lastArgs = null;
            return function(){
                if(arguments.length === 0){
                    Ext.ux.menu.ListMenu.superclass.show.apply(this, lastArgs);
                } else {
                    lastArgs = arguments;
                    if (this.loadOnShow && !this.loaded) {
                        this.store.load();
                    }
                    Ext.ux.menu.ListMenu.superclass.show.apply(this, arguments);
                }
            };
        }(),

        /** @private */
        onLoad : function (store, records) {
            var visible = this.isVisible();
            this.hide(false);

            this.removeAll(true);

            var gid = this.single ? Ext.id() : null;
            for(var i=0, len=records.length; i -1,
                    hideOnClick: false});

                item.itemId = records[i].id;
                item.on('checkchange', this.checkChange, this);

                this.add(item);
            }

            this.loaded = true;

            if (visible) {
                this.show();
            }
            this.fireEvent('load', this, records);
        },

        /**
         * Get the selected items.
         * @return {Array} selected
         */
        getSelected : function () {
            return this.selected;
        },

        /** @private */
        setSelected : function (value) {
            value = this.selected = [].concat(value);

            if (this.loaded) {
                this.items.each(function(item){
                    item.setChecked(false, true);
                    for (var i = 0, len = value.length; i < len; i++) {
                        if (item.itemId == value[i]) {
                            item.setChecked(true, true);
                        }
                    }
                }, this);
            }
        },

        /**
         * Handler for the 'checkchange' event from an check item in this menu
         * @param {Object} item Ext.menu.CheckItem
         * @param {Object} checked The checked value that was set
         */
        checkChange : function (item, checked) {
            var value = [];
            this.items.each(function(item){
                if (item.checked) {
                    value.push(item.itemId);
                }
            },this);
            this.selected = value;

            this.fireEvent('checkchange', item, checked);
        }
    });Ext.ns('Ext.ux.menu');

    /**
     * @class Ext.ux.menu.RangeMenu
     * @extends Ext.menu.Menu
     * Custom implementation of Ext.menu.Menu that has preconfigured
     * items for gt, lt, eq.
     * Example Usage:
     *

     *
     */
    Ext.ux.menu.RangeMenu = Ext.extend(Ext.menu.Menu, {

        constructor : function (config) {

            Ext.ux.menu.RangeMenu.superclass.constructor.call(this, config);

            this.addEvents(
                /**
                 * @event update
                 * Fires when a filter configuration has changed
                 * @param {Ext.ux.grid.filter.Filter} this The filter object.
                 */
                'update'
            );

            this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);

            var i, len, item, cfg, Cls;

            for (i = 0, len = this.menuItems.length; i < len; i++) {
                item = this.menuItems[i];
                if (item !== '-') {
                    // defaults
                    cfg = {
                        itemId: 'range-' + item,
                        enableKeyEvents: true,
                        iconCls: this.iconCls[item] || 'no-icon',
                        listeners: {
                            scope: this,
                            keyup: this.onInputKeyUp
                        }
                    };
                    Ext.apply(
                        cfg,
                        // custom configs
                        Ext.applyIf(this.fields[item] || {}, this.fieldCfg[item]),
                        // configurable defaults
                        this.menuItemCfgs
                    );
                    Cls = cfg.fieldCls || this.fieldCls;
                    item = this.fields[item] = new Cls(cfg);
                }
                this.add(item);
            }
        },

        /**
         * @private
         * called by this.updateTask
         */
        fireUpdate : function () {
            this.fireEvent('update', this);
        },

        /**
         * Get and return the value of the filter.
         * @return {String} The value of this filter
         */
        getValue : function () {
            var result = {}, key, field;
            for (key in this.fields) {
                field = this.fields[key];
                if (field.isValid() && String(field.getValue()).length > 0) {
                    result[key] = field.getValue();
                }
            }
            return result;
        },

        /**
         * Set the value of this menu and fires the 'update' event.
         * @param {Object} data The data to assign to this menu
         */
        setValue : function (data) {
            var key;
            for (key in this.fields) {
                this.fields[key].setValue(data[key] !== undefined ? data[key] : '');
            }
            this.fireEvent('update', this);
        },

        /**
         * @private
         * Handler method called when there is a keyup event on an input
         * item of this menu.
         */
        onInputKeyUp : function (field, e) {
            var k = e.getKey();
            if (k == e.RETURN && field.isValid()) {
                e.stopEvent();
                this.hide(true);
                return;
            }

            if (field == this.fields.eq) {
                if (this.fields.gt) {
                    this.fields.gt.setValue(null);
                }
                if (this.fields.lt) {
                    this.fields.lt.setValue(null);
                }
            }
            else {
                this.fields.eq.setValue(null);
            }

            // restart the timer
            this.updateTask.delay(this.updateBuffer);
        }
    });
    Ext.ns('Ext.ux.grid');

    /**
     * @class Ext.ux.grid.GroupSummary
     * @extends Ext.util.Observable
     * A GridPanel plugin that enables dynamic column calculations and a dynamically
     * updated grouped summary row.
     */
    Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {
        /**
         * @cfg {Function} summaryRenderer Renderer example:
    summaryRenderer: function(v, params, data){
        return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
    },
         *
         */
        /**
         * @cfg {String} summaryType (Optional) The type of
         * calculation to be used for the column.  For options available see
         * {@link #Calculations}.
         */

        constructor : function(config){
            Ext.apply(this, config);
            Ext.ux.grid.GroupSummary.superclass.constructor.call(this);
        },
        init : function(grid){
            this.grid = grid;
            var v = this.view = grid.getView();
            v.doGroupEnd = this.doGroupEnd.createDelegate(this);

            v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
            v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
            v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
            v.afterMethod('onUpdate', this.doUpdate, this);
            v.afterMethod('onRemove', this.doRemove, this);

            if(!this.rowTpl){
                this.rowTpl = new Ext.Template(
                    '',
                    '',
                        '{cells}',
                    ''
                );
                this.rowTpl.disableFormats = true;
            }
            this.rowTpl.compile();

            if(!this.cellTpl){
                this.cellTpl = new Ext.Template(
                    '',
                    '{value}',
                    ""
                );
                this.cellTpl.disableFormats = true;
            }
            this.cellTpl.compile();
        },

        /**
         * Toggle the display of the summary row on/off
         * @param {Boolean} visible true to show the summary, false to hide the summary.
         */
        toggleSummaries : function(visible){
            var el = this.grid.getGridEl();
            if(el){
                if(visible === undefined){
                    visible = el.hasClass('x-grid-hide-summary');
                }
                el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');
            }
        },

        renderSummary : function(o, cs){
            cs = cs || this.view.getColumnData();
            var cfg = this.grid.getColumnModel().config,
                buf = [], c, p = {}, cf, last = cs.length-1;
            for(var i = 0, len = cs.length; i < len; i++){
                c = cs[i];
                cf = cfg[i];
                p.id = c.id;
                p.style = c.style;
                p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                if(cf.summaryType || cf.summaryRenderer){
                    p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
                }else{
                    p.value = '';
                }
                if(p.value == undefined || p.value === "") p.value = " ";
                buf[buf.length] = this.cellTpl.apply(p);
            }

            return this.rowTpl.apply({
                tstyle: 'width:'+this.view.getTotalWidth()+';',
                cells: buf.join('')
            });
        },

        /**
         * @private
         * @param {Object} rs
         * @param {Object} cs
         */
        calculate : function(rs, cs){
            var data = {}, r, c, cfg = this.grid.getColumnModel().config, cf;
            for(var j = 0, jlen = rs.length; j < jlen; j++){
                r = rs[j];
                for(var i = 0, len = cs.length; i < len; i++){
                    c = cs[i];
                    cf = cfg[i];
                    if(cf.summaryType){
                        data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
                    }
                }
            }
            return data;
        },

        doGroupEnd : function(buf, g, cs, ds, colCount){
            var data = this.calculate(g.rs, cs);
            buf.push('', this.renderSummary({data: data}, cs), '');
        },

        doWidth : function(col, w, tw){
            if(!this.isGrouped()){
                return;
            }
            var gs = this.view.getGroups(),
                len = gs.length,
                i = 0,
                s;
            for(; i < len; ++i){
                s = gs[i].childNodes[2];
                s.style.width = tw;
                s.firstChild.style.width = tw;
                s.firstChild.rows[0].childNodes[col].style.width = w;
            }
        },

        doAllWidths : function(ws, tw){
            if(!this.isGrouped()){
                return;
            }
            var gs = this.view.getGroups(),
                len = gs.length,
                i = 0,
                j,
                s,
                cells,
                wlen = ws.length;

            for(; i < len; i++){
                s = gs[i].childNodes[2];
                s.style.width = tw;
                s.firstChild.style.width = tw;
                cells = s.firstChild.rows[0].childNodes;
                for(j = 0; j < wlen; j++){
                    cells[j].style.width = ws[j];
                }
            }
        },

        doHidden : function(col, hidden, tw){
            if(!this.isGrouped()){
                return;
            }
            var gs = this.view.getGroups(),
                len = gs.length,
                i = 0,
                s,
                display = hidden ? 'none' : '';
            for(; i < len; i++){
                s = gs[i].childNodes[2];
                s.style.width = tw;
                s.firstChild.style.width = tw;
                s.firstChild.rows[0].childNodes[col].style.display = display;
            }
        },

        isGrouped : function(){
            return !Ext.isEmpty(this.grid.getStore().groupField);
        },

        // Note: requires that all (or the first) record in the
        // group share the same group value. Returns false if the group
        // could not be found.
        refreshSummary : function(groupValue){
            return this.refreshSummaryById(this.view.getGroupId(groupValue));
        },

        getSummaryNode : function(gid){
            var g = Ext.fly(gid, '_gsummary');
            if(g){
                return g.down('.x-grid3-summary-row', true);
            }
            return null;
        },

        refreshSummaryById : function(gid){
            var g = Ext.getDom(gid);
            if(!g){
                return false;
            }
            var rs = [];
            this.grid.getStore().each(function(r){
                if(r._groupId == gid){
                    rs[rs.length] = r;
                }
            });
            var cs = this.view.getColumnData(),
                data = this.calculate(rs, cs),
                markup = this.renderSummary({data: data}, cs),
                existing = this.getSummaryNode(gid);

            if(existing){
                g.removeChild(existing);
            }
            Ext.DomHelper.append(g, markup);
            return true;
        },

        doUpdate : function(ds, record){
            this.refreshSummaryById(record._groupId);
        },

        doRemove : function(ds, record, index, isUpdate){
            if(!isUpdate){
                this.refreshSummaryById(record._groupId);
            }
        },

        /**
         * Show a message in the summary row.
         *
    grid.on('afteredit', function(){
        var groupValue = 'Ext Forms: Field Anchoring';
        summary.showSummaryMsg(groupValue, 'Updating Summary...');
    });
         *
         * @param {String} groupValue
         * @param {String} msg Text to use as innerHTML for the summary row.
         */
        showSummaryMsg : function(groupValue, msg){
            var gid = this.view.getGroupId(groupValue),
                 node = this.getSummaryNode(gid);
            if(node){
                node.innerHTML = '' + msg + '';
            }
        }
    });

    //backwards compat
    Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;

    /**
     * Calculation types for summary row:
     * sum :
     * count :
     * max :
     * min :
     * average :
     *
     * Custom calculations may be implemented.  An example of
     * custom summaryType=totalCost:
    // define a custom summary function
    Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
        return v + (record.data.estimate * record.data.rate);
    };
     *
     * @property Calculations
     */

    Ext.ux.grid.GroupSummary.Calculations = {
        'sum' : function(v, record, field){
            return v + (record.data[field]||0);
        },

        'count' : function(v, record, field, data){
            return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
        },

        'max' : function(v, record, field, data){
            var v = record.data[field];
            var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
            return v > max ? (data[field+'max'] = v) : max;
        },

        'min' : function(v, record, field, data){
            var v = record.data[field];
            var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
            return v < min ? (data[field+'min'] = v) : min;
        },

        'average' : function(v, record, field, data){
            var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
            var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
            return t === 0 ? 0 : t / c;
        }
    };
    Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;

    /**
     * @class Ext.ux.grid.HybridSummary
     * @extends Ext.ux.grid.GroupSummary
     * Adds capability to specify the summary data for the group via json as illustrated here:
     *
    {
        data: [
            {
                projectId: 100,     project: 'House',
                taskId:    112, description: 'Paint',
                estimate:    6,        rate:     150,
                due:'06/24/2007'
            },
            ...
        ],

        summaryData: {
            'House': {
                description: 14, estimate: 9,
                       rate: 99, due: new Date(2009, 6, 29),
                       cost: 999
            }
        }
    }
     *
     *
     */
    Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {
        /**
         * @private
         * @param {Object} rs
         * @param {Object} cs
         */
        calculate : function(rs, cs){
            var gcol = this.view.getGroupField(),
                gvalue = rs[0].data[gcol],
                gdata = this.getSummaryData(gvalue);
            return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
        },

        /**
         *
    grid.on('afteredit', function(){
        var groupValue = 'Ext Forms: Field Anchoring';
        summary.showSummaryMsg(groupValue, 'Updating Summary...');
        setTimeout(function(){ // simulate server call
            // HybridSummary class implements updateSummaryData
            summary.updateSummaryData(groupValue,
                // create data object based on configured dataIndex
                {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
        }, 2000);
    });
         *
         * @param {String} groupValue
         * @param {Object} data data object
         * @param {Boolean} skipRefresh (Optional) Defaults to false
         */
        updateSummaryData : function(groupValue, data, skipRefresh){
            var json = this.grid.getStore().reader.jsonData;
            if(!json.summaryData){
                json.summaryData = {};
            }
            json.summaryData[groupValue] = data;
            if(!skipRefresh){
                this.refreshSummary(groupValue);
            }
        },

        /**
         * Returns the summaryData for the specified groupValue or null.
         * @param {String} groupValue
         * @return {Object} summaryData
         */
        getSummaryData : function(groupValue){
            var reader = this.grid.getStore().reader,
                json = reader.jsonData,
                fields = reader.recordType.prototype.fields,
                v;

            if(json && json.summaryData){
                v = json.summaryData[groupValue];
                if(v){
                    return reader.extractValues(v, fields.items, fields.length);
                }
            }
            return null;
        }
    });

    //backwards compat
    Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;
    Ext.ux.GroupTab = Ext.extend(Ext.Container, {
        mainItem: 0,

        expanded: true,

        deferredRender: true,

        activeTab: null,

        idDelimiter: '__',

        headerAsText: false,

        frame: false,

        hideBorders: true,

        initComponent: function(config){
            Ext.apply(this, config);
            this.frame = false;

            Ext.ux.GroupTab.superclass.initComponent.call(this);

            this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');

            this.setLayout(new Ext.layout.CardLayout({
                deferredRender: this.deferredRender
            }));

            if (!this.stack) {
                this.stack = Ext.TabPanel.AccessStack();
            }

            this.initItems();

            this.on('beforerender', function(){
                this.groupEl = this.ownerCt.getGroupEl(this);
            }, this);

            this.on('add', this.onAdd, this, {
                target: this
            });
            this.on('remove', this.onRemove, this, {
                target: this
            });

            if (this.mainItem !== undefined) {
                var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
                delete this.mainItem;
                this.setMainItem(item);
            }
        },

        /**
         * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
         * can return false to cancel the tab change.
         * @param {String/Panel} tab The id or tab Panel to activate
         */
        setActiveTab : function(item){
            item = this.getComponent(item);
            if(!item){
                return false;
            }
            if(!this.rendered){
                this.activeTab = item;
                return true;
            }
            if(this.activeTab != item && this.fireEvent('beforetabchange', this, item, this.activeTab) !== false){
                if(this.activeTab && this.activeTab != this.mainItem){
                    var oldEl = this.getTabEl(this.activeTab);
                    if(oldEl){
                        Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
                    }
                }
                var el = this.getTabEl(item);
                Ext.fly(el).addClass('x-grouptabs-strip-active');
                this.activeTab = item;
                this.stack.add(item);

                this.layout.setActiveItem(item);
                if(this.layoutOnTabChange && item.doLayout){
                    item.doLayout();
                }
                if(this.scrolling){
                    this.scrollToTab(item, this.animScroll);
                }

                this.fireEvent('tabchange', this, item);
                return true;
            }
            return false;
        },

        getTabEl: function(item){
            if (item == this.mainItem) {
                return this.groupEl;
            }
            return Ext.TabPanel.prototype.getTabEl.call(this, item);
        },

        onRender: function(ct, position){
            Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);

            this.strip = Ext.fly(this.groupEl).createChild({
                tag: 'ul',
                cls: 'x-grouptabs-sub'
            });

            this.tooltip = new Ext.ToolTip({
               target: this.groupEl,
               delegate: 'a.x-grouptabs-text',
               trackMouse: true,
               renderTo: document.body,
               listeners: {
                   beforeshow: function(tip) {
                       var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
                           ? this.mainItem
                           : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);

                       if(!item.tabTip) {
                           return false;
                       }
                       tip.body.dom.innerHTML = item.tabTip;
                   },
                   scope: this
               }
            });

            if (!this.itemTpl) {
                var tt = new Ext.Template('', '{text}', '');
                tt.disableFormats = true;
                tt.compile();
                Ext.ux.GroupTab.prototype.itemTpl = tt;
            }

            this.items.each(this.initTab, this);
        },

        afterRender: function(){
            Ext.ux.GroupTab.superclass.afterRender.call(this);

            if (this.activeTab !== undefined) {
                var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
                delete this.activeTab;
                this.setActiveTab(item);
            }
        },

        // private
        initTab: function(item, index){
            var before = this.strip.dom.childNodes[index];
            var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);

            if (item === this.mainItem) {
                item.tabEl = this.groupEl;
                p.cls += ' x-grouptabs-main-item';
            }

            var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);

            item.tabEl = item.tabEl || el;

            item.on('disable', this.onItemDisabled, this);
            item.on('enable', this.onItemEnabled, this);
            item.on('titlechange', this.onItemTitleChanged, this);
            item.on('iconchange', this.onItemIconChanged, this);
            item.on('beforeshow', this.onBeforeShowItem, this);
        },

        setMainItem: function(item){
            item = this.getComponent(item);
            if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
                return;
            }

            this.mainItem = item;
        },

        getMainItem: function(){
            return this.mainItem || null;
        },

        // private
        onBeforeShowItem: function(item){
            if (item != this.activeTab) {
                this.setActiveTab(item);
                return false;
            }
        },

        // private
        onAdd: function(gt, item, index){
            if (this.rendered) {
                this.initTab.call(this, item, index);
            }
        },

        // private
        onRemove: function(tp, item){
            Ext.destroy(Ext.get(this.getTabEl(item)));
            this.stack.remove(item);
            item.un('disable', this.onItemDisabled, this);
            item.un('enable', this.onItemEnabled, this);
            item.un('titlechange', this.onItemTitleChanged, this);
            item.un('iconchange', this.onItemIconChanged, this);
            item.un('beforeshow', this.onBeforeShowItem, this);
            if (item == this.activeTab) {
                var next = this.stack.next();
                if (next) {
                    this.setActiveTab(next);
                }
                else if (this.items.getCount() > 0) {
                    this.setActiveTab(0);
                }
                else {
                    this.activeTab = null;
                }
            }
        },

        // private
        onBeforeAdd: function(item){
            var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
            if (existing) {
                this.setActiveTab(item);
                return false;
            }
            Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
            var es = item.elements;
            item.elements = es ? es.replace(',header', '') : es;
            item.border = (item.border === true);
        },

        // private
        onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
        onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,

        // private
        onItemTitleChanged: function(item){
            var el = this.getTabEl(item);
            if (el) {
                Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
            }
        },

        //private
        onItemIconChanged: function(item, iconCls, oldCls){
            var el = this.getTabEl(item);
            if (el) {
                Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
            }
        },

        beforeDestroy: function(){
            Ext.TabPanel.prototype.beforeDestroy.call(this);
            this.tooltip.destroy();
        }
    });

    Ext.reg('grouptab', Ext.ux.GroupTab);
    Ext.ns('Ext.ux');

    Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
        tabPosition: 'left',

        alternateColor: false,

        alternateCls: 'x-grouptabs-panel-alt',

        defaultType: 'grouptab',

        deferredRender: false,

        activeGroup : null,

        initComponent: function(){
            Ext.ux.GroupTabPanel.superclass.initComponent.call(this);

            this.addEvents(
                'beforegroupchange',
                'groupchange'
            );
            this.elements = 'body,header';
            this.stripTarget = 'header';

            this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';

            this.addClass('x-grouptabs-panel');

            if (this.tabStyle && this.tabStyle != '') {
                this.addClass('x-grouptabs-panel-' + this.tabStyle);
            }

            if (this.alternateColor) {
                this.addClass(this.alternateCls);
            }

            this.on('beforeadd', function(gtp, item, index){
                this.initGroup(item, index);
            });
            this.items.each(function(item){
                item.on('tabchange',function(item){
                    this.fireEvent('tabchange', this, item.activeTab);
                }, this);
            },this);
        },

        initEvents : function() {
            this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
        },

        onRender: function(ct, position){
            Ext.TabPanel.superclass.onRender.call(this, ct, position);
            if(this.plain){
                var pos = this.tabPosition == 'top' ? 'header' : 'footer';
                this[pos].addClass('x-tab-panel-'+pos+'-plain');
            }

            var st = this[this.stripTarget];

            this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
                tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});

            var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
            this.strip = new Ext.Element(this.stripWrap.dom.firstChild);

            this.header.addClass('x-grouptabs-panel-header');
            this.bwrap.addClass('x-grouptabs-bwrap');
            this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');

            if (!this.groupTpl) {
                var tt = new Ext.Template(
                    '',
                    '',
                    '',
                    '{text}',
                    ''
                );
                tt.disableFormats = true;
                tt.compile();
                Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
            }
            this.items.each(this.initGroup, this);
        },

        afterRender: function(){
            Ext.ux.GroupTabPanel.superclass.afterRender.call(this);

            this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
                cls: 'x-tab-joint'
            });

            this.addClass('x-tab-panel-' + this.tabPosition);
            this.header.setWidth(this.tabWidth);

            if (this.activeGroup !== undefined) {
                var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);
                delete this.activeGroup;
                this.setActiveGroup(group);
                group.setActiveTab(group.getMainItem());
            }
        },

        getGroupEl : Ext.TabPanel.prototype.getTabEl,

        // private
        findTargets: function(e){
            var item = null,
                itemEl = e.getTarget('li', this.strip);
            if (itemEl) {
                item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
                if (item.disabled) {
                    return {
                        expand: null,
                        item: null,
                        el: null
                    };
                }
            }
            return {
                expand: e.getTarget('.x-grouptabs-expand', this.strip),
                isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
                item: item,
                el: itemEl
            };
        },

        // private
        onStripMouseDown: function(e){
            if (e.button != 0) {
                return;
            }
            e.preventDefault();
            var t = this.findTargets(e);
            if (t.expand) {
                this.toggleGroup(t.el);
            }
            else if (t.item) {
                if(t.isGroup) {
                    t.item.setActiveTab(t.item.getMainItem());
                }
                else {
                    t.item.ownerCt.setActiveTab(t.item);
                }
            }
        },

        expandGroup: function(groupEl){
            if(groupEl.isXType) {
                groupEl = this.getGroupEl(groupEl);
            }
            Ext.fly(groupEl).addClass('x-grouptabs-expanded');
            this.syncTabJoint();
        },

        toggleGroup: function(groupEl){
            if(groupEl.isXType) {
                groupEl = this.getGroupEl(groupEl);
            }
            Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
            this.syncTabJoint();
        },

        collapseGroup: function(groupEl){
            if(groupEl.isXType) {
                groupEl = this.getGroupEl(groupEl);
            }
            Ext.fly(groupEl).removeClass('x-grouptabs-expanded');
            this.syncTabJoint();
        },

        syncTabJoint: function(groupEl){
            if (!this.tabJoint) {
                return;
            }

            groupEl = groupEl || this.getGroupEl(this.activeGroup);
            if(groupEl) {
                this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2);

                var y = Ext.isGecko2 ? 0 : 1;
                if (this.tabPosition == 'left'){
                    this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
                }
                else {
                    this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
                }
            }
            else {
                this.tabJoint.hide();
            }
        },

        getActiveTab : function() {
            if(!this.activeGroup) return null;
            return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;
        },

        onResize: function(){
            Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
            this.syncTabJoint();
        },

        createCorner: function(el, pos){
            return Ext.fly(el).createChild({
                cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
            });
        },

        initGroup: function(group, index){
            var before = this.strip.dom.childNodes[index],
                p = this.getTemplateArgs(group);
            if (index === 0) {
                p.cls += ' x-tab-first';
            }
            p.cls += ' x-grouptabs-main';
            p.text = group.getMainItem().title;

            var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),
                tl = this.createCorner(el, 'top-' + this.tabPosition),
                bl = this.createCorner(el, 'bottom-' + this.tabPosition);

            group.tabEl = el;
            if (group.expanded) {
                this.expandGroup(el);
            }

            if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
                bl.setLeft('-10px');
                bl.setBottom('-5px');
                tl.setLeft('-10px');
                tl.setTop('-5px');
            }

            this.mon(group, {
                scope: this,
                changemainitem: this.onGroupChangeMainItem,
                beforetabchange: this.onGroupBeforeTabChange
            });
        },

        setActiveGroup : function(group) {
            group = this.getComponent(group);
            if(!group){
                return false;
            }
            if(!this.rendered){
                this.activeGroup = group;
                return true;
            }
            if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){
                if(this.activeGroup){
                    this.activeGroup.activeTab = null;
                    var oldEl = this.getGroupEl(this.activeGroup);
                    if(oldEl){
                        Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
                    }
                }

                var groupEl = this.getGroupEl(group);
                Ext.fly(groupEl).addClass('x-grouptabs-strip-active');

                this.activeGroup = group;
                this.stack.add(group);

                this.layout.setActiveItem(group);
                this.syncTabJoint(groupEl);

                this.fireEvent('groupchange', this, group);
                return true;
            }
            return false;
        },

        onGroupBeforeTabChange: function(group, newTab, oldTab){
            if(group !== this.activeGroup || newTab !== oldTab) {
                this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
            }
            this.expandGroup(this.getGroupEl(group));
            if(group !== this.activeGroup) {
                return this.setActiveGroup(group);
            }
        },

        getFrameHeight: function(){
            var h = this.el.getFrameWidth('tb');
            h += (this.tbar ? this.tbar.getHeight() : 0) +
            (this.bbar ? this.bbar.getHeight() : 0);

            return h;
        },

        adjustBodyWidth: function(w){
            return w - this.tabWidth;
        }
    });

    Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);
    /*
     * Note that this control will most likely remain as an example, and not as a core Ext form
     * control.  However, the API will be changing in a future release and so should not yet be
     * treated as a final, stable API at this time.
     */

    /**
     * @class Ext.ux.form.ItemSelector
     * @extends Ext.form.Field
     * A control that allows selection of between two Ext.ux.form.MultiSelect controls.
     *
     *  @history
     *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
     *
     * @constructor
     * Create a new ItemSelector
     * @param {Object} config Configuration options
     * @xtype itemselector
     */
    Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {
        hideNavIcons:false,
        imagePath:"",
        iconUp:"up2.gif",
        iconDown:"down2.gif",
        iconLeft:"left2.gif",
        iconRight:"right2.gif",
        iconTop:"top2.gif",
        iconBottom:"bottom2.gif",
        drawUpIcon:true,
        drawDownIcon:true,
        drawLeftIcon:true,
        drawRightIcon:true,
        drawTopIcon:true,
        drawBotIcon:true,
        delimiter:',',
        bodyStyle:null,
        border:false,
        defaultAutoCreate:{tag: "div"},
        /**
         * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
         */
        multiselects:null,

        initComponent: function(){
            Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
            this.addEvents({
                'rowdblclick' : true,
                'change' : true
            });
        },

        onRender: function(ct, position){
            Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);

            // Internal default configuration for both multiselects
            var msConfig = [{
                legend: 'Available',
                draggable: true,
                droppable: true,
                width: 100,
                height: 100
            },{
                legend: 'Selected',
                droppable: true,
                draggable: true,
                width: 100,
                height: 100
            }];

            this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
            this.fromMultiselect.on('dblclick', this.onRowDblClick, this);

            this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
            this.toMultiselect.on('dblclick', this.onRowDblClick, this);

            var p = new Ext.Panel({
                bodyStyle:this.bodyStyle,
                border:this.border,
                layout:"table",
                layoutConfig:{columns:3}
            });

            p.add(this.fromMultiselect);
            var icons = new Ext.Panel({header:false});
            p.add(icons);
            p.add(this.toMultiselect);
            p.render(this.el);
            icons.el.down('.'+icons.bwrapCls).remove();

            // ICON HELL!!!
            if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
                this.imagePath+="/";
            this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
            this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
            this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
            this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
            this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
            this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
            var el=icons.getEl();
            this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
            el.createChild({tag: 'br'});
            this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
            el.createChild({tag: 'br'});
            this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
            el.createChild({tag: 'br'});
            this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
            el.createChild({tag: 'br'});
            this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
            el.createChild({tag: 'br'});
            this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
            this.toTopIcon.on('click', this.toTop, this);
            this.upIcon.on('click', this.up, this);
            this.downIcon.on('click', this.down, this);
            this.toBottomIcon.on('click', this.toBottom, this);
            this.addIcon.on('click', this.fromTo, this);
            this.removeIcon.on('click', this.toFrom, this);
            if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
            if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
            if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
            if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
            if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
            if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }

            var tb = p.body.first();
            this.el.setWidth(p.body.first().getWidth());
            p.body.removeClass();

            this.hiddenName = this.name;
            var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
            this.hiddenField = this.el.createChild(hiddenTag);
        },

        doLayout: function(){
            if(this.rendered){
                this.fromMultiselect.fs.doLayout();
                this.toMultiselect.fs.doLayout();
            }
        },

        afterRender: function(){
            Ext.ux.form.ItemSelector.superclass.afterRender.call(this);

            this.toStore = this.toMultiselect.store;
            this.toStore.on('add', this.valueChanged, this);
            this.toStore.on('remove', this.valueChanged, this);
            this.toStore.on('load', this.valueChanged, this);
            this.valueChanged(this.toStore);
        },

        toTop : function() {
            var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
            var records = [];
            if (selectionsArray.length > 0) {
                selectionsArray.sort();
                for (var i=0; i-1; i--) {
                    record = records[i];
                    this.toMultiselect.view.store.remove(record);
                    this.toMultiselect.view.store.insert(0, record);
                    selectionsArray.push(((records.length - 1) - i));
                }
            }
            this.toMultiselect.view.refresh();
            this.toMultiselect.view.select(selectionsArray);
        },

        toBottom : function() {
            var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
            var records = [];
            if (selectionsArray.length > 0) {
                selectionsArray.sort();
                for (var i=0; i 0) {
                for (var i=0; i= 0) {
                        this.toMultiselect.view.store.remove(record);
                        this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
                        newSelectionsArray.push(selectionsArray[i] - 1);
                    }
                }
                this.toMultiselect.view.refresh();
                this.toMultiselect.view.select(newSelectionsArray);
            }
        },

        down : function() {
            var record = null;
            var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
            selectionsArray.sort();
            selectionsArray.reverse();
            var newSelectionsArray = [];
            if (selectionsArray.length > 0) {
                for (var i=0; i 0) {
                for (var i=0; i 0) {
                for (var i=0; i',
                        '',
                            '{lockedHeader}',
                            '{lockedBody}',
                        '',
                        '',
                            '{header}',
                            '{body}',
                        '',
                        ' ',
                        ' ',
                    ''
                );
            }

            this.templates = ts;

            Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);
        },

        getEditorParent : function(ed){
            return this.el.dom;
        },

        initElements : function(){
            var el             = Ext.get(this.grid.getGridEl().dom.firstChild),
                lockedWrap     = el.child('div.x-grid3-locked'),
                lockedHd       = lockedWrap.child('div.x-grid3-header'),
                lockedScroller = lockedWrap.child('div.x-grid3-scroller'),
                mainWrap       = el.child('div.x-grid3-viewport'),
                mainHd         = mainWrap.child('div.x-grid3-header'),
                scroller       = mainWrap.child('div.x-grid3-scroller');

            if (this.grid.hideHeaders) {
                lockedHd.setDisplayed(false);
                mainHd.setDisplayed(false);
            }

            if(this.forceFit){
                scroller.setStyle('overflow-x', 'hidden');
            }

            Ext.apply(this, {
                el      : el,
                mainWrap: mainWrap,
                mainHd  : mainHd,
                innerHd : mainHd.dom.firstChild,
                scroller: scroller,
                mainBody: scroller.child('div.x-grid3-body'),
                focusEl : scroller.child('a'),
                resizeMarker: el.child('div.x-grid3-resize-marker'),
                resizeProxy : el.child('div.x-grid3-resize-proxy'),
                lockedWrap: lockedWrap,
                lockedHd: lockedHd,
                lockedScroller: lockedScroller,
                lockedBody: lockedScroller.child('div.x-grid3-body'),
                lockedInnerHd: lockedHd.child('div.x-grid3-header-inner', true)
            });

            this.focusEl.swallowEvent('click', true);
        },

        getLockedRows : function(){
            return this.hasRows() ? this.lockedBody.dom.childNodes : [];
        },

        getLockedRow : function(row){
            return this.getLockedRows()[row];
        },

        getCell : function(row, col){
            var lockedLen = this.cm.getLockedCount();
            if(col < lockedLen){
                return this.getLockedRow(row).getElementsByTagName('td')[col];
            }
            return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - lockedLen);
        },

        getHeaderCell : function(index){
            var lockedLen = this.cm.getLockedCount();
            if(index < lockedLen){
                return this.lockedHd.dom.getElementsByTagName('td')[index];
            }
            return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - lockedLen);
        },

        addRowClass : function(row, cls){
            var lockedRow = this.getLockedRow(row);
            if(lockedRow){
                this.fly(lockedRow).addClass(cls);
            }
            Ext.ux.grid.LockingGridView.superclass.addRowClass.call(this, row, cls);
        },

        removeRowClass : function(row, cls){
            var lockedRow = this.getLockedRow(row);
            if(lockedRow){
                this.fly(lockedRow).removeClass(cls);
            }
            Ext.ux.grid.LockingGridView.superclass.removeRowClass.call(this, row, cls);
        },

        removeRow : function(row) {
            Ext.removeNode(this.getLockedRow(row));
            Ext.ux.grid.LockingGridView.superclass.removeRow.call(this, row);
        },

        removeRows : function(firstRow, lastRow){
            var lockedBody = this.lockedBody.dom,
                rowIndex = firstRow;
            for(; rowIndex <= lastRow; rowIndex++){
                Ext.removeNode(lockedBody.childNodes[firstRow]);
            }
            Ext.ux.grid.LockingGridView.superclass.removeRows.call(this, firstRow, lastRow);
        },

        syncScroll : function(e){
            this.lockedScroller.dom.scrollTop = this.scroller.dom.scrollTop;
            Ext.ux.grid.LockingGridView.superclass.syncScroll.call(this, e);
        },

        updateSortIcon : function(col, dir){
            var sortClasses = this.sortClasses,
                lockedHeaders = this.lockedHd.select('td').removeClass(sortClasses),
                headers = this.mainHd.select('td').removeClass(sortClasses),
                lockedLen = this.cm.getLockedCount(),
                cls = sortClasses[dir == 'DESC' ? 1 : 0];

            if(col < lockedLen){
                lockedHeaders.item(col).addClass(cls);
            }else{
                headers.item(col - lockedLen).addClass(cls);
            }
        },

        updateAllColumnWidths : function(){
            var tw = this.getTotalWidth(),
                clen = this.cm.getColumnCount(),
                lw = this.getLockedWidth(),
                llen = this.cm.getLockedCount(),
                ws = [], len, i;
            this.updateLockedWidth();
            for(i = 0; i < clen; i++){
                ws[i] = this.getColumnWidth(i);
                var hd = this.getHeaderCell(i);
                hd.style.width = ws[i];
            }
            var lns = this.getLockedRows(), ns = this.getRows(), row, trow, j;
            for(i = 0, len = ns.length; i < len; i++){
                row = lns[i];
                row.style.width = lw;
                if(row.firstChild){
                    row.firstChild.style.width = lw;
                    trow = row.firstChild.rows[0];
                    for (j = 0; j < llen; j++) {
                       trow.childNodes[j].style.width = ws[j];
                    }
                }
                row = ns[i];
                row.style.width = tw;
                if(row.firstChild){
                    row.firstChild.style.width = tw;
                    trow = row.firstChild.rows[0];
                    for (j = llen; j < clen; j++) {
                       trow.childNodes[j - llen].style.width = ws[j];
                    }
                }
            }
            this.onAllColumnWidthsUpdated(ws, tw);
            this.syncHeaderHeight();
        },

        updateColumnWidth : function(col, width){
            var w = this.getColumnWidth(col),
                llen = this.cm.getLockedCount(),
                ns, rw, c, row;
            this.updateLockedWidth();
            if(col < llen){
                ns = this.getLockedRows();
                rw = this.getLockedWidth();
                c = col;
            }else{
                ns = this.getRows();
                rw = this.getTotalWidth();
                c = col - llen;
            }
            var hd = this.getHeaderCell(col);
            hd.style.width = w;
            for(var i = 0, len = ns.length; i < len; i++){
                row = ns[i];
                row.style.width = rw;
                if(row.firstChild){
                    row.firstChild.style.width = rw;
                    row.firstChild.rows[0].childNodes[c].style.width = w;
                }
            }
            this.onColumnWidthUpdated(col, w, this.getTotalWidth());
            this.syncHeaderHeight();
        },

        updateColumnHidden : function(col, hidden){
            var llen = this.cm.getLockedCount(),
                ns, rw, c, row,
                display = hidden ? 'none' : '';
            this.updateLockedWidth();
            if(col < llen){
                ns = this.getLockedRows();
                rw = this.getLockedWidth();
                c = col;
            }else{
                ns = this.getRows();
                rw = this.getTotalWidth();
                c = col - llen;
            }
            var hd = this.getHeaderCell(col);
            hd.style.display = display;
            for(var i = 0, len = ns.length; i < len; i++){
                row = ns[i];
                row.style.width = rw;
                if(row.firstChild){
                    row.firstChild.style.width = rw;
                    row.firstChild.rows[0].childNodes[c].style.display = display;
                }
            }
            this.onColumnHiddenUpdated(col, hidden, this.getTotalWidth());
            delete this.lastViewWidth;
            this.layout();
        },

        doRender : function(cs, rs, ds, startRow, colCount, stripe){
            var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1,
                tstyle = 'width:'+this.getTotalWidth()+';',
                lstyle = 'width:'+this.getLockedWidth()+';',
                buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r;
            for(var j = 0, len = rs.length; j < len; j++){
                r = rs[j]; cb = []; lcb = [];
                var rowIndex = (j+startRow);
                for(var i = 0; i < colCount; i++){
                    c = cs[i];
                    p.id = c.id;
                    p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
                        (this.cm.config[i].cellCls ? ' ' + this.cm.config[i].cellCls : '');
                    p.attr = p.cellAttr = '';
                    p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
                    p.style = c.style;
                    if(Ext.isEmpty(p.value)){
                        p.value = ' ';
                    }
                    if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){
                        p.css += ' x-grid3-dirty-cell';
                    }
                    if(c.locked){
                        lcb[lcb.length] = ct.apply(p);
                    }else{
                        cb[cb.length] = ct.apply(p);
                    }
                }
                var alt = [];
                if(stripe && ((rowIndex+1) % 2 === 0)){
                    alt[0] = 'x-grid3-row-alt';
                }
                if(r.dirty){
                    alt[1] = ' x-grid3-dirty-row';
                }
                rp.cols = colCount;
                if(this.getRowClass){
                    alt[2] = this.getRowClass(r, rowIndex, rp, ds);
                }
                rp.alt = alt.join(' ');
                rp.cells = cb.join('');
                rp.tstyle = tstyle;
                buf[buf.length] = rt.apply(rp);
                rp.cells = lcb.join('');
                rp.tstyle = lstyle;
                lbuf[lbuf.length] = rt.apply(rp);
            }
            return [buf.join(''), lbuf.join('')];
        },
        processRows : function(startRow, skipStripe){
            if(!this.ds || this.ds.getCount() < 1){
                return;
            }
            var rows = this.getRows(),
                lrows = this.getLockedRows(),
                row, lrow;
            skipStripe = skipStripe || !this.grid.stripeRows;
            startRow = startRow || 0;
            for(var i = 0, len = rows.length; i < len; ++i){
                row = rows[i];
                lrow = lrows[i];
                row.rowIndex = i;
                lrow.rowIndex = i;
                if(!skipStripe){
                    row.className = row.className.replace(this.rowClsRe, ' ');
                    lrow.className = lrow.className.replace(this.rowClsRe, ' ');
                    if ((i + 1) % 2 === 0){
                        row.className += ' x-grid3-row-alt';
                        lrow.className += ' x-grid3-row-alt';
                    }
                }
                this.syncRowHeights(row, lrow);
            }
            if(startRow === 0){
                Ext.fly(rows[0]).addClass(this.firstRowCls);
                Ext.fly(lrows[0]).addClass(this.firstRowCls);
            }
            Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
            Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls);
        },

        syncRowHeights: function(row1, row2){
            if(this.syncHeights){
                var el1 = Ext.get(row1),
                    el2 = Ext.get(row2),
                    h1 = el1.getHeight(),
                    h2 = el2.getHeight();

                if(h1 > h2){
                    el2.setHeight(h1);
                }else if(h2 > h1){
                    el1.setHeight(h2);
                }
            }
        },

        afterRender : function(){
            if(!this.ds || !this.cm){
                return;
            }
            var bd = this.renderRows() || [' ', ' '];
            this.mainBody.dom.innerHTML = bd[0];
            this.lockedBody.dom.innerHTML = bd[1];
            this.processRows(0, true);
            if(this.deferEmptyText !== true){
                this.applyEmptyText();
            }
            this.grid.fireEvent('viewready', this.grid);
        },

        renderUI : function(){
            var templates = this.templates,
                header = this.renderHeaders(),
                body = templates.body.apply({rows:' '});

            return templates.masterTpl.apply({
                body  : body,
                header: header[0],
                ostyle: 'width:' + this.getOffsetWidth() + ';',
                bstyle: 'width:' + this.getTotalWidth()  + ';',
                lockedBody: body,
                lockedHeader: header[1],
                lstyle: 'width:'+this.getLockedWidth()+';'
            });
        },

        afterRenderUI: function(){
            var g = this.grid;
            this.initElements();
            Ext.fly(this.innerHd).on('click', this.handleHdDown, this);
            Ext.fly(this.lockedInnerHd).on('click', this.handleHdDown, this);
            this.mainHd.on({
                scope: this,
                mouseover: this.handleHdOver,
                mouseout: this.handleHdOut,
                mousemove: this.handleHdMove
            });
            this.lockedHd.on({
                scope: this,
                mouseover: this.handleHdOver,
                mouseout: this.handleHdOut,
                mousemove: this.handleHdMove
            });
            this.scroller.on('scroll', this.syncScroll,  this);
            if(g.enableColumnResize !== false){
                this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
                this.splitZone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
                this.splitZone.setOuterHandleElId(Ext.id(this.mainHd.dom));
            }
            if(g.enableColumnMove){
                this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
                this.columnDrag.setOuterHandleElId(Ext.id(this.lockedInnerHd));
                this.columnDrag.setOuterHandleElId(Ext.id(this.innerHd));
                this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
            }
            if(g.enableHdMenu !== false){
                this.hmenu = new Ext.menu.Menu({id: g.id + '-hctx'});
                this.hmenu.add(
                    {itemId: 'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
                    {itemId: 'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
                );
                if(this.grid.enableColLock !== false){
                    this.hmenu.add('-',
                        {itemId: 'lock', text: this.lockText, cls: 'xg-hmenu-lock'},
                        {itemId: 'unlock', text: this.unlockText, cls: 'xg-hmenu-unlock'}
                    );
                }
                if(g.enableColumnHide !== false){
                    this.colMenu = new Ext.menu.Menu({id:g.id + '-hcols-menu'});
                    this.colMenu.on({
                        scope: this,
                        beforeshow: this.beforeColMenuShow,
                        itemclick: this.handleHdMenuClick
                    });
                    this.hmenu.add('-', {
                        itemId:'columns',
                        hideOnClick: false,
                        text: this.columnsText,
                        menu: this.colMenu,
                        iconCls: 'x-cols-icon'
                    });
                }
                this.hmenu.on('itemclick', this.handleHdMenuClick, this);
            }
            if(g.trackMouseOver){
                this.mainBody.on({
                    scope: this,
                    mouseover: this.onRowOver,
                    mouseout: this.onRowOut
                });
                this.lockedBody.on({
                    scope: this,
                    mouseover: this.onRowOver,
                    mouseout: this.onRowOut
                });
            }

            if(g.enableDragDrop || g.enableDrag){
                this.dragZone = new Ext.grid.GridDragZone(g, {
                    ddGroup : g.ddGroup || 'GridDD'
                });
            }
            this.updateHeaderSortState();
        },

        layout : function(){
            if(!this.mainBody){
                return;
            }
            var g = this.grid;
            var c = g.getGridEl();
            var csize = c.getSize(true);
            var vw = csize.width;
            if(!g.hideHeaders && (vw < 20 || csize.height < 20)){
                return;
            }
            this.syncHeaderHeight();
            if(g.autoHeight){
                this.scroller.dom.style.overflow = 'visible';
                this.lockedScroller.dom.style.overflow = 'visible';
                if(Ext.isWebKit){
                    this.scroller.dom.style.position = 'static';
                    this.lockedScroller.dom.style.position = 'static';
                }
            }else{
                this.el.setSize(csize.width, csize.height);
                var hdHeight = this.mainHd.getHeight();
                var vh = csize.height - (hdHeight);
            }
            this.updateLockedWidth();
            if(this.forceFit){
                if(this.lastViewWidth != vw){
                    this.fitColumns(false, false);
                    this.lastViewWidth = vw;
                }
            }else {
                this.autoExpand();
                this.syncHeaderScroll();
            }
            this.onLayout(vw, vh);
        },

        getOffsetWidth : function() {
            return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth() + this.getScrollOffset()) + 'px';
        },

        renderHeaders : function(){
            var cm = this.cm,
                ts = this.templates,
                ct = ts.hcell,
                cb = [], lcb = [],
                p = {},
                len = cm.getColumnCount(),
                last = len - 1;
            for(var i = 0; i < len; i++){
                p.id = cm.getColumnId(i);
                p.value = cm.getColumnHeader(i) || '';
                p.style = this.getColumnStyle(i, true);
                p.tooltip = this.getColumnTooltip(i);
                p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
                    (cm.config[i].headerCls ? ' ' + cm.config[i].headerCls : '');
                if(cm.config[i].align == 'right'){
                    p.istyle = 'padding-right:16px';
                } else {
                    delete p.istyle;
                }
                if(cm.isLocked(i)){
                    lcb[lcb.length] = ct.apply(p);
                }else{
                    cb[cb.length] = ct.apply(p);
                }
            }
            return [ts.header.apply({cells: cb.join(''), tstyle:'width:'+this.getTotalWidth()+';'}),
                    ts.header.apply({cells: lcb.join(''), tstyle:'width:'+this.getLockedWidth()+';'})];
        },

        updateHeaders : function(){
            var hd = this.renderHeaders();
            this.innerHd.firstChild.innerHTML = hd[0];
            this.innerHd.firstChild.style.width = this.getOffsetWidth();
            this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
            this.lockedInnerHd.firstChild.innerHTML = hd[1];
            var lw = this.getLockedWidth();
            this.lockedInnerHd.firstChild.style.width = lw;
            this.lockedInnerHd.firstChild.firstChild.style.width = lw;
        },

        getResolvedXY : function(resolved){
            if(!resolved){
                return null;
            }
            var c = resolved.cell, r = resolved.row;
            return c ? Ext.fly(c).getXY() : [this.scroller.getX(), Ext.fly(r).getY()];
        },

        syncFocusEl : function(row, col, hscroll){
            Ext.ux.grid.LockingGridView.superclass.syncFocusEl.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
        },

        ensureVisible : function(row, col, hscroll){
            return Ext.ux.grid.LockingGridView.superclass.ensureVisible.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
        },

        insertRows : function(dm, firstRow, lastRow, isUpdate){
            var last = dm.getCount() - 1;
            if(!isUpdate && firstRow === 0 && lastRow >= last){
                this.refresh();
            }else{
                if(!isUpdate){
                    this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
                }
                var html = this.renderRows(firstRow, lastRow),
                    before = this.getRow(firstRow);
                if(before){
                    if(firstRow === 0){
                        this.removeRowClass(0, this.firstRowCls);
                    }
                    Ext.DomHelper.insertHtml('beforeBegin', before, html[0]);
                    before = this.getLockedRow(firstRow);
                    Ext.DomHelper.insertHtml('beforeBegin', before, html[1]);
                }else{
                    this.removeRowClass(last - 1, this.lastRowCls);
                    Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html[0]);
                    Ext.DomHelper.insertHtml('beforeEnd', this.lockedBody.dom, html[1]);
                }
                if(!isUpdate){
                    this.fireEvent('rowsinserted', this, firstRow, lastRow);
                    this.processRows(firstRow);
                }else if(firstRow === 0 || firstRow >= last){
                    this.addRowClass(firstRow, firstRow === 0 ? this.firstRowCls : this.lastRowCls);
                }
            }
            this.syncFocusEl(firstRow);
        },

        getColumnStyle : function(col, isHeader){
            var style = !isHeader ? this.cm.config[col].cellStyle || this.cm.config[col].css || '' : this.cm.config[col].headerStyle || '';
            style += 'width:'+this.getColumnWidth(col)+';';
            if(this.cm.isHidden(col)){
                style += 'display:none;';
            }
            var align = this.cm.config[col].align;
            if(align){
                style += 'text-align:'+align+';';
            }
            return style;
        },

        getLockedWidth : function() {
            return this.cm.getTotalLockedWidth() + 'px';
        },

        getTotalWidth : function() {
            return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth()) + 'px';
        },

        getColumnData : function(){
            var cs = [], cm = this.cm, colCount = cm.getColumnCount();
            for(var i = 0; i < colCount; i++){
                var name = cm.getDataIndex(i);
                cs[i] = {
                    name : (!Ext.isDefined(name) ? this.ds.fields.get(i).name : name),
                    renderer : cm.getRenderer(i),
                    id : cm.getColumnId(i),
                    style : this.getColumnStyle(i),
                    locked : cm.isLocked(i)
                };
            }
            return cs;
        },

        renderBody : function(){
            var markup = this.renderRows() || [' ', ' '];
            return [this.templates.body.apply({rows: markup[0]}), this.templates.body.apply({rows: markup[1]})];
        },

        refreshRow: function(record){
            var store = this.ds,
                colCount = this.cm.getColumnCount(),
                columns = this.getColumnData(),
                last = colCount - 1,
                cls = ['x-grid3-row'],
                rowParams = {
                    tstyle: String.format("width: {0};", this.getTotalWidth())
                },
                lockedRowParams = {
                    tstyle: String.format("width: {0};", this.getLockedWidth())
                },
                colBuffer = [],
                lockedColBuffer = [],
                cellTpl = this.templates.cell,
                rowIndex,
                row,
                lockedRow,
                column,
                meta,
                css,
                i;

            if (Ext.isNumber(record)) {
                rowIndex = record;
                record = store.getAt(rowIndex);
            } else {
                rowIndex = store.indexOf(record);
            }

            if (!record || rowIndex < 0) {
                return;
            }

            for (i = 0; i < colCount; i++) {
                column = columns[i];

                if (i == 0) {
                    css = 'x-grid3-cell-first';
                } else {
                    css = (i == last) ? 'x-grid3-cell-last ' : '';
                }

                meta = {
                    id: column.id,
                    style: column.style,
                    css: css,
                    attr: "",
                    cellAttr: ""
                };

                meta.value = column.renderer.call(column.scope, record.data[column.name], meta, record, rowIndex, i, store);

                if (Ext.isEmpty(meta.value)) {
                    meta.value = ' ';
                }

                if (this.markDirty && record.dirty && typeof record.modified[column.name] != 'undefined') {
                    meta.css += ' x-grid3-dirty-cell';
                }

                if (column.locked) {
                    lockedColBuffer[i] = cellTpl.apply(meta);
                } else {
                    colBuffer[i] = cellTpl.apply(meta);
                }
            }

            row = this.getRow(rowIndex);
            row.className = '';
            lockedRow = this.getLockedRow(rowIndex);
            lockedRow.className = '';

            if (this.grid.stripeRows && ((rowIndex + 1) % 2 === 0)) {
                cls.push('x-grid3-row-alt');
            }

            if (this.getRowClass) {
                rowParams.cols = colCount;
                cls.push(this.getRowClass(record, rowIndex, rowParams, store));
            }

            // Unlocked rows
            this.fly(row).addClass(cls).setStyle(rowParams.tstyle);
            rowParams.cells = colBuffer.join("");
            row.innerHTML = this.templates.rowInner.apply(rowParams);

            // Locked rows
            this.fly(lockedRow).addClass(cls).setStyle(lockedRowParams.tstyle);
            lockedRowParams.cells = lockedColBuffer.join("");
            lockedRow.innerHTML = this.templates.rowInner.apply(lockedRowParams);
            lockedRow.rowIndex = rowIndex;
            this.syncRowHeights(row, lockedRow);
            this.fireEvent('rowupdated', this, rowIndex, record);
        },

        refresh : function(headersToo){
            this.fireEvent('beforerefresh', this);
            this.grid.stopEditing(true);
            var result = this.renderBody();
            this.mainBody.update(result[0]).setWidth(this.getTotalWidth());
            this.lockedBody.update(result[1]).setWidth(this.getLockedWidth());
            if(headersToo === true){
                this.updateHeaders();
                this.updateHeaderSortState();
            }
            this.processRows(0, true);
            this.layout();
            this.applyEmptyText();
            this.fireEvent('refresh', this);
        },

        onDenyColumnLock : function(){

        },

        initData : function(ds, cm){
            if(this.cm){
                this.cm.un('columnlockchange', this.onColumnLock, this);
            }
            Ext.ux.grid.LockingGridView.superclass.initData.call(this, ds, cm);
            if(this.cm){
                this.cm.on('columnlockchange', this.onColumnLock, this);
            }
        },

        onColumnLock : function(){
            this.refresh(true);
        },

        handleHdMenuClick : function(item){
            var index = this.hdCtxIndex,
                cm = this.cm,
                id = item.getItemId(),
                llen = cm.getLockedCount();
            switch(id){
                case 'lock':
                    if(cm.getColumnCount(true) <= llen + 1){
                        this.onDenyColumnLock();
                        return undefined;
                    }
                    cm.setLocked(index, true);
                    if(llen != index){
                        cm.moveColumn(index, llen);
                        this.grid.fireEvent('columnmove', index, llen);
                    }
                break;
                case 'unlock':
                    if(llen - 1 != index){
                        cm.setLocked(index, false, true);
                        cm.moveColumn(index, llen - 1);
                        this.grid.fireEvent('columnmove', index, llen - 1);
                    }else{
                        cm.setLocked(index, false);
                    }
                break;
                default:
                    return Ext.ux.grid.LockingGridView.superclass.handleHdMenuClick.call(this, item);
            }
            return true;
        },

        handleHdDown : function(e, t){
            Ext.ux.grid.LockingGridView.superclass.handleHdDown.call(this, e, t);
            if(this.grid.enableColLock !== false){
                if(Ext.fly(t).hasClass('x-grid3-hd-btn')){
                    var hd = this.findHeaderCell(t),
                        index = this.getCellIndex(hd),
                        ms = this.hmenu.items, cm = this.cm;
                    ms.get('lock').setDisabled(cm.isLocked(index));
                    ms.get('unlock').setDisabled(!cm.isLocked(index));
                }
            }
        },

        syncHeaderHeight: function(){
            var hrow = Ext.fly(this.innerHd).child('tr', true),
                lhrow = Ext.fly(this.lockedInnerHd).child('tr', true);

            hrow.style.height = 'auto';
            lhrow.style.height = 'auto';
            var hd = hrow.offsetHeight,
                lhd = lhrow.offsetHeight,
                height = Math.max(lhd, hd) + 'px';

            hrow.style.height = height;
            lhrow.style.height = height;

        },

        updateLockedWidth: function(){
            var lw = this.cm.getTotalLockedWidth(),
                tw = this.cm.getTotalWidth() - lw,
                csize = this.grid.getGridEl().getSize(true),
                lp = Ext.isBorderBox ? 0 : this.lockedBorderWidth,
                rp = Ext.isBorderBox ? 0 : this.rowBorderWidth,
                vw = (csize.width - lw - lp - rp) + 'px',
                so = this.getScrollOffset();
            if(!this.grid.autoHeight){
                var vh = (csize.height - this.mainHd.getHeight()) + 'px';
                this.lockedScroller.dom.style.height = vh;
                this.scroller.dom.style.height = vh;
            }
            this.lockedWrap.dom.style.width = (lw + rp) + 'px';
            this.scroller.dom.style.width = vw;
            this.mainWrap.dom.style.left = (lw + lp + rp) + 'px';
            if(this.innerHd){
                this.lockedInnerHd.firstChild.style.width = lw + 'px';
                this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';
                this.innerHd.style.width = vw;
                this.innerHd.firstChild.style.width = (tw + rp + so) + 'px';
                this.innerHd.firstChild.firstChild.style.width = tw + 'px';
            }
            if(this.mainBody){
                this.lockedBody.dom.style.width = (lw + rp) + 'px';
                this.mainBody.dom.style.width = (tw + rp) + 'px';
            }
        }
    });

    Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {
        /**
         * Returns true if the given column index is currently locked
         * @param {Number} colIndex The column index
         * @return {Boolean} True if the column is locked
         */
        isLocked : function(colIndex){
            return this.config[colIndex].locked === true;
        },

        /**
         * Locks or unlocks a given column
         * @param {Number} colIndex The column index
         * @param {Boolean} value True to lock, false to unlock
         * @param {Boolean} suppressEvent Pass false to cause the columnlockchange event not to fire
         */
        setLocked : function(colIndex, value, suppressEvent){
            if (this.isLocked(colIndex) == value) {
                return;
            }
            this.config[colIndex].locked = value;
            if (!suppressEvent) {
                this.fireEvent('columnlockchange', this, colIndex, value);
            }
        },

        /**
         * Returns the total width of all locked columns
         * @return {Number} The width of all locked columns
         */
        getTotalLockedWidth : function(){
            var totalWidth = 0;
            for (var i = 0, len = this.config.length; i < len; i++) {
                if (this.isLocked(i) && !this.isHidden(i)) {
                    totalWidth += this.getColumnWidth(i);
                }
            }

            return totalWidth;
        },

        /**
         * Returns the total number of locked columns
         * @return {Number} The number of locked columns
         */
        getLockedCount : function() {
            var len = this.config.length;

            for (var i = 0; i < len; i++) {
                if (!this.isLocked(i)) {
                    return i;
                }
            }

            //if we get to this point all of the columns are locked so we return the total
            return len;
        },

        /**
         * Moves a column from one position to another
         * @param {Number} oldIndex The current column index
         * @param {Number} newIndex The destination column index
         */
        moveColumn : function(oldIndex, newIndex){
            var oldLocked = this.isLocked(oldIndex),
                newLocked = this.isLocked(newIndex);

            if (oldIndex < newIndex && oldLocked && !newLocked) {
                this.setLocked(oldIndex, false, true);
            } else if (oldIndex > newIndex && !oldLocked && newLocked) {
                this.setLocked(oldIndex, true, true);
            }

            Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments);
        }
    });Ext.ns('Ext.ux.form');

    /**
     * @class Ext.ux.form.MultiSelect
     * @extends Ext.form.Field
     * A control that allows selection and form submission of multiple list items.
     *
     *  @history
     *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
     *    2008-06-19 bpm Docs and demo code clean up
     *
     * @constructor
     * Create a new MultiSelect
     * @param {Object} config Configuration options
     * @xtype multiselect
     */
    Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field,  {
        /**
         * @cfg {String} legend Wraps the object with a fieldset and specified legend.
         */
        /**
         * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.
         */
        /**
         * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
         */
        /**
         * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
         */
        /**
         * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
         */
        ddReorder:false,
        /**
         * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a
         * toolbar config, or an array of buttons/button configs to be added to the toolbar.
         */
        /**
         * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled
         * (use for lists which are sorted, defaults to false).
         */
        appendOnly:false,
        /**
         * @cfg {Number} width Width in pixels of the control (defaults to 100).
         */
        width:100,
        /**
         * @cfg {Number} height Height in pixels of the control (defaults to 100).
         */
        height:100,
        /**
         * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).
         */
        displayField:0,
        /**
         * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).
         */
        valueField:1,
        /**
         * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no
         * selection (defaults to true).
         */
        allowBlank:true,
        /**
         * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).
         */
        minSelections:0,
        /**
         * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).
         */
        maxSelections:Number.MAX_VALUE,
        /**
         * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as
         * {@link Ext.form.TextField#blankText}.
         */
        blankText:Ext.form.TextField.prototype.blankText,
        /**
         * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}
         * item(s) required').  The {0} token will be replaced by the value of {@link #minSelections}.
         */
        minSelectionsText:'Minimum {0} item(s) required',
        /**
         * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}
         * item(s) allowed').  The {0} token will be replaced by the value of {@link #maxSelections}.
         */
        maxSelectionsText:'Maximum {0} item(s) allowed',
        /**
         * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values
         * (defaults to ',').
         */
        delimiter:',',
        /**
         * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to undefined).
         * Acceptable values for this property are:
         *
         * any {@link Ext.data.Store Store} subclass
         * an Array : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.
         *
         * 1-dimensional array : (e.g., ['Foo','Bar'])
         * A 1-dimensional array will automatically be expanded (each array item will be the combo
         * {@link #valueField value} and {@link #displayField text})
         * 2-dimensional array : (e.g., [['f','Foo'],['b','Bar']])
         * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
         * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
         *
         */

        // private
        defaultAutoCreate : {tag: "div"},

        // private
        initComponent: function(){
            Ext.ux.form.MultiSelect.superclass.initComponent.call(this);

            if(Ext.isArray(this.store)){
                if (Ext.isArray(this.store[0])){
                    this.store = new Ext.data.ArrayStore({
                        fields: ['value','text'],
                        data: this.store
                    });
                    this.valueField = 'value';
                }else{
                    this.store = new Ext.data.ArrayStore({
                        fields: ['text'],
                        data: this.store,
                        expandData: true
                    });
                    this.valueField = 'text';
                }
                this.displayField = 'text';
            } else {
                this.store = Ext.StoreMgr.lookup(this.store);
            }

            this.addEvents({
                'dblclick' : true,
                'click' : true,
                'change' : true,
                'drop' : true
            });
        },

        // private
        onRender: function(ct, position){
            Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);

            var fs = this.fs = new Ext.form.FieldSet({
                renderTo: this.el,
                title: this.legend,
                height: this.height,
                width: this.width,
                style: "padding:0;",
                tbar: this.tbar
            });
            fs.body.addClass('ux-mselect');

            this.view = new Ext.ListView({
                multiSelect: true,
                store: this.store,
                columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
                hideHeaders: true
            });

            fs.add(this.view);

            this.view.on('click', this.onViewClick, this);
            this.view.on('beforeclick', this.onViewBeforeClick, this);
            this.view.on('dblclick', this.onViewDblClick, this);

            this.hiddenName = this.name || Ext.id();
            var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
            this.hiddenField = this.el.createChild(hiddenTag);
            this.hiddenField.dom.disabled = this.hiddenName != this.name;
            fs.doLayout();
        },

        // private
        afterRender: function(){
            Ext.ux.form.MultiSelect.superclass.afterRender.call(this);

            if (this.ddReorder && !this.dragGroup && !this.dropGroup){
                this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();
            }

            if (this.draggable || this.dragGroup){
                this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {
                    ddGroup: this.dragGroup
                });
            }
            if (this.droppable || this.dropGroup){
                this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {
                    ddGroup: this.dropGroup
                });
            }
        },

        // private
        onViewClick: function(vw, index, node, e) {
            this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
            this.hiddenField.dom.value = this.getValue();
            this.fireEvent('click', this, e);
            this.validate();
        },

        // private
        onViewBeforeClick: function(vw, index, node, e) {
            if (this.disabled || this.readOnly) {
                return false;
            }
        },

        // private
        onViewDblClick : function(vw, index, node, e) {
            return this.fireEvent('dblclick', vw, index, node, e);
        },

        /**
         * Returns an array of data values for the selected items in the list. The values will be separated
         * by {@link #delimiter}.
         * @return {Array} value An array of string data values
         */
        getValue: function(valueField){
            var returnArray = [];
            var selectionsArray = this.view.getSelectedIndexes();
            if (selectionsArray.length == 0) {return '';}
            for (var i=0; i/**
         * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.
         * @param {String/Array} values The values to set
         */
        setValue: function(values) {
            var index;
            var selections = [];
            this.view.clearSelections();
            this.hiddenField.dom.value = '';

            if (!values || (values == '')) { return; }

            if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
            for (var i=0; i this.maxSelections) {
                this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
                return false;
            }
            return true;
        },

        // inherit docs
        disable: function(){
            this.disabled = true;
            this.hiddenField.dom.disabled = true;
            this.fs.disable();
        },

        // inherit docs
        enable: function(){
            this.disabled = false;
            this.hiddenField.dom.disabled = false;
            this.fs.enable();
        },

        // inherit docs
        destroy: function(){
            Ext.destroy(this.fs, this.dragZone, this.dropZone);
            Ext.ux.form.MultiSelect.superclass.destroy.call(this);
        }
    });

    Ext.reg('multiselect', Ext.ux.form.MultiSelect);

    //backwards compat
    Ext.ux.Multiselect = Ext.ux.form.MultiSelect;

    Ext.ux.form.MultiSelect.DragZone = function(ms, config){
        this.ms = ms;
        this.view = ms.view;
        var ddGroup = config.ddGroup || 'MultiselectDD';
        var dd;
        if (Ext.isArray(ddGroup)){
            dd = ddGroup.shift();
        } else {
            dd = ddGroup;
            ddGroup = null;
        }
        Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
        this.setDraggable(ddGroup);
    };

    Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
        onInitDrag : function(x, y){
            var el = Ext.get(this.dragData.ddel.cloneNode(true));
            this.proxy.update(el.dom);
            el.setWidth(el.child('em').getWidth());
            this.onStartDrag(x, y);
            return true;
        },

        // private
        collectSelection: function(data) {
            data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
            var i = 0;
            this.view.store.each(function(rec){
                if (this.view.isSelected(i)) {
                    var n = this.view.getNode(i);
                    var dragNode = n.cloneNode(true);
                    dragNode.id = Ext.id();
                    data.ddel.appendChild(dragNode);
                    data.records.push(this.view.store.getAt(i));
                    data.viewNodes.push(n);
                }
                i++;
            }, this);
        },

        // override
        onEndDrag: function(data, e) {
            var d = Ext.get(this.dragData.ddel);
            if (d && d.hasClass("multi-proxy")) {
                d.remove();
            }
        },

        // override
        getDragData: function(e){
            var target = this.view.findItemFromChild(e.getTarget());
            if(target) {
                if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
                    this.view.select(target);
                    this.ms.setValue(this.ms.getValue());
                }
                if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
                var dragData = {
                    sourceView: this.view,
                    viewNodes: [],
                    records: []
                };
                if (this.view.getSelectionCount() == 1) {
                    var i = this.view.getSelectedIndexes()[0];
                    var n = this.view.getNode(i);
                    dragData.viewNodes.push(dragData.ddel = n);
                    dragData.records.push(this.view.store.getAt(i));
                    dragData.repairXY = Ext.fly(n).getXY();
                } else {
                    dragData.ddel = document.createElement('div');
                    dragData.ddel.className = 'multi-proxy';
                    this.collectSelection(dragData);
                }
                return dragData;
            }
            return false;
        },

        // override the default repairXY.
        getRepairXY : function(e){
            return this.dragData.repairXY;
        },

        // private
        setDraggable: function(ddGroup){
            if (!ddGroup) return;
            if (Ext.isArray(ddGroup)) {
                Ext.each(ddGroup, this.setDraggable, this);
                return;
            }
            this.addToGroup(ddGroup);
        }
    });

    Ext.ux.form.MultiSelect.DropZone = function(ms, config){
        this.ms = ms;
        this.view = ms.view;
        var ddGroup = config.ddGroup || 'MultiselectDD';
        var dd;
        if (Ext.isArray(ddGroup)){
            dd = ddGroup.shift();
        } else {
            dd = ddGroup;
            ddGroup = null;
        }
        Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
        this.setDroppable(ddGroup);
    };

    Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {
        /**
         * Part of the Ext.dd.DropZone interface. If no target node is found, the
         * whole Element becomes the target, and this causes the drop gesture to append.
         */
        getTargetFromEvent : function(e) {
            var target = e.getTarget();
            return target;
        },

        // private
        getDropPoint : function(e, n, dd){
            if (n == this.ms.fs.body.dom) { return "below"; }
            var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
            var c = t + (b - t) / 2;
            var y = Ext.lib.Event.getPageY(e);
            if(y <= c) {
                return "above";
            }else{
                return "below";
            }
        },

        // private
        isValidDropPoint: function(pt, n, data) {
            if (!data.viewNodes || (data.viewNodes.length != 1)) {
                return true;
            }
            var d = data.viewNodes[0];
            if (d == n) {
                return false;
            }
            if ((pt == "below") && (n.nextSibling == d)) {
                return false;
            }
            if ((pt == "above") && (n.previousSibling == d)) {
                return false;
            }
            return true;
        },

        // override
        onNodeEnter : function(n, dd, e, data){
            return false;
        },

        // override
        onNodeOver : function(n, dd, e, data){
            var dragElClass = this.dropNotAllowed;
            var pt = this.getDropPoint(e, n, dd);
            if (this.isValidDropPoint(pt, n, data)) {
                if (this.ms.appendOnly) {
                    return "x-tree-drop-ok-below";
                }

                // set the insert point style on the target node
                if (pt) {
                    var targetElClass;
                    if (pt == "above"){
                        dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
                        targetElClass = "x-view-drag-insert-above";
                    } else {
                        dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
                        targetElClass = "x-view-drag-insert-below";
                    }
                    if (this.lastInsertClass != targetElClass){
                        Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
                        this.lastInsertClass = targetElClass;
                    }
                }
            }
            return dragElClass;
        },

        // private
        onNodeOut : function(n, dd, e, data){
            this.removeDropIndicators(n);
        },

        // private
        onNodeDrop : function(n, dd, e, data){
            if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
                return false;
            }
            var pt = this.getDropPoint(e, n, dd);
            if (n != this.ms.fs.body.dom)
                n = this.view.findItemFromChild(n);

            if(this.ms.appendOnly) {
                insertAt = this.view.store.getCount();
            } else {
                insertAt = n == this.ms.fs.body.dom ? this.view.store.getCount() - 1 : this.view.indexOf(n);
                if (pt == "below") {
                    insertAt++;
                }
            }

            var dir = false;

            // Validate if dragging within the same MultiSelect
            if (data.sourceView == this.view) {
                // If the first element to be inserted below is the target node, remove it
                if (pt == "below") {
                    if (data.viewNodes[0] == n) {
                        data.viewNodes.shift();
                    }
                } else {  // If the last element to be inserted above is the target node, remove it
                    if (data.viewNodes[data.viewNodes.length - 1] == n) {
                        data.viewNodes.pop();
                    }
                }

                // Nothing to drop...
                if (!data.viewNodes.length) {
                    return false;
                }

                // If we are moving DOWN, then because a store.remove() takes place first,
                // the insertAt must be decremented.
                if (insertAt > this.view.store.indexOf(data.records[0])) {
                    dir = 'down';
                    insertAt--;
                }
            }

            for (var i = 0; i < data.records.length; i++) {
                var r = data.records[i];
                if (data.sourceView) {
                    data.sourceView.store.remove(r);
                }
                this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
                var si = this.view.store.sortInfo;
                if(si){
                    this.view.store.sort(si.field, si.direction);
                }
            }
            return true;
        },

        // private
        removeDropIndicators : function(n){
            if(n){
                Ext.fly(n).removeClass([
                    "x-view-drag-insert-above",
                    "x-view-drag-insert-left",
                    "x-view-drag-insert-right",
                    "x-view-drag-insert-below"]);
                this.lastInsertClass = "_noclass";
            }
        },

        // private
        setDroppable: function(ddGroup){
            if (!ddGroup) return;
            if (Ext.isArray(ddGroup)) {
                Ext.each(ddGroup, this.setDroppable, this);
                return;
            }
            this.addToGroup(ddGroup);
        }
    });

    /* Fix for Opera, which does not seem to include the map function on Array's */
    if (!Array.prototype.map) {
        Array.prototype.map = function(fun){
            var len = this.length;
            if (typeof fun != 'function') {
                throw new TypeError();
            }
            var res = new Array(len);
            var thisp = arguments[1];
            for (var i = 0; i < len; i++) {
                if (i in this) {
                    res[i] = fun.call(thisp, this[i], i, this);
                }
            }
            return res;
        };
    }

    Ext.ns('Ext.ux.data');

    /**
     * @class Ext.ux.data.PagingMemoryProxy
     * @extends Ext.data.MemoryProxy
     * Paging Memory Proxy, allows to use paging grid with in memory dataset
     */
    Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
        constructor : function(data){
            Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
            this.data = data;
        },
        doRequest : function(action, rs, params, reader, callback, scope, options){
            params = params ||
            {};
            var result;
            try {
                result = reader.readRecords(this.data);
            }
            catch (e) {
                this.fireEvent('loadexception', this, options, null, e);
                callback.call(scope, null, options, false);
                return;
            }

            // filtering
            if (params.filter !== undefined) {
                result.records = result.records.filter(function(el){
                    if (typeof(el) == 'object') {
                        var att = params.filterCol || 0;
                        return String(el.data[att]).match(params.filter) ? true : false;
                    }
                    else {
                        return String(el).match(params.filter) ? true : false;
                    }
                });
                result.totalRecords = result.records.length;
            }

            // sorting
            if (params.sort !== undefined) {
                // use integer as params.sort to specify column, since arrays are not named
                // params.sort=0; would also match a array without columns
                var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
                var fn = function(v1, v2){
                    return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
                };
                result.records.sort(function(a, b){
                    var v = 0;
                    if (typeof(a) == 'object') {
                        v = fn(a.data[params.sort], b.data[params.sort]) * dir;
                    }
                    else {
                        v = fn(a, b) * dir;
                    }
                    if (v == 0) {
                        v = (a.index < b.index ? -1 : 1);
                    }
                    return v;
                });
            }
            // paging (use undefined cause start can also be 0 (thus false))
            if (params.start !== undefined && params.limit !== undefined) {
                result.records = result.records.slice(params.start, params.start + params.limit);
            }
            callback.call(scope, result, options, true);
        }
    });

    //backwards compat.
    Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;
    Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {
        minHeight: 0,
        maxHeight:10000000,

        constructor: function(config){
            Ext.apply(this, config);
            this.events = {};
            Ext.ux.PanelResizer.superclass.constructor.call(this, config);
        },

        init : function(p){
            this.panel = p;

            if(this.panel.elements.indexOf('footer')==-1){
                p.elements += ',footer';
            }
            p.on('render', this.onRender, this);
        },

        onRender : function(p){
            this.handle = p.footer.createChild({cls:'x-panel-resize'});

            this.tracker = new Ext.dd.DragTracker({
                onStart: this.onDragStart.createDelegate(this),
                onDrag: this.onDrag.createDelegate(this),
                onEnd: this.onDragEnd.createDelegate(this),
                tolerance: 3,
                autoStart: 300
            });
            this.tracker.initEl(this.handle);
            p.on('beforedestroy', this.tracker.destroy, this.tracker);
        },

    	// private
        onDragStart: function(e){
            this.dragging = true;
            this.startHeight = this.panel.el.getHeight();
            this.fireEvent('dragstart', this, e);
        },

    	// private
        onDrag: function(e){
            this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));
            this.fireEvent('drag', this, e);
        },

    	// private
        onDragEnd: function(e){
            this.dragging = false;
            this.fireEvent('dragend', this, e);
        }
    });
    Ext.preg('panelresizer', Ext.ux.PanelResizer);Ext.ux.Portal = Ext.extend(Ext.Panel, {
        layout : 'column',
        autoScroll : true,
        cls : 'x-portal',
        defaultType : 'portalcolumn',

        initComponent : function(){
            Ext.ux.Portal.superclass.initComponent.call(this);
            this.addEvents({
                validatedrop:true,
                beforedragover:true,
                dragover:true,
                beforedrop:true,
                drop:true
            });
        },

        initEvents : function(){
            Ext.ux.Portal.superclass.initEvents.call(this);
            this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
        },

        beforeDestroy : function() {
            if(this.dd){
                this.dd.unreg();
            }
            Ext.ux.Portal.superclass.beforeDestroy.call(this);
        }
    });

    Ext.reg('portal', Ext.ux.Portal);

    Ext.ux.Portal.DropZone = Ext.extend(Ext.dd.DropTarget, {

        constructor : function(portal, cfg){
            this.portal = portal;
            Ext.dd.ScrollManager.register(portal.body);
            Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
            portal.body.ddScrollConfig = this.ddScrollConfig;
        },

        ddScrollConfig : {
            vthresh: 50,
            hthresh: -1,
            animate: true,
            increment: 200
        },

        createEvent : function(dd, e, data, col, c, pos){
            return {
                portal: this.portal,
                panel: data.panel,
                columnIndex: col,
                column: c,
                position: pos,
                data: data,
                source: dd,
                rawEvent: e,
                status: this.dropAllowed
            };
        },

        notifyOver : function(dd, e, data){
            var xy = e.getXY(), portal = this.portal, px = dd.proxy;

            // case column widths
            if(!this.grid){
                this.grid = this.getGrid();
            }

            // handle case scroll where scrollbars appear during drag
            var cw = portal.body.dom.clientWidth;
            if(!this.lastCW){
                this.lastCW = cw;
            }else if(this.lastCW != cw){
                this.lastCW = cw;
                portal.doLayout();
                this.grid = this.getGrid();
            }

            // determine column
            var col = 0, xs = this.grid.columnX, cmatch = false;
            for(var len = xs.length; col < len; col++){
                if(xy[0] < (xs[col].x + xs[col].w)){
                    cmatch = true;
                    break;
                }
            }
            // no match, fix last index
            if(!cmatch){
                col--;
            }

            // find insert position
            var p, match = false, pos = 0,
                c = portal.items.itemAt(col),
                items = c.items.items, overSelf = false;

            for(var len = items.length; pos < len; pos++){
                p = items[pos];
                var h = p.el.getHeight();
                if(h === 0){
                    overSelf = true;
                }
                else if((p.el.getY()+(h/2)) > xy[1]){
                    match = true;
                    break;
                }
            }

            pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);
            var overEvent = this.createEvent(dd, e, data, col, c, pos);

            if(portal.fireEvent('validatedrop', overEvent) !== false &&
               portal.fireEvent('beforedragover', overEvent) !== false){

                // make sure proxy width is fluid
                px.getProxy().setWidth('auto');

                if(p){
                    px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
                }else{
                    px.moveProxy(c.el.dom, null);
                }

                this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};
                this.scrollPos = portal.body.getScroll();

                portal.fireEvent('dragover', overEvent);

                return overEvent.status;
            }else{
                return overEvent.status;
            }

        },

        notifyOut : function(){
            delete this.grid;
        },

        notifyDrop : function(dd, e, data){
            delete this.grid;
            if(!this.lastPos){
                return;
            }
            var c = this.lastPos.c,
                col = this.lastPos.col,
                pos = this.lastPos.p,
                panel = dd.panel,
                dropEvent = this.createEvent(dd, e, data, col, c,
                    pos !== false ? pos : c.items.getCount());

            if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
               this.portal.fireEvent('beforedrop', dropEvent) !== false){

                dd.proxy.getProxy().remove();
                panel.el.dom.parentNode.removeChild(dd.panel.el.dom);

                if(pos !== false){
                    c.insert(pos, panel);
                }else{
                    c.add(panel);
                }

                c.doLayout();

                this.portal.fireEvent('drop', dropEvent);

                // scroll position is lost on drop, fix it
                var st = this.scrollPos.top;
                if(st){
                    var d = this.portal.body.dom;
                    setTimeout(function(){
                        d.scrollTop = st;
                    }, 10);
                }

            }
            delete this.lastPos;
        },

        // internal cache of body and column coords
        getGrid : function(){
            var box = this.portal.bwrap.getBox();
            box.columnX = [];
            this.portal.items.each(function(c){
                 box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
            });
            return box;
        },

        // unregister the dropzone from ScrollManager
        unreg: function() {
            Ext.dd.ScrollManager.unregister(this.portal.body);
            Ext.ux.Portal.DropZone.superclass.unreg.call(this);
        }
    });
    Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
        layout : 'anchor',
        //autoEl : 'div',//already defined by Ext.Component
        defaultType : 'portlet',
        cls : 'x-portal-column'
    });

    Ext.reg('portalcolumn', Ext.ux.PortalColumn);
    Ext.ux.Portlet = Ext.extend(Ext.Panel, {
        anchor : '100%',
        frame : true,
        collapsible : true,
        draggable : true,
        cls : 'x-portlet'
    });

    Ext.reg('portlet', Ext.ux.Portlet);
    /**
    * @class Ext.ux.ProgressBarPager
    * @extends Object
    * Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
    *
    * @ptype progressbarpager
    * @constructor
    * Create a new ItemSelector
    * @param {Object} config Configuration options
    * @xtype itemselector
    */
    Ext.ux.ProgressBarPager  = Ext.extend(Object, {
    	/**
     	* @cfg {Integer} progBarWidth
     	* The default progress bar width.  Default is 225.
    	*/
    	progBarWidth   : 225,
    	/**
     	* @cfg {String} defaultText
    	* The text to display while the store is loading.  Default is 'Loading...'
     	*/
    	defaultText    : 'Loading...',
        	/**
     	* @cfg {Object} defaultAnimCfg
     	* A {@link Ext.Fx Ext.Fx} configuration object.  Default is  { duration : 1, easing : 'bounceOut' }.
     	*/
    	defaultAnimCfg : {
    		duration   : 1,
    		easing     : 'bounceOut'
    	},
    	constructor : function(config) {
    		if (config) {
    			Ext.apply(this, config);
    		}
    	},
    	//public
    	init : function (parent) {

    		if(parent.displayInfo){
    			this.parent = parent;
    			var ind  = parent.items.indexOf(parent.displayItem);
    			parent.remove(parent.displayItem, true);
    			this.progressBar = new Ext.ProgressBar({
    				text    : this.defaultText,
    				width   : this.progBarWidth,
    				animate :  this.defaultAnimCfg
    			});

    			parent.displayItem = this.progressBar;

    			parent.add(parent.displayItem);
    			parent.doLayout();
    			Ext.apply(parent, this.parentOverrides);

    			this.progressBar.on('render', function(pb) {
                    pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
                }, this, {single: true});

    		}

    	},
    	// private
    	// This method handles the click for the progress bar
    	handleProgressBarClick : function(e){
    		var parent = this.parent,
    		    displayItem = parent.displayItem,
    		    box = this.progressBar.getBox(),
    		    xy = e.getXY(),
    		    position = xy[0]-box.x,
    		    pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
    		    newpage = Math.ceil(position/(displayItem.width/pages));

    		parent.changePage(newpage);
    	},

    	// private, overriddes
    	parentOverrides  : {
    		// private
    		// This method updates the information via the progress bar.
    		updateInfo : function(){
    			if(this.displayItem){
    				var count = this.store.getCount(),
    				    pgData = this.getPageData(),
    				    pageNum = this.readPage(pgData),
    				    msg = count == 0 ?
    					this.emptyMsg :
    					String.format(
    						this.displayMsg,
    						this.cursor+1, this.cursor+count, this.store.getTotalCount()
    					);

    				pageNum = pgData.activePage; ;

    				var pct	= pageNum / pgData.pages;

    				this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
    			}
    		}
    	}
    });
    Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);

    Ext.ns('Ext.ux.grid');

    /**
     * @class Ext.ux.grid.RowEditor
     * @extends Ext.Panel
     * Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid.
     * A validation mode may be enabled which uses AnchorTips to notify the user of all
     * validation errors at once.
     *
     * @ptype roweditor
     */
    Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
        floating: true,
        shadow: false,
        layout: 'hbox',
        cls: 'x-small-editor',
        buttonAlign: 'center',
        baseCls: 'x-row-editor',
        elements: 'header,footer,body',
        frameWidth: 5,
        buttonPad: 3,
        clicksToEdit: 'auto',
        monitorValid: true,
        focusDelay: 250,
        errorSummary: true,

        saveText: 'Save',
        cancelText: 'Cancel',
        commitChangesText: 'You need to commit or cancel your changes',
        errorText: 'Errors',

        defaults: {
            normalWidth: true
        },

        initComponent: function(){
            Ext.ux.grid.RowEditor.superclass.initComponent.call(this);
            this.addEvents(
                /**
                 * @event beforeedit
                 * Fired before the row editor is activated.
                 * If the listener returns false the editor will not be activated.
                 * @param {Ext.ux.grid.RowEditor} roweditor This object
                 * @param {Number} rowIndex The rowIndex of the row just edited
                 */
                'beforeedit',
                /**
                 * @event canceledit
                 * Fired when the editor is cancelled.
                 * @param {Ext.ux.grid.RowEditor} roweditor This object
                 * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
                 */
                'canceledit',
                /**
                 * @event validateedit
                 * Fired after a row is edited and passes validation.
                 * If the listener returns false changes to the record will not be set.
                 * @param {Ext.ux.grid.RowEditor} roweditor This object
                 * @param {Object} changes Object with changes made to the record.
                 * @param {Ext.data.Record} r The Record that was edited.
                 * @param {Number} rowIndex The rowIndex of the row just edited
                 */
                'validateedit',
                /**
                 * @event afteredit
                 * Fired after a row is edited and passes validation.  This event is fired
                 * after the store's update event is fired with this edit.
                 * @param {Ext.ux.grid.RowEditor} roweditor This object
                 * @param {Object} changes Object with changes made to the record.
                 * @param {Ext.data.Record} r The Record that was edited.
                 * @param {Number} rowIndex The rowIndex of the row just edited
                 */
                'afteredit'
            );
        },

        init: function(grid){
            this.grid = grid;
            this.ownerCt = grid;
            if(this.clicksToEdit === 2){
                grid.on('rowdblclick', this.onRowDblClick, this);
            }else{
                grid.on('rowclick', this.onRowClick, this);
                if(Ext.isIE){
                    grid.on('rowdblclick', this.onRowDblClick, this);
                }
            }

            // stopEditing without saving when a record is removed from Store.
            grid.getStore().on('remove', function() {
                this.stopEditing(false);
            },this);

            grid.on({
                scope: this,
                keydown: this.onGridKey,
                columnresize: this.verifyLayout,
                columnmove: this.refreshFields,
                reconfigure: this.refreshFields,
                beforedestroy : this.beforedestroy,
                destroy : this.destroy,
                bodyscroll: {
                    buffer: 250,
                    fn: this.positionButtons
                }
            });
            grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1});
            grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
        },

        beforedestroy: function() {
            this.stopMonitoring();
            this.grid.getStore().un('remove', this.onStoreRemove, this);
            this.stopEditing(false);
            Ext.destroy(this.btns, this.tooltip);
        },

        refreshFields: function(){
            this.initFields();
            this.verifyLayout();
        },

        isDirty: function(){
            var dirty;
            this.items.each(function(f){
                if(String(this.values[f.id]) !== String(f.getValue())){
                    dirty = true;
                    return false;
                }
            }, this);
            return dirty;
        },

        startEditing: function(rowIndex, doFocus){
            if(this.editing && this.isDirty()){
                this.showTooltip(this.commitChangesText);
                return;
            }
            if(Ext.isObject(rowIndex)){
                rowIndex = this.grid.getStore().indexOf(rowIndex);
            }
            if(this.fireEvent('beforeedit', this, rowIndex) !== false){
                this.editing = true;
                var g = this.grid, view = g.getView(),
                    row = view.getRow(rowIndex),
                    record = g.store.getAt(rowIndex);

                this.record = record;
                this.rowIndex = rowIndex;
                this.values = {};
                if(!this.rendered){
                    this.render(view.getEditorParent());
                }
                var w = Ext.fly(row).getWidth();
                this.setSize(w);
                if(!this.initialized){
                    this.initFields();
                }
                var cm = g.getColumnModel(), fields = this.items.items, f, val;
                for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                    val = this.preEditValue(record, cm.getDataIndex(i));
                    f = fields[i];
                    f.setValue(val);
                    this.values[f.id] = Ext.isEmpty(val) ? '' : val;
                }
                this.verifyLayout(true);
                if(!this.isVisible()){
                    this.setPagePosition(Ext.fly(row).getXY());
                } else{
                    this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
                }
                if(!this.isVisible()){
                    this.show().doLayout();
                }
                if(doFocus !== false){
                    this.doFocus.defer(this.focusDelay, this);
                }
            }
        },

        stopEditing : function(saveChanges){
            this.editing = false;
            if(!this.isVisible()){
                return;
            }
            if(saveChanges === false || !this.isValid()){
                this.hide();
                this.fireEvent('canceledit', this, saveChanges === false);
                return;
            }
            var changes = {},
                r = this.record,
                hasChange = false,
                cm = this.grid.colModel,
                fields = this.items.items;
            for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                if(!cm.isHidden(i)){
                    var dindex = cm.getDataIndex(i);
                    if(!Ext.isEmpty(dindex)){
                        var oldValue = r.data[dindex],
                            value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
                        if(String(oldValue) !== String(value)){
                            changes[dindex] = value;
                            hasChange = true;
                        }
                    }
                }
            }
            if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
                r.beginEdit();
                Ext.iterate(changes, function(name, value){
                    r.set(name, value);
                });
                r.endEdit();
                this.fireEvent('afteredit', this, changes, r, this.rowIndex);
            }
            this.hide();
        },

        verifyLayout: function(force){
            if(this.el && (this.isVisible() || force === true)){
                var row = this.grid.getView().getRow(this.rowIndex);
                this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + 9 : undefined);
                var cm = this.grid.colModel, fields = this.items.items;
                for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                    if(!cm.isHidden(i)){
                        var adjust = 0;
                        if(i === (len - 1)){
                            adjust += 3; // outer padding
                        } else{
                            adjust += 1;
                        }
                        fields[i].show();
                        fields[i].setWidth(cm.getColumnWidth(i) - adjust);
                    } else{
                        fields[i].hide();
                    }
                }
                this.doLayout();
                this.positionButtons();
            }
        },

        slideHide : function(){
            this.hide();
        },

        initFields: function(){
            var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
            this.removeAll(false);
            for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                var c = cm.getColumnAt(i),
                    ed = c.getEditor();
                if(!ed){
                    ed = c.displayEditor || new Ext.form.DisplayField();
                }
                if(i == 0){
                    ed.margins = pm('0 1 2 1');
                } else if(i == len - 1){
                    ed.margins = pm('0 0 2 1');
                } else{
                    if (Ext.isIE) {
                        ed.margins = pm('0 0 2 0');
                    }
                    else {
                        ed.margins = pm('0 1 2 0');
                    }
                }
                ed.setWidth(cm.getColumnWidth(i));
                ed.column = c;
                if(ed.ownerCt !== this){
                    ed.on('focus', this.ensureVisible, this);
                    ed.on('specialkey', this.onKey, this);
                }
                this.insert(i, ed);
            }
            this.initialized = true;
        },

        onKey: function(f, e){
            if(e.getKey() === e.ENTER){
                this.stopEditing(true);
                e.stopPropagation();
            }
        },

        onGridKey: function(e){
            if(e.getKey() === e.ENTER && !this.isVisible()){
                var r = this.grid.getSelectionModel().getSelected();
                if(r){
                    var index = this.grid.store.indexOf(r);
                    this.startEditing(index);
                    e.stopPropagation();
                }
            }
        },

        ensureVisible: function(editor){
            if(this.isVisible()){
                 this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true);
            }
        },

        onRowClick: function(g, rowIndex, e){
            if(this.clicksToEdit == 'auto'){
                var li = this.lastClickIndex;
                this.lastClickIndex = rowIndex;
                if(li != rowIndex && !this.isVisible()){
                    return;
                }
            }
            this.startEditing(rowIndex, false);
            this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
        },

        onRowDblClick: function(g, rowIndex, e){
            this.startEditing(rowIndex, false);
            this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
        },

        onRender: function(){
            Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments);
            this.el.swallowEvent(['keydown', 'keyup', 'keypress']);
            this.btns = new Ext.Panel({
                baseCls: 'x-plain',
                cls: 'x-btns',
                elements:'body',
                layout: 'table',
                width: (this.minButtonWidth * 2) + (this.frameWidth * 2) + (this.buttonPad * 4), // width must be specified for IE
                items: [{
                    ref: 'saveBtn',
                    itemId: 'saveBtn',
                    xtype: 'button',
                    text: this.saveText,
                    width: this.minButtonWidth,
                    handler: this.stopEditing.createDelegate(this, [true])
                }, {
                    xtype: 'button',
                    text: this.cancelText,
                    width: this.minButtonWidth,
                    handler: this.stopEditing.createDelegate(this, [false])
                }]
            });
            this.btns.render(this.bwrap);
        },

        afterRender: function(){
            Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments);
            this.positionButtons();
            if(this.monitorValid){
                this.startMonitoring();
            }
        },

        onShow: function(){
            if(this.monitorValid){
                this.startMonitoring();
            }
            Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments);
        },

        onHide: function(){
            Ext.ux.grid.RowEditor.superclass.onHide.apply(this, arguments);
            this.stopMonitoring();
            this.grid.getView().focusRow(this.rowIndex);
        },

        positionButtons: function(){
            if(this.btns){
                var g = this.grid,
                    h = this.el.dom.clientHeight,
                    view = g.getView(),
                    scroll = view.scroller.dom.scrollLeft,
                    bw = this.btns.getWidth(),
                    width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());

                this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
            }
        },

        // private
        preEditValue : function(r, field){
            var value = r.data[field];
            return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
        },

        // private
        postEditValue : function(value, originalValue, r, field){
            return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
        },

        doFocus: function(pt){
            if(this.isVisible()){
                var index = 0,
                    cm = this.grid.getColumnModel(),
                    c;
                if(pt){
                    index = this.getTargetColumnIndex(pt);
                }
                for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
                    c = cm.getColumnAt(i);
                    if(!c.hidden && c.getEditor()){
                        c.getEditor().focus();
                        break;
                    }
                }
            }
        },

        getTargetColumnIndex: function(pt){
            var grid = this.grid,
                v = grid.view,
                x = pt.left,
                cms = grid.colModel.config,
                i = 0,
                match = false;
            for(var len = cms.length, c; c = cms[i]; i++){
                if(!c.hidden){
                    if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
                        match = i;
                        break;
                    }
                }
            }
            return match;
        },

        startMonitoring : function(){
            if(!this.bound && this.monitorValid){
                this.bound = true;
                Ext.TaskMgr.start({
                    run : this.bindHandler,
                    interval : this.monitorPoll || 200,
                    scope: this
                });
            }
        },

        stopMonitoring : function(){
            this.bound = false;
            if(this.tooltip){
                this.tooltip.hide();
            }
        },

        isValid: function(){
            var valid = true;
            this.items.each(function(f){
                if(!f.isValid(true)){
                    valid = false;
                    return false;
                }
            });
            return valid;
        },

        // private
        bindHandler : function(){
            if(!this.bound){
                return false; // stops binding
            }
            var valid = this.isValid();
            if(!valid && this.errorSummary){
                this.showTooltip(this.getErrorText().join(''));
            }
            this.btns.saveBtn.setDisabled(!valid);
            this.fireEvent('validation', this, valid);
        },

        lastVisibleColumn : function() {
            var i = this.items.getCount() - 1,
                c;
            for(; i >= 0; i--) {
                c = this.items.items[i];
                if (!c.hidden) {
                    return c;
                }
            }
        },

        showTooltip: function(msg){
            var t = this.tooltip;
            if(!t){
                t = this.tooltip = new Ext.ToolTip({
                    maxWidth: 600,
                    cls: 'errorTip',
                    width: 300,
                    title: this.errorText,
                    autoHide: false,
                    anchor: 'left',
                    anchorToTarget: true,
                    mouseOffset: [40,0]
                });
            }
            var v = this.grid.getView(),
                top = parseInt(this.el.dom.style.top, 10),
                scroll = v.scroller.dom.scrollTop,
                h = this.el.getHeight();

            if(top + h >= scroll){
                t.initTarget(this.lastVisibleColumn().getEl());
                if(!t.rendered){
                    t.show();
                    t.hide();
                }
                t.body.update(msg);
                t.doAutoWidth(20);
                t.show();
            }else if(t.rendered){
                t.hide();
            }
        },

        getErrorText: function(){
            var data = [''];
            this.items.each(function(f){
                if(!f.isValid(true)){
                    data.push('', f.getActiveError(), '');
                }
            });
            data.push('');
            return data;
        }
    });
    Ext.preg('roweditor', Ext.ux.grid.RowEditor);
    Ext.ns('Ext.ux.grid');

    /**
     * @class Ext.ux.grid.RowExpander
     * @extends Ext.util.Observable
     * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
     * a second row body which expands/contracts.  The expand/contract behavior is configurable to react
     * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
     *
     * @ptype rowexpander
     */
    Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
        /**
         * @cfg {Boolean} expandOnEnter
         * true to toggle selected row(s) between expanded/collapsed when the enter
         * key is pressed (defaults to true).
         */
        expandOnEnter : true,
        /**
         * @cfg {Boolean} expandOnDblClick
         * true to toggle a row between expanded/collapsed when double clicked
         * (defaults to true).
         */
        expandOnDblClick : true,

        header : '',
        width : 20,
        sortable : false,
        fixed : true,
        hideable: false,
        menuDisabled : true,
        dataIndex : '',
        id : 'expander',
        lazyRender : true,
        enableCaching : true,

        constructor: function(config){
            Ext.apply(this, config);

            this.addEvents({
                /**
                 * @event beforeexpand
                 * Fires before the row expands. Have the listener return false to prevent the row from expanding.
                 * @param {Object} this RowExpander object.
                 * @param {Object} Ext.data.Record Record for the selected row.
                 * @param {Object} body body element for the secondary row.
                 * @param {Number} rowIndex The current row index.
                 */
                beforeexpand: true,
                /**
                 * @event expand
                 * Fires after the row expands.
                 * @param {Object} this RowExpander object.
                 * @param {Object} Ext.data.Record Record for the selected row.
                 * @param {Object} body body element for the secondary row.
                 * @param {Number} rowIndex The current row index.
                 */
                expand: true,
                /**
                 * @event beforecollapse
                 * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
                 * @param {Object} this RowExpander object.
                 * @param {Object} Ext.data.Record Record for the selected row.
                 * @param {Object} body body element for the secondary row.
                 * @param {Number} rowIndex The current row index.
                 */
                beforecollapse: true,
                /**
                 * @event collapse
                 * Fires after the row collapses.
                 * @param {Object} this RowExpander object.
                 * @param {Object} Ext.data.Record Record for the selected row.
                 * @param {Object} body body element for the secondary row.
                 * @param {Number} rowIndex The current row index.
                 */
                collapse: true
            });

            Ext.ux.grid.RowExpander.superclass.constructor.call(this);

            if(this.tpl){
                if(typeof this.tpl == 'string'){
                    this.tpl = new Ext.Template(this.tpl);
                }
                this.tpl.compile();
            }

            this.state = {};
            this.bodyContent = {};
        },

        getRowClass : function(record, rowIndex, p, ds){
            p.cols = p.cols-1;
            var content = this.bodyContent[record.id];
            if(!content && !this.lazyRender){
                content = this.getBodyContent(record, rowIndex);
            }
            if(content){
                p.body = content;
            }
            return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
        },

        init : function(grid){
            this.grid = grid;

            var view = grid.getView();
            view.getRowClass = this.getRowClass.createDelegate(this);

            view.enableRowBody = true;

            grid.on('render', this.onRender, this);
            grid.on('destroy', this.onDestroy, this);
        },

        // @private
        onRender: function() {
            var grid = this.grid;
            var mainBody = grid.getView().mainBody;
            mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
            if (this.expandOnEnter) {
                this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
                    'enter' : this.onEnter,
                    scope: this
                });
            }
            if (this.expandOnDblClick) {
                grid.on('rowdblclick', this.onRowDblClick, this);
            }
        },

        // @private
        onDestroy: function() {
            if(this.keyNav){
                this.keyNav.disable();
                delete this.keyNav;
            }
            /*
             * A majority of the time, the plugin will be destroyed along with the grid,
             * which means the mainBody won't be available. On the off chance that the plugin
             * isn't destroyed with the grid, take care of removing the listener.
             */
            var mainBody = this.grid.getView().mainBody;
            if(mainBody){
                mainBody.un('mousedown', this.onMouseDown, this);
            }
        },
        // @private
        onRowDblClick: function(grid, rowIdx, e) {
            this.toggleRow(rowIdx);
        },

        onEnter: function(e) {
            var g = this.grid;
            var sm = g.getSelectionModel();
            var sels = sm.getSelections();
            for (var i = 0, len = sels.length; i < len; i++) {
                var rowIdx = g.getStore().indexOf(sels[i]);
                this.toggleRow(rowIdx);
            }
        },

        getBodyContent : function(record, index){
            if(!this.enableCaching){
                return this.tpl.apply(record.data);
            }
            var content = this.bodyContent[record.id];
            if(!content){
                content = this.tpl.apply(record.data);
                this.bodyContent[record.id] = content;
            }
            return content;
        },

        onMouseDown : function(e, t){
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');
            this.toggleRow(row);
        },

        renderer : function(v, p, record){
            p.cellAttr = 'rowspan="2"';
            return ' ';
        },

        beforeExpand : function(record, body, rowIndex){
            if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
                if(this.tpl && this.lazyRender){
                    body.innerHTML = this.getBodyContent(record, rowIndex);
                }
                return true;
            }else{
                return false;
            }
        },

        toggleRow : function(row){
            if(typeof row == 'number'){
                row = this.grid.view.getRow(row);
            }
            this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
        },

        expandRow : function(row){
            if(typeof row == 'number'){
                row = this.grid.view.getRow(row);
            }
            var record = this.grid.store.getAt(row.rowIndex);
            var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
            if(this.beforeExpand(record, body, row.rowIndex)){
                this.state[record.id] = true;
                Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
                this.fireEvent('expand', this, record, body, row.rowIndex);
            }
        },

        collapseRow : function(row){
            if(typeof row == 'number'){
                row = this.grid.view.getRow(row);
            }
            var record = this.grid.store.getAt(row.rowIndex);
            var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
            if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
                this.state[record.id] = false;
                Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
                this.fireEvent('collapse', this, record, body, row.rowIndex);
            }
        }
    });

    Ext.preg('rowexpander', Ext.ux.grid.RowExpander);

    //backwards compat
    Ext.grid.RowExpander = Ext.ux.grid.RowExpander;// We are adding these custom layouts to a namespace that does not
    // exist by default in Ext, so we have to add the namespace first:
    Ext.ns('Ext.ux.layout');

    /**
     * @class Ext.ux.layout.RowLayout
     * @extends Ext.layout.ContainerLayout
     * This is the layout style of choice for creating structural layouts in a multi-row format where the height of
     * each row can be specified as a percentage or fixed height.  Row widths can also be fixed, percentage or auto.
     * This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config,
     * and should generally not need to be created directly via the new keyword.
     * RowLayout does not have any direct config options (other than inherited ones), but it does support a
     * specific config property of rowHeight that can be included in the config of any panel added to it.  The
     * layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel.
     * If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).
     * The height property is always evaluated as pixels, and must be a number greater than or equal to 1.
     * The rowHeight property is always evaluated as a percentage, and must be a decimal value greater than 0 and
     * less than 1 (e.g., .25).
     * The basic rules for specifying row heights are pretty simple.  The logic makes two passes through the
     * set of contained panels.  During the first layout pass, all panels that either have a fixed height or none
     * specified (auto) are skipped, but their heights are subtracted from the overall container height.  During the second
     * pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on
     * the total remaining container height.  In other words, percentage height panels are designed to fill the space
     * left over by all the fixed-height and/or auto-height panels.  Because of this, while you can specify any number of rows
     * with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your
     * layout may not render as expected.  Example usage:
     *
    // All rows are percentages -- they must add up to 1
    var p = new Ext.Panel({
        title: 'Row Layout - Percentage Only',
        layout:'ux.row',
        items: [{
            title: 'Row 1',
            rowHeight: .25
        },{
            title: 'Row 2',
            rowHeight: .6
        },{
            title: 'Row 3',
            rowHeight: .15
        }]
    });

    // Mix of height and rowHeight -- all rowHeight values must add
    // up to 1. The first row will take up exactly 120px, and the last two
    // rows will fill the remaining container height.
    var p = new Ext.Panel({
        title: 'Row Layout - Mixed',
        layout:'ux.row',
        items: [{
            title: 'Row 1',
            height: 120,
            // standard panel widths are still supported too:
            width: '50%' // or 200
        },{
            title: 'Row 2',
            rowHeight: .8,
            width: 300
        },{
            title: 'Row 3',
            rowHeight: .2
        }]
    });

     */
    Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {
        // private
        monitorResize:true,

        type: 'row',

        // private
        allowContainerRemove: false,

        // private
        isValidParent : function(c, target){
            return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
        },

        getLayoutTargetSize : function() {
            var target = this.container.getLayoutTarget(), ret;
            if (target) {
                ret = target.getViewSize();

                // IE in strict mode will return a height of 0 on the 1st pass of getViewSize.
                // Use getStyleSize to verify the 0 height, the adjustment pass will then work properly
                // with getViewSize
                if (Ext.isIE && Ext.isStrict && ret.height == 0){
                    ret =  target.getStyleSize();
                }

                ret.width -= target.getPadding('lr');
                ret.height -= target.getPadding('tb');
            }
            return ret;
        },

        renderAll : function(ct, target) {
            if(!this.innerCt){
                // the innerCt prevents wrapping and shuffling while
                // the container is resizing
                this.innerCt = target.createChild({cls:'x-column-inner'});
                this.innerCt.createChild({cls:'x-clear'});
            }
            Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
        },

        // private
        onLayout : function(ct, target){
            var rs = ct.items.items,
                len = rs.length,
                r,
                m,
                i,
                margins = [];

            this.renderAll(ct, target);

            var size = this.getLayoutTargetSize();

            if(size.width < 1 && size.height < 1){ // display none?
                return;
            }

            var h = size.height,
                ph = h;

            this.innerCt.setSize({height:h});

            // some rows can be percentages while others are fixed
            // so we need to make 2 passes

            for(i = 0; i < len; i++){
                r = rs[i];
                m = r.getPositionEl().getMargins('tb');
                margins[i] = m;
                if(!r.rowHeight){
                    ph -= (r.getHeight() + m);
                }
            }

            ph = ph < 0 ? 0 : ph;

            for(i = 0; i < len; i++){
                r = rs[i];
                m = margins[i];
                if(r.rowHeight){
                    r.setSize({height: Math.floor(r.rowHeight*ph) - m});
                }
            }

            // Browsers differ as to when they account for scrollbars.  We need to re-measure to see if the scrollbar
            // spaces were accounted for properly.  If not, re-layout.
            if (Ext.isIE) {
                if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) {
                    var ts = this.getLayoutTargetSize();
                    if (ts.width != size.width){
                        this.adjustmentPass = true;
                        this.onLayout(ct, target);
                    }
                }
            }
            delete this.adjustmentPass;
        }

        /**
         * @property activeItem
         * @hide
         */
    });

    Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout;
    Ext.ns('Ext.ux.form');

    Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
        initComponent : function(){
            Ext.ux.form.SearchField.superclass.initComponent.call(this);
            this.on('specialkey', function(f, e){
                if(e.getKey() == e.ENTER){
                    this.onTrigger2Click();
                }
            }, this);
        },

        validationEvent:false,
        validateOnBlur:false,
        trigger1Class:'x-form-clear-trigger',
        trigger2Class:'x-form-search-trigger',
        hideTrigger1:true,
        width:180,
        hasSearch : false,
        paramName : 'query',

        onTrigger1Click : function(){
            if(this.hasSearch){
                this.el.dom.value = '';
                var o = {start: 0};
                this.store.baseParams = this.store.baseParams || {};
                this.store.baseParams[this.paramName] = '';
                this.store.reload({params:o});
                this.triggers[0].hide();
                this.hasSearch = false;
            }
        },

        onTrigger2Click : function(){
            var v = this.getRawValue();
            if(v.length < 1){
                this.onTrigger1Click();
                return;
            }
            var o = {start: 0};
            this.store.baseParams = this.store.baseParams || {};
            this.store.baseParams[this.paramName] = v;
            this.store.reload({params:o});
            this.hasSearch = true;
            this.triggers[0].show();
        }
    });Ext.ns('Ext.ux.form');

    /**
     * @class Ext.ux.form.SelectBox
     * @extends Ext.form.ComboBox
     * Makes a ComboBox more closely mimic an HTML SELECT.  Supports clicking and dragging
     * through the list, with item selection occurring when the mouse button is released.
     * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
     * on inner elements.  Re-enabling editable after calling this will NOT work.
     * @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
     * @history 2007-07-08 jvs
     * Slight mods for Ext 2.0
     * @xtype selectbox
     */
    Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
    	constructor: function(config){
    		this.searchResetDelay = 1000;
    		config = config || {};
    		config = Ext.apply(config || {}, {
    			editable: false,
    			forceSelection: true,
    			rowHeight: false,
    			lastSearchTerm: false,
    			triggerAction: 'all',
    			mode: 'local'
    		});

    		Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);

    		this.lastSelectedIndex = this.selectedIndex || 0;
    	},

    	initEvents : function(){
    		Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);
    		// you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
    		this.el.on('keydown', this.keySearch, this, true);
    		this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
    	},

    	keySearch : function(e, target, options) {
    		var raw = e.getKey();
    		var key = String.fromCharCode(raw);
    		var startIndex = 0;

    		if( !this.store.getCount() ) {
    			return;
    		}

    		switch(raw) {
    			case Ext.EventObject.HOME:
    				e.stopEvent();
    				this.selectFirst();
    				return;

    			case Ext.EventObject.END:
    				e.stopEvent();
    				this.selectLast();
    				return;

    			case Ext.EventObject.PAGEDOWN:
    				this.selectNextPage();
    				e.stopEvent();
    				return;

    			case Ext.EventObject.PAGEUP:
    				this.selectPrevPage();
    				e.stopEvent();
    				return;
    		}

    		// skip special keys other than the shift key
    		if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
    			return;
    		}
    		if( this.lastSearchTerm == key ) {
    			startIndex = this.lastSelectedIndex;
    		}
    		this.search(this.displayField, key, startIndex);
    		this.cshTask.delay(this.searchResetDelay);
    	},

    	onRender : function(ct, position) {
    		this.store.on('load', this.calcRowsPerPage, this);
    		Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
    		if( this.mode == 'local' ) {
                this.initList();
    			this.calcRowsPerPage();
    		}
    	},

    	onSelect : function(record, index, skipCollapse){
    		if(this.fireEvent('beforeselect', this, record, index) !== false){
    			this.setValue(record.data[this.valueField || this.displayField]);
    			if( !skipCollapse ) {
    				this.collapse();
    			}
    			this.lastSelectedIndex = index + 1;
    			this.fireEvent('select', this, record, index);
    		}
    	},

    	afterRender : function() {
    		Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
    		if(Ext.isWebKit) {
    			this.el.swallowEvent('mousedown', true);
    		}
    		this.el.unselectable();
    		this.innerList.unselectable();
    		this.trigger.unselectable();
    		this.innerList.on('mouseup', function(e, target, options) {
    			if( target.id && target.id == this.innerList.id ) {
    				return;
    			}
    			this.onViewClick();
    		}, this);

    		this.innerList.on('mouseover', function(e, target, options) {
    			if( target.id && target.id == this.innerList.id ) {
    				return;
    			}
    			this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
    			this.cshTask.delay(this.searchResetDelay);
    		}, this);

    		this.trigger.un('click', this.onTriggerClick, this);
    		this.trigger.on('mousedown', function(e, target, options) {
    			e.preventDefault();
    			this.onTriggerClick();
    		}, this);

    		this.on('collapse', function(e, target, options) {
    			Ext.getDoc().un('mouseup', this.collapseIf, this);
    		}, this, true);

    		this.on('expand', function(e, target, options) {
    			Ext.getDoc().on('mouseup', this.collapseIf, this);
    		}, this, true);
    	},

    	clearSearchHistory : function() {
    		this.lastSelectedIndex = 0;
    		this.lastSearchTerm = false;
    	},

    	selectFirst : function() {
    		this.focusAndSelect(this.store.data.first());
    	},

    	selectLast : function() {
    		this.focusAndSelect(this.store.data.last());
    	},

    	selectPrevPage : function() {
    		if( !this.rowHeight ) {
    			return;
    		}
    		var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
    		this.focusAndSelect(this.store.getAt(index));
    	},

    	selectNextPage : function() {
    		if( !this.rowHeight ) {
    			return;
    		}
    		var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
    		this.focusAndSelect(this.store.getAt(index));
    	},

    	search : function(field, value, startIndex) {
    		field = field || this.displayField;
    		this.lastSearchTerm = value;
    		var index = this.store.find.apply(this.store, arguments);
    		if( index !== -1 ) {
    			this.focusAndSelect(index);
    		}
    	},

    	focusAndSelect : function(record) {
            var index = Ext.isNumber(record) ? record : this.store.indexOf(record);
            this.select(index, this.isExpanded());
            this.onSelect(this.store.getAt(index), index, this.isExpanded());
    	},

    	calcRowsPerPage : function() {
    		if( this.store.getCount() ) {
    			this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
    			this.rowsPerPage = this.maxHeight / this.rowHeight;
    		} else {
    			this.rowHeight = false;
    		}
    	}

    });

    Ext.reg('selectbox', Ext.ux.form.SelectBox);

    //backwards compat
    Ext.ux.SelectBox = Ext.ux.form.SelectBox;
    /**
     * Plugin for PagingToolbar which replaces the textfield input with a slider
     */
    Ext.ux.SlidingPager = Ext.extend(Object, {
        init : function(pbar){
            var idx = pbar.items.indexOf(pbar.inputItem);
            Ext.each(pbar.items.getRange(idx - 2, idx + 2), function(c){
                c.hide();
            });
            var slider = new Ext.Slider({
                width: 114,
                minValue: 1,
                maxValue: 1,
                plugins: new Ext.slider.Tip({
                    getText : function(thumb) {
                        return String.format('Page {0} of {1}', thumb.value, thumb.slider.maxValue);
                    }
                }),
                listeners: {
                    changecomplete: function(s, v){
                        pbar.changePage(v);
                    }
                }
            });
            pbar.insert(idx + 1, slider);
            pbar.on({
                change: function(pb, data){
                    slider.setMaxValue(data.pages);
                    slider.setValue(data.activePage);
                }
            });
        }
    });Ext.ns('Ext.ux.form');

    /**
     * @class Ext.ux.form.SpinnerField
     * @extends Ext.form.NumberField
     * Creates a field utilizing Ext.ux.Spinner
     * @xtype spinnerfield
     */
    Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
        actionMode: 'wrap',
        deferHeight: true,
        autoSize: Ext.emptyFn,
        onBlur: Ext.emptyFn,
        adjustSize: Ext.BoxComponent.prototype.adjustSize,

    	constructor: function(config) {
    		var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');

    		var spl = this.spinner = new Ext.ux.Spinner(spinnerConfig);

    		var plugins = config.plugins
    			? (Ext.isArray(config.plugins)
    				? config.plugins.push(spl)
    				: [config.plugins, spl])
    			: spl;

    		Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
    	},

        // private
        getResizeEl: function(){
            return this.wrap;
        },

        // private
        getPositionEl: function(){
            return this.wrap;
        },

        // private
        alignErrorIcon: function(){
            if (this.wrap) {
                this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
            }
        },

        validateBlur: function(){
            return true;
        }
    });

    Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);

    //backwards compat
    Ext.form.SpinnerField = Ext.ux.form.SpinnerField;
    /**
     * @class Ext.ux.Spinner
     * @extends Ext.util.Observable
     * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
     */
    Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
        incrementValue: 1,
        alternateIncrementValue: 5,
        triggerClass: 'x-form-spinner-trigger',
        splitterClass: 'x-form-spinner-splitter',
        alternateKey: Ext.EventObject.shiftKey,
        defaultValue: 0,
        accelerate: false,

        constructor: function(config){
            Ext.ux.Spinner.superclass.constructor.call(this, config);
            Ext.apply(this, config);
            this.mimicing = false;
        },

        init: function(field){
            this.field = field;

            field.afterMethod('onRender', this.doRender, this);
            field.afterMethod('onEnable', this.doEnable, this);
            field.afterMethod('onDisable', this.doDisable, this);
            field.afterMethod('afterRender', this.doAfterRender, this);
            field.afterMethod('onResize', this.doResize, this);
            field.afterMethod('onFocus', this.doFocus, this);
            field.beforeMethod('onDestroy', this.doDestroy, this);
        },

        doRender: function(ct, position){
            var el = this.el = this.field.getEl();
            var f = this.field;

            if (!f.wrap) {
                f.wrap = this.wrap = el.wrap({
                    cls: "x-form-field-wrap"
                });
            }
            else {
                this.wrap = f.wrap.addClass('x-form-field-wrap');
            }

            this.trigger = this.wrap.createChild({
                tag: "img",
                src: Ext.BLANK_IMAGE_URL,
                cls: "x-form-trigger " + this.triggerClass
            });

            if (!f.width) {
                this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
            }

            this.splitter = this.wrap.createChild({
                tag: 'div',
                cls: this.splitterClass,
                style: 'width:13px; height:2px;'
            });
            this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();

            this.proxy = this.trigger.createProxy('', this.splitter, true);
            this.proxy.addClass("x-form-spinner-proxy");
            this.proxy.setStyle('left', '0px');
            this.proxy.setSize(14, 1);
            this.proxy.hide();
            this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
                dragElId: this.proxy.id
            });

            this.initTrigger();
            this.initSpinner();
        },

        doAfterRender: function(){
            var y;
            if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
                this.el.position();
                this.el.setY(y);
            }
        },

        doEnable: function(){
            if (this.wrap) {
                this.disabled = false;
                this.wrap.removeClass(this.field.disabledClass);
            }
        },

        doDisable: function(){
            if (this.wrap) {
    	        this.disabled = true;
                this.wrap.addClass(this.field.disabledClass);
                this.el.removeClass(this.field.disabledClass);
            }
        },

        doResize: function(w, h){
            if (typeof w == 'number') {
                this.el.setWidth(w - this.trigger.getWidth());
            }
            this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
        },

        doFocus: function(){
            if (!this.mimicing) {
                this.wrap.addClass('x-trigger-wrap-focus');
                this.mimicing = true;
                Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
                    delay: 10
                });
                this.el.on('keydown', this.checkTab, this);
            }
        },

        // private
        checkTab: function(e){
            if (e.getKey() == e.TAB) {
                this.triggerBlur();
            }
        },

        // private
        mimicBlur: function(e){
            if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
                this.triggerBlur();
            }
        },

        // private
        triggerBlur: function(){
            this.mimicing = false;
            Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
            this.el.un("keydown", this.checkTab, this);
            this.field.beforeBlur();
            this.wrap.removeClass('x-trigger-wrap-focus');
            this.field.onBlur.call(this.field);
        },

        initTrigger: function(){
            this.trigger.addClassOnOver('x-form-trigger-over');
            this.trigger.addClassOnClick('x-form-trigger-click');
        },

        initSpinner: function(){
            this.field.addEvents({
                'spin': true,
                'spinup': true,
                'spindown': true
            });

            this.keyNav = new Ext.KeyNav(this.el, {
                "up": function(e){
                    e.preventDefault();
                    this.onSpinUp();
                },

                "down": function(e){
                    e.preventDefault();
                    this.onSpinDown();
                },

                "pageUp": function(e){
                    e.preventDefault();
                    this.onSpinUpAlternate();
                },

                "pageDown": function(e){
                    e.preventDefault();
                    this.onSpinDownAlternate();
                },

                scope: this
            });

            this.repeater = new Ext.util.ClickRepeater(this.trigger, {
                accelerate: this.accelerate
            });
            this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
                preventDefault: true
            });

            this.field.mon(this.trigger, {
                mouseover: this.onMouseOver,
                mouseout: this.onMouseOut,
                mousemove: this.onMouseMove,
                mousedown: this.onMouseDown,
                mouseup: this.onMouseUp,
                scope: this,
                preventDefault: true
            });

            this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);

            this.dd.setXConstraint(0, 0, 10)
            this.dd.setYConstraint(1500, 1500, 10);
            this.dd.endDrag = this.endDrag.createDelegate(this);
            this.dd.startDrag = this.startDrag.createDelegate(this);
            this.dd.onDrag = this.onDrag.createDelegate(this);
        },

        onMouseOver: function(){
            if (this.disabled) {
                return;
            }
            var middle = this.getMiddle();
            this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
            this.trigger.addClass(this.tmpHoverClass);
        },

        //private
        onMouseOut: function(){
            this.trigger.removeClass(this.tmpHoverClass);
        },

        //private
        onMouseMove: function(){
            if (this.disabled) {
                return;
            }
            var middle = this.getMiddle();
            if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
            ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
            }
        },

        //private
        onMouseDown: function(){
            if (this.disabled) {
                return;
            }
            var middle = this.getMiddle();
            this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
            this.trigger.addClass(this.tmpClickClass);
        },

        //private
        onMouseUp: function(){
            this.trigger.removeClass(this.tmpClickClass);
        },

        //private
        onTriggerClick: function(){
            if (this.disabled || this.el.dom.readOnly) {
                return;
            }
            var middle = this.getMiddle();
            var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
            this['onSpin' + ud]();
        },

        //private
        getMiddle: function(){
            var t = this.trigger.getTop();
            var h = this.trigger.getHeight();
            var middle = t + (h / 2);
            return middle;
        },

        //private
        //checks if control is allowed to spin
        isSpinnable: function(){
            if (this.disabled || this.el.dom.readOnly) {
                Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
                return false;
            }
            return true;
        },

        handleMouseWheel: function(e){
            //disable scrolling when not focused
            if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
                return;
            }

            var delta = e.getWheelDelta();
            if (delta > 0) {
                this.onSpinUp();
                e.stopEvent();
            }
            else
                if (delta < 0) {
                    this.onSpinDown();
                    e.stopEvent();
                }
        },

        //private
        startDrag: function(){
            this.proxy.show();
            this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
        },

        //private
        endDrag: function(){
            this.proxy.hide();
        },

        //private
        onDrag: function(){
            if (this.disabled) {
                return;
            }
            var y = Ext.fly(this.dd.getDragEl()).getTop();
            var ud = '';

            if (this._previousY > y) {
                ud = 'Up';
            } //up
            if (this._previousY < y) {
                ud = 'Down';
            } //down
            if (ud != '') {
                this['onSpin' + ud]();
            }

            this._previousY = y;
        },

        //private
        onSpinUp: function(){
            if (this.isSpinnable() == false) {
                return;
            }
            if (Ext.EventObject.shiftKey == true) {
                this.onSpinUpAlternate();
                return;
            }
            else {
                this.spin(false, false);
            }
            this.field.fireEvent("spin", this);
            this.field.fireEvent("spinup", this);
        },

        //private
        onSpinDown: function(){
            if (this.isSpinnable() == false) {
                return;
            }
            if (Ext.EventObject.shiftKey == true) {
                this.onSpinDownAlternate();
                return;
            }
            else {
                this.spin(true, false);
            }
            this.field.fireEvent("spin", this);
            this.field.fireEvent("spindown", this);
        },

        //private
        onSpinUpAlternate: function(){
            if (this.isSpinnable() == false) {
                return;
            }
            this.spin(false, true);
            this.field.fireEvent("spin", this);
            this.field.fireEvent("spinup", this);
        },

        //private
        onSpinDownAlternate: function(){
            if (this.isSpinnable() == false) {
                return;
            }
            this.spin(true, true);
            this.field.fireEvent("spin", this);
            this.field.fireEvent("spindown", this);
        },

        spin: function(down, alternate){
            var v = parseFloat(this.field.getValue());
            var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
            (down == true) ? v -= incr : v += incr;

            v = (isNaN(v)) ? this.defaultValue : v;
            v = this.fixBoundries(v);
            this.field.setRawValue(v);
        },

        fixBoundries: function(value){
            var v = value;

            if (this.field.minValue != undefined && v < this.field.minValue) {
                v = this.field.minValue;
            }
            if (this.field.maxValue != undefined && v > this.field.maxValue) {
                v = this.field.maxValue;
            }

            return this.fixPrecision(v);
        },

        // private
        fixPrecision: function(value){
            var nan = isNaN(value);
            if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
                return nan ? '' : value;
            }
            return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
        },

        doDestroy: function(){
            if (this.trigger) {
                this.trigger.remove();
            }
            if (this.wrap) {
                this.wrap.remove();
                delete this.field.wrap;
            }

            if (this.splitter) {
                this.splitter.remove();
            }

            if (this.dd) {
                this.dd.unreg();
                this.dd = null;
            }

            if (this.proxy) {
                this.proxy.remove();
            }

            if (this.repeater) {
                this.repeater.purgeListeners();
            }
            if (this.mimicing){
                Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
            }
        }
    });

    //backwards compat
    Ext.form.Spinner = Ext.ux.Spinner;Ext.ux.Spotlight = function(config){
        Ext.apply(this, config);
    }
    Ext.ux.Spotlight.prototype = {
        active : false,
        animate : true,
        duration: .25,
        easing:'easeNone',

        // private
        animated : false,

        createElements : function(){
            var bd = Ext.getBody();

            this.right = bd.createChild({cls:'x-spotlight'});
            this.left = bd.createChild({cls:'x-spotlight'});
            this.top = bd.createChild({cls:'x-spotlight'});
            this.bottom = bd.createChild({cls:'x-spotlight'});

            this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
        },

        show : function(el, callback, scope){
            if(this.animated){
                this.show.defer(50, this, [el, callback, scope]);
                return;
            }
            this.el = Ext.get(el);
            if(!this.right){
                this.createElements();
            }
            if(!this.active){
                this.all.setDisplayed('');
                this.applyBounds(true, false);
                this.active = true;
                Ext.EventManager.onWindowResize(this.syncSize, this);
                this.applyBounds(false, this.animate, false, callback, scope);
            }else{
                this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
            }
        },

        hide : function(callback, scope){
            if(this.animated){
                this.hide.defer(50, this, [callback, scope]);
                return;
            }
            Ext.EventManager.removeResizeListener(this.syncSize, this);
            this.applyBounds(true, this.animate, true, callback, scope);
        },

        doHide : function(){
            this.active = false;
            this.all.setDisplayed(false);
        },

        syncSize : function(){
            this.applyBounds(false, false);
        },

        applyBounds : function(basePts, anim, doHide, callback, scope){

            var rg = this.el.getRegion();

            var dw = Ext.lib.Dom.getViewWidth(true);
            var dh = Ext.lib.Dom.getViewHeight(true);

            var c = 0, cb = false;
            if(anim){
                cb = {
                    callback: function(){
                        c++;
                        if(c == 4){
                            this.animated = false;
                            if(doHide){
                                this.doHide();
                            }
                            Ext.callback(callback, scope, [this]);
                        }
                    },
                    scope: this,
                    duration: this.duration,
                    easing: this.easing
                };
                this.animated = true;
            }

            this.right.setBounds(
                    rg.right,
                    basePts ? dh : rg.top,
                    dw - rg.right,
                    basePts ? 0 : (dh - rg.top),
                    cb);

            this.left.setBounds(
                    0,
                    0,
                    rg.left,
                    basePts ? 0 : rg.bottom,
                    cb);

            this.top.setBounds(
                    basePts ? dw : rg.left,
                    0,
                    basePts ? 0 : dw - rg.left,
                    rg.top,
                    cb);

            this.bottom.setBounds(
                    0,
                    rg.bottom,
                    basePts ? 0 : rg.right,
                    dh - rg.bottom,
                    cb);

            if(!anim){
                if(doHide){
                    this.doHide();
                }
                if(callback){
                    Ext.callback(callback, scope, [this]);
                }
            }
        },

        destroy : function(){
            this.doHide();
            Ext.destroy(
                this.right,
                this.left,
                this.top,
                this.bottom);
            delete this.el;
            delete this.all;
        }
    };

    //backwards compat
    Ext.Spotlight = Ext.ux.Spotlight;/**
     * @class Ext.ux.StatusBar
     * Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}.  In addition to
     * supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar
     * provides a greedy status element that can be aligned to either side and has convenient methods for setting the
     * status text and icon.  You can also indicate that something is processing using the {@link #showBusy} method.
     *
    new Ext.Panel({
        title: 'StatusBar',
        // etc.
        bbar: new Ext.ux.StatusBar({
            id: 'my-status',

            // defaults to use when the status is cleared:
            defaultText: 'Default status text',
            defaultIconCls: 'default-icon',

            // values to set initially:
            text: 'Ready',
            iconCls: 'ready-icon',

            // any standard Toolbar items:
            items: [{
                text: 'A Button'
            }, '-', 'Plain Text']
        })
    });

    // Update the status bar later in code:
    var sb = Ext.getCmp('my-status');
    sb.setStatus({
        text: 'OK',
        iconCls: 'ok-icon',
        clear: true // auto-clear after a set interval
    });

    // Set the status bar to show that something is processing:
    sb.showBusy();

    // processing....

    sb.clearStatus(); // once completeed

     * @extends Ext.Toolbar
     * @constructor
     * Creates a new StatusBar
     * @param {Object/Array} config A config object
     */
    Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
        /**
         * @cfg {String} statusAlign
         * The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
         * it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the
         * StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* methods, will be
         * rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically
         * expand to take up all sapce left over by any other items.  Example usage:
         *
    // Create a left-aligned status bar containing a button,
    // separator and text item that will be right-aligned (default):
    new Ext.Panel({
        title: 'StatusBar',
        // etc.
        bbar: new Ext.ux.StatusBar({
            defaultText: 'Default status text',
            id: 'status-id',
            items: [{
                text: 'A Button'
            }, '-', 'Plain Text']
        })
    });

    // By adding the statusAlign config, this will create the
    // exact same toolbar, except the status and toolbar item
    // layout will be reversed from the previous example:
    new Ext.Panel({
        title: 'StatusBar',
        // etc.
        bbar: new Ext.ux.StatusBar({
            defaultText: 'Default status text',
            id: 'status-id',
            statusAlign: 'right',
            items: [{
                text: 'A Button'
            }, '-', 'Plain Text']
        })
    });

         */
        /**
         * @cfg {String} defaultText
         * The default {@link #text} value.  This will be used anytime the status bar is cleared with the
         * useDefaults:true option (defaults to '').
         */
        /**
         * @cfg {String} defaultIconCls
         * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).
         * This will be used anytime the status bar is cleared with the useDefaults:true option (defaults to '').
         */
        /**
         * @cfg {String} text
         * A string that will be initially set as the status message.  This string
         * will be set as innerHTML (html tags are accepted) for the toolbar item.
         * If not specified, the value set for {@link #defaultText}
         * will be used.
         */
        /**
         * @cfg {String} iconCls
         * A CSS class that will be initially set as the status bar icon and is
         * expected to provide a background image (defaults to '').
         * Example usage:
    // Example CSS rule:
    .x-statusbar .x-status-custom {
        padding-left: 25px;
        background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
    }

    // Setting a default icon:
    var sb = new Ext.ux.StatusBar({
        defaultIconCls: 'x-status-custom'
    });

    // Changing the icon:
    sb.setStatus({
        text: 'New status',
        iconCls: 'x-status-custom'
    });

         */

        /**
         * @cfg {String} cls
         * The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
         */
        cls : 'x-statusbar',
        /**
         * @cfg {String} busyIconCls
         * The default {@link #iconCls} applied when calling
         * {@link #showBusy} (defaults to 'x-status-busy').
         * It can be overridden at any time by passing the iconCls
         * argument into {@link #showBusy}.
         */
        busyIconCls : 'x-status-busy',
        /**
         * @cfg {String} busyText
         * The default {@link #text} applied when calling
         * {@link #showBusy} (defaults to 'Loading...').
         * It can be overridden at any time by passing the text
         * argument into {@link #showBusy}.
         */
        busyText : 'Loading...',
        /**
         * @cfg {Number} autoClear
         * The number of milliseconds to wait after setting the status via
         * {@link #setStatus} before automatically clearing the status
         * text and icon (defaults to 5000).  Note that this only applies
         * when passing the clear argument to {@link #setStatus}
         * since that is the only way to defer clearing the status.  This can
         * be overridden by specifying a different wait value in
         * {@link #setStatus}. Calls to {@link #clearStatus}
         * always clear the status bar immediately and ignore this value.
         */
        autoClear : 5000,

        /**
         * @cfg {String} emptyText
         * The text string to use if no text has been set.  Defaults to
         * ' ').  If there are no other items in the toolbar using
         * an empty string ('') for this value would end up in the toolbar
         * height collapsing since the empty string will not maintain the toolbar
         * height.  Use '' if the toolbar should collapse in height
         * vertically when no text is specified and there are no other items in
         * the toolbar.
         */
        emptyText : ' ',

        // private
        activeThreadId : 0,

        // private
        initComponent : function(){
            if(this.statusAlign=='right'){
                this.cls += ' x-status-right';
            }
            Ext.ux.StatusBar.superclass.initComponent.call(this);
        },

        // private
        afterRender : function(){
            Ext.ux.StatusBar.superclass.afterRender.call(this);

            var right = this.statusAlign == 'right';
            this.currIconCls = this.iconCls || this.defaultIconCls;
            this.statusEl = new Ext.Toolbar.TextItem({
                cls: 'x-status-text ' + (this.currIconCls || ''),
                text: this.text || this.defaultText || ''
            });

            if(right){
                this.add('->');
                this.add(this.statusEl);
            }else{
                this.insert(0, this.statusEl);
                this.insert(1, '->');
            }
            this.doLayout();
        },

        /**
         * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
         * status that was set after a specified interval.
         * @param {Object/String} config A config object specifying what status to set, or a string assumed
         * to be the status text (and all other options are defaulted as explained below). A config
         * object containing any or all of the following properties can be passed:
         * text {String} : (optional) The status text to display.  If not specified, any current
         * status text will remain unchanged.
         * iconCls {String} : (optional) The CSS class used to customize the status icon (see
         * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.
         * clear {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
         * automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
         * specified, the new status will not be auto-cleared and will stay until updated again or cleared using
         * {@link #clearStatus}. If true is passed, the status will be cleared using {@link #autoClear},
         * {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed,
         * it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value.
         * All other options will be defaulted as with the boolean option.  To customize any other options,
         * you can pass an object in the format:
         *    wait {Number} : (optional) The number of milliseconds to wait before clearing
         *    (defaults to {@link #autoClear}).
         *    anim {Number} : (optional) False to clear the status immediately once the callback
         *    executes (defaults to true which fades the status out).
         *    useDefaults {Number} : (optional) False to completely clear the status text and iconCls
         *    (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).
         *
         * Example usage:
    // Simple call to update the text
    statusBar.setStatus('New status');

    // Set the status and icon, auto-clearing with default options:
    statusBar.setStatus({
        text: 'New status',
        iconCls: 'x-status-custom',
        clear: true
    });

    // Auto-clear with custom options:
    statusBar.setStatus({
        text: 'New status',
        iconCls: 'x-status-custom',
        clear: {
            wait: 8000,
            anim: false,
            useDefaults: false
        }
    });

         * @return {Ext.ux.StatusBar} this
         */
        setStatus : function(o){
            o = o || {};

            if(typeof o == 'string'){
                o = {text:o};
            }
            if(o.text !== undefined){
                this.setText(o.text);
            }
            if(o.iconCls !== undefined){
                this.setIcon(o.iconCls);
            }

            if(o.clear){
                var c = o.clear,
                    wait = this.autoClear,
                    defaults = {useDefaults: true, anim: true};

                if(typeof c == 'object'){
                    c = Ext.applyIf(c, defaults);
                    if(c.wait){
                        wait = c.wait;
                    }
                }else if(typeof c == 'number'){
                    wait = c;
                    c = defaults;
                }else if(typeof c == 'boolean'){
                    c = defaults;
                }

                c.threadId = this.activeThreadId;
                this.clearStatus.defer(wait, this, [c]);
            }
            return this;
        },

        /**
         * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
         * @param {Object} config (optional) A config object containing any or all of the following properties.  If this
         * object is not specified the status will be cleared using the defaults below:
         * anim {Boolean} : (optional) True to clear the status by fading out the status element (defaults
         * to false which clears immediately).
         * useDefaults {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and
         * {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).
         *
         * @return {Ext.ux.StatusBar} this
         */
        clearStatus : function(o){
            o = o || {};

            if(o.threadId && o.threadId !== this.activeThreadId){
                // this means the current call was made internally, but a newer
                // thread has set a message since this call was deferred.  Since
                // we don't want to overwrite a newer message just ignore.
                return this;
            }

            var text = o.useDefaults ? this.defaultText : this.emptyText,
                iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';

            if(o.anim){
                // animate the statusEl Ext.Element
                this.statusEl.el.fadeOut({
                    remove: false,
                    useDisplay: true,
                    scope: this,
                    callback: function(){
                        this.setStatus({
    	                    text: text,
    	                    iconCls: iconCls
    	                });

                        this.statusEl.el.show();
                    }
                });
            }else{
                // hide/show the el to avoid jumpy text or icon
                this.statusEl.hide();
    	        this.setStatus({
    	            text: text,
    	            iconCls: iconCls
    	        });
                this.statusEl.show();
            }
            return this;
        },

        /**
         * Convenience method for setting the status text directly.  For more flexible options see {@link #setStatus}.
         * @param {String} text (optional) The text to set (defaults to '')
         * @return {Ext.ux.StatusBar} this
         */
        setText : function(text){
            this.activeThreadId++;
            this.text = text || '';
            if(this.rendered){
                this.statusEl.setText(this.text);
            }
            return this;
        },

        /**
         * Returns the current status text.
         * @return {String} The status text
         */
        getText : function(){
            return this.text;
        },

        /**
         * Convenience method for setting the status icon directly.  For more flexible options see {@link #setStatus}.
         * See {@link #iconCls} for complete details about customizing the icon.
         * @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)
         * @return {Ext.ux.StatusBar} this
         */
        setIcon : function(cls){
            this.activeThreadId++;
            cls = cls || '';

            if(this.rendered){
    	        if(this.currIconCls){
    	            this.statusEl.removeClass(this.currIconCls);
    	            this.currIconCls = null;
    	        }
    	        if(cls.length > 0){
    	            this.statusEl.addClass(cls);
    	            this.currIconCls = cls;
    	        }
            }else{
                this.currIconCls = cls;
            }
            return this;
        },

        /**
         * Convenience method for setting the status text and icon to special values that are pre-configured to indicate
         * a "busy" state, usually for loading or processing activities.
         * @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
         * string to use as the status text (in which case all other options for setStatus will be defaulted).  Use the
         * text and/or iconCls properties on the config to override the default {@link #busyText}
         * and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and
         * {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
         * @return {Ext.ux.StatusBar} this
         */
        showBusy : function(o){
            if(typeof o == 'string'){
                o = {text:o};
            }
            o = Ext.applyIf(o || {}, {
                text: this.busyText,
                iconCls: this.busyIconCls
            });
            return this.setStatus(o);
        }
    });
    Ext.reg('statusbar', Ext.ux.StatusBar);
    /**
     * @class Ext.ux.TabCloseMenu
     * @extends Object
     * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs. Note that the menu respects
     * the closable configuration on the tab. As such, commands like remove others and remove all will not
     * remove items that are not closable.
     *
     * @constructor
     * @param {Object} config The configuration options
     * @ptype tabclosemenu
     */
    Ext.ux.TabCloseMenu = Ext.extend(Object, {
        /**
         * @cfg {String} closeTabText
         * The text for closing the current tab. Defaults to 'Close Tab'.
         */
        closeTabText: 'Close Tab',

        /**
         * @cfg {String} closeOtherTabsText
         * The text for closing all tabs except the current one. Defaults to 'Close Other Tabs'.
         */
        closeOtherTabsText: 'Close Other Tabs',

        /**
         * @cfg {Boolean} showCloseAll
         * Indicates whether to show the 'Close All' option. Defaults to true.
         */
        showCloseAll: true,

        /**
         * @cfg {String} closeAllTabsText
         * The text for closing all tabs. Defaults to 'Close All Tabs'.
         */
        closeAllTabsText: 'Close All Tabs',

        constructor : function(config){
            Ext.apply(this, config || {});
        },

        //public
        init : function(tabs){
            this.tabs = tabs;
            tabs.on({
                scope: this,
                contextmenu: this.onContextMenu,
                destroy: this.destroy
            });
        },

        destroy : function(){
            Ext.destroy(this.menu);
            delete this.menu;
            delete this.tabs;
            delete this.active;
        },

        // private
        onContextMenu : function(tabs, item, e){
            this.active = item;
            var m = this.createMenu(),
                disableAll = true,
                disableOthers = true,
                closeAll = m.getComponent('closeall');

            m.getComponent('close').setDisabled(!item.closable);
            tabs.items.each(function(){
                if(this.closable){
                    disableAll = false;
                    if(this != item){
                        disableOthers = false;
                        return false;
                    }
                }
            });
            m.getComponent('closeothers').setDisabled(disableOthers);
            if(closeAll){
                closeAll.setDisabled(disableAll);
            }

            e.stopEvent();
            m.showAt(e.getPoint());
        },

        createMenu : function(){
            if(!this.menu){
                var items = [{
                    itemId: 'close',
                    text: this.closeTabText,
                    scope: this,
                    handler: this.onClose
                }];
                if(this.showCloseAll){
                    items.push('-');
                }
                items.push({
                    itemId: 'closeothers',
                    text: this.closeOtherTabsText,
                    scope: this,
                    handler: this.onCloseOthers
                });
                if(this.showCloseAll){
                    items.push({
                        itemId: 'closeall',
                        text: this.closeAllTabsText,
                        scope: this,
                        handler: this.onCloseAll
                    });
                }
                this.menu = new Ext.menu.Menu({
                    items: items
                });
            }
            return this.menu;
        },

        onClose : function(){
            this.tabs.remove(this.active);
        },

        onCloseOthers : function(){
            this.doClose(true);
        },

        onCloseAll : function(){
            this.doClose(false);
        },

        doClose : function(excludeActive){
            var items = [];
            this.tabs.items.each(function(item){
                if(item.closable){
                    if(!excludeActive || item != this.active){
                        items.push(item);
                    }
                }
            }, this);
            Ext.each(items, function(item){
                this.tabs.remove(item);
            }, this);
        }
    });

    Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);Ext.ns('Ext.ux.grid');

    /**
     * @class Ext.ux.grid.TableGrid
     * @extends Ext.grid.GridPanel
     * A Grid which creates itself from an existing HTML table element.
     * @history
     * 2007-03-01 Original version by Nige "Animal" White
     * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
     * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
     * The table MUST have some type of size defined for the grid to fill. The container will be
     * automatically set to position relative if it isn't already.
     * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
     * properties: fields and columns which allow for customizing data fields and columns for this grid.
     */
    Ext.ux.grid.TableGrid = function(table, config){
        config = config ||
        {};
        Ext.apply(this, config);
        var cf = config.fields || [], ch = config.columns || [];
        table = Ext.get(table);

        var ct = table.insertSibling();

        var fields = [], cols = [];
        var headers = table.query("thead th");
        for (var i = 0, h; h = headers[i]; i++) {
            var text = h.innerHTML;
            var name = 'tcol-' + i;

            fields.push(Ext.applyIf(cf[i] ||
            {}, {
                name: name,
                mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
            }));

            cols.push(Ext.applyIf(ch[i] ||
            {}, {
                'header': text,
                'dataIndex': name,
                'width': h.offsetWidth,
                'tooltip': h.title,
                'sortable': true
            }));
        }

        var ds = new Ext.data.Store({
            reader: new Ext.data.XmlReader({
                record: 'tbody tr'
            }, fields)
        });

        ds.loadData(table.dom);

        var cm = new Ext.grid.ColumnModel(cols);

        if (config.width || config.height) {
            ct.setSize(config.width || 'auto', config.height || 'auto');
        }
        else {
            ct.setWidth(table.getWidth());
        }

        if (config.remove !== false) {
            table.remove();
        }

        Ext.applyIf(this, {
            'ds': ds,
            'cm': cm,
            'sm': new Ext.grid.RowSelectionModel(),
            autoHeight: true,
            autoWidth: false
        });
        Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {});
    };

    Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);

    //backwards compat
    Ext.grid.TableGrid = Ext.ux.grid.TableGrid;
    Ext.ns('Ext.ux');
    /**
     * @class Ext.ux.TabScrollerMenu
     * @extends Object
     * Plugin (ptype = 'tabscrollermenu') for adding a tab scroller menu to tabs.
     * @constructor
     * @param {Object} config Configuration options
     * @ptype tabscrollermenu
     */
    Ext.ux.TabScrollerMenu =  Ext.extend(Object, {
        /**
         * @cfg {Number} pageSize How many items to allow per submenu.
         */
    	pageSize       : 10,
        /**
         * @cfg {Number} maxText How long should the title of each {@link Ext.menu.Item} be.
         */
    	maxText        : 15,
        /**
         * @cfg {String} menuPrefixText Text to prefix the submenus.
         */
    	menuPrefixText : 'Items',
    	constructor    : function(config) {
    		config = config || {};
    		Ext.apply(this, config);
    	},
        //private
    	init : function(tabPanel) {
    		Ext.apply(tabPanel, this.parentOverrides);

    		tabPanel.tabScrollerMenu = this;
    		var thisRef = this;

    		tabPanel.on({
    			render : {
    				scope  : tabPanel,
    				single : true,
    				fn     : function() {
    					var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
    					tabPanel.createScrollers = newFn;
    				}
    			}
    		});
    	},
    	// private && sequeneced
    	createPanelsMenu : function() {
    		var h = this.stripWrap.dom.offsetHeight;

    		//move the right menu item to the left 18px
    		var rtScrBtn = this.header.dom.firstChild;
    		Ext.fly(rtScrBtn).applyStyles({
    			right : '18px'
    		});

    		var stripWrap = Ext.get(this.strip.dom.parentNode);
    		stripWrap.applyStyles({
    			 'margin-right' : '36px'
    		});

    		// Add the new righthand menu
    		var scrollMenu = this.header.insertFirst({
    			cls:'x-tab-tabmenu-right'
    		});
    		scrollMenu.setHeight(h);
    		scrollMenu.addClassOnOver('x-tab-tabmenu-over');
    		scrollMenu.on('click', this.showTabsMenu, this);

    		this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
    			scrollMenu.show();
    		});

    		this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
    			scrollMenu.hide();
    		});

    	},
        /**
         * Returns an the current page size (this.pageSize);
         * @return {Number} this.pageSize The current page size.
         */
    	getPageSize : function() {
    		return this.pageSize;
    	},
        /**
         * Sets the number of menu items per submenu "page size".
         * @param {Number} pageSize The page size
         */
        setPageSize : function(pageSize) {
    		this.pageSize = pageSize;
    	},
        /**
         * Returns the current maxText length;
         * @return {Number} this.maxText The current max text length.
         */
        getMaxText : function() {
    		return this.maxText;
    	},
        /**
         * Sets the maximum text size for each menu item.
         * @param {Number} t The max text per each menu item.
         */
        setMaxText : function(t) {
    		this.maxText = t;
    	},
        /**
         * Returns the current menu prefix text String.;
         * @return {String} this.menuPrefixText The current menu prefix text.
         */
    	getMenuPrefixText : function() {
    		return this.menuPrefixText;
    	},
        /**
         * Sets the menu prefix text String.
         * @param {String} t The menu prefix text.
         */
    	setMenuPrefixText : function(t) {
    		this.menuPrefixText = t;
    	},
    	// private && applied to the tab panel itself.
    	parentOverrides : {
    		// all execute within the scope of the tab panel
    		// private
    		showTabsMenu : function(e) {
    			if  (this.tabsMenu) {
    				this.tabsMenu.destroy();
                    this.un('destroy', this.tabsMenu.destroy, this.tabsMenu);
                    this.tabsMenu = null;
    			}
                this.tabsMenu =  new Ext.menu.Menu();
                this.on('destroy', this.tabsMenu.destroy, this.tabsMenu);

                this.generateTabMenuItems();

                var target = Ext.get(e.getTarget());
    			var xy     = target.getXY();
    //
    			//Y param + 24 pixels
    			xy[1] += 24;

    			this.tabsMenu.showAt(xy);
    		},
    		// private
    		generateTabMenuItems : function() {
    			var curActive  = this.getActiveTab();
    			var totalItems = this.items.getCount();
    			var pageSize   = this.tabScrollerMenu.getPageSize();

    			if (totalItems > pageSize)  {
    				var numSubMenus = Math.floor(totalItems / pageSize);
    				var remainder   = totalItems % pageSize;

    				// Loop through all of the items and create submenus in chunks of 10
    				for (var i = 0 ; i < numSubMenus; i++) {
    					var curPage = (i + 1) * pageSize;
    					var menuItems = [];

    					for (var x = 0; x < pageSize; x++) {
    						index = x + curPage - pageSize;
    						var item = this.items.get(index);
    						menuItems.push(this.autoGenMenuItem(item));
    					}

    					this.tabsMenu.add({
    						text : this.tabScrollerMenu.getMenuPrefixText() + ' '  + (curPage - pageSize + 1) + ' - ' + curPage,
    						menu : menuItems
    					});

    				}
    				// remaining items
    				if (remainder > 0) {
    					var start = numSubMenus * pageSize;
    					menuItems = [];
    					for (var i = start ; i < totalItems; i ++ ) {
    						var item = this.items.get(i);
    						menuItems.push(this.autoGenMenuItem(item));
    					}

    					this.tabsMenu.add({
    						text : this.tabScrollerMenu.menuPrefixText  + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
    						menu : menuItems
    					});

    				}
    			}
    			else {
    				this.items.each(function(item) {
    					if (item.id != curActive.id && !item.hidden) {
                            this.tabsMenu.add(this.autoGenMenuItem(item));
    					}
    				}, this);
    			}
    		},
    		// private
    		autoGenMenuItem : function(item) {
    			var maxText = this.tabScrollerMenu.getMaxText();
    			var text    = Ext.util.Format.ellipsis(item.title, maxText);

    			return {
    				text      : text,
    				handler   : this.showTabFromMenu,
    				scope     : this,
    				disabled  : item.disabled,
    				tabToShow : item,
    				iconCls   : item.iconCls
    			}

    		},
    		// private
    		showTabFromMenu : function(menuItem) {
    			this.setActiveTab(menuItem.tabToShow);
    		}
    	}
    });

    Ext.reg('tabscrollermenu', Ext.ux.TabScrollerMenu);
    Ext.ns('Ext.ux.tree');

    /**
     * @class Ext.ux.tree.XmlTreeLoader
     * @extends Ext.tree.TreeLoader
     * A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
     * Any text value included as a text node in the XML will be added to the parent node as an attribute
     * called innerText.  Also, the tag name of each XML node will be added to the tree node as
     * an attribute called tagName.
     * By default, this class expects that your source XML will provide the necessary attributes on each
     * node as expected by the {@link Ext.tree.TreePanel} to display and load properly.  However, you can
     * provide your own custom processing of node attributes by overriding the {@link #processNode} method
     * and modifying the attributes as needed before they are used to create the associated TreeNode.
     * @constructor
     * Creates a new XmlTreeloader.
     * @param {Object} config A config object containing config properties.
     */
    Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
        /**
         * @property  XML_NODE_ELEMENT
         * XML element node (value 1, read-only)
         * @type Number
         */
        XML_NODE_ELEMENT : 1,
        /**
         * @property  XML_NODE_TEXT
         * XML text node (value 3, read-only)
         * @type Number
         */
        XML_NODE_TEXT : 3,

        // private override
        processResponse : function(response, node, callback){
            var xmlData = response.responseXML,
                root = xmlData.documentElement || xmlData;

            try{
                node.beginUpdate();
                node.appendChild(this.parseXml(root));
                node.endUpdate();

                this.runCallback(callback, scope || node, [node]);
            }catch(e){
                this.handleFailure(response);
            }
        },

        // private
        parseXml : function(node) {
            var nodes = [];
            Ext.each(node.childNodes, function(n){
                if(n.nodeType == this.XML_NODE_ELEMENT){
                    var treeNode = this.createNode(n);
                    if(n.childNodes.length > 0){
                        var child = this.parseXml(n);
                        if(typeof child == 'string'){
                            treeNode.attributes.innerText = child;
                        }else{
                            treeNode.appendChild(child);
                        }
                    }
                    nodes.push(treeNode);
                }
                else if(n.nodeType == this.XML_NODE_TEXT){
                    var text = n.nodeValue.trim();
                    if(text.length > 0){
                        return nodes = text;
                    }
                }
            }, this);

            return nodes;
        },

        // private override
        createNode : function(node){
            var attr = {
                tagName: node.tagName
            };

            Ext.each(node.attributes, function(a){
                attr[a.nodeName] = a.nodeValue;
            });

            this.processAttributes(attr);

            return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr);
        },

        /*
         * Template method intended to be overridden by subclasses that need to provide
         * custom attribute processing prior to the creation of each TreeNode.  This method
         * will be passed a config object containing existing TreeNode attribute name/value
         * pairs which can be modified as needed directly (no need to return the object).
         */
        processAttributes: Ext.emptyFn
    });

    //backwards compat
    Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;
    /**
     * @class Ext.ux.ValidationStatus
     * A {@link Ext.StatusBar} plugin that provides automatic error notification when the
     * associated form contains validation errors.
     * @extends Ext.Component
     * @constructor
     * Creates a new ValiationStatus plugin
     * @param {Object} config A config object
     */
    Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
        /**
         * @cfg {String} errorIconCls
         * The {@link #iconCls} value to be applied to the status message when there is a
         * validation error. Defaults to 'x-status-error'.
         */
        errorIconCls : 'x-status-error',
        /**
         * @cfg {String} errorListCls
         * The css class to be used for the error list when there are validation errors.
         * Defaults to 'x-status-error-list'.
         */
        errorListCls : 'x-status-error-list',
        /**
         * @cfg {String} validIconCls
         * The {@link #iconCls} value to be applied to the status message when the form
         * validates. Defaults to 'x-status-valid'.
         */
        validIconCls : 'x-status-valid',

        /**
         * @cfg {String} showText
         * The {@link #text} value to be applied when there is a form validation error.
         * Defaults to 'The form has errors (click for details...)'.
         */
        showText : 'The form has errors (click for details...)',
        /**
         * @cfg {String} showText
         * The {@link #text} value to display when the error list is displayed.
         * Defaults to 'Click again to hide the error list'.
         */
        hideText : 'Click again to hide the error list',
        /**
         * @cfg {String} submitText
         * The {@link #text} value to be applied when the form is being submitted.
         * Defaults to 'Saving...'.
         */
        submitText : 'Saving...',

        // private
        init : function(sb){
            sb.on('render', function(){
                this.statusBar = sb;
                this.monitor = true;
                this.errors = new Ext.util.MixedCollection();
                this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');

                if(this.form){
                    this.form = Ext.getCmp(this.form).getForm();
                    this.startMonitoring();
                    this.form.on('beforeaction', function(f, action){
                        if(action.type == 'submit'){
                            // Ignore monitoring while submitting otherwise the field validation
                            // events cause the status message to reset too early
                            this.monitor = false;
                        }
                    }, this);
                    var startMonitor = function(){
                        this.monitor = true;
                    };
                    this.form.on('actioncomplete', startMonitor, this);
                    this.form.on('actionfailed', startMonitor, this);
                }
            }, this, {single:true});
            sb.on({
                scope: this,
                afterlayout:{
                    single: true,
                    fn: function(){
                        // Grab the statusEl after the first layout.
                        sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});
                    }
                },
                beforedestroy:{
                    single: true,
                    fn: this.onDestroy
                }
            });
        },

        // private
        startMonitoring : function(){
            this.form.items.each(function(f){
                f.on('invalid', this.onFieldValidation, this);
                f.on('valid', this.onFieldValidation, this);
            }, this);
        },

        // private
        stopMonitoring : function(){
            this.form.items.each(function(f){
                f.un('invalid', this.onFieldValidation, this);
                f.un('valid', this.onFieldValidation, this);
            }, this);
        },

        // private
        onDestroy : function(){
            this.stopMonitoring();
            this.statusBar.statusEl.un('click', this.onStatusClick, this);
            Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
        },

        // private
        onFieldValidation : function(f, msg){
            if(!this.monitor){
                return false;
            }
            if(msg){
                this.errors.add(f.id, {field:f, msg:msg});
            }else{
                this.errors.removeKey(f.id);
            }
            this.updateErrorList();
            if(this.errors.getCount() > 0){
                if(this.statusBar.getText() != this.showText){
                    this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
                }
            }else{
                this.statusBar.clearStatus().setIcon(this.validIconCls);
            }
        },

        // private
        updateErrorList : function(){
            if(this.errors.getCount() > 0){
    	        var msg = '';
    	        this.errors.each(function(err){
    	            msg += ('' + err.msg + '');
    	        }, this);
    	        this.getMsgEl().update(msg+'');
            }else{
                this.getMsgEl().update('');
            }
        },

        // private
        getMsgEl : function(){
            if(!this.msgEl){
                this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
                    cls: this.errorListCls+' x-hide-offsets'
                }, true);

                this.msgEl.on('click', function(e){
                    var t = e.getTarget('li', 10, true);
                    if(t){
                        Ext.getCmp(t.id.split('x-err-')[1]).focus();
                        this.hideErrors();
                    }
                }, this, {stopEvent:true}); // prevent anchor click navigation
            }
            return this.msgEl;
        },

        // private
        showErrors : function(){
            this.updateErrorList();
            this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:0.3, easing:'easeOut'});
            this.statusBar.setText(this.hideText);
            this.form.getEl().on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
        },

        // private
        hideErrors : function(){
            var el = this.getMsgEl();
            if(el.isVisible()){
    	        el.slideOut('b', {duration:0.2, easing:'easeIn'});
    	        this.statusBar.setText(this.showText);
            }
            this.form.getEl().un('click', this.hideErrors, this);
        },

        // private
        onStatusClick : function(){
            if(this.getMsgEl().isVisible()){
                this.hideErrors();
            }else if(this.errors.getCount() > 0){
                this.showErrors();
            }
        }
    });(function() {
        Ext.override(Ext.list.Column, {
            init : function() {
                var types = Ext.data.Types,
                    st = this.sortType;

                if(this.type){
                    if(Ext.isString(this.type)){
                        this.type = Ext.data.Types[this.type.toUpperCase()] || types.AUTO;
                    }
                }else{
                    this.type = types.AUTO;
                }

                // named sortTypes are supported, here we look them up
                if(Ext.isString(st)){
                    this.sortType = Ext.data.SortTypes[st];
                }else if(Ext.isEmpty(st)){
                    this.sortType = this.type.sortType;
                }
            }
        });

        Ext.tree.Column = Ext.extend(Ext.list.Column, {});
        Ext.tree.NumberColumn = Ext.extend(Ext.list.NumberColumn, {});
        Ext.tree.DateColumn = Ext.extend(Ext.list.DateColumn, {});
        Ext.tree.BooleanColumn = Ext.extend(Ext.list.BooleanColumn, {});

        Ext.reg('tgcolumn', Ext.tree.Column);
        Ext.reg('tgnumbercolumn', Ext.tree.NumberColumn);
        Ext.reg('tgdatecolumn', Ext.tree.DateColumn);
        Ext.reg('tgbooleancolumn', Ext.tree.BooleanColumn);
    })();
    /**
     * @class Ext.ux.tree.TreeGridNodeUI
     * @extends Ext.tree.TreeNodeUI
     */
    Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
        isTreeGridNodeUI: true,

        renderElements : function(n, a, targetNode, bulkRender){
            var t = n.getOwnerTree(),
                cols = t.columns,
                c = cols[0],
                i, buf, len;

            this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

            buf = [
                 '',
                    '',
                        '',
                            '', this.indentMarkup, "",
                            '',
                            '',
                            '',
                            '', (c.tpl ? c.tpl.apply(a) : a[c.dataIndex] || c.text), '',
                        ''
            ];

            for(i = 1, len = cols.length; i < len; i++){
                c = cols[i];
                buf.push(
                        '',
                            '',
                                (c.tpl ? c.tpl.apply(a) : a[c.dataIndex]),
                            '',
                        ''
                );
            }

            buf.push(
                '',
                ''
            );
            for(i = 0, len = cols.length; i');
            }
            buf.push('');

            if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
                this.wrap = Ext.DomHelper.insertHtml("beforeBegin", n.nextSibling.ui.getEl(), buf.join(''));
            }else{
                this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(''));
            }

            this.elNode = this.wrap.childNodes[0];
            this.ctNode = this.wrap.childNodes[1].firstChild.firstChild;
            var cs = this.elNode.firstChild.childNodes;
            this.indentNode = cs[0];
            this.ecNode = cs[1];
            this.iconNode = cs[2];
            this.anchor = cs[3];
            this.textNode = cs[3].firstChild;
        },

        // private
        animExpand : function(cb){
            this.ctNode.style.display = "";
            Ext.ux.tree.TreeGridNodeUI.superclass.animExpand.call(this, cb);
        }
    });

    Ext.ux.tree.TreeGridRootNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
        isTreeGridNodeUI: true,

        // private
        render : function(){
            if(!this.rendered){
                this.wrap = this.ctNode = this.node.ownerTree.innerCt.dom;
                this.node.expanded = true;
            }

            if(Ext.isWebKit) {
                // weird table-layout: fixed issue in webkit
                var ct = this.ctNode;
                ct.style.tableLayout = null;
                (function() {
                    ct.style.tableLayout = 'fixed';
                }).defer(1);
            }
        },

        destroy : function(){
            if(this.elNode){
                Ext.dd.Registry.unregister(this.elNode.id);
            }
            delete this.node;
        },

        collapse : Ext.emptyFn,
        expand : Ext.emptyFn
    });/**
     * @class Ext.tree.ColumnResizer
     * @extends Ext.util.Observable
     */
    Ext.tree.ColumnResizer = Ext.extend(Ext.util.Observable, {
        /**
         * @cfg {Number} minWidth The minimum width the column can be dragged to.
         * Defaults to 14.
         */
        minWidth: 14,

        constructor: function(config){
            Ext.apply(this, config);
            Ext.tree.ColumnResizer.superclass.constructor.call(this);
        },

        init : function(tree){
            this.tree = tree;
            tree.on('render', this.initEvents, this);
        },

        initEvents : function(tree){
            tree.mon(tree.innerHd, 'mousemove', this.handleHdMove, this);
            this.tracker = new Ext.dd.DragTracker({
                onBeforeStart: this.onBeforeStart.createDelegate(this),
                onStart: this.onStart.createDelegate(this),
                onDrag: this.onDrag.createDelegate(this),
                onEnd: this.onEnd.createDelegate(this),
                tolerance: 3,
                autoStart: 300
            });
            this.tracker.initEl(tree.innerHd);
            tree.on('beforedestroy', this.tracker.destroy, this.tracker);
        },

        handleHdMove : function(e, t){
            var hw = 5,
                x = e.getPageX(),
                hd = e.getTarget('.x-treegrid-hd', 3, true);

            if(hd){
                var r = hd.getRegion(),
                    ss = hd.dom.style,
                    pn = hd.dom.parentNode;

                if(x - r.left <= hw && hd.dom !== pn.firstChild) {
                    var ps = hd.dom.previousSibling;
                    while(ps && Ext.fly(ps).hasClass('x-treegrid-hd-hidden')) {
                        ps = ps.previousSibling;
                    }
                    if(ps) {
                        this.activeHd = Ext.get(ps);
        				ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
                    }
                } else if(r.right - x <= hw) {
                    var ns = hd.dom;
                    while(ns && Ext.fly(ns).hasClass('x-treegrid-hd-hidden')) {
                        ns = ns.previousSibling;
                    }
                    if(ns) {
                        this.activeHd = Ext.get(ns);
        				ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
                    }
                } else{
                    delete this.activeHd;
                    ss.cursor = '';
                }
            }
        },

        onBeforeStart : function(e){
            this.dragHd = this.activeHd;
            return !!this.dragHd;
        },

        onStart : function(e){
            this.dragHeadersDisabled = this.tree.headersDisabled;
            this.tree.headersDisabled = true;
            this.proxy = this.tree.body.createChild({cls:'x-treegrid-resizer'});
            this.proxy.setHeight(this.tree.body.getHeight());

            var x = this.tracker.getXY()[0];

            this.hdX = this.dragHd.getX();
            this.hdIndex = this.tree.findHeaderIndex(this.dragHd);

            this.proxy.setX(this.hdX);
            this.proxy.setWidth(x-this.hdX);

            this.maxWidth = this.tree.outerCt.getWidth() - this.tree.innerBody.translatePoints(this.hdX).left;
        },

        onDrag : function(e){
            var cursorX = this.tracker.getXY()[0];
            this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
        },

        onEnd : function(e){
            var nw = this.proxy.getWidth(),
                tree = this.tree,
                disabled = this.dragHeadersDisabled;

            this.proxy.remove();
            delete this.dragHd;

            tree.columns[this.hdIndex].width = nw;
            tree.updateColumnWidths();

            setTimeout(function(){
                tree.headersDisabled = disabled;
            }, 100);
        }
    });Ext.ns('Ext.ux.tree');

    /**
     * @class Ext.ux.tree.TreeGridSorter
     * @extends Ext.tree.TreeSorter
     * Provides sorting of nodes in a {@link Ext.ux.tree.TreeGrid}.  The TreeGridSorter automatically monitors events on the
     * associated TreeGrid that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).
     * Example usage:

     *
     new Ext.ux.tree.TreeGridSorter(myTreeGrid, {
         folderSort: true,
         dir: "desc",
         sortType: function(node) {
             // sort by a custom, typed attribute:
             return parseInt(node.id, 10);
         }
     });

     * @constructor
     * @param {TreeGrid} tree
     * @param {Object} config
     */
    Ext.ux.tree.TreeGridSorter = Ext.extend(Ext.tree.TreeSorter, {
        /**
         * @cfg {Array} sortClasses The CSS classes applied to a header when it is sorted. (defaults to ['sort-asc', 'sort-desc'])
         */
        sortClasses : ['sort-asc', 'sort-desc'],
        /**
         * @cfg {String} sortAscText The text displayed in the 'Sort Ascending' menu item (defaults to 'Sort Ascending')
         */
        sortAscText : 'Sort Ascending',
        /**
         * @cfg {String} sortDescText The text displayed in the 'Sort Descending' menu item (defaults to 'Sort Descending')
         */
        sortDescText : 'Sort Descending',

        constructor : function(tree, config) {
            if(!Ext.isObject(config)) {
                config = {
                    property: tree.columns[0].dataIndex || 'text',
                    folderSort: true
                }
            }

            Ext.ux.tree.TreeGridSorter.superclass.constructor.apply(this, arguments);

            this.tree = tree;
            tree.on('headerclick', this.onHeaderClick, this);
            tree.ddAppendOnly = true;

            var me = this;
            this.defaultSortFn = function(n1, n2){

                var desc = me.dir && me.dir.toLowerCase() == 'desc',
                    prop = me.property || 'text',
                    sortType = me.sortType,
                    caseSensitive = me.caseSensitive === true,
                    leafAttr = me.leafAttr || 'leaf',
                    attr1 = n1.attributes,
                    attr2 = n2.attributes;

                if(me.folderSort){
                    if(attr1[leafAttr] && !attr2[leafAttr]){
                        return 1;
                    }
                    if(!attr1[leafAttr] && attr2[leafAttr]){
                        return -1;
                    }
                }
                var prop1 = attr1[prop],
                    prop2 = attr2[prop],
                    v1 = sortType ? sortType(prop1) : (caseSensitive ? prop1 : prop1.toUpperCase());
                    v2 = sortType ? sortType(prop2) : (caseSensitive ? prop2 : prop2.toUpperCase());

                if(v1 < v2){
                    return desc ? +1 : -1;
                }else if(v1 > v2){
                    return desc ? -1 : +1;
                }else{
                    return 0;
                }
            };

            tree.on('afterrender', this.onAfterTreeRender, this, {single: true});
            tree.on('headermenuclick', this.onHeaderMenuClick, this);
        },

        onAfterTreeRender : function() {
            if(this.tree.hmenu){
                this.tree.hmenu.insert(0,
                    {itemId:'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
                    {itemId:'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
                );
            }
            this.updateSortIcon(0, 'asc');
        },

        onHeaderMenuClick : function(c, id, index) {
            if(id === 'asc' || id === 'desc') {
                this.onHeaderClick(c, null, index);
                return false;
            }
        },

        onHeaderClick : function(c, el, i) {
            if(c && !this.tree.headersDisabled){
                var me = this;

                me.property = c.dataIndex;
                me.dir = c.dir = (c.dir === 'desc' ? 'asc' : 'desc');
                me.sortType = c.sortType;
                me.caseSensitive === Ext.isBoolean(c.caseSensitive) ? c.caseSensitive : this.caseSensitive;
                me.sortFn = c.sortFn || this.defaultSortFn;

                this.tree.root.cascade(function(n) {
                    if(!n.isLeaf()) {
                        me.updateSort(me.tree, n);
                    }
                });

                this.updateSortIcon(i, c.dir);
            }
        },

        // private
        updateSortIcon : function(col, dir){
            var sc = this.sortClasses,
                hds = this.tree.innerHd.select('td').removeClass(sc);
            hds.item(col).addClass(sc[dir == 'desc' ? 1 : 0]);
        }
    });/**
     * @class Ext.ux.tree.TreeGridLoader
     * @extends Ext.tree.TreeLoader
     */
    Ext.ux.tree.TreeGridLoader = Ext.extend(Ext.tree.TreeLoader, {
        createNode : function(attr) {
            if (!attr.uiProvider) {
                attr.uiProvider = Ext.ux.tree.TreeGridNodeUI;
            }
            return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
        }
    });/**
     * @class Ext.ux.tree.TreeGrid
     * @extends Ext.tree.TreePanel
     *
     * @xtype treegrid
     */
    Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
        rootVisible : false,
        useArrows : true,
        lines : false,
        borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
        cls : 'x-treegrid',

        columnResize : true,
        enableSort : true,
        reserveScrollOffset : true,
        enableHdMenu : true,

        columnsText : 'Columns',

        initComponent : function() {
            if(!this.root) {
                this.root = new Ext.tree.AsyncTreeNode({text: 'Root'});
            }

            // initialize the loader
            var l = this.loader;
            if(!l){
                l = new Ext.ux.tree.TreeGridLoader({
                    dataUrl: this.dataUrl,
                    requestMethod: this.requestMethod,
                    store: this.store
                });
            }else if(Ext.isObject(l) && !l.load){
                l = new Ext.ux.tree.TreeGridLoader(l);
            }
            this.loader = l;

            Ext.ux.tree.TreeGrid.superclass.initComponent.call(this);

            this.initColumns();

            if(this.enableSort) {
                this.treeGridSorter = new Ext.ux.tree.TreeGridSorter(this, this.enableSort);
            }

            if(this.columnResize){
                this.colResizer = new Ext.tree.ColumnResizer(this.columnResize);
                this.colResizer.init(this);
            }

            var c = this.columns;
            if(!this.internalTpl){
                this.internalTpl = new Ext.XTemplate(
                    '',
                        '',
                            '',
                                '',
                                '',
                                '',
                                '',
                                    '',
                                         this.enableHdMenu ? '' : '',
                                         '{header}',
                                     '',
                                '',
                                '',
                            '',
                        '',
                    '',
                    '',
                        '',
                    ''
                );
            }

            if(!this.colgroupTpl) {
                this.colgroupTpl = new Ext.XTemplate(
                    ''
                );
            }
        },

        initColumns : function() {
            var cs = this.columns,
                len = cs.length,
                columns = [],
                i, c;

            for(i = 0; i < len; i++){
                c = cs[i];
                if(!c.isColumn) {
                    c.xtype = c.xtype ? (/^tg/.test(c.xtype) ? c.xtype : 'tg' + c.xtype) : 'tgcolumn';
                    c = Ext.create(c);
                }
                c.init(this);
                columns.push(c);

                if(this.enableSort !== false && c.sortable !== false) {
                    c.sortable = true;
                    this.enableSort = true;
                }
            }

            this.columns = columns;
        },

        onRender : function(){
            Ext.tree.TreePanel.superclass.onRender.apply(this, arguments);

            this.el.addClass('x-treegrid');

            this.outerCt = this.body.createChild({
                cls:'x-tree-root-ct x-treegrid-ct ' + (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')
            });

            this.internalTpl.overwrite(this.outerCt, {columns: this.columns});

            this.mainHd = Ext.get(this.outerCt.dom.firstChild);
            this.innerHd = Ext.get(this.mainHd.dom.firstChild);
            this.innerBody = Ext.get(this.outerCt.dom.lastChild);
            this.innerCt = Ext.get(this.innerBody.dom.firstChild);

            this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});

            if(this.hideHeaders){
                this.el.child('.x-grid3-header').setDisplayed('none');
            }
            else if(this.enableHdMenu !== false){
                this.hmenu = new Ext.menu.Menu({id: this.id + '-hctx'});
                if(this.enableColumnHide !== false){
                    this.colMenu = new Ext.menu.Menu({id: this.id + '-hcols-menu'});
                    this.colMenu.on({
                        scope: this,
                        beforeshow: this.beforeColMenuShow,
                        itemclick: this.handleHdMenuClick
                    });
                    this.hmenu.add({
                        itemId:'columns',
                        hideOnClick: false,
                        text: this.columnsText,
                        menu: this.colMenu,
                        iconCls: 'x-cols-icon'
                    });
                }
                this.hmenu.on('itemclick', this.handleHdMenuClick, this);
            }
        },

        setRootNode : function(node){
            node.attributes.uiProvider = Ext.ux.tree.TreeGridRootNodeUI;
            node = Ext.ux.tree.TreeGrid.superclass.setRootNode.call(this, node);
            if(this.innerCt) {
                this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});
            }
            return node;
        },

        clearInnerCt : function(){
            if(Ext.isIE){
                var dom = this.innerCt.dom;
                while(dom.firstChild){
                    dom.removeChild(dom.firstChild);
                }
            }else{
                Ext.ux.tree.TreeGrid.superclass.clearInnerCt.call(this);
            }
        },

        initEvents : function() {
            Ext.ux.tree.TreeGrid.superclass.initEvents.apply(this, arguments);

            this.mon(this.innerBody, 'scroll', this.syncScroll, this);
            this.mon(this.innerHd, 'click', this.handleHdDown, this);
            this.mon(this.mainHd, {
                scope: this,
                mouseover: this.handleHdOver,
                mouseout: this.handleHdOut
            });
        },

        onResize : function(w, h) {
            Ext.ux.tree.TreeGrid.superclass.onResize.apply(this, arguments);

            var bd = this.innerBody.dom;
            var hd = this.innerHd.dom;

            if(!bd){
                return;
            }

            if(Ext.isNumber(h)){
                bd.style.height = this.body.getHeight(true) - hd.offsetHeight + 'px';
            }

            if(Ext.isNumber(w)){
                var sw = Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
                if(this.reserveScrollOffset || ((bd.offsetWidth - bd.clientWidth) > 10)){
                    this.setScrollOffset(sw);
                }else{
                    var me = this;
                    setTimeout(function(){
                        me.setScrollOffset(bd.offsetWidth - bd.clientWidth > 10 ? sw : 0);
                    }, 10);
                }
            }
        },

        updateColumnWidths : function() {
            var cols = this.columns,
                colCount = cols.length,
                groups = this.outerCt.query('colgroup'),
                groupCount = groups.length,
                c, g, i, j;

            for(i = 0; i 0 && this.columns[index]) {
                    this.setColumnVisible(index, !item.checked);
                }
            }

            return true;
        },

        setColumnVisible : function(index, visible) {
            this.columns[index].hidden = !visible;
            this.updateColumnWidths();
        },

        /**
         * Scrolls the grid to the top
         */
        scrollToTop : function(){
            this.innerBody.dom.scrollTop = 0;
            this.innerBody.dom.scrollLeft = 0;
        },

        // private
        syncScroll : function(){
            this.syncHeaderScroll();
            var mb = this.innerBody.dom;
            this.fireEvent('bodyscroll', mb.scrollLeft, mb.scrollTop);
        },

        // private
        syncHeaderScroll : function(){
            var mb = this.innerBody.dom;
            this.innerHd.dom.scrollLeft = mb.scrollLeft;
            this.innerHd.dom.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
        },

        registerNode : function(n) {
            Ext.ux.tree.TreeGrid.superclass.registerNode.call(this, n);
            if(!n.uiProvider && !n.isRoot && !n.ui.isTreeGridNodeUI) {
                n.ui = new Ext.ux.tree.TreeGridNodeUI(n);
            }
        }
    });

    Ext.reg('treegrid', Ext.ux.tree.TreeGrid);