3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
10 * @class Ext.ux.grid.BufferView
11 * @extends Ext.grid.GridView
12 * A custom GridView which renders rows on an as-needed basis.
14 Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
16 * @cfg {Number} rowHeight
17 * The height of a row in the grid.
22 * @cfg {Number} borderHeight
23 * The combined height of border-top and border-bottom of a row.
28 * @cfg {Boolean/Number} scrollDelay
29 * The number of milliseconds before rendering rows out of the visible
30 * viewing area. Defaults to 100. Rows will render immediately with a config
36 * @cfg {Number} cacheSize
37 * The number of rows to look forward and backwards from the currently viewable
38 * area. The cache applies only to rows that have been rendered already.
43 * @cfg {Number} cleanDelay
44 * The number of milliseconds to buffer cleaning of extra rows not in the
49 initTemplates : function(){
50 Ext.ux.grid.BufferView.superclass.initTemplates.call(this);
51 var ts = this.templates;
52 // empty div to act as a place holder for a row
53 ts.rowHolder = new Ext.Template(
54 '<div class="x-grid3-row {alt}" style="{tstyle}"></div>'
56 ts.rowHolder.disableFormats = true;
57 ts.rowHolder.compile();
59 ts.rowBody = new Ext.Template(
60 '<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
61 '<tbody><tr>{cells}</tr>',
62 (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>' : ''),
65 ts.rowBody.disableFormats = true;
69 getStyleRowHeight : function(){
70 return Ext.isBorderBox ? (this.rowHeight + this.borderHeight) : this.rowHeight;
73 getCalculatedRowHeight : function(){
74 return this.rowHeight + this.borderHeight;
77 getVisibleRowCount : function(){
78 var rh = this.getCalculatedRowHeight();
79 var visibleHeight = this.scroller.dom.clientHeight;
80 return (visibleHeight < 1) ? 0 : Math.ceil(visibleHeight / rh);
83 getVisibleRows: function(){
84 var count = this.getVisibleRowCount();
85 var sc = this.scroller.dom.scrollTop;
86 var start = (sc == 0 ? 0 : Math.floor(sc/this.getCalculatedRowHeight())-1);
88 first: Math.max(start, 0),
89 last: Math.min(start + count + 2, this.ds.getCount()-1)
93 doRender : function(cs, rs, ds, startRow, colCount, stripe, onlyBody){
94 var ts = this.templates, ct = ts.cell, rt = ts.row, rb = ts.rowBody, last = colCount-1;
95 var rh = this.getStyleRowHeight();
96 var vr = this.getVisibleRows();
97 var tstyle = 'width:'+this.getTotalWidth()+';height:'+rh+'px;';
99 var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
100 for (var j = 0, len = rs.length; j < len; j++) {
102 var rowIndex = (j+startRow);
103 var visible = rowIndex >= vr.first && rowIndex <= vr.last;
105 for (var i = 0; i < colCount; i++) {
108 p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
109 p.attr = p.cellAttr = "";
110 p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
112 if (p.value == undefined || p.value === "") {
115 if (r.dirty && typeof r.modified[c.name] !== 'undefined') {
116 p.css += ' x-grid3-dirty-cell';
118 cb[cb.length] = ct.apply(p);
122 if(stripe && ((rowIndex+1) % 2 == 0)){
123 alt[0] = "x-grid3-row-alt";
126 alt[1] = " x-grid3-dirty-row";
129 if(this.getRowClass){
130 alt[2] = this.getRowClass(r, rowIndex, rp, ds);
132 rp.alt = alt.join(" ");
133 rp.cells = cb.join("");
134 buf[buf.length] = !visible ? ts.rowHolder.apply(rp) : (onlyBody ? rb.apply(rp) : rt.apply(rp));
139 isRowRendered: function(index){
140 var row = this.getRow(index);
141 return row && row.childNodes.length > 0;
144 syncScroll: function(){
145 Ext.ux.grid.BufferView.superclass.syncScroll.apply(this, arguments);
149 // a (optionally) buffered method to update contents of gridview
151 if (this.scrollDelay) {
152 if (!this.renderTask) {
153 this.renderTask = new Ext.util.DelayedTask(this.doUpdate, this);
155 this.renderTask.delay(this.scrollDelay);
161 onRemove : function(ds, record, index, isUpdate){
162 Ext.ux.grid.BufferView.superclass.onRemove.apply(this, arguments);
163 if(isUpdate !== true){
168 doUpdate: function(){
169 if (this.getVisibleRowCount() > 0) {
170 var g = this.grid, cm = g.colModel, ds = g.store;
171 var cs = this.getColumnData();
173 var vr = this.getVisibleRows();
174 for (var i = vr.first; i <= vr.last; i++) {
175 // if row is NOT rendered and is visible, render it
176 if(!this.isRowRendered(i)){
177 var html = this.doRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true);
178 this.getRow(i).innerHTML = html;
185 // a buffered method to clean rows
188 this.cleanTask = new Ext.util.DelayedTask(this.doClean, this);
190 this.cleanTask.delay(this.cleanDelay);
194 if (this.getVisibleRowCount() > 0) {
195 var vr = this.getVisibleRows();
196 vr.first -= this.cacheSize;
197 vr.last += this.cacheSize;
199 var i = 0, rows = this.getRows();
200 // if first is less than 0, all rows have been rendered
201 // so lets clean the end...
205 for(var len = this.ds.getCount(); i < len; i++){
206 // if current row is outside of first and last and
207 // has content, update the innerHTML to nothing
208 if ((i < vr.first || i > vr.last) && rows[i].innerHTML) {
209 rows[i].innerHTML = '';
216 Ext.ux.grid.BufferView.superclass.layout.call(this);
220 // We are adding these custom layouts to a namespace that does not
221 // exist by default in Ext, so we have to add the namespace first:
222 Ext.ns('Ext.ux.layout');
225 * @class Ext.ux.layout.CenterLayout
226 * @extends Ext.layout.FitLayout
227 * <p>This is a very simple layout style used to center contents within a container. This layout works within
228 * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
229 * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
230 * the layout. The layout does not require any config options, although the child panel contained within the
231 * layout must provide a fixed or percentage width. The child panel's height will fit to the container by
232 * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
235 // The content panel is centered in the container
236 var p = new Ext.Panel({
237 title: 'Center Layout',
240 title: 'Centered Content',
246 // If you leave the title blank and specify no border
247 // you'll create a non-visual, structural panel just
248 // for centering the contents in the main container.
249 var p = new Ext.Panel({
253 title: 'Centered Content',
261 Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
263 setItemSize : function(item, size){
264 this.container.addClass('ux-layout-center');
265 item.addClass('ux-layout-center-item');
266 if(item && size.height > 0){
268 size.width = item.width;
275 Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
276 Ext.ns('Ext.ux.grid');
\r
279 * @class Ext.ux.grid.CheckColumn
\r
281 * GridPanel plugin to add a column with check boxes to a grid.
\r
282 * <p>Example usage:</p>
\r
284 // create the column
\r
285 var checkColumn = new Ext.grid.CheckColumn({
\r
287 dataIndex: 'indoor',
\r
292 // add the column to the column model
\r
293 var cm = new Ext.grid.ColumnModel([{
\r
301 var grid = new Ext.grid.EditorGridPanel({
\r
304 plugins: [checkColumn], // include plugin
\r
308 * In addition to storing a Boolean value within the record data, this
\r
309 * class toggles a css class between <tt>'x-grid3-check-col'</tt> and
\r
310 * <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
\r
313 Ext.ux.grid.CheckColumn = function(config){
\r
314 Ext.apply(this, config);
\r
316 this.id = Ext.id();
\r
318 this.renderer = this.renderer.createDelegate(this);
\r
321 Ext.ux.grid.CheckColumn.prototype ={
\r
322 init : function(grid){
\r
324 this.grid.on('render', function(){
\r
325 var view = this.grid.getView();
\r
326 view.mainBody.on('mousedown', this.onMouseDown, this);
\r
330 onMouseDown : function(e, t){
\r
331 if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
\r
333 var index = this.grid.getView().findRowIndex(t);
\r
334 var record = this.grid.store.getAt(index);
\r
335 record.set(this.dataIndex, !record.data[this.dataIndex]);
\r
339 renderer : function(v, p, record){
\r
340 p.css += ' x-grid3-check-col-td';
\r
341 return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
\r
346 Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
\r
348 // backwards compat
\r
349 Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;Ext.ns('Ext.ux.tree');
\r
352 * @class Ext.ux.tree.ColumnTree
\r
353 * @extends Ext.tree.TreePanel
\r
355 * @xtype columntree
\r
357 Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
\r
359 borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
\r
360 cls : 'x-column-tree',
\r
362 onRender : function(){
\r
363 Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
\r
364 this.headers = this.header.createChild({cls:'x-tree-headers'});
\r
366 var cols = this.columns, c;
\r
367 var totalWidth = 0;
\r
368 var scrollOffset = 19; // similar to Ext.grid.GridView default
\r
370 for(var i = 0, len = cols.length; i < len; i++){
\r
372 totalWidth += c.width;
\r
373 this.headers.createChild({
\r
374 cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
\r
376 cls:'x-tree-hd-text',
\r
379 style:'width:'+(c.width-this.borderWidth)+'px;'
\r
382 this.headers.createChild({cls:'x-clear'});
\r
383 // prevent floats from wrapping when clipped
\r
384 this.headers.setWidth(totalWidth+scrollOffset);
\r
385 this.innerCt.setWidth(totalWidth);
\r
389 Ext.reg('columntree', Ext.ux.tree.ColumnTree);
\r
392 Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;
\r
396 * @class Ext.ux.tree.ColumnNodeUI
\r
397 * @extends Ext.tree.TreeNodeUI
\r
399 Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
\r
400 focus: Ext.emptyFn, // prevent odd scrolling behavior
\r
402 renderElements : function(n, a, targetNode, bulkRender){
\r
403 this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
\r
405 var t = n.getOwnerTree();
\r
406 var cols = t.columns;
\r
407 var bw = t.borderWidth;
\r
411 '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
\r
412 '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
\r
413 '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
\r
414 '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
\r
415 '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
\r
416 '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
\r
417 a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
\r
418 '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
\r
420 for(var i = 1, len = cols.length; i < len; i++){
\r
423 buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
\r
424 '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
\r
428 '<div class="x-clear"></div></div>',
\r
429 '<ul class="x-tree-node-ct" style="display:none;"></ul>',
\r
432 if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
\r
433 this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
\r
434 n.nextSibling.ui.getEl(), buf.join(""));
\r
436 this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
\r
439 this.elNode = this.wrap.childNodes[0];
\r
440 this.ctNode = this.wrap.childNodes[1];
\r
441 var cs = this.elNode.firstChild.childNodes;
\r
442 this.indentNode = cs[0];
\r
443 this.ecNode = cs[1];
\r
444 this.iconNode = cs[2];
\r
445 this.anchor = cs[3];
\r
446 this.textNode = cs[3].firstChild;
\r
451 Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;
\r
453 * @class Ext.DataView.LabelEditor
\r
454 * @extends Ext.Editor
\r
457 Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
\r
458 alignment: "tl-tl",
\r
460 cls: "x-small-editor",
\r
462 completeOnEnter: true,
\r
464 labelSelector: 'span.x-editable',
\r
466 constructor: function(cfg, field){
\r
467 Ext.DataView.LabelEditor.superclass.constructor.call(this,
\r
468 field || new Ext.form.TextField({
\r
478 init : function(view){
\r
480 view.on('render', this.initEditor, this);
\r
481 this.on('complete', this.onSave, this);
\r
484 initEditor : function(){
\r
487 containerclick: this.doBlur,
\r
490 this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
\r
493 doBlur: function(){
\r
499 onMouseDown : function(e, target){
\r
500 if(!e.ctrlKey && !e.shiftKey){
\r
501 var item = this.view.findItemFromChild(target);
\r
503 var record = this.view.store.getAt(this.view.indexOf(item));
\r
504 this.startEdit(target, record.data[this.dataIndex]);
\r
505 this.activeRecord = record;
\r
507 e.preventDefault();
\r
511 onSave : function(ed, value){
\r
512 this.activeRecord.set(this.dataIndex, value);
\r
517 Ext.DataView.DragSelector = function(cfg){
\r
519 var view, proxy, tracker;
\r
520 var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
\r
521 var dragSafe = cfg.dragSafe === true;
\r
523 this.init = function(dataView){
\r
525 view.on('render', onRender);
\r
528 function fillRegions(){
\r
530 view.all.each(function(el){
\r
531 rs[rs.length] = el.getRegion();
\r
533 bodyRegion = view.el.getRegion();
\r
536 function cancelClick(){
\r
540 function onBeforeStart(e){
\r
541 return !dragSafe || e.target == view.el.dom;
\r
544 function onStart(e){
\r
545 view.on('containerclick', cancelClick, view, {single:true});
\r
547 proxy = view.el.createChild({cls:'x-view-selector'});
\r
549 if(proxy.dom.parentNode !== view.el.dom){
\r
550 view.el.dom.appendChild(proxy.dom);
\r
552 proxy.setDisplayed('block');
\r
555 view.clearSelections();
\r
558 function onDrag(e){
\r
559 var startXY = tracker.startXY;
\r
560 var xy = tracker.getXY();
\r
562 var x = Math.min(startXY[0], xy[0]);
\r
563 var y = Math.min(startXY[1], xy[1]);
\r
564 var w = Math.abs(startXY[0] - xy[0]);
\r
565 var h = Math.abs(startXY[1] - xy[1]);
\r
567 dragRegion.left = x;
\r
568 dragRegion.top = y;
\r
569 dragRegion.right = x+w;
\r
570 dragRegion.bottom = y+h;
\r
572 dragRegion.constrainTo(bodyRegion);
\r
573 proxy.setRegion(dragRegion);
\r
575 for(var i = 0, len = rs.length; i < len; i++){
\r
576 var r = rs[i], sel = dragRegion.intersect(r);
\r
577 if(sel && !r.selected){
\r
579 view.select(i, true);
\r
580 }else if(!sel && r.selected){
\r
581 r.selected = false;
\r
589 view.un('containerclick', cancelClick, view);
\r
592 proxy.setDisplayed(false);
\r
596 function onRender(view){
\r
597 tracker = new Ext.dd.DragTracker({
\r
598 onBeforeStart: onBeforeStart,
\r
603 tracker.initEl(view.el);
\r
605 };Ext.ns('Ext.ux.form');
608 * @class Ext.ux.form.FileUploadField
609 * @extends Ext.form.TextField
610 * Creates a file upload field.
611 * @xtype fileuploadfield
613 Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
615 * @cfg {String} buttonText The button text to display on the upload button (defaults to
616 * 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
617 * value will be used instead if available.
619 buttonText: 'Browse...',
621 * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
622 * text field (defaults to false). If true, all inherited TextField members will still be available.
626 * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
627 * (defaults to 3). Note that this only applies if {@link #buttonOnly} = false.
631 * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
641 autoSize: Ext.emptyFn,
644 initComponent: function(){
645 Ext.ux.form.FileUploadField.superclass.initComponent.call(this);
649 * @event fileselected
650 * Fires when the underlying file input field's value has changed from the user
651 * selecting a new file from the system file selection dialog.
652 * @param {Ext.ux.form.FileUploadField} this
653 * @param {String} value The file value returned by the underlying file input field
660 onRender : function(ct, position){
661 Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);
663 this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
664 this.el.addClass('x-form-file-text');
665 this.el.dom.removeAttribute('name');
666 this.createFileInput();
668 var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
669 text: this.buttonText
671 this.button = new Ext.Button(Ext.apply(btnCfg, {
673 cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
678 this.wrap.setWidth(this.button.getEl().getWidth());
681 this.bindListeners();
682 this.resizeEl = this.positionEl = this.wrap;
685 bindListeners: function(){
688 mouseenter: function() {
689 this.button.addClass(['x-btn-over','x-btn-focus'])
691 mouseleave: function(){
692 this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
694 mousedown: function(){
695 this.button.addClass('x-btn-click')
698 this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
701 var v = this.fileInput.dom.value;
703 this.fireEvent('fileselected', this, v);
708 createFileInput : function() {
709 this.fileInput = this.wrap.createChild({
710 id: this.getFileInputId(),
711 name: this.name||this.getId(),
720 this.fileInput.remove();
721 this.createFileInput();
722 this.bindListeners();
723 Ext.ux.form.FileUploadField.superclass.reset.call(this);
727 getFileInputId: function(){
728 return this.id + '-file';
732 onResize : function(w, h){
733 Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);
735 this.wrap.setWidth(w);
737 if(!this.buttonOnly){
738 var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
744 onDestroy: function(){
745 Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
746 Ext.destroy(this.fileInput, this.button, this.wrap);
749 onDisable: function(){
750 Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
751 this.doDisable(true);
754 onEnable: function(){
755 Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
756 this.doDisable(false);
761 doDisable: function(disabled){
762 this.fileInput.dom.disabled = disabled;
763 this.button.setDisabled(disabled);
768 preFocus : Ext.emptyFn,
771 alignErrorIcon : function(){
772 this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
777 Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
780 Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
782 * @class Ext.ux.GMapPanel
\r
783 * @extends Ext.Panel
\r
784 * @author Shea Frederick
\r
786 Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
\r
787 initComponent : function(){
\r
799 Ext.applyIf(this,defConfig);
\r
801 Ext.ux.GMapPanel.superclass.initComponent.call(this);
\r
804 afterRender : function(){
\r
806 var wh = this.ownerCt.getSize();
\r
807 Ext.applyIf(this, wh);
\r
809 Ext.ux.GMapPanel.superclass.afterRender.call(this);
\r
811 if (this.gmapType === 'map'){
\r
812 this.gmap = new GMap2(this.body.dom);
\r
815 if (this.gmapType === 'panorama'){
\r
816 this.gmap = new GStreetviewPanorama(this.body.dom);
\r
819 if (typeof this.addControl == 'object' && this.gmapType === 'map') {
\r
820 this.gmap.addControl(this.addControl);
\r
823 if (typeof this.setCenter === 'object') {
\r
824 if (typeof this.setCenter.geoCodeAddr === 'string'){
\r
825 this.geoCodeLookup(this.setCenter.geoCodeAddr);
\r
827 if (this.gmapType === 'map'){
\r
828 var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
\r
829 this.gmap.setCenter(point, this.zoomLevel);
\r
831 if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
\r
832 this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
\r
835 if (this.gmapType === 'panorama'){
\r
836 this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
\r
840 GEvent.bind(this.gmap, 'load', this, function(){
\r
845 onMapReady : function(){
\r
846 this.addMarkers(this.markers);
\r
847 this.addMapControls();
\r
848 this.addOptions();
\r
850 onResize : function(w, h){
\r
852 if (typeof this.getMap() == 'object') {
\r
853 this.gmap.checkResize();
\r
856 Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
\r
859 setSize : function(width, height, animate){
\r
861 if (typeof this.getMap() == 'object') {
\r
862 this.gmap.checkResize();
\r
865 Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
\r
868 getMap : function(){
\r
873 getCenter : function(){
\r
875 return this.getMap().getCenter();
\r
878 getCenterLatLng : function(){
\r
880 var ll = this.getCenter();
\r
881 return {lat: ll.lat(), lng: ll.lng()};
\r
884 addMarkers : function(markers) {
\r
886 if (Ext.isArray(markers)){
\r
887 for (var i = 0; i < markers.length; i++) {
\r
888 var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
\r
889 this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
\r
894 addMarker : function(point, marker, clear, center, listeners){
\r
896 Ext.applyIf(marker,G_DEFAULT_ICON);
\r
898 if (clear === true){
\r
899 this.getMap().clearOverlays();
\r
901 if (center === true) {
\r
902 this.getMap().setCenter(point, this.zoomLevel);
\r
905 var mark = new GMarker(point,marker);
\r
906 if (typeof listeners === 'object'){
\r
907 for (evt in listeners) {
\r
908 GEvent.bind(mark, evt, this, listeners[evt]);
\r
911 this.getMap().addOverlay(mark);
\r
914 addMapControls : function(){
\r
916 if (this.gmapType === 'map') {
\r
917 if (Ext.isArray(this.mapControls)) {
\r
918 for(i=0;i<this.mapControls.length;i++){
\r
919 this.addMapControl(this.mapControls[i]);
\r
921 }else if(typeof this.mapControls === 'string'){
\r
922 this.addMapControl(this.mapControls);
\r
923 }else if(typeof this.mapControls === 'object'){
\r
924 this.getMap().addControl(this.mapControls);
\r
929 addMapControl : function(mc){
\r
931 var mcf = window[mc];
\r
932 if (typeof mcf === 'function') {
\r
933 this.getMap().addControl(new mcf());
\r
937 addOptions : function(){
\r
939 if (Ext.isArray(this.mapConfOpts)) {
\r
941 for(i=0;i<this.mapConfOpts.length;i++){
\r
942 this.addOption(this.mapConfOpts[i]);
\r
944 }else if(typeof this.mapConfOpts === 'string'){
\r
945 this.addOption(this.mapConfOpts);
\r
949 addOption : function(mc){
\r
951 var mcf = this.getMap()[mc];
\r
952 if (typeof mcf === 'function') {
\r
953 this.getMap()[mc]();
\r
957 geoCodeLookup : function(addr) {
\r
959 this.geocoder = new GClientGeocoder();
\r
960 this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));
\r
963 addAddressToMap : function(response) {
\r
965 if (!response || response.Status.code != 200) {
\r
966 Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
\r
968 place = response.Placemark[0];
\r
969 addressinfo = place.AddressDetails;
\r
970 accuracy = addressinfo.Accuracy;
\r
971 if (accuracy === 0) {
\r
972 Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
\r
974 if (accuracy < 7) {
\r
975 Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
\r
977 point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
\r
978 if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
\r
979 this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
\r
989 Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.namespace('Ext.ux.grid');
\r
992 * @class Ext.ux.grid.GridFilters
\r
993 * @extends Ext.util.Observable
\r
994 * <p>GridFilter is a plugin (<code>ptype='gridfilters'</code>) for grids that
\r
995 * allow for a slightly more robust representation of filtering than what is
\r
996 * provided by the default store.</p>
\r
997 * <p>Filtering is adjusted by the user using the grid's column header menu
\r
998 * (this menu can be disabled through configuration). Through this menu users
\r
999 * can configure, enable, and disable filters for each column.</p>
\r
1000 * <p><b><u>Features:</u></b></p>
\r
1001 * <div class="mdetail-params"><ul>
\r
1002 * <li><b>Filtering implementations</b> :
\r
1003 * <div class="sub-desc">
\r
1004 * Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can
\r
1005 * be backed by a Ext.data.Store), and Boolean. Additional custom filter types
\r
1006 * and menus are easily created by extending Ext.ux.grid.filter.Filter.
\r
1008 * <li><b>Graphical indicators</b> :
\r
1009 * <div class="sub-desc">
\r
1010 * Columns that are filtered have {@link #filterCls a configurable css class}
\r
1011 * applied to the column headers.
\r
1013 * <li><b>Paging</b> :
\r
1014 * <div class="sub-desc">
\r
1015 * If specified as a plugin to the grid's configured PagingToolbar, the current page
\r
1016 * will be reset to page 1 whenever you update the filters.
\r
1018 * <li><b>Automatic Reconfiguration</b> :
\r
1019 * <div class="sub-desc">
\r
1020 * Filters automatically reconfigure when the grid 'reconfigure' event fires.
\r
1022 * <li><b>Stateful</b> :
\r
1023 * Filter information will be persisted across page loads by specifying a
\r
1024 * <code>stateId</code> in the Grid configuration.
\r
1025 * <div class="sub-desc">
\r
1026 * The filter collection binds to the
\r
1027 * <code>{@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}</code>
\r
1028 * and <code>{@link Ext.grid.GridPanel#beforestatesave beforestatesave}</code>
\r
1029 * events in order to be stateful.
\r
1031 * <li><b>Grid Changes</b> :
\r
1032 * <div class="sub-desc"><ul>
\r
1033 * <li>A <code>filters</code> <i>property</i> is added to the grid pointing to
\r
1034 * this plugin.</li>
\r
1035 * <li>A <code>filterupdate</code> <i>event</i> is added to the grid and is
\r
1036 * fired upon onStateChange completion.</li>
\r
1037 * </ul></div></li>
\r
1038 * <li><b>Server side code examples</b> :
\r
1039 * <div class="sub-desc"><ul>
\r
1040 * <li><a href="http://www.vinylfox.com/extjs/grid-filter-php-backend-code.php">PHP</a> - (Thanks VinylFox)</li>
\r
1041 * <li><a href="http://extjs.com/forum/showthread.php?p=77326#post77326">Ruby on Rails</a> - (Thanks Zyclops)</li>
\r
1042 * <li><a href="http://extjs.com/forum/showthread.php?p=176596#post176596">Ruby on Rails</a> - (Thanks Rotomaul)</li>
\r
1043 * <li><a href="http://www.debatablybeta.com/posts/using-extjss-grid-filtering-with-django/">Python</a> - (Thanks Matt)</li>
\r
1044 * <li><a href="http://mcantrell.wordpress.com/2008/08/22/extjs-grids-and-grails/">Grails</a> - (Thanks Mike)</li>
\r
1045 * </ul></div></li>
\r
1047 * <p><b><u>Example usage:</u></b></p>
\r
1049 var store = new Ext.data.GroupingStore({
\r
1053 var filters = new Ext.ux.grid.GridFilters({
\r
1054 autoReload: false, //don't reload automatically
\r
1055 local: true, //only filter locally
\r
1056 // filters may be configured through the plugin,
\r
1057 // or in the column definition within the column model configuration
\r
1066 dataIndex: 'price'
\r
1069 dataIndex: 'dateAdded'
\r
1072 dataIndex: 'size',
\r
1073 options: ['extra small', 'small', 'medium', 'large', 'extra large'],
\r
1077 dataIndex: 'visible'
\r
1080 var cm = new Ext.grid.ColumnModel([{
\r
1084 var grid = new Ext.grid.GridPanel({
\r
1087 view: new Ext.grid.GroupingView(),
\r
1088 plugins: [filters],
\r
1091 bbar: new Ext.PagingToolbar({
\r
1094 plugins: [filters] //reset page to page 1 if filters change
\r
1098 store.load({params: {start: 0, limit: 15}});
\r
1100 // a filters property is added to the grid
\r
1104 Ext.ux.grid.GridFilters = Ext.extend(Ext.util.Observable, {
\r
1106 * @cfg {Boolean} autoReload
\r
1107 * Defaults to true, reloading the datasource when a filter change happens.
\r
1108 * Set this to false to prevent the datastore from being reloaded if there
\r
1109 * are changes to the filters. See <code>{@link updateBuffer}</code>.
\r
1111 autoReload : true,
\r
1113 * @cfg {Boolean} encode
\r
1114 * Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to
\r
1115 * encode the filter query parameter sent with a remote request.
\r
1116 * Defaults to false.
\r
1119 * @cfg {Array} filters
\r
1120 * An Array of filters config objects. Refer to each filter type class for
\r
1121 * configuration details specific to each filter type. Filters for Strings,
\r
1122 * Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters
\r
1126 * @cfg {String} filterCls
\r
1127 * The css class to be applied to column headers with active filters.
\r
1128 * Defaults to <tt>'ux-filterd-column'</tt>.
\r
1130 filterCls : 'ux-filtered-column',
\r
1132 * @cfg {Boolean} local
\r
1133 * <tt>true</tt> to use Ext.data.Store filter functions (local filtering)
\r
1134 * instead of the default (<tt>false</tt>) server side filtering.
\r
1138 * @cfg {String} menuFilterText
\r
1139 * defaults to <tt>'Filters'</tt>.
\r
1141 menuFilterText : 'Filters',
\r
1143 * @cfg {String} paramPrefix
\r
1144 * The url parameter prefix for the filters.
\r
1145 * Defaults to <tt>'filter'</tt>.
\r
1147 paramPrefix : 'filter',
\r
1149 * @cfg {Boolean} showMenu
\r
1150 * Defaults to true, including a filter submenu in the default header menu.
\r
1154 * @cfg {String} stateId
\r
1155 * Name of the value to be used to store state information.
\r
1157 stateId : undefined,
\r
1159 * @cfg {Integer} updateBuffer
\r
1160 * Number of milliseconds to defer store updates since the last filter change.
\r
1162 updateBuffer : 500,
\r
1165 constructor : function (config) {
\r
1166 this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);
\r
1167 this.filters = new Ext.util.MixedCollection();
\r
1168 this.filters.getKey = function (o) {
\r
1169 return o ? o.dataIndex : null;
\r
1171 this.addFilters(config.filters);
\r
1172 delete config.filters;
\r
1173 Ext.apply(this, config);
\r
1177 init : function (grid) {
\r
1178 if (grid instanceof Ext.grid.GridPanel) {
\r
1181 this.bindStore(this.grid.getStore(), true);
\r
1183 this.grid.filters = this;
\r
1185 this.grid.addEvents({'filterupdate': true});
\r
1189 beforestaterestore: this.applyState,
\r
1190 beforestatesave: this.saveState,
\r
1191 beforedestroy: this.destroy,
\r
1192 reconfigure: this.onReconfigure
\r
1195 if (grid.rendered){
\r
1201 render: this.onRender
\r
1205 } else if (grid instanceof Ext.PagingToolbar) {
\r
1206 this.toolbar = grid;
\r
1212 * Handler for the grid's beforestaterestore event (fires before the state of the
\r
1213 * grid is restored).
\r
1214 * @param {Object} grid The grid object
\r
1215 * @param {Object} state The hash of state values returned from the StateProvider.
\r
1217 applyState : function (grid, state) {
\r
1219 this.applyingState = true;
\r
1220 this.clearFilters();
\r
1221 if (state.filters) {
\r
1222 for (key in state.filters) {
\r
1223 filter = this.filters.get(key);
\r
1225 filter.setValue(state.filters[key]);
\r
1226 filter.setActive(true);
\r
1230 this.deferredUpdate.cancel();
\r
1234 delete this.applyingState;
\r
1238 * Saves the state of all active filters
\r
1239 * @param {Object} grid
\r
1240 * @param {Object} state
\r
1241 * @return {Boolean}
\r
1243 saveState : function (grid, state) {
\r
1245 this.filters.each(function (filter) {
\r
1246 if (filter.active) {
\r
1247 filters[filter.dataIndex] = filter.getValue();
\r
1250 return (state.filters = filters);
\r
1255 * Handler called when the grid is rendered
\r
1257 onRender : function () {
\r
1258 this.grid.getView().on('refresh', this.onRefresh, this);
\r
1259 this.createMenu();
\r
1264 * Handler called by the grid 'beforedestroy' event
\r
1266 destroy : function () {
\r
1268 this.purgeListeners();
\r
1270 if(this.filterMenu){
\r
1271 Ext.menu.MenuMgr.unregister(this.filterMenu);
\r
1272 this.filterMenu.destroy();
\r
1273 this.filterMenu = this.menu.menu = null;
\r
1278 * Remove all filters, permanently destroying them.
\r
1280 removeAll : function () {
\r
1282 Ext.destroy.apply(Ext, this.filters.items);
\r
1283 // remove all items from the collection
\r
1284 this.filters.clear();
\r
1290 * Changes the data store bound to this view and refreshes it.
\r
1291 * @param {Store} store The store to bind to this view
\r
1293 bindStore : function(store, initial){
\r
1294 if(!initial && this.store){
\r
1296 store.un('load', this.onLoad, this);
\r
1298 store.un('beforeload', this.onBeforeLoad, this);
\r
1303 store.on('load', this.onLoad, this);
\r
1305 store.on('beforeload', this.onBeforeLoad, this);
\r
1308 this.store = store;
\r
1313 * Handler called when the grid reconfigure event fires
\r
1315 onReconfigure : function () {
\r
1316 this.bindStore(this.grid.getStore());
\r
1317 this.store.clearFilter();
\r
1319 this.addFilters(this.grid.getColumnModel());
\r
1320 this.updateColumnHeadings();
\r
1323 createMenu : function () {
\r
1324 var view = this.grid.getView(),
\r
1325 hmenu = view.hmenu;
\r
1327 if (this.showMenu && hmenu) {
\r
1329 this.sep = hmenu.addSeparator();
\r
1330 this.filterMenu = new Ext.menu.Menu({
\r
1331 id: this.grid.id + '-filters-menu'
\r
1333 this.menu = hmenu.add({
\r
1335 itemId: 'filters',
\r
1336 text: this.menuFilterText,
\r
1337 menu: this.filterMenu
\r
1342 checkchange: this.onCheckChange,
\r
1343 beforecheckchange: this.onBeforeCheck
\r
1345 hmenu.on('beforeshow', this.onMenu, this);
\r
1347 this.updateColumnHeadings();
\r
1352 * Get the filter menu from the filters MixedCollection based on the clicked header
\r
1354 getMenuFilter : function () {
\r
1355 var view = this.grid.getView();
\r
1356 if (!view || view.hdCtxIndex === undefined) {
\r
1359 return this.filters.get(
\r
1360 view.cm.config[view.hdCtxIndex].dataIndex
\r
1366 * Handler called by the grid's hmenu beforeshow event
\r
1368 onMenu : function (filterMenu) {
\r
1369 var filter = this.getMenuFilter();
\r
1373 TODO: lazy rendering
\r
1374 if (!filter.menu) {
\r
1375 filter.menu = filter.createMenu();
\r
1378 this.menu.menu = filter.menu;
\r
1379 this.menu.setChecked(filter.active, false);
\r
1380 // disable the menu if filter.disabled explicitly set to true
\r
1381 this.menu.setDisabled(filter.disabled === true);
\r
1384 this.menu.setVisible(filter !== undefined);
\r
1385 this.sep.setVisible(filter !== undefined);
\r
1389 onCheckChange : function (item, value) {
\r
1390 this.getMenuFilter().setActive(value);
\r
1394 onBeforeCheck : function (check, value) {
\r
1395 return !value || this.getMenuFilter().isActivatable();
\r
1400 * Handler for all events on filters.
\r
1401 * @param {String} event Event name
\r
1402 * @param {Object} filter Standard signature of the event before the event is fired
\r
1404 onStateChange : function (event, filter) {
\r
1405 if (event === 'serialize') {
\r
1409 if (filter == this.getMenuFilter()) {
\r
1410 this.menu.setChecked(filter.active, false);
\r
1413 if ((this.autoReload || this.local) && !this.applyingState) {
\r
1414 this.deferredUpdate.delay(this.updateBuffer);
\r
1416 this.updateColumnHeadings();
\r
1418 if (!this.applyingState) {
\r
1419 this.grid.saveState();
\r
1421 this.grid.fireEvent('filterupdate', this, filter);
\r
1426 * Handler for store's beforeload event when configured for remote filtering
\r
1427 * @param {Object} store
\r
1428 * @param {Object} options
\r
1430 onBeforeLoad : function (store, options) {
\r
1431 options.params = options.params || {};
\r
1432 this.cleanParams(options.params);
\r
1433 var params = this.buildQuery(this.getFilterData());
\r
1434 Ext.apply(options.params, params);
\r
1439 * Handler for store's load event when configured for local filtering
\r
1440 * @param {Object} store
\r
1441 * @param {Object} options
\r
1443 onLoad : function (store, options) {
\r
1444 store.filterBy(this.getRecordFilter());
\r
1449 * Handler called when the grid's view is refreshed
\r
1451 onRefresh : function () {
\r
1452 this.updateColumnHeadings();
\r
1456 * Update the styles for the header row based on the active filters
\r
1458 updateColumnHeadings : function () {
\r
1459 var view = this.grid.getView(),
\r
1460 hds, i, len, filter;
\r
1461 if (view.mainHd) {
\r
1462 hds = view.mainHd.select('td').removeClass(this.filterCls);
\r
1463 for (i = 0, len = view.cm.config.length; i < len; i++) {
\r
1464 filter = this.getFilter(view.cm.config[i].dataIndex);
\r
1465 if (filter && filter.active) {
\r
1466 hds.item(i).addClass(this.filterCls);
\r
1473 reload : function () {
\r
1475 this.grid.store.clearFilter(true);
\r
1476 this.grid.store.filterBy(this.getRecordFilter());
\r
1479 store = this.grid.store;
\r
1480 this.deferredUpdate.cancel();
\r
1481 if (this.toolbar) {
\r
1482 start = store.paramNames.start;
\r
1483 if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {
\r
1484 store.lastOptions.params[start] = 0;
\r
1492 * Method factory that generates a record validator for the filters active at the time
\r
1496 getRecordFilter : function () {
\r
1497 var f = [], len, i;
\r
1498 this.filters.each(function (filter) {
\r
1499 if (filter.active) {
\r
1505 return function (record) {
\r
1506 for (i = 0; i < len; i++) {
\r
1507 if (!f[i].validateRecord(record)) {
\r
1516 * Adds a filter to the collection and observes it for state change.
\r
1517 * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.
\r
1518 * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.
\r
1520 addFilter : function (config) {
\r
1521 var Cls = this.getFilterClass(config.type),
\r
1522 filter = config.menu ? config : (new Cls(config));
\r
1523 this.filters.add(filter);
\r
1525 Ext.util.Observable.capture(filter, this.onStateChange, this);
\r
1530 * Adds filters to the collection.
\r
1531 * @param {Array/Ext.grid.ColumnModel} filters Either an Array of
\r
1532 * filter configuration objects or an Ext.grid.ColumnModel. The columns
\r
1533 * of a passed Ext.grid.ColumnModel will be examined for a <code>filter</code>
\r
1534 * property and, if present, will be used as the filter configuration object.
\r
1536 addFilters : function (filters) {
\r
1538 var i, len, filter, cm = false, dI;
\r
1539 if (filters instanceof Ext.grid.ColumnModel) {
\r
1540 filters = filters.config;
\r
1543 for (i = 0, len = filters.length; i < len; i++) {
\r
1546 dI = filters[i].dataIndex;
\r
1547 filter = filters[i].filter || filters[i].filterable;
\r
1549 filter = (filter === true) ? {} : filter;
\r
1550 Ext.apply(filter, {dataIndex:dI});
\r
1551 // filter type is specified in order of preference:
\r
1552 // filter type specified in config
\r
1553 // type specified in store's field's type config
\r
1554 filter.type = filter.type || this.store.fields.get(dI).type;
\r
1557 filter = filters[i];
\r
1559 // if filter config found add filter for the column
\r
1561 this.addFilter(filter);
\r
1568 * Returns a filter for the given dataIndex, if one exists.
\r
1569 * @param {String} dataIndex The dataIndex of the desired filter object.
\r
1570 * @return {Ext.ux.grid.filter.Filter}
\r
1572 getFilter : function (dataIndex) {
\r
1573 return this.filters.get(dataIndex);
\r
1577 * Turns all filters off. This does not clear the configuration information
\r
1578 * (see {@link #removeAll}).
\r
1580 clearFilters : function () {
\r
1581 this.filters.each(function (filter) {
\r
1582 filter.setActive(false);
\r
1587 * Returns an Array of the currently active filters.
\r
1588 * @return {Array} filters Array of the currently active filters.
\r
1590 getFilterData : function () {
\r
1591 var filters = [], i, len;
\r
1593 this.filters.each(function (f) {
\r
1595 var d = [].concat(f.serialize());
\r
1596 for (i = 0, len = d.length; i < len; i++) {
\r
1598 field: f.dataIndex,
\r
1608 * Function to take the active filters data and build it into a query.
\r
1609 * The format of the query depends on the <code>{@link #encode}</code>
\r
1611 * <div class="mdetail-params"><ul>
\r
1613 * <li><b><tt>false</tt></b> : <i>Default</i>
\r
1614 * <div class="sub-desc">
\r
1615 * Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:
\r
1617 filters[0][field]="someDataIndex"&
\r
1618 filters[0][data][comparison]="someValue1"&
\r
1619 filters[0][data][type]="someValue2"&
\r
1620 filters[0][data][value]="someValue3"&
\r
1623 * <li><b><tt>true</tt></b> :
\r
1624 * <div class="sub-desc">
\r
1625 * JSON encode the filter data
\r
1627 filters[0][field]="someDataIndex"&
\r
1628 filters[0][data][comparison]="someValue1"&
\r
1629 filters[0][data][type]="someValue2"&
\r
1630 filters[0][data][value]="someValue3"&
\r
1634 * Override this method to customize the format of the filter query for remote requests.
\r
1635 * @param {Array} filters A collection of objects representing active filters and their configuration.
\r
1636 * Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured
\r
1637 * to be unique as any one filter may be a composite of more basic filters for the same dataIndex.
\r
1638 * @return {Object} Query keys and values
\r
1640 buildQuery : function (filters) {
\r
1641 var p = {}, i, f, root, dataPrefix, key, tmp,
\r
1642 len = filters.length;
\r
1644 if (!this.encode){
\r
1645 for (i = 0; i < len; i++) {
\r
1647 root = [this.paramPrefix, '[', i, ']'].join('');
\r
1648 p[root + '[field]'] = f.field;
\r
1650 dataPrefix = root + '[data]';
\r
1651 for (key in f.data) {
\r
1652 p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];
\r
1657 for (i = 0; i < len; i++) {
\r
1659 tmp.push(Ext.apply(
\r
1665 // only build if there is active filter
\r
1666 if (tmp.length > 0){
\r
1667 p[this.paramPrefix] = Ext.util.JSON.encode(tmp);
\r
1674 * Removes filter related query parameters from the provided object.
\r
1675 * @param {Object} p Query parameters that may contain filter related fields.
\r
1677 cleanParams : function (p) {
\r
1678 // if encoding just delete the property
\r
1679 if (this.encode) {
\r
1680 delete p[this.paramPrefix];
\r
1681 // otherwise scrub the object of filter data
\r
1684 regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');
\r
1686 if (regex.test(key)) {
\r
1694 * Function for locating filter classes, overwrite this with your favorite
\r
1695 * loader to provide dynamic filter loading.
\r
1696 * @param {String} type The type of filter to load ('Filter' is automatically
\r
1697 * appended to the passed type; eg, 'string' becomes 'StringFilter').
\r
1698 * @return {Class} The Ext.ux.grid.filter.Class
\r
1700 getFilterClass : function (type) {
\r
1701 // map the supported Ext.data.Field type values into a supported filter
\r
1711 return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];
\r
1716 Ext.preg('gridfilters', Ext.ux.grid.GridFilters);
\r
1717 Ext.namespace('Ext.ux.grid.filter');
\r
1720 * @class Ext.ux.grid.filter.Filter
\r
1721 * @extends Ext.util.Observable
\r
1722 * Abstract base class for filter implementations.
\r
1724 Ext.ux.grid.filter.Filter = Ext.extend(Ext.util.Observable, {
\r
1726 * @cfg {Boolean} active
\r
1727 * Indicates the initial status of the filter (defaults to false).
\r
1731 * True if this filter is active. Use setActive() to alter after configuration.
\r
1733 * @property active
\r
1736 * @cfg {String} dataIndex
\r
1737 * The {@link Ext.data.Store} dataIndex of the field this filter represents.
\r
1738 * The dataIndex does not actually have to exist in the store.
\r
1742 * The filter configuration menu that will be installed into the filter submenu of a column menu.
\r
1743 * @type Ext.menu.Menu
\r
1748 * @cfg {Number} updateBuffer
\r
1749 * Number of milliseconds to wait after user interaction to fire an update. Only supported
\r
1750 * by filters: 'list', 'numeric', and 'string'. Defaults to 500.
\r
1752 updateBuffer : 500,
\r
1754 constructor : function (config) {
\r
1755 Ext.apply(this, config);
\r
1760 * Fires when an inactive filter becomes active
\r
1761 * @param {Ext.ux.grid.filter.Filter} this
\r
1765 * @event deactivate
\r
1766 * Fires when an active filter becomes inactive
\r
1767 * @param {Ext.ux.grid.filter.Filter} this
\r
1771 * @event serialize
\r
1772 * Fires after the serialization process. Use this to attach additional parameters to serialization
\r
1773 * data before it is encoded and sent to the server.
\r
1774 * @param {Array/Object} data A map or collection of maps representing the current filter configuration.
\r
1775 * @param {Ext.ux.grid.filter.Filter} filter The filter being serialized.
\r
1780 * Fires when a filter configuration has changed
\r
1781 * @param {Ext.ux.grid.filter.Filter} this The filter object.
\r
1785 Ext.ux.grid.filter.Filter.superclass.constructor.call(this);
\r
1787 this.menu = new Ext.menu.Menu();
\r
1788 this.init(config);
\r
1789 if(config && config.value){
\r
1790 this.setValue(config.value);
\r
1791 this.setActive(config.active !== false, true);
\r
1792 delete config.value;
\r
1797 * Destroys this filter by purging any event listeners, and removing any menus.
\r
1799 destroy : function(){
\r
1801 this.menu.destroy();
\r
1803 this.purgeListeners();
\r
1807 * Template method to be implemented by all subclasses that is to
\r
1808 * initialize the filter and install required menu items.
\r
1809 * Defaults to Ext.emptyFn.
\r
1811 init : Ext.emptyFn,
\r
1814 * Template method to be implemented by all subclasses that is to
\r
1815 * get and return the value of the filter.
\r
1816 * Defaults to Ext.emptyFn.
\r
1817 * @return {Object} The 'serialized' form of this filter
\r
1818 * @methodOf Ext.ux.grid.filter.Filter
\r
1820 getValue : Ext.emptyFn,
\r
1823 * Template method to be implemented by all subclasses that is to
\r
1824 * set the value of the filter and fire the 'update' event.
\r
1825 * Defaults to Ext.emptyFn.
\r
1826 * @param {Object} data The value to set the filter
\r
1827 * @methodOf Ext.ux.grid.filter.Filter
\r
1829 setValue : Ext.emptyFn,
\r
1832 * Template method to be implemented by all subclasses that is to
\r
1833 * return <tt>true</tt> if the filter has enough configuration information to be activated.
\r
1834 * Defaults to <tt>return true</tt>.
\r
1835 * @return {Boolean}
\r
1837 isActivatable : function(){
\r
1842 * Template method to be implemented by all subclasses that is to
\r
1843 * get and return serialized filter data for transmission to the server.
\r
1844 * Defaults to Ext.emptyFn.
\r
1846 getSerialArgs : Ext.emptyFn,
\r
1849 * Template method to be implemented by all subclasses that is to
\r
1850 * validates the provided Ext.data.Record against the filters configuration.
\r
1851 * Defaults to <tt>return true</tt>.
\r
1852 * @param {Ext.data.Record} record The record to validate
\r
1853 * @return {Boolean} true if the record is valid within the bounds
\r
1854 * of the filter, false otherwise.
\r
1856 validateRecord : function(){
\r
1861 * Returns the serialized filter data for transmission to the server
\r
1862 * and fires the 'serialize' event.
\r
1863 * @return {Object/Array} An object or collection of objects containing
\r
1864 * key value pairs representing the current configuration of the filter.
\r
1865 * @methodOf Ext.ux.grid.filter.Filter
\r
1867 serialize : function(){
\r
1868 var args = this.getSerialArgs();
\r
1869 this.fireEvent('serialize', args, this);
\r
1874 fireUpdate : function(){
\r
1875 if (this.active) {
\r
1876 this.fireEvent('update', this);
\r
1878 this.setActive(this.isActivatable());
\r
1882 * Sets the status of the filter and fires the appropriate events.
\r
1883 * @param {Boolean} active The new filter state.
\r
1884 * @param {Boolean} suppressEvent True to prevent events from being fired.
\r
1885 * @methodOf Ext.ux.grid.filter.Filter
\r
1887 setActive : function(active, suppressEvent){
\r
1888 if(this.active != active){
\r
1889 this.active = active;
\r
1890 if (suppressEvent !== true) {
\r
1891 this.fireEvent(active ? 'activate' : 'deactivate', this);
\r
1896 * @class Ext.ux.grid.filter.BooleanFilter
\r
1897 * @extends Ext.ux.grid.filter.Filter
\r
1898 * Boolean filters use unique radio group IDs (so you can have more than one!)
\r
1899 * <p><b><u>Example Usage:</u></b></p>
\r
1901 var filters = new Ext.ux.grid.GridFilters({
\r
1904 // required configs
\r
1906 dataIndex: 'visible'
\r
1908 // optional configs
\r
1909 defaultValue: null, // leave unselected (false selected by default)
\r
1910 yesText: 'Yes', // default
\r
1911 noText: 'No' // default
\r
1916 Ext.ux.grid.filter.BooleanFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
\r
1918 * @cfg {Boolean} defaultValue
\r
1919 * Set this to null if you do not want either option to be checked by default. Defaults to false.
\r
1921 defaultValue : false,
\r
1923 * @cfg {String} yesText
\r
1924 * Defaults to 'Yes'.
\r
1928 * @cfg {String} noText
\r
1929 * Defaults to 'No'.
\r
1935 * Template method that is to initialize the filter and install required menu items.
\r
1937 init : function (config) {
\r
1938 var gId = Ext.id();
\r
1940 new Ext.menu.CheckItem({text: this.yesText, group: gId, checked: this.defaultValue === true}),
\r
1941 new Ext.menu.CheckItem({text: this.noText, group: gId, checked: this.defaultValue === false})];
\r
1943 this.menu.add(this.options[0], this.options[1]);
\r
1945 for(var i=0; i<this.options.length; i++){
\r
1946 this.options[i].on('click', this.fireUpdate, this);
\r
1947 this.options[i].on('checkchange', this.fireUpdate, this);
\r
1953 * Template method that is to get and return the value of the filter.
\r
1954 * @return {String} The value of this filter
\r
1956 getValue : function () {
\r
1957 return this.options[0].checked;
\r
1962 * Template method that is to set the value of the filter.
\r
1963 * @param {Object} value The value to set the filter
\r
1965 setValue : function (value) {
\r
1966 this.options[value ? 0 : 1].setChecked(true);
\r
1971 * Template method that is to get and return serialized filter data for
\r
1972 * transmission to the server.
\r
1973 * @return {Object/Array} An object or collection of objects containing
\r
1974 * key value pairs representing the current configuration of the filter.
\r
1976 getSerialArgs : function () {
\r
1977 var args = {type: 'boolean', value: this.getValue()};
\r
1982 * Template method that is to validate the provided Ext.data.Record
\r
1983 * against the filters configuration.
\r
1984 * @param {Ext.data.Record} record The record to validate
\r
1985 * @return {Boolean} true if the record is valid within the bounds
\r
1986 * of the filter, false otherwise.
\r
1988 validateRecord : function (record) {
\r
1989 return record.get(this.dataIndex) == this.getValue();
\r
1992 * @class Ext.ux.grid.filter.DateFilter
\r
1993 * @extends Ext.ux.grid.filter.Filter
\r
1994 * Filter by a configurable Ext.menu.DateMenu
\r
1995 * <p><b><u>Example Usage:</u></b></p>
\r
1997 var filters = new Ext.ux.grid.GridFilters({
\r
2000 // required configs
\r
2002 dataIndex: 'dateAdded',
\r
2004 // optional configs
\r
2005 dateFormat: 'm/d/Y', // default
\r
2006 beforeText: 'Before', // default
\r
2007 afterText: 'After', // default
\r
2008 onText: 'On', // default
\r
2010 // any DateMenu configs
\r
2013 active: true // default is false
\r
2018 Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
\r
2020 * @cfg {String} afterText
\r
2021 * Defaults to 'After'.
\r
2023 afterText : 'After',
\r
2025 * @cfg {String} beforeText
\r
2026 * Defaults to 'Before'.
\r
2028 beforeText : 'Before',
\r
2030 * @cfg {Object} compareMap
\r
2031 * Map for assigning the comparison values used in serialization.
\r
2039 * @cfg {String} dateFormat
\r
2040 * The date format to return when using getValue.
\r
2041 * Defaults to 'm/d/Y'.
\r
2043 dateFormat : 'm/d/Y',
\r
2046 * @cfg {Date} maxDate
\r
2047 * Allowable date as passed to the Ext.DatePicker
\r
2048 * Defaults to undefined.
\r
2051 * @cfg {Date} minDate
\r
2052 * Allowable date as passed to the Ext.DatePicker
\r
2053 * Defaults to undefined.
\r
2056 * @cfg {Array} menuItems
\r
2057 * The items to be shown in this menu
\r
2058 * Defaults to:<pre>
\r
2059 * menuItems : ['before', 'after', '-', 'on'],
\r
2062 menuItems : ['before', 'after', '-', 'on'],
\r
2065 * @cfg {Object} menuItemCfgs
\r
2066 * Default configuration options for each menu item
\r
2069 selectOnFocus: true,
\r
2074 * @cfg {String} onText
\r
2075 * Defaults to 'On'.
\r
2080 * @cfg {Object} pickerOpts
\r
2081 * Configuration options for the date picker associated with each field.
\r
2087 * Template method that is to initialize the filter and install required menu items.
\r
2089 init : function (config) {
\r
2090 var menuCfg, i, len, item, cfg, Cls;
\r
2092 menuCfg = Ext.apply(this.pickerOpts, {
\r
2093 minDate: this.minDate,
\r
2094 maxDate: this.maxDate,
\r
2095 format: this.dateFormat,
\r
2098 select: this.onMenuSelect
\r
2103 for (i = 0, len = this.menuItems.length; i < len; i++) {
\r
2104 item = this.menuItems[i];
\r
2105 if (item !== '-') {
\r
2107 itemId: 'range-' + item,
\r
2108 text: this[item + 'Text'],
\r
2109 menu: new Ext.menu.DateMenu(
\r
2110 Ext.apply(menuCfg, {
\r
2116 checkchange: this.onCheckChange
\r
2119 Cls = Ext.menu.CheckItem;
\r
2120 item = this.fields[item] = new Cls(cfg);
\r
2123 this.menu.add(item);
\r
2127 onCheckChange : function () {
\r
2128 this.setActive(this.isActivatable());
\r
2129 this.fireEvent('update', this);
\r
2134 * Handler method called when there is a keyup event on an input
\r
2135 * item of this menu.
\r
2137 onInputKeyUp : function (field, e) {
\r
2138 var k = e.getKey();
\r
2139 if (k == e.RETURN && field.isValid()) {
\r
2141 this.menu.hide(true);
\r
2147 * Handler for when the menu for a field fires the 'select' event
\r
2148 * @param {Object} date
\r
2149 * @param {Object} menuItem
\r
2150 * @param {Object} value
\r
2151 * @param {Object} picker
\r
2153 onMenuSelect : function (menuItem, value, picker) {
\r
2154 var fields = this.fields,
\r
2155 field = this.fields[menuItem.itemId];
\r
2157 field.setChecked(true);
\r
2159 if (field == fields.on) {
\r
2160 fields.before.setChecked(false, true);
\r
2161 fields.after.setChecked(false, true);
\r
2163 fields.on.setChecked(false, true);
\r
2164 if (field == fields.after && fields.before.menu.picker.value < value) {
\r
2165 fields.before.setChecked(false, true);
\r
2166 } else if (field == fields.before && fields.after.menu.picker.value > value) {
\r
2167 fields.after.setChecked(false, true);
\r
2170 this.fireEvent('update', this);
\r
2175 * Template method that is to get and return the value of the filter.
\r
2176 * @return {String} The value of this filter
\r
2178 getValue : function () {
\r
2179 var key, result = {};
\r
2180 for (key in this.fields) {
\r
2181 if (this.fields[key].checked) {
\r
2182 result[key] = this.fields[key].menu.picker.getValue();
\r
2190 * Template method that is to set the value of the filter.
\r
2191 * @param {Object} value The value to set the filter
\r
2192 * @param {Boolean} preserve true to preserve the checked status
\r
2193 * of the other fields. Defaults to false, unchecking the
\r
2196 setValue : function (value, preserve) {
\r
2198 for (key in this.fields) {
\r
2200 this.fields[key].menu.picker.setValue(value[key]);
\r
2201 this.fields[key].setChecked(true);
\r
2202 } else if (!preserve) {
\r
2203 this.fields[key].setChecked(false);
\r
2206 this.fireEvent('update', this);
\r
2211 * Template method that is to return <tt>true</tt> if the filter
\r
2212 * has enough configuration information to be activated.
\r
2213 * @return {Boolean}
\r
2215 isActivatable : function () {
\r
2217 for (key in this.fields) {
\r
2218 if (this.fields[key].checked) {
\r
2227 * Template method that is to get and return serialized filter data for
\r
2228 * transmission to the server.
\r
2229 * @return {Object/Array} An object or collection of objects containing
\r
2230 * key value pairs representing the current configuration of the filter.
\r
2232 getSerialArgs : function () {
\r
2234 for (var key in this.fields) {
\r
2235 if(this.fields[key].checked){
\r
2238 comparison: this.compareMap[key],
\r
2239 value: this.getFieldValue(key).format(this.dateFormat)
\r
2247 * Get and return the date menu picker value
\r
2248 * @param {String} item The field identifier ('before', 'after', 'on')
\r
2249 * @return {Date} Gets the current selected value of the date field
\r
2251 getFieldValue : function(item){
\r
2252 return this.fields[item].menu.picker.getValue();
\r
2256 * Gets the menu picker associated with the passed field
\r
2257 * @param {String} item The field identifier ('before', 'after', 'on')
\r
2258 * @return {Object} The menu picker
\r
2260 getPicker : function(item){
\r
2261 return this.fields[item].menu.picker;
\r
2265 * Template method that is to validate the provided Ext.data.Record
\r
2266 * against the filters configuration.
\r
2267 * @param {Ext.data.Record} record The record to validate
\r
2268 * @return {Boolean} true if the record is valid within the bounds
\r
2269 * of the filter, false otherwise.
\r
2271 validateRecord : function (record) {
\r
2274 val = record.get(this.dataIndex);
\r
2276 if(!Ext.isDate(val)){
\r
2279 val = val.clearTime(true).getTime();
\r
2281 for (key in this.fields) {
\r
2282 if (this.fields[key].checked) {
\r
2283 pickerValue = this.getFieldValue(key).clearTime(true).getTime();
\r
2284 if (key == 'before' && pickerValue <= val) {
\r
2287 if (key == 'after' && pickerValue >= val) {
\r
2290 if (key == 'on' && pickerValue != val) {
\r
2298 * @class Ext.ux.grid.filter.ListFilter
\r
2299 * @extends Ext.ux.grid.filter.Filter
\r
2300 * <p>List filters are able to be preloaded/backed by an Ext.data.Store to load
\r
2301 * their options the first time they are shown. ListFilter utilizes the
\r
2302 * {@link Ext.ux.menu.ListMenu} component.</p>
\r
2303 * <p>Although not shown here, this class accepts all configuration options
\r
2304 * for {@link Ext.ux.menu.ListMenu}.</p>
\r
2306 * <p><b><u>Example Usage:</u></b></p>
\r
2308 var filters = new Ext.ux.grid.GridFilters({
\r
2312 dataIndex: 'size',
\r
2314 // options will be used as data to implicitly creates an ArrayStore
\r
2315 options: ['extra small', 'small', 'medium', 'large', 'extra large']
\r
2321 Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
\r
2324 * @cfg {Array} options
\r
2325 * <p><code>data</code> to be used to implicitly create a data store
\r
2326 * to back this list when the data source is <b>local</b>. If the
\r
2327 * data for the list is remote, use the <code>{@link #store}</code>
\r
2328 * config instead.</p>
\r
2329 * <br><p>Each item within the provided array may be in one of the
\r
2330 * following formats:</p>
\r
2331 * <div class="mdetail-params"><ul>
\r
2332 * <li><b>Array</b> :
\r
2335 [11, 'extra small'],
\r
2339 [44, 'extra large']
\r
2343 * <li><b>Object</b> :
\r
2345 labelField: 'name', // override default of 'text'
\r
2347 {id: 11, name:'extra small'},
\r
2348 {id: 18, name:'small'},
\r
2349 {id: 22, name:'medium'},
\r
2350 {id: 35, name:'large'},
\r
2351 {id: 44, name:'extra large'}
\r
2355 * <li><b>String</b> :
\r
2357 * options: ['extra small', 'small', 'medium', 'large', 'extra large']
\r
2362 * @cfg {Boolean} phpMode
\r
2363 * <p>Adjust the format of this filter. Defaults to false.</p>
\r
2364 * <br><p>When GridFilters <code>@cfg encode = false</code> (default):</p>
\r
2366 // phpMode == false (default):
\r
2367 filter[0][data][type] list
\r
2368 filter[0][data][value] value1
\r
2369 filter[0][data][value] value2
\r
2370 filter[0][field] prod
\r
2372 // phpMode == true:
\r
2373 filter[0][data][type] list
\r
2374 filter[0][data][value] value1, value2
\r
2375 filter[0][field] prod
\r
2377 * When GridFilters <code>@cfg encode = true</code>:
\r
2379 // phpMode == false (default):
\r
2380 filter : [{"type":"list","value":["small","medium"],"field":"size"}]
\r
2382 // phpMode == true:
\r
2383 filter : [{"type":"list","value":"small,medium","field":"size"}]
\r
2388 * @cfg {Ext.data.Store} store
\r
2389 * The {@link Ext.data.Store} this list should use as its data source
\r
2390 * when the data source is <b>remote</b>. If the data for the list
\r
2391 * is local, use the <code>{@link #options}</code> config instead.
\r
2396 * Template method that is to initialize the filter and install required menu items.
\r
2397 * @param {Object} config
\r
2399 init : function (config) {
\r
2400 this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);
\r
2402 // if a menu already existed, do clean up first
\r
2404 this.menu.destroy();
\r
2406 this.menu = new Ext.ux.menu.ListMenu(config);
\r
2407 this.menu.on('checkchange', this.onCheckChange, this);
\r
2412 * Template method that is to get and return the value of the filter.
\r
2413 * @return {String} The value of this filter
\r
2415 getValue : function () {
\r
2416 return this.menu.getSelected();
\r
2420 * Template method that is to set the value of the filter.
\r
2421 * @param {Object} value The value to set the filter
\r
2423 setValue : function (value) {
\r
2424 this.menu.setSelected(value);
\r
2425 this.fireEvent('update', this);
\r
2430 * Template method that is to return <tt>true</tt> if the filter
\r
2431 * has enough configuration information to be activated.
\r
2432 * @return {Boolean}
\r
2434 isActivatable : function () {
\r
2435 return this.getValue().length > 0;
\r
2440 * Template method that is to get and return serialized filter data for
\r
2441 * transmission to the server.
\r
2442 * @return {Object/Array} An object or collection of objects containing
\r
2443 * key value pairs representing the current configuration of the filter.
\r
2445 getSerialArgs : function () {
\r
2446 var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};
\r
2451 onCheckChange : function(){
\r
2452 this.dt.delay(this.updateBuffer);
\r
2457 * Template method that is to validate the provided Ext.data.Record
\r
2458 * against the filters configuration.
\r
2459 * @param {Ext.data.Record} record The record to validate
\r
2460 * @return {Boolean} true if the record is valid within the bounds
\r
2461 * of the filter, false otherwise.
\r
2463 validateRecord : function (record) {
\r
2464 return this.getValue().indexOf(record.get(this.dataIndex)) > -1;
\r
2467 * @class Ext.ux.grid.filter.NumericFilter
\r
2468 * @extends Ext.ux.grid.filter.Filter
\r
2469 * Filters using an Ext.ux.menu.RangeMenu.
\r
2470 * <p><b><u>Example Usage:</u></b></p>
\r
2472 var filters = new Ext.ux.grid.GridFilters({
\r
2476 dataIndex: 'price'
\r
2481 Ext.ux.grid.filter.NumericFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
\r
2484 * @cfg {Object} fieldCls
\r
2485 * The Class to use to construct each field item within this menu
\r
2486 * Defaults to:<pre>
\r
2487 * fieldCls : Ext.form.NumberField
\r
2490 fieldCls : Ext.form.NumberField,
\r
2492 * @cfg {Object} fieldCfg
\r
2493 * The default configuration options for any field item unless superseded
\r
2494 * by the <code>{@link #fields}</code> configuration.
\r
2495 * Defaults to:<pre>
\r
2506 * @cfg {Object} fields
\r
2507 * The field items may be configured individually
\r
2508 * Defaults to <tt>undefined</tt>.
\r
2512 gt: { // override fieldCfg options
\r
2514 fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}
\r
2520 * @cfg {Object} iconCls
\r
2521 * The iconCls to be applied to each comparator field item.
\r
2522 * Defaults to:<pre>
\r
2524 gt : 'ux-rangemenu-gt',
\r
2525 lt : 'ux-rangemenu-lt',
\r
2526 eq : 'ux-rangemenu-eq'
\r
2531 gt : 'ux-rangemenu-gt',
\r
2532 lt : 'ux-rangemenu-lt',
\r
2533 eq : 'ux-rangemenu-eq'
\r
2537 * @cfg {Object} menuItemCfgs
\r
2538 * Default configuration options for each menu item
\r
2539 * Defaults to:<pre>
\r
2541 emptyText: 'Enter Filter Text...',
\r
2542 selectOnFocus: true,
\r
2548 emptyText: 'Enter Filter Text...',
\r
2549 selectOnFocus: true,
\r
2554 * @cfg {Array} menuItems
\r
2555 * The items to be shown in this menu. Items are added to the menu
\r
2556 * according to their position within this array. Defaults to:<pre>
\r
2557 * menuItems : ['lt','gt','-','eq']
\r
2560 menuItems : ['lt', 'gt', '-', 'eq'],
\r
2564 * Template method that is to initialize the filter and install required menu items.
\r
2566 init : function (config) {
\r
2567 // if a menu already existed, do clean up first
\r
2569 this.menu.destroy();
\r
2571 this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, {
\r
2572 // pass along filter configs to the menu
\r
2573 fieldCfg : this.fieldCfg || {},
\r
2574 fieldCls : this.fieldCls,
\r
2575 fields : this.fields || {},
\r
2576 iconCls: this.iconCls,
\r
2577 menuItemCfgs: this.menuItemCfgs,
\r
2578 menuItems: this.menuItems,
\r
2579 updateBuffer: this.updateBuffer
\r
2581 // relay the event fired by the menu
\r
2582 this.menu.on('update', this.fireUpdate, this);
\r
2587 * Template method that is to get and return the value of the filter.
\r
2588 * @return {String} The value of this filter
\r
2590 getValue : function () {
\r
2591 return this.menu.getValue();
\r
2596 * Template method that is to set the value of the filter.
\r
2597 * @param {Object} value The value to set the filter
\r
2599 setValue : function (value) {
\r
2600 this.menu.setValue(value);
\r
2605 * Template method that is to return <tt>true</tt> if the filter
\r
2606 * has enough configuration information to be activated.
\r
2607 * @return {Boolean}
\r
2609 isActivatable : function () {
\r
2610 var values = this.getValue();
\r
2611 for (key in values) {
\r
2612 if (values[key] !== undefined) {
\r
2621 * Template method that is to get and return serialized filter data for
\r
2622 * transmission to the server.
\r
2623 * @return {Object/Array} An object or collection of objects containing
\r
2624 * key value pairs representing the current configuration of the filter.
\r
2626 getSerialArgs : function () {
\r
2629 values = this.menu.getValue();
\r
2630 for (key in values) {
\r
2634 value: values[key]
\r
2641 * Template method that is to validate the provided Ext.data.Record
\r
2642 * against the filters configuration.
\r
2643 * @param {Ext.data.Record} record The record to validate
\r
2644 * @return {Boolean} true if the record is valid within the bounds
\r
2645 * of the filter, false otherwise.
\r
2647 validateRecord : function (record) {
\r
2648 var val = record.get(this.dataIndex),
\r
2649 values = this.getValue();
\r
2650 if (values.eq !== undefined && val != values.eq) {
\r
2653 if (values.lt !== undefined && val >= values.lt) {
\r
2656 if (values.gt !== undefined && val <= values.gt) {
\r
2662 * @class Ext.ux.grid.filter.StringFilter
\r
2663 * @extends Ext.ux.grid.filter.Filter
\r
2664 * Filter by a configurable Ext.form.TextField
\r
2665 * <p><b><u>Example Usage:</u></b></p>
\r
2667 var filters = new Ext.ux.grid.GridFilters({
\r
2670 // required configs
\r
2672 dataIndex: 'name',
\r
2674 // optional configs
\r
2676 active: true, // default is false
\r
2677 iconCls: 'ux-gridfilter-text-icon' // default
\r
2678 // any Ext.form.TextField configs accepted
\r
2683 Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
\r
2686 * @cfg {String} iconCls
\r
2687 * The iconCls to be applied to the menu item.
\r
2688 * Defaults to <tt>'ux-gridfilter-text-icon'</tt>.
\r
2690 iconCls : 'ux-gridfilter-text-icon',
\r
2692 emptyText: 'Enter Filter Text...',
\r
2693 selectOnFocus: true,
\r
2698 * Template method that is to initialize the filter and install required menu items.
\r
2700 init : function (config) {
\r
2701 Ext.applyIf(config, {
\r
2702 enableKeyEvents: true,
\r
2703 iconCls: this.iconCls,
\r
2706 keyup: this.onInputKeyUp
\r
2710 this.inputItem = new Ext.form.TextField(config);
\r
2711 this.menu.add(this.inputItem);
\r
2712 this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
\r
2717 * Template method that is to get and return the value of the filter.
\r
2718 * @return {String} The value of this filter
\r
2720 getValue : function () {
\r
2721 return this.inputItem.getValue();
\r
2726 * Template method that is to set the value of the filter.
\r
2727 * @param {Object} value The value to set the filter
\r
2729 setValue : function (value) {
\r
2730 this.inputItem.setValue(value);
\r
2731 this.fireEvent('update', this);
\r
2736 * Template method that is to return <tt>true</tt> if the filter
\r
2737 * has enough configuration information to be activated.
\r
2738 * @return {Boolean}
\r
2740 isActivatable : function () {
\r
2741 return this.inputItem.getValue().length > 0;
\r
2746 * Template method that is to get and return serialized filter data for
\r
2747 * transmission to the server.
\r
2748 * @return {Object/Array} An object or collection of objects containing
\r
2749 * key value pairs representing the current configuration of the filter.
\r
2751 getSerialArgs : function () {
\r
2752 return {type: 'string', value: this.getValue()};
\r
2756 * Template method that is to validate the provided Ext.data.Record
\r
2757 * against the filters configuration.
\r
2758 * @param {Ext.data.Record} record The record to validate
\r
2759 * @return {Boolean} true if the record is valid within the bounds
\r
2760 * of the filter, false otherwise.
\r
2762 validateRecord : function (record) {
\r
2763 var val = record.get(this.dataIndex);
\r
2765 if(typeof val != 'string') {
\r
2766 return (this.getValue().length === 0);
\r
2769 return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
\r
2774 * Handler method called when there is a keyup event on this.inputItem
\r
2776 onInputKeyUp : function (field, e) {
\r
2777 var k = e.getKey();
\r
2778 if (k == e.RETURN && field.isValid()) {
\r
2780 this.menu.hide(true);
\r
2783 // restart the timer
\r
2784 this.updateTask.delay(this.updateBuffer);
\r
2787 Ext.namespace('Ext.ux.menu');
\r
2790 * @class Ext.ux.menu.ListMenu
\r
2791 * @extends Ext.menu.Menu
\r
2792 * This is a supporting class for {@link Ext.ux.grid.filter.ListFilter}.
\r
2793 * Although not listed as configuration options for this class, this class
\r
2794 * also accepts all configuration options from {@link Ext.ux.grid.filter.ListFilter}.
\r
2796 Ext.ux.menu.ListMenu = Ext.extend(Ext.menu.Menu, {
\r
2798 * @cfg {String} labelField
\r
2799 * Defaults to 'text'.
\r
2801 labelField : 'text',
\r
2803 * @cfg {String} paramPrefix
\r
2804 * Defaults to 'Loading...'.
\r
2806 loadingText : 'Loading...',
\r
2808 * @cfg {Boolean} loadOnShow
\r
2809 * Defaults to true.
\r
2811 loadOnShow : true,
\r
2813 * @cfg {Boolean} single
\r
2814 * Specify true to group all items in this list into a single-select
\r
2815 * radio button group. Defaults to false.
\r
2819 constructor : function (cfg) {
\r
2820 this.selected = [];
\r
2823 * @event checkchange
\r
2824 * Fires when there is a change in checked items from this list
\r
2825 * @param {Object} item Ext.menu.CheckItem
\r
2826 * @param {Object} checked The checked value that was set
\r
2831 Ext.ux.menu.ListMenu.superclass.constructor.call(this, cfg = cfg || {});
\r
2833 if(!cfg.store && cfg.options){
\r
2835 for(var i=0, len=cfg.options.length; i<len; i++){
\r
2836 var value = cfg.options[i];
\r
2837 switch(Ext.type(value)){
\r
2838 case 'array': options.push(value); break;
\r
2839 case 'object': options.push([value.id, value[this.labelField]]); break;
\r
2840 case 'string': options.push([value, value]); break;
\r
2844 this.store = new Ext.data.Store({
\r
2845 reader: new Ext.data.ArrayReader({id: 0}, ['id', this.labelField]),
\r
2848 'load': this.onLoad,
\r
2852 this.loaded = true;
\r
2854 this.add({text: this.loadingText, iconCls: 'loading-indicator'});
\r
2855 this.store.on('load', this.onLoad, this);
\r
2859 destroy : function () {
\r
2861 this.store.destroy();
\r
2863 Ext.ux.menu.ListMenu.superclass.destroy.call(this);
\r
2867 * Lists will initially show a 'loading' item while the data is retrieved from the store.
\r
2868 * In some cases the loaded data will result in a list that goes off the screen to the
\r
2869 * right (as placement calculations were done with the loading item). This adapter will
\r
2870 * allow show to be called with no arguments to show with the previous arguments and
\r
2871 * thus recalculate the width and potentially hang the menu from the left.
\r
2873 show : function () {
\r
2874 var lastArgs = null;
\r
2875 return function(){
\r
2876 if(arguments.length === 0){
\r
2877 Ext.ux.menu.ListMenu.superclass.show.apply(this, lastArgs);
\r
2879 lastArgs = arguments;
\r
2880 if (this.loadOnShow && !this.loaded) {
\r
2881 this.store.load();
\r
2883 Ext.ux.menu.ListMenu.superclass.show.apply(this, arguments);
\r
2889 onLoad : function (store, records) {
\r
2890 var visible = this.isVisible();
\r
2893 this.removeAll(true);
\r
2895 var gid = this.single ? Ext.id() : null;
\r
2896 for(var i=0, len=records.length; i<len; i++){
\r
2897 var item = new Ext.menu.CheckItem({
\r
2898 text: records[i].get(this.labelField),
\r
2900 checked: this.selected.indexOf(records[i].id) > -1,
\r
2901 hideOnClick: false});
\r
2903 item.itemId = records[i].id;
\r
2904 item.on('checkchange', this.checkChange, this);
\r
2909 this.loaded = true;
\r
2914 this.fireEvent('load', this, records);
\r
2918 * Get the selected items.
\r
2919 * @return {Array} selected
\r
2921 getSelected : function () {
\r
2922 return this.selected;
\r
2926 setSelected : function (value) {
\r
2927 value = this.selected = [].concat(value);
\r
2929 if (this.loaded) {
\r
2930 this.items.each(function(item){
\r
2931 item.setChecked(false, true);
\r
2932 for (var i = 0, len = value.length; i < len; i++) {
\r
2933 if (item.itemId == value[i]) {
\r
2934 item.setChecked(true, true);
\r
2942 * Handler for the 'checkchange' event from an check item in this menu
\r
2943 * @param {Object} item Ext.menu.CheckItem
\r
2944 * @param {Object} checked The checked value that was set
\r
2946 checkChange : function (item, checked) {
\r
2948 this.items.each(function(item){
\r
2949 if (item.checked) {
\r
2950 value.push(item.itemId);
\r
2953 this.selected = value;
\r
2955 this.fireEvent('checkchange', item, checked);
\r
2957 });Ext.ns('Ext.ux.menu');
\r
2960 * @class Ext.ux.menu.RangeMenu
\r
2961 * @extends Ext.menu.Menu
\r
2962 * Custom implementation of Ext.menu.Menu that has preconfigured
\r
2963 * items for gt, lt, eq.
\r
2964 * <p><b><u>Example Usage:</u></b></p>
\r
2969 Ext.ux.menu.RangeMenu = Ext.extend(Ext.menu.Menu, {
\r
2971 constructor : function (config) {
\r
2973 Ext.ux.menu.RangeMenu.superclass.constructor.call(this, config);
\r
2978 * Fires when a filter configuration has changed
\r
2979 * @param {Ext.ux.grid.filter.Filter} this The filter object.
\r
2984 this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
\r
2986 var i, len, item, cfg, Cls;
\r
2988 for (i = 0, len = this.menuItems.length; i < len; i++) {
\r
2989 item = this.menuItems[i];
\r
2990 if (item !== '-') {
\r
2993 itemId: 'range-' + item,
\r
2994 enableKeyEvents: true,
\r
2995 iconCls: this.iconCls[item] || 'no-icon',
\r
2998 keyup: this.onInputKeyUp
\r
3004 Ext.applyIf(this.fields[item] || {}, this.fieldCfg[item]),
\r
3005 // configurable defaults
\r
3008 Cls = cfg.fieldCls || this.fieldCls;
\r
3009 item = this.fields[item] = new Cls(cfg);
\r
3017 * called by this.updateTask
\r
3019 fireUpdate : function () {
\r
3020 this.fireEvent('update', this);
\r
3024 * Get and return the value of the filter.
\r
3025 * @return {String} The value of this filter
\r
3027 getValue : function () {
\r
3028 var result = {}, key, field;
\r
3029 for (key in this.fields) {
\r
3030 field = this.fields[key];
\r
3031 if (field.isValid() && String(field.getValue()).length > 0) {
\r
3032 result[key] = field.getValue();
\r
3039 * Set the value of this menu and fires the 'update' event.
\r
3040 * @param {Object} data The data to assign to this menu
\r
3042 setValue : function (data) {
\r
3044 for (key in this.fields) {
\r
3045 this.fields[key].setValue(data[key] !== undefined ? data[key] : '');
\r
3047 this.fireEvent('update', this);
\r
3052 * Handler method called when there is a keyup event on an input
\r
3053 * item of this menu.
\r
3055 onInputKeyUp : function (field, e) {
\r
3056 var k = e.getKey();
\r
3057 if (k == e.RETURN && field.isValid()) {
\r
3063 if (field == this.fields.eq) {
\r
3064 if (this.fields.gt) {
\r
3065 this.fields.gt.setValue(null);
\r
3067 if (this.fields.lt) {
\r
3068 this.fields.lt.setValue(null);
\r
3072 this.fields.eq.setValue(null);
\r
3075 // restart the timer
\r
3076 this.updateTask.delay(this.updateBuffer);
\r
3079 Ext.ns('Ext.ux.grid');
\r
3082 * @class Ext.ux.grid.GroupSummary
\r
3083 * @extends Ext.util.Observable
\r
3084 * A GridPanel plugin that enables dynamic column calculations and a dynamically
\r
3085 * updated grouped summary row.
\r
3087 Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {
\r
3089 * @cfg {Function} summaryRenderer Renderer example:<pre><code>
\r
3090 summaryRenderer: function(v, params, data){
\r
3091 return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
\r
3096 * @cfg {String} summaryType (Optional) The type of
\r
3097 * calculation to be used for the column. For options available see
\r
3098 * {@link #Calculations}.
\r
3101 constructor : function(config){
\r
3102 Ext.apply(this, config);
\r
3103 Ext.ux.grid.GroupSummary.superclass.constructor.call(this);
\r
3105 init : function(grid){
\r
3107 var v = this.view = grid.getView();
\r
3108 v.doGroupEnd = this.doGroupEnd.createDelegate(this);
\r
3110 v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
\r
3111 v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
\r
3112 v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
\r
3113 v.afterMethod('onUpdate', this.doUpdate, this);
\r
3114 v.afterMethod('onRemove', this.doRemove, this);
\r
3117 this.rowTpl = new Ext.Template(
\r
3118 '<div class="x-grid3-summary-row" style="{tstyle}">',
\r
3119 '<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
\r
3120 '<tbody><tr>{cells}</tr></tbody>',
\r
3123 this.rowTpl.disableFormats = true;
\r
3125 this.rowTpl.compile();
\r
3127 if(!this.cellTpl){
\r
3128 this.cellTpl = new Ext.Template(
\r
3129 '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
\r
3130 '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',
\r
3133 this.cellTpl.disableFormats = true;
\r
3135 this.cellTpl.compile();
\r
3139 * Toggle the display of the summary row on/off
\r
3140 * @param {Boolean} visible <tt>true</tt> to show the summary, <tt>false</tt> to hide the summary.
\r
3142 toggleSummaries : function(visible){
\r
3143 var el = this.grid.getGridEl();
\r
3145 if(visible === undefined){
\r
3146 visible = el.hasClass('x-grid-hide-summary');
\r
3148 el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');
\r
3152 renderSummary : function(o, cs){
\r
3153 cs = cs || this.view.getColumnData();
\r
3154 var cfg = this.grid.getColumnModel().config,
\r
3155 buf = [], c, p = {}, cf, last = cs.length-1;
\r
3156 for(var i = 0, len = cs.length; i < len; i++){
\r
3160 p.style = c.style;
\r
3161 p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
\r
3162 if(cf.summaryType || cf.summaryRenderer){
\r
3163 p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
\r
3167 if(p.value == undefined || p.value === "") p.value = " ";
\r
3168 buf[buf.length] = this.cellTpl.apply(p);
\r
3171 return this.rowTpl.apply({
\r
3172 tstyle: 'width:'+this.view.getTotalWidth()+';',
\r
3173 cells: buf.join('')
\r
3179 * @param {Object} rs
\r
3180 * @param {Object} cs
\r
3182 calculate : function(rs, cs){
\r
3183 var data = {}, r, c, cfg = this.grid.getColumnModel().config, cf;
\r
3184 for(var j = 0, jlen = rs.length; j < jlen; j++){
\r
3186 for(var i = 0, len = cs.length; i < len; i++){
\r
3189 if(cf.summaryType){
\r
3190 data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
\r
3197 doGroupEnd : function(buf, g, cs, ds, colCount){
\r
3198 var data = this.calculate(g.rs, cs);
\r
3199 buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');
\r
3202 doWidth : function(col, w, tw){
\r
3203 var gs = this.view.getGroups(), s;
\r
3204 for(var i = 0, len = gs.length; i < len; i++){
\r
3205 s = gs[i].childNodes[2];
\r
3206 s.style.width = tw;
\r
3207 s.firstChild.style.width = tw;
\r
3208 s.firstChild.rows[0].childNodes[col].style.width = w;
\r
3212 doAllWidths : function(ws, tw){
\r
3213 var gs = this.view.getGroups(), s, cells, wlen = ws.length;
\r
3214 for(var i = 0, len = gs.length; i < len; i++){
\r
3215 s = gs[i].childNodes[2];
\r
3216 s.style.width = tw;
\r
3217 s.firstChild.style.width = tw;
\r
3218 cells = s.firstChild.rows[0].childNodes;
\r
3219 for(var j = 0; j < wlen; j++){
\r
3220 cells[j].style.width = ws[j];
\r
3225 doHidden : function(col, hidden, tw){
\r
3226 var gs = this.view.getGroups(), s, display = hidden ? 'none' : '';
\r
3227 for(var i = 0, len = gs.length; i < len; i++){
\r
3228 s = gs[i].childNodes[2];
\r
3229 s.style.width = tw;
\r
3230 s.firstChild.style.width = tw;
\r
3231 s.firstChild.rows[0].childNodes[col].style.display = display;
\r
3235 // Note: requires that all (or the first) record in the
\r
3236 // group share the same group value. Returns false if the group
\r
3237 // could not be found.
\r
3238 refreshSummary : function(groupValue){
\r
3239 return this.refreshSummaryById(this.view.getGroupId(groupValue));
\r
3242 getSummaryNode : function(gid){
\r
3243 var g = Ext.fly(gid, '_gsummary');
\r
3245 return g.down('.x-grid3-summary-row', true);
\r
3250 refreshSummaryById : function(gid){
\r
3251 var g = Ext.getDom(gid);
\r
3256 this.grid.getStore().each(function(r){
\r
3257 if(r._groupId == gid){
\r
3258 rs[rs.length] = r;
\r
3261 var cs = this.view.getColumnData(),
\r
3262 data = this.calculate(rs, cs),
\r
3263 markup = this.renderSummary({data: data}, cs),
\r
3264 existing = this.getSummaryNode(gid);
\r
3267 g.removeChild(existing);
\r
3269 Ext.DomHelper.append(g, markup);
\r
3273 doUpdate : function(ds, record){
\r
3274 this.refreshSummaryById(record._groupId);
\r
3277 doRemove : function(ds, record, index, isUpdate){
\r
3279 this.refreshSummaryById(record._groupId);
\r
3284 * Show a message in the summary row.
\r
3286 grid.on('afteredit', function(){
\r
3287 var groupValue = 'Ext Forms: Field Anchoring';
\r
3288 summary.showSummaryMsg(groupValue, 'Updating Summary...');
\r
3291 * @param {String} groupValue
\r
3292 * @param {String} msg Text to use as innerHTML for the summary row.
\r
3294 showSummaryMsg : function(groupValue, msg){
\r
3295 var gid = this.view.getGroupId(groupValue),
\r
3296 node = this.getSummaryNode(gid);
\r
3298 node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';
\r
3303 //backwards compat
\r
3304 Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;
\r
3308 * Calculation types for summary row:</p><div class="mdetail-params"><ul>
\r
3309 * <li><b><tt>sum</tt></b> : <div class="sub-desc"></div></li>
\r
3310 * <li><b><tt>count</tt></b> : <div class="sub-desc"></div></li>
\r
3311 * <li><b><tt>max</tt></b> : <div class="sub-desc"></div></li>
\r
3312 * <li><b><tt>min</tt></b> : <div class="sub-desc"></div></li>
\r
3313 * <li><b><tt>average</tt></b> : <div class="sub-desc"></div></li>
\r
3315 * <p>Custom calculations may be implemented. An example of
\r
3316 * custom <code>summaryType=totalCost</code>:</p><pre><code>
\r
3317 // define a custom summary function
\r
3318 Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
\r
3319 return v + (record.data.estimate * record.data.rate);
\r
3322 * @property Calculations
\r
3325 Ext.ux.grid.GroupSummary.Calculations = {
\r
3326 'sum' : function(v, record, field){
\r
3327 return v + (record.data[field]||0);
\r
3330 'count' : function(v, record, field, data){
\r
3331 return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
\r
3334 'max' : function(v, record, field, data){
\r
3335 var v = record.data[field];
\r
3336 var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
\r
3337 return v > max ? (data[field+'max'] = v) : max;
\r
3340 'min' : function(v, record, field, data){
\r
3341 var v = record.data[field];
\r
3342 var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
\r
3343 return v < min ? (data[field+'min'] = v) : min;
\r
3346 'average' : function(v, record, field, data){
\r
3347 var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
\r
3348 var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
\r
3349 return t === 0 ? 0 : t / c;
\r
3352 Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;
\r
3355 * @class Ext.ux.grid.HybridSummary
\r
3356 * @extends Ext.ux.grid.GroupSummary
\r
3357 * Adds capability to specify the summary data for the group via json as illustrated here:
\r
3362 projectId: 100, project: 'House',
\r
3363 taskId: 112, description: 'Paint',
\r
3364 estimate: 6, rate: 150,
\r
3372 description: 14, estimate: 9,
\r
3373 rate: 99, due: new Date(2009, 6, 29),
\r
3381 Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {
\r
3384 * @param {Object} rs
\r
3385 * @param {Object} cs
\r
3387 calculate : function(rs, cs){
\r
3388 var gcol = this.view.getGroupField(),
\r
3389 gvalue = rs[0].data[gcol],
\r
3390 gdata = this.getSummaryData(gvalue);
\r
3391 return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
\r
3396 grid.on('afteredit', function(){
\r
3397 var groupValue = 'Ext Forms: Field Anchoring';
\r
3398 summary.showSummaryMsg(groupValue, 'Updating Summary...');
\r
3399 setTimeout(function(){ // simulate server call
\r
3400 // HybridSummary class implements updateSummaryData
\r
3401 summary.updateSummaryData(groupValue,
\r
3402 // create data object based on configured dataIndex
\r
3403 {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
\r
3407 * @param {String} groupValue
\r
3408 * @param {Object} data data object
\r
3409 * @param {Boolean} skipRefresh (Optional) Defaults to false
\r
3411 updateSummaryData : function(groupValue, data, skipRefresh){
\r
3412 var json = this.grid.getStore().reader.jsonData;
\r
3413 if(!json.summaryData){
\r
3414 json.summaryData = {};
\r
3416 json.summaryData[groupValue] = data;
\r
3418 this.refreshSummary(groupValue);
\r
3423 * Returns the summaryData for the specified groupValue or null.
\r
3424 * @param {String} groupValue
\r
3425 * @return {Object} summaryData
\r
3427 getSummaryData : function(groupValue){
\r
3428 var json = this.grid.getStore().reader.jsonData;
\r
3429 if(json && json.summaryData){
\r
3430 return json.summaryData[groupValue];
\r
3436 //backwards compat
\r
3437 Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;
\r
3438 Ext.ux.GroupTab = Ext.extend(Ext.Container, {
\r
3443 deferredRender: true,
\r
3447 idDelimiter: '__',
\r
3449 headerAsText: false,
\r
3453 hideBorders: true,
\r
3455 initComponent: function(config){
\r
3456 Ext.apply(this, config);
\r
3457 this.frame = false;
\r
3459 Ext.ux.GroupTab.superclass.initComponent.call(this);
\r
3461 this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');
\r
3463 this.setLayout(new Ext.layout.CardLayout({
\r
3464 deferredRender: this.deferredRender
\r
3467 if (!this.stack) {
\r
3468 this.stack = Ext.TabPanel.AccessStack();
\r
3473 this.on('beforerender', function(){
\r
3474 this.groupEl = this.ownerCt.getGroupEl(this);
\r
3477 this.on('add', this.onAdd, this, {
\r
3480 this.on('remove', this.onRemove, this, {
\r
3484 if (this.mainItem !== undefined) {
\r
3485 var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
\r
3486 delete this.mainItem;
\r
3487 this.setMainItem(item);
\r
3492 * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
\r
3493 * can return false to cancel the tab change.
\r
3494 * @param {String/Panel} tab The id or tab Panel to activate
\r
3496 setActiveTab : function(item){
\r
3497 item = this.getComponent(item);
\r
3498 if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
\r
3501 if(!this.rendered){
\r
3502 this.activeTab = item;
\r
3505 if(this.activeTab != item){
\r
3506 if(this.activeTab && this.activeTab != this.mainItem){
\r
3507 var oldEl = this.getTabEl(this.activeTab);
\r
3509 Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
\r
3511 this.activeTab.fireEvent('deactivate', this.activeTab);
\r
3513 var el = this.getTabEl(item);
\r
3514 Ext.fly(el).addClass('x-grouptabs-strip-active');
\r
3515 this.activeTab = item;
\r
3516 this.stack.add(item);
\r
3518 this.layout.setActiveItem(item);
\r
3519 if(this.layoutOnTabChange && item.doLayout){
\r
3522 if(this.scrolling){
\r
3523 this.scrollToTab(item, this.animScroll);
\r
3526 item.fireEvent('activate', item);
\r
3527 this.fireEvent('tabchange', this, item);
\r
3531 getTabEl: function(item){
\r
3532 if (item == this.mainItem) {
\r
3533 return this.groupEl;
\r
3535 return Ext.TabPanel.prototype.getTabEl.call(this, item);
\r
3538 onRender: function(ct, position){
\r
3539 Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);
\r
3541 this.strip = Ext.fly(this.groupEl).createChild({
\r
3543 cls: 'x-grouptabs-sub'
\r
3546 this.tooltip = new Ext.ToolTip({
\r
3547 target: this.groupEl,
\r
3548 delegate: 'a.x-grouptabs-text',
\r
3550 renderTo: document.body,
\r
3552 beforeshow: function(tip) {
\r
3553 var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
\r
3555 : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);
\r
3557 if(!item.tabTip) {
\r
3560 tip.body.dom.innerHTML = item.tabTip;
\r
3566 if (!this.itemTpl) {
\r
3567 var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');
\r
3568 tt.disableFormats = true;
\r
3570 Ext.ux.GroupTab.prototype.itemTpl = tt;
\r
3573 this.items.each(this.initTab, this);
\r
3576 afterRender: function(){
\r
3577 Ext.ux.GroupTab.superclass.afterRender.call(this);
\r
3579 if (this.activeTab !== undefined) {
\r
3580 var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
\r
3581 delete this.activeTab;
\r
3582 this.setActiveTab(item);
\r
3587 initTab: function(item, index){
\r
3588 var before = this.strip.dom.childNodes[index];
\r
3589 var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
\r
3591 if (item === this.mainItem) {
\r
3592 item.tabEl = this.groupEl;
\r
3593 p.cls += ' x-grouptabs-main-item';
\r
3596 var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
\r
3598 item.tabEl = item.tabEl || el;
\r
3600 item.on('disable', this.onItemDisabled, this);
\r
3601 item.on('enable', this.onItemEnabled, this);
\r
3602 item.on('titlechange', this.onItemTitleChanged, this);
\r
3603 item.on('iconchange', this.onItemIconChanged, this);
\r
3604 item.on('beforeshow', this.onBeforeShowItem, this);
\r
3607 setMainItem: function(item){
\r
3608 item = this.getComponent(item);
\r
3609 if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
\r
3613 this.mainItem = item;
\r
3616 getMainItem: function(){
\r
3617 return this.mainItem || null;
\r
3621 onBeforeShowItem: function(item){
\r
3622 if (item != this.activeTab) {
\r
3623 this.setActiveTab(item);
\r
3629 onAdd: function(gt, item, index){
\r
3630 if (this.rendered) {
\r
3631 this.initTab.call(this, item, index);
\r
3636 onRemove: function(tp, item){
\r
3637 Ext.destroy(Ext.get(this.getTabEl(item)));
\r
3638 this.stack.remove(item);
\r
3639 item.un('disable', this.onItemDisabled, this);
\r
3640 item.un('enable', this.onItemEnabled, this);
\r
3641 item.un('titlechange', this.onItemTitleChanged, this);
\r
3642 item.un('iconchange', this.onItemIconChanged, this);
\r
3643 item.un('beforeshow', this.onBeforeShowItem, this);
\r
3644 if (item == this.activeTab) {
\r
3645 var next = this.stack.next();
\r
3647 this.setActiveTab(next);
\r
3649 else if (this.items.getCount() > 0) {
\r
3650 this.setActiveTab(0);
\r
3653 this.activeTab = null;
\r
3659 onBeforeAdd: function(item){
\r
3660 var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
\r
3662 this.setActiveTab(item);
\r
3665 Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
\r
3666 var es = item.elements;
\r
3667 item.elements = es ? es.replace(',header', '') : es;
\r
3668 item.border = (item.border === true);
\r
3672 onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
\r
3673 onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,
\r
3676 onItemTitleChanged: function(item){
\r
3677 var el = this.getTabEl(item);
\r
3679 Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
\r
3684 onItemIconChanged: function(item, iconCls, oldCls){
\r
3685 var el = this.getTabEl(item);
\r
3687 Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
\r
3691 beforeDestroy: function(){
\r
3692 Ext.TabPanel.prototype.beforeDestroy.call(this);
\r
3693 this.tooltip.destroy();
\r
3697 Ext.reg('grouptab', Ext.ux.GroupTab);
\r
3700 Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
\r
3701 tabPosition: 'left',
\r
3703 alternateColor: false,
\r
3705 alternateCls: 'x-grouptabs-panel-alt',
\r
3707 defaultType: 'grouptab',
\r
3709 deferredRender: false,
\r
3711 activeGroup : null,
\r
3713 initComponent: function(){
\r
3714 Ext.ux.GroupTabPanel.superclass.initComponent.call(this);
\r
3717 'beforegroupchange',
\r
3720 this.elements = 'body,header';
\r
3721 this.stripTarget = 'header';
\r
3723 this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';
\r
3725 this.addClass('x-grouptabs-panel');
\r
3727 if (this.tabStyle && this.tabStyle != '') {
\r
3728 this.addClass('x-grouptabs-panel-' + this.tabStyle);
\r
3731 if (this.alternateColor) {
\r
3732 this.addClass(this.alternateCls);
\r
3735 this.on('beforeadd', function(gtp, item, index){
\r
3736 this.initGroup(item, index);
\r
3740 initEvents : function() {
\r
3741 this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
\r
3744 onRender: function(ct, position){
\r
3745 Ext.TabPanel.superclass.onRender.call(this, ct, position);
\r
3747 var pos = this.tabPosition == 'top' ? 'header' : 'footer';
\r
3748 this[pos].addClass('x-tab-panel-'+pos+'-plain');
\r
3751 var st = this[this.stripTarget];
\r
3753 this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
\r
3754 tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});
\r
3756 var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
\r
3757 this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
\r
3759 this.header.addClass('x-grouptabs-panel-header');
\r
3760 this.bwrap.addClass('x-grouptabs-bwrap');
\r
3761 this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
\r
3763 if (!this.groupTpl) {
\r
3764 var tt = new Ext.Template(
\r
3765 '<li class="{cls}" id="{id}">',
\r
3766 '<a class="x-grouptabs-expand" onclick="return false;"></a>',
\r
3767 '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
\r
3768 '<span>{text}</span></a>',
\r
3771 tt.disableFormats = true;
\r
3773 Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
\r
3775 this.items.each(this.initGroup, this);
\r
3778 afterRender: function(){
\r
3779 Ext.ux.GroupTabPanel.superclass.afterRender.call(this);
\r
3781 this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
\r
3782 cls: 'x-tab-joint'
\r
3785 this.addClass('x-tab-panel-' + this.tabPosition);
\r
3786 this.header.setWidth(this.tabWidth);
\r
3788 if (this.activeGroup !== undefined) {
\r
3789 var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);
\r
3790 delete this.activeGroup;
\r
3791 this.setActiveGroup(group);
\r
3792 group.setActiveTab(group.getMainItem());
\r
3796 getGroupEl : Ext.TabPanel.prototype.getTabEl,
\r
3799 findTargets: function(e){
\r
3801 itemEl = e.getTarget('li', this.strip);
\r
3803 item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
\r
3804 if (item.disabled) {
\r
3813 expand: e.getTarget('.x-grouptabs-expand', this.strip),
\r
3814 isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
\r
3821 onStripMouseDown: function(e){
\r
3822 if (e.button != 0) {
\r
3825 e.preventDefault();
\r
3826 var t = this.findTargets(e);
\r
3828 this.toggleGroup(t.el);
\r
3830 else if (t.item) {
\r
3832 t.item.setActiveTab(t.item.getMainItem());
\r
3835 t.item.ownerCt.setActiveTab(t.item);
\r
3840 expandGroup: function(groupEl){
\r
3841 if(groupEl.isXType) {
\r
3842 groupEl = this.getGroupEl(groupEl);
\r
3844 Ext.fly(groupEl).addClass('x-grouptabs-expanded');
\r
3847 toggleGroup: function(groupEl){
\r
3848 if(groupEl.isXType) {
\r
3849 groupEl = this.getGroupEl(groupEl);
\r
3851 Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
\r
3852 this.syncTabJoint();
\r
3855 syncTabJoint: function(groupEl){
\r
3856 if (!this.tabJoint) {
\r
3860 groupEl = groupEl || this.getGroupEl(this.activeGroup);
\r
3862 this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2);
\r
3864 var y = Ext.isGecko2 ? 0 : 1;
\r
3865 if (this.tabPosition == 'left'){
\r
3866 this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
\r
3869 this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
\r
3873 this.tabJoint.hide();
\r
3877 getActiveTab : function() {
\r
3878 if(!this.activeGroup) return null;
\r
3879 return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;
\r
3882 onResize: function(){
\r
3883 Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
\r
3884 this.syncTabJoint();
\r
3887 createCorner: function(el, pos){
\r
3888 return Ext.fly(el).createChild({
\r
3889 cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
\r
3893 initGroup: function(group, index){
\r
3894 var before = this.strip.dom.childNodes[index],
\r
3895 p = this.getTemplateArgs(group);
\r
3896 if (index === 0) {
\r
3897 p.cls += ' x-tab-first';
\r
3899 p.cls += ' x-grouptabs-main';
\r
3900 p.text = group.getMainItem().title;
\r
3902 var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),
\r
3903 tl = this.createCorner(el, 'top-' + this.tabPosition),
\r
3904 bl = this.createCorner(el, 'bottom-' + this.tabPosition);
\r
3906 if (group.expanded) {
\r
3907 this.expandGroup(el);
\r
3910 if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
\r
3911 bl.setLeft('-10px');
\r
3912 bl.setBottom('-5px');
\r
3913 tl.setLeft('-10px');
\r
3914 tl.setTop('-5px');
\r
3919 changemainitem: this.onGroupChangeMainItem,
\r
3920 beforetabchange: this.onGroupBeforeTabChange
\r
3924 setActiveGroup : function(group) {
\r
3925 group = this.getComponent(group);
\r
3926 if(!group || this.fireEvent('beforegroupchange', this, group, this.activeGroup) === false){
\r
3929 if(!this.rendered){
\r
3930 this.activeGroup = group;
\r
3933 if(this.activeGroup != group){
\r
3934 if(this.activeGroup){
\r
3935 var oldEl = this.getGroupEl(this.activeGroup);
\r
3937 Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
\r
3939 this.activeGroup.fireEvent('deactivate', this.activeGroup);
\r
3942 var groupEl = this.getGroupEl(group);
\r
3943 Ext.fly(groupEl).addClass('x-grouptabs-strip-active');
\r
3945 this.activeGroup = group;
\r
3946 this.stack.add(group);
\r
3948 this.layout.setActiveItem(group);
\r
3949 this.syncTabJoint(groupEl);
\r
3951 group.fireEvent('activate', group);
\r
3952 this.fireEvent('groupchange', this, group);
\r
3956 onGroupBeforeTabChange: function(group, newTab, oldTab){
\r
3957 if(group !== this.activeGroup || newTab !== oldTab) {
\r
3958 this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
\r
3961 this.expandGroup(this.getGroupEl(group));
\r
3962 this.setActiveGroup(group);
\r
3965 getFrameHeight: function(){
\r
3966 var h = this.el.getFrameWidth('tb');
\r
3967 h += (this.tbar ? this.tbar.getHeight() : 0) +
\r
3968 (this.bbar ? this.bbar.getHeight() : 0);
\r
3973 adjustBodyWidth: function(w){
\r
3974 return w - this.tabWidth;
\r
3978 Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);/*
\r
3979 * Note that this control will most likely remain as an example, and not as a core Ext form
\r
3980 * control. However, the API will be changing in a future release and so should not yet be
\r
3981 * treated as a final, stable API at this time.
\r
3985 * @class Ext.ux.form.ItemSelector
\r
3986 * @extends Ext.form.Field
\r
3987 * A control that allows selection of between two Ext.ux.form.MultiSelect controls.
\r
3990 * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
\r
3993 * Create a new ItemSelector
\r
3994 * @param {Object} config Configuration options
\r
3995 * @xtype itemselector
\r
3997 Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {
\r
3998 hideNavIcons:false,
\r
4001 iconDown:"down2.gif",
\r
4002 iconLeft:"left2.gif",
\r
4003 iconRight:"right2.gif",
\r
4004 iconTop:"top2.gif",
\r
4005 iconBottom:"bottom2.gif",
\r
4007 drawDownIcon:true,
\r
4008 drawLeftIcon:true,
\r
4009 drawRightIcon:true,
\r
4015 defaultAutoCreate:{tag: "div"},
\r
4017 * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
\r
4019 multiselects:null,
\r
4021 initComponent: function(){
\r
4022 Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
\r
4024 'rowdblclick' : true,
\r
4029 onRender: function(ct, position){
\r
4030 Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);
\r
4032 // Internal default configuration for both multiselects
\r
4034 legend: 'Available',
\r
4040 legend: 'Selected',
\r
4047 this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
\r
4048 this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
\r
4050 this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
\r
4051 this.toMultiselect.on('dblclick', this.onRowDblClick, this);
\r
4053 var p = new Ext.Panel({
\r
4054 bodyStyle:this.bodyStyle,
\r
4055 border:this.border,
\r
4057 layoutConfig:{columns:3}
\r
4060 p.add(this.fromMultiselect);
\r
4061 var icons = new Ext.Panel({header:false});
\r
4063 p.add(this.toMultiselect);
\r
4064 p.render(this.el);
\r
4065 icons.el.down('.'+icons.bwrapCls).remove();
\r
4068 if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
\r
4069 this.imagePath+="/";
\r
4070 this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
\r
4071 this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
\r
4072 this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
\r
4073 this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
\r
4074 this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
\r
4075 this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
\r
4076 var el=icons.getEl();
\r
4077 this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
\r
4078 el.createChild({tag: 'br'});
\r
4079 this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
\r
4080 el.createChild({tag: 'br'});
\r
4081 this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
\r
4082 el.createChild({tag: 'br'});
\r
4083 this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
\r
4084 el.createChild({tag: 'br'});
\r
4085 this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
\r
4086 el.createChild({tag: 'br'});
\r
4087 this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
\r
4088 this.toTopIcon.on('click', this.toTop, this);
\r
4089 this.upIcon.on('click', this.up, this);
\r
4090 this.downIcon.on('click', this.down, this);
\r
4091 this.toBottomIcon.on('click', this.toBottom, this);
\r
4092 this.addIcon.on('click', this.fromTo, this);
\r
4093 this.removeIcon.on('click', this.toFrom, this);
\r
4094 if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
\r
4095 if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
\r
4096 if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
\r
4097 if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
\r
4098 if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
\r
4099 if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
\r
4101 var tb = p.body.first();
\r
4102 this.el.setWidth(p.body.first().getWidth());
\r
4103 p.body.removeClass();
\r
4105 this.hiddenName = this.name;
\r
4106 var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
\r
4107 this.hiddenField = this.el.createChild(hiddenTag);
\r
4110 doLayout: function(){
\r
4111 if(this.rendered){
\r
4112 this.fromMultiselect.fs.doLayout();
\r
4113 this.toMultiselect.fs.doLayout();
\r
4117 afterRender: function(){
\r
4118 Ext.ux.form.ItemSelector.superclass.afterRender.call(this);
\r
4120 this.toStore = this.toMultiselect.store;
\r
4121 this.toStore.on('add', this.valueChanged, this);
\r
4122 this.toStore.on('remove', this.valueChanged, this);
\r
4123 this.toStore.on('load', this.valueChanged, this);
\r
4124 this.valueChanged(this.toStore);
\r
4127 toTop : function() {
\r
4128 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
\r
4130 if (selectionsArray.length > 0) {
\r
4131 selectionsArray.sort();
\r
4132 for (var i=0; i<selectionsArray.length; i++) {
\r
4133 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
\r
4134 records.push(record);
\r
4136 selectionsArray = [];
\r
4137 for (var i=records.length-1; i>-1; i--) {
\r
4138 record = records[i];
\r
4139 this.toMultiselect.view.store.remove(record);
\r
4140 this.toMultiselect.view.store.insert(0, record);
\r
4141 selectionsArray.push(((records.length - 1) - i));
\r
4144 this.toMultiselect.view.refresh();
\r
4145 this.toMultiselect.view.select(selectionsArray);
\r
4148 toBottom : function() {
\r
4149 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
\r
4151 if (selectionsArray.length > 0) {
\r
4152 selectionsArray.sort();
\r
4153 for (var i=0; i<selectionsArray.length; i++) {
\r
4154 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
\r
4155 records.push(record);
\r
4157 selectionsArray = [];
\r
4158 for (var i=0; i<records.length; i++) {
\r
4159 record = records[i];
\r
4160 this.toMultiselect.view.store.remove(record);
\r
4161 this.toMultiselect.view.store.add(record);
\r
4162 selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
\r
4165 this.toMultiselect.view.refresh();
\r
4166 this.toMultiselect.view.select(selectionsArray);
\r
4170 var record = null;
\r
4171 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
\r
4172 selectionsArray.sort();
\r
4173 var newSelectionsArray = [];
\r
4174 if (selectionsArray.length > 0) {
\r
4175 for (var i=0; i<selectionsArray.length; i++) {
\r
4176 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
\r
4177 if ((selectionsArray[i] - 1) >= 0) {
\r
4178 this.toMultiselect.view.store.remove(record);
\r
4179 this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
\r
4180 newSelectionsArray.push(selectionsArray[i] - 1);
\r
4183 this.toMultiselect.view.refresh();
\r
4184 this.toMultiselect.view.select(newSelectionsArray);
\r
4188 down : function() {
\r
4189 var record = null;
\r
4190 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
\r
4191 selectionsArray.sort();
\r
4192 selectionsArray.reverse();
\r
4193 var newSelectionsArray = [];
\r
4194 if (selectionsArray.length > 0) {
\r
4195 for (var i=0; i<selectionsArray.length; i++) {
\r
4196 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
\r
4197 if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
\r
4198 this.toMultiselect.view.store.remove(record);
\r
4199 this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
\r
4200 newSelectionsArray.push(selectionsArray[i] + 1);
\r
4203 this.toMultiselect.view.refresh();
\r
4204 this.toMultiselect.view.select(newSelectionsArray);
\r
4208 fromTo : function() {
\r
4209 var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
\r
4211 if (selectionsArray.length > 0) {
\r
4212 for (var i=0; i<selectionsArray.length; i++) {
\r
4213 record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
\r
4214 records.push(record);
\r
4216 if(!this.allowDup)selectionsArray = [];
\r
4217 for (var i=0; i<records.length; i++) {
\r
4218 record = records[i];
\r
4219 if(this.allowDup){
\r
4220 var x=new Ext.data.Record();
\r
4223 this.toMultiselect.view.store.add(record);
\r
4225 this.fromMultiselect.view.store.remove(record);
\r
4226 this.toMultiselect.view.store.add(record);
\r
4227 selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
\r
4231 this.toMultiselect.view.refresh();
\r
4232 this.fromMultiselect.view.refresh();
\r
4233 var si = this.toMultiselect.store.sortInfo;
\r
4235 this.toMultiselect.store.sort(si.field, si.direction);
\r
4237 this.toMultiselect.view.select(selectionsArray);
\r
4240 toFrom : function() {
\r
4241 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
\r
4243 if (selectionsArray.length > 0) {
\r
4244 for (var i=0; i<selectionsArray.length; i++) {
\r
4245 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
\r
4246 records.push(record);
\r
4248 selectionsArray = [];
\r
4249 for (var i=0; i<records.length; i++) {
\r
4250 record = records[i];
\r
4251 this.toMultiselect.view.store.remove(record);
\r
4252 if(!this.allowDup){
\r
4253 this.fromMultiselect.view.store.add(record);
\r
4254 selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
\r
4258 this.fromMultiselect.view.refresh();
\r
4259 this.toMultiselect.view.refresh();
\r
4260 var si = this.fromMultiselect.store.sortInfo;
\r
4262 this.fromMultiselect.store.sort(si.field, si.direction);
\r
4264 this.fromMultiselect.view.select(selectionsArray);
\r
4267 valueChanged: function(store) {
\r
4268 var record = null;
\r
4270 for (var i=0; i<store.getCount(); i++) {
\r
4271 record = store.getAt(i);
\r
4272 values.push(record.get(this.toMultiselect.valueField));
\r
4274 this.hiddenField.dom.value = values.join(this.delimiter);
\r
4275 this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
\r
4278 getValue : function() {
\r
4279 return this.hiddenField.dom.value;
\r
4282 onRowDblClick : function(vw, index, node, e) {
\r
4283 if (vw == this.toMultiselect.view){
\r
4285 } else if (vw == this.fromMultiselect.view) {
\r
4288 return this.fireEvent('rowdblclick', vw, index, node, e);
\r
4291 reset: function(){
\r
4292 range = this.toMultiselect.store.getRange();
\r
4293 this.toMultiselect.store.removeAll();
\r
4294 this.fromMultiselect.store.add(range);
\r
4295 var si = this.fromMultiselect.store.sortInfo;
\r
4297 this.fromMultiselect.store.sort(si.field, si.direction);
\r
4299 this.valueChanged(this.toMultiselect.store);
\r
4303 Ext.reg('itemselector', Ext.ux.form.ItemSelector);
\r
4305 //backwards compat
\r
4306 Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;
\r
4307 Ext.ns('Ext.ux.form');
\r
4310 * @class Ext.ux.form.MultiSelect
\r
4311 * @extends Ext.form.Field
\r
4312 * A control that allows selection and form submission of multiple list items.
\r
4315 * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
\r
4316 * 2008-06-19 bpm Docs and demo code clean up
\r
4319 * Create a new MultiSelect
\r
4320 * @param {Object} config Configuration options
\r
4321 * @xtype multiselect
\r
4323 Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field, {
\r
4325 * @cfg {String} legend Wraps the object with a fieldset and specified legend.
\r
4328 * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.
\r
4331 * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
\r
4334 * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
\r
4337 * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
\r
4341 * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a
\r
4342 * toolbar config, or an array of buttons/button configs to be added to the toolbar.
\r
4345 * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled
\r
4346 * (use for lists which are sorted, defaults to false).
\r
4350 * @cfg {Number} width Width in pixels of the control (defaults to 100).
\r
4354 * @cfg {Number} height Height in pixels of the control (defaults to 100).
\r
4358 * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).
\r
4362 * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).
\r
4366 * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no
\r
4367 * selection (defaults to true).
\r
4371 * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).
\r
4375 * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).
\r
4377 maxSelections:Number.MAX_VALUE,
\r
4379 * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as
\r
4380 * {@link Ext.form.TextField#blankText}.
\r
4382 blankText:Ext.form.TextField.prototype.blankText,
\r
4384 * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}
\r
4385 * item(s) required'). The {0} token will be replaced by the value of {@link #minSelections}.
\r
4387 minSelectionsText:'Minimum {0} item(s) required',
\r
4389 * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}
\r
4390 * item(s) allowed'). The {0} token will be replaced by the value of {@link #maxSelections}.
\r
4392 maxSelectionsText:'Maximum {0} item(s) allowed',
\r
4394 * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values
\r
4395 * (defaults to ',').
\r
4399 * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).
\r
4400 * Acceptable values for this property are:
\r
4401 * <div class="mdetail-params"><ul>
\r
4402 * <li><b>any {@link Ext.data.Store Store} subclass</b></li>
\r
4403 * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.
\r
4404 * <div class="mdetail-params"><ul>
\r
4405 * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">
\r
4406 * A 1-dimensional array will automatically be expanded (each array item will be the combo
\r
4407 * {@link #valueField value} and {@link #displayField text})</div></li>
\r
4408 * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">
\r
4409 * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
\r
4410 * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
\r
4411 * </div></li></ul></div></li></ul></div>
\r
4415 defaultAutoCreate : {tag: "div"},
\r
4418 initComponent: function(){
\r
4419 Ext.ux.form.MultiSelect.superclass.initComponent.call(this);
\r
4421 if(Ext.isArray(this.store)){
\r
4422 if (Ext.isArray(this.store[0])){
\r
4423 this.store = new Ext.data.ArrayStore({
\r
4424 fields: ['value','text'],
\r
4427 this.valueField = 'value';
\r
4429 this.store = new Ext.data.ArrayStore({
\r
4434 this.valueField = 'text';
\r
4436 this.displayField = 'text';
\r
4438 this.store = Ext.StoreMgr.lookup(this.store);
\r
4442 'dblclick' : true,
\r
4450 onRender: function(ct, position){
\r
4451 Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);
\r
4453 var fs = this.fs = new Ext.form.FieldSet({
\r
4454 renderTo: this.el,
\r
4455 title: this.legend,
\r
4456 height: this.height,
\r
4457 width: this.width,
\r
4458 style: "padding:0;",
\r
4461 fs.body.addClass('ux-mselect');
\r
4463 this.view = new Ext.ListView({
\r
4464 multiSelect: true,
\r
4465 store: this.store,
\r
4466 columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
\r
4470 fs.add(this.view);
\r
4472 this.view.on('click', this.onViewClick, this);
\r
4473 this.view.on('beforeclick', this.onViewBeforeClick, this);
\r
4474 this.view.on('dblclick', this.onViewDblClick, this);
\r
4476 this.hiddenName = this.name || Ext.id();
\r
4477 var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
\r
4478 this.hiddenField = this.el.createChild(hiddenTag);
\r
4479 this.hiddenField.dom.disabled = this.hiddenName != this.name;
\r
4484 afterRender: function(){
\r
4485 Ext.ux.form.MultiSelect.superclass.afterRender.call(this);
\r
4487 if (this.ddReorder && !this.dragGroup && !this.dropGroup){
\r
4488 this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();
\r
4491 if (this.draggable || this.dragGroup){
\r
4492 this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {
\r
4493 ddGroup: this.dragGroup
\r
4496 if (this.droppable || this.dropGroup){
\r
4497 this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {
\r
4498 ddGroup: this.dropGroup
\r
4504 onViewClick: function(vw, index, node, e) {
\r
4505 this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
\r
4506 this.hiddenField.dom.value = this.getValue();
\r
4507 this.fireEvent('click', this, e);
\r
4512 onViewBeforeClick: function(vw, index, node, e) {
\r
4513 if (this.disabled) {return false;}
\r
4517 onViewDblClick : function(vw, index, node, e) {
\r
4518 return this.fireEvent('dblclick', vw, index, node, e);
\r
4522 * Returns an array of data values for the selected items in the list. The values will be separated
\r
4523 * by {@link #delimiter}.
\r
4524 * @return {Array} value An array of string data values
\r
4526 getValue: function(valueField){
\r
4527 var returnArray = [];
\r
4528 var selectionsArray = this.view.getSelectedIndexes();
\r
4529 if (selectionsArray.length == 0) {return '';}
\r
4530 for (var i=0; i<selectionsArray.length; i++) {
\r
4531 returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));
\r
4533 return returnArray.join(this.delimiter);
\r
4537 * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.
\r
4538 * @param {String/Array} values The values to set
\r
4540 setValue: function(values) {
\r
4542 var selections = [];
\r
4543 this.view.clearSelections();
\r
4544 this.hiddenField.dom.value = '';
\r
4546 if (!values || (values == '')) { return; }
\r
4548 if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
\r
4549 for (var i=0; i<values.length; i++) {
\r
4550 index = this.view.store.indexOf(this.view.store.query(this.valueField,
\r
4551 new RegExp('^' + values[i] + '$', "i")).itemAt(0));
\r
4552 selections.push(index);
\r
4554 this.view.select(selections);
\r
4555 this.hiddenField.dom.value = this.getValue();
\r
4560 reset : function() {
\r
4561 this.setValue('');
\r
4565 getRawValue: function(valueField) {
\r
4566 var tmp = this.getValue(valueField);
\r
4568 tmp = tmp.split(this.delimiter);
\r
4577 setRawValue: function(values){
\r
4582 validateValue : function(value){
\r
4583 if (value.length < 1) { // if it has no value
\r
4584 if (this.allowBlank) {
\r
4585 this.clearInvalid();
\r
4588 this.markInvalid(this.blankText);
\r
4592 if (value.length < this.minSelections) {
\r
4593 this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
\r
4596 if (value.length > this.maxSelections) {
\r
4597 this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
\r
4604 disable: function(){
\r
4605 this.disabled = true;
\r
4606 this.hiddenField.dom.disabled = true;
\r
4607 this.fs.disable();
\r
4611 enable: function(){
\r
4612 this.disabled = false;
\r
4613 this.hiddenField.dom.disabled = false;
\r
4618 destroy: function(){
\r
4619 Ext.destroy(this.fs, this.dragZone, this.dropZone);
\r
4620 Ext.ux.form.MultiSelect.superclass.destroy.call(this);
\r
4625 Ext.reg('multiselect', Ext.ux.form.MultiSelect);
\r
4627 //backwards compat
\r
4628 Ext.ux.Multiselect = Ext.ux.form.MultiSelect;
\r
4631 Ext.ux.form.MultiSelect.DragZone = function(ms, config){
\r
4633 this.view = ms.view;
\r
4634 var ddGroup = config.ddGroup || 'MultiselectDD';
\r
4636 if (Ext.isArray(ddGroup)){
\r
4637 dd = ddGroup.shift();
\r
4642 Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
\r
4643 this.setDraggable(ddGroup);
\r
4646 Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
\r
4647 onInitDrag : function(x, y){
\r
4648 var el = Ext.get(this.dragData.ddel.cloneNode(true));
\r
4649 this.proxy.update(el.dom);
\r
4650 el.setWidth(el.child('em').getWidth());
\r
4651 this.onStartDrag(x, y);
\r
4656 collectSelection: function(data) {
\r
4657 data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
\r
4659 this.view.store.each(function(rec){
\r
4660 if (this.view.isSelected(i)) {
\r
4661 var n = this.view.getNode(i);
\r
4662 var dragNode = n.cloneNode(true);
\r
4663 dragNode.id = Ext.id();
\r
4664 data.ddel.appendChild(dragNode);
\r
4665 data.records.push(this.view.store.getAt(i));
\r
4666 data.viewNodes.push(n);
\r
4673 onEndDrag: function(data, e) {
\r
4674 var d = Ext.get(this.dragData.ddel);
\r
4675 if (d && d.hasClass("multi-proxy")) {
\r
4681 getDragData: function(e){
\r
4682 var target = this.view.findItemFromChild(e.getTarget());
\r
4684 if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
\r
4685 this.view.select(target);
\r
4686 this.ms.setValue(this.ms.getValue());
\r
4688 if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
\r
4690 sourceView: this.view,
\r
4694 if (this.view.getSelectionCount() == 1) {
\r
4695 var i = this.view.getSelectedIndexes()[0];
\r
4696 var n = this.view.getNode(i);
\r
4697 dragData.viewNodes.push(dragData.ddel = n);
\r
4698 dragData.records.push(this.view.store.getAt(i));
\r
4699 dragData.repairXY = Ext.fly(n).getXY();
\r
4701 dragData.ddel = document.createElement('div');
\r
4702 dragData.ddel.className = 'multi-proxy';
\r
4703 this.collectSelection(dragData);
\r
4710 // override the default repairXY.
\r
4711 getRepairXY : function(e){
\r
4712 return this.dragData.repairXY;
\r
4716 setDraggable: function(ddGroup){
\r
4717 if (!ddGroup) return;
\r
4718 if (Ext.isArray(ddGroup)) {
\r
4719 Ext.each(ddGroup, this.setDraggable, this);
\r
4722 this.addToGroup(ddGroup);
\r
4726 Ext.ux.form.MultiSelect.DropZone = function(ms, config){
\r
4728 this.view = ms.view;
\r
4729 var ddGroup = config.ddGroup || 'MultiselectDD';
\r
4731 if (Ext.isArray(ddGroup)){
\r
4732 dd = ddGroup.shift();
\r
4737 Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
\r
4738 this.setDroppable(ddGroup);
\r
4741 Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {
\r
4743 * Part of the Ext.dd.DropZone interface. If no target node is found, the
\r
4744 * whole Element becomes the target, and this causes the drop gesture to append.
\r
4746 getTargetFromEvent : function(e) {
\r
4747 var target = e.getTarget();
\r
4752 getDropPoint : function(e, n, dd){
\r
4753 if (n == this.ms.fs.body.dom) { return "below"; }
\r
4754 var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
\r
4755 var c = t + (b - t) / 2;
\r
4756 var y = Ext.lib.Event.getPageY(e);
\r
4765 isValidDropPoint: function(pt, n, data) {
\r
4766 if (!data.viewNodes || (data.viewNodes.length != 1)) {
\r
4769 var d = data.viewNodes[0];
\r
4773 if ((pt == "below") && (n.nextSibling == d)) {
\r
4776 if ((pt == "above") && (n.previousSibling == d)) {
\r
4783 onNodeEnter : function(n, dd, e, data){
\r
4788 onNodeOver : function(n, dd, e, data){
\r
4789 var dragElClass = this.dropNotAllowed;
\r
4790 var pt = this.getDropPoint(e, n, dd);
\r
4791 if (this.isValidDropPoint(pt, n, data)) {
\r
4792 if (this.ms.appendOnly) {
\r
4793 return "x-tree-drop-ok-below";
\r
4796 // set the insert point style on the target node
\r
4798 var targetElClass;
\r
4799 if (pt == "above"){
\r
4800 dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
\r
4801 targetElClass = "x-view-drag-insert-above";
\r
4803 dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
\r
4804 targetElClass = "x-view-drag-insert-below";
\r
4806 if (this.lastInsertClass != targetElClass){
\r
4807 Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
\r
4808 this.lastInsertClass = targetElClass;
\r
4812 return dragElClass;
\r
4816 onNodeOut : function(n, dd, e, data){
\r
4817 this.removeDropIndicators(n);
\r
4821 onNodeDrop : function(n, dd, e, data){
\r
4822 if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
\r
4825 var pt = this.getDropPoint(e, n, dd);
\r
4826 if (n != this.ms.fs.body.dom)
\r
4827 n = this.view.findItemFromChild(n);
\r
4828 var insertAt = (this.ms.appendOnly || (n == this.ms.fs.body.dom)) ? this.view.store.getCount() : this.view.indexOf(n);
\r
4829 if (pt == "below") {
\r
4835 // Validate if dragging within the same MultiSelect
\r
4836 if (data.sourceView == this.view) {
\r
4837 // If the first element to be inserted below is the target node, remove it
\r
4838 if (pt == "below") {
\r
4839 if (data.viewNodes[0] == n) {
\r
4840 data.viewNodes.shift();
\r
4842 } else { // If the last element to be inserted above is the target node, remove it
\r
4843 if (data.viewNodes[data.viewNodes.length - 1] == n) {
\r
4844 data.viewNodes.pop();
\r
4848 // Nothing to drop...
\r
4849 if (!data.viewNodes.length) {
\r
4853 // If we are moving DOWN, then because a store.remove() takes place first,
\r
4854 // the insertAt must be decremented.
\r
4855 if (insertAt > this.view.store.indexOf(data.records[0])) {
\r
4861 for (var i = 0; i < data.records.length; i++) {
\r
4862 var r = data.records[i];
\r
4863 if (data.sourceView) {
\r
4864 data.sourceView.store.remove(r);
\r
4866 this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
\r
4867 var si = this.view.store.sortInfo;
\r
4869 this.view.store.sort(si.field, si.direction);
\r
4876 removeDropIndicators : function(n){
\r
4878 Ext.fly(n).removeClass([
\r
4879 "x-view-drag-insert-above",
\r
4880 "x-view-drag-insert-left",
\r
4881 "x-view-drag-insert-right",
\r
4882 "x-view-drag-insert-below"]);
\r
4883 this.lastInsertClass = "_noclass";
\r
4888 setDroppable: function(ddGroup){
\r
4889 if (!ddGroup) return;
\r
4890 if (Ext.isArray(ddGroup)) {
\r
4891 Ext.each(ddGroup, this.setDroppable, this);
\r
4894 this.addToGroup(ddGroup);
\r
4898 /* Fix for Opera, which does not seem to include the map function on Array's */
4899 if (!Array.prototype.map) {
4900 Array.prototype.map = function(fun){
4901 var len = this.length;
4902 if (typeof fun != 'function') {
4903 throw new TypeError();
4905 var res = new Array(len);
4906 var thisp = arguments[1];
4907 for (var i = 0; i < len; i++) {
4909 res[i] = fun.call(thisp, this[i], i, this);
4916 Ext.ns('Ext.ux.data');
4919 * @class Ext.ux.data.PagingMemoryProxy
4920 * @extends Ext.data.MemoryProxy
4921 * <p>Paging Memory Proxy, allows to use paging grid with in memory dataset</p>
4923 Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
4924 constructor : function(data){
4925 Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
4928 doRequest : function(action, rs, params, reader, callback, scope, options){
4933 result = reader.readRecords(this.data);
4936 this.fireEvent('loadexception', this, options, null, e);
4937 callback.call(scope, null, options, false);
4942 if (params.filter !== undefined) {
4943 result.records = result.records.filter(function(el){
4944 if (typeof(el) == 'object') {
4945 var att = params.filterCol || 0;
4946 return String(el.data[att]).match(params.filter) ? true : false;
4949 return String(el).match(params.filter) ? true : false;
4952 result.totalRecords = result.records.length;
4956 if (params.sort !== undefined) {
4957 // use integer as params.sort to specify column, since arrays are not named
4958 // params.sort=0; would also match a array without columns
4959 var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
4960 var fn = function(r1, r2){
4963 result.records.sort(function(a, b){
4965 if (typeof(a) == 'object') {
4966 v = fn(a.data[params.sort], b.data[params.sort]) * dir;
4972 v = (a.index < b.index ? -1 : 1);
4977 // paging (use undefined cause start can also be 0 (thus false))
4978 if (params.start !== undefined && params.limit !== undefined) {
4979 result.records = result.records.slice(params.start, params.start + params.limit);
4981 callback.call(scope, result, options, true);
4986 Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;
4987 Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {
\r
4989 maxHeight:10000000,
\r
4991 constructor: function(config){
\r
4992 Ext.apply(this, config);
\r
4994 Ext.ux.PanelResizer.superclass.constructor.call(this, config);
\r
4997 init : function(p){
\r
5000 if(this.panel.elements.indexOf('footer')==-1){
\r
5001 p.elements += ',footer';
\r
5003 p.on('render', this.onRender, this);
\r
5006 onRender : function(p){
\r
5007 this.handle = p.footer.createChild({cls:'x-panel-resize'});
\r
5009 this.tracker = new Ext.dd.DragTracker({
\r
5010 onStart: this.onDragStart.createDelegate(this),
\r
5011 onDrag: this.onDrag.createDelegate(this),
\r
5012 onEnd: this.onDragEnd.createDelegate(this),
\r
5016 this.tracker.initEl(this.handle);
\r
5017 p.on('beforedestroy', this.tracker.destroy, this.tracker);
\r
5021 onDragStart: function(e){
\r
5022 this.dragging = true;
\r
5023 this.startHeight = this.panel.el.getHeight();
\r
5024 this.fireEvent('dragstart', this, e);
\r
5028 onDrag: function(e){
\r
5029 this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));
\r
5030 this.fireEvent('drag', this, e);
\r
5034 onDragEnd: function(e){
\r
5035 this.dragging = false;
\r
5036 this.fireEvent('dragend', this, e);
\r
5039 Ext.preg('panelresizer', Ext.ux.PanelResizer);Ext.ux.Portal = Ext.extend(Ext.Panel, {
\r
5040 layout : 'column',
\r
5041 autoScroll : true,
\r
5043 defaultType : 'portalcolumn',
\r
5045 initComponent : function(){
\r
5046 Ext.ux.Portal.superclass.initComponent.call(this);
\r
5048 validatedrop:true,
\r
5049 beforedragover:true,
\r
5056 initEvents : function(){
\r
5057 Ext.ux.Portal.superclass.initEvents.call(this);
\r
5058 this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
\r
5061 beforeDestroy : function() {
\r
5065 Ext.ux.Portal.superclass.beforeDestroy.call(this);
\r
5069 Ext.reg('portal', Ext.ux.Portal);
\r
5072 Ext.ux.Portal.DropZone = function(portal, cfg){
\r
5073 this.portal = portal;
\r
5074 Ext.dd.ScrollManager.register(portal.body);
\r
5075 Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
\r
5076 portal.body.ddScrollConfig = this.ddScrollConfig;
\r
5079 Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {
\r
5080 ddScrollConfig : {
\r
5087 createEvent : function(dd, e, data, col, c, pos){
\r
5089 portal: this.portal,
\r
5090 panel: data.panel,
\r
5097 status: this.dropAllowed
\r
5101 notifyOver : function(dd, e, data){
\r
5102 var xy = e.getXY(), portal = this.portal, px = dd.proxy;
\r
5104 // case column widths
\r
5106 this.grid = this.getGrid();
\r
5109 // handle case scroll where scrollbars appear during drag
\r
5110 var cw = portal.body.dom.clientWidth;
\r
5113 }else if(this.lastCW != cw){
\r
5115 portal.doLayout();
\r
5116 this.grid = this.getGrid();
\r
5119 // determine column
\r
5120 var col = 0, xs = this.grid.columnX, cmatch = false;
\r
5121 for(var len = xs.length; col < len; col++){
\r
5122 if(xy[0] < (xs[col].x + xs[col].w)){
\r
5127 // no match, fix last index
\r
5132 // find insert position
\r
5133 var p, match = false, pos = 0,
\r
5134 c = portal.items.itemAt(col),
\r
5135 items = c.items.items, overSelf = false;
\r
5137 for(var len = items.length; pos < len; pos++){
\r
5139 var h = p.el.getHeight();
\r
5143 else if((p.el.getY()+(h/2)) > xy[1]){
\r
5149 pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);
\r
5150 var overEvent = this.createEvent(dd, e, data, col, c, pos);
\r
5152 if(portal.fireEvent('validatedrop', overEvent) !== false &&
\r
5153 portal.fireEvent('beforedragover', overEvent) !== false){
\r
5155 // make sure proxy width is fluid
\r
5156 px.getProxy().setWidth('auto');
\r
5159 px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
\r
5161 px.moveProxy(c.el.dom, null);
\r
5164 this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};
\r
5165 this.scrollPos = portal.body.getScroll();
\r
5167 portal.fireEvent('dragover', overEvent);
\r
5169 return overEvent.status;
\r
5171 return overEvent.status;
\r
5176 notifyOut : function(){
\r
5180 notifyDrop : function(dd, e, data){
\r
5182 if(!this.lastPos){
\r
5185 var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;
\r
5187 var dropEvent = this.createEvent(dd, e, data, col, c,
\r
5188 pos !== false ? pos : c.items.getCount());
\r
5190 if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
\r
5191 this.portal.fireEvent('beforedrop', dropEvent) !== false){
\r
5193 dd.proxy.getProxy().remove();
\r
5194 dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
\r
5196 if(pos !== false){
\r
5197 if(c == dd.panel.ownerCt && (c.items.items.indexOf(dd.panel) <= pos)){
\r
5200 c.insert(pos, dd.panel);
\r
5207 this.portal.fireEvent('drop', dropEvent);
\r
5209 // scroll position is lost on drop, fix it
\r
5210 var st = this.scrollPos.top;
\r
5212 var d = this.portal.body.dom;
\r
5213 setTimeout(function(){
\r
5219 delete this.lastPos;
\r
5222 // internal cache of body and column coords
\r
5223 getGrid : function(){
\r
5224 var box = this.portal.bwrap.getBox();
\r
5226 this.portal.items.each(function(c){
\r
5227 box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
\r
5232 // unregister the dropzone from ScrollManager
\r
5233 unreg: function() {
\r
5234 //Ext.dd.ScrollManager.unregister(this.portal.body);
\r
5235 Ext.ux.Portal.DropZone.superclass.unreg.call(this);
\r
5238 Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
\r
5239 layout : 'anchor',
\r
5240 //autoEl : 'div',//already defined by Ext.Component
\r
5241 defaultType : 'portlet',
\r
5242 cls : 'x-portal-column'
\r
5245 Ext.reg('portalcolumn', Ext.ux.PortalColumn);
\r
5246 Ext.ux.Portlet = Ext.extend(Ext.Panel, {
\r
5249 collapsible : true,
\r
5254 Ext.reg('portlet', Ext.ux.Portlet);
\r
5256 * @class Ext.ux.ProgressBarPager
5258 * Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
5260 * @ptype progressbarpager
5262 * Create a new ItemSelector
5263 * @param {Object} config Configuration options
5264 * @xtype itemselector
5266 Ext.ux.ProgressBarPager = Ext.extend(Object, {
5268 * @cfg {Integer} progBarWidth
5269 * <p>The default progress bar width. Default is 225.</p>
5273 * @cfg {String} defaultText
5274 * <p>The text to display while the store is loading. Default is 'Loading...'</p>
5276 defaultText : 'Loading...',
5278 * @cfg {Object} defaultAnimCfg
5279 * <p>A {@link Ext.Fx Ext.Fx} configuration object. Default is { duration : 1, easing : 'bounceOut' }.</p>
5283 easing : 'bounceOut'
5285 constructor : function(config) {
5287 Ext.apply(this, config);
5291 init : function (parent) {
5293 if(parent.displayInfo){
5294 this.parent = parent;
5295 var ind = parent.items.indexOf(parent.displayItem);
5296 parent.remove(parent.displayItem, true);
5297 this.progressBar = new Ext.ProgressBar({
5298 text : this.defaultText,
5299 width : this.progBarWidth,
5300 animate : this.defaultAnimCfg
5303 parent.displayItem = this.progressBar;
5305 parent.add(parent.displayItem);
5307 Ext.apply(parent, this.parentOverrides);
5309 this.progressBar.on('render', function(pb) {
5310 pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
5311 }, this, {single: true});
5317 // This method handles the click for the progress bar
5318 handleProgressBarClick : function(e){
5319 var parent = this.parent;
5320 var displayItem = parent.displayItem;
5322 var box = this.progressBar.getBox();
5324 var position = xy[0]-box.x;
5325 var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize);
5327 var newpage = Math.ceil(position/(displayItem.width/pages));
5328 parent.changePage(newpage);
5331 // private, overriddes
5334 // This method updates the information via the progress bar.
5335 updateInfo : function(){
5336 if(this.displayItem){
5337 var count = this.store.getCount();
5338 var pgData = this.getPageData();
5339 var pageNum = this.readPage(pgData);
5341 var msg = count == 0 ?
5345 this.cursor+1, this.cursor+count, this.store.getTotalCount()
5348 pageNum = pgData.activePage; ;
5350 var pct = pageNum / pgData.pages;
5352 this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
5357 Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
5359 Ext.ns('Ext.ux.grid');
5362 * @class Ext.ux.grid.RowEditor
5363 * @extends Ext.Panel
5364 * Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid.
5365 * A validation mode may be enabled which uses AnchorTips to notify the user of all
5366 * validation errors at once.
5370 Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
5374 cls: 'x-small-editor',
5375 buttonAlign: 'center',
5376 baseCls: 'x-row-editor',
5377 elements: 'header,footer,body',
5380 clicksToEdit: 'auto',
5386 cancelText: 'Cancel',
5387 commitChangesText: 'You need to commit or cancel your changes',
5388 errorText: 'Errors',
5394 initComponent: function(){
5395 Ext.ux.grid.RowEditor.superclass.initComponent.call(this);
5399 * Fired before the row editor is activated.
5400 * If the listener returns <tt>false</tt> the editor will not be activated.
5401 * @param {Ext.ux.grid.RowEditor} roweditor This object
5402 * @param {Number} rowIndex The rowIndex of the row just edited
5407 * Fired when the editor is cancelled.
5408 * @param {Ext.ux.grid.RowEditor} roweditor This object
5409 * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
5413 * @event validateedit
5414 * Fired after a row is edited and passes validation.
5415 * If the listener returns <tt>false</tt> changes to the record will not be set.
5416 * @param {Ext.ux.grid.RowEditor} roweditor This object
5417 * @param {Object} changes Object with changes made to the record.
5418 * @param {Ext.data.Record} r The Record that was edited.
5419 * @param {Number} rowIndex The rowIndex of the row just edited
5424 * Fired after a row is edited and passes validation. This event is fired
5425 * after the store's update event is fired with this edit.
5426 * @param {Ext.ux.grid.RowEditor} roweditor This object
5427 * @param {Object} changes Object with changes made to the record.
5428 * @param {Ext.data.Record} r The Record that was edited.
5429 * @param {Number} rowIndex The rowIndex of the row just edited
5435 init: function(grid){
5437 this.ownerCt = grid;
5438 if(this.clicksToEdit === 2){
5439 grid.on('rowdblclick', this.onRowDblClick, this);
5441 grid.on('rowclick', this.onRowClick, this);
5443 grid.on('rowdblclick', this.onRowDblClick, this);
5447 // stopEditing without saving when a record is removed from Store.
5448 grid.getStore().on('remove', function() {
5449 this.stopEditing(false);
5454 keydown: this.onGridKey,
5455 columnresize: this.verifyLayout,
5456 columnmove: this.refreshFields,
5457 reconfigure: this.refreshFields,
5458 beforedestroy : this.beforedestroy,
5459 destroy : this.destroy,
5462 fn: this.positionButtons
5465 grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1});
5466 grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
5469 beforedestroy: function() {
5470 this.grid.getStore().un('remove', this.onStoreRemove, this);
5471 this.stopEditing(false);
5472 Ext.destroy(this.btns);
5475 refreshFields: function(){
5477 this.verifyLayout();
5480 isDirty: function(){
5482 this.items.each(function(f){
5483 if(String(this.values[f.id]) !== String(f.getValue())){
5491 startEditing: function(rowIndex, doFocus){
5492 if(this.editing && this.isDirty()){
5493 this.showTooltip(this.commitChangesText);
5496 if(Ext.isObject(rowIndex)){
5497 rowIndex = this.grid.getStore().indexOf(rowIndex);
5499 if(this.fireEvent('beforeedit', this, rowIndex) !== false){
5500 this.editing = true;
5501 var g = this.grid, view = g.getView(),
5502 row = view.getRow(rowIndex),
5503 record = g.store.getAt(rowIndex);
5505 this.record = record;
5506 this.rowIndex = rowIndex;
5509 this.render(view.getEditorParent());
5511 var w = Ext.fly(row).getWidth();
5513 if(!this.initialized){
5516 var cm = g.getColumnModel(), fields = this.items.items, f, val;
5517 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
5518 val = this.preEditValue(record, cm.getDataIndex(i));
5521 this.values[f.id] = Ext.isEmpty(val) ? '' : val;
5523 this.verifyLayout(true);
5524 if(!this.isVisible()){
5525 this.setPagePosition(Ext.fly(row).getXY());
5527 this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
5529 if(!this.isVisible()){
5530 this.show().doLayout();
5532 if(doFocus !== false){
5533 this.doFocus.defer(this.focusDelay, this);
5538 stopEditing : function(saveChanges){
5539 this.editing = false;
5540 if(!this.isVisible()){
5543 if(saveChanges === false || !this.isValid()){
5545 this.fireEvent('canceledit', this, saveChanges === false);
5551 cm = this.grid.colModel,
5552 fields = this.items.items;
5553 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
5554 if(!cm.isHidden(i)){
5555 var dindex = cm.getDataIndex(i);
5556 if(!Ext.isEmpty(dindex)){
5557 var oldValue = r.data[dindex],
5558 value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
5559 if(String(oldValue) !== String(value)){
5560 changes[dindex] = value;
5566 if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
5568 Ext.iterate(changes, function(name, value){
5572 this.fireEvent('afteredit', this, changes, r, this.rowIndex);
5577 verifyLayout: function(force){
5578 if(this.el && (this.isVisible() || force === true)){
5579 var row = this.grid.getView().getRow(this.rowIndex);
5580 this.setSize(Ext.fly(row).getWidth(), Ext.fly(row).getHeight() + 9);
5581 var cm = this.grid.colModel, fields = this.items.items;
5582 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
5583 if(!cm.isHidden(i)){
5585 if(i === (len - 1)){
5586 adjust += 3; // outer padding
5591 fields[i].setWidth(cm.getColumnWidth(i) - adjust);
5597 this.positionButtons();
5601 slideHide : function(){
5605 initFields: function(){
5606 var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
5607 this.removeAll(false);
5608 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
5609 var c = cm.getColumnAt(i),
5612 ed = c.displayEditor || new Ext.form.DisplayField();
5615 ed.margins = pm('0 1 2 1');
5616 } else if(i == len - 1){
5617 ed.margins = pm('0 0 2 1');
5619 ed.margins = pm('0 1 2');
5621 ed.setWidth(cm.getColumnWidth(i));
5623 if(ed.ownerCt !== this){
5624 ed.on('focus', this.ensureVisible, this);
5625 ed.on('specialkey', this.onKey, this);
5629 this.initialized = true;
5632 onKey: function(f, e){
5633 if(e.getKey() === e.ENTER){
5634 this.stopEditing(true);
5635 e.stopPropagation();
5639 onGridKey: function(e){
5640 if(e.getKey() === e.ENTER && !this.isVisible()){
5641 var r = this.grid.getSelectionModel().getSelected();
5643 var index = this.grid.store.indexOf(r);
5644 this.startEditing(index);
5645 e.stopPropagation();
5650 ensureVisible: function(editor){
5651 if(this.isVisible()){
5652 this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true);
5656 onRowClick: function(g, rowIndex, e){
5657 if(this.clicksToEdit == 'auto'){
5658 var li = this.lastClickIndex;
5659 this.lastClickIndex = rowIndex;
5660 if(li != rowIndex && !this.isVisible()){
5664 this.startEditing(rowIndex, false);
5665 this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
5668 onRowDblClick: function(g, rowIndex, e){
5669 this.startEditing(rowIndex, false);
5670 this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
5673 onRender: function(){
5674 Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments);
5675 this.el.swallowEvent(['keydown', 'keyup', 'keypress']);
5676 this.btns = new Ext.Panel({
5681 width: (this.minButtonWidth * 2) + (this.frameWidth * 2) + (this.buttonPad * 4), // width must be specified for IE
5686 text: this.saveText,
5687 width: this.minButtonWidth,
5688 handler: this.stopEditing.createDelegate(this, [true])
5691 text: this.cancelText,
5692 width: this.minButtonWidth,
5693 handler: this.stopEditing.createDelegate(this, [false])
5696 this.btns.render(this.bwrap);
5699 afterRender: function(){
5700 Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments);
5701 this.positionButtons();
5702 if(this.monitorValid){
5703 this.startMonitoring();
5708 if(this.monitorValid){
5709 this.startMonitoring();
5711 Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments);
5715 Ext.ux.grid.RowEditor.superclass.onHide.apply(this, arguments);
5716 this.stopMonitoring();
5717 this.grid.getView().focusRow(this.rowIndex);
5720 positionButtons: function(){
5723 h = this.el.dom.clientHeight,
5725 scroll = view.scroller.dom.scrollLeft,
5726 bw = this.btns.getWidth(),
5727 width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
5729 this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
5734 preEditValue : function(r, field){
5735 var value = r.data[field];
5736 return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
5740 postEditValue : function(value, originalValue, r, field){
5741 return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
5744 doFocus: function(pt){
5745 if(this.isVisible()){
5747 cm = this.grid.getColumnModel(),
5750 index = this.getTargetColumnIndex(pt);
5752 for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
5753 c = cm.getColumnAt(i);
5754 if(!c.hidden && c.getEditor()){
5755 c.getEditor().focus();
5762 getTargetColumnIndex: function(pt){
5763 var grid = this.grid,
5766 cms = grid.colModel.config,
5769 for(var len = cms.length, c; c = cms[i]; i++){
5771 if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
5780 startMonitoring : function(){
5781 if(!this.bound && this.monitorValid){
5784 run : this.bindHandler,
5785 interval : this.monitorPoll || 200,
5791 stopMonitoring : function(){
5794 this.tooltip.hide();
5798 isValid: function(){
5800 this.items.each(function(f){
5801 if(!f.isValid(true)){
5810 bindHandler : function(){
5812 return false; // stops binding
5814 var valid = this.isValid();
5815 if(!valid && this.errorSummary){
5816 this.showTooltip(this.getErrorText().join(''));
5818 this.btns.saveBtn.setDisabled(!valid);
5819 this.fireEvent('validation', this, valid);
5822 showTooltip: function(msg){
5823 var t = this.tooltip;
5825 t = this.tooltip = new Ext.ToolTip({
5829 title: this.errorText,
5832 anchorToTarget: true,
5836 var v = this.grid.getView(),
5837 top = parseInt(this.el.dom.style.top, 10),
5838 scroll = v.scroller.dom.scrollTop,
5839 h = this.el.getHeight();
5841 if(top + h >= scroll){
5842 t.initTarget(this.items.last().getEl());
5850 }else if(t.rendered){
5855 getErrorText: function(){
5856 var data = ['<ul>'];
5857 this.items.each(function(f){
5858 if(!f.isValid(true)){
5859 data.push('<li>', f.activeError, '</li>');
5866 Ext.preg('roweditor', Ext.ux.grid.RowEditor);
5868 Ext.override(Ext.form.Field, {
5869 markInvalid : function(msg){
5870 if(!this.rendered || this.preventMark){ // not rendered
5873 msg = msg || this.invalidText;
5875 var mt = this.getMessageHandler();
5878 }else if(this.msgTarget){
5879 this.el.addClass(this.invalidClass);
5880 var t = Ext.getDom(this.msgTarget);
5883 t.style.display = this.msgDisplay;
5886 this.activeError = msg;
5887 this.fireEvent('invalid', this, msg);
5891 Ext.override(Ext.ToolTip, {
5892 doAutoWidth : function(){
5893 var bw = this.body.getTextWidth();
5895 bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
5897 bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + 20;
5898 this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
5900 // IE7 repaint bug on initial show
5901 if(Ext.isIE7 && !this.repainted){
5903 this.repainted = true;
5907 Ext.ns('Ext.ux.grid');
\r
5910 * @class Ext.ux.grid.RowExpander
\r
5911 * @extends Ext.util.Observable
\r
5912 * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
\r
5913 * a second row body which expands/contracts. The expand/contract behavior is configurable to react
\r
5914 * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
\r
5916 * @ptype rowexpander
\r
5918 Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
\r
5920 * @cfg {Boolean} expandOnEnter
\r
5921 * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
\r
5922 * key is pressed (defaults to <tt>true</tt>).
\r
5924 expandOnEnter : true,
\r
5926 * @cfg {Boolean} expandOnDblClick
\r
5927 * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
\r
5928 * (defaults to <tt>true</tt>).
\r
5930 expandOnDblClick : true,
\r
5936 menuDisabled : true,
\r
5939 lazyRender : true,
\r
5940 enableCaching : true,
\r
5942 constructor: function(config){
\r
5943 Ext.apply(this, config);
\r
5947 * @event beforeexpand
\r
5948 * Fires before the row expands. Have the listener return false to prevent the row from expanding.
\r
5949 * @param {Object} this RowExpander object.
\r
5950 * @param {Object} Ext.data.Record Record for the selected row.
\r
5951 * @param {Object} body body element for the secondary row.
\r
5952 * @param {Number} rowIndex The current row index.
\r
5954 beforeexpand: true,
\r
5957 * Fires after the row expands.
\r
5958 * @param {Object} this RowExpander object.
\r
5959 * @param {Object} Ext.data.Record Record for the selected row.
\r
5960 * @param {Object} body body element for the secondary row.
\r
5961 * @param {Number} rowIndex The current row index.
\r
5965 * @event beforecollapse
\r
5966 * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
\r
5967 * @param {Object} this RowExpander object.
\r
5968 * @param {Object} Ext.data.Record Record for the selected row.
\r
5969 * @param {Object} body body element for the secondary row.
\r
5970 * @param {Number} rowIndex The current row index.
\r
5972 beforecollapse: true,
\r
5975 * Fires after the row collapses.
\r
5976 * @param {Object} this RowExpander object.
\r
5977 * @param {Object} Ext.data.Record Record for the selected row.
\r
5978 * @param {Object} body body element for the secondary row.
\r
5979 * @param {Number} rowIndex The current row index.
\r
5984 Ext.ux.grid.RowExpander.superclass.constructor.call(this);
\r
5987 if(typeof this.tpl == 'string'){
\r
5988 this.tpl = new Ext.Template(this.tpl);
\r
5990 this.tpl.compile();
\r
5994 this.bodyContent = {};
\r
5997 getRowClass : function(record, rowIndex, p, ds){
\r
5998 p.cols = p.cols-1;
\r
5999 var content = this.bodyContent[record.id];
\r
6000 if(!content && !this.lazyRender){
\r
6001 content = this.getBodyContent(record, rowIndex);
\r
6006 return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
\r
6009 init : function(grid){
\r
6012 var view = grid.getView();
\r
6013 view.getRowClass = this.getRowClass.createDelegate(this);
\r
6015 view.enableRowBody = true;
\r
6018 grid.on('render', this.onRender, this);
\r
6019 grid.on('destroy', this.onDestroy, this);
\r
6023 onRender: function() {
\r
6024 var grid = this.grid;
\r
6025 var mainBody = grid.getView().mainBody;
\r
6026 mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
\r
6027 if (this.expandOnEnter) {
\r
6028 this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
\r
6029 'enter' : this.onEnter,
\r
6033 if (this.expandOnDblClick) {
\r
6034 grid.on('rowdblclick', this.onRowDblClick, this);
\r
6039 onDestroy: function() {
\r
6041 this.keyNav.disable();
\r
6042 delete this.keyNav;
\r
6045 * A majority of the time, the plugin will be destroyed along with the grid,
\r
6046 * which means the mainBody won't be available. On the off chance that the plugin
\r
6047 * isn't destroyed with the grid, take care of removing the listener.
\r
6049 var mainBody = this.grid.getView().mainBody;
\r
6051 mainBody.un('mousedown', this.onMouseDown, this);
\r
6055 onRowDblClick: function(grid, rowIdx, e) {
\r
6056 this.toggleRow(rowIdx);
\r
6059 onEnter: function(e) {
\r
6060 var g = this.grid;
\r
6061 var sm = g.getSelectionModel();
\r
6062 var sels = sm.getSelections();
\r
6063 for (var i = 0, len = sels.length; i < len; i++) {
\r
6064 var rowIdx = g.getStore().indexOf(sels[i]);
\r
6065 this.toggleRow(rowIdx);
\r
6069 getBodyContent : function(record, index){
\r
6070 if(!this.enableCaching){
\r
6071 return this.tpl.apply(record.data);
\r
6073 var content = this.bodyContent[record.id];
\r
6075 content = this.tpl.apply(record.data);
\r
6076 this.bodyContent[record.id] = content;
\r
6081 onMouseDown : function(e, t){
\r
6083 var row = e.getTarget('.x-grid3-row');
\r
6084 this.toggleRow(row);
\r
6087 renderer : function(v, p, record){
\r
6088 p.cellAttr = 'rowspan="2"';
\r
6089 return '<div class="x-grid3-row-expander"> </div>';
\r
6092 beforeExpand : function(record, body, rowIndex){
\r
6093 if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
\r
6094 if(this.tpl && this.lazyRender){
\r
6095 body.innerHTML = this.getBodyContent(record, rowIndex);
\r
6103 toggleRow : function(row){
\r
6104 if(typeof row == 'number'){
\r
6105 row = this.grid.view.getRow(row);
\r
6107 this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
\r
6110 expandRow : function(row){
\r
6111 if(typeof row == 'number'){
\r
6112 row = this.grid.view.getRow(row);
\r
6114 var record = this.grid.store.getAt(row.rowIndex);
\r
6115 var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
\r
6116 if(this.beforeExpand(record, body, row.rowIndex)){
\r
6117 this.state[record.id] = true;
\r
6118 Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
\r
6119 this.fireEvent('expand', this, record, body, row.rowIndex);
\r
6123 collapseRow : function(row){
\r
6124 if(typeof row == 'number'){
\r
6125 row = this.grid.view.getRow(row);
\r
6127 var record = this.grid.store.getAt(row.rowIndex);
\r
6128 var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
\r
6129 if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
\r
6130 this.state[record.id] = false;
\r
6131 Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
\r
6132 this.fireEvent('collapse', this, record, body, row.rowIndex);
\r
6137 Ext.preg('rowexpander', Ext.ux.grid.RowExpander);
\r
6139 //backwards compat
\r
6140 Ext.grid.RowExpander = Ext.ux.grid.RowExpander;// We are adding these custom layouts to a namespace that does not
6141 // exist by default in Ext, so we have to add the namespace first:
6142 Ext.ns('Ext.ux.layout');
6145 * @class Ext.ux.layout.RowLayout
6146 * @extends Ext.layout.ContainerLayout
6147 * <p>This is the layout style of choice for creating structural layouts in a multi-row format where the height of
6148 * each row can be specified as a percentage or fixed height. Row widths can also be fixed, percentage or auto.
6149 * This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config,
6150 * and should generally not need to be created directly via the new keyword.</p>
6151 * <p>RowLayout does not have any direct config options (other than inherited ones), but it does support a
6152 * specific config property of <b><tt>rowHeight</tt></b> that can be included in the config of any panel added to it. The
6153 * layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel.
6154 * If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).</p>
6155 * <p>The height property is always evaluated as pixels, and must be a number greater than or equal to 1.
6156 * The rowHeight property is always evaluated as a percentage, and must be a decimal value greater than 0 and
6157 * less than 1 (e.g., .25).</p>
6158 * <p>The basic rules for specifying row heights are pretty simple. The logic makes two passes through the
6159 * set of contained panels. During the first layout pass, all panels that either have a fixed height or none
6160 * specified (auto) are skipped, but their heights are subtracted from the overall container height. During the second
6161 * pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on
6162 * the total <b>remaining</b> container height. In other words, percentage height panels are designed to fill the space
6163 * left over by all the fixed-height and/or auto-height panels. Because of this, while you can specify any number of rows
6164 * with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your
6165 * layout may not render as expected. Example usage:</p>
6167 // All rows are percentages -- they must add up to 1
6168 var p = new Ext.Panel({
6169 title: 'Row Layout - Percentage Only',
6183 // Mix of height and rowHeight -- all rowHeight values must add
6184 // up to 1. The first row will take up exactly 120px, and the last two
6185 // rows will fill the remaining container height.
6186 var p = new Ext.Panel({
6187 title: 'Row Layout - Mixed',
6192 // standard panel widths are still supported too:
6193 width: '50%' // or 200
6205 Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {
6210 isValidParent : function(c, target){
6211 return c.getEl().dom.parentNode == this.innerCt.dom;
6215 onLayout : function(ct, target){
6216 var rs = ct.items.items, len = rs.length, r, i;
6219 target.addClass('ux-row-layout-ct');
6220 this.innerCt = target.createChild({cls:'x-row-inner'});
6222 this.renderAll(ct, this.innerCt);
6224 var size = target.getViewSize();
6226 if(size.width < 1 && size.height < 1){ // display none?
6230 var h = size.height - target.getPadding('tb'),
6233 this.innerCt.setSize({height:h});
6235 // some rows can be percentages while others are fixed
6236 // so we need to make 2 passes
6238 for(i = 0; i < len; i++){
6241 ph -= (r.getSize().height + r.getEl().getMargins('tb'));
6245 ph = ph < 0 ? 0 : ph;
6247 for(i = 0; i < len; i++){
6250 r.setSize({height: Math.floor(r.rowHeight*ph) - r.getEl().getMargins('tb')});
6256 * @property activeItem
6261 Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout;
6262 Ext.ns('Ext.ux.form');
\r
6264 Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
\r
6265 initComponent : function(){
\r
6266 Ext.ux.form.SearchField.superclass.initComponent.call(this);
\r
6267 this.on('specialkey', function(f, e){
\r
6268 if(e.getKey() == e.ENTER){
\r
6269 this.onTrigger2Click();
\r
6274 validationEvent:false,
\r
6275 validateOnBlur:false,
\r
6276 trigger1Class:'x-form-clear-trigger',
\r
6277 trigger2Class:'x-form-search-trigger',
\r
6278 hideTrigger1:true,
\r
6280 hasSearch : false,
\r
6281 paramName : 'query',
\r
6283 onTrigger1Click : function(){
\r
6284 if(this.hasSearch){
\r
6285 this.el.dom.value = '';
\r
6286 var o = {start: 0};
\r
6287 this.store.baseParams = this.store.baseParams || {};
\r
6288 this.store.baseParams[this.paramName] = '';
\r
6289 this.store.reload({params:o});
\r
6290 this.triggers[0].hide();
\r
6291 this.hasSearch = false;
\r
6295 onTrigger2Click : function(){
\r
6296 var v = this.getRawValue();
\r
6298 this.onTrigger1Click();
\r
6301 var o = {start: 0};
\r
6302 this.store.baseParams = this.store.baseParams || {};
\r
6303 this.store.baseParams[this.paramName] = v;
\r
6304 this.store.reload({params:o});
\r
6305 this.hasSearch = true;
\r
6306 this.triggers[0].show();
\r
6308 });Ext.ns('Ext.ux.form');
\r
6311 * @class Ext.ux.form.SelectBox
\r
6312 * @extends Ext.form.ComboBox
\r
6313 * <p>Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging
\r
6314 * through the list, with item selection occurring when the mouse button is released.
\r
6315 * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
\r
6316 * on inner elements. Re-enabling editable after calling this will NOT work.</p>
\r
6317 * @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
\r
6318 * @history 2007-07-08 jvs
\r
6319 * Slight mods for Ext 2.0
\r
6320 * @xtype selectbox
\r
6322 Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
\r
6323 constructor: function(config){
\r
6324 this.searchResetDelay = 1000;
\r
6325 config = config || {};
\r
6326 config = Ext.apply(config || {}, {
\r
6328 forceSelection: true,
\r
6330 lastSearchTerm: false,
\r
6331 triggerAction: 'all',
\r
6335 Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);
\r
6337 this.lastSelectedIndex = this.selectedIndex || 0;
\r
6340 initEvents : function(){
\r
6341 Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);
\r
6342 // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
\r
6343 this.el.on('keydown', this.keySearch, this, true);
\r
6344 this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
\r
6347 keySearch : function(e, target, options) {
\r
6348 var raw = e.getKey();
\r
6349 var key = String.fromCharCode(raw);
\r
6350 var startIndex = 0;
\r
6352 if( !this.store.getCount() ) {
\r
6357 case Ext.EventObject.HOME:
\r
6359 this.selectFirst();
\r
6362 case Ext.EventObject.END:
\r
6364 this.selectLast();
\r
6367 case Ext.EventObject.PAGEDOWN:
\r
6368 this.selectNextPage();
\r
6372 case Ext.EventObject.PAGEUP:
\r
6373 this.selectPrevPage();
\r
6378 // skip special keys other than the shift key
\r
6379 if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
\r
6382 if( this.lastSearchTerm == key ) {
\r
6383 startIndex = this.lastSelectedIndex;
\r
6385 this.search(this.displayField, key, startIndex);
\r
6386 this.cshTask.delay(this.searchResetDelay);
\r
6389 onRender : function(ct, position) {
\r
6390 this.store.on('load', this.calcRowsPerPage, this);
\r
6391 Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
\r
6392 if( this.mode == 'local' ) {
\r
6394 this.calcRowsPerPage();
\r
6398 onSelect : function(record, index, skipCollapse){
\r
6399 if(this.fireEvent('beforeselect', this, record, index) !== false){
\r
6400 this.setValue(record.data[this.valueField || this.displayField]);
\r
6401 if( !skipCollapse ) {
\r
6404 this.lastSelectedIndex = index + 1;
\r
6405 this.fireEvent('select', this, record, index);
\r
6409 afterRender : function() {
\r
6410 Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
\r
6411 if(Ext.isWebKit) {
\r
6412 this.el.swallowEvent('mousedown', true);
\r
6414 this.el.unselectable();
\r
6415 this.innerList.unselectable();
\r
6416 this.trigger.unselectable();
\r
6417 this.innerList.on('mouseup', function(e, target, options) {
\r
6418 if( target.id && target.id == this.innerList.id ) {
\r
6421 this.onViewClick();
\r
6424 this.innerList.on('mouseover', function(e, target, options) {
\r
6425 if( target.id && target.id == this.innerList.id ) {
\r
6428 this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
\r
6429 this.cshTask.delay(this.searchResetDelay);
\r
6432 this.trigger.un('click', this.onTriggerClick, this);
\r
6433 this.trigger.on('mousedown', function(e, target, options) {
\r
6434 e.preventDefault();
\r
6435 this.onTriggerClick();
\r
6438 this.on('collapse', function(e, target, options) {
\r
6439 Ext.getDoc().un('mouseup', this.collapseIf, this);
\r
6442 this.on('expand', function(e, target, options) {
\r
6443 Ext.getDoc().on('mouseup', this.collapseIf, this);
\r
6447 clearSearchHistory : function() {
\r
6448 this.lastSelectedIndex = 0;
\r
6449 this.lastSearchTerm = false;
\r
6452 selectFirst : function() {
\r
6453 this.focusAndSelect(this.store.data.first());
\r
6456 selectLast : function() {
\r
6457 this.focusAndSelect(this.store.data.last());
\r
6460 selectPrevPage : function() {
\r
6461 if( !this.rowHeight ) {
\r
6464 var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
\r
6465 this.focusAndSelect(this.store.getAt(index));
\r
6468 selectNextPage : function() {
\r
6469 if( !this.rowHeight ) {
\r
6472 var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
\r
6473 this.focusAndSelect(this.store.getAt(index));
\r
6476 search : function(field, value, startIndex) {
\r
6477 field = field || this.displayField;
\r
6478 this.lastSearchTerm = value;
\r
6479 var index = this.store.find.apply(this.store, arguments);
\r
6480 if( index !== -1 ) {
\r
6481 this.focusAndSelect(index);
\r
6485 focusAndSelect : function(record) {
\r
6486 var index = Ext.isNumber(record) ? record : this.store.indexOf(record);
\r
6487 this.select(index, this.isExpanded());
\r
6488 this.onSelect(this.store.getAt(index), index, this.isExpanded());
\r
6491 calcRowsPerPage : function() {
\r
6492 if( this.store.getCount() ) {
\r
6493 this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
\r
6494 this.rowsPerPage = this.maxHeight / this.rowHeight;
\r
6496 this.rowHeight = false;
\r
6502 Ext.reg('selectbox', Ext.ux.form.SelectBox);
\r
6504 //backwards compat
\r
6505 Ext.ux.SelectBox = Ext.ux.form.SelectBox;
\r
6507 * @class Ext.ux.SliderTip
\r
6508 * @extends Ext.Tip
\r
6509 * Simple plugin for using an Ext.Tip with a slider to show the slider value
\r
6511 Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
\r
6513 offsets : [0, -10],
\r
6514 init : function(slider){
\r
6515 slider.on('dragstart', this.onSlide, this);
\r
6516 slider.on('drag', this.onSlide, this);
\r
6517 slider.on('dragend', this.hide, this);
\r
6518 slider.on('destroy', this.destroy, this);
\r
6521 onSlide : function(slider){
\r
6523 this.body.update(this.getText(slider));
\r
6524 this.doAutoWidth();
\r
6525 this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
\r
6528 getText : function(slider){
\r
6529 return String(slider.getValue());
\r
6532 Ext.ux.SlidingPager = Ext.extend(Object, {
\r
6533 init : function(pbar){
\r
6534 Ext.each(pbar.items.getRange(2,6), function(c){
\r
6537 var slider = new Ext.Slider({
\r
6541 plugins: new Ext.ux.SliderTip({
\r
6542 getText : function(s){
\r
6543 return String.format('Page <b>{0}</b> of <b>{1}</b>', s.value, s.maxValue);
\r
6547 changecomplete: function(s, v){
\r
6548 pbar.changePage(v);
\r
6552 pbar.insert(5, slider);
\r
6554 change: function(pb, data){
\r
6555 slider.maxValue = data.pages;
\r
6556 slider.setValue(data.activePage);
\r
6558 beforedestroy: function(){
\r
6563 });Ext.ns('Ext.ux.form');
\r
6566 * @class Ext.ux.form.SpinnerField
\r
6567 * @extends Ext.form.NumberField
\r
6568 * Creates a field utilizing Ext.ux.Spinner
\r
6569 * @xtype spinnerfield
\r
6571 Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
\r
6572 actionMode: 'wrap',
\r
6573 deferHeight: true,
\r
6574 autoSize: Ext.emptyFn,
\r
6575 onBlur: Ext.emptyFn,
\r
6576 adjustSize: Ext.BoxComponent.prototype.adjustSize,
\r
6578 constructor: function(config) {
\r
6579 var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');
\r
6581 var spl = this.spinner = new Ext.ux.Spinner(spinnerConfig);
\r
6583 var plugins = config.plugins
\r
6584 ? (Ext.isArray(config.plugins)
\r
6585 ? config.plugins.push(spl)
\r
6586 : [config.plugins, spl])
\r
6589 Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
\r
6593 getResizeEl: function(){
\r
6598 getPositionEl: function(){
\r
6603 alignErrorIcon: function(){
\r
6605 this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
\r
6609 validateBlur: function(){
\r
6614 Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);
\r
6616 //backwards compat
\r
6617 Ext.form.SpinnerField = Ext.ux.form.SpinnerField;
\r
6619 * @class Ext.ux.Spinner
\r
6620 * @extends Ext.util.Observable
\r
6621 * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
\r
6623 Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
\r
6624 incrementValue: 1,
\r
6625 alternateIncrementValue: 5,
\r
6626 triggerClass: 'x-form-spinner-trigger',
\r
6627 splitterClass: 'x-form-spinner-splitter',
\r
6628 alternateKey: Ext.EventObject.shiftKey,
\r
6630 accelerate: false,
\r
6632 constructor: function(config){
\r
6633 Ext.ux.Spinner.superclass.constructor.call(this, config);
\r
6634 Ext.apply(this, config);
\r
6635 this.mimicing = false;
\r
6638 init: function(field){
\r
6639 this.field = field;
\r
6641 field.afterMethod('onRender', this.doRender, this);
\r
6642 field.afterMethod('onEnable', this.doEnable, this);
\r
6643 field.afterMethod('onDisable', this.doDisable, this);
\r
6644 field.afterMethod('afterRender', this.doAfterRender, this);
\r
6645 field.afterMethod('onResize', this.doResize, this);
\r
6646 field.afterMethod('onFocus', this.doFocus, this);
\r
6647 field.beforeMethod('onDestroy', this.doDestroy, this);
\r
6650 doRender: function(ct, position){
\r
6651 var el = this.el = this.field.getEl();
\r
6652 var f = this.field;
\r
6655 f.wrap = this.wrap = el.wrap({
\r
6656 cls: "x-form-field-wrap"
\r
6660 this.wrap = f.wrap.addClass('x-form-field-wrap');
\r
6663 this.trigger = this.wrap.createChild({
\r
6665 src: Ext.BLANK_IMAGE_URL,
\r
6666 cls: "x-form-trigger " + this.triggerClass
\r
6670 this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
\r
6673 this.splitter = this.wrap.createChild({
\r
6675 cls: this.splitterClass,
\r
6676 style: 'width:13px; height:2px;'
\r
6678 this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
\r
6680 this.proxy = this.trigger.createProxy('', this.splitter, true);
\r
6681 this.proxy.addClass("x-form-spinner-proxy");
\r
6682 this.proxy.setStyle('left', '0px');
\r
6683 this.proxy.setSize(14, 1);
\r
6684 this.proxy.hide();
\r
6685 this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
\r
6686 dragElId: this.proxy.id
\r
6689 this.initTrigger();
\r
6690 this.initSpinner();
\r
6693 doAfterRender: function(){
\r
6695 if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
\r
6696 this.el.position();
\r
6701 doEnable: function(){
\r
6703 this.wrap.removeClass(this.field.disabledClass);
\r
6707 doDisable: function(){
\r
6709 this.wrap.addClass(this.field.disabledClass);
\r
6710 this.el.removeClass(this.field.disabledClass);
\r
6714 doResize: function(w, h){
\r
6715 if (typeof w == 'number') {
\r
6716 this.el.setWidth(w - this.trigger.getWidth());
\r
6718 this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
\r
6721 doFocus: function(){
\r
6722 if (!this.mimicing) {
\r
6723 this.wrap.addClass('x-trigger-wrap-focus');
\r
6724 this.mimicing = true;
\r
6725 Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
\r
6728 this.el.on('keydown', this.checkTab, this);
\r
6733 checkTab: function(e){
\r
6734 if (e.getKey() == e.TAB) {
\r
6735 this.triggerBlur();
\r
6740 mimicBlur: function(e){
\r
6741 if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
\r
6742 this.triggerBlur();
\r
6747 triggerBlur: function(){
\r
6748 this.mimicing = false;
\r
6749 Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
\r
6750 this.el.un("keydown", this.checkTab, this);
\r
6751 this.field.beforeBlur();
\r
6752 this.wrap.removeClass('x-trigger-wrap-focus');
\r
6753 this.field.onBlur.call(this.field);
\r
6756 initTrigger: function(){
\r
6757 this.trigger.addClassOnOver('x-form-trigger-over');
\r
6758 this.trigger.addClassOnClick('x-form-trigger-click');
\r
6761 initSpinner: function(){
\r
6762 this.field.addEvents({
\r
6768 this.keyNav = new Ext.KeyNav(this.el, {
\r
6769 "up": function(e){
\r
6770 e.preventDefault();
\r
6774 "down": function(e){
\r
6775 e.preventDefault();
\r
6776 this.onSpinDown();
\r
6779 "pageUp": function(e){
\r
6780 e.preventDefault();
\r
6781 this.onSpinUpAlternate();
\r
6784 "pageDown": function(e){
\r
6785 e.preventDefault();
\r
6786 this.onSpinDownAlternate();
\r
6792 this.repeater = new Ext.util.ClickRepeater(this.trigger, {
\r
6793 accelerate: this.accelerate
\r
6795 this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
\r
6796 preventDefault: true
\r
6799 this.field.mon(this.trigger, {
\r
6800 mouseover: this.onMouseOver,
\r
6801 mouseout: this.onMouseOut,
\r
6802 mousemove: this.onMouseMove,
\r
6803 mousedown: this.onMouseDown,
\r
6804 mouseup: this.onMouseUp,
\r
6806 preventDefault: true
\r
6809 this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
\r
6811 this.dd.setXConstraint(0, 0, 10)
\r
6812 this.dd.setYConstraint(1500, 1500, 10);
\r
6813 this.dd.endDrag = this.endDrag.createDelegate(this);
\r
6814 this.dd.startDrag = this.startDrag.createDelegate(this);
\r
6815 this.dd.onDrag = this.onDrag.createDelegate(this);
\r
6818 onMouseOver: function(){
\r
6819 if (this.disabled) {
\r
6822 var middle = this.getMiddle();
\r
6823 this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
\r
6824 this.trigger.addClass(this.tmpHoverClass);
\r
6828 onMouseOut: function(){
\r
6829 this.trigger.removeClass(this.tmpHoverClass);
\r
6833 onMouseMove: function(){
\r
6834 if (this.disabled) {
\r
6837 var middle = this.getMiddle();
\r
6838 if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
\r
6839 ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
\r
6844 onMouseDown: function(){
\r
6845 if (this.disabled) {
\r
6848 var middle = this.getMiddle();
\r
6849 this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
\r
6850 this.trigger.addClass(this.tmpClickClass);
\r
6854 onMouseUp: function(){
\r
6855 this.trigger.removeClass(this.tmpClickClass);
\r
6859 onTriggerClick: function(){
\r
6860 if (this.disabled || this.el.dom.readOnly) {
\r
6863 var middle = this.getMiddle();
\r
6864 var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
\r
6865 this['onSpin' + ud]();
\r
6869 getMiddle: function(){
\r
6870 var t = this.trigger.getTop();
\r
6871 var h = this.trigger.getHeight();
\r
6872 var middle = t + (h / 2);
\r
6877 //checks if control is allowed to spin
\r
6878 isSpinnable: function(){
\r
6879 if (this.disabled || this.el.dom.readOnly) {
\r
6880 Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
\r
6886 handleMouseWheel: function(e){
\r
6887 //disable scrolling when not focused
\r
6888 if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
\r
6892 var delta = e.getWheelDelta();
\r
6899 this.onSpinDown();
\r
6905 startDrag: function(){
\r
6906 this.proxy.show();
\r
6907 this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
\r
6911 endDrag: function(){
\r
6912 this.proxy.hide();
\r
6916 onDrag: function(){
\r
6917 if (this.disabled) {
\r
6920 var y = Ext.fly(this.dd.getDragEl()).getTop();
\r
6923 if (this._previousY > y) {
\r
6926 if (this._previousY < y) {
\r
6930 this['onSpin' + ud]();
\r
6933 this._previousY = y;
\r
6937 onSpinUp: function(){
\r
6938 if (this.isSpinnable() == false) {
\r
6941 if (Ext.EventObject.shiftKey == true) {
\r
6942 this.onSpinUpAlternate();
\r
6946 this.spin(false, false);
\r
6948 this.field.fireEvent("spin", this);
\r
6949 this.field.fireEvent("spinup", this);
\r
6953 onSpinDown: function(){
\r
6954 if (this.isSpinnable() == false) {
\r
6957 if (Ext.EventObject.shiftKey == true) {
\r
6958 this.onSpinDownAlternate();
\r
6962 this.spin(true, false);
\r
6964 this.field.fireEvent("spin", this);
\r
6965 this.field.fireEvent("spindown", this);
\r
6969 onSpinUpAlternate: function(){
\r
6970 if (this.isSpinnable() == false) {
\r
6973 this.spin(false, true);
\r
6974 this.field.fireEvent("spin", this);
\r
6975 this.field.fireEvent("spinup", this);
\r
6979 onSpinDownAlternate: function(){
\r
6980 if (this.isSpinnable() == false) {
\r
6983 this.spin(true, true);
\r
6984 this.field.fireEvent("spin", this);
\r
6985 this.field.fireEvent("spindown", this);
\r
6988 spin: function(down, alternate){
\r
6989 var v = parseFloat(this.field.getValue());
\r
6990 var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
\r
6991 (down == true) ? v -= incr : v += incr;
\r
6993 v = (isNaN(v)) ? this.defaultValue : v;
\r
6994 v = this.fixBoundries(v);
\r
6995 this.field.setRawValue(v);
\r
6998 fixBoundries: function(value){
\r
7001 if (this.field.minValue != undefined && v < this.field.minValue) {
\r
7002 v = this.field.minValue;
\r
7004 if (this.field.maxValue != undefined && v > this.field.maxValue) {
\r
7005 v = this.field.maxValue;
\r
7008 return this.fixPrecision(v);
\r
7012 fixPrecision: function(value){
\r
7013 var nan = isNaN(value);
\r
7014 if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
\r
7015 return nan ? '' : value;
\r
7017 return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
\r
7020 doDestroy: function(){
\r
7021 if (this.trigger) {
\r
7022 this.trigger.remove();
\r
7025 this.wrap.remove();
\r
7026 delete this.field.wrap;
\r
7029 if (this.splitter) {
\r
7030 this.splitter.remove();
\r
7039 this.proxy.remove();
\r
7042 if (this.repeater) {
\r
7043 this.repeater.purgeListeners();
\r
7048 //backwards compat
\r
7049 Ext.form.Spinner = Ext.ux.Spinner;Ext.ux.Spotlight = function(config){
\r
7050 Ext.apply(this, config);
\r
7052 Ext.ux.Spotlight.prototype = {
\r
7056 easing:'easeNone',
\r
7061 createElements : function(){
\r
7062 var bd = Ext.getBody();
\r
7064 this.right = bd.createChild({cls:'x-spotlight'});
\r
7065 this.left = bd.createChild({cls:'x-spotlight'});
\r
7066 this.top = bd.createChild({cls:'x-spotlight'});
\r
7067 this.bottom = bd.createChild({cls:'x-spotlight'});
\r
7069 this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
\r
7072 show : function(el, callback, scope){
\r
7073 if(this.animated){
\r
7074 this.show.defer(50, this, [el, callback, scope]);
\r
7077 this.el = Ext.get(el);
\r
7079 this.createElements();
\r
7082 this.all.setDisplayed('');
\r
7083 this.applyBounds(true, false);
\r
7084 this.active = true;
\r
7085 Ext.EventManager.onWindowResize(this.syncSize, this);
\r
7086 this.applyBounds(false, this.animate, false, callback, scope);
\r
7088 this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
\r
7092 hide : function(callback, scope){
\r
7093 if(this.animated){
\r
7094 this.hide.defer(50, this, [callback, scope]);
\r
7097 Ext.EventManager.removeResizeListener(this.syncSize, this);
\r
7098 this.applyBounds(true, this.animate, true, callback, scope);
\r
7101 doHide : function(){
\r
7102 this.active = false;
\r
7103 this.all.setDisplayed(false);
\r
7106 syncSize : function(){
\r
7107 this.applyBounds(false, false);
\r
7110 applyBounds : function(basePts, anim, doHide, callback, scope){
\r
7112 var rg = this.el.getRegion();
\r
7114 var dw = Ext.lib.Dom.getViewWidth(true);
\r
7115 var dh = Ext.lib.Dom.getViewHeight(true);
\r
7117 var c = 0, cb = false;
\r
7120 callback: function(){
\r
7123 this.animated = false;
\r
7127 Ext.callback(callback, scope, [this]);
\r
7131 duration: this.duration,
\r
7132 easing: this.easing
\r
7134 this.animated = true;
\r
7137 this.right.setBounds(
\r
7139 basePts ? dh : rg.top,
\r
7141 basePts ? 0 : (dh - rg.top),
\r
7144 this.left.setBounds(
\r
7148 basePts ? 0 : rg.bottom,
\r
7151 this.top.setBounds(
\r
7152 basePts ? dw : rg.left,
\r
7154 basePts ? 0 : dw - rg.left,
\r
7158 this.bottom.setBounds(
\r
7161 basePts ? 0 : rg.right,
\r
7170 Ext.callback(callback, scope, [this]);
\r
7175 destroy : function(){
\r
7187 //backwards compat
\r
7188 Ext.Spotlight = Ext.ux.Spotlight;/**
7189 * @class Ext.ux.StatusBar
7190 * <p>Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}. In addition to
7191 * supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar
7192 * provides a greedy status element that can be aligned to either side and has convenient methods for setting the
7193 * status text and icon. You can also indicate that something is processing using the {@link #showBusy} method.</p>
7198 bbar: new Ext.ux.StatusBar({
7201 // defaults to use when the status is cleared:
7202 defaultText: 'Default status text',
7203 defaultIconCls: 'default-icon',
7205 // values to set initially:
7207 iconCls: 'ready-icon',
7209 // any standard Toolbar items:
7212 }, '-', 'Plain Text']
7216 // Update the status bar later in code:
7217 var sb = Ext.getCmp('my-status');
7221 clear: true // auto-clear after a set interval
7224 // Set the status bar to show that something is processing:
7229 sb.clearStatus(); // once completeed
7231 * @extends Ext.Toolbar
7233 * Creates a new StatusBar
7234 * @param {Object/Array} config A config object
7236 Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
7238 * @cfg {String} statusAlign
7239 * The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered,
7240 * it creates an internal div containing the status text and icon. Any additional Toolbar items added in the
7241 * StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* methods, will be
7242 * rendered, in added order, to the opposite side. The status element is greedy, so it will automatically
7243 * expand to take up all sapce left over by any other items. Example usage:
7245 // Create a left-aligned status bar containing a button,
7246 // separator and text item that will be right-aligned (default):
7250 bbar: new Ext.ux.StatusBar({
7251 defaultText: 'Default status text',
7255 }, '-', 'Plain Text']
7259 // By adding the statusAlign config, this will create the
7260 // exact same toolbar, except the status and toolbar item
7261 // layout will be reversed from the previous example:
7265 bbar: new Ext.ux.StatusBar({
7266 defaultText: 'Default status text',
7268 statusAlign: 'right',
7271 }, '-', 'Plain Text']
7277 * @cfg {String} defaultText
7278 * The default {@link #text} value. This will be used anytime the status bar is cleared with the
7279 * <tt>useDefaults:true</tt> option (defaults to '').
7282 * @cfg {String} defaultIconCls
7283 * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).
7284 * This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').
7287 * @cfg {String} text
7288 * A string that will be <b>initially</b> set as the status message. This string
7289 * will be set as innerHTML (html tags are accepted) for the toolbar item.
7290 * If not specified, the value set for <code>{@link #defaultText}</code>
7294 * @cfg {String} iconCls
7295 * A CSS class that will be <b>initially</b> set as the status bar icon and is
7296 * expected to provide a background image (defaults to '').
7297 * Example usage:<pre><code>
7298 // Example CSS rule:
7299 .x-statusbar .x-status-custom {
7301 background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
7304 // Setting a default icon:
7305 var sb = new Ext.ux.StatusBar({
7306 defaultIconCls: 'x-status-custom'
7309 // Changing the icon:
7312 iconCls: 'x-status-custom'
7319 * The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
7321 cls : 'x-statusbar',
7323 * @cfg {String} busyIconCls
7324 * The default <code>{@link #iconCls}</code> applied when calling
7325 * <code>{@link #showBusy}</code> (defaults to <tt>'x-status-busy'</tt>).
7326 * It can be overridden at any time by passing the <code>iconCls</code>
7327 * argument into <code>{@link #showBusy}</code>.
7329 busyIconCls : 'x-status-busy',
7331 * @cfg {String} busyText
7332 * The default <code>{@link #text}</code> applied when calling
7333 * <code>{@link #showBusy}</code> (defaults to <tt>'Loading...'</tt>).
7334 * It can be overridden at any time by passing the <code>text</code>
7335 * argument into <code>{@link #showBusy}</code>.
7337 busyText : 'Loading...',
7339 * @cfg {Number} autoClear
7340 * The number of milliseconds to wait after setting the status via
7341 * <code>{@link #setStatus}</code> before automatically clearing the status
7342 * text and icon (defaults to <tt>5000</tt>). Note that this only applies
7343 * when passing the <tt>clear</tt> argument to <code>{@link #setStatus}</code>
7344 * since that is the only way to defer clearing the status. This can
7345 * be overridden by specifying a different <tt>wait</tt> value in
7346 * <code>{@link #setStatus}</code>. Calls to <code>{@link #clearStatus}</code>
7347 * always clear the status bar immediately and ignore this value.
7352 * @cfg {String} emptyText
7353 * The text string to use if no text has been set. Defaults to
7354 * <tt>' '</tt>). If there are no other items in the toolbar using
7355 * an empty string (<tt>''</tt>) for this value would end up in the toolbar
7356 * height collapsing since the empty string will not maintain the toolbar
7357 * height. Use <tt>''</tt> if the toolbar should collapse in height
7358 * vertically when no text is specified and there are no other items in
7361 emptyText : ' ',
7367 initComponent : function(){
7368 if(this.statusAlign=='right'){
7369 this.cls += ' x-status-right';
7371 Ext.ux.StatusBar.superclass.initComponent.call(this);
7375 afterRender : function(){
7376 Ext.ux.StatusBar.superclass.afterRender.call(this);
7378 var right = this.statusAlign == 'right';
7379 this.currIconCls = this.iconCls || this.defaultIconCls;
7380 this.statusEl = new Ext.Toolbar.TextItem({
7381 cls: 'x-status-text ' + (this.currIconCls || ''),
7382 text: this.text || this.defaultText || ''
7387 this.add(this.statusEl);
7389 this.insert(0, this.statusEl);
7390 this.insert(1, '->');
7393 // this.statusEl = td.createChild({
7394 // cls: 'x-status-text ' + (this.iconCls || this.defaultIconCls || ''),
7395 // html: this.text || this.defaultText || ''
7397 // this.statusEl.unselectable();
7399 // this.spacerEl = td.insertSibling({
7401 // style: 'width:100%',
7402 // cn: [{cls:'ytb-spacer'}]
7403 // }, right ? 'before' : 'after');
7407 * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
7408 * status that was set after a specified interval.
7409 * @param {Object/String} config A config object specifying what status to set, or a string assumed
7410 * to be the status text (and all other options are defaulted as explained below). A config
7411 * object containing any or all of the following properties can be passed:<ul>
7412 * <li><tt>text</tt> {String} : (optional) The status text to display. If not specified, any current
7413 * status text will remain unchanged.</li>
7414 * <li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see
7415 * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.</li>
7416 * <li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
7417 * automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
7418 * specified, the new status will not be auto-cleared and will stay until updated again or cleared using
7419 * {@link #clearStatus}. If <tt>true</tt> is passed, the status will be cleared using {@link #autoClear},
7420 * {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed,
7421 * it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value.
7422 * All other options will be defaulted as with the boolean option. To customize any other options,
7423 * you can pass an object in the format:<ul>
7424 * <li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing
7425 * (defaults to {@link #autoClear}).</li>
7426 * <li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback
7427 * executes (defaults to true which fades the status out).</li>
7428 * <li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls
7429 * (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).</li>
7431 * Example usage:<pre><code>
7432 // Simple call to update the text
7433 statusBar.setStatus('New status');
7435 // Set the status and icon, auto-clearing with default options:
7436 statusBar.setStatus({
7438 iconCls: 'x-status-custom',
7442 // Auto-clear with custom options:
7443 statusBar.setStatus({
7445 iconCls: 'x-status-custom',
7453 * @return {Ext.ux.StatusBar} this
7455 setStatus : function(o){
7458 if(typeof o == 'string'){
7461 if(o.text !== undefined){
7462 this.setText(o.text);
7464 if(o.iconCls !== undefined){
7465 this.setIcon(o.iconCls);
7470 wait = this.autoClear,
7471 defaults = {useDefaults: true, anim: true};
7473 if(typeof c == 'object'){
7474 c = Ext.applyIf(c, defaults);
7478 }else if(typeof c == 'number'){
7481 }else if(typeof c == 'boolean'){
7485 c.threadId = this.activeThreadId;
7486 this.clearStatus.defer(wait, this, [c]);
7492 * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
7493 * @param {Object} config (optional) A config object containing any or all of the following properties. If this
7494 * object is not specified the status will be cleared using the defaults below:<ul>
7495 * <li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults
7496 * to false which clears immediately).</li>
7497 * <li><tt>useDefaults</tt> {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and
7498 * {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).</li>
7500 * @return {Ext.ux.StatusBar} this
7502 clearStatus : function(o){
7505 if(o.threadId && o.threadId !== this.activeThreadId){
7506 // this means the current call was made internally, but a newer
7507 // thread has set a message since this call was deferred. Since
7508 // we don't want to overwrite a newer message just ignore.
7512 var text = o.useDefaults ? this.defaultText : this.emptyText,
7513 iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
7516 // animate the statusEl Ext.Element
7517 this.statusEl.el.fadeOut({
7521 callback: function(){
7527 this.statusEl.el.show();
7531 // hide/show the el to avoid jumpy text or icon
7532 this.statusEl.hide();
7537 this.statusEl.show();
7543 * Convenience method for setting the status text directly. For more flexible options see {@link #setStatus}.
7544 * @param {String} text (optional) The text to set (defaults to '')
7545 * @return {Ext.ux.StatusBar} this
7547 setText : function(text){
7548 this.activeThreadId++;
7549 this.text = text || '';
7551 this.statusEl.setText(this.text);
7557 * Returns the current status text.
7558 * @return {String} The status text
7560 getText : function(){
7565 * Convenience method for setting the status icon directly. For more flexible options see {@link #setStatus}.
7566 * See {@link #iconCls} for complete details about customizing the icon.
7567 * @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)
7568 * @return {Ext.ux.StatusBar} this
7570 setIcon : function(cls){
7571 this.activeThreadId++;
7575 if(this.currIconCls){
7576 this.statusEl.removeClass(this.currIconCls);
7577 this.currIconCls = null;
7580 this.statusEl.addClass(cls);
7581 this.currIconCls = cls;
7584 this.currIconCls = cls;
7590 * Convenience method for setting the status text and icon to special values that are pre-configured to indicate
7591 * a "busy" state, usually for loading or processing activities.
7592 * @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
7593 * string to use as the status text (in which case all other options for setStatus will be defaulted). Use the
7594 * <tt>text</tt> and/or <tt>iconCls</tt> properties on the config to override the default {@link #busyText}
7595 * and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and
7596 * {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
7597 * @return {Ext.ux.StatusBar} this
7599 showBusy : function(o){
7600 if(typeof o == 'string'){
7603 o = Ext.applyIf(o || {}, {
7604 text: this.busyText,
7605 iconCls: this.busyIconCls
7607 return this.setStatus(o);
7610 Ext.reg('statusbar', Ext.ux.StatusBar);
7612 * @class Ext.ux.TabCloseMenu
\r
7613 * @extends Object
\r
7614 * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs.
\r
7616 * @ptype tabclosemenu
\r
7618 Ext.ux.TabCloseMenu = function(){
\r
7619 var tabs, menu, ctxItem;
\r
7620 this.init = function(tp){
\r
7622 tabs.on('contextmenu', onContextMenu);
\r
7625 function onContextMenu(ts, item, e){
\r
7626 if(!menu){ // create context menu on first right click
\r
7627 menu = new Ext.menu.Menu({
\r
7629 id: tabs.id + '-close',
\r
7630 text: 'Close Tab',
\r
7631 handler : function(){
\r
7632 tabs.remove(ctxItem);
\r
7635 id: tabs.id + '-close-others',
\r
7636 text: 'Close Other Tabs',
\r
7637 handler : function(){
\r
7638 tabs.items.each(function(item){
\r
7639 if(item.closable && item != ctxItem){
\r
7640 tabs.remove(item);
\r
7647 var items = menu.items;
\r
7648 items.get(tabs.id + '-close').setDisabled(!item.closable);
\r
7649 var disableOthers = true;
\r
7650 tabs.items.each(function(){
\r
7651 if(this != item && this.closable){
\r
7652 disableOthers = false;
\r
7656 items.get(tabs.id + '-close-others').setDisabled(disableOthers);
\r
7658 menu.showAt(e.getPoint());
\r
7662 Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);
\r
7663 Ext.ns('Ext.ux.grid');
7666 * @class Ext.ux.grid.TableGrid
7667 * @extends Ext.grid.GridPanel
7668 * A Grid which creates itself from an existing HTML table element.
7670 * 2007-03-01 Original version by Nige "Animal" White
7671 * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
7672 * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
7673 * The table MUST have some type of size defined for the grid to fill. The container will be
7674 * automatically set to position relative if it isn't already.
7675 * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
7676 * properties: fields and columns which allow for customizing data fields and columns for this grid.
7678 Ext.ux.grid.TableGrid = function(table, config){
7681 Ext.apply(this, config);
7682 var cf = config.fields || [], ch = config.columns || [];
7683 table = Ext.get(table);
7685 var ct = table.insertSibling();
7687 var fields = [], cols = [];
7688 var headers = table.query("thead th");
7689 for (var i = 0, h; h = headers[i]; i++) {
7690 var text = h.innerHTML;
7691 var name = 'tcol-' + i;
7693 fields.push(Ext.applyIf(cf[i] ||
7696 mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
7699 cols.push(Ext.applyIf(ch[i] ||
7703 'width': h.offsetWidth,
7709 var ds = new Ext.data.Store({
7710 reader: new Ext.data.XmlReader({
7715 ds.loadData(table.dom);
7717 var cm = new Ext.grid.ColumnModel(cols);
7719 if (config.width || config.height) {
7720 ct.setSize(config.width || 'auto', config.height || 'auto');
7723 ct.setWidth(table.getWidth());
7726 if (config.remove !== false) {
7733 'sm': new Ext.grid.RowSelectionModel(),
7737 Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {});
7740 Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);
7743 Ext.grid.TableGrid = Ext.ux.grid.TableGrid;
7746 Ext.ux.TabScrollerMenu = Ext.extend(Object, {
7749 menuPrefixText : 'Items',
7750 constructor : function(config) {
7751 config = config || {};
7752 Ext.apply(this, config);
7754 init : function(tabPanel) {
7755 Ext.apply(tabPanel, this.tabPanelMethods);
7757 tabPanel.tabScrollerMenu = this;
7765 var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
7766 tabPanel.createScrollers = newFn;
7771 // private && sequeneced
7772 createPanelsMenu : function() {
7773 var h = this.stripWrap.dom.offsetHeight;
7775 //move the right menu item to the left 18px
7776 var rtScrBtn = this.header.dom.firstChild;
7777 Ext.fly(rtScrBtn).applyStyles({
7781 var stripWrap = Ext.get(this.strip.dom.parentNode);
7782 stripWrap.applyStyles({
7783 'margin-right' : '36px'
7786 // Add the new righthand menu
7787 var scrollMenu = this.header.insertFirst({
7788 cls:'x-tab-tabmenu-right'
7790 scrollMenu.setHeight(h);
7791 scrollMenu.addClassOnOver('x-tab-tabmenu-over');
7792 scrollMenu.on('click', this.showTabsMenu, this);
7794 this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
7798 this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
7804 getPageSize : function() {
7805 return this.pageSize;
7808 setPageSize : function(pageSize) {
7809 this.pageSize = pageSize;
7812 getMaxText : function() {
7813 return this.maxText;
7816 setMaxText : function(t) {
7819 getMenuPrefixText : function() {
7820 return this.menuPrefixText;
7822 setMenuPrefixText : function(t) {
7823 this.menuPrefixText = t;
7825 // private && applied to the tab panel itself.
7827 // all execute within the scope of the tab panel
7829 showTabsMenu : function(e) {
7830 if (! this.tabsMenu) {
7831 this.tabsMenu = new Ext.menu.Menu();
7832 this.on('beforedestroy', this.tabsMenu.destroy, this.tabsMenu);
7835 this.tabsMenu.removeAll();
7837 this.generateTabMenuItems();
7839 var target = Ext.get(e.getTarget());
7840 var xy = target.getXY();
7842 //Y param + 24 pixels
7845 this.tabsMenu.showAt(xy);
7848 generateTabMenuItems : function() {
7849 var curActive = this.getActiveTab();
7850 var totalItems = this.items.getCount();
7851 var pageSize = this.tabScrollerMenu.getPageSize();
7854 if (totalItems > pageSize) {
7855 var numSubMenus = Math.floor(totalItems / pageSize);
7856 var remainder = totalItems % pageSize;
7858 // Loop through all of the items and create submenus in chunks of 10
7859 for (var i = 0 ; i < numSubMenus; i++) {
7860 var curPage = (i + 1) * pageSize;
7864 for (var x = 0; x < pageSize; x++) {
7865 index = x + curPage - pageSize;
7866 var item = this.items.get(index);
7867 menuItems.push(this.autoGenMenuItem(item));
7871 text : this.tabScrollerMenu.getMenuPrefixText() + ' ' + (curPage - pageSize + 1) + ' - ' + curPage,
7877 if (remainder > 0) {
7878 var start = numSubMenus * pageSize;
7880 for (var i = start ; i < totalItems; i ++ ) {
7881 var item = this.items.get(i);
7882 menuItems.push(this.autoGenMenuItem(item));
7887 text : this.tabScrollerMenu.menuPrefixText + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
7895 this.items.each(function(item) {
7896 if (item.id != curActive.id && ! item.hidden) {
7897 menuItems.push(this.autoGenMenuItem(item));
7903 autoGenMenuItem : function(item) {
7904 var maxText = this.tabScrollerMenu.getMaxText();
7905 var text = Ext.util.Format.ellipsis(item.title, maxText);
7909 handler : this.showTabFromMenu,
7911 disabled : item.disabled,
7913 iconCls : item.iconCls
7918 showTabFromMenu : function(menuItem) {
7919 this.setActiveTab(menuItem.tabToShow);
7923 Ext.ns('Ext.ux.tree');
7926 * @class Ext.ux.tree.XmlTreeLoader
7927 * @extends Ext.tree.TreeLoader
7928 * <p>A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
7929 * Any text value included as a text node in the XML will be added to the parent node as an attribute
7930 * called <tt>innerText</tt>. Also, the tag name of each XML node will be added to the tree node as
7931 * an attribute called <tt>tagName</tt>.</p>
7932 * <p>By default, this class expects that your source XML will provide the necessary attributes on each
7933 * node as expected by the {@link Ext.tree.TreePanel} to display and load properly. However, you can
7934 * provide your own custom processing of node attributes by overriding the {@link #processNode} method
7935 * and modifying the attributes as needed before they are used to create the associated TreeNode.</p>
7937 * Creates a new XmlTreeloader.
7938 * @param {Object} config A config object containing config properties.
7940 Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
7942 * @property XML_NODE_ELEMENT
7943 * XML element node (value 1, read-only)
7946 XML_NODE_ELEMENT : 1,
7948 * @property XML_NODE_TEXT
7949 * XML text node (value 3, read-only)
7955 processResponse : function(response, node, callback){
7956 var xmlData = response.responseXML;
7957 var root = xmlData.documentElement || xmlData;
7961 node.appendChild(this.parseXml(root));
7964 if(typeof callback == "function"){
7965 callback(this, node);
7968 this.handleFailure(response);
7973 parseXml : function(node) {
7975 Ext.each(node.childNodes, function(n){
7976 if(n.nodeType == this.XML_NODE_ELEMENT){
7977 var treeNode = this.createNode(n);
7978 if(n.childNodes.length > 0){
7979 var child = this.parseXml(n);
7980 if(typeof child == 'string'){
7981 treeNode.attributes.innerText = child;
7983 treeNode.appendChild(child);
7986 nodes.push(treeNode);
7988 else if(n.nodeType == this.XML_NODE_TEXT){
7989 var text = n.nodeValue.trim();
7990 if(text.length > 0){
7991 return nodes = text;
8000 createNode : function(node){
8002 tagName: node.tagName
8005 Ext.each(node.attributes, function(a){
8006 attr[a.nodeName] = a.nodeValue;
8009 this.processAttributes(attr);
8011 return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr);
8015 * Template method intended to be overridden by subclasses that need to provide
8016 * custom attribute processing prior to the creation of each TreeNode. This method
8017 * will be passed a config object containing existing TreeNode attribute name/value
8018 * pairs which can be modified as needed directly (no need to return the object).
8020 processAttributes: Ext.emptyFn
8024 Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;
8026 * @class Ext.ux.ValidationStatus
8027 * A {@link Ext.StatusBar} plugin that provides automatic error notification when the
8028 * associated form contains validation errors.
8029 * @extends Ext.Component
8031 * Creates a new ValiationStatus plugin
8032 * @param {Object} config A config object
8034 Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
8036 * @cfg {String} errorIconCls
8037 * The {@link #iconCls} value to be applied to the status message when there is a
8038 * validation error. Defaults to <tt>'x-status-error'</tt>.
8040 errorIconCls : 'x-status-error',
8042 * @cfg {String} errorListCls
8043 * The css class to be used for the error list when there are validation errors.
8044 * Defaults to <tt>'x-status-error-list'</tt>.
8046 errorListCls : 'x-status-error-list',
8048 * @cfg {String} validIconCls
8049 * The {@link #iconCls} value to be applied to the status message when the form
8050 * validates. Defaults to <tt>'x-status-valid'</tt>.
8052 validIconCls : 'x-status-valid',
8055 * @cfg {String} showText
8056 * The {@link #text} value to be applied when there is a form validation error.
8057 * Defaults to <tt>'The form has errors (click for details...)'</tt>.
8059 showText : 'The form has errors (click for details...)',
8061 * @cfg {String} showText
8062 * The {@link #text} value to display when the error list is displayed.
8063 * Defaults to <tt>'Click again to hide the error list'</tt>.
8065 hideText : 'Click again to hide the error list',
8067 * @cfg {String} submitText
8068 * The {@link #text} value to be applied when the form is being submitted.
8069 * Defaults to <tt>'Saving...'</tt>.
8071 submitText : 'Saving...',
8074 init : function(sb){
8075 sb.on('render', function(){
8076 this.statusBar = sb;
8077 this.monitor = true;
8078 this.errors = new Ext.util.MixedCollection();
8079 this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');
8082 this.form = Ext.getCmp(this.form).getForm();
8083 this.startMonitoring();
8084 this.form.on('beforeaction', function(f, action){
8085 if(action.type == 'submit'){
8086 // Ignore monitoring while submitting otherwise the field validation
8087 // events cause the status message to reset too early
8088 this.monitor = false;
8091 var startMonitor = function(){
8092 this.monitor = true;
8094 this.form.on('actioncomplete', startMonitor, this);
8095 this.form.on('actionfailed', startMonitor, this);
8097 }, this, {single:true});
8103 // Grab the statusEl after the first layout.
8104 sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});
8115 startMonitoring : function(){
8116 this.form.items.each(function(f){
8117 f.on('invalid', this.onFieldValidation, this);
8118 f.on('valid', this.onFieldValidation, this);
8123 stopMonitoring : function(){
8124 this.form.items.each(function(f){
8125 f.un('invalid', this.onFieldValidation, this);
8126 f.un('valid', this.onFieldValidation, this);
8131 onDestroy : function(){
8132 this.stopMonitoring();
8133 this.statusBar.statusEl.un('click', this.onStatusClick, this);
8134 Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
8138 onFieldValidation : function(f, msg){
8143 this.errors.add(f.id, {field:f, msg:msg});
8145 this.errors.removeKey(f.id);
8147 this.updateErrorList();
8148 if(this.errors.getCount() > 0){
8149 if(this.statusBar.getText() != this.showText){
8150 this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
8153 this.statusBar.clearStatus().setIcon(this.validIconCls);
8158 updateErrorList : function(){
8159 if(this.errors.getCount() > 0){
8161 this.errors.each(function(err){
8162 msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');
8164 this.getMsgEl().update(msg+'</ul>');
8166 this.getMsgEl().update('');
8171 getMsgEl : function(){
8173 this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
8174 cls: this.errorListCls+' x-hide-offsets'
8177 this.msgEl.on('click', function(e){
8178 var t = e.getTarget('li', 10, true);
8180 Ext.getCmp(t.id.split('x-err-')[1]).focus();
8183 }, this, {stopEvent:true}); // prevent anchor click navigation
8189 showErrors : function(){
8190 this.updateErrorList();
8191 this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:0.3, easing:'easeOut'});
8192 this.statusBar.setText(this.hideText);
8193 this.form.getEl().on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
8197 hideErrors : function(){
8198 var el = this.getMsgEl();
8200 el.slideOut('b', {duration:0.2, easing:'easeIn'});
8201 this.statusBar.setText(this.showText);
8203 this.form.getEl().un('click', this.hideErrors, this);
8207 onStatusClick : function(){
8208 if(this.getMsgEl().isVisible()){
8210 }else if(this.errors.getCount() > 0){