开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
ux-all-debug.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：193k
源码类别：

中间件编程

开发平台：

JavaScript

ux-all-debug.js：源码内容
  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.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(         '<div class="x-grid3-row {alt}" style="{tstyle}"></div>' ); ts.rowHolder.disableFormats = true; ts.rowHolder.compile(); ts.rowBody = new Ext.Template(         '<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">', '<tbody><tr>{cells}</tr>', (this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''), '</tbody></table>' ); 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(); var visibleHeight = this.scroller.dom.clientHeight; return (visibleHeight < 1) ? 0 : Math.ceil(visibleHeight / rh); }, getVisibleRows: function(){ var count = this.getVisibleRowCount(); var sc = this.scroller.dom.scrollTop; var 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; var rh = this.getStyleRowHeight(); var vr = this.getVisibleRows(); var tstyle = 'width:'+this.getTotalWidth()+';height:'+rh+'px;'; // buffers var 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); var 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 = "&#160;"; } 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(); } }, doUpdate: function(){ if (this.getVisibleRowCount() > 0) { var g = this.grid, cm = g.colModel, ds = g.store;         var cs = this.getColumnData();         var vr = this.getVisibleRows(); for (var i = vr.first; i <= vr.last; i++) { // if row is NOT rendered and is visible, render it if(!this.isRowRendered(i)){ var html = this.doRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true); this.getRow(i).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 = ''; } } } }, 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  * <p>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.</p>  * <p>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 <tt>autoHeight:true</tt> to allow it to autosize based on its content height.  * Example usage:</p>  * <pre><code> // 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'     }] }); </code></pre>  */ 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');
  3. /**
  4.  * @class Ext.ux.grid.CheckColumn
  5.  * @extends Object
  6.  * GridPanel plugin to add a column with check boxes to a grid.
  7.  * <p>Example usage:</p>
  8.  * <pre><code>
  9. // create the column
  10. var checkColumn = new Ext.grid.CheckColumn({
  11.    header: 'Indoor?',
  12.    dataIndex: 'indoor',
  13.    id: 'check',
  14.    width: 55
  15. });
  17. // add the column to the column model
  18. var cm = new Ext.grid.ColumnModel([{
  19.        header: 'Foo',
  20.        ...
  21.     },
  22.     checkColumn
  23. ]);
  25. // create the grid
  26. var grid = new Ext.grid.EditorGridPanel({
  27.     ...
  28.     cm: cm,
  29.     plugins: [checkColumn], // include plugin
  30.     ...
  31. });
  32.  * </code></pre>
  33.  * In addition to storing a Boolean value within the record data, this
  34.  * class toggles a css class between <tt>'x-grid3-check-col'</tt> and
  35.  * <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
  36.  * a column.
  37.  */
  38. Ext.ux.grid.CheckColumn = function(config){
  39.     Ext.apply(this, config);
  40.     if(!this.id){
  41.         this.id = Ext.id();
  42.     }
  43.     this.renderer = this.renderer.createDelegate(this);
  44. };
  46. Ext.ux.grid.CheckColumn.prototype ={
  47.     init : function(grid){
  48.         this.grid = grid;
  49.         this.grid.on('render', function(){
  50.             var view = this.grid.getView();
  51.             view.mainBody.on('mousedown', this.onMouseDown, this);
  52.         }, this);
  53.     },
  55.     onMouseDown : function(e, t){
  56.         if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
  57.             e.stopEvent();
  58.             var index = this.grid.getView().findRowIndex(t);
  59.             var record = this.grid.store.getAt(index);
  60.             record.set(this.dataIndex, !record.data[this.dataIndex]);
  61.         }
  62.     },
  64.     renderer : function(v, p, record){
  65.         p.css += ' x-grid3-check-col-td'; 
  66.         return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
  67.     }
  68. };
  70. // register ptype
  71. Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
  73. // backwards compat
  74. Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;Ext.ns('Ext.ux.tree');
  76. /**
  77.  * @class Ext.ux.tree.ColumnTree
  78.  * @extends Ext.tree.TreePanel
  79.  * 
  80.  * @xtype columntree
  81.  */
  82. Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
  83.     lines : false,
  84.     borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
  85.     cls : 'x-column-tree',
  87.     onRender : function(){
  88.         Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
  89.         this.headers = this.header.createChild({cls:'x-tree-headers'});
  91.         var cols = this.columns, c;
  92.         var totalWidth = 0;
  93.         var scrollOffset = 19; // similar to Ext.grid.GridView default
  95.         for(var i = 0, len = cols.length; i < len; i++){
  96.              c = cols[i];
  97.              totalWidth += c.width;
  98.              this.headers.createChild({
  99.                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
  100.                  cn: {
  101.                      cls:'x-tree-hd-text',
  102.                      html: c.header
  103.                  },
  104.                  style:'width:'+(c.width-this.borderWidth)+'px;'
  105.              });
  106.         }
  107.         this.headers.createChild({cls:'x-clear'});
  108.         // prevent floats from wrapping when clipped
  109.         this.headers.setWidth(totalWidth+scrollOffset);
  110.         this.innerCt.setWidth(totalWidth);
  111.     }
  112. });
  114. Ext.reg('columntree', Ext.ux.tree.ColumnTree);
  116. //backwards compat
  117. Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;
  120. /**
  121.  * @class Ext.ux.tree.ColumnNodeUI
  122.  * @extends Ext.tree.TreeNodeUI
  123.  */
  124. Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
  125.     focus: Ext.emptyFn, // prevent odd scrolling behavior
  127.     renderElements : function(n, a, targetNode, bulkRender){
  128.         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
  130.         var t = n.getOwnerTree();
  131.         var cols = t.columns;
  132.         var bw = t.borderWidth;
  133.         var c = cols[0];
  135.         var buf = [
  136.              '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
  137.                 '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
  138.                     '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
  139.                     '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
  140.                     '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
  141.                     '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
  142.                     a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
  143.                     '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
  144.                 "</div>"];
  145.          for(var i = 1, len = cols.length; i < len; i++){
  146.              c = cols[i];
  148.              buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
  149.                         '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
  150.                       "</div>");
  151.          }
  152.          buf.push(
  153.             '<div class="x-clear"></div></div>',
  154.             '<ul class="x-tree-node-ct" style="display:none;"></ul>',
  155.             "</li>");
  157.         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
  158.             this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
  159.                                 n.nextSibling.ui.getEl(), buf.join(""));
  160.         }else{
  161.             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
  162.         }
  164.         this.elNode = this.wrap.childNodes[0];
  165.         this.ctNode = this.wrap.childNodes[1];
  166.         var cs = this.elNode.firstChild.childNodes;
  167.         this.indentNode = cs[0];
  168.         this.ecNode = cs[1];
  169.         this.iconNode = cs[2];
  170.         this.anchor = cs[3];
  171.         this.textNode = cs[3].firstChild;
  172.     }
  173. });
  175. //backwards compat
  176. Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;
  177. /**
  178.  * @class Ext.DataView.LabelEditor
  179.  * @extends Ext.Editor
  180.  * 
  181.  */
  182. Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
  183.     alignment: "tl-tl",
  184.     hideEl : false,
  185.     cls: "x-small-editor",
  186.     shim: false,
  187.     completeOnEnter: true,
  188.     cancelOnEsc: true,
  189.     labelSelector: 'span.x-editable',
  190.     
  191.     constructor: function(cfg, field){
  192.         Ext.DataView.LabelEditor.superclass.constructor.call(this,
  193.             field || new Ext.form.TextField({
  194.                 allowBlank: false,
  195.                 growMin:90,
  196.                 growMax:240,
  197.                 grow:true,
  198.                 selectOnFocus:true
  199.             }), cfg
  200.         );
  201.     },
  202.     
  203.     init : function(view){
  204.         this.view = view;
  205.         view.on('render', this.initEditor, this);
  206.         this.on('complete', this.onSave, this);
  207.     },
  209.     initEditor : function(){
  210.         this.view.on({
  211.             scope: this,
  212.             containerclick: this.doBlur,
  213.             click: this.doBlur
  214.         });
  215.         this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
  216.     },
  217.     
  218.     doBlur: function(){
  219.         if(this.editing){
  220.             this.field.blur();
  221.         }
  222.     },
  224.     onMouseDown : function(e, target){
  225.         if(!e.ctrlKey && !e.shiftKey){
  226.             var item = this.view.findItemFromChild(target);
  227.             e.stopEvent();
  228.             var record = this.view.store.getAt(this.view.indexOf(item));
  229.             this.startEdit(target, record.data[this.dataIndex]);
  230.             this.activeRecord = record;
  231.         }else{
  232.             e.preventDefault();
  233.         }
  234.     },
  236.     onSave : function(ed, value){
  237.         this.activeRecord.set(this.dataIndex, value);
  238.     }
  239. });
  242. Ext.DataView.DragSelector = function(cfg){
  243.     cfg = cfg || {};
  244.     var view, proxy, tracker;
  245.     var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
  246.     var dragSafe = cfg.dragSafe === true;
  248.     this.init = function(dataView){
  249.         view = dataView;
  250.         view.on('render', onRender);
  251.     };
  253.     function fillRegions(){
  254.         rs = [];
  255.         view.all.each(function(el){
  256.             rs[rs.length] = el.getRegion();
  257.         });
  258.         bodyRegion = view.el.getRegion();
  259.     }
  261.     function cancelClick(){
  262.         return false;
  263.     }
  265.     function onBeforeStart(e){
  266.         return !dragSafe || e.target == view.el.dom;
  267.     }
  269.     function onStart(e){
  270.         view.on('containerclick', cancelClick, view, {single:true});
  271.         if(!proxy){
  272.             proxy = view.el.createChild({cls:'x-view-selector'});
  273.         }else{
  274.             proxy.setDisplayed('block');
  275.         }
  276.         fillRegions();
  277.         view.clearSelections();
  278.     }
  280.     function onDrag(e){
  281.         var startXY = tracker.startXY;
  282.         var xy = tracker.getXY();
  284.         var x = Math.min(startXY[0], xy[0]);
  285.         var y = Math.min(startXY[1], xy[1]);
  286.         var w = Math.abs(startXY[0] - xy[0]);
  287.         var h = Math.abs(startXY[1] - xy[1]);
  289.         dragRegion.left = x;
  290.         dragRegion.top = y;
  291.         dragRegion.right = x+w;
  292.         dragRegion.bottom = y+h;
  294.         dragRegion.constrainTo(bodyRegion);
  295.         proxy.setRegion(dragRegion);
  297.         for(var i = 0, len = rs.length; i < len; i++){
  298.             var r = rs[i], sel = dragRegion.intersect(r);
  299.             if(sel && !r.selected){
  300.                 r.selected = true;
  301.                 view.select(i, true);
  302.             }else if(!sel && r.selected){
  303.                 r.selected = false;
  304.                 view.deselect(i);
  305.             }
  306.         }
  307.     }
  309.     function onEnd(e){
  310.         if (!Ext.isIE) {
  311.             view.un('containerclick', cancelClick, view);    
  312.         }        
  313.         if(proxy){
  314.             proxy.setDisplayed(false);
  315.         }
  316.     }
  318.     function onRender(view){
  319.         tracker = new Ext.dd.DragTracker({
  320.             onBeforeStart: onBeforeStart,
  321.             onStart: onStart,
  322.             onDrag: onDrag,
  323.             onEnd: onEnd
  324.         });
  325.         tracker.initEl(view.el);
  326.     }
  327. };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.fileInput = this.wrap.createChild({             id: this.getFileInputId(),             name: this.name||this.getId(),             cls: 'x-form-file',             tag: 'input',             type: 'file',             size: 1         });         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.fileInput.on('change', function(){             var v = this.fileInput.dom.value;             this.setValue(v);             this.fireEvent('fileselected', this, v);         }, 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);     },     // private     preFocus : Ext.emptyFn,     // private     getResizeEl : function(){         return this.wrap;     },     // private     getPositionEl : function(){         return this.wrap;     },     // 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; (function(){
  328. Ext.ns('Ext.a11y');
  330. Ext.a11y.Frame = Ext.extend(Object, {
  331.     initialized: false,
  332.     
  333.     constructor: function(size, color){
  334.         this.setSize(size || 1);
  335.         this.setColor(color || '15428B');
  336.     },
  337.     
  338.     init: function(){
  339.         if (!this.initialized) {
  340.             this.sides = [];
  341.             
  342.             var s, i;
  343.             
  344.             this.ct = Ext.DomHelper.append(document.body, {
  345.                 cls: 'x-a11y-focusframe'
  346.             }, true);
  347.             
  348.             for (i = 0; i < 4; i++) {
  349.                 s = Ext.DomHelper.append(this.ct, {
  350.                     cls: 'x-a11y-focusframe-side',
  351.                     style: 'background-color: #' + this.color
  352.                 }, true);
  353.                 s.visibilityMode = Ext.Element.DISPLAY;
  354.                 this.sides.push(s);
  355.             }
  356.             
  357.             this.frameTask = new Ext.util.DelayedTask(function(el){
  358.                 var newEl = Ext.get(el);
  359.                 if (newEl != this.curEl) {
  360.                     var w = newEl.getWidth();
  361.                     var h = newEl.getHeight();
  362.                     this.sides[0].show().setSize(w, this.size).anchorTo(el, 'tl', [0, -1]);
  363.                     this.sides[2].show().setSize(w, this.size).anchorTo(el, 'bl', [0, -1]);
  364.                     this.sides[1].show().setSize(this.size, h).anchorTo(el, 'tr', [-1, 0]);
  365.                     this.sides[3].show().setSize(this.size, h).anchorTo(el, 'tl', [-1, 0]);
  366.                     this.curEl = newEl;
  367.                 }
  368.             }, this);
  369.             
  370.             this.unframeTask = new Ext.util.DelayedTask(function(){
  371.                 if (this.initialized) {
  372.                     this.sides[0].hide();
  373.                     this.sides[1].hide();
  374.                     this.sides[2].hide();
  375.                     this.sides[3].hide();
  376.                     this.curEl = null;
  377.                 }
  378.             }, this);
  379.             this.initialized = true;
  380.         }
  381.     },
  382.     
  383.     frame: function(el){
  384.         this.init();
  385.         this.unframeTask.cancel();
  386.         this.frameTask.delay(2, false, false, [el]);
  387.     },
  388.     
  389.     unframe: function(){
  390.         this.init();
  391.         this.unframeTask.delay(2);
  392.     },
  393.     
  394.     setSize: function(size){
  395.         this.size = size;
  396.     },
  397.     
  398.     setColor: function(color){
  399.         this.color = color;
  400.     }
  401. });
  403. Ext.a11y.FocusFrame = new Ext.a11y.Frame(2, '15428B');
  404. Ext.a11y.RelayFrame = new Ext.a11y.Frame(1, '6B8CBF');
  406. Ext.a11y.Focusable = Ext.extend(Ext.util.Observable, {
  407.     constructor: function(el, relayTo, noFrame, frameEl){
  408.         Ext.a11y.Focusable.superclass.constructor.call(this);
  409.         
  410.         this.addEvents('focus', 'blur', 'left', 'right', 'up', 'down', 'esc', 'enter', 'space');
  411.         
  412.         if (el instanceof Ext.Component) {
  413.             this.el = el.el;
  414.             this.setComponent(el);
  415.         }
  416.         else {
  417.             this.el = Ext.get(el);
  418.             this.setComponent(null);
  419.         }
  420.         
  421.         this.setRelayTo(relayTo)
  422.         this.setNoFrame(noFrame);
  423.         this.setFrameEl(frameEl);
  424.         
  425.         this.init();
  426.         
  427.         Ext.a11y.FocusMgr.register(this);
  428.     },
  429.     
  430.     init: function(){
  431.         this.el.dom.tabIndex = '1';
  432.         this.el.addClass('x-a11y-focusable');
  433.         this.el.on({
  434.             focus: this.onFocus,
  435.             blur: this.onBlur,
  436.             keydown: this.onKeyDown,
  437.             scope: this
  438.         });
  439.     },
  440.     
  441.     setRelayTo: function(relayTo){
  442.         this.relayTo = relayTo ? Ext.a11y.FocusMgr.get(relayTo) : null;
  443.     },
  444.     
  445.     setNoFrame: function(noFrame){
  446.         this.noFrame = (noFrame === true) ? true : false;
  447.     },
  448.     
  449.     setFrameEl: function(frameEl){
  450.         this.frameEl = frameEl && Ext.get(frameEl) || this.el;
  451.     },
  452.     
  453.     setComponent: function(cmp){
  454.         this.component = cmp || null;
  455.     },
  456.     
  457.     onKeyDown: function(e, t){
  458.         var k = e.getKey(), SK = Ext.a11y.Focusable.SpecialKeys, ret, tf;
  459.         
  460.         tf = (t !== this.el.dom) ? Ext.a11y.FocusMgr.get(t, true) : this;
  461.         if (!tf) {
  462.             // this can happen when you are on a focused item within a panel body
  463.             // that is not a Ext.a11y.Focusable
  464.             tf = Ext.a11y.FocusMgr.get(Ext.fly(t).parent('.x-a11y-focusable'));
  465.         }
  466.         
  467.         if (SK[k] !== undefined) {
  468.             ret = this.fireEvent(SK[k], e, t, tf, this);
  469.         }
  470.         if (ret === false || this.fireEvent('keydown', e, t, tf, this) === false) {
  471.             e.stopEvent();
  472.         }
  473.     },
  474.     
  475.     focus: function(){
  476.         this.el.dom.focus();
  477.     },
  478.     
  479.     blur: function(){
  480.         this.el.dom.blur();
  481.     },
  482.     
  483.     onFocus: function(e, t){
  484.         this.el.addClass('x-a11y-focused');
  485.         if (this.relayTo) {
  486.             this.relayTo.el.addClass('x-a11y-focused-relay');
  487.             if (!this.relayTo.noFrame) {
  488.                 Ext.a11y.FocusFrame.frame(this.relayTo.frameEl);
  489.             }
  490.             if (!this.noFrame) {
  491.                 Ext.a11y.RelayFrame.frame(this.frameEl);
  492.             }
  493.         }
  494.         else {
  495.             if (!this.noFrame) {
  496.                 Ext.a11y.FocusFrame.frame(this.frameEl);
  497.             }
  498.         }
  499.         
  500.         this.fireEvent('focus', e, t, this);
  501.     },
  502.     
  503.     onBlur: function(e, t){
  504.         if (this.relayTo) {
  505.             this.relayTo.el.removeClass('x-a11y-focused-relay');
  506.             Ext.a11y.RelayFrame.unframe();
  507.         }
  508.         this.el.removeClass('x-a11y-focused');
  509.         Ext.a11y.FocusFrame.unframe();
  510.         this.fireEvent('blur', e, t, this);
  511.     },
  512.     
  513.     destroy: function(){
  514.         this.el.un('keydown', this.onKeyDown);
  515.         this.el.un('focus', this.onFocus);
  516.         this.el.un('blur', this.onBlur);
  517.         this.el.removeClass('x-a11y-focusable');
  518.         this.el.removeClass('x-a11y-focused');
  519.         if (this.relayTo) {
  520.             this.relayTo.el.removeClass('x-a11y-focused-relay');
  521.         }
  522.     }
  523. });
  525. Ext.a11y.FocusItem = Ext.extend(Object, {
  526.     constructor: function(el, enableTabbing){
  527.         Ext.a11y.FocusItem.superclass.constructor.call(this);
  528.         
  529.         this.el = Ext.get(el);
  530.         this.fi = new Ext.a11y.Focusable(el);
  531.         this.fi.setComponent(this);
  532.         
  533.         this.fi.on('tab', this.onTab, this);
  534.         
  535.         this.enableTabbing = enableTabbing === true ? true : false;
  536.     },
  537.     
  538.     getEnterItem: function(){
  539.         if (this.enableTabbing) {
  540.             var items = this.getFocusItems();
  541.             if (items && items.length) {
  542.                 return items[0];
  543.             }
  544.         }
  545.     },
  546.     
  547.     getFocusItems: function(){
  548.         if (this.enableTabbing) {
  549.             return this.el.query('a, button, input, select');
  550.         }
  551.         return null;
  552.     },
  553.     
  554.     onTab: function(e, t){
  555.         var items = this.getFocusItems(), i;
  556.         
  557.         if (items && items.length && (i = items.indexOf(t)) !== -1) {
  558.             if (e.shiftKey && i > 0) {
  559.                 e.stopEvent();
  560.                 items[i - 1].focus();
  561.                 Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);
  562.                 return;
  563.             }
  564.             else 
  565.                 if (!e.shiftKey && i < items.length - 1) {
  566.                     e.stopEvent();
  567.                     items[i + 1].focus();
  568.                     Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);
  569.                     return;
  570.                 }
  571.         }
  572.     },
  573.     
  574.     focus: function(){
  575.         if (this.enableTabbing) {
  576.             var items = this.getFocusItems();
  577.             if (items && items.length) {
  578.                 items[0].focus();
  579.                 Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);
  580.                 return;
  581.             }
  582.         }
  583.         this.fi.focus();
  584.     },
  585.     
  586.     blur: function(){
  587.         this.fi.blur();
  588.     }
  589. });
  591. Ext.a11y.FocusMgr = function(){
  592.     var all = new Ext.util.MixedCollection();
  593.     
  594.     return {
  595.         register: function(f){
  596.             all.add(f.el && Ext.id(f.el), f);
  597.         },
  598.         
  599.         unregister: function(f){
  600.             all.remove(f);
  601.         },
  602.         
  603.         get: function(el, noCreate){
  604.             return all.get(Ext.id(el)) || (noCreate ? false : new Ext.a11y.Focusable(el));
  605.         },
  606.         
  607.         all: all
  608.     }
  609. }();
  611. Ext.a11y.Focusable.SpecialKeys = {};
  612. Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.LEFT] = 'left';
  613. Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.RIGHT] = 'right';
  614. Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.DOWN] = 'down';
  615. Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.UP] = 'up';
  616. Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.ESC] = 'esc';
  617. Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.ENTER] = 'enter';
  618. Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.SPACE] = 'space';
  619. Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.TAB] = 'tab';
  621. // we use the new observeClass method to fire our new initFocus method on components
  622. Ext.util.Observable.observeClass(Ext.Component);
  623. Ext.Component.on('render', function(cmp){
  624.     cmp.initFocus();
  625.     cmp.initARIA();
  626. });
  627. Ext.override(Ext.Component, {
  628.     initFocus: Ext.emptyFn,
  629.     initARIA: Ext.emptyFn
  630. });
  632. Ext.override(Ext.Container, {
  633.     isFocusable: true,
  634.     noFocus: false,
  635.     
  636.     // private
  637.     initFocus: function(){
  638.         if (!this.fi && !this.noFocus) {
  639.             this.fi = new Ext.a11y.Focusable(this);
  640.         }
  641.         this.mon(this.fi, {
  642.             focus: this.onFocus,
  643.             blur: this.onBlur,
  644.             tab: this.onTab,
  645.             enter: this.onEnter,
  646.             esc: this.onEsc,
  647.             scope: this
  648.         });
  649.         
  650.         if (this.hidden) {
  651.             this.isFocusable = false;
  652.         }
  653.         
  654.         this.on('show', function(){
  655.             this.isFocusable = true;
  656.         }, this);
  657.         this.on('hide', function(){
  658.             this.isFocusable = false;
  659.         }, this);
  660.     },
  661.     
  662.     focus: function(){
  663.         this.fi.focus();
  664.     },
  665.     
  666.     blur: function(){
  667.         this.fi.blur();
  668.     },
  669.     
  670.     enter: function(){
  671.         var eitem = this.getEnterItem();
  672.         if (eitem) {
  673.             eitem.focus();
  674.         }
  675.     },
  676.     
  677.     onFocus: Ext.emptyFn,
  678.     onBlur: Ext.emptyFn,
  679.     
  680.     onTab: function(e, t, tf){
  681.         var rf = tf.relayTo || tf;
  682.         if (rf.component && rf.component !== this) {
  683.             e.stopEvent();
  684.             var item = e.shiftKey ? this.getPreviousFocus(rf.component) : this.getNextFocus(rf.component);
  685.             item.focus();
  686.         }
  687.     },
  688.     
  689.     onEnter: function(e, t, tf){
  690.         // check to see if enter is pressed while "on" the panel
  691.         if (tf.component && tf.component === this) {
  692.             e.stopEvent();
  693.             this.enter();
  694.         }
  695.         e.stopPropagation();
  696.     },
  697.     
  698.     onEsc: function(e, t){
  699.         e.preventDefault();
  700.         
  701.         // check to see if esc is pressed while "inside" the panel
  702.         // or while "on" the panel
  703.         if (t === this.el.dom) {
  704.             // "on" the panel, check if this panel has an owner panel and focus that
  705.             // we dont stop the event in this case so that this same check will be
  706.             // done for this ownerCt
  707.             if (this.ownerCt) {
  708.                 this.ownerCt.focus();
  709.             }
  710.         }
  711.         else {
  712.             // we were inside the panel when esc was pressed,
  713.             // so go back "on" the panel
  714.             if (this.ownerCt && this.ownerCt.isFocusable) {
  715.                 var si = this.ownerCt.getFocusItems();
  716.                 
  717.                 if (si && si.getCount() > 1) {
  718.                     e.stopEvent();
  719.                 }
  720.             }
  721.             this.focus();
  722.         }
  723.     },
  724.     
  725.     getFocusItems: function(){
  726.         return this.items &&
  727.         this.items.filterBy(function(o){
  728.             return o.isFocusable;
  729.         }) ||
  730.         null;
  731.     },
  732.     
  733.     getEnterItem: function(){
  734.         var ci = this.getFocusItems(), length = ci ? ci.getCount() : 0;
  735.         
  736.         if (length === 1) {
  737.             return ci.first().getEnterItem && ci.first().getEnterItem() || ci.first();
  738.         }
  739.         else 
  740.             if (length > 1) {
  741.                 return ci.first();
  742.             }
  743.     },
  744.     
  745.     getNextFocus: function(current){
  746.         var items = this.getFocusItems(), next = current, i = items.indexOf(current), length = items.getCount();
  747.         
  748.         if (i === length - 1) {
  749.             next = items.first();
  750.         }
  751.         else {
  752.             next = items.get(i + 1);
  753.         }
  754.         return next;
  755.     },
  756.     
  757.     getPreviousFocus: function(current){
  758.         var items = this.getFocusItems(), prev = current, i = items.indexOf(current), length = items.getCount();
  759.         
  760.         if (i === 0) {
  761.             prev = items.last();
  762.         }
  763.         else {
  764.             prev = items.get(i - 1);
  765.         }
  766.         return prev;
  767.     },
  768.     
  769.     getFocusable : function() {
  770.         return this.fi;
  771.     }
  772. });
  774. Ext.override(Ext.Panel, {
  775.     /**
  776.      * @cfg {Boolean} enableTabbing <tt>true</tt> to enable tabbing. Default is <tt>false</tt>.
  777.      */        
  778.     getFocusItems: function(){
  779.         // items gets all the items inside the body
  780.         var items = Ext.Panel.superclass.getFocusItems.call(this), bodyFocus = null;
  781.         
  782.         if (!items) {
  783.             items = new Ext.util.MixedCollection();
  784.             this.bodyFocus = this.bodyFocus || new Ext.a11y.FocusItem(this.body, this.enableTabbing);
  785.             items.add('body', this.bodyFocus);
  786.         }
  787.         // but panels can also have tbar, bbar, fbar
  788.         if (this.tbar && this.topToolbar) {
  789.             items.insert(0, this.topToolbar);
  790.         }
  791.         if (this.bbar && this.bottomToolbar) {
  792.             items.add(this.bottomToolbar);
  793.         }
  794.         if (this.fbar) {
  795.             items.add(this.fbar);
  796.         }
  797.         
  798.         return items;
  799.     }
  800. });
  802. Ext.override(Ext.TabPanel, {
  803.     // private
  804.     initFocus: function(){
  805.         Ext.TabPanel.superclass.initFocus.call(this);
  806.         this.mon(this.fi, {
  807.             left: this.onLeft,
  808.             right: this.onRight,
  809.             scope: this
  810.         });
  811.     },
  812.     
  813.     onLeft: function(e){
  814.         if (!this.activeTab) {
  815.             return;
  816.         }
  817.         e.stopEvent();
  818.         var prev = this.items.itemAt(this.items.indexOf(this.activeTab) - 1);
  819.         if (prev) {
  820.             this.setActiveTab(prev);
  821.         }
  822.         return false;
  823.     },
  824.     
  825.     onRight: function(e){
  826.         if (!this.activeTab) {
  827.             return;
  828.         }
  829.         e.stopEvent();
  830.         var next = this.items.itemAt(this.items.indexOf(this.activeTab) + 1);
  831.         if (next) {
  832.             this.setActiveTab(next);
  833.         }
  834.         return false;
  835.     }
  836. });
  838. Ext.override(Ext.tree.TreeNodeUI, {
  839.     // private
  840.     focus: function(){
  841.         this.node.getOwnerTree().bodyFocus.focus();
  842.     }
  843. });
  845. Ext.override(Ext.tree.TreePanel, {
  846.     // private
  847.     afterRender : function(){
  848.         Ext.tree.TreePanel.superclass.afterRender.call(this);
  849.         this.root.render();
  850.         if(!this.rootVisible){
  851.             this.root.renderChildren();
  852.         }
  853.         this.bodyFocus = new Ext.a11y.FocusItem(this.body.down('.x-tree-root-ct'));
  854.         this.bodyFocus.fi.setFrameEl(this.body);
  855.     } 
  856. });
  858. Ext.override(Ext.grid.GridPanel, {
  859.     initFocus: function(){
  860.         Ext.grid.GridPanel.superclass.initFocus.call(this);
  861.         this.bodyFocus = new Ext.a11y.FocusItem(this.view.focusEl);
  862.         this.bodyFocus.fi.setFrameEl(this.body);
  863.     }
  864. });
  866. Ext.override(Ext.Button, {
  867.     isFocusable: true,
  868.     noFocus: false,
  869.     
  870.     initFocus: function(){
  871.         Ext.Button.superclass.initFocus.call(this);
  872.         this.fi = this.fi || new Ext.a11y.Focusable(this.btnEl, null, null, this.el);
  873.         this.fi.setComponent(this);
  874.         
  875.         this.mon(this.fi, {
  876.             focus: this.onFocus,
  877.             blur: this.onBlur,
  878.             scope: this
  879.         });
  880.         
  881.         if (this.menu) {
  882.             this.mon(this.fi, 'down', this.showMenu, this);
  883.             this.on('menuhide', this.focus, this);
  884.         }
  885.         
  886.         if (this.hidden) {
  887.             this.isFocusable = false;
  888.         }
  889.         
  890.         this.on('show', function(){
  891.             this.isFocusable = true;
  892.         }, this);
  893.         this.on('hide', function(){
  894.             this.isFocusable = false;
  895.         }, this);
  896.     },
  897.     
  898.     focus: function(){
  899.         this.fi.focus();
  900.     },
  901.     
  902.     blur: function(){
  903.         this.fi.blur();
  904.     },
  905.     
  906.     onFocus: function(){
  907.         if (!this.disabled) {
  908.             this.el.addClass("x-btn-focus");
  909.         }
  910.     },
  911.     
  912.     onBlur: function(){
  913.         this.el.removeClass("x-btn-focus");
  914.     }
  915. });
  917. Ext.override(Ext.Toolbar, {
  918.     initFocus: function(){
  919.         Ext.Toolbar.superclass.initFocus.call(this);
  920.         this.mon(this.fi, {
  921.             left: this.onLeft,
  922.             right: this.onRight,
  923.             scope: this
  924.         });
  925.         
  926.         this.on('focus', this.onButtonFocus, this, {
  927.             stopEvent: true
  928.         });
  929.     },
  930.     
  931.     addItem: function(item){
  932.         Ext.Toolbar.superclass.add.apply(this, arguments);
  933.         if (item.rendered && item.fi !== undefined) {
  934.             item.fi.setRelayTo(this.el);
  935.             this.relayEvents(item.fi, ['focus']);
  936.         }
  937.         else {
  938.             item.on('render', function(){
  939.                 if (item.fi !== undefined) {
  940.                     item.fi.setRelayTo(this.el);
  941.                     this.relayEvents(item.fi, ['focus']);
  942.                 }
  943.             }, this, {
  944.                 single: true
  945.             });
  946.         }
  947.         return item;
  948.     },
  949.     
  950.     onFocus: function(){
  951.         var items = this.getFocusItems();
  952.         if (items && items.getCount() > 0) {
  953.             if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {
  954.                 this.lastFocus.focus();
  955.             }
  956.             else {
  957.                 items.first().focus();
  958.             }
  959.         }
  960.     },
  961.     
  962.     onButtonFocus: function(e, t, tf){
  963.         this.lastFocus = tf.component || null;
  964.     },
  965.     
  966.     onLeft: function(e, t, tf){
  967.         e.stopEvent();
  968.         this.getPreviousFocus(tf.component).focus();
  969.     },
  970.     
  971.     onRight: function(e, t, tf){
  972.         e.stopEvent();
  973.         this.getNextFocus(tf.component).focus();
  974.     },
  975.     
  976.     getEnterItem: Ext.emptyFn,
  977.     onTab: Ext.emptyFn,
  978.     onEsc: Ext.emptyFn
  979. });
  981. Ext.override(Ext.menu.BaseItem, {
  982.     initFocus: function(){
  983.         this.fi = new Ext.a11y.Focusable(this, this.parentMenu && this.parentMenu.el || null, true);
  984.     }
  985. });
  987. Ext.override(Ext.menu.Menu, {
  988.     initFocus: function(){
  989.         this.fi = new Ext.a11y.Focusable(this);
  990.         this.focusEl = this.fi;
  991.     }
  992. });
  994. Ext.a11y.WindowMgr = new Ext.WindowGroup();
  996. Ext.apply(Ext.WindowMgr, {
  997.     bringToFront: function(win){
  998.         Ext.a11y.WindowMgr.bringToFront.call(this, win);
  999.         if (win.modal) {
  1000.             win.enter();
  1001.         }
  1002.         else {
  1003.             win.focus();
  1004.         }
  1005.     }
  1006. });
  1008. Ext.override(Ext.Window, {
  1009.     initFocus: function(){
  1010.         Ext.Window.superclass.initFocus.call(this);
  1011.         this.on('beforehide', function(){
  1012.             Ext.a11y.RelayFrame.unframe();
  1013.             Ext.a11y.FocusFrame.unframe();
  1014.         });
  1015.     }
  1016. });
  1018. Ext.override(Ext.form.Field, {
  1019.     isFocusable: true,
  1020.     noFocus: false,
  1021.     
  1022.     initFocus: function(){
  1023.         this.fi = this.fi || new Ext.a11y.Focusable(this, null, true);
  1024.         
  1025.         Ext.form.Field.superclass.initFocus.call(this);
  1026.         
  1027.         if (this.hidden) {
  1028.             this.isFocusable = false;
  1029.         }
  1030.         
  1031.         this.on('show', function(){
  1032.             this.isFocusable = true;
  1033.         }, this);
  1034.         this.on('hide', function(){
  1035.             this.isFocusable = false;
  1036.         }, this);
  1037.     }
  1038. });
  1040. Ext.override(Ext.FormPanel, {
  1041.     initFocus: function(){
  1042.         Ext.FormPanel.superclass.initFocus.call(this);
  1043.         this.on('focus', this.onFieldFocus, this, {
  1044.             stopEvent: true
  1045.         });
  1046.     },
  1047.     
  1048.     // private
  1049.     createForm: function(){
  1050.         delete this.initialConfig.listeners;
  1051.         var form = new Ext.form.BasicForm(null, this.initialConfig);
  1052.         form.afterMethod('add', this.formItemAdd, this);
  1053.         return form;
  1054.     },
  1055.     
  1056.     formItemAdd: function(item){
  1057.         item.on('render', function(field){
  1058.             field.fi.setRelayTo(this.el);
  1059.             this.relayEvents(field.fi, ['focus']);
  1060.         }, this, {
  1061.             single: true
  1062.         });
  1063.     },
  1064.     
  1065.     onFocus: function(){
  1066.         var items = this.getFocusItems();
  1067.         if (items && items.getCount() > 0) {
  1068.             if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {
  1069.                 this.lastFocus.focus();
  1070.             }
  1071.             else {
  1072.                 items.first().focus();
  1073.             }
  1074.         }
  1075.     },
  1076.     
  1077.     onFieldFocus: function(e, t, tf){
  1078.         this.lastFocus = tf.component || null;
  1079.     },
  1080.     
  1081.     onTab: function(e, t, tf){
  1082.         if (tf.relayTo.component === this) {
  1083.             var item = e.shiftKey ? this.getPreviousFocus(tf.component) : this.getNextFocus(tf.component);
  1084.             
  1085.             if (item) {
  1086.                 ev.stopEvent();
  1087.                 item.focus();
  1088.                 return;
  1089.             }
  1090.         }
  1091.         Ext.FormPanel.superclass.onTab.apply(this, arguments);
  1092.     },
  1093.     
  1094.     getNextFocus: function(current){
  1095.         var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();
  1096.         
  1097.         return (i < length - 1) ? items.get(i + 1) : false;
  1098.     },
  1099.     
  1100.     getPreviousFocus: function(current){
  1101.         var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();
  1102.         
  1103.         return (i > 0) ? items.get(i - 1) : false;
  1104.     }
  1105. });
  1107. Ext.override(Ext.Viewport, {
  1108.     initFocus: function(){
  1109.         Ext.Viewport.superclass.initFocus.apply(this);
  1110.         this.mon(Ext.get(document), 'focus', this.focus, this);
  1111.         this.mon(Ext.get(document), 'blur', this.blur, this);
  1112.         this.fi.setNoFrame(true);
  1113.     },
  1114.     
  1115.     onTab: function(e, t, tf, f){
  1116.         e.stopEvent();
  1117.         
  1118.         if (tf === f) {
  1119.             items = this.getFocusItems();
  1120.             if (items && items.getCount() > 0) {
  1121.                 items.first().focus();
  1122.             }
  1123.         }
  1124.         else {
  1125.             var rf = tf.relayTo || tf;
  1126.             var item = e.shiftKey ? this.getPreviousFocus(rf.component) : this.getNextFocus(rf.component);
  1127.             item.focus();
  1128.         }
  1129.     }
  1130. });
  1131.     
  1132. })();/**
  1133.  * @class Ext.ux.GMapPanel
  1134.  * @extends Ext.Panel
  1135.  * @author Shea Frederick
  1136.  */
  1137. Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
  1138.     initComponent : function(){
  1139.         
  1140.         var defConfig = {
  1141.             plain: true,
  1142.             zoomLevel: 3,
  1143.             yaw: 180,
  1144.             pitch: 0,
  1145.             zoom: 0,
  1146.             gmapType: 'map',
  1147.             border: false
  1148.         };
  1149.         
  1150.         Ext.applyIf(this,defConfig);
  1151.         
  1152.         Ext.ux.GMapPanel.superclass.initComponent.call(this);        
  1154.     },
  1155.     afterRender : function(){
  1156.         
  1157.         var wh = this.ownerCt.getSize();
  1158.         Ext.applyIf(this, wh);
  1159.         
  1160.         Ext.ux.GMapPanel.superclass.afterRender.call(this);    
  1161.         
  1162.         if (this.gmapType === 'map'){
  1163.             this.gmap = new GMap2(this.body.dom);
  1164.         }
  1165.         
  1166.         if (this.gmapType === 'panorama'){
  1167.             this.gmap = new GStreetviewPanorama(this.body.dom);
  1168.         }
  1169.         
  1170.         if (typeof this.addControl == 'object' && this.gmapType === 'map') {
  1171.             this.gmap.addControl(this.addControl);
  1172.         }
  1173.         
  1174.         if (typeof this.setCenter === 'object') {
  1175.             if (typeof this.setCenter.geoCodeAddr === 'string'){
  1176.                 this.geoCodeLookup(this.setCenter.geoCodeAddr);
  1177.             }else{
  1178.                 if (this.gmapType === 'map'){
  1179.                     var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
  1180.                     this.gmap.setCenter(point, this.zoomLevel);    
  1181.                 }
  1182.                 if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
  1183.                     this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
  1184.                 }
  1185.             }
  1186.             if (this.gmapType === 'panorama'){
  1187.                 this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
  1188.             }
  1189.         }
  1191.         GEvent.bind(this.gmap, 'load', this, function(){
  1192.             this.onMapReady();
  1193.         });
  1195.     },
  1196.     onMapReady : function(){
  1197.         this.addMarkers(this.markers);
  1198.         this.addMapControls();
  1199.         this.addOptions();  
  1200.     },
  1201.     onResize : function(w, h){
  1203.         if (typeof this.getMap() == 'object') {
  1204.             this.gmap.checkResize();
  1205.         }
  1206.         
  1207.         Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
  1209.     },
  1210.     setSize : function(width, height, animate){
  1211.         
  1212.         if (typeof this.getMap() == 'object') {
  1213.             this.gmap.checkResize();
  1214.         }
  1215.         
  1216.         Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
  1217.         
  1218.     },
  1219.     getMap : function(){
  1220.         
  1221.         return this.gmap;
  1222.         
  1223.     },
  1224.     getCenter : function(){
  1225.         
  1226.         return this.getMap().getCenter();
  1227.         
  1228.     },
  1229.     getCenterLatLng : function(){
  1230.         
  1231.         var ll = this.getCenter();
  1232.         return {lat: ll.lat(), lng: ll.lng()};
  1233.         
  1234.     },
  1235.     addMarkers : function(markers) {
  1236.         
  1237.         if (Ext.isArray(markers)){
  1238.             for (var i = 0; i < markers.length; i++) {
  1239.                 var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
  1240.                 this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
  1241.             }
  1242.         }
  1243.         
  1244.     },
  1245.     addMarker : function(point, marker, clear, center, listeners){
  1246.         
  1247.         Ext.applyIf(marker,G_DEFAULT_ICON);
  1249.         if (clear === true){
  1250.             this.getMap().clearOverlays();
  1251.         }
  1252.         if (center === true) {
  1253.             this.getMap().setCenter(point, this.zoomLevel);
  1254.         }
  1256.         var mark = new GMarker(point,marker);
  1257.         if (typeof listeners === 'object'){
  1258.             for (evt in listeners) {
  1259.                 GEvent.bind(mark, evt, this, listeners[evt]);
  1260.             }
  1261.         }
  1262.         this.getMap().addOverlay(mark);
  1264.     },
  1265.     addMapControls : function(){
  1266.         
  1267.         if (this.gmapType === 'map') {
  1268.             if (Ext.isArray(this.mapControls)) {
  1269.                 for(i=0;i<this.mapControls.length;i++){
  1270.                     this.addMapControl(this.mapControls[i]);
  1271.                 }
  1272.             }else if(typeof this.mapControls === 'string'){
  1273.                 this.addMapControl(this.mapControls);
  1274.             }else if(typeof this.mapControls === 'object'){
  1275.                 this.getMap().addControl(this.mapControls);
  1276.             }
  1277.         }
  1278.         
  1279.     },
  1280.     addMapControl : function(mc){
  1281.         
  1282.         var mcf = window[mc];
  1283.         if (typeof mcf === 'function') {
  1284.             this.getMap().addControl(new mcf());
  1285.         }    
  1286.         
  1287.     },
  1288.     addOptions : function(){
  1289.         
  1290.         if (Ext.isArray(this.mapConfOpts)) {
  1291.             var mc;
  1292.             for(i=0;i<this.mapConfOpts.length;i++){
  1293.                 this.addOption(this.mapConfOpts[i]);
  1294.             }
  1295.         }else if(typeof this.mapConfOpts === 'string'){
  1296.             this.addOption(this.mapConfOpts);
  1297.         }        
  1298.         
  1299.     },
  1300.     addOption : function(mc){
  1301.         
  1302.         var mcf = this.getMap()[mc];
  1303.         if (typeof mcf === 'function') {
  1304.             this.getMap()[mc]();
  1305.         }    
  1306.         
  1307.     },
  1308.     geoCodeLookup : function(addr) {
  1309.         
  1310.         this.geocoder = new GClientGeocoder();
  1311.         this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));
  1312.         
  1313.     },
  1314.     addAddressToMap : function(response) {
  1315.         
  1316.         if (!response || response.Status.code != 200) {
  1317.             Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
  1318.         }else{
  1319.             place = response.Placemark[0];
  1320.             addressinfo = place.AddressDetails;
  1321.             accuracy = addressinfo.Accuracy;
  1322.             if (accuracy === 0) {
  1323.                 Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
  1324.             }else{
  1325.                 if (accuracy < 7) {
  1326.                     Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
  1327.                 }else{
  1328.                     point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
  1329.                     if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
  1330.                         this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
  1331.                     }
  1332.                 }
  1333.             }
  1334.         }
  1335.         
  1336.     }
  1337.  
  1338. });
  1340. Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.ns('Ext.ux.grid');
  1342. /**
  1343.  * @class Ext.ux.grid.GroupSummary
  1344.  * @extends Ext.util.Observable
  1345.  * A GridPanel plugin that enables dynamic column calculations and a dynamically
  1346.  * updated grouped summary row.
  1347.  */
  1348. Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {
  1349.     /**
  1350.      * @cfg {Function} summaryRenderer Renderer example:<pre><code>
  1351. summaryRenderer: function(v, params, data){
  1352.     return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
  1353. },
  1354.      * </code></pre>
  1355.      */
  1356.     /**
  1357.      * @cfg {String} summaryType (Optional) The type of
  1358.      * calculation to be used for the column.  For options available see
  1359.      * {@link #Calculations}.
  1360.      */
  1362.     constructor : function(config){
  1363.         Ext.apply(this, config);
  1364.         Ext.ux.grid.GroupSummary.superclass.constructor.call(this);
  1365.     },
  1366.     init : function(grid){
  1367.         this.grid = grid;
  1368.         this.cm = grid.getColumnModel();
  1369.         this.view = grid.getView();
  1371.         var v = this.view;
  1372.         v.doGroupEnd = this.doGroupEnd.createDelegate(this);
  1374.         v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
  1375.         v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
  1376.         v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
  1377.         v.afterMethod('onUpdate', this.doUpdate, this);
  1378.         v.afterMethod('onRemove', this.doRemove, this);
  1380.         if(!this.rowTpl){
  1381.             this.rowTpl = new Ext.Template(
  1382.                 '<div class="x-grid3-summary-row" style="{tstyle}">',
  1383.                 '<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
  1384.                     '<tbody><tr>{cells}</tr></tbody>',
  1385.                 '</table></div>'
  1386.             );
  1387.             this.rowTpl.disableFormats = true;
  1388.         }
  1389.         this.rowTpl.compile();
  1391.         if(!this.cellTpl){
  1392.             this.cellTpl = new Ext.Template(
  1393.                 '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
  1394.                 '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',
  1395.                 "</td>"
  1396.             );
  1397.             this.cellTpl.disableFormats = true;
  1398.         }
  1399.         this.cellTpl.compile();
  1400.     },
  1402.     /**
  1403.      * Toggle the display of the summary row on/off
  1404.      * @param {Boolean} visible <tt>true</tt> to show the summary, <tt>false</tt> to hide the summary.
  1405.      */
  1406.     toggleSummaries : function(visible){
  1407.         var el = this.grid.getGridEl();
  1408.         if(el){
  1409.             if(visible === undefined){
  1410.                 visible = el.hasClass('x-grid-hide-summary');
  1411.             }
  1412.             el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');
  1413.         }
  1414.     },
  1416.     renderSummary : function(o, cs){
  1417.         cs = cs || this.view.getColumnData();
  1418.         var cfg = this.cm.config;
  1420.         var buf = [], c, p = {}, cf, last = cs.length-1;
  1421.         for(var i = 0, len = cs.length; i < len; i++){
  1422.             c = cs[i];
  1423.             cf = cfg[i];
  1424.             p.id = c.id;
  1425.             p.style = c.style;
  1426.             p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
  1427.             if(cf.summaryType || cf.summaryRenderer){
  1428.                 p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
  1429.             }else{
  1430.                 p.value = '';
  1431.             }
  1432.             if(p.value == undefined || p.value === "") p.value = "&#160;";
  1433.             buf[buf.length] = this.cellTpl.apply(p);
  1434.         }
  1436.         return this.rowTpl.apply({
  1437.             tstyle: 'width:'+this.view.getTotalWidth()+';',
  1438.             cells: buf.join('')
  1439.         });
  1440.     },
  1442.     /**
  1443.      * @private
  1444.      * @param {Object} rs
  1445.      * @param {Object} cs
  1446.      */
  1447.     calculate : function(rs, cs){
  1448.         var data = {}, r, c, cfg = this.cm.config, cf;
  1449.         for(var j = 0, jlen = rs.length; j < jlen; j++){
  1450.             r = rs[j];
  1451.             for(var i = 0, len = cs.length; i < len; i++){
  1452.                 c = cs[i];
  1453.                 cf = cfg[i];
  1454.                 if(cf.summaryType){
  1455.                     data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
  1456.                 }
  1457.             }
  1458.         }
  1459.         return data;
  1460.     },
  1462.     doGroupEnd : function(buf, g, cs, ds, colCount){
  1463.         var data = this.calculate(g.rs, cs);
  1464.         buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');
  1465.     },
  1467.     doWidth : function(col, w, tw){
  1468.         var gs = this.view.getGroups(), s;
  1469.         for(var i = 0, len = gs.length; i < len; i++){
  1470.             s = gs[i].childNodes[2];
  1471.             s.style.width = tw;
  1472.             s.firstChild.style.width = tw;
  1473.             s.firstChild.rows[0].childNodes[col].style.width = w;
  1474.         }
  1475.     },
  1477.     doAllWidths : function(ws, tw){
  1478.         var gs = this.view.getGroups(), s, cells, wlen = ws.length;
  1479.         for(var i = 0, len = gs.length; i < len; i++){
  1480.             s = gs[i].childNodes[2];
  1481.             s.style.width = tw;
  1482.             s.firstChild.style.width = tw;
  1483.             cells = s.firstChild.rows[0].childNodes;
  1484.             for(var j = 0; j < wlen; j++){
  1485.                 cells[j].style.width = ws[j];
  1486.             }
  1487.         }
  1488.     },
  1490.     doHidden : function(col, hidden, tw){
  1491.         var gs = this.view.getGroups(), s, display = hidden ? 'none' : '';
  1492.         for(var i = 0, len = gs.length; i < len; i++){
  1493.             s = gs[i].childNodes[2];
  1494.             s.style.width = tw;
  1495.             s.firstChild.style.width = tw;
  1496.             s.firstChild.rows[0].childNodes[col].style.display = display;
  1497.         }
  1498.     },
  1500.     // Note: requires that all (or the first) record in the
  1501.     // group share the same group value. Returns false if the group
  1502.     // could not be found.
  1503.     refreshSummary : function(groupValue){
  1504.         return this.refreshSummaryById(this.view.getGroupId(groupValue));
  1505.     },
  1507.     getSummaryNode : function(gid){
  1508.         var g = Ext.fly(gid, '_gsummary');
  1509.         if(g){
  1510.             return g.down('.x-grid3-summary-row', true);
  1511.         }
  1512.         return null;
  1513.     },
  1515.     refreshSummaryById : function(gid){
  1516.         var g = document.getElementById(gid);
  1517.         if(!g){
  1518.             return false;
  1519.         }
  1520.         var rs = [];
  1521.         this.grid.store.each(function(r){
  1522.             if(r._groupId == gid){
  1523.                 rs[rs.length] = r;
  1524.             }
  1525.         });
  1526.         var cs = this.view.getColumnData();
  1527.         var data = this.calculate(rs, cs);
  1528.         var markup = this.renderSummary({data: data}, cs);
  1530.         var existing = this.getSummaryNode(gid);
  1531.         if(existing){
  1532.             g.removeChild(existing);
  1533.         }
  1534.         Ext.DomHelper.append(g, markup);
  1535.         return true;
  1536.     },
  1538.     doUpdate : function(ds, record){
  1539.         this.refreshSummaryById(record._groupId);
  1540.     },
  1542.     doRemove : function(ds, record, index, isUpdate){
  1543.         if(!isUpdate){
  1544.             this.refreshSummaryById(record._groupId);
  1545.         }
  1546.     },
  1548.     /**
  1549.      * Show a message in the summary row.
  1550.      * <pre><code>
  1551. grid.on('afteredit', function(){
  1552.     var groupValue = 'Ext Forms: Field Anchoring';
  1553.     summary.showSummaryMsg(groupValue, 'Updating Summary...');
  1554. });
  1555.      * </code></pre>
  1556.      * @param {String} groupValue
  1557.      * @param {String} msg Text to use as innerHTML for the summary row.
  1558.      */
  1559.     showSummaryMsg : function(groupValue, msg){
  1560.         var gid = this.view.getGroupId(groupValue);
  1561.         var node = this.getSummaryNode(gid);
  1562.         if(node){
  1563.             node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';
  1564.         }
  1565.     }
  1566. });
  1568. //backwards compat
  1569. Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;
  1572. /**
  1573.  * Calculation types for summary row:</p><div class="mdetail-params"><ul>
  1574.  * <li><b><tt>sum</tt></b> : <div class="sub-desc"></div></li>
  1575.  * <li><b><tt>count</tt></b> : <div class="sub-desc"></div></li>
  1576.  * <li><b><tt>max</tt></b> : <div class="sub-desc"></div></li>
  1577.  * <li><b><tt>min</tt></b> : <div class="sub-desc"></div></li>
  1578.  * <li><b><tt>average</tt></b> : <div class="sub-desc"></div></li>
  1579.  * </ul></div>
  1580.  * <p>Custom calculations may be implemented.  An example of
  1581.  * custom <code>summaryType=totalCost</code>:</p><pre><code>
  1582. // define a custom summary function
  1583. Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
  1584.     return v + (record.data.estimate * record.data.rate);
  1585. };
  1586.  * </code></pre>
  1587.  * @property Calculations
  1588.  */
  1590. Ext.ux.grid.GroupSummary.Calculations = {
  1591.     'sum' : function(v, record, field){
  1592.         return v + (record.data[field]||0);
  1593.     },
  1595.     'count' : function(v, record, field, data){
  1596.         return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
  1597.     },
  1599.     'max' : function(v, record, field, data){
  1600.         var v = record.data[field];
  1601.         var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
  1602.         return v > max ? (data[field+'max'] = v) : max;
  1603.     },
  1605.     'min' : function(v, record, field, data){
  1606.         var v = record.data[field];
  1607.         var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
  1608.         return v < min ? (data[field+'min'] = v) : min;
  1609.     },
  1611.     'average' : function(v, record, field, data){
  1612.         var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
  1613.         var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
  1614.         return t === 0 ? 0 : t / c;
  1615.     }
  1616. };
  1617. Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;
  1619. /**
  1620.  * @class Ext.ux.grid.HybridSummary
  1621.  * @extends Ext.ux.grid.GroupSummary
  1622.  * Adds capability to specify the summary data for the group via json as illustrated here:
  1623.  * <pre><code>
  1624. {
  1625.     data: [
  1626.         {
  1627.             projectId: 100,     project: 'House',
  1628.             taskId:    112, description: 'Paint',
  1629.             estimate:    6,        rate:     150,
  1630.             due:'06/24/2007'
  1631.         },
  1632.         ...
  1633.     ],
  1635.     summaryData: {
  1636.         'House': {
  1637.             description: 14, estimate: 9,
  1638.                    rate: 99, due: new Date(2009, 6, 29),
  1639.                    cost: 999
  1640.         }
  1641.     }
  1642. }
  1643.  * </code></pre>
  1644.  *
  1645.  */
  1646. Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {
  1647.     /**
  1648.      * @private
  1649.      * @param {Object} rs
  1650.      * @param {Object} cs
  1651.      */
  1652.     calculate : function(rs, cs){
  1653.         var gcol = this.view.getGroupField();
  1654.         var gvalue = rs[0].data[gcol];
  1655.         var gdata = this.getSummaryData(gvalue);
  1656.         return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
  1657.     },
  1659.     /**
  1660.      * <pre><code>
  1661. grid.on('afteredit', function(){
  1662.     var groupValue = 'Ext Forms: Field Anchoring';
  1663.     summary.showSummaryMsg(groupValue, 'Updating Summary...');
  1664.     setTimeout(function(){ // simulate server call
  1665.         // HybridSummary class implements updateSummaryData
  1666.         summary.updateSummaryData(groupValue,
  1667.             // create data object based on configured dataIndex
  1668.             {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
  1669.     }, 2000);
  1670. });
  1671.      * </code></pre>
  1672.      * @param {String} groupValue
  1673.      * @param {Object} data data object
  1674.      * @param {Boolean} skipRefresh (Optional) Defaults to false
  1675.      */
  1676.     updateSummaryData : function(groupValue, data, skipRefresh){
  1677.         var json = this.grid.store.reader.jsonData;
  1678.         if(!json.summaryData){
  1679.             json.summaryData = {};
  1680.         }
  1681.         json.summaryData[groupValue] = data;
  1682.         if(!skipRefresh){
  1683.             this.refreshSummary(groupValue);
  1684.         }
  1685.     },
  1687.     /**
  1688.      * Returns the summaryData for the specified groupValue or null.
  1689.      * @param {String} groupValue
  1690.      * @return {Object} summaryData
  1691.      */
  1692.     getSummaryData : function(groupValue){
  1693.         var json = this.grid.store.reader.jsonData;
  1694.         if(json && json.summaryData){
  1695.             return json.summaryData[groupValue];
  1696.         }
  1697.         return null;
  1698.     }
  1699. });
  1701. //backwards compat
  1702. Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;
  1703. Ext.ux.GroupTab = Ext.extend(Ext.Container, {
  1704.     mainItem: 0,
  1705.     
  1706.     expanded: true,
  1707.     
  1708.     deferredRender: true,
  1709.     
  1710.     activeTab: null,
  1711.     
  1712.     idDelimiter: '__',
  1713.     
  1714.     headerAsText: false,
  1715.     
  1716.     frame: false,
  1717.     
  1718.     hideBorders: true,
  1719.     
  1720.     initComponent: function(config){
  1721.         Ext.apply(this, config);
  1722.         this.frame = false;
  1723.         
  1724.         Ext.ux.GroupTab.superclass.initComponent.call(this);
  1725.         
  1726.         this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');
  1727.         
  1728.         this.setLayout(new Ext.layout.CardLayout({
  1729.             deferredRender: this.deferredRender
  1730.         }));
  1731.         
  1732.         if (!this.stack) {
  1733.             this.stack = Ext.TabPanel.AccessStack();
  1734.         }
  1735.         
  1736.         this.initItems();
  1737.         
  1738.         this.on('beforerender', function(){
  1739.             this.groupEl = this.ownerCt.getGroupEl(this);
  1740.         }, this);
  1741.         
  1742.         this.on('add', this.onAdd, this, {
  1743.             target: this
  1744.         });
  1745.         this.on('remove', this.onRemove, this, {
  1746.             target: this
  1747.         });
  1748.         
  1749.         if (this.mainItem !== undefined) {
  1750.             var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
  1751.             delete this.mainItem;
  1752.             this.setMainItem(item);
  1753.         }
  1754.     },
  1755.     
  1756.     /**
  1757.      * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
  1758.      * can return false to cancel the tab change.
  1759.      * @param {String/Panel} tab The id or tab Panel to activate
  1760.      */
  1761.     setActiveTab : function(item){
  1762.         item = this.getComponent(item);
  1763.         if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
  1764.             return;
  1765.         }
  1766.         if(!this.rendered){
  1767.             this.activeTab = item;
  1768.             return;
  1769.         }
  1770.         if(this.activeTab != item){
  1771.             if(this.activeTab && this.activeTab != this.mainItem){
  1772.                 var oldEl = this.getTabEl(this.activeTab);
  1773.                 if(oldEl){
  1774.                     Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
  1775.                 }
  1776.                 this.activeTab.fireEvent('deactivate', this.activeTab);
  1777.             }
  1778.             var el = this.getTabEl(item);
  1779.             Ext.fly(el).addClass('x-grouptabs-strip-active');
  1780.             this.activeTab = item;
  1781.             this.stack.add(item);
  1783.             this.layout.setActiveItem(item);
  1784.             if(this.layoutOnTabChange && item.doLayout){
  1785.                 item.doLayout();
  1786.             }
  1787.             if(this.scrolling){
  1788.                 this.scrollToTab(item, this.animScroll);
  1789.             }
  1791.             item.fireEvent('activate', item);
  1792.             this.fireEvent('tabchange', this, item);
  1793.         }
  1794.     },
  1795.     
  1796.     getTabEl: function(item){
  1797.         if (item == this.mainItem) {
  1798.             return this.groupEl;
  1799.         }
  1800.         return Ext.TabPanel.prototype.getTabEl.call(this, item);
  1801.     },
  1802.     
  1803.     onRender: function(ct, position){
  1804.         Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);
  1805.         
  1806.         this.strip = Ext.fly(this.groupEl).createChild({
  1807.             tag: 'ul',
  1808.             cls: 'x-grouptabs-sub'
  1809.         });
  1811.         this.tooltip = new Ext.ToolTip({
  1812.            target: this.groupEl,
  1813.            delegate: 'a.x-grouptabs-text',
  1814.            trackMouse: true,
  1815.            renderTo: document.body,
  1816.            listeners: {
  1817.                beforeshow: function(tip) {
  1818.                    var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
  1819.                        ? this.mainItem
  1820.                        : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);
  1822.                    if(!item.tabTip) {
  1823.                        return false;
  1824.                    }
  1825.                    tip.body.dom.innerHTML = item.tabTip;
  1826.                },
  1827.                scope: this
  1828.            }
  1829.         });
  1830.                 
  1831.         if (!this.itemTpl) {
  1832.             var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');
  1833.             tt.disableFormats = true;
  1834.             tt.compile();
  1835.             Ext.ux.GroupTab.prototype.itemTpl = tt;
  1836.         }
  1837.         
  1838.         this.items.each(this.initTab, this);
  1839.     },
  1840.     
  1841.     afterRender: function(){
  1842.         Ext.ux.GroupTab.superclass.afterRender.call(this);
  1843.         
  1844.         if (this.activeTab !== undefined) {
  1845.             var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
  1846.             delete this.activeTab;
  1847.             this.setActiveTab(item);
  1848.         }
  1849.     },
  1850.     
  1851.     // private
  1852.     initTab: function(item, index){
  1853.         var before = this.strip.dom.childNodes[index];
  1854.         var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
  1855.         
  1856.         if (item === this.mainItem) {
  1857.             item.tabEl = this.groupEl;
  1858.             p.cls += ' x-grouptabs-main-item';
  1859.         }
  1860.         
  1861.         var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
  1862.         
  1863.         item.tabEl = item.tabEl || el;
  1864.                 
  1865.         item.on('disable', this.onItemDisabled, this);
  1866.         item.on('enable', this.onItemEnabled, this);
  1867.         item.on('titlechange', this.onItemTitleChanged, this);
  1868.         item.on('iconchange', this.onItemIconChanged, this);
  1869.         item.on('beforeshow', this.onBeforeShowItem, this);
  1870.     },
  1871.     
  1872.     setMainItem: function(item){
  1873.         item = this.getComponent(item);
  1874.         if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
  1875.             return;
  1876.         }
  1877.         
  1878.         this.mainItem = item;
  1879.     },
  1880.     
  1881.     getMainItem: function(){
  1882.         return this.mainItem || null;
  1883.     },
  1884.     
  1885.     // private
  1886.     onBeforeShowItem: function(item){
  1887.         if (item != this.activeTab) {
  1888.             this.setActiveTab(item);
  1889.             return false;
  1890.         }
  1891.     },
  1892.     
  1893.     // private
  1894.     onAdd: function(gt, item, index){
  1895.         if (this.rendered) {
  1896.             this.initTab.call(this, item, index);
  1897.         }
  1898.     },
  1899.     
  1900.     // private
  1901.     onRemove: function(tp, item){
  1902.         Ext.destroy(Ext.get(this.getTabEl(item)));
  1903.         this.stack.remove(item);
  1904.         item.un('disable', this.onItemDisabled, this);
  1905.         item.un('enable', this.onItemEnabled, this);
  1906.         item.un('titlechange', this.onItemTitleChanged, this);
  1907.         item.un('iconchange', this.onItemIconChanged, this);
  1908.         item.un('beforeshow', this.onBeforeShowItem, this);
  1909.         if (item == this.activeTab) {
  1910.             var next = this.stack.next();
  1911.             if (next) {
  1912.                 this.setActiveTab(next);
  1913.             }
  1914.             else if (this.items.getCount() > 0) {
  1915.                 this.setActiveTab(0);
  1916.             }
  1917.             else {
  1918.                 this.activeTab = null;
  1919.             }
  1920.         }
  1921.     },
  1922.     
  1923.     // private
  1924.     onBeforeAdd: function(item){
  1925.         var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
  1926.         if (existing) {
  1927.             this.setActiveTab(item);
  1928.             return false;
  1929.         }
  1930.         Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
  1931.         var es = item.elements;
  1932.         item.elements = es ? es.replace(',header', '') : es;
  1933.         item.border = (item.border === true);
  1934.     },
  1935.     
  1936.     // private
  1937.     onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
  1938.     onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,
  1939.     
  1940.     // private
  1941.     onItemTitleChanged: function(item){
  1942.         var el = this.getTabEl(item);
  1943.         if (el) {
  1944.             Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
  1945.         }
  1946.     },
  1947.     
  1948.     //private
  1949.     onItemIconChanged: function(item, iconCls, oldCls){
  1950.         var el = this.getTabEl(item);
  1951.         if (el) {
  1952.             Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
  1953.         }
  1954.     },
  1955.     
  1956.     beforeDestroy: function(){
  1957.         Ext.TabPanel.prototype.beforeDestroy.call(this);
  1958.         this.tooltip.destroy();
  1959.     }
  1960. });
  1962. Ext.reg('grouptab', Ext.ux.GroupTab);
  1963. Ext.ns('Ext.ux');
  1965. Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
  1966.     tabPosition: 'left',
  1967.     
  1968.     alternateColor: false,
  1969.     
  1970.     alternateCls: 'x-grouptabs-panel-alt',
  1971.     
  1972.     defaultType: 'grouptab',
  1973.     
  1974.     deferredRender: false,
  1975.     
  1976.     activeGroup : null,
  1977.     
  1978.     initComponent: function(){
  1979.         Ext.ux.GroupTabPanel.superclass.initComponent.call(this);
  1980.         
  1981.         this.addEvents(
  1982.             'beforegroupchange',
  1983.             'groupchange'
  1984.         );
  1985.         this.elements = 'body,header';
  1986.         this.stripTarget = 'header';
  1987.         
  1988.         this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';
  1989.         
  1990.         this.addClass('x-grouptabs-panel');
  1991.         
  1992.         if (this.tabStyle && this.tabStyle != '') {
  1993.             this.addClass('x-grouptabs-panel-' + this.tabStyle);
  1994.         }
  1995.         
  1996.         if (this.alternateColor) {
  1997.             this.addClass(this.alternateCls);
  1998.         }
  1999.         
  2000.         this.on('beforeadd', function(gtp, item, index){
  2001.             this.initGroup(item, index);
  2002.         });      
  2003.     },
  2004.     
  2005.     initEvents : function() {
  2006.         this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
  2007.     },
  2008.         
  2009.     onRender: function(ct, position){
  2010.         Ext.TabPanel.superclass.onRender.call(this, ct, position);
  2012.         if(this.plain){
  2013.             var pos = this.tabPosition == 'top' ? 'header' : 'footer';
  2014.             this[pos].addClass('x-tab-panel-'+pos+'-plain');
  2015.         }
  2017.         var st = this[this.stripTarget];
  2019.         this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
  2020.             tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});
  2022.         var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
  2023.         this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
  2025. this.header.addClass('x-grouptabs-panel-header');
  2026. this.bwrap.addClass('x-grouptabs-bwrap');
  2027.         this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
  2029.         if (!this.itemTpl) {
  2030.             var tt = new Ext.Template(
  2031.                 '<li class="{cls}" id="{id}">', 
  2032.                 '<a class="x-grouptabs-expand" onclick="return false;"></a>', 
  2033.                 '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
  2034.                 '<span>{text}</span></a>', 
  2035.                 '</li>'
  2036.             );
  2037.             tt.disableFormats = true;
  2038.             tt.compile();
  2039.             Ext.ux.GroupTabPanel.prototype.itemTpl = tt;
  2040.         }
  2042.         this.items.each(this.initGroup, this);
  2043.     },
  2044.     
  2045.     afterRender: function(){
  2046.         Ext.ux.GroupTabPanel.superclass.afterRender.call(this);
  2047.         
  2048.         this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
  2049.             cls: 'x-tab-joint'
  2050.         });
  2051.         
  2052.         this.addClass('x-tab-panel-' + this.tabPosition);
  2053.         this.header.setWidth(this.tabWidth);
  2054.         
  2055.         if (this.activeGroup !== undefined) {
  2056.             var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);
  2057.             delete this.activeGroup;
  2058.             this.setActiveGroup(group);
  2059.             group.setActiveTab(group.getMainItem());
  2060.         }
  2061.     },
  2063.     getGroupEl : Ext.TabPanel.prototype.getTabEl,
  2064.         
  2065.     // private
  2066.     findTargets: function(e){
  2067.         var item = null;
  2068.         var itemEl = e.getTarget('li', this.strip);
  2069.         if (itemEl) {
  2070.             item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
  2071.             if (item.disabled) {
  2072.                 return {
  2073.                     expand: null,
  2074.                     item: null,
  2075.                     el: null
  2076.                 };
  2077.             }
  2078.         }
  2079.         return {
  2080.             expand: e.getTarget('.x-grouptabs-expand', this.strip),
  2081.             isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
  2082.             item: item,
  2083.             el: itemEl
  2084.         };
  2085.     },
  2086.     
  2087.     // private
  2088.     onStripMouseDown: function(e){
  2089.         if (e.button != 0) {
  2090.             return;
  2091.         }
  2092.         e.preventDefault();
  2093.         var t = this.findTargets(e);
  2094.         if (t.expand) {
  2095.             this.toggleGroup(t.el);
  2096.         }
  2097.         else if (t.item) {
  2098.             if(t.isGroup) {
  2099.                 t.item.setActiveTab(t.item.getMainItem());
  2100.             }
  2101.             else {
  2102.                 t.item.ownerCt.setActiveTab(t.item);
  2103.             }
  2104.         }
  2105.     },
  2106.     
  2107.     expandGroup: function(groupEl){
  2108.         if(groupEl.isXType) {
  2109.             groupEl = this.getGroupEl(groupEl);
  2110.         }
  2111.         Ext.fly(groupEl).addClass('x-grouptabs-expanded');
  2112.     },
  2113.     
  2114.     toggleGroup: function(groupEl){
  2115.         if(groupEl.isXType) {
  2116.             groupEl = this.getGroupEl(groupEl);
  2117.         }        
  2118.         Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
  2119. this.syncTabJoint();
  2120.     },    
  2121.     
  2122.     syncTabJoint: function(groupEl){
  2123.         if (!this.tabJoint) {
  2124.             return;
  2125.         }
  2126.         
  2127.         groupEl = groupEl || this.getGroupEl(this.activeGroup);
  2128.         if(groupEl) {
  2129.             this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2); 
  2131.             var y = Ext.isGecko2 ? 0 : 1;
  2132.             if (this.tabPosition == 'left'){
  2133.                 this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
  2134.             }
  2135.             else {
  2136.                 this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
  2137.             }           
  2138.         }
  2139.         else {
  2140.             this.tabJoint.hide();
  2141.         }
  2142.     },
  2143.     
  2144.     getActiveTab : function() {
  2145.         if(!this.activeGroup) return null;
  2146.         return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;  
  2147.     },
  2148.     
  2149.     onResize: function(){
  2150.         Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
  2151.         this.syncTabJoint();
  2152.     },
  2153.     
  2154.     createCorner: function(el, pos){
  2155.         return Ext.fly(el).createChild({
  2156.             cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
  2157.         });
  2158.     },
  2159.     
  2160.     initGroup: function(group, index){
  2161.         var before = this.strip.dom.childNodes[index];        
  2162.         var p = this.getTemplateArgs(group);
  2163.         if (index === 0) {
  2164.             p.cls += ' x-tab-first';
  2165.         }
  2166.         p.cls += ' x-grouptabs-main';
  2167.         p.text = group.getMainItem().title;
  2168.         
  2169.         var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
  2170.         
  2171.         var tl = this.createCorner(el, 'top-' + this.tabPosition);
  2172.         var bl = this.createCorner(el, 'bottom-' + this.tabPosition);
  2174.         if (group.expanded) {
  2175.             this.expandGroup(el);
  2176.         }
  2178.         if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
  2179.             bl.setLeft('-10px');
  2180.             bl.setBottom('-5px');
  2181.             tl.setLeft('-10px');
  2182.             tl.setTop('-5px');
  2183.         }
  2185.         this.mon(group, 'changemainitem', this.onGroupChangeMainItem, this);
  2186.         this.mon(group, 'beforetabchange', this.onGroupBeforeTabChange, this);
  2187.     },
  2188.     
  2189.     setActiveGroup : function(group) {
  2190.         group = this.getComponent(group);
  2191.         if(!group || this.fireEvent('beforegroupchange', this, group, this.activeGroup) === false){
  2192.             return;
  2193.         }
  2194.         if(!this.rendered){
  2195.             this.activeGroup = group;
  2196.             return;
  2197.         }
  2198.         if(this.activeGroup != group){
  2199.             if(this.activeGroup){
  2200.                 var oldEl = this.getGroupEl(this.activeGroup);
  2201.                 if(oldEl){
  2202.                     Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
  2203.                 }
  2204.                 this.activeGroup.fireEvent('deactivate', this.activeTab);
  2205.             }
  2207.             var groupEl = this.getGroupEl(group);
  2208.             Ext.fly(groupEl).addClass('x-grouptabs-strip-active');
  2209.                         
  2210.             this.activeGroup = group;
  2211.             this.stack.add(group);
  2213.             this.layout.setActiveItem(group);
  2214.             this.syncTabJoint(groupEl);
  2216.             group.fireEvent('activate', group);
  2217.             this.fireEvent('groupchange', this, group);
  2218.         }        
  2219.     },
  2220.     
  2221.     onGroupBeforeTabChange: function(group, newTab, oldTab){
  2222.         if(group !== this.activeGroup || newTab !== oldTab) {
  2223.             this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
  2224.         } 
  2225.         
  2226.         this.expandGroup(this.getGroupEl(group));
  2227.         this.setActiveGroup(group);
  2228.     },
  2229.     
  2230.     getFrameHeight: function(){
  2231.         var h = this.el.getFrameWidth('tb');
  2232.         h += (this.tbar ? this.tbar.getHeight() : 0) +
  2233.         (this.bbar ? this.bbar.getHeight() : 0);
  2234.         
  2235.         return h;
  2236.     },
  2237.     
  2238.     adjustBodyWidth: function(w){
  2239.         return w - this.tabWidth;
  2240.     }
  2241. });
  2243. Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);/*
  2244.  * Note that this control will most likely remain as an example, and not as a core Ext form
  2245.  * control.  However, the API will be changing in a future release and so should not yet be
  2246.  * treated as a final, stable API at this time.
  2247.  */
  2249. /**
  2250.  * @class Ext.ux.form.ItemSelector
  2251.  * @extends Ext.form.Field
  2252.  * A control that allows selection of between two Ext.ux.form.MultiSelect controls.
  2253.  *
  2254.  *  @history
  2255.  *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
  2256.  *
  2257.  * @constructor
  2258.  * Create a new ItemSelector
  2259.  * @param {Object} config Configuration options
  2260.  * @xtype itemselector 
  2261.  */
  2262. Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {
  2263.     hideNavIcons:false,
  2264.     imagePath:"",
  2265.     iconUp:"up2.gif",
  2266.     iconDown:"down2.gif",
  2267.     iconLeft:"left2.gif",
  2268.     iconRight:"right2.gif",
  2269.     iconTop:"top2.gif",
  2270.     iconBottom:"bottom2.gif",
  2271.     drawUpIcon:true,
  2272.     drawDownIcon:true,
  2273.     drawLeftIcon:true,
  2274.     drawRightIcon:true,
  2275.     drawTopIcon:true,
  2276.     drawBotIcon:true,
  2277.     delimiter:',',
  2278.     bodyStyle:null,
  2279.     border:false,
  2280.     defaultAutoCreate:{tag: "div"},
  2281.     /**
  2282.      * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
  2283.      */
  2284.     multiselects:null,
  2286.     initComponent: function(){
  2287.         Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
  2288.         this.addEvents({
  2289.             'rowdblclick' : true,
  2290.             'change' : true
  2291.         });
  2292.     },
  2294.     onRender: function(ct, position){
  2295.         Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);
  2297.         // Internal default configuration for both multiselects
  2298.         var msConfig = [{
  2299.             legend: 'Available',
  2300.             draggable: true,
  2301.             droppable: true,
  2302.             width: 100,
  2303.             height: 100
  2304.         },{
  2305.             legend: 'Selected',
  2306.             droppable: true,
  2307.             draggable: true,
  2308.             width: 100,
  2309.             height: 100
  2310.         }];
  2312.         this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
  2313.         this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
  2315.         this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
  2316.         this.toMultiselect.on('dblclick', this.onRowDblClick, this);
  2318.         var p = new Ext.Panel({
  2319.             bodyStyle:this.bodyStyle,
  2320.             border:this.border,
  2321.             layout:"table",