3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.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 visibleHeight = this.scroller.dom.clientHeight;
80 return (visibleHeight < 1) ? 0 : Math.ceil(visibleHeight / rh);
83 getVisibleRows: function(){
84 var count = this.getVisibleRowCount(),
85 sc = this.scroller.dom.scrollTop,
86 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,
99 rh = this.getStyleRowHeight(),
100 vr = this.getVisibleRows(),
101 tstyle = 'width:'+this.getTotalWidth()+';height:'+rh+'px;',
107 rp = {tstyle: tstyle},
109 for (var j = 0, len = rs.length; j < len; j++) {
111 var rowIndex = (j+startRow),
112 visible = rowIndex >= vr.first && rowIndex <= vr.last;
114 for (var i = 0; i < colCount; i++) {
117 p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
118 p.attr = p.cellAttr = "";
119 p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
121 if (p.value === undefined || p.value === "") {
124 if (r.dirty && typeof r.modified[c.name] !== 'undefined') {
125 p.css += ' x-grid3-dirty-cell';
127 cb[cb.length] = ct.apply(p);
131 if(stripe && ((rowIndex+1) % 2 === 0)){
132 alt[0] = "x-grid3-row-alt";
135 alt[1] = " x-grid3-dirty-row";
138 if(this.getRowClass){
139 alt[2] = this.getRowClass(r, rowIndex, rp, ds);
141 rp.alt = alt.join(" ");
142 rp.cells = cb.join("");
143 buf[buf.length] = !visible ? ts.rowHolder.apply(rp) : (onlyBody ? rb.apply(rp) : rt.apply(rp));
148 isRowRendered: function(index){
149 var row = this.getRow(index);
150 return row && row.childNodes.length > 0;
153 syncScroll: function(){
154 Ext.ux.grid.BufferView.superclass.syncScroll.apply(this, arguments);
158 // a (optionally) buffered method to update contents of gridview
160 if (this.scrollDelay) {
161 if (!this.renderTask) {
162 this.renderTask = new Ext.util.DelayedTask(this.doUpdate, this);
164 this.renderTask.delay(this.scrollDelay);
170 onRemove : function(ds, record, index, isUpdate){
171 Ext.ux.grid.BufferView.superclass.onRemove.apply(this, arguments);
172 if(isUpdate !== true){
177 doUpdate: function(){
178 if (this.getVisibleRowCount() > 0) {
182 cs = this.getColumnData(),
183 vr = this.getVisibleRows(),
185 for (var i = vr.first; i <= vr.last; i++) {
186 // if row is NOT rendered and is visible, render it
187 if(!this.isRowRendered(i) && (row = this.getRow(i))){
188 var html = this.doRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true);
189 row.innerHTML = html;
196 // a buffered method to clean rows
199 this.cleanTask = new Ext.util.DelayedTask(this.doClean, this);
201 this.cleanTask.delay(this.cleanDelay);
205 if (this.getVisibleRowCount() > 0) {
206 var vr = this.getVisibleRows();
207 vr.first -= this.cacheSize;
208 vr.last += this.cacheSize;
210 var i = 0, rows = this.getRows();
211 // if first is less than 0, all rows have been rendered
212 // so lets clean the end...
216 for(var len = this.ds.getCount(); i < len; i++){
217 // if current row is outside of first and last and
218 // has content, update the innerHTML to nothing
219 if ((i < vr.first || i > vr.last) && rows[i].innerHTML) {
220 rows[i].innerHTML = '';
226 removeTask: function(name){
227 var task = this[name];
228 if(task && task.cancel){
234 destroy : function(){
235 this.removeTask('cleanTask');
236 this.removeTask('renderTask');
237 Ext.ux.grid.BufferView.superclass.destroy.call(this);
241 Ext.ux.grid.BufferView.superclass.layout.call(this);
244 });// We are adding these custom layouts to a namespace that does not
245 // exist by default in Ext, so we have to add the namespace first:
246 Ext.ns('Ext.ux.layout');
249 * @class Ext.ux.layout.CenterLayout
250 * @extends Ext.layout.FitLayout
251 * <p>This is a very simple layout style used to center contents within a container. This layout works within
252 * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
253 * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
254 * the layout. The layout does not require any config options, although the child panel contained within the
255 * layout must provide a fixed or percentage width. The child panel's height will fit to the container by
256 * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
259 // The content panel is centered in the container
260 var p = new Ext.Panel({
261 title: 'Center Layout',
264 title: 'Centered Content',
270 // If you leave the title blank and specify no border
271 // you'll create a non-visual, structural panel just
272 // for centering the contents in the main container.
273 var p = new Ext.Panel({
277 title: 'Centered Content',
285 Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
287 setItemSize : function(item, size){
288 this.container.addClass('ux-layout-center');
289 item.addClass('ux-layout-center-item');
290 if(item && size.height > 0){
292 size.width = item.width;
299 Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
300 Ext.ns('Ext.ux.grid');
303 * @class Ext.ux.grid.CheckColumn
304 * @extends Ext.grid.Column
305 * <p>A Column subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.</p>
306 * <p><b>Note. As of ExtJS 3.3 this no longer has to be configured as a plugin of the GridPanel.</b></p>
307 * <p>Example usage:</p>
309 var cm = new Ext.grid.ColumnModel([{
313 xtype: 'checkcolumn',
321 var grid = new Ext.grid.EditorGridPanel({
327 * In addition to toggling a Boolean value within the record data, this
328 * class toggles a css class between <tt>'x-grid3-check-col'</tt> and
329 * <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
332 Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {
336 * Process and refire events routed from the GridView's processEvent method.
338 processEvent : function(name, e, grid, rowIndex, colIndex){
339 if (name == 'mousedown') {
340 var record = grid.store.getAt(rowIndex);
341 record.set(this.dataIndex, !record.data[this.dataIndex]);
342 return false; // Cancel row selection.
344 return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
348 renderer : function(v, p, record){
349 p.css += ' x-grid3-check-col-td';
350 return String.format('<div class="x-grid3-check-col{0}"> </div>', v ? '-on' : '');
353 // Deprecate use as a plugin. Remove in 4.0
357 // register ptype. Deprecate. Remove in 4.0
358 Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
360 // backwards compat. Remove in 4.0
361 Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
363 // register Column xtype
364 Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;Ext.ns('Ext.ux.grid');
366 Ext.ux.grid.ColumnHeaderGroup = Ext.extend(Ext.util.Observable, {
368 constructor: function(config){
369 this.config = config;
372 init: function(grid){
373 Ext.applyIf(grid.colModel, this.config);
374 Ext.apply(grid.getView(), this.viewConfig);
378 initTemplates: function(){
379 this.constructor.prototype.initTemplates.apply(this, arguments);
380 var ts = this.templates || {};
382 ts.gcell = new Ext.XTemplate('<td class="x-grid3-hd x-grid3-gcell x-grid3-td-{id} ux-grid-hd-group-row-{row} {cls}" style="{style}">', '<div {tooltip} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '', '{value}</div></td>');
385 this.hrowRe = new RegExp("ux-grid-hd-group-row-(\\d+)", "");
388 renderHeaders: function(){
389 var ts = this.templates, headers = [], cm = this.cm, rows = cm.rows, tstyle = 'width:' + this.getTotalWidth() + ';';
391 for(var row = 0, rlen = rows.length; row < rlen; row++){
392 var r = rows[row], cells = [];
393 for(var i = 0, gcol = 0, len = r.length; i < len; i++){
395 group.colspan = group.colspan || 1;
396 var id = this.getColumnId(group.dataIndex ? cm.findColumnIndex(group.dataIndex) : gcol), gs = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle.call(this, group, gcol);
397 cells[i] = ts.gcell.apply({
398 cls: 'ux-grid-hd-group-cell',
401 style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (group.align ? 'text-align:' + group.align + ';' : ''),
402 tooltip: group.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + group.tooltip + '"' : '',
403 istyle: group.align == 'right' ? 'padding-right:16px' : '',
404 btn: this.grid.enableHdMenu && group.header,
405 value: group.header || ' '
407 gcol += group.colspan;
409 headers[row] = ts.header.apply({
411 cells: cells.join('')
414 headers.push(this.constructor.prototype.renderHeaders.apply(this, arguments));
415 return headers.join('');
418 onColumnWidthUpdated: function(){
419 this.constructor.prototype.onColumnWidthUpdated.apply(this, arguments);
420 Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
423 onAllColumnWidthsUpdated: function(){
424 this.constructor.prototype.onAllColumnWidthsUpdated.apply(this, arguments);
425 Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
428 onColumnHiddenUpdated: function(){
429 this.constructor.prototype.onColumnHiddenUpdated.apply(this, arguments);
430 Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
433 getHeaderCell: function(index){
434 return this.mainHd.query(this.cellSelector)[index];
437 findHeaderCell: function(el){
438 return el ? this.fly(el).findParent('td.x-grid3-hd', this.cellSelectorDepth) : false;
441 findHeaderIndex: function(el){
442 var cell = this.findHeaderCell(el);
443 return cell ? this.getCellIndex(cell) : false;
446 updateSortIcon: function(col, dir){
447 var sc = this.sortClasses, hds = this.mainHd.select(this.cellSelector).removeClass(sc);
448 hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
451 handleHdDown: function(e, t){
453 if(el.hasClass('x-grid3-hd-btn')){
455 var hd = this.findHeaderCell(t);
456 Ext.fly(hd).addClass('x-grid3-hd-menu-open');
457 var index = this.getCellIndex(hd);
458 this.hdCtxIndex = index;
459 var ms = this.hmenu.items, cm = this.cm;
460 ms.get('asc').setDisabled(!cm.isSortable(index));
461 ms.get('desc').setDisabled(!cm.isSortable(index));
462 this.hmenu.on('hide', function(){
463 Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
467 this.hmenu.show(t, 'tl-bl?');
468 }else if(el.hasClass('ux-grid-hd-group-cell') || Ext.fly(t).up('.ux-grid-hd-group-cell')){
473 handleHdMove: function(e, t){
474 var hd = this.findHeaderCell(this.activeHdRef);
475 if(hd && !this.headersDisabled && !Ext.fly(hd).hasClass('ux-grid-hd-group-cell')){
476 var hw = this.splitHandleWidth || 5, r = this.activeHdRegion, x = e.getPageX(), ss = hd.style, cur = '';
477 if(this.grid.enableColumnResize !== false){
478 if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex - 1)){
479 cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'e-resize' : 'col-resize'; // col-resize
483 }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){
484 cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize';
491 handleHdOver: function(e, t){
492 var hd = this.findHeaderCell(t);
493 if(hd && !this.headersDisabled){
494 this.activeHdRef = t;
495 this.activeHdIndex = this.getCellIndex(hd);
496 var fly = this.fly(hd);
497 this.activeHdRegion = fly.getRegion();
498 if(!(this.cm.isMenuDisabled(this.activeHdIndex) || fly.hasClass('ux-grid-hd-group-cell'))){
499 fly.addClass('x-grid3-hd-over');
500 this.activeHdBtn = fly.child('.x-grid3-hd-btn');
501 if(this.activeHdBtn){
502 this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight - 1) + 'px';
508 handleHdOut: function(e, t){
509 var hd = this.findHeaderCell(t);
510 if(hd && (!Ext.isIE || !e.within(hd, true))){
511 this.activeHdRef = null;
512 this.fly(hd).removeClass('x-grid3-hd-over');
513 hd.style.cursor = '';
517 handleHdMenuClick: function(item){
518 var index = this.hdCtxIndex, cm = this.cm, ds = this.ds, id = item.getItemId();
521 ds.sort(cm.getDataIndex(index), 'ASC');
524 ds.sort(cm.getDataIndex(index), 'DESC');
527 if(id.substr(0, 6) == 'group-'){
528 var i = id.split('-'), row = parseInt(i[1], 10), col = parseInt(i[2], 10), r = this.cm.rows[row], group, gcol = 0;
529 for(var i = 0, len = r.length; i < len; i++){
531 if(col >= gcol && col < gcol + group.colspan){
534 gcol += group.colspan;
537 var max = cm.getColumnsBy(this.isHideableColumn, this).length;
538 for(var i = gcol, len = gcol + group.colspan; i < len; i++){
544 this.onDenyColumnHide();
548 for(var i = gcol, len = gcol + group.colspan; i < len; i++){
549 if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){
550 cm.setHidden(i, item.checked);
553 }else if(id.substr(0, 4) == 'col-'){
554 index = cm.getIndexById(id.substr(4));
556 if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
557 this.onDenyColumnHide();
560 cm.setHidden(index, item.checked);
563 if(id.substr(0, 6) == 'group-' || id.substr(0, 4) == 'col-'){
564 item.checked = !item.checked;
566 var updateChildren = function(menu){
567 menu.items.each(function(childItem){
568 if(!childItem.disabled){
569 childItem.setChecked(item.checked, false);
571 updateChildren(childItem.menu);
576 updateChildren(item.menu);
578 var parentMenu = item, parentItem;
579 while(parentMenu = parentMenu.parentMenu){
580 if(!parentMenu.parentMenu || !(parentItem = parentMenu.parentMenu.items.get(parentMenu.getItemId())) || !parentItem.setChecked){
583 var checked = parentMenu.items.findIndexBy(function(m){
586 parentItem.setChecked(checked, true);
588 item.checked = !item.checked;
594 beforeColMenuShow: function(){
595 var cm = this.cm, rows = this.cm.rows;
596 this.colMenu.removeAll();
597 for(var col = 0, clen = cm.getColumnCount(); col < clen; col++){
598 var menu = this.colMenu, title = cm.getColumnHeader(col), text = [];
599 if(cm.config[col].fixed !== true && cm.config[col].hideable !== false){
600 for(var row = 0, rlen = rows.length; row < rlen; row++){
601 var r = rows[row], group, gcol = 0;
602 for(var i = 0, len = r.length; i < len; i++){
604 if(col >= gcol && col < gcol + group.colspan){
607 gcol += group.colspan;
609 if(group && group.header){
610 if(cm.hierarchicalColMenu){
611 var gid = 'group-' + row + '-' + gcol,
612 item = menu.items ? menu.getComponent(gid) : null,
613 submenu = item ? item.menu : null;
615 submenu = new Ext.menu.Menu({
618 submenu.on("itemclick", this.handleHdMenuClick, this);
619 var checked = false, disabled = true;
620 for(var c = gcol, lc = gcol + group.colspan; c < lc; c++){
624 if(cm.config[c].hideable !== false){
639 text.push(group.header);
644 menu.add(new Ext.menu.CheckItem({
645 itemId: "col-" + cm.getColumnId(col),
646 text: text.join(' '),
647 checked: !cm.isHidden(col),
649 disabled: cm.config[col].hideable === false
655 afterRenderUI: function(){
656 this.constructor.prototype.afterRenderUI.apply(this, arguments);
657 Ext.apply(this.columnDrop, Ext.ux.grid.ColumnHeaderGroup.prototype.columnDropConfig);
658 Ext.apply(this.splitZone, Ext.ux.grid.ColumnHeaderGroup.prototype.splitZoneConfig);
663 allowHeaderDrag: function(e){
664 return !e.getTarget(null, null, true).hasClass('ux-grid-hd-group-cell');
669 getTargetFromEvent: function(e){
670 var t = Ext.lib.Event.getTarget(e);
671 return this.view.findHeaderCell(t);
674 positionIndicator: function(h, n, e){
675 var data = Ext.ux.grid.ColumnHeaderGroup.prototype.getDragDropData.call(this, h, n, e);
679 var px = data.px + this.proxyOffsets[0];
680 this.proxyTop.setLeftTop(px, data.r.top + this.proxyOffsets[1]);
681 this.proxyTop.show();
682 this.proxyBottom.setLeftTop(px, data.r.bottom);
683 this.proxyBottom.show();
687 onNodeDrop: function(n, dd, e, data){
690 var d = Ext.ux.grid.ColumnHeaderGroup.prototype.getDragDropData.call(this, h, n, e);
694 var cm = this.grid.colModel, right = d.oldIndex < d.newIndex, rows = cm.rows;
695 for(var row = d.row, rlen = rows.length; row < rlen; row++){
696 var r = rows[row], len = r.length, fromIx = 0, span = 1, toIx = len;
697 for(var i = 0, gcol = 0; i < len; i++){
699 if(d.oldIndex >= gcol && d.oldIndex < gcol + group.colspan){
702 if(d.oldIndex + d.colspan - 1 >= gcol && d.oldIndex + d.colspan - 1 < gcol + group.colspan){
703 span = i - fromIx + 1;
705 if(d.newIndex >= gcol && d.newIndex < gcol + group.colspan){
708 gcol += group.colspan;
710 var groups = r.splice(fromIx, span);
711 rows[row] = r.splice(0, toIx - (right ? span : 0)).concat(groups).concat(r);
713 for(var c = 0; c < d.colspan; c++){
714 var oldIx = d.oldIndex + (right ? 0 : c), newIx = d.newIndex + (right ? -1 : c);
715 cm.moveColumn(oldIx, newIx);
716 this.grid.fireEvent("columnmove", oldIx, newIx);
724 getGroupStyle: function(group, gcol){
725 var width = 0, hidden = true;
726 for(var i = gcol, len = gcol + group.colspan; i < len; i++){
727 if(!this.cm.isHidden(i)){
728 var cw = this.cm.getColumnWidth(i);
729 if(typeof cw == 'number'){
736 width: (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2) ? width : Math.max(width - this.borderWidth, 0)) + 'px',
741 updateGroupStyles: function(col){
742 var tables = this.mainHd.query('.x-grid3-header-offset > table'), tw = this.getTotalWidth(), rows = this.cm.rows;
743 for(var row = 0; row < tables.length; row++){
744 tables[row].style.width = tw;
745 if(row < rows.length){
746 var cells = tables[row].firstChild.firstChild.childNodes;
747 for(var i = 0, gcol = 0; i < cells.length; i++){
748 var group = rows[row][i];
749 if((typeof col != 'number') || (col >= gcol && col < gcol + group.colspan)){
750 var gs = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle.call(this, group, gcol);
751 cells[i].style.width = gs.width;
752 cells[i].style.display = gs.hidden ? 'none' : '';
754 gcol += group.colspan;
760 getGroupRowIndex: function(el){
762 var m = el.className.match(this.hrowRe);
764 return parseInt(m[1], 10);
767 return this.cm.rows.length;
770 getGroupSpan: function(row, col){
774 colspan: this.cm.getColumnCount()
777 var r = this.cm.rows[row];
779 for(var i = 0, gcol = 0, len = r.length; i < len; i++){
781 if(col >= gcol && col < gcol + group.colspan){
784 colspan: group.colspan
787 gcol += group.colspan;
800 getDragDropData: function(h, n, e){
801 if(h.parentNode != n.parentNode){
804 var cm = this.grid.colModel, x = Ext.lib.Event.getPageX(e), r = Ext.lib.Dom.getRegion(n.firstChild), px, pt;
805 if((r.right - x) <= (r.right - r.left) / 2){
806 px = r.right + this.view.borderWidth;
812 var oldIndex = this.view.getCellIndex(h), newIndex = this.view.getCellIndex(n);
813 if(cm.isFixed(newIndex)){
816 var row = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupRowIndex.call(this.view, h),
817 oldGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row, oldIndex),
818 newGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row, newIndex),
819 oldIndex = oldGroup.col;
820 newIndex = newGroup.col + (pt == "after" ? newGroup.colspan : 0);
821 if(newIndex >= oldGroup.col && newIndex <= oldGroup.col + oldGroup.colspan){
824 var parentGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row - 1, oldIndex);
825 if(newIndex < parentGroup.col || newIndex > parentGroup.col + parentGroup.colspan){
835 colspan: oldGroup.colspan
838 });Ext.ns('Ext.ux.tree');
841 * @class Ext.ux.tree.ColumnTree
842 * @extends Ext.tree.TreePanel
846 Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
848 borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
849 cls : 'x-column-tree',
851 onRender : function(){
852 Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
853 this.headers = this.header.createChild({cls:'x-tree-headers'});
855 var cols = this.columns, c;
857 var scrollOffset = 19; // similar to Ext.grid.GridView default
859 for(var i = 0, len = cols.length; i < len; i++){
861 totalWidth += c.width;
862 this.headers.createChild({
863 cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
865 cls:'x-tree-hd-text',
868 style:'width:'+(c.width-this.borderWidth)+'px;'
871 this.headers.createChild({cls:'x-clear'});
872 // prevent floats from wrapping when clipped
873 this.headers.setWidth(totalWidth+scrollOffset);
874 this.innerCt.setWidth(totalWidth);
878 Ext.reg('columntree', Ext.ux.tree.ColumnTree);
881 Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;
885 * @class Ext.ux.tree.ColumnNodeUI
886 * @extends Ext.tree.TreeNodeUI
888 Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
889 focus: Ext.emptyFn, // prevent odd scrolling behavior
891 renderElements : function(n, a, targetNode, bulkRender){
892 this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
894 var t = n.getOwnerTree();
895 var cols = t.columns;
896 var bw = t.borderWidth;
900 '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
901 '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
902 '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
903 '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
904 '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
905 '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
906 a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
907 '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
909 for(var i = 1, len = cols.length; i < len; i++){
912 buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
913 '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
917 '<div class="x-clear"></div></div>',
918 '<ul class="x-tree-node-ct" style="display:none;"></ul>',
921 if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
922 this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
923 n.nextSibling.ui.getEl(), buf.join(""));
925 this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
928 this.elNode = this.wrap.childNodes[0];
929 this.ctNode = this.wrap.childNodes[1];
930 var cs = this.elNode.firstChild.childNodes;
931 this.indentNode = cs[0];
933 this.iconNode = cs[2];
935 this.textNode = cs[3].firstChild;
940 Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;
942 * @class Ext.DataView.LabelEditor
943 * @extends Ext.Editor
946 Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
949 cls: "x-small-editor",
951 completeOnEnter: true,
953 labelSelector: 'span.x-editable',
955 constructor: function(cfg, field){
956 Ext.DataView.LabelEditor.superclass.constructor.call(this,
957 field || new Ext.form.TextField({
967 init : function(view){
969 view.on('render', this.initEditor, this);
970 this.on('complete', this.onSave, this);
973 initEditor : function(){
976 containerclick: this.doBlur,
979 this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
988 onMouseDown : function(e, target){
989 if(!e.ctrlKey && !e.shiftKey){
990 var item = this.view.findItemFromChild(target);
992 var record = this.view.store.getAt(this.view.indexOf(item));
993 this.startEdit(target, record.data[this.dataIndex]);
994 this.activeRecord = record;
1000 onSave : function(ed, value){
1001 this.activeRecord.set(this.dataIndex, value);
1006 Ext.DataView.DragSelector = function(cfg){
1008 var view, proxy, tracker;
1009 var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
1010 var dragSafe = cfg.dragSafe === true;
1012 this.init = function(dataView){
1014 view.on('render', onRender);
1017 function fillRegions(){
1019 view.all.each(function(el){
1020 rs[rs.length] = el.getRegion();
1022 bodyRegion = view.el.getRegion();
1025 function cancelClick(){
1029 function onBeforeStart(e){
1030 return !dragSafe || e.target == view.el.dom;
1033 function onStart(e){
1034 view.on('containerclick', cancelClick, view, {single:true});
1036 proxy = view.el.createChild({cls:'x-view-selector'});
1038 if(proxy.dom.parentNode !== view.el.dom){
1039 view.el.dom.appendChild(proxy.dom);
1041 proxy.setDisplayed('block');
1044 view.clearSelections();
1048 var startXY = tracker.startXY;
1049 var xy = tracker.getXY();
1051 var x = Math.min(startXY[0], xy[0]);
1052 var y = Math.min(startXY[1], xy[1]);
1053 var w = Math.abs(startXY[0] - xy[0]);
1054 var h = Math.abs(startXY[1] - xy[1]);
1056 dragRegion.left = x;
1058 dragRegion.right = x+w;
1059 dragRegion.bottom = y+h;
1061 dragRegion.constrainTo(bodyRegion);
1062 proxy.setRegion(dragRegion);
1064 for(var i = 0, len = rs.length; i < len; i++){
1065 var r = rs[i], sel = dragRegion.intersect(r);
1066 if(sel && !r.selected){
1068 view.select(i, true);
1069 }else if(!sel && r.selected){
1078 view.un('containerclick', cancelClick, view);
1081 proxy.setDisplayed(false);
1085 function onRender(view){
1086 tracker = new Ext.dd.DragTracker({
1087 onBeforeStart: onBeforeStart,
1092 tracker.initEl(view.el);
1094 };Ext.ns('Ext.ux.form');
1097 * @class Ext.ux.form.FileUploadField
1098 * @extends Ext.form.TextField
1099 * Creates a file upload field.
1100 * @xtype fileuploadfield
1102 Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
1104 * @cfg {String} buttonText The button text to display on the upload button (defaults to
1105 * 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
1106 * value will be used instead if available.
1108 buttonText: 'Browse...',
1110 * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
1111 * text field (defaults to false). If true, all inherited TextField members will still be available.
1115 * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
1116 * (defaults to 3). Note that this only applies if {@link #buttonOnly} = false.
1120 * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
1130 autoSize: Ext.emptyFn,
1133 initComponent: function(){
1134 Ext.ux.form.FileUploadField.superclass.initComponent.call(this);
1138 * @event fileselected
1139 * Fires when the underlying file input field's value has changed from the user
1140 * selecting a new file from the system file selection dialog.
1141 * @param {Ext.ux.form.FileUploadField} this
1142 * @param {String} value The file value returned by the underlying file input field
1149 onRender : function(ct, position){
1150 Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);
1152 this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
1153 this.el.addClass('x-form-file-text');
1154 this.el.dom.removeAttribute('name');
1155 this.createFileInput();
1157 var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
1158 text: this.buttonText
1160 this.button = new Ext.Button(Ext.apply(btnCfg, {
1161 renderTo: this.wrap,
1162 cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
1165 if(this.buttonOnly){
1167 this.wrap.setWidth(this.button.getEl().getWidth());
1170 this.bindListeners();
1171 this.resizeEl = this.positionEl = this.wrap;
1174 bindListeners: function(){
1177 mouseenter: function() {
1178 this.button.addClass(['x-btn-over','x-btn-focus'])
1180 mouseleave: function(){
1181 this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
1183 mousedown: function(){
1184 this.button.addClass('x-btn-click')
1186 mouseup: function(){
1187 this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
1190 var v = this.fileInput.dom.value;
1192 this.fireEvent('fileselected', this, v);
1197 createFileInput : function() {
1198 this.fileInput = this.wrap.createChild({
1199 id: this.getFileInputId(),
1200 name: this.name||this.getId(),
1209 this.fileInput.remove();
1210 this.createFileInput();
1211 this.bindListeners();
1212 Ext.ux.form.FileUploadField.superclass.reset.call(this);
1216 getFileInputId: function(){
1217 return this.id + '-file';
1221 onResize : function(w, h){
1222 Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);
1224 this.wrap.setWidth(w);
1226 if(!this.buttonOnly){
1227 var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
1228 this.el.setWidth(w);
1233 onDestroy: function(){
1234 Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
1235 Ext.destroy(this.fileInput, this.button, this.wrap);
1238 onDisable: function(){
1239 Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
1240 this.doDisable(true);
1243 onEnable: function(){
1244 Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
1245 this.doDisable(false);
1250 doDisable: function(disabled){
1251 this.fileInput.dom.disabled = disabled;
1252 this.button.setDisabled(disabled);
1257 preFocus : Ext.emptyFn,
1260 alignErrorIcon : function(){
1261 this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
1266 Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
1269 Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
1271 * @class Ext.ux.GMapPanel
1272 * @extends Ext.Panel
1273 * @author Shea Frederick
1275 Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
1276 initComponent : function(){
1288 Ext.applyIf(this,defConfig);
1290 Ext.ux.GMapPanel.superclass.initComponent.call(this);
1293 afterRender : function(){
1295 var wh = this.ownerCt.getSize();
1296 Ext.applyIf(this, wh);
1298 Ext.ux.GMapPanel.superclass.afterRender.call(this);
1300 if (this.gmapType === 'map'){
1301 this.gmap = new GMap2(this.body.dom);
1304 if (this.gmapType === 'panorama'){
1305 this.gmap = new GStreetviewPanorama(this.body.dom);
1308 if (typeof this.addControl == 'object' && this.gmapType === 'map') {
1309 this.gmap.addControl(this.addControl);
1312 if (typeof this.setCenter === 'object') {
1313 if (typeof this.setCenter.geoCodeAddr === 'string'){
1314 this.geoCodeLookup(this.setCenter.geoCodeAddr);
1316 if (this.gmapType === 'map'){
1317 var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
1318 this.gmap.setCenter(point, this.zoomLevel);
1320 if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
1321 this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
1324 if (this.gmapType === 'panorama'){
1325 this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
1329 GEvent.bind(this.gmap, 'load', this, function(){
1334 onMapReady : function(){
1335 this.addMarkers(this.markers);
1336 this.addMapControls();
1339 onResize : function(w, h){
1341 if (typeof this.getMap() == 'object') {
1342 this.gmap.checkResize();
1345 Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
1348 setSize : function(width, height, animate){
1350 if (typeof this.getMap() == 'object') {
1351 this.gmap.checkResize();
1354 Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
1357 getMap : function(){
1362 getCenter : function(){
1364 return this.getMap().getCenter();
1367 getCenterLatLng : function(){
1369 var ll = this.getCenter();
1370 return {lat: ll.lat(), lng: ll.lng()};
1373 addMarkers : function(markers) {
1375 if (Ext.isArray(markers)){
1376 for (var i = 0; i < markers.length; i++) {
1377 var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
1378 this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
1383 addMarker : function(point, marker, clear, center, listeners){
1385 Ext.applyIf(marker,G_DEFAULT_ICON);
1387 if (clear === true){
1388 this.getMap().clearOverlays();
1390 if (center === true) {
1391 this.getMap().setCenter(point, this.zoomLevel);
1394 var mark = new GMarker(point,marker);
1395 if (typeof listeners === 'object'){
1396 for (evt in listeners) {
1397 GEvent.bind(mark, evt, this, listeners[evt]);
1400 this.getMap().addOverlay(mark);
1403 addMapControls : function(){
1405 if (this.gmapType === 'map') {
1406 if (Ext.isArray(this.mapControls)) {
1407 for(i=0;i<this.mapControls.length;i++){
1408 this.addMapControl(this.mapControls[i]);
1410 }else if(typeof this.mapControls === 'string'){
1411 this.addMapControl(this.mapControls);
1412 }else if(typeof this.mapControls === 'object'){
1413 this.getMap().addControl(this.mapControls);
1418 addMapControl : function(mc){
1420 var mcf = window[mc];
1421 if (typeof mcf === 'function') {
1422 this.getMap().addControl(new mcf());
1426 addOptions : function(){
1428 if (Ext.isArray(this.mapConfOpts)) {
1430 for(i=0;i<this.mapConfOpts.length;i++){
1431 this.addOption(this.mapConfOpts[i]);
1433 }else if(typeof this.mapConfOpts === 'string'){
1434 this.addOption(this.mapConfOpts);
1438 addOption : function(mc){
1440 var mcf = this.getMap()[mc];
1441 if (typeof mcf === 'function') {
1442 this.getMap()[mc]();
1446 geoCodeLookup : function(addr) {
1448 this.geocoder = new GClientGeocoder();
1449 this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));
1452 addAddressToMap : function(response) {
1454 if (!response || response.Status.code != 200) {
1455 Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
1457 place = response.Placemark[0];
1458 addressinfo = place.AddressDetails;
1459 accuracy = addressinfo.Accuracy;
1460 if (accuracy === 0) {
1461 Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
1464 Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
1466 point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
1467 if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
1468 this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
1478 Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.namespace('Ext.ux.grid');
1481 * @class Ext.ux.grid.GridFilters
1482 * @extends Ext.util.Observable
1483 * <p>GridFilter is a plugin (<code>ptype='gridfilters'</code>) for grids that
1484 * allow for a slightly more robust representation of filtering than what is
1485 * provided by the default store.</p>
1486 * <p>Filtering is adjusted by the user using the grid's column header menu
1487 * (this menu can be disabled through configuration). Through this menu users
1488 * can configure, enable, and disable filters for each column.</p>
1489 * <p><b><u>Features:</u></b></p>
1490 * <div class="mdetail-params"><ul>
1491 * <li><b>Filtering implementations</b> :
1492 * <div class="sub-desc">
1493 * Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can
1494 * be backed by a Ext.data.Store), and Boolean. Additional custom filter types
1495 * and menus are easily created by extending Ext.ux.grid.filter.Filter.
1497 * <li><b>Graphical indicators</b> :
1498 * <div class="sub-desc">
1499 * Columns that are filtered have {@link #filterCls a configurable css class}
1500 * applied to the column headers.
1502 * <li><b>Paging</b> :
1503 * <div class="sub-desc">
1504 * If specified as a plugin to the grid's configured PagingToolbar, the current page
1505 * will be reset to page 1 whenever you update the filters.
1507 * <li><b>Automatic Reconfiguration</b> :
1508 * <div class="sub-desc">
1509 * Filters automatically reconfigure when the grid 'reconfigure' event fires.
1511 * <li><b>Stateful</b> :
1512 * Filter information will be persisted across page loads by specifying a
1513 * <code>stateId</code> in the Grid configuration.
1514 * <div class="sub-desc">
1515 * The filter collection binds to the
1516 * <code>{@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}</code>
1517 * and <code>{@link Ext.grid.GridPanel#beforestatesave beforestatesave}</code>
1518 * events in order to be stateful.
1520 * <li><b>Grid Changes</b> :
1521 * <div class="sub-desc"><ul>
1522 * <li>A <code>filters</code> <i>property</i> is added to the grid pointing to
1524 * <li>A <code>filterupdate</code> <i>event</i> is added to the grid and is
1525 * fired upon onStateChange completion.</li>
1527 * <li><b>Server side code examples</b> :
1528 * <div class="sub-desc"><ul>
1529 * <li><a href="http://www.vinylfox.com/extjs/grid-filter-php-backend-code.php">PHP</a> - (Thanks VinylFox)</li>
1530 * <li><a href="http://extjs.com/forum/showthread.php?p=77326#post77326">Ruby on Rails</a> - (Thanks Zyclops)</li>
1531 * <li><a href="http://extjs.com/forum/showthread.php?p=176596#post176596">Ruby on Rails</a> - (Thanks Rotomaul)</li>
1532 * <li><a href="http://www.debatablybeta.com/posts/using-extjss-grid-filtering-with-django/">Python</a> - (Thanks Matt)</li>
1533 * <li><a href="http://mcantrell.wordpress.com/2008/08/22/extjs-grids-and-grails/">Grails</a> - (Thanks Mike)</li>
1536 * <p><b><u>Example usage:</u></b></p>
1538 var store = new Ext.data.GroupingStore({
1542 var filters = new Ext.ux.grid.GridFilters({
1543 autoReload: false, //don't reload automatically
1544 local: true, //only filter locally
1545 // filters may be configured through the plugin,
1546 // or in the column definition within the column model configuration
1558 dataIndex: 'dateAdded'
1562 options: ['extra small', 'small', 'medium', 'large', 'extra large'],
1566 dataIndex: 'visible'
1569 var cm = new Ext.grid.ColumnModel([{
1573 var grid = new Ext.grid.GridPanel({
1576 view: new Ext.grid.GroupingView(),
1580 bbar: new Ext.PagingToolbar({
1583 plugins: [filters] //reset page to page 1 if filters change
1587 store.load({params: {start: 0, limit: 15}});
1589 // a filters property is added to the grid
1593 Ext.ux.grid.GridFilters = Ext.extend(Ext.util.Observable, {
1595 * @cfg {Boolean} autoReload
1596 * Defaults to true, reloading the datasource when a filter change happens.
1597 * Set this to false to prevent the datastore from being reloaded if there
1598 * are changes to the filters. See <code>{@link updateBuffer}</code>.
1602 * @cfg {Boolean} encode
1603 * Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to
1604 * encode the filter query parameter sent with a remote request.
1605 * Defaults to false.
1608 * @cfg {Array} filters
1609 * An Array of filters config objects. Refer to each filter type class for
1610 * configuration details specific to each filter type. Filters for Strings,
1611 * Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters
1615 * @cfg {String} filterCls
1616 * The css class to be applied to column headers with active filters.
1617 * Defaults to <tt>'ux-filterd-column'</tt>.
1619 filterCls : 'ux-filtered-column',
1621 * @cfg {Boolean} local
1622 * <tt>true</tt> to use Ext.data.Store filter functions (local filtering)
1623 * instead of the default (<tt>false</tt>) server side filtering.
1627 * @cfg {String} menuFilterText
1628 * defaults to <tt>'Filters'</tt>.
1630 menuFilterText : 'Filters',
1632 * @cfg {String} paramPrefix
1633 * The url parameter prefix for the filters.
1634 * Defaults to <tt>'filter'</tt>.
1636 paramPrefix : 'filter',
1638 * @cfg {Boolean} showMenu
1639 * Defaults to true, including a filter submenu in the default header menu.
1643 * @cfg {String} stateId
1644 * Name of the value to be used to store state information.
1646 stateId : undefined,
1648 * @cfg {Integer} updateBuffer
1649 * Number of milliseconds to defer store updates since the last filter change.
1654 constructor : function (config) {
1655 config = config || {};
1656 this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);
1657 this.filters = new Ext.util.MixedCollection();
1658 this.filters.getKey = function (o) {
1659 return o ? o.dataIndex : null;
1661 this.addFilters(config.filters);
1662 delete config.filters;
1663 Ext.apply(this, config);
1667 init : function (grid) {
1668 if (grid instanceof Ext.grid.GridPanel) {
1671 this.bindStore(this.grid.getStore(), true);
1672 // assumes no filters were passed in the constructor, so try and use ones from the colModel
1673 if(this.filters.getCount() == 0){
1674 this.addFilters(this.grid.getColumnModel());
1677 this.grid.filters = this;
1679 this.grid.addEvents({'filterupdate': true});
1683 beforestaterestore: this.applyState,
1684 beforestatesave: this.saveState,
1685 beforedestroy: this.destroy,
1686 reconfigure: this.onReconfigure
1695 render: this.onRender
1699 } else if (grid instanceof Ext.PagingToolbar) {
1700 this.toolbar = grid;
1706 * Handler for the grid's beforestaterestore event (fires before the state of the
1707 * grid is restored).
1708 * @param {Object} grid The grid object
1709 * @param {Object} state The hash of state values returned from the StateProvider.
1711 applyState : function (grid, state) {
1713 this.applyingState = true;
1714 this.clearFilters();
1715 if (state.filters) {
1716 for (key in state.filters) {
1717 filter = this.filters.get(key);
1719 filter.setValue(state.filters[key]);
1720 filter.setActive(true);
1724 this.deferredUpdate.cancel();
1728 delete this.applyingState;
1729 delete state.filters;
1733 * Saves the state of all active filters
1734 * @param {Object} grid
1735 * @param {Object} state
1738 saveState : function (grid, state) {
1740 this.filters.each(function (filter) {
1741 if (filter.active) {
1742 filters[filter.dataIndex] = filter.getValue();
1745 return (state.filters = filters);
1750 * Handler called when the grid is rendered
1752 onRender : function () {
1753 this.grid.getView().on('refresh', this.onRefresh, this);
1759 * Handler called by the grid 'beforedestroy' event
1761 destroy : function () {
1763 this.purgeListeners();
1765 if(this.filterMenu){
1766 Ext.menu.MenuMgr.unregister(this.filterMenu);
1767 this.filterMenu.destroy();
1768 this.filterMenu = this.menu.menu = null;
1773 * Remove all filters, permanently destroying them.
1775 removeAll : function () {
1777 Ext.destroy.apply(Ext, this.filters.items);
1778 // remove all items from the collection
1779 this.filters.clear();
1785 * Changes the data store bound to this view and refreshes it.
1786 * @param {Store} store The store to bind to this view
1788 bindStore : function(store, initial){
1789 if(!initial && this.store){
1791 store.un('load', this.onLoad, this);
1793 store.un('beforeload', this.onBeforeLoad, this);
1798 store.on('load', this.onLoad, this);
1800 store.on('beforeload', this.onBeforeLoad, this);
1808 * Handler called when the grid reconfigure event fires
1810 onReconfigure : function () {
1811 this.bindStore(this.grid.getStore());
1812 this.store.clearFilter();
1814 this.addFilters(this.grid.getColumnModel());
1815 this.updateColumnHeadings();
1818 createMenu : function () {
1819 var view = this.grid.getView(),
1822 if (this.showMenu && hmenu) {
1824 this.sep = hmenu.addSeparator();
1825 this.filterMenu = new Ext.menu.Menu({
1826 id: this.grid.id + '-filters-menu'
1828 this.menu = hmenu.add({
1831 text: this.menuFilterText,
1832 menu: this.filterMenu
1837 checkchange: this.onCheckChange,
1838 beforecheckchange: this.onBeforeCheck
1840 hmenu.on('beforeshow', this.onMenu, this);
1842 this.updateColumnHeadings();
1847 * Get the filter menu from the filters MixedCollection based on the clicked header
1849 getMenuFilter : function () {
1850 var view = this.grid.getView();
1851 if (!view || view.hdCtxIndex === undefined) {
1854 return this.filters.get(
1855 view.cm.config[view.hdCtxIndex].dataIndex
1861 * Handler called by the grid's hmenu beforeshow event
1863 onMenu : function (filterMenu) {
1864 var filter = this.getMenuFilter();
1868 TODO: lazy rendering
1870 filter.menu = filter.createMenu();
1873 this.menu.menu = filter.menu;
1874 this.menu.setChecked(filter.active, false);
1875 // disable the menu if filter.disabled explicitly set to true
1876 this.menu.setDisabled(filter.disabled === true);
1879 this.menu.setVisible(filter !== undefined);
1880 this.sep.setVisible(filter !== undefined);
1884 onCheckChange : function (item, value) {
1885 this.getMenuFilter().setActive(value);
1889 onBeforeCheck : function (check, value) {
1890 return !value || this.getMenuFilter().isActivatable();
1895 * Handler for all events on filters.
1896 * @param {String} event Event name
1897 * @param {Object} filter Standard signature of the event before the event is fired
1899 onStateChange : function (event, filter) {
1900 if (event === 'serialize') {
1904 if (filter == this.getMenuFilter()) {
1905 this.menu.setChecked(filter.active, false);
1908 if ((this.autoReload || this.local) && !this.applyingState) {
1909 this.deferredUpdate.delay(this.updateBuffer);
1911 this.updateColumnHeadings();
1913 if (!this.applyingState) {
1914 this.grid.saveState();
1916 this.grid.fireEvent('filterupdate', this, filter);
1921 * Handler for store's beforeload event when configured for remote filtering
1922 * @param {Object} store
1923 * @param {Object} options
1925 onBeforeLoad : function (store, options) {
1926 options.params = options.params || {};
1927 this.cleanParams(options.params);
1928 var params = this.buildQuery(this.getFilterData());
1929 Ext.apply(options.params, params);
1934 * Handler for store's load event when configured for local filtering
1935 * @param {Object} store
1936 * @param {Object} options
1938 onLoad : function (store, options) {
1939 store.filterBy(this.getRecordFilter());
1944 * Handler called when the grid's view is refreshed
1946 onRefresh : function () {
1947 this.updateColumnHeadings();
1951 * Update the styles for the header row based on the active filters
1953 updateColumnHeadings : function () {
1954 var view = this.grid.getView(),
1957 for (i = 0, len = view.cm.config.length; i < len; i++) {
1958 filter = this.getFilter(view.cm.config[i].dataIndex);
1959 Ext.fly(view.getHeaderCell(i))[filter && filter.active ? 'addClass' : 'removeClass'](this.filterCls);
1965 reload : function () {
1967 this.grid.store.clearFilter(true);
1968 this.grid.store.filterBy(this.getRecordFilter());
1971 store = this.grid.store;
1972 this.deferredUpdate.cancel();
1974 start = store.paramNames.start;
1975 if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {
1976 store.lastOptions.params[start] = 0;
1984 * Method factory that generates a record validator for the filters active at the time
1988 getRecordFilter : function () {
1990 this.filters.each(function (filter) {
1991 if (filter.active) {
1997 return function (record) {
1998 for (i = 0; i < len; i++) {
1999 if (!f[i].validateRecord(record)) {
2008 * Adds a filter to the collection and observes it for state change.
2009 * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.
2010 * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.
2012 addFilter : function (config) {
2013 var Cls = this.getFilterClass(config.type),
2014 filter = config.menu ? config : (new Cls(config));
2015 this.filters.add(filter);
2017 Ext.util.Observable.capture(filter, this.onStateChange, this);
2022 * Adds filters to the collection.
2023 * @param {Array/Ext.grid.ColumnModel} filters Either an Array of
2024 * filter configuration objects or an Ext.grid.ColumnModel. The columns
2025 * of a passed Ext.grid.ColumnModel will be examined for a <code>filter</code>
2026 * property and, if present, will be used as the filter configuration object.
2028 addFilters : function (filters) {
2030 var i, len, filter, cm = false, dI;
2031 if (filters instanceof Ext.grid.ColumnModel) {
2032 filters = filters.config;
2035 for (i = 0, len = filters.length; i < len; i++) {
2038 dI = filters[i].dataIndex;
2039 filter = filters[i].filter || filters[i].filterable;
2041 filter = (filter === true) ? {} : filter;
2042 Ext.apply(filter, {dataIndex:dI});
2043 // filter type is specified in order of preference:
2044 // filter type specified in config
2045 // type specified in store's field's type config
2046 filter.type = filter.type || this.store.fields.get(dI).type.type;
2049 filter = filters[i];
2051 // if filter config found add filter for the column
2053 this.addFilter(filter);
2060 * Returns a filter for the given dataIndex, if one exists.
2061 * @param {String} dataIndex The dataIndex of the desired filter object.
2062 * @return {Ext.ux.grid.filter.Filter}
2064 getFilter : function (dataIndex) {
2065 return this.filters.get(dataIndex);
2069 * Turns all filters off. This does not clear the configuration information
2070 * (see {@link #removeAll}).
2072 clearFilters : function () {
2073 this.filters.each(function (filter) {
2074 filter.setActive(false);
2079 * Returns an Array of the currently active filters.
2080 * @return {Array} filters Array of the currently active filters.
2082 getFilterData : function () {
2083 var filters = [], i, len;
2085 this.filters.each(function (f) {
2087 var d = [].concat(f.serialize());
2088 for (i = 0, len = d.length; i < len; i++) {
2100 * Function to take the active filters data and build it into a query.
2101 * The format of the query depends on the <code>{@link #encode}</code>
2103 * <div class="mdetail-params"><ul>
2105 * <li><b><tt>false</tt></b> : <i>Default</i>
2106 * <div class="sub-desc">
2107 * Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:
2109 filters[0][field]="someDataIndex"&
2110 filters[0][data][comparison]="someValue1"&
2111 filters[0][data][type]="someValue2"&
2112 filters[0][data][value]="someValue3"&
2115 * <li><b><tt>true</tt></b> :
2116 * <div class="sub-desc">
2117 * JSON encode the filter data
2119 filters[0][field]="someDataIndex"&
2120 filters[0][data][comparison]="someValue1"&
2121 filters[0][data][type]="someValue2"&
2122 filters[0][data][value]="someValue3"&
2126 * Override this method to customize the format of the filter query for remote requests.
2127 * @param {Array} filters A collection of objects representing active filters and their configuration.
2128 * Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured
2129 * to be unique as any one filter may be a composite of more basic filters for the same dataIndex.
2130 * @return {Object} Query keys and values
2132 buildQuery : function (filters) {
2133 var p = {}, i, f, root, dataPrefix, key, tmp,
2134 len = filters.length;
2137 for (i = 0; i < len; i++) {
2139 root = [this.paramPrefix, '[', i, ']'].join('');
2140 p[root + '[field]'] = f.field;
2142 dataPrefix = root + '[data]';
2143 for (key in f.data) {
2144 p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];
2149 for (i = 0; i < len; i++) {
2157 // only build if there is active filter
2158 if (tmp.length > 0){
2159 p[this.paramPrefix] = Ext.util.JSON.encode(tmp);
2166 * Removes filter related query parameters from the provided object.
2167 * @param {Object} p Query parameters that may contain filter related fields.
2169 cleanParams : function (p) {
2170 // if encoding just delete the property
2172 delete p[this.paramPrefix];
2173 // otherwise scrub the object of filter data
2176 regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');
2178 if (regex.test(key)) {
2186 * Function for locating filter classes, overwrite this with your favorite
2187 * loader to provide dynamic filter loading.
2188 * @param {String} type The type of filter to load ('Filter' is automatically
2189 * appended to the passed type; eg, 'string' becomes 'StringFilter').
2190 * @return {Class} The Ext.ux.grid.filter.Class
2192 getFilterClass : function (type) {
2193 // map the supported Ext.data.Field type values into a supported filter
2206 return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];
2211 Ext.preg('gridfilters', Ext.ux.grid.GridFilters);
2212 Ext.namespace('Ext.ux.grid.filter');
2215 * @class Ext.ux.grid.filter.Filter
2216 * @extends Ext.util.Observable
2217 * Abstract base class for filter implementations.
2219 Ext.ux.grid.filter.Filter = Ext.extend(Ext.util.Observable, {
2221 * @cfg {Boolean} active
2222 * Indicates the initial status of the filter (defaults to false).
2226 * True if this filter is active. Use setActive() to alter after configuration.
2231 * @cfg {String} dataIndex
2232 * The {@link Ext.data.Store} dataIndex of the field this filter represents.
2233 * The dataIndex does not actually have to exist in the store.
2237 * The filter configuration menu that will be installed into the filter submenu of a column menu.
2238 * @type Ext.menu.Menu
2243 * @cfg {Number} updateBuffer
2244 * Number of milliseconds to wait after user interaction to fire an update. Only supported
2245 * by filters: 'list', 'numeric', and 'string'. Defaults to 500.
2249 constructor : function (config) {
2250 Ext.apply(this, config);
2255 * Fires when an inactive filter becomes active
2256 * @param {Ext.ux.grid.filter.Filter} this
2261 * Fires when an active filter becomes inactive
2262 * @param {Ext.ux.grid.filter.Filter} this
2267 * Fires after the serialization process. Use this to attach additional parameters to serialization
2268 * data before it is encoded and sent to the server.
2269 * @param {Array/Object} data A map or collection of maps representing the current filter configuration.
2270 * @param {Ext.ux.grid.filter.Filter} filter The filter being serialized.
2275 * Fires when a filter configuration has changed
2276 * @param {Ext.ux.grid.filter.Filter} this The filter object.
2280 Ext.ux.grid.filter.Filter.superclass.constructor.call(this);
2282 this.menu = new Ext.menu.Menu();
2284 if(config && config.value){
2285 this.setValue(config.value);
2286 this.setActive(config.active !== false, true);
2287 delete config.value;
2292 * Destroys this filter by purging any event listeners, and removing any menus.
2294 destroy : function(){
2296 this.menu.destroy();
2298 this.purgeListeners();
2302 * Template method to be implemented by all subclasses that is to
2303 * initialize the filter and install required menu items.
2304 * Defaults to Ext.emptyFn.
2309 * Template method to be implemented by all subclasses that is to
2310 * get and return the value of the filter.
2311 * Defaults to Ext.emptyFn.
2312 * @return {Object} The 'serialized' form of this filter
2313 * @methodOf Ext.ux.grid.filter.Filter
2315 getValue : Ext.emptyFn,
2318 * Template method to be implemented by all subclasses that is to
2319 * set the value of the filter and fire the 'update' event.
2320 * Defaults to Ext.emptyFn.
2321 * @param {Object} data The value to set the filter
2322 * @methodOf Ext.ux.grid.filter.Filter
2324 setValue : Ext.emptyFn,
2327 * Template method to be implemented by all subclasses that is to
2328 * return <tt>true</tt> if the filter has enough configuration information to be activated.
2329 * Defaults to <tt>return true</tt>.
2332 isActivatable : function(){
2337 * Template method to be implemented by all subclasses that is to
2338 * get and return serialized filter data for transmission to the server.
2339 * Defaults to Ext.emptyFn.
2341 getSerialArgs : Ext.emptyFn,
2344 * Template method to be implemented by all subclasses that is to
2345 * validates the provided Ext.data.Record against the filters configuration.
2346 * Defaults to <tt>return true</tt>.
2347 * @param {Ext.data.Record} record The record to validate
2348 * @return {Boolean} true if the record is valid within the bounds
2349 * of the filter, false otherwise.
2351 validateRecord : function(){
2356 * Returns the serialized filter data for transmission to the server
2357 * and fires the 'serialize' event.
2358 * @return {Object/Array} An object or collection of objects containing
2359 * key value pairs representing the current configuration of the filter.
2360 * @methodOf Ext.ux.grid.filter.Filter
2362 serialize : function(){
2363 var args = this.getSerialArgs();
2364 this.fireEvent('serialize', args, this);
2369 fireUpdate : function(){
2371 this.fireEvent('update', this);
2373 this.setActive(this.isActivatable());
2377 * Sets the status of the filter and fires the appropriate events.
2378 * @param {Boolean} active The new filter state.
2379 * @param {Boolean} suppressEvent True to prevent events from being fired.
2380 * @methodOf Ext.ux.grid.filter.Filter
2382 setActive : function(active, suppressEvent){
2383 if(this.active != active){
2384 this.active = active;
2385 if (suppressEvent !== true) {
2386 this.fireEvent(active ? 'activate' : 'deactivate', this);
2391 * @class Ext.ux.grid.filter.BooleanFilter
2392 * @extends Ext.ux.grid.filter.Filter
2393 * Boolean filters use unique radio group IDs (so you can have more than one!)
2394 * <p><b><u>Example Usage:</u></b></p>
2396 var filters = new Ext.ux.grid.GridFilters({
2401 dataIndex: 'visible'
2404 defaultValue: null, // leave unselected (false selected by default)
2405 yesText: 'Yes', // default
2406 noText: 'No' // default
2411 Ext.ux.grid.filter.BooleanFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
2413 * @cfg {Boolean} defaultValue
2414 * Set this to null if you do not want either option to be checked by default. Defaults to false.
2416 defaultValue : false,
2418 * @cfg {String} yesText
2419 * Defaults to 'Yes'.
2423 * @cfg {String} noText
2430 * Template method that is to initialize the filter and install required menu items.
2432 init : function (config) {
2435 new Ext.menu.CheckItem({text: this.yesText, group: gId, checked: this.defaultValue === true}),
2436 new Ext.menu.CheckItem({text: this.noText, group: gId, checked: this.defaultValue === false})];
2438 this.menu.add(this.options[0], this.options[1]);
2440 for(var i=0; i<this.options.length; i++){
2441 this.options[i].on('click', this.fireUpdate, this);
2442 this.options[i].on('checkchange', this.fireUpdate, this);
2448 * Template method that is to get and return the value of the filter.
2449 * @return {String} The value of this filter
2451 getValue : function () {
2452 return this.options[0].checked;
2457 * Template method that is to set the value of the filter.
2458 * @param {Object} value The value to set the filter
2460 setValue : function (value) {
2461 this.options[value ? 0 : 1].setChecked(true);
2466 * Template method that is to get and return serialized filter data for
2467 * transmission to the server.
2468 * @return {Object/Array} An object or collection of objects containing
2469 * key value pairs representing the current configuration of the filter.
2471 getSerialArgs : function () {
2472 var args = {type: 'boolean', value: this.getValue()};
2477 * Template method that is to validate the provided Ext.data.Record
2478 * against the filters configuration.
2479 * @param {Ext.data.Record} record The record to validate
2480 * @return {Boolean} true if the record is valid within the bounds
2481 * of the filter, false otherwise.
2483 validateRecord : function (record) {
2484 return record.get(this.dataIndex) == this.getValue();
2487 * @class Ext.ux.grid.filter.DateFilter
2488 * @extends Ext.ux.grid.filter.Filter
2489 * Filter by a configurable Ext.menu.DateMenu
2490 * <p><b><u>Example Usage:</u></b></p>
2492 var filters = new Ext.ux.grid.GridFilters({
2497 dataIndex: 'dateAdded',
2500 dateFormat: 'm/d/Y', // default
2501 beforeText: 'Before', // default
2502 afterText: 'After', // default
2503 onText: 'On', // default
2505 // any DateMenu configs
2508 active: true // default is false
2513 Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
2515 * @cfg {String} afterText
2516 * Defaults to 'After'.
2518 afterText : 'After',
2520 * @cfg {String} beforeText
2521 * Defaults to 'Before'.
2523 beforeText : 'Before',
2525 * @cfg {Object} compareMap
2526 * Map for assigning the comparison values used in serialization.
2534 * @cfg {String} dateFormat
2535 * The date format to return when using getValue.
2536 * Defaults to 'm/d/Y'.
2538 dateFormat : 'm/d/Y',
2541 * @cfg {Date} maxDate
2542 * Allowable date as passed to the Ext.DatePicker
2543 * Defaults to undefined.
2546 * @cfg {Date} minDate
2547 * Allowable date as passed to the Ext.DatePicker
2548 * Defaults to undefined.
2551 * @cfg {Array} menuItems
2552 * The items to be shown in this menu
2554 * menuItems : ['before', 'after', '-', 'on'],
2557 menuItems : ['before', 'after', '-', 'on'],
2560 * @cfg {Object} menuItemCfgs
2561 * Default configuration options for each menu item
2564 selectOnFocus: true,
2569 * @cfg {String} onText
2575 * @cfg {Object} pickerOpts
2576 * Configuration options for the date picker associated with each field.
2582 * Template method that is to initialize the filter and install required menu items.
2584 init : function (config) {
2585 var menuCfg, i, len, item, cfg, Cls;
2587 menuCfg = Ext.apply(this.pickerOpts, {
2588 minDate: this.minDate,
2589 maxDate: this.maxDate,
2590 format: this.dateFormat,
2593 select: this.onMenuSelect
2598 for (i = 0, len = this.menuItems.length; i < len; i++) {
2599 item = this.menuItems[i];
2602 itemId: 'range-' + item,
2603 text: this[item + 'Text'],
2604 menu: new Ext.menu.DateMenu(
2605 Ext.apply(menuCfg, {
2611 checkchange: this.onCheckChange
2614 Cls = Ext.menu.CheckItem;
2615 item = this.fields[item] = new Cls(cfg);
2618 this.menu.add(item);
2622 onCheckChange : function () {
2623 this.setActive(this.isActivatable());
2624 this.fireEvent('update', this);
2629 * Handler method called when there is a keyup event on an input
2630 * item of this menu.
2632 onInputKeyUp : function (field, e) {
2634 if (k == e.RETURN && field.isValid()) {
2636 this.menu.hide(true);
2642 * Handler for when the menu for a field fires the 'select' event
2643 * @param {Object} date
2644 * @param {Object} menuItem
2645 * @param {Object} value
2646 * @param {Object} picker
2648 onMenuSelect : function (menuItem, value, picker) {
2649 var fields = this.fields,
2650 field = this.fields[menuItem.itemId];
2652 field.setChecked(true);
2654 if (field == fields.on) {
2655 fields.before.setChecked(false, true);
2656 fields.after.setChecked(false, true);
2658 fields.on.setChecked(false, true);
2659 if (field == fields.after && fields.before.menu.picker.value < value) {
2660 fields.before.setChecked(false, true);
2661 } else if (field == fields.before && fields.after.menu.picker.value > value) {
2662 fields.after.setChecked(false, true);
2665 this.fireEvent('update', this);
2670 * Template method that is to get and return the value of the filter.
2671 * @return {String} The value of this filter
2673 getValue : function () {
2674 var key, result = {};
2675 for (key in this.fields) {
2676 if (this.fields[key].checked) {
2677 result[key] = this.fields[key].menu.picker.getValue();
2685 * Template method that is to set the value of the filter.
2686 * @param {Object} value The value to set the filter
2687 * @param {Boolean} preserve true to preserve the checked status
2688 * of the other fields. Defaults to false, unchecking the
2691 setValue : function (value, preserve) {
2693 for (key in this.fields) {
2695 this.fields[key].menu.picker.setValue(value[key]);
2696 this.fields[key].setChecked(true);
2697 } else if (!preserve) {
2698 this.fields[key].setChecked(false);
2701 this.fireEvent('update', this);
2706 * Template method that is to return <tt>true</tt> if the filter
2707 * has enough configuration information to be activated.
2710 isActivatable : function () {
2712 for (key in this.fields) {
2713 if (this.fields[key].checked) {
2722 * Template method that is to get and return serialized filter data for
2723 * transmission to the server.
2724 * @return {Object/Array} An object or collection of objects containing
2725 * key value pairs representing the current configuration of the filter.
2727 getSerialArgs : function () {
2729 for (var key in this.fields) {
2730 if(this.fields[key].checked){
2733 comparison: this.compareMap[key],
2734 value: this.getFieldValue(key).format(this.dateFormat)
2742 * Get and return the date menu picker value
2743 * @param {String} item The field identifier ('before', 'after', 'on')
2744 * @return {Date} Gets the current selected value of the date field
2746 getFieldValue : function(item){
2747 return this.fields[item].menu.picker.getValue();
2751 * Gets the menu picker associated with the passed field
2752 * @param {String} item The field identifier ('before', 'after', 'on')
2753 * @return {Object} The menu picker
2755 getPicker : function(item){
2756 return this.fields[item].menu.picker;
2760 * Template method that is to validate the provided Ext.data.Record
2761 * against the filters configuration.
2762 * @param {Ext.data.Record} record The record to validate
2763 * @return {Boolean} true if the record is valid within the bounds
2764 * of the filter, false otherwise.
2766 validateRecord : function (record) {
2769 val = record.get(this.dataIndex);
2771 if(!Ext.isDate(val)){
2774 val = val.clearTime(true).getTime();
2776 for (key in this.fields) {
2777 if (this.fields[key].checked) {
2778 pickerValue = this.getFieldValue(key).clearTime(true).getTime();
2779 if (key == 'before' && pickerValue <= val) {
2782 if (key == 'after' && pickerValue >= val) {
2785 if (key == 'on' && pickerValue != val) {
2793 * @class Ext.ux.grid.filter.ListFilter
2794 * @extends Ext.ux.grid.filter.Filter
2795 * <p>List filters are able to be preloaded/backed by an Ext.data.Store to load
2796 * their options the first time they are shown. ListFilter utilizes the
2797 * {@link Ext.ux.menu.ListMenu} component.</p>
2798 * <p>Although not shown here, this class accepts all configuration options
2799 * for {@link Ext.ux.menu.ListMenu}.</p>
2801 * <p><b><u>Example Usage:</u></b></p>
2803 var filters = new Ext.ux.grid.GridFilters({
2809 // options will be used as data to implicitly creates an ArrayStore
2810 options: ['extra small', 'small', 'medium', 'large', 'extra large']
2816 Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
2819 * @cfg {Array} options
2820 * <p><code>data</code> to be used to implicitly create a data store
2821 * to back this list when the data source is <b>local</b>. If the
2822 * data for the list is remote, use the <code>{@link #store}</code>
2823 * config instead.</p>
2824 * <br><p>Each item within the provided array may be in one of the
2825 * following formats:</p>
2826 * <div class="mdetail-params"><ul>
2827 * <li><b>Array</b> :
2830 [11, 'extra small'],
2838 * <li><b>Object</b> :
2840 labelField: 'name', // override default of 'text'
2842 {id: 11, name:'extra small'},
2843 {id: 18, name:'small'},
2844 {id: 22, name:'medium'},
2845 {id: 35, name:'large'},
2846 {id: 44, name:'extra large'}
2850 * <li><b>String</b> :
2852 * options: ['extra small', 'small', 'medium', 'large', 'extra large']
2857 * @cfg {Boolean} phpMode
2858 * <p>Adjust the format of this filter. Defaults to false.</p>
2859 * <br><p>When GridFilters <code>@cfg encode = false</code> (default):</p>
2861 // phpMode == false (default):
2862 filter[0][data][type] list
2863 filter[0][data][value] value1
2864 filter[0][data][value] value2
2865 filter[0][field] prod
2868 filter[0][data][type] list
2869 filter[0][data][value] value1, value2
2870 filter[0][field] prod
2872 * When GridFilters <code>@cfg encode = true</code>:
2874 // phpMode == false (default):
2875 filter : [{"type":"list","value":["small","medium"],"field":"size"}]
2878 filter : [{"type":"list","value":"small,medium","field":"size"}]
2883 * @cfg {Ext.data.Store} store
2884 * The {@link Ext.data.Store} this list should use as its data source
2885 * when the data source is <b>remote</b>. If the data for the list
2886 * is local, use the <code>{@link #options}</code> config instead.
2891 * Template method that is to initialize the filter and install required menu items.
2892 * @param {Object} config
2894 init : function (config) {
2895 this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);
2897 // if a menu already existed, do clean up first
2899 this.menu.destroy();
2901 this.menu = new Ext.ux.menu.ListMenu(config);
2902 this.menu.on('checkchange', this.onCheckChange, this);
2907 * Template method that is to get and return the value of the filter.
2908 * @return {String} The value of this filter
2910 getValue : function () {
2911 return this.menu.getSelected();
2915 * Template method that is to set the value of the filter.
2916 * @param {Object} value The value to set the filter
2918 setValue : function (value) {
2919 this.menu.setSelected(value);
2920 this.fireEvent('update', this);
2925 * Template method that is to return <tt>true</tt> if the filter
2926 * has enough configuration information to be activated.
2929 isActivatable : function () {
2930 return this.getValue().length > 0;
2935 * Template method that is to get and return serialized filter data for
2936 * transmission to the server.
2937 * @return {Object/Array} An object or collection of objects containing
2938 * key value pairs representing the current configuration of the filter.
2940 getSerialArgs : function () {
2941 var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};
2946 onCheckChange : function(){
2947 this.dt.delay(this.updateBuffer);
2952 * Template method that is to validate the provided Ext.data.Record
2953 * against the filters configuration.
2954 * @param {Ext.data.Record} record The record to validate
2955 * @return {Boolean} true if the record is valid within the bounds
2956 * of the filter, false otherwise.
2958 validateRecord : function (record) {
2959 return this.getValue().indexOf(record.get(this.dataIndex)) > -1;
2962 * @class Ext.ux.grid.filter.NumericFilter
2963 * @extends Ext.ux.grid.filter.Filter
2964 * Filters using an Ext.ux.menu.RangeMenu.
2965 * <p><b><u>Example Usage:</u></b></p>
2967 var filters = new Ext.ux.grid.GridFilters({
2976 Ext.ux.grid.filter.NumericFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
2979 * @cfg {Object} fieldCls
2980 * The Class to use to construct each field item within this menu
2982 * fieldCls : Ext.form.NumberField
2985 fieldCls : Ext.form.NumberField,
2987 * @cfg {Object} fieldCfg
2988 * The default configuration options for any field item unless superseded
2989 * by the <code>{@link #fields}</code> configuration.
3001 * @cfg {Object} fields
3002 * The field items may be configured individually
3003 * Defaults to <tt>undefined</tt>.
3007 gt: { // override fieldCfg options
3009 fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}
3015 * @cfg {Object} iconCls
3016 * The iconCls to be applied to each comparator field item.
3019 gt : 'ux-rangemenu-gt',
3020 lt : 'ux-rangemenu-lt',
3021 eq : 'ux-rangemenu-eq'
3026 gt : 'ux-rangemenu-gt',
3027 lt : 'ux-rangemenu-lt',
3028 eq : 'ux-rangemenu-eq'
3032 * @cfg {Object} menuItemCfgs
3033 * Default configuration options for each menu item
3036 emptyText: 'Enter Filter Text...',
3037 selectOnFocus: true,
3043 emptyText: 'Enter Filter Text...',
3044 selectOnFocus: true,
3049 * @cfg {Array} menuItems
3050 * The items to be shown in this menu. Items are added to the menu
3051 * according to their position within this array. Defaults to:<pre>
3052 * menuItems : ['lt','gt','-','eq']
3055 menuItems : ['lt', 'gt', '-', 'eq'],
3059 * Template method that is to initialize the filter and install required menu items.
3061 init : function (config) {
3062 // if a menu already existed, do clean up first
3064 this.menu.destroy();
3066 this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, {
3067 // pass along filter configs to the menu
3068 fieldCfg : this.fieldCfg || {},
3069 fieldCls : this.fieldCls,
3070 fields : this.fields || {},
3071 iconCls: this.iconCls,
3072 menuItemCfgs: this.menuItemCfgs,
3073 menuItems: this.menuItems,
3074 updateBuffer: this.updateBuffer
3076 // relay the event fired by the menu
3077 this.menu.on('update', this.fireUpdate, this);
3082 * Template method that is to get and return the value of the filter.
3083 * @return {String} The value of this filter
3085 getValue : function () {
3086 return this.menu.getValue();
3091 * Template method that is to set the value of the filter.
3092 * @param {Object} value The value to set the filter
3094 setValue : function (value) {
3095 this.menu.setValue(value);
3100 * Template method that is to return <tt>true</tt> if the filter
3101 * has enough configuration information to be activated.
3104 isActivatable : function () {
3105 var values = this.getValue();
3106 for (key in values) {
3107 if (values[key] !== undefined) {
3116 * Template method that is to get and return serialized filter data for
3117 * transmission to the server.
3118 * @return {Object/Array} An object or collection of objects containing
3119 * key value pairs representing the current configuration of the filter.
3121 getSerialArgs : function () {
3124 values = this.menu.getValue();
3125 for (key in values) {
3136 * Template method that is to validate the provided Ext.data.Record
3137 * against the filters configuration.
3138 * @param {Ext.data.Record} record The record to validate
3139 * @return {Boolean} true if the record is valid within the bounds
3140 * of the filter, false otherwise.
3142 validateRecord : function (record) {
3143 var val = record.get(this.dataIndex),
3144 values = this.getValue();
3145 if (values.eq !== undefined && val != values.eq) {
3148 if (values.lt !== undefined && val >= values.lt) {
3151 if (values.gt !== undefined && val <= values.gt) {
3157 * @class Ext.ux.grid.filter.StringFilter
3158 * @extends Ext.ux.grid.filter.Filter
3159 * Filter by a configurable Ext.form.TextField
3160 * <p><b><u>Example Usage:</u></b></p>
3162 var filters = new Ext.ux.grid.GridFilters({
3171 active: true, // default is false
3172 iconCls: 'ux-gridfilter-text-icon' // default
3173 // any Ext.form.TextField configs accepted
3178 Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
3181 * @cfg {String} iconCls
3182 * The iconCls to be applied to the menu item.
3183 * Defaults to <tt>'ux-gridfilter-text-icon'</tt>.
3185 iconCls : 'ux-gridfilter-text-icon',
3187 emptyText: 'Enter Filter Text...',
3188 selectOnFocus: true,
3193 * Template method that is to initialize the filter and install required menu items.
3195 init : function (config) {
3196 Ext.applyIf(config, {
3197 enableKeyEvents: true,
3198 iconCls: this.iconCls,
3201 keyup: this.onInputKeyUp
3205 this.inputItem = new Ext.form.TextField(config);
3206 this.menu.add(this.inputItem);
3207 this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
3212 * Template method that is to get and return the value of the filter.
3213 * @return {String} The value of this filter
3215 getValue : function () {
3216 return this.inputItem.getValue();
3221 * Template method that is to set the value of the filter.
3222 * @param {Object} value The value to set the filter
3224 setValue : function (value) {
3225 this.inputItem.setValue(value);
3226 this.fireEvent('update', this);
3231 * Template method that is to return <tt>true</tt> if the filter
3232 * has enough configuration information to be activated.
3235 isActivatable : function () {
3236 return this.inputItem.getValue().length > 0;
3241 * Template method that is to get and return serialized filter data for
3242 * transmission to the server.
3243 * @return {Object/Array} An object or collection of objects containing
3244 * key value pairs representing the current configuration of the filter.
3246 getSerialArgs : function () {
3247 return {type: 'string', value: this.getValue()};
3251 * Template method that is to validate the provided Ext.data.Record
3252 * against the filters configuration.
3253 * @param {Ext.data.Record} record The record to validate
3254 * @return {Boolean} true if the record is valid within the bounds
3255 * of the filter, false otherwise.
3257 validateRecord : function (record) {
3258 var val = record.get(this.dataIndex);
3260 if(typeof val != 'string') {
3261 return (this.getValue().length === 0);
3264 return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
3269 * Handler method called when there is a keyup event on this.inputItem
3271 onInputKeyUp : function (field, e) {
3273 if (k == e.RETURN && field.isValid()) {
3275 this.menu.hide(true);
3278 // restart the timer
3279 this.updateTask.delay(this.updateBuffer);
3282 Ext.namespace('Ext.ux.menu');
3285 * @class Ext.ux.menu.ListMenu
3286 * @extends Ext.menu.Menu
3287 * This is a supporting class for {@link Ext.ux.grid.filter.ListFilter}.
3288 * Although not listed as configuration options for this class, this class
3289 * also accepts all configuration options from {@link Ext.ux.grid.filter.ListFilter}.
3291 Ext.ux.menu.ListMenu = Ext.extend(Ext.menu.Menu, {
3293 * @cfg {String} labelField
3294 * Defaults to 'text'.
3296 labelField : 'text',
3298 * @cfg {String} paramPrefix
3299 * Defaults to 'Loading...'.
3301 loadingText : 'Loading...',
3303 * @cfg {Boolean} loadOnShow
3308 * @cfg {Boolean} single
3309 * Specify true to group all items in this list into a single-select
3310 * radio button group. Defaults to false.
3314 constructor : function (cfg) {
3318 * @event checkchange
3319 * Fires when there is a change in checked items from this list
3320 * @param {Object} item Ext.menu.CheckItem
3321 * @param {Object} checked The checked value that was set
3326 Ext.ux.menu.ListMenu.superclass.constructor.call(this, cfg = cfg || {});
3328 if(!cfg.store && cfg.options){
3330 for(var i=0, len=cfg.options.length; i<len; i++){
3331 var value = cfg.options[i];
3332 switch(Ext.type(value)){
3333 case 'array': options.push(value); break;
3334 case 'object': options.push([value.id, value[this.labelField]]); break;
3335 case 'string': options.push([value, value]); break;
3339 this.store = new Ext.data.Store({
3340 reader: new Ext.data.ArrayReader({id: 0}, ['id', this.labelField]),
3343 'load': this.onLoad,
3349 this.add({text: this.loadingText, iconCls: 'loading-indicator'});
3350 this.store.on('load', this.onLoad, this);
3354 destroy : function () {
3356 this.store.destroy();
3358 Ext.ux.menu.ListMenu.superclass.destroy.call(this);
3362 * Lists will initially show a 'loading' item while the data is retrieved from the store.
3363 * In some cases the loaded data will result in a list that goes off the screen to the
3364 * right (as placement calculations were done with the loading item). This adapter will
3365 * allow show to be called with no arguments to show with the previous arguments and
3366 * thus recalculate the width and potentially hang the menu from the left.
3368 show : function () {
3369 var lastArgs = null;
3371 if(arguments.length === 0){
3372 Ext.ux.menu.ListMenu.superclass.show.apply(this, lastArgs);
3374 lastArgs = arguments;
3375 if (this.loadOnShow && !this.loaded) {
3378 Ext.ux.menu.ListMenu.superclass.show.apply(this, arguments);
3384 onLoad : function (store, records) {
3385 var visible = this.isVisible();
3388 this.removeAll(true);
3390 var gid = this.single ? Ext.id() : null;
3391 for(var i=0, len=records.length; i<len; i++){
3392 var item = new Ext.menu.CheckItem({
3393 text: records[i].get(this.labelField),
3395 checked: this.selected.indexOf(records[i].id) > -1,
3396 hideOnClick: false});
3398 item.itemId = records[i].id;
3399 item.on('checkchange', this.checkChange, this);
3409 this.fireEvent('load', this, records);
3413 * Get the selected items.
3414 * @return {Array} selected
3416 getSelected : function () {
3417 return this.selected;
3421 setSelected : function (value) {
3422 value = this.selected = [].concat(value);
3425 this.items.each(function(item){
3426 item.setChecked(false, true);
3427 for (var i = 0, len = value.length; i < len; i++) {
3428 if (item.itemId == value[i]) {
3429 item.setChecked(true, true);
3437 * Handler for the 'checkchange' event from an check item in this menu
3438 * @param {Object} item Ext.menu.CheckItem
3439 * @param {Object} checked The checked value that was set
3441 checkChange : function (item, checked) {
3443 this.items.each(function(item){
3445 value.push(item.itemId);
3448 this.selected = value;
3450 this.fireEvent('checkchange', item, checked);
3452 });Ext.ns('Ext.ux.menu');
3455 * @class Ext.ux.menu.RangeMenu
3456 * @extends Ext.menu.Menu
3457 * Custom implementation of Ext.menu.Menu that has preconfigured
3458 * items for gt, lt, eq.
3459 * <p><b><u>Example Usage:</u></b></p>
3464 Ext.ux.menu.RangeMenu = Ext.extend(Ext.menu.Menu, {
3466 constructor : function (config) {
3468 Ext.ux.menu.RangeMenu.superclass.constructor.call(this, config);
3473 * Fires when a filter configuration has changed
3474 * @param {Ext.ux.grid.filter.Filter} this The filter object.
3479 this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
3481 var i, len, item, cfg, Cls;
3483 for (i = 0, len = this.menuItems.length; i < len; i++) {
3484 item = this.menuItems[i];
3488 itemId: 'range-' + item,
3489 enableKeyEvents: true,
3490 iconCls: this.iconCls[item] || 'no-icon',
3493 keyup: this.onInputKeyUp
3499 Ext.applyIf(this.fields[item] || {}, this.fieldCfg[item]),
3500 // configurable defaults
3503 Cls = cfg.fieldCls || this.fieldCls;
3504 item = this.fields[item] = new Cls(cfg);
3512 * called by this.updateTask
3514 fireUpdate : function () {
3515 this.fireEvent('update', this);
3519 * Get and return the value of the filter.
3520 * @return {String} The value of this filter
3522 getValue : function () {
3523 var result = {}, key, field;
3524 for (key in this.fields) {
3525 field = this.fields[key];
3526 if (field.isValid() && String(field.getValue()).length > 0) {
3527 result[key] = field.getValue();
3534 * Set the value of this menu and fires the 'update' event.
3535 * @param {Object} data The data to assign to this menu
3537 setValue : function (data) {
3539 for (key in this.fields) {
3540 this.fields[key].setValue(data[key] !== undefined ? data[key] : '');
3542 this.fireEvent('update', this);
3547 * Handler method called when there is a keyup event on an input
3548 * item of this menu.
3550 onInputKeyUp : function (field, e) {
3552 if (k == e.RETURN && field.isValid()) {
3558 if (field == this.fields.eq) {
3559 if (this.fields.gt) {
3560 this.fields.gt.setValue(null);
3562 if (this.fields.lt) {
3563 this.fields.lt.setValue(null);
3567 this.fields.eq.setValue(null);
3570 // restart the timer
3571 this.updateTask.delay(this.updateBuffer);
3574 Ext.ns('Ext.ux.grid');
3577 * @class Ext.ux.grid.GroupSummary
3578 * @extends Ext.util.Observable
3579 * A GridPanel plugin that enables dynamic column calculations and a dynamically
3580 * updated grouped summary row.
3582 Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {
3584 * @cfg {Function} summaryRenderer Renderer example:<pre><code>
3585 summaryRenderer: function(v, params, data){
3586 return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
3591 * @cfg {String} summaryType (Optional) The type of
3592 * calculation to be used for the column. For options available see
3593 * {@link #Calculations}.
3596 constructor : function(config){
3597 Ext.apply(this, config);
3598 Ext.ux.grid.GroupSummary.superclass.constructor.call(this);
3600 init : function(grid){
3602 var v = this.view = grid.getView();
3603 v.doGroupEnd = this.doGroupEnd.createDelegate(this);
3605 v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
3606 v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
3607 v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
3608 v.afterMethod('onUpdate', this.doUpdate, this);
3609 v.afterMethod('onRemove', this.doRemove, this);
3612 this.rowTpl = new Ext.Template(
3613 '<div class="x-grid3-summary-row" style="{tstyle}">',
3614 '<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
3615 '<tbody><tr>{cells}</tr></tbody>',
3618 this.rowTpl.disableFormats = true;
3620 this.rowTpl.compile();
3623 this.cellTpl = new Ext.Template(
3624 '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
3625 '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',
3628 this.cellTpl.disableFormats = true;
3630 this.cellTpl.compile();
3634 * Toggle the display of the summary row on/off
3635 * @param {Boolean} visible <tt>true</tt> to show the summary, <tt>false</tt> to hide the summary.
3637 toggleSummaries : function(visible){
3638 var el = this.grid.getGridEl();
3640 if(visible === undefined){
3641 visible = el.hasClass('x-grid-hide-summary');
3643 el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');
3647 renderSummary : function(o, cs){
3648 cs = cs || this.view.getColumnData();
3649 var cfg = this.grid.getColumnModel().config,
3650 buf = [], c, p = {}, cf, last = cs.length-1;
3651 for(var i = 0, len = cs.length; i < len; i++){
3656 p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
3657 if(cf.summaryType || cf.summaryRenderer){
3658 p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
3662 if(p.value == undefined || p.value === "") p.value = " ";
3663 buf[buf.length] = this.cellTpl.apply(p);
3666 return this.rowTpl.apply({
3667 tstyle: 'width:'+this.view.getTotalWidth()+';',
3674 * @param {Object} rs
3675 * @param {Object} cs
3677 calculate : function(rs, cs){
3678 var data = {}, r, c, cfg = this.grid.getColumnModel().config, cf;
3679 for(var j = 0, jlen = rs.length; j < jlen; j++){
3681 for(var i = 0, len = cs.length; i < len; i++){
3685 data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
3692 doGroupEnd : function(buf, g, cs, ds, colCount){
3693 var data = this.calculate(g.rs, cs);
3694 buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');
3697 doWidth : function(col, w, tw){
3698 if(!this.isGrouped()){
3701 var gs = this.view.getGroups(),
3705 for(; i < len; ++i){
3706 s = gs[i].childNodes[2];
3708 s.firstChild.style.width = tw;
3709 s.firstChild.rows[0].childNodes[col].style.width = w;
3713 doAllWidths : function(ws, tw){
3714 if(!this.isGrouped()){
3717 var gs = this.view.getGroups(),
3725 for(; i < len; i++){
3726 s = gs[i].childNodes[2];
3728 s.firstChild.style.width = tw;
3729 cells = s.firstChild.rows[0].childNodes;
3730 for(j = 0; j < wlen; j++){
3731 cells[j].style.width = ws[j];
3736 doHidden : function(col, hidden, tw){
3737 if(!this.isGrouped()){
3740 var gs = this.view.getGroups(),
3744 display = hidden ? 'none' : '';
3745 for(; i < len; i++){
3746 s = gs[i].childNodes[2];
3748 s.firstChild.style.width = tw;
3749 s.firstChild.rows[0].childNodes[col].style.display = display;
3753 isGrouped : function(){
3754 return !Ext.isEmpty(this.grid.getStore().groupField);
3757 // Note: requires that all (or the first) record in the
3758 // group share the same group value. Returns false if the group
3759 // could not be found.
3760 refreshSummary : function(groupValue){
3761 return this.refreshSummaryById(this.view.getGroupId(groupValue));
3764 getSummaryNode : function(gid){
3765 var g = Ext.fly(gid, '_gsummary');
3767 return g.down('.x-grid3-summary-row', true);
3772 refreshSummaryById : function(gid){
3773 var g = Ext.getDom(gid);
3778 this.grid.getStore().each(function(r){
3779 if(r._groupId == gid){
3783 var cs = this.view.getColumnData(),
3784 data = this.calculate(rs, cs),
3785 markup = this.renderSummary({data: data}, cs),
3786 existing = this.getSummaryNode(gid);
3789 g.removeChild(existing);
3791 Ext.DomHelper.append(g, markup);
3795 doUpdate : function(ds, record){
3796 this.refreshSummaryById(record._groupId);
3799 doRemove : function(ds, record, index, isUpdate){
3801 this.refreshSummaryById(record._groupId);
3806 * Show a message in the summary row.
3808 grid.on('afteredit', function(){
3809 var groupValue = 'Ext Forms: Field Anchoring';
3810 summary.showSummaryMsg(groupValue, 'Updating Summary...');
3813 * @param {String} groupValue
3814 * @param {String} msg Text to use as innerHTML for the summary row.
3816 showSummaryMsg : function(groupValue, msg){
3817 var gid = this.view.getGroupId(groupValue),
3818 node = this.getSummaryNode(gid);
3820 node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';
3826 Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;
3830 * Calculation types for summary row:</p><div class="mdetail-params"><ul>
3831 * <li><b><tt>sum</tt></b> : <div class="sub-desc"></div></li>
3832 * <li><b><tt>count</tt></b> : <div class="sub-desc"></div></li>
3833 * <li><b><tt>max</tt></b> : <div class="sub-desc"></div></li>
3834 * <li><b><tt>min</tt></b> : <div class="sub-desc"></div></li>
3835 * <li><b><tt>average</tt></b> : <div class="sub-desc"></div></li>
3837 * <p>Custom calculations may be implemented. An example of
3838 * custom <code>summaryType=totalCost</code>:</p><pre><code>
3839 // define a custom summary function
3840 Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
3841 return v + (record.data.estimate * record.data.rate);
3844 * @property Calculations
3847 Ext.ux.grid.GroupSummary.Calculations = {
3848 'sum' : function(v, record, field){
3849 return v + (record.data[field]||0);
3852 'count' : function(v, record, field, data){
3853 return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
3856 'max' : function(v, record, field, data){
3857 var v = record.data[field];
3858 var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
3859 return v > max ? (data[field+'max'] = v) : max;
3862 'min' : function(v, record, field, data){
3863 var v = record.data[field];
3864 var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
3865 return v < min ? (data[field+'min'] = v) : min;
3868 'average' : function(v, record, field, data){
3869 var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
3870 var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
3871 return t === 0 ? 0 : t / c;
3874 Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;
3877 * @class Ext.ux.grid.HybridSummary
3878 * @extends Ext.ux.grid.GroupSummary
3879 * Adds capability to specify the summary data for the group via json as illustrated here:
3884 projectId: 100, project: 'House',
3885 taskId: 112, description: 'Paint',
3886 estimate: 6, rate: 150,
3894 description: 14, estimate: 9,
3895 rate: 99, due: new Date(2009, 6, 29),
3903 Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {
3906 * @param {Object} rs
3907 * @param {Object} cs
3909 calculate : function(rs, cs){
3910 var gcol = this.view.getGroupField(),
3911 gvalue = rs[0].data[gcol],
3912 gdata = this.getSummaryData(gvalue);
3913 return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
3918 grid.on('afteredit', function(){
3919 var groupValue = 'Ext Forms: Field Anchoring';
3920 summary.showSummaryMsg(groupValue, 'Updating Summary...');
3921 setTimeout(function(){ // simulate server call
3922 // HybridSummary class implements updateSummaryData
3923 summary.updateSummaryData(groupValue,
3924 // create data object based on configured dataIndex
3925 {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
3929 * @param {String} groupValue
3930 * @param {Object} data data object
3931 * @param {Boolean} skipRefresh (Optional) Defaults to false
3933 updateSummaryData : function(groupValue, data, skipRefresh){
3934 var json = this.grid.getStore().reader.jsonData;
3935 if(!json.summaryData){
3936 json.summaryData = {};
3938 json.summaryData[groupValue] = data;
3940 this.refreshSummary(groupValue);
3945 * Returns the summaryData for the specified groupValue or null.
3946 * @param {String} groupValue
3947 * @return {Object} summaryData
3949 getSummaryData : function(groupValue){
3950 var reader = this.grid.getStore().reader,
3951 json = reader.jsonData,
3952 fields = reader.recordType.prototype.fields,
3955 if(json && json.summaryData){
3956 v = json.summaryData[groupValue];
3958 return reader.extractValues(v, fields.items, fields.length);
3966 Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;
3967 Ext.ux.GroupTab = Ext.extend(Ext.Container, {
3972 deferredRender: true,
3978 headerAsText: false,
3984 initComponent: function(config){
3985 Ext.apply(this, config);
3988 Ext.ux.GroupTab.superclass.initComponent.call(this);
3990 this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');
3992 this.setLayout(new Ext.layout.CardLayout({
3993 deferredRender: this.deferredRender
3997 this.stack = Ext.TabPanel.AccessStack();
4002 this.on('beforerender', function(){
4003 this.groupEl = this.ownerCt.getGroupEl(this);
4006 this.on('add', this.onAdd, this, {
4009 this.on('remove', this.onRemove, this, {
4013 if (this.mainItem !== undefined) {
4014 var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
4015 delete this.mainItem;
4016 this.setMainItem(item);
4021 * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
4022 * can return false to cancel the tab change.
4023 * @param {String/Panel} tab The id or tab Panel to activate
4025 setActiveTab : function(item){
4026 item = this.getComponent(item);
4031 this.activeTab = item;
4034 if(this.activeTab != item && this.fireEvent('beforetabchange', this, item, this.activeTab) !== false){
4035 if(this.activeTab && this.activeTab != this.mainItem){
4036 var oldEl = this.getTabEl(this.activeTab);
4038 Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
4041 var el = this.getTabEl(item);
4042 Ext.fly(el).addClass('x-grouptabs-strip-active');
4043 this.activeTab = item;
4044 this.stack.add(item);
4046 this.layout.setActiveItem(item);
4047 if(this.layoutOnTabChange && item.doLayout){
4051 this.scrollToTab(item, this.animScroll);
4054 this.fireEvent('tabchange', this, item);
4060 getTabEl: function(item){
4061 if (item == this.mainItem) {
4062 return this.groupEl;
4064 return Ext.TabPanel.prototype.getTabEl.call(this, item);
4067 onRender: function(ct, position){
4068 Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);
4070 this.strip = Ext.fly(this.groupEl).createChild({
4072 cls: 'x-grouptabs-sub'
4075 this.tooltip = new Ext.ToolTip({
4076 target: this.groupEl,
4077 delegate: 'a.x-grouptabs-text',
4079 renderTo: document.body,
4081 beforeshow: function(tip) {
4082 var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
4084 : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);
4089 tip.body.dom.innerHTML = item.tabTip;
4095 if (!this.itemTpl) {
4096 var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');
4097 tt.disableFormats = true;
4099 Ext.ux.GroupTab.prototype.itemTpl = tt;
4102 this.items.each(this.initTab, this);
4105 afterRender: function(){
4106 Ext.ux.GroupTab.superclass.afterRender.call(this);
4108 if (this.activeTab !== undefined) {
4109 var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
4110 delete this.activeTab;
4111 this.setActiveTab(item);
4116 initTab: function(item, index){
4117 var before = this.strip.dom.childNodes[index];
4118 var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
4120 if (item === this.mainItem) {
4121 item.tabEl = this.groupEl;
4122 p.cls += ' x-grouptabs-main-item';
4125 var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
4127 item.tabEl = item.tabEl || el;
4129 item.on('disable', this.onItemDisabled, this);
4130 item.on('enable', this.onItemEnabled, this);
4131 item.on('titlechange', this.onItemTitleChanged, this);
4132 item.on('iconchange', this.onItemIconChanged, this);
4133 item.on('beforeshow', this.onBeforeShowItem, this);
4136 setMainItem: function(item){
4137 item = this.getComponent(item);
4138 if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
4142 this.mainItem = item;
4145 getMainItem: function(){
4146 return this.mainItem || null;
4150 onBeforeShowItem: function(item){
4151 if (item != this.activeTab) {
4152 this.setActiveTab(item);
4158 onAdd: function(gt, item, index){
4159 if (this.rendered) {
4160 this.initTab.call(this, item, index);
4165 onRemove: function(tp, item){
4166 Ext.destroy(Ext.get(this.getTabEl(item)));
4167 this.stack.remove(item);
4168 item.un('disable', this.onItemDisabled, this);
4169 item.un('enable', this.onItemEnabled, this);
4170 item.un('titlechange', this.onItemTitleChanged, this);
4171 item.un('iconchange', this.onItemIconChanged, this);
4172 item.un('beforeshow', this.onBeforeShowItem, this);
4173 if (item == this.activeTab) {
4174 var next = this.stack.next();
4176 this.setActiveTab(next);
4178 else if (this.items.getCount() > 0) {
4179 this.setActiveTab(0);
4182 this.activeTab = null;
4188 onBeforeAdd: function(item){
4189 var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
4191 this.setActiveTab(item);
4194 Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
4195 var es = item.elements;
4196 item.elements = es ? es.replace(',header', '') : es;
4197 item.border = (item.border === true);
4201 onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
4202 onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,
4205 onItemTitleChanged: function(item){
4206 var el = this.getTabEl(item);
4208 Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
4213 onItemIconChanged: function(item, iconCls, oldCls){
4214 var el = this.getTabEl(item);
4216 Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
4220 beforeDestroy: function(){
4221 Ext.TabPanel.prototype.beforeDestroy.call(this);
4222 this.tooltip.destroy();
4226 Ext.reg('grouptab', Ext.ux.GroupTab);
4229 Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
4230 tabPosition: 'left',
4232 alternateColor: false,
4234 alternateCls: 'x-grouptabs-panel-alt',
4236 defaultType: 'grouptab',
4238 deferredRender: false,
4242 initComponent: function(){
4243 Ext.ux.GroupTabPanel.superclass.initComponent.call(this);
4246 'beforegroupchange',
4249 this.elements = 'body,header';
4250 this.stripTarget = 'header';
4252 this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';
4254 this.addClass('x-grouptabs-panel');
4256 if (this.tabStyle && this.tabStyle != '') {
4257 this.addClass('x-grouptabs-panel-' + this.tabStyle);
4260 if (this.alternateColor) {
4261 this.addClass(this.alternateCls);
4264 this.on('beforeadd', function(gtp, item, index){
4265 this.initGroup(item, index);
4267 this.items.each(function(item){
4268 item.on('tabchange',function(item){
4269 this.fireEvent('tabchange', this, item.activeTab);
4274 initEvents : function() {
4275 this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
4278 onRender: function(ct, position){
4279 Ext.TabPanel.superclass.onRender.call(this, ct, position);
4281 var pos = this.tabPosition == 'top' ? 'header' : 'footer';
4282 this[pos].addClass('x-tab-panel-'+pos+'-plain');
4285 var st = this[this.stripTarget];
4287 this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
4288 tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});
4290 var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
4291 this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
4293 this.header.addClass('x-grouptabs-panel-header');
4294 this.bwrap.addClass('x-grouptabs-bwrap');
4295 this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
4297 if (!this.groupTpl) {
4298 var tt = new Ext.Template(
4299 '<li class="{cls}" id="{id}">',
4300 '<a class="x-grouptabs-expand" onclick="return false;"></a>',
4301 '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
4302 '<span>{text}</span></a>',
4305 tt.disableFormats = true;
4307 Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
4309 this.items.each(this.initGroup, this);
4312 afterRender: function(){
4313 Ext.ux.GroupTabPanel.superclass.afterRender.call(this);
4315 this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
4319 this.addClass('x-tab-panel-' + this.tabPosition);
4320 this.header.setWidth(this.tabWidth);
4322 if (this.activeGroup !== undefined) {
4323 var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);
4324 delete this.activeGroup;
4325 this.setActiveGroup(group);
4326 group.setActiveTab(group.getMainItem());
4330 getGroupEl : Ext.TabPanel.prototype.getTabEl,
4333 findTargets: function(e){
4335 itemEl = e.getTarget('li', this.strip);
4337 item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
4338 if (item.disabled) {
4347 expand: e.getTarget('.x-grouptabs-expand', this.strip),
4348 isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
4355 onStripMouseDown: function(e){
4356 if (e.button != 0) {
4360 var t = this.findTargets(e);
4362 this.toggleGroup(t.el);
4366 t.item.setActiveTab(t.item.getMainItem());
4369 t.item.ownerCt.setActiveTab(t.item);
4374 expandGroup: function(groupEl){
4375 if(groupEl.isXType) {
4376 groupEl = this.getGroupEl(groupEl);
4378 Ext.fly(groupEl).addClass('x-grouptabs-expanded');
4379 this.syncTabJoint();
4382 toggleGroup: function(groupEl){
4383 if(groupEl.isXType) {
4384 groupEl = this.getGroupEl(groupEl);
4386 Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
4387 this.syncTabJoint();
4390 collapseGroup: function(groupEl){
4391 if(groupEl.isXType) {
4392 groupEl = this.getGroupEl(groupEl);
4394 Ext.fly(groupEl).removeClass('x-grouptabs-expanded');
4395 this.syncTabJoint();
4398 syncTabJoint: function(groupEl){
4399 if (!this.tabJoint) {
4403 groupEl = groupEl || this.getGroupEl(this.activeGroup);
4405 this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2);
4407 var y = Ext.isGecko2 ? 0 : 1;
4408 if (this.tabPosition == 'left'){
4409 this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
4412 this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
4416 this.tabJoint.hide();
4420 getActiveTab : function() {
4421 if(!this.activeGroup) return null;
4422 return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;
4425 onResize: function(){
4426 Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
4427 this.syncTabJoint();
4430 createCorner: function(el, pos){
4431 return Ext.fly(el).createChild({
4432 cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
4436 initGroup: function(group, index){
4437 var before = this.strip.dom.childNodes[index],
4438 p = this.getTemplateArgs(group);
4440 p.cls += ' x-tab-first';
4442 p.cls += ' x-grouptabs-main';
4443 p.text = group.getMainItem().title;
4445 var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),
4446 tl = this.createCorner(el, 'top-' + this.tabPosition),
4447 bl = this.createCorner(el, 'bottom-' + this.tabPosition);
4450 if (group.expanded) {
4451 this.expandGroup(el);
4454 if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
4455 bl.setLeft('-10px');
4456 bl.setBottom('-5px');
4457 tl.setLeft('-10px');
4463 changemainitem: this.onGroupChangeMainItem,
4464 beforetabchange: this.onGroupBeforeTabChange
4468 setActiveGroup : function(group) {
4469 group = this.getComponent(group);
4474 this.activeGroup = group;
4477 if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){
4478 if(this.activeGroup){
4479 this.activeGroup.activeTab = null;
4480 var oldEl = this.getGroupEl(this.activeGroup);
4482 Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
4486 var groupEl = this.getGroupEl(group);
4487 Ext.fly(groupEl).addClass('x-grouptabs-strip-active');
4489 this.activeGroup = group;
4490 this.stack.add(group);
4492 this.layout.setActiveItem(group);
4493 this.syncTabJoint(groupEl);
4495 this.fireEvent('groupchange', this, group);
4501 onGroupBeforeTabChange: function(group, newTab, oldTab){
4502 if(group !== this.activeGroup || newTab !== oldTab) {
4503 this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
4505 this.expandGroup(this.getGroupEl(group));
4506 if(group !== this.activeGroup) {
4507 return this.setActiveGroup(group);
4511 getFrameHeight: function(){
4512 var h = this.el.getFrameWidth('tb');
4513 h += (this.tbar ? this.tbar.getHeight() : 0) +
4514 (this.bbar ? this.bbar.getHeight() : 0);
4519 adjustBodyWidth: function(w){
4520 return w - this.tabWidth;
4524 Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);
4526 * Note that this control will most likely remain as an example, and not as a core Ext form
4527 * control. However, the API will be changing in a future release and so should not yet be
4528 * treated as a final, stable API at this time.
4532 * @class Ext.ux.form.ItemSelector
4533 * @extends Ext.form.Field
4534 * A control that allows selection of between two Ext.ux.form.MultiSelect controls.
4537 * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
4540 * Create a new ItemSelector
4541 * @param {Object} config Configuration options
4542 * @xtype itemselector
4544 Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {
4548 iconDown:"down2.gif",
4549 iconLeft:"left2.gif",
4550 iconRight:"right2.gif",
4552 iconBottom:"bottom2.gif",
4562 defaultAutoCreate:{tag: "div"},
4564 * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
4568 initComponent: function(){
4569 Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
4571 'rowdblclick' : true,
4576 onRender: function(ct, position){
4577 Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);
4579 // Internal default configuration for both multiselects
4581 legend: 'Available',
4594 this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
4595 this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
4597 this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
4598 this.toMultiselect.on('dblclick', this.onRowDblClick, this);
4600 var p = new Ext.Panel({
4601 bodyStyle:this.bodyStyle,
4604 layoutConfig:{columns:3}
4607 p.add(this.fromMultiselect);
4608 var icons = new Ext.Panel({header:false});
4610 p.add(this.toMultiselect);
4612 icons.el.down('.'+icons.bwrapCls).remove();
4615 if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
4616 this.imagePath+="/";
4617 this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
4618 this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
4619 this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
4620 this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
4621 this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
4622 this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
4623 var el=icons.getEl();
4624 this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
4625 el.createChild({tag: 'br'});
4626 this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
4627 el.createChild({tag: 'br'});
4628 this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
4629 el.createChild({tag: 'br'});
4630 this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
4631 el.createChild({tag: 'br'});
4632 this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
4633 el.createChild({tag: 'br'});
4634 this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
4635 this.toTopIcon.on('click', this.toTop, this);
4636 this.upIcon.on('click', this.up, this);
4637 this.downIcon.on('click', this.down, this);
4638 this.toBottomIcon.on('click', this.toBottom, this);
4639 this.addIcon.on('click', this.fromTo, this);
4640 this.removeIcon.on('click', this.toFrom, this);
4641 if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
4642 if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
4643 if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
4644 if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
4645 if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
4646 if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
4648 var tb = p.body.first();
4649 this.el.setWidth(p.body.first().getWidth());
4650 p.body.removeClass();
4652 this.hiddenName = this.name;
4653 var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
4654 this.hiddenField = this.el.createChild(hiddenTag);
4657 doLayout: function(){
4659 this.fromMultiselect.fs.doLayout();
4660 this.toMultiselect.fs.doLayout();
4664 afterRender: function(){
4665 Ext.ux.form.ItemSelector.superclass.afterRender.call(this);
4667 this.toStore = this.toMultiselect.store;
4668 this.toStore.on('add', this.valueChanged, this);
4669 this.toStore.on('remove', this.valueChanged, this);
4670 this.toStore.on('load', this.valueChanged, this);
4671 this.valueChanged(this.toStore);
4674 toTop : function() {
4675 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
4677 if (selectionsArray.length > 0) {
4678 selectionsArray.sort();
4679 for (var i=0; i<selectionsArray.length; i++) {
4680 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
4681 records.push(record);
4683 selectionsArray = [];
4684 for (var i=records.length-1; i>-1; i--) {
4685 record = records[i];
4686 this.toMultiselect.view.store.remove(record);
4687 this.toMultiselect.view.store.insert(0, record);
4688 selectionsArray.push(((records.length - 1) - i));
4691 this.toMultiselect.view.refresh();
4692 this.toMultiselect.view.select(selectionsArray);
4695 toBottom : function() {
4696 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
4698 if (selectionsArray.length > 0) {
4699 selectionsArray.sort();
4700 for (var i=0; i<selectionsArray.length; i++) {
4701 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
4702 records.push(record);
4704 selectionsArray = [];
4705 for (var i=0; i<records.length; i++) {
4706 record = records[i];
4707 this.toMultiselect.view.store.remove(record);
4708 this.toMultiselect.view.store.add(record);
4709 selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
4712 this.toMultiselect.view.refresh();
4713 this.toMultiselect.view.select(selectionsArray);
4718 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
4719 selectionsArray.sort();
4720 var newSelectionsArray = [];
4721 if (selectionsArray.length > 0) {
4722 for (var i=0; i<selectionsArray.length; i++) {
4723 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
4724 if ((selectionsArray[i] - 1) >= 0) {
4725 this.toMultiselect.view.store.remove(record);
4726 this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
4727 newSelectionsArray.push(selectionsArray[i] - 1);
4730 this.toMultiselect.view.refresh();
4731 this.toMultiselect.view.select(newSelectionsArray);
4737 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
4738 selectionsArray.sort();
4739 selectionsArray.reverse();
4740 var newSelectionsArray = [];
4741 if (selectionsArray.length > 0) {
4742 for (var i=0; i<selectionsArray.length; i++) {
4743 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
4744 if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
4745 this.toMultiselect.view.store.remove(record);
4746 this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
4747 newSelectionsArray.push(selectionsArray[i] + 1);
4750 this.toMultiselect.view.refresh();
4751 this.toMultiselect.view.select(newSelectionsArray);
4755 fromTo : function() {
4756 var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
4758 if (selectionsArray.length > 0) {
4759 for (var i=0; i<selectionsArray.length; i++) {
4760 record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
4761 records.push(record);
4763 if(!this.allowDup)selectionsArray = [];
4764 for (var i=0; i<records.length; i++) {
4765 record = records[i];
4767 var x=new Ext.data.Record();
4770 this.toMultiselect.view.store.add(record);
4772 this.fromMultiselect.view.store.remove(record);
4773 this.toMultiselect.view.store.add(record);
4774 selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
4778 this.toMultiselect.view.refresh();
4779 this.fromMultiselect.view.refresh();
4780 var si = this.toMultiselect.store.sortInfo;
4782 this.toMultiselect.store.sort(si.field, si.direction);
4784 this.toMultiselect.view.select(selectionsArray);
4787 toFrom : function() {
4788 var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
4790 if (selectionsArray.length > 0) {
4791 for (var i=0; i<selectionsArray.length; i++) {
4792 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
4793 records.push(record);
4795 selectionsArray = [];
4796 for (var i=0; i<records.length; i++) {
4797 record = records[i];
4798 this.toMultiselect.view.store.remove(record);
4800 this.fromMultiselect.view.store.add(record);
4801 selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
4805 this.fromMultiselect.view.refresh();
4806 this.toMultiselect.view.refresh();
4807 var si = this.fromMultiselect.store.sortInfo;
4809 this.fromMultiselect.store.sort(si.field, si.direction);
4811 this.fromMultiselect.view.select(selectionsArray);
4814 valueChanged: function(store) {
4817 for (var i=0; i<store.getCount(); i++) {
4818 record = store.getAt(i);
4819 values.push(record.get(this.toMultiselect.valueField));
4821 this.hiddenField.dom.value = values.join(this.delimiter);
4822 this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
4825 getValue : function() {
4826 return this.hiddenField.dom.value;
4829 onRowDblClick : function(vw, index, node, e) {
4830 if (vw == this.toMultiselect.view){
4832 } else if (vw == this.fromMultiselect.view) {
4835 return this.fireEvent('rowdblclick', vw, index, node, e);
4839 range = this.toMultiselect.store.getRange();
4840 this.toMultiselect.store.removeAll();
4841 this.fromMultiselect.store.add(range);
4842 var si = this.fromMultiselect.store.sortInfo;
4844 this.fromMultiselect.store.sort(si.field, si.direction);
4846 this.valueChanged(this.toMultiselect.store);
4850 Ext.reg('itemselector', Ext.ux.form.ItemSelector);
4853 Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;
4855 * Ext JS Library 3.3.0
4856 * Copyright(c) 2006-2010 Ext JS, Inc.
4857 * licensing@extjs.com
4858 * http://www.extjs.com/license
4860 Ext.ns('Ext.ux.grid');
4862 Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, {
4864 unlockText : 'Unlock',
4866 lockedBorderWidth : 1,
4869 * This option ensures that height between the rows is synchronized
4870 * between the locked and unlocked sides. This option only needs to be used
4871 * when the row heights aren't predictable.
4875 initTemplates : function(){
4876 var ts = this.templates || {};
4878 if (!ts.masterTpl) {
4879 ts.masterTpl = new Ext.Template(
4880 '<div class="x-grid3" hidefocus="true">',
4881 '<div class="x-grid3-locked">',
4882 '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{lstyle}">{lockedHeader}</div></div><div class="x-clear"></div></div>',
4883 '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{lstyle}">{lockedBody}</div><div class="x-grid3-scroll-spacer"></div></div>',
4885 '<div class="x-grid3-viewport x-grid3-unlocked">',
4886 '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',
4887 '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
4889 '<div class="x-grid3-resize-marker"> </div>',
4890 '<div class="x-grid3-resize-proxy"> </div>',
4895 this.templates = ts;
4897 Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);
4900 getEditorParent : function(ed){
4904 initElements : function(){
4905 var el = Ext.get(this.grid.getGridEl().dom.firstChild),
4906 lockedWrap = el.child('div.x-grid3-locked'),
4907 lockedHd = lockedWrap.child('div.x-grid3-header'),
4908 lockedScroller = lockedWrap.child('div.x-grid3-scroller'),
4909 mainWrap = el.child('div.x-grid3-viewport'),
4910 mainHd = mainWrap.child('div.x-grid3-header'),
4911 scroller = mainWrap.child('div.x-grid3-scroller');
4913 if (this.grid.hideHeaders) {
4914 lockedHd.setDisplayed(false);
4915 mainHd.setDisplayed(false);
4919 scroller.setStyle('overflow-x', 'hidden');
4926 innerHd : mainHd.dom.firstChild,
4928 mainBody: scroller.child('div.x-grid3-body'),
4929 focusEl : scroller.child('a'),
4930 resizeMarker: el.child('div.x-grid3-resize-marker'),
4931 resizeProxy : el.child('div.x-grid3-resize-proxy'),
4932 lockedWrap: lockedWrap,
4934 lockedScroller: lockedScroller,
4935 lockedBody: lockedScroller.child('div.x-grid3-body'),
4936 lockedInnerHd: lockedHd.child('div.x-grid3-header-inner', true)
4939 this.focusEl.swallowEvent('click', true);
4942 getLockedRows : function(){
4943 return this.hasRows() ? this.lockedBody.dom.childNodes : [];
4946 getLockedRow : function(row){
4947 return this.getLockedRows()[row];
4950 getCell : function(row, col){
4951 var lockedLen = this.cm.getLockedCount();
4952 if(col < lockedLen){
4953 return this.getLockedRow(row).getElementsByTagName('td')[col];
4955 return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - lockedLen);
4958 getHeaderCell : function(index){
4959 var lockedLen = this.cm.getLockedCount();
4960 if(index < lockedLen){
4961 return this.lockedHd.dom.getElementsByTagName('td')[index];
4963 return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - lockedLen);
4966 addRowClass : function(row, cls){
4967 var lockedRow = this.getLockedRow(row);
4969 this.fly(lockedRow).addClass(cls);
4971 Ext.ux.grid.LockingGridView.superclass.addRowClass.call(this, row, cls);
4974 removeRowClass : function(row, cls){
4975 var lockedRow = this.getLockedRow(row);
4977 this.fly(lockedRow).removeClass(cls);
4979 Ext.ux.grid.LockingGridView.superclass.removeRowClass.call(this, row, cls);
4982 removeRow : function(row) {
4983 Ext.removeNode(this.getLockedRow(row));
4984 Ext.ux.grid.LockingGridView.superclass.removeRow.call(this, row);
4987 removeRows : function(firstRow, lastRow){
4988 var lockedBody = this.lockedBody.dom,
4989 rowIndex = firstRow;
4990 for(; rowIndex <= lastRow; rowIndex++){
4991 Ext.removeNode(lockedBody.childNodes[firstRow]);
4993 Ext.ux.grid.LockingGridView.superclass.removeRows.call(this, firstRow, lastRow);
4996 syncScroll : function(e){
4997 this.lockedScroller.dom.scrollTop = this.scroller.dom.scrollTop;
4998 Ext.ux.grid.LockingGridView.superclass.syncScroll.call(this, e);
5001 updateSortIcon : function(col, dir){
5002 var sortClasses = this.sortClasses,
5003 lockedHeaders = this.lockedHd.select('td').removeClass(sortClasses),
5004 headers = this.mainHd.select('td').removeClass(sortClasses),
5005 lockedLen = this.cm.getLockedCount(),
5006 cls = sortClasses[dir == 'DESC' ? 1 : 0];
5008 if(col < lockedLen){
5009 lockedHeaders.item(col).addClass(cls);
5011 headers.item(col - lockedLen).addClass(cls);
5015 updateAllColumnWidths : function(){
5016 var tw = this.getTotalWidth(),
5017 clen = this.cm.getColumnCount(),
5018 lw = this.getLockedWidth(),
5019 llen = this.cm.getLockedCount(),
5021 this.updateLockedWidth();
5022 for(i = 0; i < clen; i++){
5023 ws[i] = this.getColumnWidth(i);
5024 var hd = this.getHeaderCell(i);
5025 hd.style.width = ws[i];
5027 var lns = this.getLockedRows(), ns = this.getRows(), row, trow, j;
5028 for(i = 0, len = ns.length; i < len; i++){
5030 row.style.width = lw;
5032 row.firstChild.style.width = lw;
5033 trow = row.firstChild.rows[0];
5034 for (j = 0; j < llen; j++) {
5035 trow.childNodes[j].style.width = ws[j];
5039 row.style.width = tw;
5041 row.firstChild.style.width = tw;
5042 trow = row.firstChild.rows[0];
5043 for (j = llen; j < clen; j++) {
5044 trow.childNodes[j - llen].style.width = ws[j];
5048 this.onAllColumnWidthsUpdated(ws, tw);
5049 this.syncHeaderHeight();
5052 updateColumnWidth : function(col, width){
5053 var w = this.getColumnWidth(col),
5054 llen = this.cm.getLockedCount(),
5056 this.updateLockedWidth();
5058 ns = this.getLockedRows();
5059 rw = this.getLockedWidth();
5062 ns = this.getRows();
5063 rw = this.getTotalWidth();
5066 var hd = this.getHeaderCell(col);
5068 for(var i = 0, len = ns.length; i < len; i++){
5070 row.style.width = rw;
5072 row.firstChild.style.width = rw;
5073 row.firstChild.rows[0].childNodes[c].style.width = w;
5076 this.onColumnWidthUpdated(col, w, this.getTotalWidth());
5077 this.syncHeaderHeight();
5080 updateColumnHidden : function(col, hidden){
5081 var llen = this.cm.getLockedCount(),
5083 display = hidden ? 'none' : '';
5084 this.updateLockedWidth();
5086 ns = this.getLockedRows();
5087 rw = this.getLockedWidth();
5090 ns = this.getRows();
5091 rw = this.getTotalWidth();
5094 var hd = this.getHeaderCell(col);
5095 hd.style.display = display;
5096 for(var i = 0, len = ns.length; i < len; i++){
5098 row.style.width = rw;
5100 row.firstChild.style.width = rw;
5101 row.firstChild.rows[0].childNodes[c].style.display = display;
5104 this.onColumnHiddenUpdated(col, hidden, this.getTotalWidth());
5105 delete this.lastViewWidth;
5109 doRender : function(cs, rs, ds, startRow, colCount, stripe){
5110 var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1,
5111 tstyle = 'width:'+this.getTotalWidth()+';',
5112 lstyle = 'width:'+this.getLockedWidth()+';',
5113 buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r;
5114 for(var j = 0, len = rs.length; j < len; j++){
5115 r = rs[j]; cb = []; lcb = [];
5116 var rowIndex = (j+startRow);
5117 for(var i = 0; i < colCount; i++){
5120 p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
5121 (this.cm.config[i].cellCls ? ' ' + this.cm.config[i].cellCls : '');
5122 p.attr = p.cellAttr = '';
5123 p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
5125 if(Ext.isEmpty(p.value)){
5128 if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){
5129 p.css += ' x-grid3-dirty-cell';
5132 lcb[lcb.length] = ct.apply(p);
5134 cb[cb.length] = ct.apply(p);
5138 if(stripe && ((rowIndex+1) % 2 === 0)){
5139 alt[0] = 'x-grid3-row-alt';
5142 alt[1] = ' x-grid3-dirty-row';
5145 if(this.getRowClass){
5146 alt[2] = this.getRowClass(r, rowIndex, rp, ds);
5148 rp.alt = alt.join(' ');
5149 rp.cells = cb.join('');
5151 buf[buf.length] = rt.apply(rp);
5152 rp.cells = lcb.join('');
5154 lbuf[lbuf.length] = rt.apply(rp);
5156 return [buf.join(''), lbuf.join('')];
5158 processRows : function(startRow, skipStripe){
5159 if(!this.ds || this.ds.getCount() < 1){
5162 var rows = this.getRows(),
5163 lrows = this.getLockedRows(),
5165 skipStripe = skipStripe || !this.grid.stripeRows;
5166 startRow = startRow || 0;
5167 for(var i = 0, len = rows.length; i < len; ++i){
5173 row.className = row.className.replace(this.rowClsRe, ' ');
5174 lrow.className = lrow.className.replace(this.rowClsRe, ' ');
5175 if ((i + 1) % 2 === 0){
5176 row.className += ' x-grid3-row-alt';
5177 lrow.className += ' x-grid3-row-alt';
5180 this.syncRowHeights(row, lrow);
5183 Ext.fly(rows[0]).addClass(this.firstRowCls);
5184 Ext.fly(lrows[0]).addClass(this.firstRowCls);
5186 Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
5187 Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls);
5190 syncRowHeights: function(row1, row2){
5191 if(this.syncHeights){
5192 var el1 = Ext.get(row1),
5193 el2 = Ext.get(row2),
5194 h1 = el1.getHeight(),
5195 h2 = el2.getHeight();
5205 afterRender : function(){
5206 if(!this.ds || !this.cm){
5209 var bd = this.renderRows() || [' ', ' '];
5210 this.mainBody.dom.innerHTML = bd[0];
5211 this.lockedBody.dom.innerHTML = bd[1];
5212 this.processRows(0, true);
5213 if(this.deferEmptyText !== true){
5214 this.applyEmptyText();
5216 this.grid.fireEvent('viewready', this.grid);
5219 renderUI : function(){
5220 var templates = this.templates,
5221 header = this.renderHeaders(),
5222 body = templates.body.apply({rows:' '});
5224 return templates.masterTpl.apply({
5227 ostyle: 'width:' + this.getOffsetWidth() + ';',
5228 bstyle: 'width:' + this.getTotalWidth() + ';',
5230 lockedHeader: header[1],
5231 lstyle: 'width:'+this.getLockedWidth()+';'
5235 afterRenderUI: function(){
5237 this.initElements();
5238 Ext.fly(this.innerHd).on('click', this.handleHdDown, this);
5239 Ext.fly(this.lockedInnerHd).on('click', this.handleHdDown, this);
5242 mouseover: this.handleHdOver,
5243 mouseout: this.handleHdOut,
5244 mousemove: this.handleHdMove
5248 mouseover: this.handleHdOver,
5249 mouseout: this.handleHdOut,
5250 mousemove: this.handleHdMove
5252 this.scroller.on('scroll', this.syncScroll, this);
5253 if(g.enableColumnResize !== false){
5254 this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
5255 this.splitZone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
5256 this.splitZone.setOuterHandleElId(Ext.id(this.mainHd.dom));
5258 if(g.enableColumnMove){
5259 this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
5260 this.columnDrag.setOuterHandleElId(Ext.id(this.lockedInnerHd));
5261 this.columnDrag.setOuterHandleElId(Ext.id(this.innerHd));
5262 this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
5264 if(g.enableHdMenu !== false){
5265 this.hmenu = new Ext.menu.Menu({id: g.id + '-hctx'});
5267 {itemId: 'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
5268 {itemId: 'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
5270 if(this.grid.enableColLock !== false){
5272 {itemId: 'lock', text: this.lockText, cls: 'xg-hmenu-lock'},
5273 {itemId: 'unlock', text: this.unlockText, cls: 'xg-hmenu-unlock'}
5276 if(g.enableColumnHide !== false){
5277 this.colMenu = new Ext.menu.Menu({id:g.id + '-hcols-menu'});
5280 beforeshow: this.beforeColMenuShow,
5281 itemclick: this.handleHdMenuClick
5283 this.hmenu.add('-', {
5286 text: this.columnsText,
5288 iconCls: 'x-cols-icon'
5291 this.hmenu.on('itemclick', this.handleHdMenuClick, this);
5293 if(g.trackMouseOver){
5296 mouseover: this.onRowOver,
5297 mouseout: this.onRowOut
5299 this.lockedBody.on({
5301 mouseover: this.onRowOver,
5302 mouseout: this.onRowOut
5306 if(g.enableDragDrop || g.enableDrag){
5307 this.dragZone = new Ext.grid.GridDragZone(g, {
5308 ddGroup : g.ddGroup || 'GridDD'
5311 this.updateHeaderSortState();
5314 layout : function(){
5319 var c = g.getGridEl();
5320 var csize = c.getSize(true);
5321 var vw = csize.width;
5322 if(!g.hideHeaders && (vw < 20 || csize.height < 20)){
5325 this.syncHeaderHeight();
5327 this.scroller.dom.style.overflow = 'visible';
5328 this.lockedScroller.dom.style.overflow = 'visible';
5330 this.scroller.dom.style.position = 'static';
5331 this.lockedScroller.dom.style.position = 'static';
5334 this.el.setSize(csize.width, csize.height);
5335 var hdHeight = this.mainHd.getHeight();
5336 var vh = csize.height - (hdHeight);
5338 this.updateLockedWidth();
5340 if(this.lastViewWidth != vw){
5341 this.fitColumns(false, false);
5342 this.lastViewWidth = vw;
5346 this.syncHeaderScroll();
5348 this.onLayout(vw, vh);
5351 getOffsetWidth : function() {
5352 return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth() + this.getScrollOffset()) + 'px';
5355 renderHeaders : function(){
5357 ts = this.templates,
5361 len = cm.getColumnCount(),
5363 for(var i = 0; i < len; i++){
5364 p.id = cm.getColumnId(i);
5365 p.value = cm.getColumnHeader(i) || '';
5366 p.style = this.getColumnStyle(i, true);
5367 p.tooltip = this.getColumnTooltip(i);
5368 p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
5369 (cm.config[i].headerCls ? ' ' + cm.config[i].headerCls : '');
5370 if(cm.config[i].align == 'right'){
5371 p.istyle = 'padding-right:16px';
5376 lcb[lcb.length] = ct.apply(p);
5378 cb[cb.length] = ct.apply(p);
5381 return [ts.header.apply({cells: cb.join(''), tstyle:'width:'+this.getTotalWidth()+';'}),
5382 ts.header.apply({cells: lcb.join(''), tstyle:'width:'+this.getLockedWidth()+';'})];
5385 updateHeaders : function(){
5386 var hd = this.renderHeaders();
5387 this.innerHd.firstChild.innerHTML = hd[0];
5388 this.innerHd.firstChild.style.width = this.getOffsetWidth();
5389 this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
5390 this.lockedInnerHd.firstChild.innerHTML = hd[1];
5391 var lw = this.getLockedWidth();
5392 this.lockedInnerHd.firstChild.style.width = lw;
5393 this.lockedInnerHd.firstChild.firstChild.style.width = lw;
5396 getResolvedXY : function(resolved){
5400 var c = resolved.cell, r = resolved.row;
5401 return c ? Ext.fly(c).getXY() : [this.scroller.getX(), Ext.fly(r).getY()];
5404 syncFocusEl : function(row, col, hscroll){
5405 Ext.ux.grid.LockingGridView.superclass.syncFocusEl.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
5408 ensureVisible : function(row, col, hscroll){
5409 return Ext.ux.grid.LockingGridView.superclass.ensureVisible.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
5412 insertRows : function(dm, firstRow, lastRow, isUpdate){
5413 var last = dm.getCount() - 1;
5414 if(!isUpdate && firstRow === 0 && lastRow >= last){
5418 this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
5420 var html = this.renderRows(firstRow, lastRow),
5421 before = this.getRow(firstRow);
5424 this.removeRowClass(0, this.firstRowCls);
5426 Ext.DomHelper.insertHtml('beforeBegin', before, html[0]);
5427 before = this.getLockedRow(firstRow);
5428 Ext.DomHelper.insertHtml('beforeBegin', before, html[1]);
5430 this.removeRowClass(last - 1, this.lastRowCls);
5431 Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html[0]);
5432 Ext.DomHelper.insertHtml('beforeEnd', this.lockedBody.dom, html[1]);
5435 this.fireEvent('rowsinserted', this, firstRow, lastRow);
5436 this.processRows(firstRow);
5437 }else if(firstRow === 0 || firstRow >= last){
5438 this.addRowClass(firstRow, firstRow === 0 ? this.firstRowCls : this.lastRowCls);
5441 this.syncFocusEl(firstRow);
5444 getColumnStyle : function(col, isHeader){
5445 var style = !isHeader ? this.cm.config[col].cellStyle || this.cm.config[col].css || '' : this.cm.config[col].headerStyle || '';
5446 style += 'width:'+this.getColumnWidth(col)+';';
5447 if(this.cm.isHidden(col)){
5448 style += 'display:none;';
5450 var align = this.cm.config[col].align;
5452 style += 'text-align:'+align+';';
5457 getLockedWidth : function() {
5458 return this.cm.getTotalLockedWidth() + 'px';
5461 getTotalWidth : function() {
5462 return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth()) + 'px';
5465 getColumnData : function(){
5466 var cs = [], cm = this.cm, colCount = cm.getColumnCount();
5467 for(var i = 0; i < colCount; i++){
5468 var name = cm.getDataIndex(i);
5470 name : (!Ext.isDefined(name) ? this.ds.fields.get(i).name : name),
5471 renderer : cm.getRenderer(i),
5472 id : cm.getColumnId(i),
5473 style : this.getColumnStyle(i),
5474 locked : cm.isLocked(i)
5480 renderBody : function(){
5481 var markup = this.renderRows() || [' ', ' '];
5482 return [this.templates.body.apply({rows: markup[0]}), this.templates.body.apply({rows: markup[1]})];
5485 refreshRow: function(record){
5486 var store = this.ds,
5487 colCount = this.cm.getColumnCount(),
5488 columns = this.getColumnData(),
5489 last = colCount - 1,
5490 cls = ['x-grid3-row'],
5492 tstyle: String.format("width: {0};", this.getTotalWidth())
5495 tstyle: String.format("width: {0};", this.getLockedWidth())
5498 lockedColBuffer = [],
5499 cellTpl = this.templates.cell,
5508 if (Ext.isNumber(record)) {
5510 record = store.getAt(rowIndex);
5512 rowIndex = store.indexOf(record);
5515 if (!record || rowIndex < 0) {
5519 for (i = 0; i < colCount; i++) {
5520 column = columns[i];
5523 css = 'x-grid3-cell-first';
5525 css = (i == last) ? 'x-grid3-cell-last ' : '';
5530 style: column.style,
5536 meta.value = column.renderer.call(column.scope, record.data[column.name], meta, record, rowIndex, i, store);
5538 if (Ext.isEmpty(meta.value)) {
5542 if (this.markDirty && record.dirty && typeof record.modified[column.name] != 'undefined') {
5543 meta.css += ' x-grid3-dirty-cell';
5546 if (column.locked) {
5547 lockedColBuffer[i] = cellTpl.apply(meta);
5549 colBuffer[i] = cellTpl.apply(meta);
5553 row = this.getRow(rowIndex);
5555 lockedRow = this.getLockedRow(rowIndex);
5556 lockedRow.className = '';
5558 if (this.grid.stripeRows && ((rowIndex + 1) % 2 === 0)) {
5559 cls.push('x-grid3-row-alt');
5562 if (this.getRowClass) {
5563 rowParams.cols = colCount;
5564 cls.push(this.getRowClass(record, rowIndex, rowParams, store));
5568 this.fly(row).addClass(cls).setStyle(rowParams.tstyle);
5569 rowParams.cells = colBuffer.join("");
5570 row.innerHTML = this.templates.rowInner.apply(rowParams);
5573 this.fly(lockedRow).addClass(cls).setStyle(lockedRowParams.tstyle);
5574 lockedRowParams.cells = lockedColBuffer.join("");
5575 lockedRow.innerHTML = this.templates.rowInner.apply(lockedRowParams);
5576 lockedRow.rowIndex = rowIndex;
5577 this.syncRowHeights(row, lockedRow);
5578 this.fireEvent('rowupdated', this, rowIndex, record);
5581 refresh : function(headersToo){
5582 this.fireEvent('beforerefresh', this);
5583 this.grid.stopEditing(true);
5584 var result = this.renderBody();
5585 this.mainBody.update(result[0]).setWidth(this.getTotalWidth());
5586 this.lockedBody.update(result[1]).setWidth(this.getLockedWidth());
5587 if(headersToo === true){
5588 this.updateHeaders();
5589 this.updateHeaderSortState();
5591 this.processRows(0, true);
5593 this.applyEmptyText();
5594 this.fireEvent('refresh', this);
5597 onDenyColumnLock : function(){
5601 initData : function(ds, cm){
5603 this.cm.un('columnlockchange', this.onColumnLock, this);
5605 Ext.ux.grid.LockingGridView.superclass.initData.call(this, ds, cm);
5607 this.cm.on('columnlockchange', this.onColumnLock, this);
5611 onColumnLock : function(){
5615 handleHdMenuClick : function(item){
5616 var index = this.hdCtxIndex,
5618 id = item.getItemId(),
5619 llen = cm.getLockedCount();
5622 if(cm.getColumnCount(true) <= llen + 1){
5623 this.onDenyColumnLock();
5626 cm.setLocked(index, true);
5628 cm.moveColumn(index, llen);
5629 this.grid.fireEvent('columnmove', index, llen);
5633 if(llen - 1 != index){
5634 cm.setLocked(index, false, true);
5635 cm.moveColumn(index, llen - 1);
5636 this.grid.fireEvent('columnmove', index, llen - 1);
5638 cm.setLocked(index, false);
5642 return Ext.ux.grid.LockingGridView.superclass.handleHdMenuClick.call(this, item);
5647 handleHdDown : function(e, t){
5648 Ext.ux.grid.LockingGridView.superclass.handleHdDown.call(this, e, t);
5649 if(this.grid.enableColLock !== false){
5650 if(Ext.fly(t).hasClass('x-grid3-hd-btn')){
5651 var hd = this.findHeaderCell(t),
5652 index = this.getCellIndex(hd),
5653 ms = this.hmenu.items, cm = this.cm;
5654 ms.get('lock').setDisabled(cm.isLocked(index));
5655 ms.get('unlock').setDisabled(!cm.isLocked(index));
5660 syncHeaderHeight: function(){
5661 var hrow = Ext.fly(this.innerHd).child('tr', true),
5662 lhrow = Ext.fly(this.lockedInnerHd).child('tr', true);
5664 hrow.style.height = 'auto';
5665 lhrow.style.height = 'auto';
5666 var hd = hrow.offsetHeight,
5667 lhd = lhrow.offsetHeight,
5668 height = Math.max(lhd, hd) + 'px';
5670 hrow.style.height = height;
5671 lhrow.style.height = height;
5675 updateLockedWidth: function(){
5676 var lw = this.cm.getTotalLockedWidth(),
5677 tw = this.cm.getTotalWidth() - lw,
5678 csize = this.grid.getGridEl().getSize(true),
5679 lp = Ext.isBorderBox ? 0 : this.lockedBorderWidth,
5680 rp = Ext.isBorderBox ? 0 : this.rowBorderWidth,
5681 vw = (csize.width - lw - lp - rp) + 'px',
5682 so = this.getScrollOffset();
5683 if(!this.grid.autoHeight){
5684 var vh = (csize.height - this.mainHd.getHeight()) + 'px';
5685 this.lockedScroller.dom.style.height = vh;
5686 this.scroller.dom.style.height = vh;
5688 this.lockedWrap.dom.style.width = (lw + rp) + 'px';
5689 this.scroller.dom.style.width = vw;
5690 this.mainWrap.dom.style.left = (lw + lp + rp) + 'px';
5692 this.lockedInnerHd.firstChild.style.width = lw + 'px';
5693 this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';
5694 this.innerHd.style.width = vw;
5695 this.innerHd.firstChild.style.width = (tw + rp + so) + 'px';
5696 this.innerHd.firstChild.firstChild.style.width = tw + 'px';
5699 this.lockedBody.dom.style.width = (lw + rp) + 'px';
5700 this.mainBody.dom.style.width = (tw + rp) + 'px';
5705 Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {
5707 * Returns true if the given column index is currently locked
5708 * @param {Number} colIndex The column index
5709 * @return {Boolean} True if the column is locked
5711 isLocked : function(colIndex){
5712 return this.config[colIndex].locked === true;
5716 * Locks or unlocks a given column
5717 * @param {Number} colIndex The column index
5718 * @param {Boolean} value True to lock, false to unlock
5719 * @param {Boolean} suppressEvent Pass false to cause the columnlockchange event not to fire
5721 setLocked : function(colIndex, value, suppressEvent){
5722 if (this.isLocked(colIndex) == value) {
5725 this.config[colIndex].locked = value;
5726 if (!suppressEvent) {
5727 this.fireEvent('columnlockchange', this, colIndex, value);
5732 * Returns the total width of all locked columns
5733 * @return {Number} The width of all locked columns
5735 getTotalLockedWidth : function(){
5737 for (var i = 0, len = this.config.length; i < len; i++) {
5738 if (this.isLocked(i) && !this.isHidden(i)) {
5739 totalWidth += this.getColumnWidth(i);
5747 * Returns the total number of locked columns
5748 * @return {Number} The number of locked columns
5750 getLockedCount : function() {
5751 var len = this.config.length;
5753 for (var i = 0; i < len; i++) {
5754 if (!this.isLocked(i)) {
5759 //if we get to this point all of the columns are locked so we return the total
5764 * Moves a column from one position to another
5765 * @param {Number} oldIndex The current column index
5766 * @param {Number} newIndex The destination column index
5768 moveColumn : function(oldIndex, newIndex){
5769 var oldLocked = this.isLocked(oldIndex),
5770 newLocked = this.isLocked(newIndex);
5772 if (oldIndex < newIndex && oldLocked && !newLocked) {
5773 this.setLocked(oldIndex, false, true);
5774 } else if (oldIndex > newIndex && !oldLocked && newLocked) {
5775 this.setLocked(oldIndex, true, true);
5778 Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments);
5780 });Ext.ns('Ext.ux.form');
5783 * @class Ext.ux.form.MultiSelect
5784 * @extends Ext.form.Field
5785 * A control that allows selection and form submission of multiple list items.
5788 * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
5789 * 2008-06-19 bpm Docs and demo code clean up
5792 * Create a new MultiSelect
5793 * @param {Object} config Configuration options
5794 * @xtype multiselect
5796 Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field, {
5798 * @cfg {String} legend Wraps the object with a fieldset and specified legend.
5801 * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.
5804 * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
5807 * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
5810 * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
5814 * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a
5815 * toolbar config, or an array of buttons/button configs to be added to the toolbar.
5818 * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled
5819 * (use for lists which are sorted, defaults to false).
5823 * @cfg {Number} width Width in pixels of the control (defaults to 100).
5827 * @cfg {Number} height Height in pixels of the control (defaults to 100).
5831 * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).
5835 * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).
5839 * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no
5840 * selection (defaults to true).
5844 * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).
5848 * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).
5850 maxSelections:Number.MAX_VALUE,
5852 * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as
5853 * {@link Ext.form.TextField#blankText}.
5855 blankText:Ext.form.TextField.prototype.blankText,
5857 * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}
5858 * item(s) required'). The {0} token will be replaced by the value of {@link #minSelections}.
5860 minSelectionsText:'Minimum {0} item(s) required',
5862 * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}
5863 * item(s) allowed'). The {0} token will be replaced by the value of {@link #maxSelections}.
5865 maxSelectionsText:'Maximum {0} item(s) allowed',
5867 * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values
5868 * (defaults to ',').
5872 * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).
5873 * Acceptable values for this property are:
5874 * <div class="mdetail-params"><ul>
5875 * <li><b>any {@link Ext.data.Store Store} subclass</b></li>
5876 * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.
5877 * <div class="mdetail-params"><ul>
5878 * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">
5879 * A 1-dimensional array will automatically be expanded (each array item will be the combo
5880 * {@link #valueField value} and {@link #displayField text})</div></li>
5881 * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">
5882 * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
5883 * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
5884 * </div></li></ul></div></li></ul></div>
5888 defaultAutoCreate : {tag: "div"},
5891 initComponent: function(){
5892 Ext.ux.form.MultiSelect.superclass.initComponent.call(this);
5894 if(Ext.isArray(this.store)){
5895 if (Ext.isArray(this.store[0])){
5896 this.store = new Ext.data.ArrayStore({
5897 fields: ['value','text'],
5900 this.valueField = 'value';
5902 this.store = new Ext.data.ArrayStore({
5907 this.valueField = 'text';
5909 this.displayField = 'text';
5911 this.store = Ext.StoreMgr.lookup(this.store);
5923 onRender: function(ct, position){
5924 Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);
5926 var fs = this.fs = new Ext.form.FieldSet({
5929 height: this.height,
5931 style: "padding:0;",
5934 fs.body.addClass('ux-mselect');
5936 this.view = new Ext.ListView({
5939 columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
5945 this.view.on('click', this.onViewClick, this);
5946 this.view.on('beforeclick', this.onViewBeforeClick, this);
5947 this.view.on('dblclick', this.onViewDblClick, this);
5949 this.hiddenName = this.name || Ext.id();
5950 var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
5951 this.hiddenField = this.el.createChild(hiddenTag);
5952 this.hiddenField.dom.disabled = this.hiddenName != this.name;
5957 afterRender: function(){
5958 Ext.ux.form.MultiSelect.superclass.afterRender.call(this);
5960 if (this.ddReorder && !this.dragGroup && !this.dropGroup){
5961 this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();
5964 if (this.draggable || this.dragGroup){
5965 this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {
5966 ddGroup: this.dragGroup
5969 if (this.droppable || this.dropGroup){
5970 this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {
5971 ddGroup: this.dropGroup
5977 onViewClick: function(vw, index, node, e) {
5978 this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
5979 this.hiddenField.dom.value = this.getValue();
5980 this.fireEvent('click', this, e);
5985 onViewBeforeClick: function(vw, index, node, e) {
5986 if (this.disabled || this.readOnly) {
5992 onViewDblClick : function(vw, index, node, e) {
5993 return this.fireEvent('dblclick', vw, index, node, e);
5997 * Returns an array of data values for the selected items in the list. The values will be separated
5998 * by {@link #delimiter}.
5999 * @return {Array} value An array of string data values
6001 getValue: function(valueField){
6002 var returnArray = [];
6003 var selectionsArray = this.view.getSelectedIndexes();
6004 if (selectionsArray.length == 0) {return '';}
6005 for (var i=0; i<selectionsArray.length; i++) {
6006 returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));
6008 return returnArray.join(this.delimiter);
6012 * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.
6013 * @param {String/Array} values The values to set
6015 setValue: function(values) {
6017 var selections = [];
6018 this.view.clearSelections();
6019 this.hiddenField.dom.value = '';
6021 if (!values || (values == '')) { return; }
6023 if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
6024 for (var i=0; i<values.length; i++) {
6025 index = this.view.store.indexOf(this.view.store.query(this.valueField,
6026 new RegExp('^' + values[i] + '$', "i")).itemAt(0));
6027 selections.push(index);
6029 this.view.select(selections);
6030 this.hiddenField.dom.value = this.getValue();
6035 reset : function() {
6040 getRawValue: function(valueField) {
6041 var tmp = this.getValue(valueField);
6043 tmp = tmp.split(this.delimiter);
6052 setRawValue: function(values){
6057 validateValue : function(value){
6058 if (value.length < 1) { // if it has no value
6059 if (this.allowBlank) {
6060 this.clearInvalid();
6063 this.markInvalid(this.blankText);
6067 if (value.length < this.minSelections) {
6068 this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
6071 if (value.length > this.maxSelections) {
6072 this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
6079 disable: function(){
6080 this.disabled = true;
6081 this.hiddenField.dom.disabled = true;
6087 this.disabled = false;
6088 this.hiddenField.dom.disabled = false;
6093 destroy: function(){
6094 Ext.destroy(this.fs, this.dragZone, this.dropZone);
6095 Ext.ux.form.MultiSelect.superclass.destroy.call(this);
6100 Ext.reg('multiselect', Ext.ux.form.MultiSelect);
6103 Ext.ux.Multiselect = Ext.ux.form.MultiSelect;
6106 Ext.ux.form.MultiSelect.DragZone = function(ms, config){
6108 this.view = ms.view;
6109 var ddGroup = config.ddGroup || 'MultiselectDD';
6111 if (Ext.isArray(ddGroup)){
6112 dd = ddGroup.shift();
6117 Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
6118 this.setDraggable(ddGroup);
6121 Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
6122 onInitDrag : function(x, y){
6123 var el = Ext.get(this.dragData.ddel.cloneNode(true));
6124 this.proxy.update(el.dom);
6125 el.setWidth(el.child('em').getWidth());
6126 this.onStartDrag(x, y);
6131 collectSelection: function(data) {
6132 data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
6134 this.view.store.each(function(rec){
6135 if (this.view.isSelected(i)) {
6136 var n = this.view.getNode(i);
6137 var dragNode = n.cloneNode(true);
6138 dragNode.id = Ext.id();
6139 data.ddel.appendChild(dragNode);
6140 data.records.push(this.view.store.getAt(i));
6141 data.viewNodes.push(n);
6148 onEndDrag: function(data, e) {
6149 var d = Ext.get(this.dragData.ddel);
6150 if (d && d.hasClass("multi-proxy")) {
6156 getDragData: function(e){
6157 var target = this.view.findItemFromChild(e.getTarget());
6159 if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
6160 this.view.select(target);
6161 this.ms.setValue(this.ms.getValue());
6163 if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
6165 sourceView: this.view,
6169 if (this.view.getSelectionCount() == 1) {
6170 var i = this.view.getSelectedIndexes()[0];
6171 var n = this.view.getNode(i);
6172 dragData.viewNodes.push(dragData.ddel = n);
6173 dragData.records.push(this.view.store.getAt(i));
6174 dragData.repairXY = Ext.fly(n).getXY();
6176 dragData.ddel = document.createElement('div');
6177 dragData.ddel.className = 'multi-proxy';
6178 this.collectSelection(dragData);
6185 // override the default repairXY.
6186 getRepairXY : function(e){
6187 return this.dragData.repairXY;
6191 setDraggable: function(ddGroup){
6192 if (!ddGroup) return;
6193 if (Ext.isArray(ddGroup)) {
6194 Ext.each(ddGroup, this.setDraggable, this);
6197 this.addToGroup(ddGroup);
6201 Ext.ux.form.MultiSelect.DropZone = function(ms, config){
6203 this.view = ms.view;
6204 var ddGroup = config.ddGroup || 'MultiselectDD';
6206 if (Ext.isArray(ddGroup)){
6207 dd = ddGroup.shift();
6212 Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
6213 this.setDroppable(ddGroup);
6216 Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {
6218 * Part of the Ext.dd.DropZone interface. If no target node is found, the
6219 * whole Element becomes the target, and this causes the drop gesture to append.
6221 getTargetFromEvent : function(e) {
6222 var target = e.getTarget();
6227 getDropPoint : function(e, n, dd){
6228 if (n == this.ms.fs.body.dom) { return "below"; }
6229 var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
6230 var c = t + (b - t) / 2;
6231 var y = Ext.lib.Event.getPageY(e);
6240 isValidDropPoint: function(pt, n, data) {
6241 if (!data.viewNodes || (data.viewNodes.length != 1)) {
6244 var d = data.viewNodes[0];
6248 if ((pt == "below") && (n.nextSibling == d)) {
6251 if ((pt == "above") && (n.previousSibling == d)) {
6258 onNodeEnter : function(n, dd, e, data){
6263 onNodeOver : function(n, dd, e, data){
6264 var dragElClass = this.dropNotAllowed;
6265 var pt = this.getDropPoint(e, n, dd);
6266 if (this.isValidDropPoint(pt, n, data)) {
6267 if (this.ms.appendOnly) {
6268 return "x-tree-drop-ok-below";
6271 // set the insert point style on the target node
6275 dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
6276 targetElClass = "x-view-drag-insert-above";
6278 dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
6279 targetElClass = "x-view-drag-insert-below";
6281 if (this.lastInsertClass != targetElClass){
6282 Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
6283 this.lastInsertClass = targetElClass;
6291 onNodeOut : function(n, dd, e, data){
6292 this.removeDropIndicators(n);
6296 onNodeDrop : function(n, dd, e, data){
6297 if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
6300 var pt = this.getDropPoint(e, n, dd);
6301 if (n != this.ms.fs.body.dom)
6302 n = this.view.findItemFromChild(n);
6304 if(this.ms.appendOnly) {
6305 insertAt = this.view.store.getCount();
6307 insertAt = n == this.ms.fs.body.dom ? this.view.store.getCount() - 1 : this.view.indexOf(n);
6308 if (pt == "below") {
6315 // Validate if dragging within the same MultiSelect
6316 if (data.sourceView == this.view) {
6317 // If the first element to be inserted below is the target node, remove it
6318 if (pt == "below") {
6319 if (data.viewNodes[0] == n) {
6320 data.viewNodes.shift();
6322 } else { // If the last element to be inserted above is the target node, remove it
6323 if (data.viewNodes[data.viewNodes.length - 1] == n) {
6324 data.viewNodes.pop();
6328 // Nothing to drop...
6329 if (!data.viewNodes.length) {
6333 // If we are moving DOWN, then because a store.remove() takes place first,
6334 // the insertAt must be decremented.
6335 if (insertAt > this.view.store.indexOf(data.records[0])) {
6341 for (var i = 0; i < data.records.length; i++) {
6342 var r = data.records[i];
6343 if (data.sourceView) {
6344 data.sourceView.store.remove(r);
6346 this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
6347 var si = this.view.store.sortInfo;
6349 this.view.store.sort(si.field, si.direction);
6356 removeDropIndicators : function(n){
6358 Ext.fly(n).removeClass([
6359 "x-view-drag-insert-above",
6360 "x-view-drag-insert-left",
6361 "x-view-drag-insert-right",
6362 "x-view-drag-insert-below"]);
6363 this.lastInsertClass = "_noclass";
6368 setDroppable: function(ddGroup){
6369 if (!ddGroup) return;
6370 if (Ext.isArray(ddGroup)) {
6371 Ext.each(ddGroup, this.setDroppable, this);
6374 this.addToGroup(ddGroup);
6378 /* Fix for Opera, which does not seem to include the map function on Array's */
6379 if (!Array.prototype.map) {
6380 Array.prototype.map = function(fun){
6381 var len = this.length;
6382 if (typeof fun != 'function') {
6383 throw new TypeError();
6385 var res = new Array(len);
6386 var thisp = arguments[1];
6387 for (var i = 0; i < len; i++) {
6389 res[i] = fun.call(thisp, this[i], i, this);
6396 Ext.ns('Ext.ux.data');
6399 * @class Ext.ux.data.PagingMemoryProxy
6400 * @extends Ext.data.MemoryProxy
6401 * <p>Paging Memory Proxy, allows to use paging grid with in memory dataset</p>
6403 Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
6404 constructor : function(data){
6405 Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
6408 doRequest : function(action, rs, params, reader, callback, scope, options){
6413 result = reader.readRecords(this.data);
6416 this.fireEvent('loadexception', this, options, null, e);
6417 callback.call(scope, null, options, false);
6422 if (params.filter !== undefined) {
6423 result.records = result.records.filter(function(el){
6424 if (typeof(el) == 'object') {
6425 var att = params.filterCol || 0;
6426 return String(el.data[att]).match(params.filter) ? true : false;
6429 return String(el).match(params.filter) ? true : false;
6432 result.totalRecords = result.records.length;
6436 if (params.sort !== undefined) {
6437 // use integer as params.sort to specify column, since arrays are not named
6438 // params.sort=0; would also match a array without columns
6439 var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
6440 var fn = function(v1, v2){
6441 return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
6443 result.records.sort(function(a, b){
6445 if (typeof(a) == 'object') {
6446 v = fn(a.data[params.sort], b.data[params.sort]) * dir;
6452 v = (a.index < b.index ? -1 : 1);
6457 // paging (use undefined cause start can also be 0 (thus false))
6458 if (params.start !== undefined && params.limit !== undefined) {
6459 result.records = result.records.slice(params.start, params.start + params.limit);
6461 callback.call(scope, result, options, true);
6466 Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;
6467 Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {
6471 constructor: function(config){
6472 Ext.apply(this, config);
6474 Ext.ux.PanelResizer.superclass.constructor.call(this, config);
6480 if(this.panel.elements.indexOf('footer')==-1){
6481 p.elements += ',footer';
6483 p.on('render', this.onRender, this);
6486 onRender : function(p){
6487 this.handle = p.footer.createChild({cls:'x-panel-resize'});
6489 this.tracker = new Ext.dd.DragTracker({
6490 onStart: this.onDragStart.createDelegate(this),
6491 onDrag: this.onDrag.createDelegate(this),
6492 onEnd: this.onDragEnd.createDelegate(this),
6496 this.tracker.initEl(this.handle);
6497 p.on('beforedestroy', this.tracker.destroy, this.tracker);
6501 onDragStart: function(e){
6502 this.dragging = true;
6503 this.startHeight = this.panel.el.getHeight();
6504 this.fireEvent('dragstart', this, e);
6508 onDrag: function(e){
6509 this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));
6510 this.fireEvent('drag', this, e);
6514 onDragEnd: function(e){
6515 this.dragging = false;
6516 this.fireEvent('dragend', this, e);
6519 Ext.preg('panelresizer', Ext.ux.PanelResizer);Ext.ux.Portal = Ext.extend(Ext.Panel, {
6523 defaultType : 'portalcolumn',
6525 initComponent : function(){
6526 Ext.ux.Portal.superclass.initComponent.call(this);
6529 beforedragover:true,
6536 initEvents : function(){
6537 Ext.ux.Portal.superclass.initEvents.call(this);
6538 this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
6541 beforeDestroy : function() {
6545 Ext.ux.Portal.superclass.beforeDestroy.call(this);
6549 Ext.reg('portal', Ext.ux.Portal);
6551 Ext.ux.Portal.DropZone = Ext.extend(Ext.dd.DropTarget, {
6553 constructor : function(portal, cfg){
6554 this.portal = portal;
6555 Ext.dd.ScrollManager.register(portal.body);
6556 Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
6557 portal.body.ddScrollConfig = this.ddScrollConfig;
6567 createEvent : function(dd, e, data, col, c, pos){
6569 portal: this.portal,
6577 status: this.dropAllowed
6581 notifyOver : function(dd, e, data){
6582 var xy = e.getXY(), portal = this.portal, px = dd.proxy;
6584 // case column widths
6586 this.grid = this.getGrid();
6589 // handle case scroll where scrollbars appear during drag
6590 var cw = portal.body.dom.clientWidth;
6593 }else if(this.lastCW != cw){
6596 this.grid = this.getGrid();
6600 var col = 0, xs = this.grid.columnX, cmatch = false;
6601 for(var len = xs.length; col < len; col++){
6602 if(xy[0] < (xs[col].x + xs[col].w)){
6607 // no match, fix last index
6612 // find insert position
6613 var p, match = false, pos = 0,
6614 c = portal.items.itemAt(col),
6615 items = c.items.items, overSelf = false;
6617 for(var len = items.length; pos < len; pos++){
6619 var h = p.el.getHeight();
6623 else if((p.el.getY()+(h/2)) > xy[1]){
6629 pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);
6630 var overEvent = this.createEvent(dd, e, data, col, c, pos);
6632 if(portal.fireEvent('validatedrop', overEvent) !== false &&
6633 portal.fireEvent('beforedragover', overEvent) !== false){
6635 // make sure proxy width is fluid
6636 px.getProxy().setWidth('auto');
6639 px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
6641 px.moveProxy(c.el.dom, null);
6644 this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};
6645 this.scrollPos = portal.body.getScroll();
6647 portal.fireEvent('dragover', overEvent);
6649 return overEvent.status;
6651 return overEvent.status;
6656 notifyOut : function(){
6660 notifyDrop : function(dd, e, data){
6665 var c = this.lastPos.c,
6666 col = this.lastPos.col,
6667 pos = this.lastPos.p,
6669 dropEvent = this.createEvent(dd, e, data, col, c,
6670 pos !== false ? pos : c.items.getCount());
6672 if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
6673 this.portal.fireEvent('beforedrop', dropEvent) !== false){
6675 dd.proxy.getProxy().remove();
6676 panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
6679 c.insert(pos, panel);
6686 this.portal.fireEvent('drop', dropEvent);
6688 // scroll position is lost on drop, fix it
6689 var st = this.scrollPos.top;
6691 var d = this.portal.body.dom;
6692 setTimeout(function(){
6698 delete this.lastPos;
6701 // internal cache of body and column coords
6702 getGrid : function(){
6703 var box = this.portal.bwrap.getBox();
6705 this.portal.items.each(function(c){
6706 box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
6711 // unregister the dropzone from ScrollManager
6713 Ext.dd.ScrollManager.unregister(this.portal.body);
6714 Ext.ux.Portal.DropZone.superclass.unreg.call(this);
6717 Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
6719 //autoEl : 'div',//already defined by Ext.Component
6720 defaultType : 'portlet',
6721 cls : 'x-portal-column'
6724 Ext.reg('portalcolumn', Ext.ux.PortalColumn);
6725 Ext.ux.Portlet = Ext.extend(Ext.Panel, {
6733 Ext.reg('portlet', Ext.ux.Portlet);
6735 * @class Ext.ux.ProgressBarPager
6737 * Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
6739 * @ptype progressbarpager
6741 * Create a new ItemSelector
6742 * @param {Object} config Configuration options
6743 * @xtype itemselector
6745 Ext.ux.ProgressBarPager = Ext.extend(Object, {
6747 * @cfg {Integer} progBarWidth
6748 * <p>The default progress bar width. Default is 225.</p>
6752 * @cfg {String} defaultText
6753 * <p>The text to display while the store is loading. Default is 'Loading...'</p>
6755 defaultText : 'Loading...',
6757 * @cfg {Object} defaultAnimCfg
6758 * <p>A {@link Ext.Fx Ext.Fx} configuration object. Default is { duration : 1, easing : 'bounceOut' }.</p>
6762 easing : 'bounceOut'
6764 constructor : function(config) {
6766 Ext.apply(this, config);
6770 init : function (parent) {
6772 if(parent.displayInfo){
6773 this.parent = parent;
6774 var ind = parent.items.indexOf(parent.displayItem);
6775 parent.remove(parent.displayItem, true);
6776 this.progressBar = new Ext.ProgressBar({
6777 text : this.defaultText,
6778 width : this.progBarWidth,
6779 animate : this.defaultAnimCfg
6782 parent.displayItem = this.progressBar;
6784 parent.add(parent.displayItem);
6786 Ext.apply(parent, this.parentOverrides);
6788 this.progressBar.on('render', function(pb) {
6789 pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
6790 }, this, {single: true});
6796 // This method handles the click for the progress bar
6797 handleProgressBarClick : function(e){
6798 var parent = this.parent,
6799 displayItem = parent.displayItem,
6800 box = this.progressBar.getBox(),
6802 position = xy[0]-box.x,
6803 pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
6804 newpage = Math.ceil(position/(displayItem.width/pages));
6806 parent.changePage(newpage);
6809 // private, overriddes
6812 // This method updates the information via the progress bar.
6813 updateInfo : function(){
6814 if(this.displayItem){
6815 var count = this.store.getCount(),
6816 pgData = this.getPageData(),
6817 pageNum = this.readPage(pgData),
6822 this.cursor+1, this.cursor+count, this.store.getTotalCount()
6825 pageNum = pgData.activePage; ;
6827 var pct = pageNum / pgData.pages;
6829 this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
6834 Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
6836 Ext.ns('Ext.ux.grid');
6839 * @class Ext.ux.grid.RowEditor
6840 * @extends Ext.Panel
6841 * Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid.
6842 * A validation mode may be enabled which uses AnchorTips to notify the user of all
6843 * validation errors at once.
6847 Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
6851 cls: 'x-small-editor',
6852 buttonAlign: 'center',
6853 baseCls: 'x-row-editor',
6854 elements: 'header,footer,body',
6857 clicksToEdit: 'auto',
6863 cancelText: 'Cancel',
6864 commitChangesText: 'You need to commit or cancel your changes',
6865 errorText: 'Errors',
6871 initComponent: function(){
6872 Ext.ux.grid.RowEditor.superclass.initComponent.call(this);
6876 * Fired before the row editor is activated.
6877 * If the listener returns <tt>false</tt> the editor will not be activated.
6878 * @param {Ext.ux.grid.RowEditor} roweditor This object
6879 * @param {Number} rowIndex The rowIndex of the row just edited
6884 * Fired when the editor is cancelled.
6885 * @param {Ext.ux.grid.RowEditor} roweditor This object
6886 * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
6890 * @event validateedit
6891 * Fired after a row is edited and passes validation.
6892 * If the listener returns <tt>false</tt> changes to the record will not be set.
6893 * @param {Ext.ux.grid.RowEditor} roweditor This object
6894 * @param {Object} changes Object with changes made to the record.
6895 * @param {Ext.data.Record} r The Record that was edited.
6896 * @param {Number} rowIndex The rowIndex of the row just edited
6901 * Fired after a row is edited and passes validation. This event is fired
6902 * after the store's update event is fired with this edit.
6903 * @param {Ext.ux.grid.RowEditor} roweditor This object
6904 * @param {Object} changes Object with changes made to the record.
6905 * @param {Ext.data.Record} r The Record that was edited.
6906 * @param {Number} rowIndex The rowIndex of the row just edited
6912 init: function(grid){
6914 this.ownerCt = grid;
6915 if(this.clicksToEdit === 2){
6916 grid.on('rowdblclick', this.onRowDblClick, this);
6918 grid.on('rowclick', this.onRowClick, this);
6920 grid.on('rowdblclick', this.onRowDblClick, this);
6924 // stopEditing without saving when a record is removed from Store.
6925 grid.getStore().on('remove', function() {
6926 this.stopEditing(false);
6931 keydown: this.onGridKey,
6932 columnresize: this.verifyLayout,
6933 columnmove: this.refreshFields,
6934 reconfigure: this.refreshFields,
6935 beforedestroy : this.beforedestroy,
6936 destroy : this.destroy,
6939 fn: this.positionButtons
6942 grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1});
6943 grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
6946 beforedestroy: function() {
6947 this.stopMonitoring();
6948 this.grid.getStore().un('remove', this.onStoreRemove, this);
6949 this.stopEditing(false);
6950 Ext.destroy(this.btns, this.tooltip);
6953 refreshFields: function(){
6955 this.verifyLayout();
6958 isDirty: function(){
6960 this.items.each(function(f){
6961 if(String(this.values[f.id]) !== String(f.getValue())){
6969 startEditing: function(rowIndex, doFocus){
6970 if(this.editing && this.isDirty()){
6971 this.showTooltip(this.commitChangesText);
6974 if(Ext.isObject(rowIndex)){
6975 rowIndex = this.grid.getStore().indexOf(rowIndex);
6977 if(this.fireEvent('beforeedit', this, rowIndex) !== false){
6978 this.editing = true;
6979 var g = this.grid, view = g.getView(),
6980 row = view.getRow(rowIndex),
6981 record = g.store.getAt(rowIndex);
6983 this.record = record;
6984 this.rowIndex = rowIndex;
6987 this.render(view.getEditorParent());
6989 var w = Ext.fly(row).getWidth();
6991 if(!this.initialized){
6994 var cm = g.getColumnModel(), fields = this.items.items, f, val;
6995 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
6996 val = this.preEditValue(record, cm.getDataIndex(i));
6999 this.values[f.id] = Ext.isEmpty(val) ? '' : val;
7001 this.verifyLayout(true);
7002 if(!this.isVisible()){
7003 this.setPagePosition(Ext.fly(row).getXY());
7005 this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
7007 if(!this.isVisible()){
7008 this.show().doLayout();
7010 if(doFocus !== false){
7011 this.doFocus.defer(this.focusDelay, this);
7016 stopEditing : function(saveChanges){
7017 this.editing = false;
7018 if(!this.isVisible()){
7021 if(saveChanges === false || !this.isValid()){
7023 this.fireEvent('canceledit', this, saveChanges === false);
7029 cm = this.grid.colModel,
7030 fields = this.items.items;
7031 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
7032 if(!cm.isHidden(i)){
7033 var dindex = cm.getDataIndex(i);
7034 if(!Ext.isEmpty(dindex)){
7035 var oldValue = r.data[dindex],
7036 value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
7037 if(String(oldValue) !== String(value)){
7038 changes[dindex] = value;
7044 if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
7046 Ext.iterate(changes, function(name, value){
7050 this.fireEvent('afteredit', this, changes, r, this.rowIndex);
7055 verifyLayout: function(force){
7056 if(this.el && (this.isVisible() || force === true)){
7057 var row = this.grid.getView().getRow(this.rowIndex);
7058 this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + 9 : undefined);
7059 var cm = this.grid.colModel, fields = this.items.items;
7060 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
7061 if(!cm.isHidden(i)){
7063 if(i === (len - 1)){
7064 adjust += 3; // outer padding
7069 fields[i].setWidth(cm.getColumnWidth(i) - adjust);
7075 this.positionButtons();
7079 slideHide : function(){
7083 initFields: function(){
7084 var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
7085 this.removeAll(false);
7086 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
7087 var c = cm.getColumnAt(i),
7090 ed = c.displayEditor || new Ext.form.DisplayField();
7093 ed.margins = pm('0 1 2 1');
7094 } else if(i == len - 1){
7095 ed.margins = pm('0 0 2 1');
7098 ed.margins = pm('0 0 2 0');
7101 ed.margins = pm('0 1 2 0');
7104 ed.setWidth(cm.getColumnWidth(i));
7106 if(ed.ownerCt !== this){
7107 ed.on('focus', this.ensureVisible, this);
7108 ed.on('specialkey', this.onKey, this);
7112 this.initialized = true;
7115 onKey: function(f, e){
7116 if(e.getKey() === e.ENTER){
7117 this.stopEditing(true);
7118 e.stopPropagation();
7122 onGridKey: function(e){
7123 if(e.getKey() === e.ENTER && !this.isVisible()){
7124 var r = this.grid.getSelectionModel().getSelected();
7126 var index = this.grid.store.indexOf(r);
7127 this.startEditing(index);
7128 e.stopPropagation();
7133 ensureVisible: function(editor){
7134 if(this.isVisible()){
7135 this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true);
7139 onRowClick: function(g, rowIndex, e){
7140 if(this.clicksToEdit == 'auto'){
7141 var li = this.lastClickIndex;
7142 this.lastClickIndex = rowIndex;
7143 if(li != rowIndex && !this.isVisible()){
7147 this.startEditing(rowIndex, false);
7148 this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
7151 onRowDblClick: function(g, rowIndex, e){
7152 this.startEditing(rowIndex, false);
7153 this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
7156 onRender: function(){
7157 Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments);
7158 this.el.swallowEvent(['keydown', 'keyup', 'keypress']);
7159 this.btns = new Ext.Panel({
7164 width: (this.minButtonWidth * 2) + (this.frameWidth * 2) + (this.buttonPad * 4), // width must be specified for IE
7169 text: this.saveText,
7170 width: this.minButtonWidth,
7171 handler: this.stopEditing.createDelegate(this, [true])
7174 text: this.cancelText,
7175 width: this.minButtonWidth,
7176 handler: this.stopEditing.createDelegate(this, [false])
7179 this.btns.render(this.bwrap);
7182 afterRender: function(){
7183 Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments);
7184 this.positionButtons();
7185 if(this.monitorValid){
7186 this.startMonitoring();
7191 if(this.monitorValid){
7192 this.startMonitoring();
7194 Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments);
7198 Ext.ux.grid.RowEditor.superclass.onHide.apply(this, arguments);
7199 this.stopMonitoring();
7200 this.grid.getView().focusRow(this.rowIndex);
7203 positionButtons: function(){
7206 h = this.el.dom.clientHeight,
7208 scroll = view.scroller.dom.scrollLeft,
7209 bw = this.btns.getWidth(),
7210 width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
7212 this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
7217 preEditValue : function(r, field){
7218 var value = r.data[field];
7219 return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
7223 postEditValue : function(value, originalValue, r, field){
7224 return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
7227 doFocus: function(pt){
7228 if(this.isVisible()){
7230 cm = this.grid.getColumnModel(),
7233 index = this.getTargetColumnIndex(pt);
7235 for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
7236 c = cm.getColumnAt(i);
7237 if(!c.hidden && c.getEditor()){
7238 c.getEditor().focus();
7245 getTargetColumnIndex: function(pt){
7246 var grid = this.grid,
7249 cms = grid.colModel.config,
7252 for(var len = cms.length, c; c = cms[i]; i++){
7254 if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
7263 startMonitoring : function(){
7264 if(!this.bound && this.monitorValid){
7267 run : this.bindHandler,
7268 interval : this.monitorPoll || 200,
7274 stopMonitoring : function(){
7277 this.tooltip.hide();
7281 isValid: function(){
7283 this.items.each(function(f){
7284 if(!f.isValid(true)){
7293 bindHandler : function(){
7295 return false; // stops binding
7297 var valid = this.isValid();
7298 if(!valid && this.errorSummary){
7299 this.showTooltip(this.getErrorText().join(''));
7301 this.btns.saveBtn.setDisabled(!valid);
7302 this.fireEvent('validation', this, valid);
7305 lastVisibleColumn : function() {
7306 var i = this.items.getCount() - 1,
7308 for(; i >= 0; i--) {
7309 c = this.items.items[i];
7316 showTooltip: function(msg){
7317 var t = this.tooltip;
7319 t = this.tooltip = new Ext.ToolTip({
7323 title: this.errorText,
7326 anchorToTarget: true,
7330 var v = this.grid.getView(),
7331 top = parseInt(this.el.dom.style.top, 10),
7332 scroll = v.scroller.dom.scrollTop,
7333 h = this.el.getHeight();
7335 if(top + h >= scroll){
7336 t.initTarget(this.lastVisibleColumn().getEl());
7344 }else if(t.rendered){
7349 getErrorText: function(){
7350 var data = ['<ul>'];
7351 this.items.each(function(f){
7352 if(!f.isValid(true)){
7353 data.push('<li>', f.getActiveError(), '</li>');
7360 Ext.preg('roweditor', Ext.ux.grid.RowEditor);
7361 Ext.ns('Ext.ux.grid');
7364 * @class Ext.ux.grid.RowExpander
7365 * @extends Ext.util.Observable
7366 * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
7367 * a second row body which expands/contracts. The expand/contract behavior is configurable to react
7368 * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
7370 * @ptype rowexpander
7372 Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
7374 * @cfg {Boolean} expandOnEnter
7375 * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
7376 * key is pressed (defaults to <tt>true</tt>).
7378 expandOnEnter : true,
7380 * @cfg {Boolean} expandOnDblClick
7381 * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
7382 * (defaults to <tt>true</tt>).
7384 expandOnDblClick : true,
7391 menuDisabled : true,
7395 enableCaching : true,
7397 constructor: function(config){
7398 Ext.apply(this, config);
7402 * @event beforeexpand
7403 * Fires before the row expands. Have the listener return false to prevent the row from expanding.
7404 * @param {Object} this RowExpander object.
7405 * @param {Object} Ext.data.Record Record for the selected row.
7406 * @param {Object} body body element for the secondary row.
7407 * @param {Number} rowIndex The current row index.
7412 * Fires after the row expands.
7413 * @param {Object} this RowExpander object.
7414 * @param {Object} Ext.data.Record Record for the selected row.
7415 * @param {Object} body body element for the secondary row.
7416 * @param {Number} rowIndex The current row index.
7420 * @event beforecollapse
7421 * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
7422 * @param {Object} this RowExpander object.
7423 * @param {Object} Ext.data.Record Record for the selected row.
7424 * @param {Object} body body element for the secondary row.
7425 * @param {Number} rowIndex The current row index.
7427 beforecollapse: true,
7430 * Fires after the row collapses.
7431 * @param {Object} this RowExpander object.
7432 * @param {Object} Ext.data.Record Record for the selected row.
7433 * @param {Object} body body element for the secondary row.
7434 * @param {Number} rowIndex The current row index.
7439 Ext.ux.grid.RowExpander.superclass.constructor.call(this);
7442 if(typeof this.tpl == 'string'){
7443 this.tpl = new Ext.Template(this.tpl);
7449 this.bodyContent = {};
7452 getRowClass : function(record, rowIndex, p, ds){
7454 var content = this.bodyContent[record.id];
7455 if(!content && !this.lazyRender){
7456 content = this.getBodyContent(record, rowIndex);
7461 return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
7464 init : function(grid){
7467 var view = grid.getView();
7468 view.getRowClass = this.getRowClass.createDelegate(this);
7470 view.enableRowBody = true;
7473 grid.on('render', this.onRender, this);
7474 grid.on('destroy', this.onDestroy, this);
7478 onRender: function() {
7479 var grid = this.grid;
7480 var mainBody = grid.getView().mainBody;
7481 mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
7482 if (this.expandOnEnter) {
7483 this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
7484 'enter' : this.onEnter,
7488 if (this.expandOnDblClick) {
7489 grid.on('rowdblclick', this.onRowDblClick, this);
7494 onDestroy: function() {
7496 this.keyNav.disable();
7500 * A majority of the time, the plugin will be destroyed along with the grid,
7501 * which means the mainBody won't be available. On the off chance that the plugin
7502 * isn't destroyed with the grid, take care of removing the listener.
7504 var mainBody = this.grid.getView().mainBody;
7506 mainBody.un('mousedown', this.onMouseDown, this);
7510 onRowDblClick: function(grid, rowIdx, e) {
7511 this.toggleRow(rowIdx);
7514 onEnter: function(e) {
7516 var sm = g.getSelectionModel();
7517 var sels = sm.getSelections();
7518 for (var i = 0, len = sels.length; i < len; i++) {
7519 var rowIdx = g.getStore().indexOf(sels[i]);
7520 this.toggleRow(rowIdx);
7524 getBodyContent : function(record, index){
7525 if(!this.enableCaching){
7526 return this.tpl.apply(record.data);
7528 var content = this.bodyContent[record.id];
7530 content = this.tpl.apply(record.data);
7531 this.bodyContent[record.id] = content;
7536 onMouseDown : function(e, t){
7538 var row = e.getTarget('.x-grid3-row');
7539 this.toggleRow(row);
7542 renderer : function(v, p, record){
7543 p.cellAttr = 'rowspan="2"';
7544 return '<div class="x-grid3-row-expander"> </div>';
7547 beforeExpand : function(record, body, rowIndex){
7548 if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
7549 if(this.tpl && this.lazyRender){
7550 body.innerHTML = this.getBodyContent(record, rowIndex);
7558 toggleRow : function(row){
7559 if(typeof row == 'number'){
7560 row = this.grid.view.getRow(row);
7562 this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
7565 expandRow : function(row){
7566 if(typeof row == 'number'){
7567 row = this.grid.view.getRow(row);
7569 var record = this.grid.store.getAt(row.rowIndex);
7570 var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
7571 if(this.beforeExpand(record, body, row.rowIndex)){
7572 this.state[record.id] = true;
7573 Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
7574 this.fireEvent('expand', this, record, body, row.rowIndex);
7578 collapseRow : function(row){
7579 if(typeof row == 'number'){
7580 row = this.grid.view.getRow(row);
7582 var record = this.grid.store.getAt(row.rowIndex);
7583 var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
7584 if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
7585 this.state[record.id] = false;
7586 Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
7587 this.fireEvent('collapse', this, record, body, row.rowIndex);
7592 Ext.preg('rowexpander', Ext.ux.grid.RowExpander);
7595 Ext.grid.RowExpander = Ext.ux.grid.RowExpander;// We are adding these custom layouts to a namespace that does not
7596 // exist by default in Ext, so we have to add the namespace first:
7597 Ext.ns('Ext.ux.layout');
7600 * @class Ext.ux.layout.RowLayout
7601 * @extends Ext.layout.ContainerLayout
7602 * <p>This is the layout style of choice for creating structural layouts in a multi-row format where the height of
7603 * each row can be specified as a percentage or fixed height. Row widths can also be fixed, percentage or auto.
7604 * This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config,
7605 * and should generally not need to be created directly via the new keyword.</p>
7606 * <p>RowLayout does not have any direct config options (other than inherited ones), but it does support a
7607 * specific config property of <b><tt>rowHeight</tt></b> that can be included in the config of any panel added to it. The
7608 * layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel.
7609 * If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).</p>
7610 * <p>The height property is always evaluated as pixels, and must be a number greater than or equal to 1.
7611 * The rowHeight property is always evaluated as a percentage, and must be a decimal value greater than 0 and
7612 * less than 1 (e.g., .25).</p>
7613 * <p>The basic rules for specifying row heights are pretty simple. The logic makes two passes through the
7614 * set of contained panels. During the first layout pass, all panels that either have a fixed height or none
7615 * specified (auto) are skipped, but their heights are subtracted from the overall container height. During the second
7616 * pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on
7617 * the total <b>remaining</b> container height. In other words, percentage height panels are designed to fill the space
7618 * left over by all the fixed-height and/or auto-height panels. Because of this, while you can specify any number of rows
7619 * with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your
7620 * layout may not render as expected. Example usage:</p>
7622 // All rows are percentages -- they must add up to 1
7623 var p = new Ext.Panel({
7624 title: 'Row Layout - Percentage Only',
7638 // Mix of height and rowHeight -- all rowHeight values must add
7639 // up to 1. The first row will take up exactly 120px, and the last two
7640 // rows will fill the remaining container height.
7641 var p = new Ext.Panel({
7642 title: 'Row Layout - Mixed',
7647 // standard panel widths are still supported too:
7648 width: '50%' // or 200
7660 Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {
7667 allowContainerRemove: false,
7670 isValidParent : function(c, target){
7671 return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
7674 getLayoutTargetSize : function() {
7675 var target = this.container.getLayoutTarget(), ret;
7677 ret = target.getViewSize();
7679 // IE in strict mode will return a height of 0 on the 1st pass of getViewSize.
7680 // Use getStyleSize to verify the 0 height, the adjustment pass will then work properly
7682 if (Ext.isIE && Ext.isStrict && ret.height == 0){
7683 ret = target.getStyleSize();
7686 ret.width -= target.getPadding('lr');
7687 ret.height -= target.getPadding('tb');
7692 renderAll : function(ct, target) {
7694 // the innerCt prevents wrapping and shuffling while
7695 // the container is resizing
7696 this.innerCt = target.createChild({cls:'x-column-inner'});
7697 this.innerCt.createChild({cls:'x-clear'});
7699 Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
7703 onLayout : function(ct, target){
7704 var rs = ct.items.items,
7711 this.renderAll(ct, target);
7713 var size = this.getLayoutTargetSize();
7715 if(size.width < 1 && size.height < 1){ // display none?
7719 var h = size.height,
7722 this.innerCt.setSize({height:h});
7724 // some rows can be percentages while others are fixed
7725 // so we need to make 2 passes
7727 for(i = 0; i < len; i++){
7729 m = r.getPositionEl().getMargins('tb');
7732 ph -= (r.getHeight() + m);
7736 ph = ph < 0 ? 0 : ph;
7738 for(i = 0; i < len; i++){
7742 r.setSize({height: Math.floor(r.rowHeight*ph) - m});
7746 // Browsers differ as to when they account for scrollbars. We need to re-measure to see if the scrollbar
7747 // spaces were accounted for properly. If not, re-layout.
7749 if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) {
7750 var ts = this.getLayoutTargetSize();
7751 if (ts.width != size.width){
7752 this.adjustmentPass = true;
7753 this.onLayout(ct, target);
7757 delete this.adjustmentPass;
7761 * @property activeItem
7766 Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout;
7767 Ext.ns('Ext.ux.form');
7769 Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
7770 initComponent : function(){
7771 Ext.ux.form.SearchField.superclass.initComponent.call(this);
7772 this.on('specialkey', function(f, e){
7773 if(e.getKey() == e.ENTER){
7774 this.onTrigger2Click();
7779 validationEvent:false,
7780 validateOnBlur:false,
7781 trigger1Class:'x-form-clear-trigger',
7782 trigger2Class:'x-form-search-trigger',
7786 paramName : 'query',
7788 onTrigger1Click : function(){
7790 this.el.dom.value = '';
7792 this.store.baseParams = this.store.baseParams || {};
7793 this.store.baseParams[this.paramName] = '';
7794 this.store.reload({params:o});
7795 this.triggers[0].hide();
7796 this.hasSearch = false;
7800 onTrigger2Click : function(){
7801 var v = this.getRawValue();
7803 this.onTrigger1Click();
7807 this.store.baseParams = this.store.baseParams || {};
7808 this.store.baseParams[this.paramName] = v;
7809 this.store.reload({params:o});
7810 this.hasSearch = true;
7811 this.triggers[0].show();
7813 });Ext.ns('Ext.ux.form');
7816 * @class Ext.ux.form.SelectBox
7817 * @extends Ext.form.ComboBox
7818 * <p>Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging
7819 * through the list, with item selection occurring when the mouse button is released.
7820 * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
7821 * on inner elements. Re-enabling editable after calling this will NOT work.</p>
7822 * @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
7823 * @history 2007-07-08 jvs
7824 * Slight mods for Ext 2.0
7827 Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
7828 constructor: function(config){
7829 this.searchResetDelay = 1000;
7830 config = config || {};
7831 config = Ext.apply(config || {}, {
7833 forceSelection: true,
7835 lastSearchTerm: false,
7836 triggerAction: 'all',
7840 Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);
7842 this.lastSelectedIndex = this.selectedIndex || 0;
7845 initEvents : function(){
7846 Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);
7847 // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
7848 this.el.on('keydown', this.keySearch, this, true);
7849 this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
7852 keySearch : function(e, target, options) {
7853 var raw = e.getKey();
7854 var key = String.fromCharCode(raw);
7857 if( !this.store.getCount() ) {
7862 case Ext.EventObject.HOME:
7867 case Ext.EventObject.END:
7872 case Ext.EventObject.PAGEDOWN:
7873 this.selectNextPage();
7877 case Ext.EventObject.PAGEUP:
7878 this.selectPrevPage();
7883 // skip special keys other than the shift key
7884 if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
7887 if( this.lastSearchTerm == key ) {
7888 startIndex = this.lastSelectedIndex;
7890 this.search(this.displayField, key, startIndex);
7891 this.cshTask.delay(this.searchResetDelay);
7894 onRender : function(ct, position) {
7895 this.store.on('load', this.calcRowsPerPage, this);
7896 Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
7897 if( this.mode == 'local' ) {
7899 this.calcRowsPerPage();
7903 onSelect : function(record, index, skipCollapse){
7904 if(this.fireEvent('beforeselect', this, record, index) !== false){
7905 this.setValue(record.data[this.valueField || this.displayField]);
7906 if( !skipCollapse ) {
7909 this.lastSelectedIndex = index + 1;
7910 this.fireEvent('select', this, record, index);
7914 afterRender : function() {
7915 Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
7917 this.el.swallowEvent('mousedown', true);
7919 this.el.unselectable();
7920 this.innerList.unselectable();
7921 this.trigger.unselectable();
7922 this.innerList.on('mouseup', function(e, target, options) {
7923 if( target.id && target.id == this.innerList.id ) {
7929 this.innerList.on('mouseover', function(e, target, options) {
7930 if( target.id && target.id == this.innerList.id ) {
7933 this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
7934 this.cshTask.delay(this.searchResetDelay);
7937 this.trigger.un('click', this.onTriggerClick, this);
7938 this.trigger.on('mousedown', function(e, target, options) {
7940 this.onTriggerClick();
7943 this.on('collapse', function(e, target, options) {
7944 Ext.getDoc().un('mouseup', this.collapseIf, this);
7947 this.on('expand', function(e, target, options) {
7948 Ext.getDoc().on('mouseup', this.collapseIf, this);
7952 clearSearchHistory : function() {
7953 this.lastSelectedIndex = 0;
7954 this.lastSearchTerm = false;
7957 selectFirst : function() {
7958 this.focusAndSelect(this.store.data.first());
7961 selectLast : function() {
7962 this.focusAndSelect(this.store.data.last());
7965 selectPrevPage : function() {
7966 if( !this.rowHeight ) {
7969 var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
7970 this.focusAndSelect(this.store.getAt(index));
7973 selectNextPage : function() {
7974 if( !this.rowHeight ) {
7977 var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
7978 this.focusAndSelect(this.store.getAt(index));
7981 search : function(field, value, startIndex) {
7982 field = field || this.displayField;
7983 this.lastSearchTerm = value;
7984 var index = this.store.find.apply(this.store, arguments);
7985 if( index !== -1 ) {
7986 this.focusAndSelect(index);
7990 focusAndSelect : function(record) {
7991 var index = Ext.isNumber(record) ? record : this.store.indexOf(record);
7992 this.select(index, this.isExpanded());
7993 this.onSelect(this.store.getAt(index), index, this.isExpanded());
7996 calcRowsPerPage : function() {
7997 if( this.store.getCount() ) {
7998 this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
7999 this.rowsPerPage = this.maxHeight / this.rowHeight;
8001 this.rowHeight = false;
8007 Ext.reg('selectbox', Ext.ux.form.SelectBox);
8010 Ext.ux.SelectBox = Ext.ux.form.SelectBox;
8012 * Plugin for PagingToolbar which replaces the textfield input with a slider
8014 Ext.ux.SlidingPager = Ext.extend(Object, {
8015 init : function(pbar){
8016 var idx = pbar.items.indexOf(pbar.inputItem);
8017 Ext.each(pbar.items.getRange(idx - 2, idx + 2), function(c){
8020 var slider = new Ext.Slider({
8024 plugins: new Ext.slider.Tip({
8025 getText : function(thumb) {
8026 return String.format('Page <b>{0}</b> of <b>{1}</b>', thumb.value, thumb.slider.maxValue);
8030 changecomplete: function(s, v){
8035 pbar.insert(idx + 1, slider);
8037 change: function(pb, data){
8038 slider.setMaxValue(data.pages);
8039 slider.setValue(data.activePage);
8043 });Ext.ns('Ext.ux.form');
8046 * @class Ext.ux.form.SpinnerField
8047 * @extends Ext.form.NumberField
8048 * Creates a field utilizing Ext.ux.Spinner
8049 * @xtype spinnerfield
8051 Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
8054 autoSize: Ext.emptyFn,
8055 onBlur: Ext.emptyFn,
8056 adjustSize: Ext.BoxComponent.prototype.adjustSize,
8058 constructor: function(config) {
8059 var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');
8061 var spl = this.spinner = new Ext.ux.Spinner(spinnerConfig);
8063 var plugins = config.plugins
8064 ? (Ext.isArray(config.plugins)
8065 ? config.plugins.push(spl)
8066 : [config.plugins, spl])
8069 Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
8073 getResizeEl: function(){
8078 getPositionEl: function(){
8083 alignErrorIcon: function(){
8085 this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
8089 validateBlur: function(){
8094 Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);
8097 Ext.form.SpinnerField = Ext.ux.form.SpinnerField;
8099 * @class Ext.ux.Spinner
8100 * @extends Ext.util.Observable
8101 * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
8103 Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
8105 alternateIncrementValue: 5,
8106 triggerClass: 'x-form-spinner-trigger',
8107 splitterClass: 'x-form-spinner-splitter',
8108 alternateKey: Ext.EventObject.shiftKey,
8112 constructor: function(config){
8113 Ext.ux.Spinner.superclass.constructor.call(this, config);
8114 Ext.apply(this, config);
8115 this.mimicing = false;
8118 init: function(field){
8121 field.afterMethod('onRender', this.doRender, this);
8122 field.afterMethod('onEnable', this.doEnable, this);
8123 field.afterMethod('onDisable', this.doDisable, this);
8124 field.afterMethod('afterRender', this.doAfterRender, this);
8125 field.afterMethod('onResize', this.doResize, this);
8126 field.afterMethod('onFocus', this.doFocus, this);
8127 field.beforeMethod('onDestroy', this.doDestroy, this);
8130 doRender: function(ct, position){
8131 var el = this.el = this.field.getEl();
8135 f.wrap = this.wrap = el.wrap({
8136 cls: "x-form-field-wrap"
8140 this.wrap = f.wrap.addClass('x-form-field-wrap');
8143 this.trigger = this.wrap.createChild({
8145 src: Ext.BLANK_IMAGE_URL,
8146 cls: "x-form-trigger " + this.triggerClass
8150 this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
8153 this.splitter = this.wrap.createChild({
8155 cls: this.splitterClass,
8156 style: 'width:13px; height:2px;'
8158 this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
8160 this.proxy = this.trigger.createProxy('', this.splitter, true);
8161 this.proxy.addClass("x-form-spinner-proxy");
8162 this.proxy.setStyle('left', '0px');
8163 this.proxy.setSize(14, 1);
8165 this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
8166 dragElId: this.proxy.id
8173 doAfterRender: function(){
8175 if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
8181 doEnable: function(){
8183 this.disabled = false;
8184 this.wrap.removeClass(this.field.disabledClass);
8188 doDisable: function(){
8190 this.disabled = true;
8191 this.wrap.addClass(this.field.disabledClass);
8192 this.el.removeClass(this.field.disabledClass);
8196 doResize: function(w, h){
8197 if (typeof w == 'number') {
8198 this.el.setWidth(w - this.trigger.getWidth());
8200 this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
8203 doFocus: function(){
8204 if (!this.mimicing) {
8205 this.wrap.addClass('x-trigger-wrap-focus');
8206 this.mimicing = true;
8207 Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
8210 this.el.on('keydown', this.checkTab, this);
8215 checkTab: function(e){
8216 if (e.getKey() == e.TAB) {
8222 mimicBlur: function(e){
8223 if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
8229 triggerBlur: function(){
8230 this.mimicing = false;
8231 Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
8232 this.el.un("keydown", this.checkTab, this);
8233 this.field.beforeBlur();
8234 this.wrap.removeClass('x-trigger-wrap-focus');
8235 this.field.onBlur.call(this.field);
8238 initTrigger: function(){
8239 this.trigger.addClassOnOver('x-form-trigger-over');
8240 this.trigger.addClassOnClick('x-form-trigger-click');
8243 initSpinner: function(){
8244 this.field.addEvents({
8250 this.keyNav = new Ext.KeyNav(this.el, {
8256 "down": function(e){
8261 "pageUp": function(e){
8263 this.onSpinUpAlternate();
8266 "pageDown": function(e){
8268 this.onSpinDownAlternate();
8274 this.repeater = new Ext.util.ClickRepeater(this.trigger, {
8275 accelerate: this.accelerate
8277 this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
8278 preventDefault: true
8281 this.field.mon(this.trigger, {
8282 mouseover: this.onMouseOver,
8283 mouseout: this.onMouseOut,
8284 mousemove: this.onMouseMove,
8285 mousedown: this.onMouseDown,
8286 mouseup: this.onMouseUp,
8288 preventDefault: true
8291 this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
8293 this.dd.setXConstraint(0, 0, 10)
8294 this.dd.setYConstraint(1500, 1500, 10);
8295 this.dd.endDrag = this.endDrag.createDelegate(this);
8296 this.dd.startDrag = this.startDrag.createDelegate(this);
8297 this.dd.onDrag = this.onDrag.createDelegate(this);
8300 onMouseOver: function(){
8301 if (this.disabled) {
8304 var middle = this.getMiddle();
8305 this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
8306 this.trigger.addClass(this.tmpHoverClass);
8310 onMouseOut: function(){
8311 this.trigger.removeClass(this.tmpHoverClass);
8315 onMouseMove: function(){
8316 if (this.disabled) {
8319 var middle = this.getMiddle();
8320 if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
8321 ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
8326 onMouseDown: function(){
8327 if (this.disabled) {
8330 var middle = this.getMiddle();
8331 this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
8332 this.trigger.addClass(this.tmpClickClass);
8336 onMouseUp: function(){
8337 this.trigger.removeClass(this.tmpClickClass);
8341 onTriggerClick: function(){
8342 if (this.disabled || this.el.dom.readOnly) {
8345 var middle = this.getMiddle();
8346 var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
8347 this['onSpin' + ud]();
8351 getMiddle: function(){
8352 var t = this.trigger.getTop();
8353 var h = this.trigger.getHeight();
8354 var middle = t + (h / 2);
8359 //checks if control is allowed to spin
8360 isSpinnable: function(){
8361 if (this.disabled || this.el.dom.readOnly) {
8362 Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
8368 handleMouseWheel: function(e){
8369 //disable scrolling when not focused
8370 if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
8374 var delta = e.getWheelDelta();
8387 startDrag: function(){
8389 this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
8393 endDrag: function(){
8399 if (this.disabled) {
8402 var y = Ext.fly(this.dd.getDragEl()).getTop();
8405 if (this._previousY > y) {
8408 if (this._previousY < y) {
8412 this['onSpin' + ud]();
8415 this._previousY = y;
8419 onSpinUp: function(){
8420 if (this.isSpinnable() == false) {
8423 if (Ext.EventObject.shiftKey == true) {
8424 this.onSpinUpAlternate();
8428 this.spin(false, false);
8430 this.field.fireEvent("spin", this);
8431 this.field.fireEvent("spinup", this);
8435 onSpinDown: function(){
8436 if (this.isSpinnable() == false) {
8439 if (Ext.EventObject.shiftKey == true) {
8440 this.onSpinDownAlternate();
8444 this.spin(true, false);
8446 this.field.fireEvent("spin", this);
8447 this.field.fireEvent("spindown", this);
8451 onSpinUpAlternate: function(){
8452 if (this.isSpinnable() == false) {
8455 this.spin(false, true);
8456 this.field.fireEvent("spin", this);
8457 this.field.fireEvent("spinup", this);
8461 onSpinDownAlternate: function(){
8462 if (this.isSpinnable() == false) {
8465 this.spin(true, true);
8466 this.field.fireEvent("spin", this);
8467 this.field.fireEvent("spindown", this);
8470 spin: function(down, alternate){
8471 var v = parseFloat(this.field.getValue());
8472 var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
8473 (down == true) ? v -= incr : v += incr;
8475 v = (isNaN(v)) ? this.defaultValue : v;
8476 v = this.fixBoundries(v);
8477 this.field.setRawValue(v);
8480 fixBoundries: function(value){
8483 if (this.field.minValue != undefined && v < this.field.minValue) {
8484 v = this.field.minValue;
8486 if (this.field.maxValue != undefined && v > this.field.maxValue) {
8487 v = this.field.maxValue;
8490 return this.fixPrecision(v);
8494 fixPrecision: function(value){
8495 var nan = isNaN(value);
8496 if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
8497 return nan ? '' : value;
8499 return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
8502 doDestroy: function(){
8504 this.trigger.remove();
8508 delete this.field.wrap;
8511 if (this.splitter) {
8512 this.splitter.remove();
8521 this.proxy.remove();
8524 if (this.repeater) {
8525 this.repeater.purgeListeners();
8528 Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
8534 Ext.form.Spinner = Ext.ux.Spinner;Ext.ux.Spotlight = function(config){
8535 Ext.apply(this, config);
8537 Ext.ux.Spotlight.prototype = {
8546 createElements : function(){
8547 var bd = Ext.getBody();
8549 this.right = bd.createChild({cls:'x-spotlight'});
8550 this.left = bd.createChild({cls:'x-spotlight'});
8551 this.top = bd.createChild({cls:'x-spotlight'});
8552 this.bottom = bd.createChild({cls:'x-spotlight'});
8554 this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
8557 show : function(el, callback, scope){
8559 this.show.defer(50, this, [el, callback, scope]);
8562 this.el = Ext.get(el);
8564 this.createElements();
8567 this.all.setDisplayed('');
8568 this.applyBounds(true, false);
8570 Ext.EventManager.onWindowResize(this.syncSize, this);
8571 this.applyBounds(false, this.animate, false, callback, scope);
8573 this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
8577 hide : function(callback, scope){
8579 this.hide.defer(50, this, [callback, scope]);
8582 Ext.EventManager.removeResizeListener(this.syncSize, this);
8583 this.applyBounds(true, this.animate, true, callback, scope);
8586 doHide : function(){
8587 this.active = false;
8588 this.all.setDisplayed(false);
8591 syncSize : function(){
8592 this.applyBounds(false, false);
8595 applyBounds : function(basePts, anim, doHide, callback, scope){
8597 var rg = this.el.getRegion();
8599 var dw = Ext.lib.Dom.getViewWidth(true);
8600 var dh = Ext.lib.Dom.getViewHeight(true);
8602 var c = 0, cb = false;
8605 callback: function(){
8608 this.animated = false;
8612 Ext.callback(callback, scope, [this]);
8616 duration: this.duration,
8619 this.animated = true;
8622 this.right.setBounds(
8624 basePts ? dh : rg.top,
8626 basePts ? 0 : (dh - rg.top),
8629 this.left.setBounds(
8633 basePts ? 0 : rg.bottom,
8637 basePts ? dw : rg.left,
8639 basePts ? 0 : dw - rg.left,
8643 this.bottom.setBounds(
8646 basePts ? 0 : rg.right,
8655 Ext.callback(callback, scope, [this]);
8660 destroy : function(){
8673 Ext.Spotlight = Ext.ux.Spotlight;/**
8674 * @class Ext.ux.StatusBar
8675 * <p>Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}. In addition to
8676 * supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar
8677 * provides a greedy status element that can be aligned to either side and has convenient methods for setting the
8678 * status text and icon. You can also indicate that something is processing using the {@link #showBusy} method.</p>
8683 bbar: new Ext.ux.StatusBar({
8686 // defaults to use when the status is cleared:
8687 defaultText: 'Default status text',
8688 defaultIconCls: 'default-icon',
8690 // values to set initially:
8692 iconCls: 'ready-icon',
8694 // any standard Toolbar items:
8697 }, '-', 'Plain Text']
8701 // Update the status bar later in code:
8702 var sb = Ext.getCmp('my-status');
8706 clear: true // auto-clear after a set interval
8709 // Set the status bar to show that something is processing:
8714 sb.clearStatus(); // once completeed
8716 * @extends Ext.Toolbar
8718 * Creates a new StatusBar
8719 * @param {Object/Array} config A config object
8721 Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
8723 * @cfg {String} statusAlign
8724 * The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered,
8725 * it creates an internal div containing the status text and icon. Any additional Toolbar items added in the
8726 * StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* methods, will be
8727 * rendered, in added order, to the opposite side. The status element is greedy, so it will automatically
8728 * expand to take up all sapce left over by any other items. Example usage:
8730 // Create a left-aligned status bar containing a button,
8731 // separator and text item that will be right-aligned (default):
8735 bbar: new Ext.ux.StatusBar({
8736 defaultText: 'Default status text',
8740 }, '-', 'Plain Text']
8744 // By adding the statusAlign config, this will create the
8745 // exact same toolbar, except the status and toolbar item
8746 // layout will be reversed from the previous example:
8750 bbar: new Ext.ux.StatusBar({
8751 defaultText: 'Default status text',
8753 statusAlign: 'right',
8756 }, '-', 'Plain Text']
8762 * @cfg {String} defaultText
8763 * The default {@link #text} value. This will be used anytime the status bar is cleared with the
8764 * <tt>useDefaults:true</tt> option (defaults to '').
8767 * @cfg {String} defaultIconCls
8768 * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).
8769 * This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').
8772 * @cfg {String} text
8773 * A string that will be <b>initially</b> set as the status message. This string
8774 * will be set as innerHTML (html tags are accepted) for the toolbar item.
8775 * If not specified, the value set for <code>{@link #defaultText}</code>
8779 * @cfg {String} iconCls
8780 * A CSS class that will be <b>initially</b> set as the status bar icon and is
8781 * expected to provide a background image (defaults to '').
8782 * Example usage:<pre><code>
8783 // Example CSS rule:
8784 .x-statusbar .x-status-custom {
8786 background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
8789 // Setting a default icon:
8790 var sb = new Ext.ux.StatusBar({
8791 defaultIconCls: 'x-status-custom'
8794 // Changing the icon:
8797 iconCls: 'x-status-custom'
8804 * The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
8806 cls : 'x-statusbar',
8808 * @cfg {String} busyIconCls
8809 * The default <code>{@link #iconCls}</code> applied when calling
8810 * <code>{@link #showBusy}</code> (defaults to <tt>'x-status-busy'</tt>).
8811 * It can be overridden at any time by passing the <code>iconCls</code>
8812 * argument into <code>{@link #showBusy}</code>.
8814 busyIconCls : 'x-status-busy',
8816 * @cfg {String} busyText
8817 * The default <code>{@link #text}</code> applied when calling
8818 * <code>{@link #showBusy}</code> (defaults to <tt>'Loading...'</tt>).
8819 * It can be overridden at any time by passing the <code>text</code>
8820 * argument into <code>{@link #showBusy}</code>.
8822 busyText : 'Loading...',
8824 * @cfg {Number} autoClear
8825 * The number of milliseconds to wait after setting the status via
8826 * <code>{@link #setStatus}</code> before automatically clearing the status
8827 * text and icon (defaults to <tt>5000</tt>). Note that this only applies
8828 * when passing the <tt>clear</tt> argument to <code>{@link #setStatus}</code>
8829 * since that is the only way to defer clearing the status. This can
8830 * be overridden by specifying a different <tt>wait</tt> value in
8831 * <code>{@link #setStatus}</code>. Calls to <code>{@link #clearStatus}</code>
8832 * always clear the status bar immediately and ignore this value.
8837 * @cfg {String} emptyText
8838 * The text string to use if no text has been set. Defaults to
8839 * <tt>' '</tt>). If there are no other items in the toolbar using
8840 * an empty string (<tt>''</tt>) for this value would end up in the toolbar
8841 * height collapsing since the empty string will not maintain the toolbar
8842 * height. Use <tt>''</tt> if the toolbar should collapse in height
8843 * vertically when no text is specified and there are no other items in
8846 emptyText : ' ',
8852 initComponent : function(){
8853 if(this.statusAlign=='right'){
8854 this.cls += ' x-status-right';
8856 Ext.ux.StatusBar.superclass.initComponent.call(this);
8860 afterRender : function(){
8861 Ext.ux.StatusBar.superclass.afterRender.call(this);
8863 var right = this.statusAlign == 'right';
8864 this.currIconCls = this.iconCls || this.defaultIconCls;
8865 this.statusEl = new Ext.Toolbar.TextItem({
8866 cls: 'x-status-text ' + (this.currIconCls || ''),
8867 text: this.text || this.defaultText || ''
8872 this.add(this.statusEl);
8874 this.insert(0, this.statusEl);
8875 this.insert(1, '->');
8881 * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
8882 * status that was set after a specified interval.
8883 * @param {Object/String} config A config object specifying what status to set, or a string assumed
8884 * to be the status text (and all other options are defaulted as explained below). A config
8885 * object containing any or all of the following properties can be passed:<ul>
8886 * <li><tt>text</tt> {String} : (optional) The status text to display. If not specified, any current
8887 * status text will remain unchanged.</li>
8888 * <li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see
8889 * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.</li>
8890 * <li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
8891 * automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
8892 * specified, the new status will not be auto-cleared and will stay until updated again or cleared using
8893 * {@link #clearStatus}. If <tt>true</tt> is passed, the status will be cleared using {@link #autoClear},
8894 * {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed,
8895 * it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value.
8896 * All other options will be defaulted as with the boolean option. To customize any other options,
8897 * you can pass an object in the format:<ul>
8898 * <li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing
8899 * (defaults to {@link #autoClear}).</li>
8900 * <li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback
8901 * executes (defaults to true which fades the status out).</li>
8902 * <li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls
8903 * (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).</li>
8905 * Example usage:<pre><code>
8906 // Simple call to update the text
8907 statusBar.setStatus('New status');
8909 // Set the status and icon, auto-clearing with default options:
8910 statusBar.setStatus({
8912 iconCls: 'x-status-custom',
8916 // Auto-clear with custom options:
8917 statusBar.setStatus({
8919 iconCls: 'x-status-custom',
8927 * @return {Ext.ux.StatusBar} this
8929 setStatus : function(o){
8932 if(typeof o == 'string'){
8935 if(o.text !== undefined){
8936 this.setText(o.text);
8938 if(o.iconCls !== undefined){
8939 this.setIcon(o.iconCls);
8944 wait = this.autoClear,
8945 defaults = {useDefaults: true, anim: true};
8947 if(typeof c == 'object'){
8948 c = Ext.applyIf(c, defaults);
8952 }else if(typeof c == 'number'){
8955 }else if(typeof c == 'boolean'){
8959 c.threadId = this.activeThreadId;
8960 this.clearStatus.defer(wait, this, [c]);
8966 * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
8967 * @param {Object} config (optional) A config object containing any or all of the following properties. If this
8968 * object is not specified the status will be cleared using the defaults below:<ul>
8969 * <li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults
8970 * to false which clears immediately).</li>
8971 * <li><tt>useDefaults</tt> {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and
8972 * {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).</li>
8974 * @return {Ext.ux.StatusBar} this
8976 clearStatus : function(o){
8979 if(o.threadId && o.threadId !== this.activeThreadId){
8980 // this means the current call was made internally, but a newer
8981 // thread has set a message since this call was deferred. Since
8982 // we don't want to overwrite a newer message just ignore.
8986 var text = o.useDefaults ? this.defaultText : this.emptyText,
8987 iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
8990 // animate the statusEl Ext.Element
8991 this.statusEl.el.fadeOut({
8995 callback: function(){
9001 this.statusEl.el.show();
9005 // hide/show the el to avoid jumpy text or icon
9006 this.statusEl.hide();
9011 this.statusEl.show();
9017 * Convenience method for setting the status text directly. For more flexible options see {@link #setStatus}.
9018 * @param {String} text (optional) The text to set (defaults to '')
9019 * @return {Ext.ux.StatusBar} this
9021 setText : function(text){
9022 this.activeThreadId++;
9023 this.text = text || '';
9025 this.statusEl.setText(this.text);
9031 * Returns the current status text.
9032 * @return {String} The status text
9034 getText : function(){
9039 * Convenience method for setting the status icon directly. For more flexible options see {@link #setStatus}.
9040 * See {@link #iconCls} for complete details about customizing the icon.
9041 * @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)
9042 * @return {Ext.ux.StatusBar} this
9044 setIcon : function(cls){
9045 this.activeThreadId++;
9049 if(this.currIconCls){
9050 this.statusEl.removeClass(this.currIconCls);
9051 this.currIconCls = null;
9054 this.statusEl.addClass(cls);
9055 this.currIconCls = cls;
9058 this.currIconCls = cls;
9064 * Convenience method for setting the status text and icon to special values that are pre-configured to indicate
9065 * a "busy" state, usually for loading or processing activities.
9066 * @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
9067 * string to use as the status text (in which case all other options for setStatus will be defaulted). Use the
9068 * <tt>text</tt> and/or <tt>iconCls</tt> properties on the config to override the default {@link #busyText}
9069 * and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and
9070 * {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
9071 * @return {Ext.ux.StatusBar} this
9073 showBusy : function(o){
9074 if(typeof o == 'string'){
9077 o = Ext.applyIf(o || {}, {
9078 text: this.busyText,
9079 iconCls: this.busyIconCls
9081 return this.setStatus(o);
9084 Ext.reg('statusbar', Ext.ux.StatusBar);
9086 * @class Ext.ux.TabCloseMenu
9088 * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs. Note that the menu respects
9089 * the closable configuration on the tab. As such, commands like remove others and remove all will not
9090 * remove items that are not closable.
9093 * @param {Object} config The configuration options
9094 * @ptype tabclosemenu
9096 Ext.ux.TabCloseMenu = Ext.extend(Object, {
9098 * @cfg {String} closeTabText
9099 * The text for closing the current tab. Defaults to <tt>'Close Tab'</tt>.
9101 closeTabText: 'Close Tab',
9104 * @cfg {String} closeOtherTabsText
9105 * The text for closing all tabs except the current one. Defaults to <tt>'Close Other Tabs'</tt>.
9107 closeOtherTabsText: 'Close Other Tabs',
9110 * @cfg {Boolean} showCloseAll
9111 * Indicates whether to show the 'Close All' option. Defaults to <tt>true</tt>.
9116 * @cfg {String} closeAllTabsText
9117 * <p>The text for closing all tabs. Defaults to <tt>'Close All Tabs'</tt>.
9119 closeAllTabsText: 'Close All Tabs',
9121 constructor : function(config){
9122 Ext.apply(this, config || {});
9126 init : function(tabs){
9130 contextmenu: this.onContextMenu,
9131 destroy: this.destroy
9135 destroy : function(){
9136 Ext.destroy(this.menu);
9143 onContextMenu : function(tabs, item, e){
9145 var m = this.createMenu(),
9147 disableOthers = true,
9148 closeAll = m.getComponent('closeall');
9150 m.getComponent('close').setDisabled(!item.closable);
9151 tabs.items.each(function(){
9155 disableOthers = false;
9160 m.getComponent('closeothers').setDisabled(disableOthers);
9162 closeAll.setDisabled(disableAll);
9166 m.showAt(e.getPoint());
9169 createMenu : function(){
9173 text: this.closeTabText,
9175 handler: this.onClose
9177 if(this.showCloseAll){
9181 itemId: 'closeothers',
9182 text: this.closeOtherTabsText,
9184 handler: this.onCloseOthers
9186 if(this.showCloseAll){
9189 text: this.closeAllTabsText,
9191 handler: this.onCloseAll
9194 this.menu = new Ext.menu.Menu({
9201 onClose : function(){
9202 this.tabs.remove(this.active);
9205 onCloseOthers : function(){
9209 onCloseAll : function(){
9210 this.doClose(false);
9213 doClose : function(excludeActive){
9215 this.tabs.items.each(function(item){
9217 if(!excludeActive || item != this.active){
9222 Ext.each(items, function(item){
9223 this.tabs.remove(item);
9228 Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);Ext.ns('Ext.ux.grid');
9231 * @class Ext.ux.grid.TableGrid
9232 * @extends Ext.grid.GridPanel
9233 * A Grid which creates itself from an existing HTML table element.
9235 * 2007-03-01 Original version by Nige "Animal" White
9236 * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
9237 * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
9238 * The table MUST have some type of size defined for the grid to fill. The container will be
9239 * automatically set to position relative if it isn't already.
9240 * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
9241 * properties: fields and columns which allow for customizing data fields and columns for this grid.
9243 Ext.ux.grid.TableGrid = function(table, config){
9246 Ext.apply(this, config);
9247 var cf = config.fields || [], ch = config.columns || [];
9248 table = Ext.get(table);
9250 var ct = table.insertSibling();
9252 var fields = [], cols = [];
9253 var headers = table.query("thead th");
9254 for (var i = 0, h; h = headers[i]; i++) {
9255 var text = h.innerHTML;
9256 var name = 'tcol-' + i;
9258 fields.push(Ext.applyIf(cf[i] ||
9261 mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
9264 cols.push(Ext.applyIf(ch[i] ||
9268 'width': h.offsetWidth,
9274 var ds = new Ext.data.Store({
9275 reader: new Ext.data.XmlReader({
9280 ds.loadData(table.dom);
9282 var cm = new Ext.grid.ColumnModel(cols);
9284 if (config.width || config.height) {
9285 ct.setSize(config.width || 'auto', config.height || 'auto');
9288 ct.setWidth(table.getWidth());
9291 if (config.remove !== false) {
9298 'sm': new Ext.grid.RowSelectionModel(),
9302 Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {});
9305 Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);
9308 Ext.grid.TableGrid = Ext.ux.grid.TableGrid;
9311 * @class Ext.ux.TabScrollerMenu
9313 * Plugin (ptype = 'tabscrollermenu') for adding a tab scroller menu to tabs.
9315 * @param {Object} config Configuration options
9316 * @ptype tabscrollermenu
9318 Ext.ux.TabScrollerMenu = Ext.extend(Object, {
9320 * @cfg {Number} pageSize How many items to allow per submenu.
9324 * @cfg {Number} maxText How long should the title of each {@link Ext.menu.Item} be.
9328 * @cfg {String} menuPrefixText Text to prefix the submenus.
9330 menuPrefixText : 'Items',
9331 constructor : function(config) {
9332 config = config || {};
9333 Ext.apply(this, config);
9336 init : function(tabPanel) {
9337 Ext.apply(tabPanel, this.parentOverrides);
9339 tabPanel.tabScrollerMenu = this;
9347 var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
9348 tabPanel.createScrollers = newFn;
9353 // private && sequeneced
9354 createPanelsMenu : function() {
9355 var h = this.stripWrap.dom.offsetHeight;
9357 //move the right menu item to the left 18px
9358 var rtScrBtn = this.header.dom.firstChild;
9359 Ext.fly(rtScrBtn).applyStyles({
9363 var stripWrap = Ext.get(this.strip.dom.parentNode);
9364 stripWrap.applyStyles({
9365 'margin-right' : '36px'
9368 // Add the new righthand menu
9369 var scrollMenu = this.header.insertFirst({
9370 cls:'x-tab-tabmenu-right'
9372 scrollMenu.setHeight(h);
9373 scrollMenu.addClassOnOver('x-tab-tabmenu-over');
9374 scrollMenu.on('click', this.showTabsMenu, this);
9376 this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
9380 this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
9386 * Returns an the current page size (this.pageSize);
9387 * @return {Number} this.pageSize The current page size.
9389 getPageSize : function() {
9390 return this.pageSize;
9393 * Sets the number of menu items per submenu "page size".
9394 * @param {Number} pageSize The page size
9396 setPageSize : function(pageSize) {
9397 this.pageSize = pageSize;
9400 * Returns the current maxText length;
9401 * @return {Number} this.maxText The current max text length.
9403 getMaxText : function() {
9404 return this.maxText;
9407 * Sets the maximum text size for each menu item.
9408 * @param {Number} t The max text per each menu item.
9410 setMaxText : function(t) {
9414 * Returns the current menu prefix text String.;
9415 * @return {String} this.menuPrefixText The current menu prefix text.
9417 getMenuPrefixText : function() {
9418 return this.menuPrefixText;
9421 * Sets the menu prefix text String.
9422 * @param {String} t The menu prefix text.
9424 setMenuPrefixText : function(t) {
9425 this.menuPrefixText = t;
9427 // private && applied to the tab panel itself.
9429 // all execute within the scope of the tab panel
9431 showTabsMenu : function(e) {
9432 if (this.tabsMenu) {
9433 this.tabsMenu.destroy();
9434 this.un('destroy', this.tabsMenu.destroy, this.tabsMenu);
9435 this.tabsMenu = null;
9437 this.tabsMenu = new Ext.menu.Menu();
9438 this.on('destroy', this.tabsMenu.destroy, this.tabsMenu);
9440 this.generateTabMenuItems();
9442 var target = Ext.get(e.getTarget());
9443 var xy = target.getXY();
9445 //Y param + 24 pixels
9448 this.tabsMenu.showAt(xy);
9451 generateTabMenuItems : function() {
9452 var curActive = this.getActiveTab();
9453 var totalItems = this.items.getCount();
9454 var pageSize = this.tabScrollerMenu.getPageSize();
9457 if (totalItems > pageSize) {
9458 var numSubMenus = Math.floor(totalItems / pageSize);
9459 var remainder = totalItems % pageSize;
9461 // Loop through all of the items and create submenus in chunks of 10
9462 for (var i = 0 ; i < numSubMenus; i++) {
9463 var curPage = (i + 1) * pageSize;
9467 for (var x = 0; x < pageSize; x++) {
9468 index = x + curPage - pageSize;
9469 var item = this.items.get(index);
9470 menuItems.push(this.autoGenMenuItem(item));
9474 text : this.tabScrollerMenu.getMenuPrefixText() + ' ' + (curPage - pageSize + 1) + ' - ' + curPage,
9480 if (remainder > 0) {
9481 var start = numSubMenus * pageSize;
9483 for (var i = start ; i < totalItems; i ++ ) {
9484 var item = this.items.get(i);
9485 menuItems.push(this.autoGenMenuItem(item));
9489 text : this.tabScrollerMenu.menuPrefixText + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
9496 this.items.each(function(item) {
9497 if (item.id != curActive.id && !item.hidden) {
9498 this.tabsMenu.add(this.autoGenMenuItem(item));
9504 autoGenMenuItem : function(item) {
9505 var maxText = this.tabScrollerMenu.getMaxText();
9506 var text = Ext.util.Format.ellipsis(item.title, maxText);
9510 handler : this.showTabFromMenu,
9512 disabled : item.disabled,
9514 iconCls : item.iconCls
9519 showTabFromMenu : function(menuItem) {
9520 this.setActiveTab(menuItem.tabToShow);
9525 Ext.reg('tabscrollermenu', Ext.ux.TabScrollerMenu);
9526 Ext.ns('Ext.ux.tree');
9529 * @class Ext.ux.tree.XmlTreeLoader
9530 * @extends Ext.tree.TreeLoader
9531 * <p>A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
9532 * Any text value included as a text node in the XML will be added to the parent node as an attribute
9533 * called <tt>innerText</tt>. Also, the tag name of each XML node will be added to the tree node as
9534 * an attribute called <tt>tagName</tt>.</p>
9535 * <p>By default, this class expects that your source XML will provide the necessary attributes on each
9536 * node as expected by the {@link Ext.tree.TreePanel} to display and load properly. However, you can
9537 * provide your own custom processing of node attributes by overriding the {@link #processNode} method
9538 * and modifying the attributes as needed before they are used to create the associated TreeNode.</p>
9540 * Creates a new XmlTreeloader.
9541 * @param {Object} config A config object containing config properties.
9543 Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
9545 * @property XML_NODE_ELEMENT
9546 * XML element node (value 1, read-only)
9549 XML_NODE_ELEMENT : 1,
9551 * @property XML_NODE_TEXT
9552 * XML text node (value 3, read-only)
9558 processResponse : function(response, node, callback){
9559 var xmlData = response.responseXML,
9560 root = xmlData.documentElement || xmlData;
9564 node.appendChild(this.parseXml(root));
9567 this.runCallback(callback, scope || node, [node]);
9569 this.handleFailure(response);
9574 parseXml : function(node) {
9576 Ext.each(node.childNodes, function(n){
9577 if(n.nodeType == this.XML_NODE_ELEMENT){
9578 var treeNode = this.createNode(n);
9579 if(n.childNodes.length > 0){
9580 var child = this.parseXml(n);
9581 if(typeof child == 'string'){
9582 treeNode.attributes.innerText = child;
9584 treeNode.appendChild(child);
9587 nodes.push(treeNode);
9589 else if(n.nodeType == this.XML_NODE_TEXT){
9590 var text = n.nodeValue.trim();
9591 if(text.length > 0){
9592 return nodes = text;
9601 createNode : function(node){
9603 tagName: node.tagName
9606 Ext.each(node.attributes, function(a){
9607 attr[a.nodeName] = a.nodeValue;
9610 this.processAttributes(attr);
9612 return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr);
9616 * Template method intended to be overridden by subclasses that need to provide
9617 * custom attribute processing prior to the creation of each TreeNode. This method
9618 * will be passed a config object containing existing TreeNode attribute name/value
9619 * pairs which can be modified as needed directly (no need to return the object).
9621 processAttributes: Ext.emptyFn
9625 Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;
9627 * @class Ext.ux.ValidationStatus
9628 * A {@link Ext.StatusBar} plugin that provides automatic error notification when the
9629 * associated form contains validation errors.
9630 * @extends Ext.Component
9632 * Creates a new ValiationStatus plugin
9633 * @param {Object} config A config object
9635 Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
9637 * @cfg {String} errorIconCls
9638 * The {@link #iconCls} value to be applied to the status message when there is a
9639 * validation error. Defaults to <tt>'x-status-error'</tt>.
9641 errorIconCls : 'x-status-error',
9643 * @cfg {String} errorListCls
9644 * The css class to be used for the error list when there are validation errors.
9645 * Defaults to <tt>'x-status-error-list'</tt>.
9647 errorListCls : 'x-status-error-list',
9649 * @cfg {String} validIconCls
9650 * The {@link #iconCls} value to be applied to the status message when the form
9651 * validates. Defaults to <tt>'x-status-valid'</tt>.
9653 validIconCls : 'x-status-valid',
9656 * @cfg {String} showText
9657 * The {@link #text} value to be applied when there is a form validation error.
9658 * Defaults to <tt>'The form has errors (click for details...)'</tt>.
9660 showText : 'The form has errors (click for details...)',
9662 * @cfg {String} showText
9663 * The {@link #text} value to display when the error list is displayed.
9664 * Defaults to <tt>'Click again to hide the error list'</tt>.
9666 hideText : 'Click again to hide the error list',
9668 * @cfg {String} submitText
9669 * The {@link #text} value to be applied when the form is being submitted.
9670 * Defaults to <tt>'Saving...'</tt>.
9672 submitText : 'Saving...',
9675 init : function(sb){
9676 sb.on('render', function(){
9677 this.statusBar = sb;
9678 this.monitor = true;
9679 this.errors = new Ext.util.MixedCollection();
9680 this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');
9683 this.form = Ext.getCmp(this.form).getForm();
9684 this.startMonitoring();
9685 this.form.on('beforeaction', function(f, action){
9686 if(action.type == 'submit'){
9687 // Ignore monitoring while submitting otherwise the field validation
9688 // events cause the status message to reset too early
9689 this.monitor = false;
9692 var startMonitor = function(){
9693 this.monitor = true;
9695 this.form.on('actioncomplete', startMonitor, this);
9696 this.form.on('actionfailed', startMonitor, this);
9698 }, this, {single:true});
9704 // Grab the statusEl after the first layout.
9705 sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});
9716 startMonitoring : function(){
9717 this.form.items.each(function(f){
9718 f.on('invalid', this.onFieldValidation, this);
9719 f.on('valid', this.onFieldValidation, this);
9724 stopMonitoring : function(){
9725 this.form.items.each(function(f){
9726 f.un('invalid', this.onFieldValidation, this);
9727 f.un('valid', this.onFieldValidation, this);
9732 onDestroy : function(){
9733 this.stopMonitoring();
9734 this.statusBar.statusEl.un('click', this.onStatusClick, this);
9735 Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
9739 onFieldValidation : function(f, msg){
9744 this.errors.add(f.id, {field:f, msg:msg});
9746 this.errors.removeKey(f.id);
9748 this.updateErrorList();
9749 if(this.errors.getCount() > 0){
9750 if(this.statusBar.getText() != this.showText){
9751 this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
9754 this.statusBar.clearStatus().setIcon(this.validIconCls);
9759 updateErrorList : function(){
9760 if(this.errors.getCount() > 0){
9762 this.errors.each(function(err){
9763 msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');
9765 this.getMsgEl().update(msg+'</ul>');
9767 this.getMsgEl().update('');
9772 getMsgEl : function(){
9774 this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
9775 cls: this.errorListCls+' x-hide-offsets'
9778 this.msgEl.on('click', function(e){
9779 var t = e.getTarget('li', 10, true);
9781 Ext.getCmp(t.id.split('x-err-')[1]).focus();
9784 }, this, {stopEvent:true}); // prevent anchor click navigation
9790 showErrors : function(){
9791 this.updateErrorList();
9792 this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:0.3, easing:'easeOut'});
9793 this.statusBar.setText(this.hideText);
9794 this.form.getEl().on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
9798 hideErrors : function(){
9799 var el = this.getMsgEl();
9801 el.slideOut('b', {duration:0.2, easing:'easeIn'});
9802 this.statusBar.setText(this.showText);
9804 this.form.getEl().un('click', this.hideErrors, this);
9808 onStatusClick : function(){
9809 if(this.getMsgEl().isVisible()){
9811 }else if(this.errors.getCount() > 0){
9816 Ext.override(Ext.list.Column, {
9818 var types = Ext.data.Types,
9822 if(Ext.isString(this.type)){
9823 this.type = Ext.data.Types[this.type.toUpperCase()] || types.AUTO;
9826 this.type = types.AUTO;
9829 // named sortTypes are supported, here we look them up
9830 if(Ext.isString(st)){
9831 this.sortType = Ext.data.SortTypes[st];
9832 }else if(Ext.isEmpty(st)){
9833 this.sortType = this.type.sortType;
9838 Ext.tree.Column = Ext.extend(Ext.list.Column, {});
9839 Ext.tree.NumberColumn = Ext.extend(Ext.list.NumberColumn, {});
9840 Ext.tree.DateColumn = Ext.extend(Ext.list.DateColumn, {});
9841 Ext.tree.BooleanColumn = Ext.extend(Ext.list.BooleanColumn, {});
9843 Ext.reg('tgcolumn', Ext.tree.Column);
9844 Ext.reg('tgnumbercolumn', Ext.tree.NumberColumn);
9845 Ext.reg('tgdatecolumn', Ext.tree.DateColumn);
9846 Ext.reg('tgbooleancolumn', Ext.tree.BooleanColumn);
9849 * @class Ext.ux.tree.TreeGridNodeUI
9850 * @extends Ext.tree.TreeNodeUI
9852 Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
9853 isTreeGridNodeUI: true,
9855 renderElements : function(n, a, targetNode, bulkRender){
9856 var t = n.getOwnerTree(),
9861 this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
9864 '<tbody class="x-tree-node">',
9865 '<tr ext:tree-node-id="', n.id ,'" class="x-tree-node-el x-tree-node-leaf ', a.cls, '">',
9866 '<td class="x-treegrid-col">',
9867 '<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
9868 '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
9869 '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " "+a.iconCls : ""), '" unselectable="on" />',
9870 '<a hidefocus="on" class="x-tree-node-anchor" href="', a.href ? a.href : '#', '" tabIndex="1" ',
9871 a.hrefTarget ? ' target="'+a.hrefTarget+'"' : '', '>',
9872 '<span unselectable="on">', (c.tpl ? c.tpl.apply(a) : a[c.dataIndex] || c.text), '</span></a>',
9876 for(i = 1, len = cols.length; i < len; i++){
9879 '<td class="x-treegrid-col ', (c.cls ? c.cls : ''), '">',
9880 '<div unselectable="on" class="x-treegrid-text"', (c.align ? ' style="text-align: ' + c.align + ';"' : ''), '>',
9881 (c.tpl ? c.tpl.apply(a) : a[c.dataIndex]),
9888 '</tr><tr class="x-tree-node-ct"><td colspan="', cols.length, '">',
9889 '<table class="x-treegrid-node-ct-table" cellpadding="0" cellspacing="0" style="table-layout: fixed; display: none; width: ', t.innerCt.getWidth() ,'px;"><colgroup>'
9891 for(i = 0, len = cols.length; i<len; i++) {
9892 buf.push('<col style="width: ', (cols[i].hidden ? 0 : cols[i].width) ,'px;" />');
9894 buf.push('</colgroup></table></td></tr></tbody>');
9896 if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
9897 this.wrap = Ext.DomHelper.insertHtml("beforeBegin", n.nextSibling.ui.getEl(), buf.join(''));
9899 this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(''));
9902 this.elNode = this.wrap.childNodes[0];
9903 this.ctNode = this.wrap.childNodes[1].firstChild.firstChild;
9904 var cs = this.elNode.firstChild.childNodes;
9905 this.indentNode = cs[0];
9906 this.ecNode = cs[1];
9907 this.iconNode = cs[2];
9908 this.anchor = cs[3];
9909 this.textNode = cs[3].firstChild;
9913 animExpand : function(cb){
9914 this.ctNode.style.display = "";
9915 Ext.ux.tree.TreeGridNodeUI.superclass.animExpand.call(this, cb);
9919 Ext.ux.tree.TreeGridRootNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
9920 isTreeGridNodeUI: true,
9923 render : function(){
9925 this.wrap = this.ctNode = this.node.ownerTree.innerCt.dom;
9926 this.node.expanded = true;
9930 // weird table-layout: fixed issue in webkit
9931 var ct = this.ctNode;
9932 ct.style.tableLayout = null;
9934 ct.style.tableLayout = 'fixed';
9939 destroy : function(){
9941 Ext.dd.Registry.unregister(this.elNode.id);
9946 collapse : Ext.emptyFn,
9947 expand : Ext.emptyFn
9949 * @class Ext.tree.ColumnResizer
9950 * @extends Ext.util.Observable
9952 Ext.tree.ColumnResizer = Ext.extend(Ext.util.Observable, {
9954 * @cfg {Number} minWidth The minimum width the column can be dragged to.
9955 * Defaults to <tt>14</tt>.
9959 constructor: function(config){
9960 Ext.apply(this, config);
9961 Ext.tree.ColumnResizer.superclass.constructor.call(this);
9964 init : function(tree){
9966 tree.on('render', this.initEvents, this);
9969 initEvents : function(tree){
9970 tree.mon(tree.innerHd, 'mousemove', this.handleHdMove, this);
9971 this.tracker = new Ext.dd.DragTracker({
9972 onBeforeStart: this.onBeforeStart.createDelegate(this),
9973 onStart: this.onStart.createDelegate(this),
9974 onDrag: this.onDrag.createDelegate(this),
9975 onEnd: this.onEnd.createDelegate(this),
9979 this.tracker.initEl(tree.innerHd);
9980 tree.on('beforedestroy', this.tracker.destroy, this.tracker);
9983 handleHdMove : function(e, t){
9986 hd = e.getTarget('.x-treegrid-hd', 3, true);
9989 var r = hd.getRegion(),
9991 pn = hd.dom.parentNode;
9993 if(x - r.left <= hw && hd.dom !== pn.firstChild) {
9994 var ps = hd.dom.previousSibling;
9995 while(ps && Ext.fly(ps).hasClass('x-treegrid-hd-hidden')) {
9996 ps = ps.previousSibling;
9999 this.activeHd = Ext.get(ps);
10000 ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
10002 } else if(r.right - x <= hw) {
10004 while(ns && Ext.fly(ns).hasClass('x-treegrid-hd-hidden')) {
10005 ns = ns.previousSibling;
10008 this.activeHd = Ext.get(ns);
10009 ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
10012 delete this.activeHd;
10018 onBeforeStart : function(e){
10019 this.dragHd = this.activeHd;
10020 return !!this.dragHd;
10023 onStart : function(e){
10024 this.dragHeadersDisabled = this.tree.headersDisabled;
10025 this.tree.headersDisabled = true;
10026 this.proxy = this.tree.body.createChild({cls:'x-treegrid-resizer'});
10027 this.proxy.setHeight(this.tree.body.getHeight());
10029 var x = this.tracker.getXY()[0];
10031 this.hdX = this.dragHd.getX();
10032 this.hdIndex = this.tree.findHeaderIndex(this.dragHd);
10034 this.proxy.setX(this.hdX);
10035 this.proxy.setWidth(x-this.hdX);
10037 this.maxWidth = this.tree.outerCt.getWidth() - this.tree.innerBody.translatePoints(this.hdX).left;
10040 onDrag : function(e){
10041 var cursorX = this.tracker.getXY()[0];
10042 this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
10045 onEnd : function(e){
10046 var nw = this.proxy.getWidth(),
10048 disabled = this.dragHeadersDisabled;
10050 this.proxy.remove();
10051 delete this.dragHd;
10053 tree.columns[this.hdIndex].width = nw;
10054 tree.updateColumnWidths();
10056 setTimeout(function(){
10057 tree.headersDisabled = disabled;
10060 });Ext.ns('Ext.ux.tree');
10063 * @class Ext.ux.tree.TreeGridSorter
10064 * @extends Ext.tree.TreeSorter
10065 * Provides sorting of nodes in a {@link Ext.ux.tree.TreeGrid}. The TreeGridSorter automatically monitors events on the
10066 * associated TreeGrid that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).
10067 * Example usage:<br />
10069 new Ext.ux.tree.TreeGridSorter(myTreeGrid, {
10072 sortType: function(node) {
10073 // sort by a custom, typed attribute:
10074 return parseInt(node.id, 10);
10079 * @param {TreeGrid} tree
10080 * @param {Object} config
10082 Ext.ux.tree.TreeGridSorter = Ext.extend(Ext.tree.TreeSorter, {
10084 * @cfg {Array} sortClasses The CSS classes applied to a header when it is sorted. (defaults to <tt>['sort-asc', 'sort-desc']</tt>)
10086 sortClasses : ['sort-asc', 'sort-desc'],
10088 * @cfg {String} sortAscText The text displayed in the 'Sort Ascending' menu item (defaults to <tt>'Sort Ascending'</tt>)
10090 sortAscText : 'Sort Ascending',
10092 * @cfg {String} sortDescText The text displayed in the 'Sort Descending' menu item (defaults to <tt>'Sort Descending'</tt>)
10094 sortDescText : 'Sort Descending',
10096 constructor : function(tree, config) {
10097 if(!Ext.isObject(config)) {
10099 property: tree.columns[0].dataIndex || 'text',
10104 Ext.ux.tree.TreeGridSorter.superclass.constructor.apply(this, arguments);
10107 tree.on('headerclick', this.onHeaderClick, this);
10108 tree.ddAppendOnly = true;
10111 this.defaultSortFn = function(n1, n2){
10113 var desc = me.dir && me.dir.toLowerCase() == 'desc',
10114 prop = me.property || 'text',
10115 sortType = me.sortType,
10116 caseSensitive = me.caseSensitive === true,
10117 leafAttr = me.leafAttr || 'leaf',
10118 attr1 = n1.attributes,
10119 attr2 = n2.attributes;
10122 if(attr1[leafAttr] && !attr2[leafAttr]){
10125 if(!attr1[leafAttr] && attr2[leafAttr]){
10129 var prop1 = attr1[prop],
10130 prop2 = attr2[prop],
10131 v1 = sortType ? sortType(prop1) : (caseSensitive ? prop1 : prop1.toUpperCase());
10132 v2 = sortType ? sortType(prop2) : (caseSensitive ? prop2 : prop2.toUpperCase());
10135 return desc ? +1 : -1;
10137 return desc ? -1 : +1;
10143 tree.on('afterrender', this.onAfterTreeRender, this, {single: true});
10144 tree.on('headermenuclick', this.onHeaderMenuClick, this);
10147 onAfterTreeRender : function() {
10148 if(this.tree.hmenu){
10149 this.tree.hmenu.insert(0,
10150 {itemId:'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
10151 {itemId:'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
10154 this.updateSortIcon(0, 'asc');
10157 onHeaderMenuClick : function(c, id, index) {
10158 if(id === 'asc' || id === 'desc') {
10159 this.onHeaderClick(c, null, index);
10164 onHeaderClick : function(c, el, i) {
10165 if(c && !this.tree.headersDisabled){
10168 me.property = c.dataIndex;
10169 me.dir = c.dir = (c.dir === 'desc' ? 'asc' : 'desc');
10170 me.sortType = c.sortType;
10171 me.caseSensitive === Ext.isBoolean(c.caseSensitive) ? c.caseSensitive : this.caseSensitive;
10172 me.sortFn = c.sortFn || this.defaultSortFn;
10174 this.tree.root.cascade(function(n) {
10176 me.updateSort(me.tree, n);
10180 this.updateSortIcon(i, c.dir);
10185 updateSortIcon : function(col, dir){
10186 var sc = this.sortClasses,
10187 hds = this.tree.innerHd.select('td').removeClass(sc);
10188 hds.item(col).addClass(sc[dir == 'desc' ? 1 : 0]);
10191 * @class Ext.ux.tree.TreeGridLoader
10192 * @extends Ext.tree.TreeLoader
10194 Ext.ux.tree.TreeGridLoader = Ext.extend(Ext.tree.TreeLoader, {
10195 createNode : function(attr) {
10196 if (!attr.uiProvider) {
10197 attr.uiProvider = Ext.ux.tree.TreeGridNodeUI;
10199 return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
10202 * @class Ext.ux.tree.TreeGrid
10203 * @extends Ext.tree.TreePanel
10207 Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
10208 rootVisible : false,
10211 borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
10212 cls : 'x-treegrid',
10214 columnResize : true,
10216 reserveScrollOffset : true,
10217 enableHdMenu : true,
10219 columnsText : 'Columns',
10221 initComponent : function() {
10223 this.root = new Ext.tree.AsyncTreeNode({text: 'Root'});
10226 // initialize the loader
10227 var l = this.loader;
10229 l = new Ext.ux.tree.TreeGridLoader({
10230 dataUrl: this.dataUrl,
10231 requestMethod: this.requestMethod,
10234 }else if(Ext.isObject(l) && !l.load){
10235 l = new Ext.ux.tree.TreeGridLoader(l);
10239 Ext.ux.tree.TreeGrid.superclass.initComponent.call(this);
10241 this.initColumns();
10243 if(this.enableSort) {
10244 this.treeGridSorter = new Ext.ux.tree.TreeGridSorter(this, this.enableSort);
10247 if(this.columnResize){
10248 this.colResizer = new Ext.tree.ColumnResizer(this.columnResize);
10249 this.colResizer.init(this);
10252 var c = this.columns;
10253 if(!this.internalTpl){
10254 this.internalTpl = new Ext.XTemplate(
10255 '<div class="x-grid3-header">',
10256 '<div class="x-treegrid-header-inner">',
10257 '<div class="x-grid3-header-offset">',
10258 '<table style="table-layout: fixed;" cellspacing="0" cellpadding="0" border="0"><colgroup><tpl for="columns"><col /></tpl></colgroup>',
10259 '<thead><tr class="x-grid3-hd-row">',
10260 '<tpl for="columns">',
10261 '<td class="x-grid3-hd x-grid3-cell x-treegrid-hd" style="text-align: {align};" id="', this.id, '-xlhd-{#}">',
10262 '<div class="x-grid3-hd-inner x-treegrid-hd-inner" unselectable="on">',
10263 this.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
10264 '{header}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',
10271 '<div class="x-treegrid-root-node">',
10272 '<table class="x-treegrid-root-table" cellpadding="0" cellspacing="0" style="table-layout: fixed;"></table>',
10277 if(!this.colgroupTpl) {
10278 this.colgroupTpl = new Ext.XTemplate(
10279 '<colgroup><tpl for="columns"><col style="width: {width}px"/></tpl></colgroup>'
10284 initColumns : function() {
10285 var cs = this.columns,
10290 for(i = 0; i < len; i++){
10293 c.xtype = c.xtype ? (/^tg/.test(c.xtype) ? c.xtype : 'tg' + c.xtype) : 'tgcolumn';
10299 if(this.enableSort !== false && c.sortable !== false) {
10301 this.enableSort = true;
10305 this.columns = columns;
10308 onRender : function(){
10309 Ext.tree.TreePanel.superclass.onRender.apply(this, arguments);
10311 this.el.addClass('x-treegrid');
10313 this.outerCt = this.body.createChild({
10314 cls:'x-tree-root-ct x-treegrid-ct ' + (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')
10317 this.internalTpl.overwrite(this.outerCt, {columns: this.columns});
10319 this.mainHd = Ext.get(this.outerCt.dom.firstChild);
10320 this.innerHd = Ext.get(this.mainHd.dom.firstChild);
10321 this.innerBody = Ext.get(this.outerCt.dom.lastChild);
10322 this.innerCt = Ext.get(this.innerBody.dom.firstChild);
10324 this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});
10326 if(this.hideHeaders){
10327 this.el.child('.x-grid3-header').setDisplayed('none');
10329 else if(this.enableHdMenu !== false){
10330 this.hmenu = new Ext.menu.Menu({id: this.id + '-hctx'});
10331 if(this.enableColumnHide !== false){
10332 this.colMenu = new Ext.menu.Menu({id: this.id + '-hcols-menu'});
10335 beforeshow: this.beforeColMenuShow,
10336 itemclick: this.handleHdMenuClick
10340 hideOnClick: false,
10341 text: this.columnsText,
10342 menu: this.colMenu,
10343 iconCls: 'x-cols-icon'
10346 this.hmenu.on('itemclick', this.handleHdMenuClick, this);
10350 setRootNode : function(node){
10351 node.attributes.uiProvider = Ext.ux.tree.TreeGridRootNodeUI;
10352 node = Ext.ux.tree.TreeGrid.superclass.setRootNode.call(this, node);
10354 this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});
10359 clearInnerCt : function(){
10361 var dom = this.innerCt.dom;
10362 while(dom.firstChild){
10363 dom.removeChild(dom.firstChild);
10366 Ext.ux.tree.TreeGrid.superclass.clearInnerCt.call(this);
10370 initEvents : function() {
10371 Ext.ux.tree.TreeGrid.superclass.initEvents.apply(this, arguments);
10373 this.mon(this.innerBody, 'scroll', this.syncScroll, this);
10374 this.mon(this.innerHd, 'click', this.handleHdDown, this);
10375 this.mon(this.mainHd, {
10377 mouseover: this.handleHdOver,
10378 mouseout: this.handleHdOut
10382 onResize : function(w, h) {
10383 Ext.ux.tree.TreeGrid.superclass.onResize.apply(this, arguments);
10385 var bd = this.innerBody.dom;
10386 var hd = this.innerHd.dom;
10392 if(Ext.isNumber(h)){
10393 bd.style.height = this.body.getHeight(true) - hd.offsetHeight + 'px';
10396 if(Ext.isNumber(w)){
10397 var sw = Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
10398 if(this.reserveScrollOffset || ((bd.offsetWidth - bd.clientWidth) > 10)){
10399 this.setScrollOffset(sw);
10402 setTimeout(function(){
10403 me.setScrollOffset(bd.offsetWidth - bd.clientWidth > 10 ? sw : 0);
10409 updateColumnWidths : function() {
10410 var cols = this.columns,
10411 colCount = cols.length,
10412 groups = this.outerCt.query('colgroup'),
10413 groupCount = groups.length,
10416 for(i = 0; i<colCount; i++) {
10418 for(j = 0; j<groupCount; j++) {
10420 g.childNodes[i].style.width = (c.hidden ? 0 : c.width) + 'px';
10424 for(i = 0, groups = this.innerHd.query('td'), len = groups.length; i<len; i++) {
10425 c = Ext.fly(groups[i]);
10426 if(cols[i] && cols[i].hidden) {
10427 c.addClass('x-treegrid-hd-hidden');
10430 c.removeClass('x-treegrid-hd-hidden');
10434 var tcw = this.getTotalColumnWidth();
10435 Ext.fly(this.innerHd.dom.firstChild).setWidth(tcw + (this.scrollOffset || 0));
10436 this.outerCt.select('table').setWidth(tcw);
10437 this.syncHeaderScroll();
10440 getVisibleColumns : function() {
10446 for(i = 0; i<len; i++) {
10447 if(!cs[i].hidden) {
10448 columns.push(cs[i]);
10454 getTotalColumnWidth : function() {
10456 for(var i = 0, cs = this.getVisibleColumns(), len = cs.length; i<len; i++) {
10457 total += cs[i].width;
10462 setScrollOffset : function(scrollOffset) {
10463 this.scrollOffset = scrollOffset;
10464 this.updateColumnWidths();
10468 handleHdDown : function(e, t){
10469 var hd = e.getTarget('.x-treegrid-hd');
10471 if(hd && Ext.fly(t).hasClass('x-grid3-hd-btn')){
10472 var ms = this.hmenu.items,
10474 index = this.findHeaderIndex(hd),
10479 Ext.fly(hd).addClass('x-grid3-hd-menu-open');
10480 this.hdCtxIndex = index;
10482 this.fireEvent('headerbuttonclick', ms, c, hd, index);
10484 this.hmenu.on('hide', function(){
10485 Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
10486 }, this, {single:true});
10488 this.hmenu.show(t, 'tl-bl?');
10491 var index = this.findHeaderIndex(hd);
10492 this.fireEvent('headerclick', this.columns[index], hd, index);
10497 handleHdOver : function(e, t){
10498 var hd = e.getTarget('.x-treegrid-hd');
10499 if(hd && !this.headersDisabled){
10500 index = this.findHeaderIndex(hd);
10501 this.activeHdRef = t;
10502 this.activeHdIndex = index;
10503 var el = Ext.get(hd);
10504 this.activeHdRegion = el.getRegion();
10505 el.addClass('x-grid3-hd-over');
10506 this.activeHdBtn = el.child('.x-grid3-hd-btn');
10507 if(this.activeHdBtn){
10508 this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight-1)+'px';
10514 handleHdOut : function(e, t){
10515 var hd = e.getTarget('.x-treegrid-hd');
10516 if(hd && (!Ext.isIE || !e.within(hd, true))){
10517 this.activeHdRef = null;
10518 Ext.fly(hd).removeClass('x-grid3-hd-over');
10519 hd.style.cursor = '';
10523 findHeaderIndex : function(hd){
10525 var cs = hd.parentNode.childNodes;
10526 for(var i = 0, c; c = cs[i]; i++){
10535 beforeColMenuShow : function(){
10536 var cols = this.columns,
10537 colCount = cols.length,
10539 this.colMenu.removeAll();
10540 for(i = 1; i < colCount; i++){
10542 if(c.hideable !== false){
10543 this.colMenu.add(new Ext.menu.CheckItem({
10544 itemId: 'col-' + i,
10546 checked: !c.hidden,
10548 disabled: c.hideable === false
10555 handleHdMenuClick : function(item){
10556 var index = this.hdCtxIndex,
10557 id = item.getItemId();
10559 if(this.fireEvent('headermenuclick', this.columns[index], id, index) !== false) {
10560 index = id.substr(4);
10561 if(index > 0 && this.columns[index]) {
10562 this.setColumnVisible(index, !item.checked);
10569 setColumnVisible : function(index, visible) {
10570 this.columns[index].hidden = !visible;
10571 this.updateColumnWidths();
10575 * Scrolls the grid to the top
10577 scrollToTop : function(){
10578 this.innerBody.dom.scrollTop = 0;
10579 this.innerBody.dom.scrollLeft = 0;
10583 syncScroll : function(){
10584 this.syncHeaderScroll();
10585 var mb = this.innerBody.dom;
10586 this.fireEvent('bodyscroll', mb.scrollLeft, mb.scrollTop);
10590 syncHeaderScroll : function(){
10591 var mb = this.innerBody.dom;
10592 this.innerHd.dom.scrollLeft = mb.scrollLeft;
10593 this.innerHd.dom.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
10596 registerNode : function(n) {
10597 Ext.ux.tree.TreeGrid.superclass.registerNode.call(this, n);
10598 if(!n.uiProvider && !n.isRoot && !n.ui.isTreeGridNodeUI) {
10599 n.ui = new Ext.ux.tree.TreeGridNodeUI(n);
10604 Ext.reg('treegrid', Ext.ux.tree.TreeGrid);