/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
this.doUpdate();
}
},
+
+ onRemove : function(ds, record, index, isUpdate){
+ Ext.ux.grid.BufferView.superclass.onRemove.apply(this, arguments);
+ if(isUpdate !== true){
+ this.update();
+ }
+ },
doUpdate: function(){
if (this.getVisibleRowCount() > 0) {
},\r
\r
onMouseDown : function(e, t){\r
- if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){\r
+ if(Ext.fly(t).hasClass(this.createId())){\r
e.stopEvent();\r
var index = this.grid.getView().findRowIndex(t);\r
var record = this.grid.store.getAt(index);\r
\r
renderer : function(v, p, record){\r
p.css += ' x-grid3-check-col-td'; \r
- return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';\r
+ return String.format('<div class="x-grid3-check-col{0} {1}"> </div>', v ? '-on' : '', this.createId());\r
+ },\r
+ \r
+ createId : function(){\r
+ return 'x-grid3-cc-' + this.id;\r
}\r
};\r
\r
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);\r
\r
// backwards compat\r
-Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;Ext.ns('Ext.ux.tree');\r
+Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;Ext.ns('Ext.ux.grid');\r
+\r
+Ext.ux.grid.ColumnHeaderGroup = Ext.extend(Ext.util.Observable, {\r
+\r
+ constructor: function(config){\r
+ this.config = config;\r
+ },\r
+\r
+ init: function(grid){\r
+ Ext.applyIf(grid.colModel, this.config);\r
+ Ext.apply(grid.getView(), this.viewConfig);\r
+ },\r
+\r
+ viewConfig: {\r
+ initTemplates: function(){\r
+ this.constructor.prototype.initTemplates.apply(this, arguments);\r
+ var ts = this.templates || {};\r
+ if(!ts.gcell){\r
+ 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>');\r
+ }\r
+ this.templates = ts;\r
+ this.hrowRe = new RegExp("ux-grid-hd-group-row-(\\d+)", "");\r
+ },\r
+\r
+ renderHeaders: function(){\r
+ var ts = this.templates, headers = [], cm = this.cm, rows = cm.rows, tstyle = 'width:' + this.getTotalWidth() + ';';\r
+\r
+ for(var row = 0, rlen = rows.length; row < rlen; row++){\r
+ var r = rows[row], cells = [];\r
+ for(var i = 0, gcol = 0, len = r.length; i < len; i++){\r
+ var group = r[i];\r
+ group.colspan = group.colspan || 1;\r
+ var id = this.getColumnId(group.dataIndex ? cm.findColumnIndex(group.dataIndex) : gcol), gs = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle.call(this, group, gcol);\r
+ cells[i] = ts.gcell.apply({\r
+ cls: 'ux-grid-hd-group-cell',\r
+ id: id,\r
+ row: row,\r
+ style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (group.align ? 'text-align:' + group.align + ';' : ''),\r
+ tooltip: group.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + group.tooltip + '"' : '',\r
+ istyle: group.align == 'right' ? 'padding-right:16px' : '',\r
+ btn: this.grid.enableHdMenu && group.header,\r
+ value: group.header || ' '\r
+ });\r
+ gcol += group.colspan;\r
+ }\r
+ headers[row] = ts.header.apply({\r
+ tstyle: tstyle,\r
+ cells: cells.join('')\r
+ });\r
+ }\r
+ headers.push(this.constructor.prototype.renderHeaders.apply(this, arguments));\r
+ return headers.join('');\r
+ },\r
+\r
+ onColumnWidthUpdated: function(){\r
+ this.constructor.prototype.onColumnWidthUpdated.apply(this, arguments);\r
+ Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);\r
+ },\r
+\r
+ onAllColumnWidthsUpdated: function(){\r
+ this.constructor.prototype.onAllColumnWidthsUpdated.apply(this, arguments);\r
+ Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);\r
+ },\r
+\r
+ onColumnHiddenUpdated: function(){\r
+ this.constructor.prototype.onColumnHiddenUpdated.apply(this, arguments);\r
+ Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);\r
+ },\r
+\r
+ getHeaderCell: function(index){\r
+ return this.mainHd.query(this.cellSelector)[index];\r
+ },\r
+\r
+ findHeaderCell: function(el){\r
+ return el ? this.fly(el).findParent('td.x-grid3-hd', this.cellSelectorDepth) : false;\r
+ },\r
+\r
+ findHeaderIndex: function(el){\r
+ var cell = this.findHeaderCell(el);\r
+ return cell ? this.getCellIndex(cell) : false;\r
+ },\r
+\r
+ updateSortIcon: function(col, dir){\r
+ var sc = this.sortClasses, hds = this.mainHd.select(this.cellSelector).removeClass(sc);\r
+ hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);\r
+ },\r
+\r
+ handleHdDown: function(e, t){\r
+ var el = Ext.get(t);\r
+ if(el.hasClass('x-grid3-hd-btn')){\r
+ e.stopEvent();\r
+ var hd = this.findHeaderCell(t);\r
+ Ext.fly(hd).addClass('x-grid3-hd-menu-open');\r
+ var index = this.getCellIndex(hd);\r
+ this.hdCtxIndex = index;\r
+ var ms = this.hmenu.items, cm = this.cm;\r
+ ms.get('asc').setDisabled(!cm.isSortable(index));\r
+ ms.get('desc').setDisabled(!cm.isSortable(index));\r
+ this.hmenu.on('hide', function(){\r
+ Ext.fly(hd).removeClass('x-grid3-hd-menu-open');\r
+ }, this, {\r
+ single: true\r
+ });\r
+ this.hmenu.show(t, 'tl-bl?');\r
+ }else if(el.hasClass('ux-grid-hd-group-cell') || Ext.fly(t).up('.ux-grid-hd-group-cell')){\r
+ e.stopEvent();\r
+ }\r
+ },\r
+\r
+ handleHdMove: function(e, t){\r
+ var hd = this.findHeaderCell(this.activeHdRef);\r
+ if(hd && !this.headersDisabled && !Ext.fly(hd).hasClass('ux-grid-hd-group-cell')){\r
+ var hw = this.splitHandleWidth || 5, r = this.activeHdRegion, x = e.getPageX(), ss = hd.style, cur = '';\r
+ if(this.grid.enableColumnResize !== false){\r
+ if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex - 1)){\r
+ cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'e-resize' : 'col-resize'; // col-resize\r
+ // not\r
+ // always\r
+ // supported\r
+ }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){\r
+ cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize';\r
+ }\r
+ }\r
+ ss.cursor = cur;\r
+ }\r
+ },\r
+\r
+ handleHdOver: function(e, t){\r
+ var hd = this.findHeaderCell(t);\r
+ if(hd && !this.headersDisabled){\r
+ this.activeHdRef = t;\r
+ this.activeHdIndex = this.getCellIndex(hd);\r
+ var fly = this.fly(hd);\r
+ this.activeHdRegion = fly.getRegion();\r
+ if(!(this.cm.isMenuDisabled(this.activeHdIndex) || fly.hasClass('ux-grid-hd-group-cell'))){\r
+ fly.addClass('x-grid3-hd-over');\r
+ this.activeHdBtn = fly.child('.x-grid3-hd-btn');\r
+ if(this.activeHdBtn){\r
+ this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight - 1) + 'px';\r
+ }\r
+ }\r
+ }\r
+ },\r
+\r
+ handleHdOut: function(e, t){\r
+ var hd = this.findHeaderCell(t);\r
+ if(hd && (!Ext.isIE || !e.within(hd, true))){\r
+ this.activeHdRef = null;\r
+ this.fly(hd).removeClass('x-grid3-hd-over');\r
+ hd.style.cursor = '';\r
+ }\r
+ },\r
+\r
+ handleHdMenuClick: function(item){\r
+ var index = this.hdCtxIndex, cm = this.cm, ds = this.ds, id = item.getItemId();\r
+ switch(id){\r
+ case 'asc':\r
+ ds.sort(cm.getDataIndex(index), 'ASC');\r
+ break;\r
+ case 'desc':\r
+ ds.sort(cm.getDataIndex(index), 'DESC');\r
+ break;\r
+ default:\r
+ if(id.substr(0, 5) == 'group'){\r
+ var i = id.split('-'), row = parseInt(i[1], 10), col = parseInt(i[2], 10), r = this.cm.rows[row], group, gcol = 0;\r
+ for(var i = 0, len = r.length; i < len; i++){\r
+ group = r[i];\r
+ if(col >= gcol && col < gcol + group.colspan){\r
+ break;\r
+ }\r
+ gcol += group.colspan;\r
+ }\r
+ if(item.checked){\r
+ var max = cm.getColumnsBy(this.isHideableColumn, this).length;\r
+ for(var i = gcol, len = gcol + group.colspan; i < len; i++){\r
+ if(!cm.isHidden(i)){\r
+ max--;\r
+ }\r
+ }\r
+ if(max < 1){\r
+ this.onDenyColumnHide();\r
+ return false;\r
+ }\r
+ }\r
+ for(var i = gcol, len = gcol + group.colspan; i < len; i++){\r
+ if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){\r
+ cm.setHidden(i, item.checked);\r
+ }\r
+ }\r
+ }else{\r
+ index = cm.getIndexById(id.substr(4));\r
+ if(index != -1){\r
+ if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){\r
+ this.onDenyColumnHide();\r
+ return false;\r
+ }\r
+ cm.setHidden(index, item.checked);\r
+ }\r
+ }\r
+ item.checked = !item.checked;\r
+ if(item.menu){\r
+ var updateChildren = function(menu){\r
+ menu.items.each(function(childItem){\r
+ if(!childItem.disabled){\r
+ childItem.setChecked(item.checked, false);\r
+ if(childItem.menu){\r
+ updateChildren(childItem.menu);\r
+ }\r
+ }\r
+ });\r
+ }\r
+ updateChildren(item.menu);\r
+ }\r
+ var parentMenu = item, parentItem;\r
+ while(parentMenu = parentMenu.parentMenu){\r
+ if(!parentMenu.parentMenu || !(parentItem = parentMenu.parentMenu.items.get(parentMenu.getItemId())) || !parentItem.setChecked){\r
+ break;\r
+ }\r
+ var checked = parentMenu.items.findIndexBy(function(m){\r
+ return m.checked;\r
+ }) >= 0;\r
+ parentItem.setChecked(checked, true);\r
+ }\r
+ item.checked = !item.checked;\r
+ }\r
+ return true;\r
+ },\r
+\r
+ beforeColMenuShow: function(){\r
+ var cm = this.cm, rows = this.cm.rows;\r
+ this.colMenu.removeAll();\r
+ for(var col = 0, clen = cm.getColumnCount(); col < clen; col++){\r
+ var menu = this.colMenu, title = cm.getColumnHeader(col), text = [];\r
+ if(cm.config[col].fixed !== true && cm.config[col].hideable !== false){\r
+ for(var row = 0, rlen = rows.length; row < rlen; row++){\r
+ var r = rows[row], group, gcol = 0;\r
+ for(var i = 0, len = r.length; i < len; i++){\r
+ group = r[i];\r
+ if(col >= gcol && col < gcol + group.colspan){\r
+ break;\r
+ }\r
+ gcol += group.colspan;\r
+ }\r
+ if(group && group.header){\r
+ if(cm.hierarchicalColMenu){\r
+ var gid = 'group-' + row + '-' + gcol;\r
+ var item = menu.items.item(gid);\r
+ var submenu = item ? item.menu : null;\r
+ if(!submenu){\r
+ submenu = new Ext.menu.Menu({\r
+ itemId: gid\r
+ });\r
+ submenu.on("itemclick", this.handleHdMenuClick, this);\r
+ var checked = false, disabled = true;\r
+ for(var c = gcol, lc = gcol + group.colspan; c < lc; c++){\r
+ if(!cm.isHidden(c)){\r
+ checked = true;\r
+ }\r
+ if(cm.config[c].hideable !== false){\r
+ disabled = false;\r
+ }\r
+ }\r
+ menu.add({\r
+ itemId: gid,\r
+ text: group.header,\r
+ menu: submenu,\r
+ hideOnClick: false,\r
+ checked: checked,\r
+ disabled: disabled\r
+ });\r
+ }\r
+ menu = submenu;\r
+ }else{\r
+ text.push(group.header);\r
+ }\r
+ }\r
+ }\r
+ text.push(title);\r
+ menu.add(new Ext.menu.CheckItem({\r
+ itemId: "col-" + cm.getColumnId(col),\r
+ text: text.join(' '),\r
+ checked: !cm.isHidden(col),\r
+ hideOnClick: false,\r
+ disabled: cm.config[col].hideable === false\r
+ }));\r
+ }\r
+ }\r
+ },\r
+\r
+ renderUI: function(){\r
+ this.constructor.prototype.renderUI.apply(this, arguments);\r
+ Ext.apply(this.columnDrop, Ext.ux.grid.ColumnHeaderGroup.prototype.columnDropConfig);\r
+ Ext.apply(this.splitZone, Ext.ux.grid.ColumnHeaderGroup.prototype.splitZoneConfig);\r
+ }\r
+ },\r
+\r
+ splitZoneConfig: {\r
+ allowHeaderDrag: function(e){\r
+ return !e.getTarget(null, null, true).hasClass('ux-grid-hd-group-cell');\r
+ }\r
+ },\r
+\r
+ columnDropConfig: {\r
+ getTargetFromEvent: function(e){\r
+ var t = Ext.lib.Event.getTarget(e);\r
+ return this.view.findHeaderCell(t);\r
+ },\r
+\r
+ positionIndicator: function(h, n, e){\r
+ var data = Ext.ux.grid.ColumnHeaderGroup.prototype.getDragDropData.call(this, h, n, e);\r
+ if(data === false){\r
+ return false;\r
+ }\r
+ var px = data.px + this.proxyOffsets[0];\r
+ this.proxyTop.setLeftTop(px, data.r.top + this.proxyOffsets[1]);\r
+ this.proxyTop.show();\r
+ this.proxyBottom.setLeftTop(px, data.r.bottom);\r
+ this.proxyBottom.show();\r
+ return data.pt;\r
+ },\r
+\r
+ onNodeDrop: function(n, dd, e, data){\r
+ var h = data.header;\r
+ if(h != n){\r
+ var d = Ext.ux.grid.ColumnHeaderGroup.prototype.getDragDropData.call(this, h, n, e);\r
+ if(d === false){\r
+ return false;\r
+ }\r
+ var cm = this.grid.colModel, right = d.oldIndex < d.newIndex, rows = cm.rows;\r
+ for(var row = d.row, rlen = rows.length; row < rlen; row++){\r
+ var r = rows[row], len = r.length, fromIx = 0, span = 1, toIx = len;\r
+ for(var i = 0, gcol = 0; i < len; i++){\r
+ var group = r[i];\r
+ if(d.oldIndex >= gcol && d.oldIndex < gcol + group.colspan){\r
+ fromIx = i;\r
+ }\r
+ if(d.oldIndex + d.colspan - 1 >= gcol && d.oldIndex + d.colspan - 1 < gcol + group.colspan){\r
+ span = i - fromIx + 1;\r
+ }\r
+ if(d.newIndex >= gcol && d.newIndex < gcol + group.colspan){\r
+ toIx = i;\r
+ }\r
+ gcol += group.colspan;\r
+ }\r
+ var groups = r.splice(fromIx, span);\r
+ rows[row] = r.splice(0, toIx - (right ? span : 0)).concat(groups).concat(r);\r
+ }\r
+ for(var c = 0; c < d.colspan; c++){\r
+ var oldIx = d.oldIndex + (right ? 0 : c), newIx = d.newIndex + (right ? -1 : c);\r
+ cm.moveColumn(oldIx, newIx);\r
+ this.grid.fireEvent("columnmove", oldIx, newIx);\r
+ }\r
+ return true;\r
+ }\r
+ return false;\r
+ }\r
+ },\r
+\r
+ getGroupStyle: function(group, gcol){\r
+ var width = 0, hidden = true;\r
+ for(var i = gcol, len = gcol + group.colspan; i < len; i++){\r
+ if(!this.cm.isHidden(i)){\r
+ var cw = this.cm.getColumnWidth(i);\r
+ if(typeof cw == 'number'){\r
+ width += cw;\r
+ }\r
+ hidden = false;\r
+ }\r
+ }\r
+ return {\r
+ width: (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2) ? width : Math.max(width - this.borderWidth, 0)) + 'px',\r
+ hidden: hidden\r
+ };\r
+ },\r
+\r
+ updateGroupStyles: function(col){\r
+ var tables = this.mainHd.query('.x-grid3-header-offset > table'), tw = this.getTotalWidth(), rows = this.cm.rows;\r
+ for(var row = 0; row < tables.length; row++){\r
+ tables[row].style.width = tw;\r
+ if(row < rows.length){\r
+ var cells = tables[row].firstChild.firstChild.childNodes;\r
+ for(var i = 0, gcol = 0; i < cells.length; i++){\r
+ var group = rows[row][i];\r
+ if((typeof col != 'number') || (col >= gcol && col < gcol + group.colspan)){\r
+ var gs = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle.call(this, group, gcol);\r
+ cells[i].style.width = gs.width;\r
+ cells[i].style.display = gs.hidden ? 'none' : '';\r
+ }\r
+ gcol += group.colspan;\r
+ }\r
+ }\r
+ }\r
+ },\r
+\r
+ getGroupRowIndex: function(el){\r
+ if(el){\r
+ var m = el.className.match(this.hrowRe);\r
+ if(m && m[1]){\r
+ return parseInt(m[1], 10);\r
+ }\r
+ }\r
+ return this.cm.rows.length;\r
+ },\r
+\r
+ getGroupSpan: function(row, col){\r
+ if(row < 0){\r
+ return {\r
+ col: 0,\r
+ colspan: this.cm.getColumnCount()\r
+ };\r
+ }\r
+ var r = this.cm.rows[row];\r
+ if(r){\r
+ for(var i = 0, gcol = 0, len = r.length; i < len; i++){\r
+ var group = r[i];\r
+ if(col >= gcol && col < gcol + group.colspan){\r
+ return {\r
+ col: gcol,\r
+ colspan: group.colspan\r
+ };\r
+ }\r
+ gcol += group.colspan;\r
+ }\r
+ return {\r
+ col: gcol,\r
+ colspan: 0\r
+ };\r
+ }\r
+ return {\r
+ col: col,\r
+ colspan: 1\r
+ };\r
+ },\r
+\r
+ getDragDropData: function(h, n, e){\r
+ if(h.parentNode != n.parentNode){\r
+ return false;\r
+ }\r
+ var cm = this.grid.colModel, x = Ext.lib.Event.getPageX(e), r = Ext.lib.Dom.getRegion(n.firstChild), px, pt;\r
+ if((r.right - x) <= (r.right - r.left) / 2){\r
+ px = r.right + this.view.borderWidth;\r
+ pt = "after";\r
+ }else{\r
+ px = r.left;\r
+ pt = "before";\r
+ }\r
+ var oldIndex = this.view.getCellIndex(h), newIndex = this.view.getCellIndex(n);\r
+ if(cm.isFixed(newIndex)){\r
+ return false;\r
+ }\r
+ var row = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupRowIndex.call(this.view, h),\r
+ oldGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row, oldIndex),\r
+ newGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row, newIndex),\r
+ oldIndex = oldGroup.col;\r
+ newIndex = newGroup.col + (pt == "after" ? newGroup.colspan : 0);\r
+ if(newIndex >= oldGroup.col && newIndex <= oldGroup.col + oldGroup.colspan){\r
+ return false;\r
+ }\r
+ var parentGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row - 1, oldIndex);\r
+ if(newIndex < parentGroup.col || newIndex > parentGroup.col + parentGroup.colspan){\r
+ return false;\r
+ }\r
+ return {\r
+ r: r,\r
+ px: px,\r
+ pt: pt,\r
+ row: row,\r
+ oldIndex: oldIndex,\r
+ newIndex: newIndex,\r
+ colspan: oldGroup.colspan\r
+ };\r
+ }\r
+});Ext.ns('Ext.ux.tree');\r
\r
/**\r
* @class Ext.ux.tree.ColumnTree\r
if(!proxy){\r
proxy = view.el.createChild({cls:'x-view-selector'});\r
}else{\r
+ if(proxy.dom.parentNode !== view.el.dom){\r
+ view.el.dom.appendChild(proxy.dom);\r
+ }\r
proxy.setDisplayed('block');\r
}\r
fillRegions();\r
this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
this.el.addClass('x-form-file-text');
this.el.dom.removeAttribute('name');
-
- this.fileInput = this.wrap.createChild({
- id: this.getFileInputId(),
- name: this.name||this.getId(),
- cls: 'x-form-file',
- tag: 'input',
- type: 'file',
- size: 1
- });
+ this.createFileInput();
var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
text: this.buttonText
this.wrap.setWidth(this.button.getEl().getWidth());
}
- this.fileInput.on('change', function(){
- var v = this.fileInput.dom.value;
- this.setValue(v);
- this.fireEvent('fileselected', this, v);
- }, this);
+ this.bindListeners();
+ this.resizeEl = this.positionEl = this.wrap;
+ },
+
+ bindListeners: function(){
+ this.fileInput.on({
+ scope: this,
+ mouseenter: function() {
+ this.button.addClass(['x-btn-over','x-btn-focus'])
+ },
+ mouseleave: function(){
+ this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
+ },
+ mousedown: function(){
+ this.button.addClass('x-btn-click')
+ },
+ mouseup: function(){
+ this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
+ },
+ change: function(){
+ var v = this.fileInput.dom.value;
+ this.setValue(v);
+ this.fireEvent('fileselected', this, v);
+ }
+ });
+ },
+
+ createFileInput : function() {
+ this.fileInput = this.wrap.createChild({
+ id: this.getFileInputId(),
+ name: this.name||this.getId(),
+ cls: 'x-form-file',
+ tag: 'input',
+ type: 'file',
+ size: 1
+ });
+ },
+
+ reset : function(){
+ this.fileInput.remove();
+ this.createFileInput();
+ this.bindListeners();
+ Ext.ux.form.FileUploadField.superclass.reset.call(this);
},
// private
Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
Ext.destroy(this.fileInput, this.button, this.wrap);
},
+
+ onDisable: function(){
+ Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
+ this.doDisable(true);
+ },
+
+ onEnable: function(){
+ Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
+ this.doDisable(false);
-
- // private
- preFocus : Ext.emptyFn,
-
+ },
+
// private
- getResizeEl : function(){
- return this.wrap;
+ doDisable: function(disabled){
+ this.fileInput.dom.disabled = disabled;
+ this.button.setDisabled(disabled);
},
+
// private
- getPositionEl : function(){
- return this.wrap;
- },
+ preFocus : Ext.emptyFn,
// private
alignErrorIcon : function(){
// backwards compat
Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
-(function(){\r
-Ext.ns('Ext.a11y');\r
-\r
-Ext.a11y.Frame = Ext.extend(Object, {\r
- initialized: false,\r
- \r
- constructor: function(size, color){\r
- this.setSize(size || 1);\r
- this.setColor(color || '15428B');\r
- },\r
- \r
- init: function(){\r
- if (!this.initialized) {\r
- this.sides = [];\r
- \r
- var s, i;\r
- \r
- this.ct = Ext.DomHelper.append(document.body, {\r
- cls: 'x-a11y-focusframe'\r
- }, true);\r
- \r
- for (i = 0; i < 4; i++) {\r
- s = Ext.DomHelper.append(this.ct, {\r
- cls: 'x-a11y-focusframe-side',\r
- style: 'background-color: #' + this.color\r
- }, true);\r
- s.visibilityMode = Ext.Element.DISPLAY;\r
- this.sides.push(s);\r
- }\r
- \r
- this.frameTask = new Ext.util.DelayedTask(function(el){\r
- var newEl = Ext.get(el);\r
- if (newEl != this.curEl) {\r
- var w = newEl.getWidth();\r
- var h = newEl.getHeight();\r
- this.sides[0].show().setSize(w, this.size).anchorTo(el, 'tl', [0, -1]);\r
- this.sides[2].show().setSize(w, this.size).anchorTo(el, 'bl', [0, -1]);\r
- this.sides[1].show().setSize(this.size, h).anchorTo(el, 'tr', [-1, 0]);\r
- this.sides[3].show().setSize(this.size, h).anchorTo(el, 'tl', [-1, 0]);\r
- this.curEl = newEl;\r
- }\r
- }, this);\r
- \r
- this.unframeTask = new Ext.util.DelayedTask(function(){\r
- if (this.initialized) {\r
- this.sides[0].hide();\r
- this.sides[1].hide();\r
- this.sides[2].hide();\r
- this.sides[3].hide();\r
- this.curEl = null;\r
- }\r
- }, this);\r
- this.initialized = true;\r
- }\r
- },\r
- \r
- frame: function(el){\r
- this.init();\r
- this.unframeTask.cancel();\r
- this.frameTask.delay(2, false, false, [el]);\r
- },\r
- \r
- unframe: function(){\r
- this.init();\r
- this.unframeTask.delay(2);\r
- },\r
- \r
- setSize: function(size){\r
- this.size = size;\r
- },\r
- \r
- setColor: function(color){\r
- this.color = color;\r
- }\r
-});\r
-\r
-Ext.a11y.FocusFrame = new Ext.a11y.Frame(2, '15428B');\r
-Ext.a11y.RelayFrame = new Ext.a11y.Frame(1, '6B8CBF');\r
-\r
-Ext.a11y.Focusable = Ext.extend(Ext.util.Observable, {\r
- constructor: function(el, relayTo, noFrame, frameEl){\r
- Ext.a11y.Focusable.superclass.constructor.call(this);\r
+/**\r
+ * @class Ext.ux.GMapPanel\r
+ * @extends Ext.Panel\r
+ * @author Shea Frederick\r
+ */\r
+Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {\r
+ initComponent : function(){\r
\r
- this.addEvents('focus', 'blur', 'left', 'right', 'up', 'down', 'esc', 'enter', 'space');\r
+ var defConfig = {\r
+ plain: true,\r
+ zoomLevel: 3,\r
+ yaw: 180,\r
+ pitch: 0,\r
+ zoom: 0,\r
+ gmapType: 'map',\r
+ border: false\r
+ };\r
\r
- if (el instanceof Ext.Component) {\r
- this.el = el.el;\r
- this.setComponent(el);\r
- }\r
- else {\r
- this.el = Ext.get(el);\r
- this.setComponent(null);\r
- }\r
+ Ext.applyIf(this,defConfig);\r
\r
- this.setRelayTo(relayTo)\r
- this.setNoFrame(noFrame);\r
- this.setFrameEl(frameEl);\r
+ Ext.ux.GMapPanel.superclass.initComponent.call(this); \r
+\r
+ },\r
+ afterRender : function(){\r
\r
- this.init();\r
+ var wh = this.ownerCt.getSize();\r
+ Ext.applyIf(this, wh);\r
\r
- Ext.a11y.FocusMgr.register(this);\r
- },\r
- \r
- init: function(){\r
- this.el.dom.tabIndex = '1';\r
- this.el.addClass('x-a11y-focusable');\r
- this.el.on({\r
- focus: this.onFocus,\r
- blur: this.onBlur,\r
- keydown: this.onKeyDown,\r
- scope: this\r
- });\r
- },\r
- \r
- setRelayTo: function(relayTo){\r
- this.relayTo = relayTo ? Ext.a11y.FocusMgr.get(relayTo) : null;\r
- },\r
- \r
- setNoFrame: function(noFrame){\r
- this.noFrame = (noFrame === true) ? true : false;\r
- },\r
- \r
- setFrameEl: function(frameEl){\r
- this.frameEl = frameEl && Ext.get(frameEl) || this.el;\r
- },\r
- \r
- setComponent: function(cmp){\r
- this.component = cmp || null;\r
- },\r
- \r
- onKeyDown: function(e, t){\r
- var k = e.getKey(), SK = Ext.a11y.Focusable.SpecialKeys, ret, tf;\r
+ Ext.ux.GMapPanel.superclass.afterRender.call(this); \r
\r
- tf = (t !== this.el.dom) ? Ext.a11y.FocusMgr.get(t, true) : this;\r
- if (!tf) {\r
- // this can happen when you are on a focused item within a panel body\r
- // that is not a Ext.a11y.Focusable\r
- tf = Ext.a11y.FocusMgr.get(Ext.fly(t).parent('.x-a11y-focusable'));\r
+ if (this.gmapType === 'map'){\r
+ this.gmap = new GMap2(this.body.dom);\r
}\r
\r
- if (SK[k] !== undefined) {\r
- ret = this.fireEvent(SK[k], e, t, tf, this);\r
+ if (this.gmapType === 'panorama'){\r
+ this.gmap = new GStreetviewPanorama(this.body.dom);\r
}\r
- if (ret === false || this.fireEvent('keydown', e, t, tf, this) === false) {\r
- e.stopEvent();\r
+ \r
+ if (typeof this.addControl == 'object' && this.gmapType === 'map') {\r
+ this.gmap.addControl(this.addControl);\r
}\r
- },\r
- \r
- focus: function(){\r
- this.el.dom.focus();\r
- },\r
- \r
- blur: function(){\r
- this.el.dom.blur();\r
- },\r
- \r
- onFocus: function(e, t){\r
- this.el.addClass('x-a11y-focused');\r
- if (this.relayTo) {\r
- this.relayTo.el.addClass('x-a11y-focused-relay');\r
- if (!this.relayTo.noFrame) {\r
- Ext.a11y.FocusFrame.frame(this.relayTo.frameEl);\r
- }\r
- if (!this.noFrame) {\r
- Ext.a11y.RelayFrame.frame(this.frameEl);\r
+ \r
+ if (typeof this.setCenter === 'object') {\r
+ if (typeof this.setCenter.geoCodeAddr === 'string'){\r
+ this.geoCodeLookup(this.setCenter.geoCodeAddr);\r
+ }else{\r
+ if (this.gmapType === 'map'){\r
+ var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);\r
+ this.gmap.setCenter(point, this.zoomLevel); \r
+ }\r
+ if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){\r
+ this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);\r
+ }\r
}\r
- }\r
- else {\r
- if (!this.noFrame) {\r
- Ext.a11y.FocusFrame.frame(this.frameEl);\r
+ if (this.gmapType === 'panorama'){\r
+ this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});\r
}\r
}\r
- \r
- this.fireEvent('focus', e, t, this);\r
+\r
+ GEvent.bind(this.gmap, 'load', this, function(){\r
+ this.onMapReady();\r
+ });\r
+\r
},\r
- \r
- onBlur: function(e, t){\r
- if (this.relayTo) {\r
- this.relayTo.el.removeClass('x-a11y-focused-relay');\r
- Ext.a11y.RelayFrame.unframe();\r
- }\r
- this.el.removeClass('x-a11y-focused');\r
- Ext.a11y.FocusFrame.unframe();\r
- this.fireEvent('blur', e, t, this);\r
+ onMapReady : function(){\r
+ this.addMarkers(this.markers);\r
+ this.addMapControls();\r
+ this.addOptions(); \r
},\r
- \r
- destroy: function(){\r
- this.el.un('keydown', this.onKeyDown);\r
- this.el.un('focus', this.onFocus);\r
- this.el.un('blur', this.onBlur);\r
- this.el.removeClass('x-a11y-focusable');\r
- this.el.removeClass('x-a11y-focused');\r
- if (this.relayTo) {\r
- this.relayTo.el.removeClass('x-a11y-focused-relay');\r
+ onResize : function(w, h){\r
+\r
+ if (typeof this.getMap() == 'object') {\r
+ this.gmap.checkResize();\r
}\r
- }\r
-});\r
+ \r
+ Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);\r
\r
-Ext.a11y.FocusItem = Ext.extend(Object, {\r
- constructor: function(el, enableTabbing){\r
- Ext.a11y.FocusItem.superclass.constructor.call(this);\r
+ },\r
+ setSize : function(width, height, animate){\r
\r
- this.el = Ext.get(el);\r
- this.fi = new Ext.a11y.Focusable(el);\r
- this.fi.setComponent(this);\r
+ if (typeof this.getMap() == 'object') {\r
+ this.gmap.checkResize();\r
+ }\r
\r
- this.fi.on('tab', this.onTab, this);\r
+ Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);\r
\r
- this.enableTabbing = enableTabbing === true ? true : false;\r
- },\r
- \r
- getEnterItem: function(){\r
- if (this.enableTabbing) {\r
- var items = this.getFocusItems();\r
- if (items && items.length) {\r
- return items[0];\r
- }\r
- }\r
- },\r
- \r
- getFocusItems: function(){\r
- if (this.enableTabbing) {\r
- return this.el.query('a, button, input, select');\r
- }\r
- return null;\r
},\r
- \r
- onTab: function(e, t){\r
- var items = this.getFocusItems(), i;\r
+ getMap : function(){\r
+ \r
+ return this.gmap;\r
\r
- if (items && items.length && (i = items.indexOf(t)) !== -1) {\r
- if (e.shiftKey && i > 0) {\r
- e.stopEvent();\r
- items[i - 1].focus();\r
- Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);\r
- return;\r
- }\r
- else \r
- if (!e.shiftKey && i < items.length - 1) {\r
- e.stopEvent();\r
- items[i + 1].focus();\r
- Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);\r
- return;\r
- }\r
- }\r
- },\r
- \r
- focus: function(){\r
- if (this.enableTabbing) {\r
- var items = this.getFocusItems();\r
- if (items && items.length) {\r
- items[0].focus();\r
- Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);\r
- return;\r
- }\r
- }\r
- this.fi.focus();\r
},\r
- \r
- blur: function(){\r
- this.fi.blur();\r
- }\r
-});\r
-\r
-Ext.a11y.FocusMgr = function(){\r
- var all = new Ext.util.MixedCollection();\r
- \r
- return {\r
- register: function(f){\r
- all.add(f.el && Ext.id(f.el), f);\r
- },\r
+ getCenter : function(){\r
\r
- unregister: function(f){\r
- all.remove(f);\r
- },\r
+ return this.getMap().getCenter();\r
\r
- get: function(el, noCreate){\r
- return all.get(Ext.id(el)) || (noCreate ? false : new Ext.a11y.Focusable(el));\r
- },\r
+ },\r
+ getCenterLatLng : function(){\r
\r
- all: all\r
- }\r
-}();\r
-\r
-Ext.a11y.Focusable.SpecialKeys = {};\r
-Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.LEFT] = 'left';\r
-Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.RIGHT] = 'right';\r
-Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.DOWN] = 'down';\r
-Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.UP] = 'up';\r
-Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.ESC] = 'esc';\r
-Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.ENTER] = 'enter';\r
-Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.SPACE] = 'space';\r
-Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.TAB] = 'tab';\r
-\r
-// we use the new observeClass method to fire our new initFocus method on components\r
-Ext.util.Observable.observeClass(Ext.Component);\r
-Ext.Component.on('render', function(cmp){\r
- cmp.initFocus();\r
- cmp.initARIA();\r
-});\r
-Ext.override(Ext.Component, {\r
- initFocus: Ext.emptyFn,\r
- initARIA: Ext.emptyFn\r
-});\r
-\r
-Ext.override(Ext.Container, {\r
- isFocusable: true,\r
- noFocus: false,\r
- \r
- // private\r
- initFocus: function(){\r
- if (!this.fi && !this.noFocus) {\r
- this.fi = new Ext.a11y.Focusable(this);\r
- }\r
- this.mon(this.fi, {\r
- focus: this.onFocus,\r
- blur: this.onBlur,\r
- tab: this.onTab,\r
- enter: this.onEnter,\r
- esc: this.onEsc,\r
- scope: this\r
- });\r
+ var ll = this.getCenter();\r
+ return {lat: ll.lat(), lng: ll.lng()};\r
\r
- if (this.hidden) {\r
- this.isFocusable = false;\r
+ },\r
+ addMarkers : function(markers) {\r
+ \r
+ if (Ext.isArray(markers)){\r
+ for (var i = 0; i < markers.length; i++) {\r
+ var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);\r
+ this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);\r
+ }\r
}\r
\r
- this.on('show', function(){\r
- this.isFocusable = true;\r
- }, this);\r
- this.on('hide', function(){\r
- this.isFocusable = false;\r
- }, this);\r
- },\r
- \r
- focus: function(){\r
- this.fi.focus();\r
},\r
- \r
- blur: function(){\r
- this.fi.blur();\r
- },\r
- \r
- enter: function(){\r
- var eitem = this.getEnterItem();\r
- if (eitem) {\r
- eitem.focus();\r
+ addMarker : function(point, marker, clear, center, listeners){\r
+ \r
+ Ext.applyIf(marker,G_DEFAULT_ICON);\r
+\r
+ if (clear === true){\r
+ this.getMap().clearOverlays();\r
}\r
- },\r
- \r
- onFocus: Ext.emptyFn,\r
- onBlur: Ext.emptyFn,\r
- \r
- onTab: function(e, t, tf){\r
- var rf = tf.relayTo || tf;\r
- if (rf.component && rf.component !== this) {\r
- e.stopEvent();\r
- var item = e.shiftKey ? this.getPreviousFocus(rf.component) : this.getNextFocus(rf.component);\r
- item.focus();\r
+ if (center === true) {\r
+ this.getMap().setCenter(point, this.zoomLevel);\r
}\r
- },\r
- \r
- onEnter: function(e, t, tf){\r
- // check to see if enter is pressed while "on" the panel\r
- if (tf.component && tf.component === this) {\r
- e.stopEvent();\r
- this.enter();\r
+\r
+ var mark = new GMarker(point,marker);\r
+ if (typeof listeners === 'object'){\r
+ for (evt in listeners) {\r
+ GEvent.bind(mark, evt, this, listeners[evt]);\r
+ }\r
}\r
- e.stopPropagation();\r
+ this.getMap().addOverlay(mark);\r
+\r
},\r
- \r
- onEsc: function(e, t){\r
- e.preventDefault();\r
+ addMapControls : function(){\r
\r
- // check to see if esc is pressed while "inside" the panel\r
- // or while "on" the panel\r
- if (t === this.el.dom) {\r
- // "on" the panel, check if this panel has an owner panel and focus that\r
- // we dont stop the event in this case so that this same check will be\r
- // done for this ownerCt\r
- if (this.ownerCt) {\r
- this.ownerCt.focus();\r
- }\r
- }\r
- else {\r
- // we were inside the panel when esc was pressed,\r
- // so go back "on" the panel\r
- if (this.ownerCt && this.ownerCt.isFocusable) {\r
- var si = this.ownerCt.getFocusItems();\r
- \r
- if (si && si.getCount() > 1) {\r
- e.stopEvent();\r
+ if (this.gmapType === 'map') {\r
+ if (Ext.isArray(this.mapControls)) {\r
+ for(i=0;i<this.mapControls.length;i++){\r
+ this.addMapControl(this.mapControls[i]);\r
}\r
+ }else if(typeof this.mapControls === 'string'){\r
+ this.addMapControl(this.mapControls);\r
+ }else if(typeof this.mapControls === 'object'){\r
+ this.getMap().addControl(this.mapControls);\r
}\r
- this.focus();\r
}\r
+ \r
},\r
- \r
- getFocusItems: function(){\r
- return this.items &&\r
- this.items.filterBy(function(o){\r
- return o.isFocusable;\r
- }) ||\r
- null;\r
+ addMapControl : function(mc){\r
+ \r
+ var mcf = window[mc];\r
+ if (typeof mcf === 'function') {\r
+ this.getMap().addControl(new mcf());\r
+ } \r
+ \r
},\r
- \r
- getEnterItem: function(){\r
- var ci = this.getFocusItems(), length = ci ? ci.getCount() : 0;\r
+ addOptions : function(){\r
\r
- if (length === 1) {\r
- return ci.first().getEnterItem && ci.first().getEnterItem() || ci.first();\r
- }\r
- else \r
- if (length > 1) {\r
- return ci.first();\r
+ if (Ext.isArray(this.mapConfOpts)) {\r
+ var mc;\r
+ for(i=0;i<this.mapConfOpts.length;i++){\r
+ this.addOption(this.mapConfOpts[i]);\r
}\r
- },\r
- \r
- getNextFocus: function(current){\r
- var items = this.getFocusItems(), next = current, i = items.indexOf(current), length = items.getCount();\r
+ }else if(typeof this.mapConfOpts === 'string'){\r
+ this.addOption(this.mapConfOpts);\r
+ } \r
\r
- if (i === length - 1) {\r
- next = items.first();\r
- }\r
- else {\r
- next = items.get(i + 1);\r
- }\r
- return next;\r
},\r
- \r
- getPreviousFocus: function(current){\r
- var items = this.getFocusItems(), prev = current, i = items.indexOf(current), length = items.getCount();\r
+ addOption : function(mc){\r
+ \r
+ var mcf = this.getMap()[mc];\r
+ if (typeof mcf === 'function') {\r
+ this.getMap()[mc]();\r
+ } \r
\r
- if (i === 0) {\r
- prev = items.last();\r
- }\r
- else {\r
- prev = items.get(i - 1);\r
- }\r
- return prev;\r
},\r
- \r
- getFocusable : function() {\r
- return this.fi;\r
- }\r
-});\r
-\r
-Ext.override(Ext.Panel, {\r
- /**\r
- * @cfg {Boolean} enableTabbing <tt>true</tt> to enable tabbing. Default is <tt>false</tt>.\r
- */ \r
- getFocusItems: function(){\r
- // items gets all the items inside the body\r
- var items = Ext.Panel.superclass.getFocusItems.call(this), bodyFocus = null;\r
+ geoCodeLookup : function(addr) {\r
\r
- if (!items) {\r
- items = new Ext.util.MixedCollection();\r
- this.bodyFocus = this.bodyFocus || new Ext.a11y.FocusItem(this.body, this.enableTabbing);\r
- items.add('body', this.bodyFocus);\r
- }\r
- // but panels can also have tbar, bbar, fbar\r
- if (this.tbar && this.topToolbar) {\r
- items.insert(0, this.topToolbar);\r
- }\r
- if (this.bbar && this.bottomToolbar) {\r
- items.add(this.bottomToolbar);\r
- }\r
- if (this.fbar) {\r
- items.add(this.fbar);\r
- }\r
+ this.geocoder = new GClientGeocoder();\r
+ this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));\r
\r
- return items;\r
- }\r
-});\r
-\r
-Ext.override(Ext.TabPanel, {\r
- // private\r
- initFocus: function(){\r
- Ext.TabPanel.superclass.initFocus.call(this);\r
- this.mon(this.fi, {\r
- left: this.onLeft,\r
- right: this.onRight,\r
- scope: this\r
- });\r
- },\r
- \r
- onLeft: function(e){\r
- if (!this.activeTab) {\r
- return;\r
- }\r
- e.stopEvent();\r
- var prev = this.items.itemAt(this.items.indexOf(this.activeTab) - 1);\r
- if (prev) {\r
- this.setActiveTab(prev);\r
- }\r
- return false;\r
},\r
- \r
- onRight: function(e){\r
- if (!this.activeTab) {\r
- return;\r
- }\r
- e.stopEvent();\r
- var next = this.items.itemAt(this.items.indexOf(this.activeTab) + 1);\r
- if (next) {\r
- this.setActiveTab(next);\r
+ addAddressToMap : function(response) {\r
+ \r
+ if (!response || response.Status.code != 200) {\r
+ Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');\r
+ }else{\r
+ place = response.Placemark[0];\r
+ addressinfo = place.AddressDetails;\r
+ accuracy = addressinfo.Accuracy;\r
+ if (accuracy === 0) {\r
+ Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');\r
+ }else{\r
+ if (accuracy < 7) {\r
+ Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');\r
+ }else{\r
+ point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);\r
+ if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){\r
+ this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);\r
+ }\r
+ }\r
+ }\r
}\r
- return false;\r
+ \r
}\r
+ \r
});\r
\r
-Ext.override(Ext.tree.TreeNodeUI, {\r
- // private\r
- focus: function(){\r
- this.node.getOwnerTree().bodyFocus.focus();\r
- }\r
-});\r
+Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.namespace('Ext.ux.grid');\r
\r
-Ext.override(Ext.tree.TreePanel, {\r
- // private\r
- afterRender : function(){\r
- Ext.tree.TreePanel.superclass.afterRender.call(this);\r
- this.root.render();\r
- if(!this.rootVisible){\r
- this.root.renderChildren();\r
- }\r
- this.bodyFocus = new Ext.a11y.FocusItem(this.body.down('.x-tree-root-ct'));\r
- this.bodyFocus.fi.setFrameEl(this.body);\r
- } \r
+/**\r
+ * @class Ext.ux.grid.GridFilters\r
+ * @extends Ext.util.Observable\r
+ * <p>GridFilter is a plugin (<code>ptype='gridfilters'</code>) for grids that\r
+ * allow for a slightly more robust representation of filtering than what is\r
+ * provided by the default store.</p>\r
+ * <p>Filtering is adjusted by the user using the grid's column header menu\r
+ * (this menu can be disabled through configuration). Through this menu users\r
+ * can configure, enable, and disable filters for each column.</p>\r
+ * <p><b><u>Features:</u></b></p>\r
+ * <div class="mdetail-params"><ul>\r
+ * <li><b>Filtering implementations</b> :\r
+ * <div class="sub-desc">\r
+ * Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can\r
+ * be backed by a Ext.data.Store), and Boolean. Additional custom filter types\r
+ * and menus are easily created by extending Ext.ux.grid.filter.Filter.\r
+ * </div></li>\r
+ * <li><b>Graphical indicators</b> :\r
+ * <div class="sub-desc">\r
+ * Columns that are filtered have {@link #filterCls a configurable css class}\r
+ * applied to the column headers.\r
+ * </div></li>\r
+ * <li><b>Paging</b> :\r
+ * <div class="sub-desc">\r
+ * If specified as a plugin to the grid's configured PagingToolbar, the current page\r
+ * will be reset to page 1 whenever you update the filters.\r
+ * </div></li>\r
+ * <li><b>Automatic Reconfiguration</b> :\r
+ * <div class="sub-desc">\r
+ * Filters automatically reconfigure when the grid 'reconfigure' event fires.\r
+ * </div></li>\r
+ * <li><b>Stateful</b> :\r
+ * Filter information will be persisted across page loads by specifying a\r
+ * <code>stateId</code> in the Grid configuration.\r
+ * <div class="sub-desc">\r
+ * The filter collection binds to the\r
+ * <code>{@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}</code>\r
+ * and <code>{@link Ext.grid.GridPanel#beforestatesave beforestatesave}</code>\r
+ * events in order to be stateful.\r
+ * </div></li>\r
+ * <li><b>Grid Changes</b> :\r
+ * <div class="sub-desc"><ul>\r
+ * <li>A <code>filters</code> <i>property</i> is added to the grid pointing to\r
+ * this plugin.</li>\r
+ * <li>A <code>filterupdate</code> <i>event</i> is added to the grid and is\r
+ * fired upon onStateChange completion.</li>\r
+ * </ul></div></li>\r
+ * <li><b>Server side code examples</b> :\r
+ * <div class="sub-desc"><ul>\r
+ * <li><a href="http://www.vinylfox.com/extjs/grid-filter-php-backend-code.php">PHP</a> - (Thanks VinylFox)</li>\r
+ * <li><a href="http://extjs.com/forum/showthread.php?p=77326#post77326">Ruby on Rails</a> - (Thanks Zyclops)</li>\r
+ * <li><a href="http://extjs.com/forum/showthread.php?p=176596#post176596">Ruby on Rails</a> - (Thanks Rotomaul)</li>\r
+ * <li><a href="http://www.debatablybeta.com/posts/using-extjss-grid-filtering-with-django/">Python</a> - (Thanks Matt)</li>\r
+ * <li><a href="http://mcantrell.wordpress.com/2008/08/22/extjs-grids-and-grails/">Grails</a> - (Thanks Mike)</li>\r
+ * </ul></div></li>\r
+ * </ul></div>\r
+ * <p><b><u>Example usage:</u></b></p>\r
+ * <pre><code>\r
+var store = new Ext.data.GroupingStore({\r
+ ...\r
});\r
\r
-Ext.override(Ext.grid.GridPanel, {\r
- initFocus: function(){\r
- Ext.grid.GridPanel.superclass.initFocus.call(this);\r
- this.bodyFocus = new Ext.a11y.FocusItem(this.view.focusEl);\r
- this.bodyFocus.fi.setFrameEl(this.body);\r
- }\r
+var filters = new Ext.ux.grid.GridFilters({\r
+ autoReload: false, //don't reload automatically\r
+ local: true, //only filter locally\r
+ // filters may be configured through the plugin,\r
+ // or in the column definition within the column model configuration\r
+ filters: [{\r
+ type: 'numeric',\r
+ dataIndex: 'id'\r
+ }, {\r
+ type: 'string',\r
+ dataIndex: 'name'\r
+ }, {\r
+ type: 'numeric',\r
+ dataIndex: 'price'\r
+ }, {\r
+ type: 'date',\r
+ dataIndex: 'dateAdded'\r
+ }, {\r
+ type: 'list',\r
+ dataIndex: 'size',\r
+ options: ['extra small', 'small', 'medium', 'large', 'extra large'],\r
+ phpMode: true\r
+ }, {\r
+ type: 'boolean',\r
+ dataIndex: 'visible'\r
+ }]\r
});\r
-\r
-Ext.override(Ext.Button, {\r
- isFocusable: true,\r
- noFocus: false,\r
- \r
- initFocus: function(){\r
- Ext.Button.superclass.initFocus.call(this);\r
- this.fi = this.fi || new Ext.a11y.Focusable(this.btnEl, null, null, this.el);\r
- this.fi.setComponent(this);\r
- \r
- this.mon(this.fi, {\r
- focus: this.onFocus,\r
- blur: this.onBlur,\r
- scope: this\r
- });\r
- \r
- if (this.menu) {\r
- this.mon(this.fi, 'down', this.showMenu, this);\r
- this.on('menuhide', this.focus, this);\r
- }\r
- \r
- if (this.hidden) {\r
- this.isFocusable = false;\r
- }\r
- \r
- this.on('show', function(){\r
- this.isFocusable = true;\r
- }, this);\r
- this.on('hide', function(){\r
- this.isFocusable = false;\r
- }, this);\r
- },\r
- \r
- focus: function(){\r
- this.fi.focus();\r
+var cm = new Ext.grid.ColumnModel([{\r
+ ...\r
+}]);\r
+\r
+var grid = new Ext.grid.GridPanel({\r
+ ds: store,\r
+ cm: cm,\r
+ view: new Ext.grid.GroupingView(),\r
+ plugins: [filters],\r
+ height: 400,\r
+ width: 700,\r
+ bbar: new Ext.PagingToolbar({\r
+ store: store,\r
+ pageSize: 15,\r
+ plugins: [filters] //reset page to page 1 if filters change\r
+ })\r
+ });\r
+\r
+store.load({params: {start: 0, limit: 15}});\r
+\r
+// a filters property is added to the grid\r
+grid.filters\r
+ * </code></pre>\r
+ */\r
+Ext.ux.grid.GridFilters = Ext.extend(Ext.util.Observable, {\r
+ /**\r
+ * @cfg {Boolean} autoReload\r
+ * Defaults to true, reloading the datasource when a filter change happens.\r
+ * Set this to false to prevent the datastore from being reloaded if there\r
+ * are changes to the filters. See <code>{@link updateBuffer}</code>.\r
+ */\r
+ autoReload : true,\r
+ /**\r
+ * @cfg {Boolean} encode\r
+ * Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to\r
+ * encode the filter query parameter sent with a remote request.\r
+ * Defaults to false.\r
+ */\r
+ /**\r
+ * @cfg {Array} filters\r
+ * An Array of filters config objects. Refer to each filter type class for\r
+ * configuration details specific to each filter type. Filters for Strings,\r
+ * Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters\r
+ * available.\r
+ */\r
+ /**\r
+ * @cfg {String} filterCls\r
+ * The css class to be applied to column headers with active filters.\r
+ * Defaults to <tt>'ux-filterd-column'</tt>.\r
+ */\r
+ filterCls : 'ux-filtered-column',\r
+ /**\r
+ * @cfg {Boolean} local\r
+ * <tt>true</tt> to use Ext.data.Store filter functions (local filtering)\r
+ * instead of the default (<tt>false</tt>) server side filtering.\r
+ */\r
+ local : false,\r
+ /**\r
+ * @cfg {String} menuFilterText\r
+ * defaults to <tt>'Filters'</tt>.\r
+ */\r
+ menuFilterText : 'Filters',\r
+ /**\r
+ * @cfg {String} paramPrefix\r
+ * The url parameter prefix for the filters.\r
+ * Defaults to <tt>'filter'</tt>.\r
+ */\r
+ paramPrefix : 'filter',\r
+ /**\r
+ * @cfg {Boolean} showMenu\r
+ * Defaults to true, including a filter submenu in the default header menu.\r
+ */\r
+ showMenu : true,\r
+ /**\r
+ * @cfg {String} stateId\r
+ * Name of the value to be used to store state information.\r
+ */\r
+ stateId : undefined,\r
+ /**\r
+ * @cfg {Integer} updateBuffer\r
+ * Number of milliseconds to defer store updates since the last filter change.\r
+ */\r
+ updateBuffer : 500,\r
+\r
+ /** @private */\r
+ constructor : function (config) {\r
+ config = config || {};\r
+ this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);\r
+ this.filters = new Ext.util.MixedCollection();\r
+ this.filters.getKey = function (o) {\r
+ return o ? o.dataIndex : null;\r
+ };\r
+ this.addFilters(config.filters);\r
+ delete config.filters;\r
+ Ext.apply(this, config);\r
},\r
- \r
- blur: function(){\r
- this.fi.blur();\r
+\r
+ /** @private */\r
+ init : function (grid) {\r
+ if (grid instanceof Ext.grid.GridPanel) {\r
+ this.grid = grid;\r
+\r
+ this.bindStore(this.grid.getStore(), true);\r
+ // assumes no filters were passed in the constructor, so try and use ones from the colModel\r
+ if(this.filters.getCount() == 0){\r
+ this.addFilters(this.grid.getColumnModel());\r
+ }\r
+\r
+ this.grid.filters = this;\r
+\r
+ this.grid.addEvents({'filterupdate': true});\r
+\r
+ grid.on({\r
+ scope: this,\r
+ beforestaterestore: this.applyState,\r
+ beforestatesave: this.saveState,\r
+ beforedestroy: this.destroy,\r
+ reconfigure: this.onReconfigure\r
+ });\r
+\r
+ if (grid.rendered){\r
+ this.onRender();\r
+ } else {\r
+ grid.on({\r
+ scope: this,\r
+ single: true,\r
+ render: this.onRender\r
+ });\r
+ }\r
+\r
+ } else if (grid instanceof Ext.PagingToolbar) {\r
+ this.toolbar = grid;\r
+ }\r
},\r
- \r
- onFocus: function(){\r
- if (!this.disabled) {\r
- this.el.addClass("x-btn-focus");\r
+\r
+ /**\r
+ * @private\r
+ * Handler for the grid's beforestaterestore event (fires before the state of the\r
+ * grid is restored).\r
+ * @param {Object} grid The grid object\r
+ * @param {Object} state The hash of state values returned from the StateProvider.\r
+ */\r
+ applyState : function (grid, state) {\r
+ var key, filter;\r
+ this.applyingState = true;\r
+ this.clearFilters();\r
+ if (state.filters) {\r
+ for (key in state.filters) {\r
+ filter = this.filters.get(key);\r
+ if (filter) {\r
+ filter.setValue(state.filters[key]);\r
+ filter.setActive(true);\r
+ }\r
+ }\r
+ }\r
+ this.deferredUpdate.cancel();\r
+ if (this.local) {\r
+ this.reload();\r
}\r
+ delete this.applyingState;\r
},\r
- \r
- onBlur: function(){\r
- this.el.removeClass("x-btn-focus");\r
- }\r
-});\r
\r
-Ext.override(Ext.Toolbar, {\r
- initFocus: function(){\r
- Ext.Toolbar.superclass.initFocus.call(this);\r
- this.mon(this.fi, {\r
- left: this.onLeft,\r
- right: this.onRight,\r
- scope: this\r
- });\r
- \r
- this.on('focus', this.onButtonFocus, this, {\r
- stopEvent: true\r
+ /**\r
+ * Saves the state of all active filters\r
+ * @param {Object} grid\r
+ * @param {Object} state\r
+ * @return {Boolean}\r
+ */\r
+ saveState : function (grid, state) {\r
+ var filters = {};\r
+ this.filters.each(function (filter) {\r
+ if (filter.active) {\r
+ filters[filter.dataIndex] = filter.getValue();\r
+ }\r
});\r
+ return (state.filters = filters);\r
},\r
- \r
- addItem: function(item){\r
- Ext.Toolbar.superclass.add.apply(this, arguments);\r
- if (item.rendered && item.fi !== undefined) {\r
- item.fi.setRelayTo(this.el);\r
- this.relayEvents(item.fi, ['focus']);\r
+\r
+ /**\r
+ * @private\r
+ * Handler called when the grid is rendered\r
+ */\r
+ onRender : function () {\r
+ this.grid.getView().on('refresh', this.onRefresh, this);\r
+ this.createMenu();\r
+ },\r
+\r
+ /**\r
+ * @private\r
+ * Handler called by the grid 'beforedestroy' event\r
+ */\r
+ destroy : function () {\r
+ this.removeAll();\r
+ this.purgeListeners();\r
+\r
+ if(this.filterMenu){\r
+ Ext.menu.MenuMgr.unregister(this.filterMenu);\r
+ this.filterMenu.destroy();\r
+ this.filterMenu = this.menu.menu = null;\r
}\r
- else {\r
- item.on('render', function(){\r
- if (item.fi !== undefined) {\r
- item.fi.setRelayTo(this.el);\r
- this.relayEvents(item.fi, ['focus']);\r
- }\r
- }, this, {\r
- single: true\r
- });\r
+ },\r
+\r
+ /**\r
+ * Remove all filters, permanently destroying them.\r
+ */\r
+ removeAll : function () {\r
+ if(this.filters){\r
+ Ext.destroy.apply(Ext, this.filters.items);\r
+ // remove all items from the collection\r
+ this.filters.clear();\r
}\r
- return item;\r
},\r
- \r
- onFocus: function(){\r
- var items = this.getFocusItems();\r
- if (items && items.getCount() > 0) {\r
- if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {\r
- this.lastFocus.focus();\r
+\r
+\r
+ /**\r
+ * Changes the data store bound to this view and refreshes it.\r
+ * @param {Store} store The store to bind to this view\r
+ */\r
+ bindStore : function(store, initial){\r
+ if(!initial && this.store){\r
+ if (this.local) {\r
+ store.un('load', this.onLoad, this);\r
+ } else {\r
+ store.un('beforeload', this.onBeforeLoad, this);\r
}\r
- else {\r
- items.first().focus();\r
+ }\r
+ if(store){\r
+ if (this.local) {\r
+ store.on('load', this.onLoad, this);\r
+ } else {\r
+ store.on('beforeload', this.onBeforeLoad, this);\r
}\r
}\r
+ this.store = store;\r
},\r
- \r
- onButtonFocus: function(e, t, tf){\r
- this.lastFocus = tf.component || null;\r
+\r
+ /**\r
+ * @private\r
+ * Handler called when the grid reconfigure event fires\r
+ */\r
+ onReconfigure : function () {\r
+ this.bindStore(this.grid.getStore());\r
+ this.store.clearFilter();\r
+ this.removeAll();\r
+ this.addFilters(this.grid.getColumnModel());\r
+ this.updateColumnHeadings();\r
},\r
- \r
- onLeft: function(e, t, tf){\r
- e.stopEvent();\r
- this.getPreviousFocus(tf.component).focus();\r
+\r
+ createMenu : function () {\r
+ var view = this.grid.getView(),\r
+ hmenu = view.hmenu;\r
+\r
+ if (this.showMenu && hmenu) {\r
+\r
+ this.sep = hmenu.addSeparator();\r
+ this.filterMenu = new Ext.menu.Menu({\r
+ id: this.grid.id + '-filters-menu'\r
+ });\r
+ this.menu = hmenu.add({\r
+ checked: false,\r
+ itemId: 'filters',\r
+ text: this.menuFilterText,\r
+ menu: this.filterMenu\r
+ });\r
+\r
+ this.menu.on({\r
+ scope: this,\r
+ checkchange: this.onCheckChange,\r
+ beforecheckchange: this.onBeforeCheck\r
+ });\r
+ hmenu.on('beforeshow', this.onMenu, this);\r
+ }\r
+ this.updateColumnHeadings();\r
},\r
- \r
- onRight: function(e, t, tf){\r
- e.stopEvent();\r
- this.getNextFocus(tf.component).focus();\r
+\r
+ /**\r
+ * @private\r
+ * Get the filter menu from the filters MixedCollection based on the clicked header\r
+ */\r
+ getMenuFilter : function () {\r
+ var view = this.grid.getView();\r
+ if (!view || view.hdCtxIndex === undefined) {\r
+ return null;\r
+ }\r
+ return this.filters.get(\r
+ view.cm.config[view.hdCtxIndex].dataIndex\r
+ );\r
},\r
- \r
- getEnterItem: Ext.emptyFn,\r
- onTab: Ext.emptyFn,\r
- onEsc: Ext.emptyFn\r
-});\r
\r
-Ext.override(Ext.menu.BaseItem, {\r
- initFocus: function(){\r
- this.fi = new Ext.a11y.Focusable(this, this.parentMenu && this.parentMenu.el || null, true);\r
- }\r
-});\r
+ /**\r
+ * @private\r
+ * Handler called by the grid's hmenu beforeshow event\r
+ */\r
+ onMenu : function (filterMenu) {\r
+ var filter = this.getMenuFilter();\r
+\r
+ if (filter) {\r
+/*\r
+TODO: lazy rendering\r
+ if (!filter.menu) {\r
+ filter.menu = filter.createMenu();\r
+ }\r
+*/\r
+ this.menu.menu = filter.menu;\r
+ this.menu.setChecked(filter.active, false);\r
+ // disable the menu if filter.disabled explicitly set to true\r
+ this.menu.setDisabled(filter.disabled === true);\r
+ }\r
\r
-Ext.override(Ext.menu.Menu, {\r
- initFocus: function(){\r
- this.fi = new Ext.a11y.Focusable(this);\r
- this.focusEl = this.fi;\r
- }\r
-});\r
+ this.menu.setVisible(filter !== undefined);\r
+ this.sep.setVisible(filter !== undefined);\r
+ },\r
+\r
+ /** @private */\r
+ onCheckChange : function (item, value) {\r
+ this.getMenuFilter().setActive(value);\r
+ },\r
\r
-Ext.a11y.WindowMgr = new Ext.WindowGroup();\r
+ /** @private */\r
+ onBeforeCheck : function (check, value) {\r
+ return !value || this.getMenuFilter().isActivatable();\r
+ },\r
\r
-Ext.apply(Ext.WindowMgr, {\r
- bringToFront: function(win){\r
- Ext.a11y.WindowMgr.bringToFront.call(this, win);\r
- if (win.modal) {\r
- win.enter();\r
+ /**\r
+ * @private\r
+ * Handler for all events on filters.\r
+ * @param {String} event Event name\r
+ * @param {Object} filter Standard signature of the event before the event is fired\r
+ */\r
+ onStateChange : function (event, filter) {\r
+ if (event === 'serialize') {\r
+ return;\r
}\r
- else {\r
- win.focus();\r
+\r
+ if (filter == this.getMenuFilter()) {\r
+ this.menu.setChecked(filter.active, false);\r
}\r
- }\r
-});\r
\r
-Ext.override(Ext.Window, {\r
- initFocus: function(){\r
- Ext.Window.superclass.initFocus.call(this);\r
- this.on('beforehide', function(){\r
- Ext.a11y.RelayFrame.unframe();\r
- Ext.a11y.FocusFrame.unframe();\r
- });\r
- }\r
-});\r
+ if ((this.autoReload || this.local) && !this.applyingState) {\r
+ this.deferredUpdate.delay(this.updateBuffer);\r
+ }\r
+ this.updateColumnHeadings();\r
\r
-Ext.override(Ext.form.Field, {\r
- isFocusable: true,\r
- noFocus: false,\r
- \r
- initFocus: function(){\r
- this.fi = this.fi || new Ext.a11y.Focusable(this, null, true);\r
- \r
- Ext.form.Field.superclass.initFocus.call(this);\r
- \r
- if (this.hidden) {\r
- this.isFocusable = false;\r
+ if (!this.applyingState) {\r
+ this.grid.saveState();\r
}\r
- \r
- this.on('show', function(){\r
- this.isFocusable = true;\r
- }, this);\r
- this.on('hide', function(){\r
- this.isFocusable = false;\r
- }, this);\r
- }\r
-});\r
+ this.grid.fireEvent('filterupdate', this, filter);\r
+ },\r
\r
-Ext.override(Ext.FormPanel, {\r
- initFocus: function(){\r
- Ext.FormPanel.superclass.initFocus.call(this);\r
- this.on('focus', this.onFieldFocus, this, {\r
- stopEvent: true\r
- });\r
+ /**\r
+ * @private\r
+ * Handler for store's beforeload event when configured for remote filtering\r
+ * @param {Object} store\r
+ * @param {Object} options\r
+ */\r
+ onBeforeLoad : function (store, options) {\r
+ options.params = options.params || {};\r
+ this.cleanParams(options.params);\r
+ var params = this.buildQuery(this.getFilterData());\r
+ Ext.apply(options.params, params);\r
},\r
- \r
- // private\r
- createForm: function(){\r
- delete this.initialConfig.listeners;\r
- var form = new Ext.form.BasicForm(null, this.initialConfig);\r
- form.afterMethod('add', this.formItemAdd, this);\r
- return form;\r
+\r
+ /**\r
+ * @private\r
+ * Handler for store's load event when configured for local filtering\r
+ * @param {Object} store\r
+ * @param {Object} options\r
+ */\r
+ onLoad : function (store, options) {\r
+ store.filterBy(this.getRecordFilter());\r
},\r
- \r
- formItemAdd: function(item){\r
- item.on('render', function(field){\r
- field.fi.setRelayTo(this.el);\r
- this.relayEvents(field.fi, ['focus']);\r
- }, this, {\r
- single: true\r
- });\r
+\r
+ /**\r
+ * @private\r
+ * Handler called when the grid's view is refreshed\r
+ */\r
+ onRefresh : function () {\r
+ this.updateColumnHeadings();\r
},\r
- \r
- onFocus: function(){\r
- var items = this.getFocusItems();\r
- if (items && items.getCount() > 0) {\r
- if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {\r
- this.lastFocus.focus();\r
+\r
+ /**\r
+ * Update the styles for the header row based on the active filters\r
+ */\r
+ updateColumnHeadings : function () {\r
+ var view = this.grid.getView(),\r
+ i, len, filter;\r
+ if (view.mainHd) {\r
+ for (i = 0, len = view.cm.config.length; i < len; i++) {\r
+ filter = this.getFilter(view.cm.config[i].dataIndex);\r
+ Ext.fly(view.getHeaderCell(i))[filter && filter.active ? 'addClass' : 'removeClass'](this.filterCls);\r
}\r
- else {\r
- items.first().focus();\r
+ }\r
+ },\r
+\r
+ /** @private */\r
+ reload : function () {\r
+ if (this.local) {\r
+ this.grid.store.clearFilter(true);\r
+ this.grid.store.filterBy(this.getRecordFilter());\r
+ } else {\r
+ var start,\r
+ store = this.grid.store;\r
+ this.deferredUpdate.cancel();\r
+ if (this.toolbar) {\r
+ start = store.paramNames.start;\r
+ if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {\r
+ store.lastOptions.params[start] = 0;\r
+ }\r
}\r
+ store.reload();\r
}\r
},\r
- \r
- onFieldFocus: function(e, t, tf){\r
- this.lastFocus = tf.component || null;\r
+\r
+ /**\r
+ * Method factory that generates a record validator for the filters active at the time\r
+ * of invokation.\r
+ * @private\r
+ */\r
+ getRecordFilter : function () {\r
+ var f = [], len, i;\r
+ this.filters.each(function (filter) {\r
+ if (filter.active) {\r
+ f.push(filter);\r
+ }\r
+ });\r
+\r
+ len = f.length;\r
+ return function (record) {\r
+ for (i = 0; i < len; i++) {\r
+ if (!f[i].validateRecord(record)) {\r
+ return false;\r
+ }\r
+ }\r
+ return true;\r
+ };\r
},\r
- \r
- onTab: function(e, t, tf){\r
- if (tf.relayTo.component === this) {\r
- var item = e.shiftKey ? this.getPreviousFocus(tf.component) : this.getNextFocus(tf.component);\r
- \r
- if (item) {\r
- ev.stopEvent();\r
- item.focus();\r
- return;\r
+\r
+ /**\r
+ * Adds a filter to the collection and observes it for state change.\r
+ * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.\r
+ * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.\r
+ */\r
+ addFilter : function (config) {\r
+ var Cls = this.getFilterClass(config.type),\r
+ filter = config.menu ? config : (new Cls(config));\r
+ this.filters.add(filter);\r
+\r
+ Ext.util.Observable.capture(filter, this.onStateChange, this);\r
+ return filter;\r
+ },\r
+\r
+ /**\r
+ * Adds filters to the collection.\r
+ * @param {Array/Ext.grid.ColumnModel} filters Either an Array of\r
+ * filter configuration objects or an Ext.grid.ColumnModel. The columns\r
+ * of a passed Ext.grid.ColumnModel will be examined for a <code>filter</code>\r
+ * property and, if present, will be used as the filter configuration object.\r
+ */\r
+ addFilters : function (filters) {\r
+ if (filters) {\r
+ var i, len, filter, cm = false, dI;\r
+ if (filters instanceof Ext.grid.ColumnModel) {\r
+ filters = filters.config;\r
+ cm = true;\r
+ }\r
+ for (i = 0, len = filters.length; i < len; i++) {\r
+ filter = false;\r
+ if (cm) {\r
+ dI = filters[i].dataIndex;\r
+ filter = filters[i].filter || filters[i].filterable;\r
+ if (filter){\r
+ filter = (filter === true) ? {} : filter;\r
+ Ext.apply(filter, {dataIndex:dI});\r
+ // filter type is specified in order of preference:\r
+ // filter type specified in config\r
+ // type specified in store's field's type config\r
+ filter.type = filter.type || this.store.fields.get(dI).type;\r
+ }\r
+ } else {\r
+ filter = filters[i];\r
+ }\r
+ // if filter config found add filter for the column\r
+ if (filter) {\r
+ this.addFilter(filter);\r
+ }\r
}\r
}\r
- Ext.FormPanel.superclass.onTab.apply(this, arguments);\r
},\r
- \r
- getNextFocus: function(current){\r
- var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();\r
- \r
- return (i < length - 1) ? items.get(i + 1) : false;\r
+\r
+ /**\r
+ * Returns a filter for the given dataIndex, if one exists.\r
+ * @param {String} dataIndex The dataIndex of the desired filter object.\r
+ * @return {Ext.ux.grid.filter.Filter}\r
+ */\r
+ getFilter : function (dataIndex) {\r
+ return this.filters.get(dataIndex);\r
},\r
- \r
- getPreviousFocus: function(current){\r
- var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();\r
- \r
- return (i > 0) ? items.get(i - 1) : false;\r
- }\r
-});\r
\r
-Ext.override(Ext.Viewport, {\r
- initFocus: function(){\r
- Ext.Viewport.superclass.initFocus.apply(this);\r
- this.mon(Ext.get(document), 'focus', this.focus, this);\r
- this.mon(Ext.get(document), 'blur', this.blur, this);\r
- this.fi.setNoFrame(true);\r
+ /**\r
+ * Turns all filters off. This does not clear the configuration information\r
+ * (see {@link #removeAll}).\r
+ */\r
+ clearFilters : function () {\r
+ this.filters.each(function (filter) {\r
+ filter.setActive(false);\r
+ });\r
},\r
- \r
- onTab: function(e, t, tf, f){\r
- e.stopEvent();\r
- \r
- if (tf === f) {\r
- items = this.getFocusItems();\r
- if (items && items.getCount() > 0) {\r
- items.first().focus();\r
+\r
+ /**\r
+ * Returns an Array of the currently active filters.\r
+ * @return {Array} filters Array of the currently active filters.\r
+ */\r
+ getFilterData : function () {\r
+ var filters = [], i, len;\r
+\r
+ this.filters.each(function (f) {\r
+ if (f.active) {\r
+ var d = [].concat(f.serialize());\r
+ for (i = 0, len = d.length; i < len; i++) {\r
+ filters.push({\r
+ field: f.dataIndex,\r
+ data: d[i]\r
+ });\r
+ }\r
+ }\r
+ });\r
+ return filters;\r
+ },\r
+\r
+ /**\r
+ * Function to take the active filters data and build it into a query.\r
+ * The format of the query depends on the <code>{@link #encode}</code>\r
+ * configuration:\r
+ * <div class="mdetail-params"><ul>\r
+ *\r
+ * <li><b><tt>false</tt></b> : <i>Default</i>\r
+ * <div class="sub-desc">\r
+ * Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:\r
+ * <pre><code>\r
+filters[0][field]="someDataIndex"&\r
+filters[0][data][comparison]="someValue1"&\r
+filters[0][data][type]="someValue2"&\r
+filters[0][data][value]="someValue3"&\r
+ * </code></pre>\r
+ * </div></li>\r
+ * <li><b><tt>true</tt></b> :\r
+ * <div class="sub-desc">\r
+ * JSON encode the filter data\r
+ * <pre><code>\r
+filters[0][field]="someDataIndex"&\r
+filters[0][data][comparison]="someValue1"&\r
+filters[0][data][type]="someValue2"&\r
+filters[0][data][value]="someValue3"&\r
+ * </code></pre>\r
+ * </div></li>\r
+ * </ul></div>\r
+ * Override this method to customize the format of the filter query for remote requests.\r
+ * @param {Array} filters A collection of objects representing active filters and their configuration.\r
+ * Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured\r
+ * to be unique as any one filter may be a composite of more basic filters for the same dataIndex.\r
+ * @return {Object} Query keys and values\r
+ */\r
+ buildQuery : function (filters) {\r
+ var p = {}, i, f, root, dataPrefix, key, tmp,\r
+ len = filters.length;\r
+\r
+ if (!this.encode){\r
+ for (i = 0; i < len; i++) {\r
+ f = filters[i];\r
+ root = [this.paramPrefix, '[', i, ']'].join('');\r
+ p[root + '[field]'] = f.field;\r
+\r
+ dataPrefix = root + '[data]';\r
+ for (key in f.data) {\r
+ p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];\r
+ }\r
+ }\r
+ } else {\r
+ tmp = [];\r
+ for (i = 0; i < len; i++) {\r
+ f = filters[i];\r
+ tmp.push(Ext.apply(\r
+ {},\r
+ {field: f.field},\r
+ f.data\r
+ ));\r
+ }\r
+ // only build if there is active filter\r
+ if (tmp.length > 0){\r
+ p[this.paramPrefix] = Ext.util.JSON.encode(tmp);\r
}\r
}\r
- else {\r
- var rf = tf.relayTo || tf;\r
- var item = e.shiftKey ? this.getPreviousFocus(rf.component) : this.getNextFocus(rf.component);\r
- item.focus();\r
+ return p;\r
+ },\r
+\r
+ /**\r
+ * Removes filter related query parameters from the provided object.\r
+ * @param {Object} p Query parameters that may contain filter related fields.\r
+ */\r
+ cleanParams : function (p) {\r
+ // if encoding just delete the property\r
+ if (this.encode) {\r
+ delete p[this.paramPrefix];\r
+ // otherwise scrub the object of filter data\r
+ } else {\r
+ var regex, key;\r
+ regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');\r
+ for (key in p) {\r
+ if (regex.test(key)) {\r
+ delete p[key];\r
+ }\r
+ }\r
}\r
+ },\r
+\r
+ /**\r
+ * Function for locating filter classes, overwrite this with your favorite\r
+ * loader to provide dynamic filter loading.\r
+ * @param {String} type The type of filter to load ('Filter' is automatically\r
+ * appended to the passed type; eg, 'string' becomes 'StringFilter').\r
+ * @return {Class} The Ext.ux.grid.filter.Class\r
+ */\r
+ getFilterClass : function (type) {\r
+ // map the supported Ext.data.Field type values into a supported filter\r
+ switch(type) {\r
+ case 'auto':\r
+ type = 'string';\r
+ break;\r
+ case 'int':\r
+ case 'float':\r
+ type = 'numeric';\r
+ break;\r
+ }\r
+ return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];\r
}\r
});\r
- \r
-})();/**\r
- * @class Ext.ux.GMapPanel\r
- * @extends Ext.Panel\r
- * @author Shea Frederick\r
+\r
+// register ptype\r
+Ext.preg('gridfilters', Ext.ux.grid.GridFilters);\r
+Ext.namespace('Ext.ux.grid.filter');\r
+\r
+/** \r
+ * @class Ext.ux.grid.filter.Filter\r
+ * @extends Ext.util.Observable\r
+ * Abstract base class for filter implementations.\r
*/\r
-Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {\r
- initComponent : function(){\r
- \r
- var defConfig = {\r
- plain: true,\r
- zoomLevel: 3,\r
- yaw: 180,\r
- pitch: 0,\r
- zoom: 0,\r
- gmapType: 'map',\r
- border: false\r
- };\r
- \r
- Ext.applyIf(this,defConfig);\r
- \r
- Ext.ux.GMapPanel.superclass.initComponent.call(this); \r
+Ext.ux.grid.filter.Filter = Ext.extend(Ext.util.Observable, {\r
+ /**\r
+ * @cfg {Boolean} active\r
+ * Indicates the initial status of the filter (defaults to false).\r
+ */\r
+ active : false,\r
+ /**\r
+ * True if this filter is active. Use setActive() to alter after configuration.\r
+ * @type Boolean\r
+ * @property active\r
+ */\r
+ /**\r
+ * @cfg {String} dataIndex \r
+ * The {@link Ext.data.Store} dataIndex of the field this filter represents.\r
+ * The dataIndex does not actually have to exist in the store.\r
+ */\r
+ dataIndex : null,\r
+ /**\r
+ * The filter configuration menu that will be installed into the filter submenu of a column menu.\r
+ * @type Ext.menu.Menu\r
+ * @property\r
+ */\r
+ menu : null,\r
+ /**\r
+ * @cfg {Number} updateBuffer\r
+ * Number of milliseconds to wait after user interaction to fire an update. Only supported \r
+ * by filters: 'list', 'numeric', and 'string'. Defaults to 500.\r
+ */\r
+ updateBuffer : 500,\r
\r
- },\r
- afterRender : function(){\r
- \r
- var wh = this.ownerCt.getSize();\r
- Ext.applyIf(this, wh);\r
- \r
- Ext.ux.GMapPanel.superclass.afterRender.call(this); \r
- \r
- if (this.gmapType === 'map'){\r
- this.gmap = new GMap2(this.body.dom);\r
- }\r
- \r
- if (this.gmapType === 'panorama'){\r
- this.gmap = new GStreetviewPanorama(this.body.dom);\r
- }\r
- \r
- if (typeof this.addControl == 'object' && this.gmapType === 'map') {\r
- this.gmap.addControl(this.addControl);\r
+ constructor : function (config) {\r
+ Ext.apply(this, config);\r
+ \r
+ this.addEvents(\r
+ /**\r
+ * @event activate\r
+ * Fires when an inactive filter becomes active\r
+ * @param {Ext.ux.grid.filter.Filter} this\r
+ */\r
+ 'activate',\r
+ /**\r
+ * @event deactivate\r
+ * Fires when an active filter becomes inactive\r
+ * @param {Ext.ux.grid.filter.Filter} this\r
+ */\r
+ 'deactivate',\r
+ /**\r
+ * @event serialize\r
+ * Fires after the serialization process. Use this to attach additional parameters to serialization\r
+ * data before it is encoded and sent to the server.\r
+ * @param {Array/Object} data A map or collection of maps representing the current filter configuration.\r
+ * @param {Ext.ux.grid.filter.Filter} filter The filter being serialized.\r
+ */\r
+ 'serialize',\r
+ /**\r
+ * @event update\r
+ * Fires when a filter configuration has changed\r
+ * @param {Ext.ux.grid.filter.Filter} this The filter object.\r
+ */\r
+ 'update'\r
+ );\r
+ Ext.ux.grid.filter.Filter.superclass.constructor.call(this);\r
+\r
+ this.menu = new Ext.menu.Menu();\r
+ this.init(config);\r
+ if(config && config.value){\r
+ this.setValue(config.value);\r
+ this.setActive(config.active !== false, true);\r
+ delete config.value;\r
}\r
- \r
- if (typeof this.setCenter === 'object') {\r
- if (typeof this.setCenter.geoCodeAddr === 'string'){\r
- this.geoCodeLookup(this.setCenter.geoCodeAddr);\r
- }else{\r
- if (this.gmapType === 'map'){\r
- var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);\r
- this.gmap.setCenter(point, this.zoomLevel); \r
- }\r
- if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){\r
- this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);\r
- }\r
- }\r
- if (this.gmapType === 'panorama'){\r
- this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});\r
- }\r
+ },\r
+\r
+ /**\r
+ * Destroys this filter by purging any event listeners, and removing any menus.\r
+ */\r
+ destroy : function(){\r
+ if (this.menu){\r
+ this.menu.destroy();\r
}\r
+ this.purgeListeners();\r
+ },\r
\r
- GEvent.bind(this.gmap, 'load', this, function(){\r
- this.onMapReady();\r
- });\r
+ /**\r
+ * Template method to be implemented by all subclasses that is to\r
+ * initialize the filter and install required menu items.\r
+ * Defaults to Ext.emptyFn.\r
+ */\r
+ init : Ext.emptyFn,\r
+ \r
+ /**\r
+ * Template method to be implemented by all subclasses that is to\r
+ * get and return the value of the filter.\r
+ * Defaults to Ext.emptyFn.\r
+ * @return {Object} The 'serialized' form of this filter\r
+ * @methodOf Ext.ux.grid.filter.Filter\r
+ */\r
+ getValue : Ext.emptyFn,\r
+ \r
+ /**\r
+ * Template method to be implemented by all subclasses that is to\r
+ * set the value of the filter and fire the 'update' event.\r
+ * Defaults to Ext.emptyFn.\r
+ * @param {Object} data The value to set the filter\r
+ * @methodOf Ext.ux.grid.filter.Filter\r
+ */ \r
+ setValue : Ext.emptyFn,\r
+ \r
+ /**\r
+ * Template method to be implemented by all subclasses that is to\r
+ * return <tt>true</tt> if the filter has enough configuration information to be activated.\r
+ * Defaults to <tt>return true</tt>.\r
+ * @return {Boolean}\r
+ */\r
+ isActivatable : function(){\r
+ return true;\r
+ },\r
+ \r
+ /**\r
+ * Template method to be implemented by all subclasses that is to\r
+ * get and return serialized filter data for transmission to the server.\r
+ * Defaults to Ext.emptyFn.\r
+ */\r
+ getSerialArgs : Ext.emptyFn,\r
\r
+ /**\r
+ * Template method to be implemented by all subclasses that is to\r
+ * validates the provided Ext.data.Record against the filters configuration.\r
+ * Defaults to <tt>return true</tt>.\r
+ * @param {Ext.data.Record} record The record to validate\r
+ * @return {Boolean} true if the record is valid within the bounds\r
+ * of the filter, false otherwise.\r
+ */\r
+ validateRecord : function(){\r
+ return true;\r
},\r
- onMapReady : function(){\r
- this.addMarkers(this.markers);\r
- this.addMapControls();\r
- this.addOptions(); \r
+\r
+ /**\r
+ * Returns the serialized filter data for transmission to the server\r
+ * and fires the 'serialize' event.\r
+ * @return {Object/Array} An object or collection of objects containing\r
+ * key value pairs representing the current configuration of the filter.\r
+ * @methodOf Ext.ux.grid.filter.Filter\r
+ */\r
+ serialize : function(){\r
+ var args = this.getSerialArgs();\r
+ this.fireEvent('serialize', args, this);\r
+ return args;\r
},\r
- onResize : function(w, h){\r
\r
- if (typeof this.getMap() == 'object') {\r
- this.gmap.checkResize();\r
+ /** @private */\r
+ fireUpdate : function(){\r
+ if (this.active) {\r
+ this.fireEvent('update', this);\r
+ }\r
+ this.setActive(this.isActivatable());\r
+ },\r
+ \r
+ /**\r
+ * Sets the status of the filter and fires the appropriate events.\r
+ * @param {Boolean} active The new filter state.\r
+ * @param {Boolean} suppressEvent True to prevent events from being fired.\r
+ * @methodOf Ext.ux.grid.filter.Filter\r
+ */\r
+ setActive : function(active, suppressEvent){\r
+ if(this.active != active){\r
+ this.active = active;\r
+ if (suppressEvent !== true) {\r
+ this.fireEvent(active ? 'activate' : 'deactivate', this);\r
+ }\r
}\r
+ } \r
+});/** \r
+ * @class Ext.ux.grid.filter.BooleanFilter\r
+ * @extends Ext.ux.grid.filter.Filter\r
+ * Boolean filters use unique radio group IDs (so you can have more than one!)\r
+ * <p><b><u>Example Usage:</u></b></p>\r
+ * <pre><code> \r
+var filters = new Ext.ux.grid.GridFilters({\r
+ ...\r
+ filters: [{\r
+ // required configs\r
+ type: 'boolean',\r
+ dataIndex: 'visible'\r
+\r
+ // optional configs\r
+ defaultValue: null, // leave unselected (false selected by default)\r
+ yesText: 'Yes', // default\r
+ noText: 'No' // default\r
+ }]\r
+});\r
+ * </code></pre>\r
+ */\r
+Ext.ux.grid.filter.BooleanFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
+ /**\r
+ * @cfg {Boolean} defaultValue\r
+ * Set this to null if you do not want either option to be checked by default. Defaults to false.\r
+ */\r
+ defaultValue : false,\r
+ /**\r
+ * @cfg {String} yesText\r
+ * Defaults to 'Yes'.\r
+ */\r
+ yesText : 'Yes',\r
+ /**\r
+ * @cfg {String} noText\r
+ * Defaults to 'No'.\r
+ */\r
+ noText : 'No',\r
+\r
+ /** \r
+ * @private\r
+ * Template method that is to initialize the filter and install required menu items.\r
+ */\r
+ init : function (config) {\r
+ var gId = Ext.id();\r
+ this.options = [\r
+ new Ext.menu.CheckItem({text: this.yesText, group: gId, checked: this.defaultValue === true}),\r
+ new Ext.menu.CheckItem({text: this.noText, group: gId, checked: this.defaultValue === false})];\r
+ \r
+ this.menu.add(this.options[0], this.options[1]);\r
+ \r
+ for(var i=0; i<this.options.length; i++){\r
+ this.options[i].on('click', this.fireUpdate, this);\r
+ this.options[i].on('checkchange', this.fireUpdate, this);\r
+ }\r
+ },\r
+ \r
+ /**\r
+ * @private\r
+ * Template method that is to get and return the value of the filter.\r
+ * @return {String} The value of this filter\r
+ */\r
+ getValue : function () {\r
+ return this.options[0].checked;\r
+ },\r
+\r
+ /**\r
+ * @private\r
+ * Template method that is to set the value of the filter.\r
+ * @param {Object} value The value to set the filter\r
+ */ \r
+ setValue : function (value) {\r
+ this.options[value ? 0 : 1].setChecked(true);\r
+ },\r
+\r
+ /**\r
+ * @private\r
+ * Template method that is to get and return serialized filter data for\r
+ * transmission to the server.\r
+ * @return {Object/Array} An object or collection of objects containing\r
+ * key value pairs representing the current configuration of the filter.\r
+ */\r
+ getSerialArgs : function () {\r
+ var args = {type: 'boolean', value: this.getValue()};\r
+ return args;\r
+ },\r
+ \r
+ /**\r
+ * Template method that is to validate the provided Ext.data.Record\r
+ * against the filters configuration.\r
+ * @param {Ext.data.Record} record The record to validate\r
+ * @return {Boolean} true if the record is valid within the bounds\r
+ * of the filter, false otherwise.\r
+ */\r
+ validateRecord : function (record) {\r
+ return record.get(this.dataIndex) == this.getValue();\r
+ }\r
+});/** \r
+ * @class Ext.ux.grid.filter.DateFilter\r
+ * @extends Ext.ux.grid.filter.Filter\r
+ * Filter by a configurable Ext.menu.DateMenu\r
+ * <p><b><u>Example Usage:</u></b></p>\r
+ * <pre><code> \r
+var filters = new Ext.ux.grid.GridFilters({\r
+ ...\r
+ filters: [{\r
+ // required configs\r
+ type: 'date',\r
+ dataIndex: 'dateAdded',\r
\r
- Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);\r
+ // optional configs\r
+ dateFormat: 'm/d/Y', // default\r
+ beforeText: 'Before', // default\r
+ afterText: 'After', // default\r
+ onText: 'On', // default\r
+ pickerOpts: {\r
+ // any DateMenu configs\r
+ },\r
\r
+ active: true // default is false\r
+ }]\r
+});\r
+ * </code></pre>\r
+ */\r
+Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
+ /**\r
+ * @cfg {String} afterText\r
+ * Defaults to 'After'.\r
+ */\r
+ afterText : 'After',\r
+ /**\r
+ * @cfg {String} beforeText\r
+ * Defaults to 'Before'.\r
+ */\r
+ beforeText : 'Before',\r
+ /**\r
+ * @cfg {Object} compareMap\r
+ * Map for assigning the comparison values used in serialization.\r
+ */\r
+ compareMap : {\r
+ before: 'lt',\r
+ after: 'gt',\r
+ on: 'eq'\r
},\r
- setSize : function(width, height, animate){\r
- \r
- if (typeof this.getMap() == 'object') {\r
- this.gmap.checkResize();\r
+ /**\r
+ * @cfg {String} dateFormat\r
+ * The date format to return when using getValue.\r
+ * Defaults to 'm/d/Y'.\r
+ */\r
+ dateFormat : 'm/d/Y',\r
+\r
+ /**\r
+ * @cfg {Date} maxDate\r
+ * Allowable date as passed to the Ext.DatePicker\r
+ * Defaults to undefined.\r
+ */\r
+ /**\r
+ * @cfg {Date} minDate\r
+ * Allowable date as passed to the Ext.DatePicker\r
+ * Defaults to undefined.\r
+ */\r
+ /**\r
+ * @cfg {Array} menuItems\r
+ * The items to be shown in this menu\r
+ * Defaults to:<pre>\r
+ * menuItems : ['before', 'after', '-', 'on'],\r
+ * </pre>\r
+ */\r
+ menuItems : ['before', 'after', '-', 'on'],\r
+\r
+ /**\r
+ * @cfg {Object} menuItemCfgs\r
+ * Default configuration options for each menu item\r
+ */\r
+ menuItemCfgs : {\r
+ selectOnFocus: true,\r
+ width: 125\r
+ },\r
+\r
+ /**\r
+ * @cfg {String} onText\r
+ * Defaults to 'On'.\r
+ */\r
+ onText : 'On',\r
+ \r
+ /**\r
+ * @cfg {Object} pickerOpts\r
+ * Configuration options for the date picker associated with each field.\r
+ */\r
+ pickerOpts : {},\r
+\r
+ /** \r
+ * @private\r
+ * Template method that is to initialize the filter and install required menu items.\r
+ */\r
+ init : function (config) {\r
+ var menuCfg, i, len, item, cfg, Cls;\r
+\r
+ menuCfg = Ext.apply(this.pickerOpts, {\r
+ minDate: this.minDate, \r
+ maxDate: this.maxDate, \r
+ format: this.dateFormat,\r
+ listeners: {\r
+ scope: this,\r
+ select: this.onMenuSelect\r
+ }\r
+ });\r
+\r
+ this.fields = {};\r
+ for (i = 0, len = this.menuItems.length; i < len; i++) {\r
+ item = this.menuItems[i];\r
+ if (item !== '-') {\r
+ cfg = {\r
+ itemId: 'range-' + item,\r
+ text: this[item + 'Text'],\r
+ menu: new Ext.menu.DateMenu(\r
+ Ext.apply(menuCfg, {\r
+ itemId: item\r
+ })\r
+ ),\r
+ listeners: {\r
+ scope: this,\r
+ checkchange: this.onCheckChange\r
+ }\r
+ };\r
+ Cls = Ext.menu.CheckItem;\r
+ item = this.fields[item] = new Cls(cfg);\r
+ }\r
+ //this.add(item);\r
+ this.menu.add(item);\r
}\r
- \r
- Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);\r
- \r
},\r
- getMap : function(){\r
- \r
- return this.gmap;\r
- \r
+\r
+ onCheckChange : function () {\r
+ this.setActive(this.isActivatable());\r
+ this.fireEvent('update', this);\r
},\r
- getCenter : function(){\r
- \r
- return this.getMap().getCenter();\r
- \r
+\r
+ /** \r
+ * @private\r
+ * Handler method called when there is a keyup event on an input\r
+ * item of this menu.\r
+ */\r
+ onInputKeyUp : function (field, e) {\r
+ var k = e.getKey();\r
+ if (k == e.RETURN && field.isValid()) {\r
+ e.stopEvent();\r
+ this.menu.hide(true);\r
+ return;\r
+ }\r
},\r
- getCenterLatLng : function(){\r
- \r
- var ll = this.getCenter();\r
- return {lat: ll.lat(), lng: ll.lng()};\r
+\r
+ /**\r
+ * Handler for when the menu for a field fires the 'select' event\r
+ * @param {Object} date\r
+ * @param {Object} menuItem\r
+ * @param {Object} value\r
+ * @param {Object} picker\r
+ */\r
+ onMenuSelect : function (menuItem, value, picker) {\r
+ var fields = this.fields,\r
+ field = this.fields[menuItem.itemId];\r
\r
- },\r
- addMarkers : function(markers) {\r
+ field.setChecked(true);\r
\r
- if (Ext.isArray(markers)){\r
- for (var i = 0; i < markers.length; i++) {\r
- var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);\r
- this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);\r
+ if (field == fields.on) {\r
+ fields.before.setChecked(false, true);\r
+ fields.after.setChecked(false, true);\r
+ } else {\r
+ fields.on.setChecked(false, true);\r
+ if (field == fields.after && fields.before.menu.picker.value < value) {\r
+ fields.before.setChecked(false, true);\r
+ } else if (field == fields.before && fields.after.menu.picker.value > value) {\r
+ fields.after.setChecked(false, true);\r
}\r
}\r
- \r
+ this.fireEvent('update', this);\r
},\r
- addMarker : function(point, marker, clear, center, listeners){\r
- \r
- Ext.applyIf(marker,G_DEFAULT_ICON);\r
\r
- if (clear === true){\r
- this.getMap().clearOverlays();\r
- }\r
- if (center === true) {\r
- this.getMap().setCenter(point, this.zoomLevel);\r
+ /**\r
+ * @private\r
+ * Template method that is to get and return the value of the filter.\r
+ * @return {String} The value of this filter\r
+ */\r
+ getValue : function () {\r
+ var key, result = {};\r
+ for (key in this.fields) {\r
+ if (this.fields[key].checked) {\r
+ result[key] = this.fields[key].menu.picker.getValue();\r
+ }\r
}\r
+ return result;\r
+ },\r
\r
- var mark = new GMarker(point,marker);\r
- if (typeof listeners === 'object'){\r
- for (evt in listeners) {\r
- GEvent.bind(mark, evt, this, listeners[evt]);\r
+ /**\r
+ * @private\r
+ * Template method that is to set the value of the filter.\r
+ * @param {Object} value The value to set the filter\r
+ * @param {Boolean} preserve true to preserve the checked status\r
+ * of the other fields. Defaults to false, unchecking the\r
+ * other fields\r
+ */ \r
+ setValue : function (value, preserve) {\r
+ var key;\r
+ for (key in this.fields) {\r
+ if(value[key]){\r
+ this.fields[key].menu.picker.setValue(value[key]);\r
+ this.fields[key].setChecked(true);\r
+ } else if (!preserve) {\r
+ this.fields[key].setChecked(false);\r
}\r
}\r
- this.getMap().addOverlay(mark);\r
+ this.fireEvent('update', this);\r
+ },\r
\r
+ /**\r
+ * @private\r
+ * Template method that is to return <tt>true</tt> if the filter\r
+ * has enough configuration information to be activated.\r
+ * @return {Boolean}\r
+ */\r
+ isActivatable : function () {\r
+ var key;\r
+ for (key in this.fields) {\r
+ if (this.fields[key].checked) {\r
+ return true;\r
+ }\r
+ }\r
+ return false;\r
},\r
- addMapControls : function(){\r
- \r
- if (this.gmapType === 'map') {\r
- if (Ext.isArray(this.mapControls)) {\r
- for(i=0;i<this.mapControls.length;i++){\r
- this.addMapControl(this.mapControls[i]);\r
- }\r
- }else if(typeof this.mapControls === 'string'){\r
- this.addMapControl(this.mapControls);\r
- }else if(typeof this.mapControls === 'object'){\r
- this.getMap().addControl(this.mapControls);\r
+\r
+ /**\r
+ * @private\r
+ * Template method that is to get and return serialized filter data for\r
+ * transmission to the server.\r
+ * @return {Object/Array} An object or collection of objects containing\r
+ * key value pairs representing the current configuration of the filter.\r
+ */\r
+ getSerialArgs : function () {\r
+ var args = [];\r
+ for (var key in this.fields) {\r
+ if(this.fields[key].checked){\r
+ args.push({\r
+ type: 'date',\r
+ comparison: this.compareMap[key],\r
+ value: this.getFieldValue(key).format(this.dateFormat)\r
+ });\r
}\r
}\r
- \r
- },\r
- addMapControl : function(mc){\r
- \r
- var mcf = window[mc];\r
- if (typeof mcf === 'function') {\r
- this.getMap().addControl(new mcf());\r
- } \r
- \r
- },\r
- addOptions : function(){\r
- \r
- if (Ext.isArray(this.mapConfOpts)) {\r
- var mc;\r
- for(i=0;i<this.mapConfOpts.length;i++){\r
- this.addOption(this.mapConfOpts[i]);\r
- }\r
- }else if(typeof this.mapConfOpts === 'string'){\r
- this.addOption(this.mapConfOpts);\r
- } \r
- \r
+ return args;\r
},\r
- addOption : function(mc){\r
- \r
- var mcf = this.getMap()[mc];\r
- if (typeof mcf === 'function') {\r
- this.getMap()[mc]();\r
- } \r
- \r
+\r
+ /**\r
+ * Get and return the date menu picker value\r
+ * @param {String} item The field identifier ('before', 'after', 'on')\r
+ * @return {Date} Gets the current selected value of the date field\r
+ */\r
+ getFieldValue : function(item){\r
+ return this.fields[item].menu.picker.getValue();\r
},\r
- geoCodeLookup : function(addr) {\r
- \r
- this.geocoder = new GClientGeocoder();\r
- this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));\r
- \r
+ \r
+ /**\r
+ * Gets the menu picker associated with the passed field\r
+ * @param {String} item The field identifier ('before', 'after', 'on')\r
+ * @return {Object} The menu picker\r
+ */\r
+ getPicker : function(item){\r
+ return this.fields[item].menu.picker;\r
},\r
- addAddressToMap : function(response) {\r
+\r
+ /**\r
+ * Template method that is to validate the provided Ext.data.Record\r
+ * against the filters configuration.\r
+ * @param {Ext.data.Record} record The record to validate\r
+ * @return {Boolean} true if the record is valid within the bounds\r
+ * of the filter, false otherwise.\r
+ */\r
+ validateRecord : function (record) {\r
+ var key,\r
+ pickerValue,\r
+ val = record.get(this.dataIndex);\r
+ \r
+ if(!Ext.isDate(val)){\r
+ return false;\r
+ }\r
+ val = val.clearTime(true).getTime();\r
\r
- if (!response || response.Status.code != 200) {\r
- Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');\r
- }else{\r
- place = response.Placemark[0];\r
- addressinfo = place.AddressDetails;\r
- accuracy = addressinfo.Accuracy;\r
- if (accuracy === 0) {\r
- Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');\r
- }else{\r
- if (accuracy < 7) {\r
- Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');\r
- }else{\r
- point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);\r
- if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){\r
- this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);\r
- }\r
+ for (key in this.fields) {\r
+ if (this.fields[key].checked) {\r
+ pickerValue = this.getFieldValue(key).clearTime(true).getTime();\r
+ if (key == 'before' && pickerValue <= val) {\r
+ return false;\r
+ }\r
+ if (key == 'after' && pickerValue >= val) {\r
+ return false;\r
+ }\r
+ if (key == 'on' && pickerValue != val) {\r
+ return false;\r
}\r
}\r
}\r
- \r
+ return true;\r
}\r
- \r
+});/** \r
+ * @class Ext.ux.grid.filter.ListFilter\r
+ * @extends Ext.ux.grid.filter.Filter\r
+ * <p>List filters are able to be preloaded/backed by an Ext.data.Store to load\r
+ * their options the first time they are shown. ListFilter utilizes the\r
+ * {@link Ext.ux.menu.ListMenu} component.</p>\r
+ * <p>Although not shown here, this class accepts all configuration options\r
+ * for {@link Ext.ux.menu.ListMenu}.</p>\r
+ * \r
+ * <p><b><u>Example Usage:</u></b></p>\r
+ * <pre><code> \r
+var filters = new Ext.ux.grid.GridFilters({\r
+ ...\r
+ filters: [{\r
+ type: 'list',\r
+ dataIndex: 'size',\r
+ phpMode: true,\r
+ // options will be used as data to implicitly creates an ArrayStore\r
+ options: ['extra small', 'small', 'medium', 'large', 'extra large']\r
+ }]\r
});\r
-\r
-Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.ns('Ext.ux.grid');\r
-\r
-/**\r
- * @class Ext.ux.grid.GroupSummary\r
- * @extends Ext.util.Observable\r
- * A GridPanel plugin that enables dynamic column calculations and a dynamically\r
- * updated grouped summary row.\r
+ * </code></pre>\r
+ * \r
*/\r
-Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {\r
+Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
+\r
/**\r
- * @cfg {Function} summaryRenderer Renderer example:<pre><code>\r
-summaryRenderer: function(v, params, data){\r
- return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');\r
-},\r
+ * @cfg {Array} options\r
+ * <p><code>data</code> to be used to implicitly create a data store\r
+ * to back this list when the data source is <b>local</b>. If the\r
+ * data for the list is remote, use the <code>{@link #store}</code>\r
+ * config instead.</p>\r
+ * <br><p>Each item within the provided array may be in one of the\r
+ * following formats:</p>\r
+ * <div class="mdetail-params"><ul>\r
+ * <li><b>Array</b> :\r
+ * <pre><code>\r
+options: [\r
+ [11, 'extra small'], \r
+ [18, 'small'],\r
+ [22, 'medium'],\r
+ [35, 'large'],\r
+ [44, 'extra large']\r
+]\r
+ * </code></pre>\r
+ * </li>\r
+ * <li><b>Object</b> :\r
+ * <pre><code>\r
+labelField: 'name', // override default of 'text'\r
+options: [\r
+ {id: 11, name:'extra small'}, \r
+ {id: 18, name:'small'}, \r
+ {id: 22, name:'medium'}, \r
+ {id: 35, name:'large'}, \r
+ {id: 44, name:'extra large'} \r
+]\r
+ * </code></pre>\r
+ * </li>\r
+ * <li><b>String</b> :\r
+ * <pre><code>\r
+ * options: ['extra small', 'small', 'medium', 'large', 'extra large']\r
* </code></pre>\r
+ * </li>\r
*/\r
/**\r
- * @cfg {String} summaryType (Optional) The type of\r
- * calculation to be used for the column. For options available see\r
- * {@link #Calculations}.\r
+ * @cfg {Boolean} phpMode\r
+ * <p>Adjust the format of this filter. Defaults to false.</p>\r
+ * <br><p>When GridFilters <code>@cfg encode = false</code> (default):</p>\r
+ * <pre><code>\r
+// phpMode == false (default):\r
+filter[0][data][type] list\r
+filter[0][data][value] value1\r
+filter[0][data][value] value2\r
+filter[0][field] prod \r
+\r
+// phpMode == true:\r
+filter[0][data][type] list\r
+filter[0][data][value] value1, value2\r
+filter[0][field] prod \r
+ * </code></pre>\r
+ * When GridFilters <code>@cfg encode = true</code>:\r
+ * <pre><code>\r
+// phpMode == false (default):\r
+filter : [{"type":"list","value":["small","medium"],"field":"size"}]\r
+\r
+// phpMode == true:\r
+filter : [{"type":"list","value":"small,medium","field":"size"}]\r
+ * </code></pre>\r
+ */\r
+ phpMode : false,\r
+ /**\r
+ * @cfg {Ext.data.Store} store\r
+ * The {@link Ext.data.Store} this list should use as its data source\r
+ * when the data source is <b>remote</b>. If the data for the list\r
+ * is local, use the <code>{@link #options}</code> config instead.\r
*/\r
\r
- constructor : function(config){\r
- Ext.apply(this, config);\r
- Ext.ux.grid.GroupSummary.superclass.constructor.call(this);\r
- },\r
- init : function(grid){\r
- this.grid = grid;\r
- this.cm = grid.getColumnModel();\r
- this.view = grid.getView();\r
+ /** \r
+ * @private\r
+ * Template method that is to initialize the filter and install required menu items.\r
+ * @param {Object} config\r
+ */\r
+ init : function (config) {\r
+ this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);\r
\r
- var v = this.view;\r
- v.doGroupEnd = this.doGroupEnd.createDelegate(this);\r
+ // if a menu already existed, do clean up first\r
+ if (this.menu){\r
+ this.menu.destroy();\r
+ }\r
+ this.menu = new Ext.ux.menu.ListMenu(config);\r
+ this.menu.on('checkchange', this.onCheckChange, this);\r
+ },\r
+ \r
+ /**\r
+ * @private\r
+ * Template method that is to get and return the value of the filter.\r
+ * @return {String} The value of this filter\r
+ */\r
+ getValue : function () {\r
+ return this.menu.getSelected();\r
+ },\r
+ /**\r
+ * @private\r
+ * Template method that is to set the value of the filter.\r
+ * @param {Object} value The value to set the filter\r
+ */ \r
+ setValue : function (value) {\r
+ this.menu.setSelected(value);\r
+ this.fireEvent('update', this);\r
+ },\r
\r
- v.afterMethod('onColumnWidthUpdated', this.doWidth, this);\r
- v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);\r
- v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);\r
- v.afterMethod('onUpdate', this.doUpdate, this);\r
- v.afterMethod('onRemove', this.doRemove, this);\r
+ /**\r
+ * @private\r
+ * Template method that is to return <tt>true</tt> if the filter\r
+ * has enough configuration information to be activated.\r
+ * @return {Boolean}\r
+ */\r
+ isActivatable : function () {\r
+ return this.getValue().length > 0;\r
+ },\r
+ \r
+ /**\r
+ * @private\r
+ * Template method that is to get and return serialized filter data for\r
+ * transmission to the server.\r
+ * @return {Object/Array} An object or collection of objects containing\r
+ * key value pairs representing the current configuration of the filter.\r
+ */\r
+ getSerialArgs : function () {\r
+ var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};\r
+ return args;\r
+ },\r
\r
- if(!this.rowTpl){\r
- this.rowTpl = new Ext.Template(\r
- '<div class="x-grid3-summary-row" style="{tstyle}">',\r
- '<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',\r
- '<tbody><tr>{cells}</tr></tbody>',\r
- '</table></div>'\r
- );\r
- this.rowTpl.disableFormats = true;\r
- }\r
- this.rowTpl.compile();\r
+ /** @private */\r
+ onCheckChange : function(){\r
+ this.dt.delay(this.updateBuffer);\r
+ },\r
+ \r
+ \r
+ /**\r
+ * Template method that is to validate the provided Ext.data.Record\r
+ * against the filters configuration.\r
+ * @param {Ext.data.Record} record The record to validate\r
+ * @return {Boolean} true if the record is valid within the bounds\r
+ * of the filter, false otherwise.\r
+ */\r
+ validateRecord : function (record) {\r
+ return this.getValue().indexOf(record.get(this.dataIndex)) > -1;\r
+ }\r
+});/** \r
+ * @class Ext.ux.grid.filter.NumericFilter\r
+ * @extends Ext.ux.grid.filter.Filter\r
+ * Filters using an Ext.ux.menu.RangeMenu.\r
+ * <p><b><u>Example Usage:</u></b></p>\r
+ * <pre><code> \r
+var filters = new Ext.ux.grid.GridFilters({\r
+ ...\r
+ filters: [{\r
+ type: 'numeric',\r
+ dataIndex: 'price'\r
+ }]\r
+});\r
+ * </code></pre> \r
+ */\r
+Ext.ux.grid.filter.NumericFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
\r
- if(!this.cellTpl){\r
- this.cellTpl = new Ext.Template(\r
- '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',\r
- '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',\r
- "</td>"\r
- );\r
- this.cellTpl.disableFormats = true;\r
- }\r
- this.cellTpl.compile();\r
+ /**\r
+ * @cfg {Object} fieldCls\r
+ * The Class to use to construct each field item within this menu\r
+ * Defaults to:<pre>\r
+ * fieldCls : Ext.form.NumberField\r
+ * </pre>\r
+ */\r
+ fieldCls : Ext.form.NumberField,\r
+ /**\r
+ * @cfg {Object} fieldCfg\r
+ * The default configuration options for any field item unless superseded\r
+ * by the <code>{@link #fields}</code> configuration.\r
+ * Defaults to:<pre>\r
+ * fieldCfg : {}\r
+ * </pre>\r
+ * Example usage:\r
+ * <pre><code>\r
+fieldCfg : {\r
+ width: 150,\r
+},\r
+ * </code></pre>\r
+ */\r
+ /**\r
+ * @cfg {Object} fields\r
+ * The field items may be configured individually\r
+ * Defaults to <tt>undefined</tt>.\r
+ * Example usage:\r
+ * <pre><code>\r
+fields : {\r
+ gt: { // override fieldCfg options\r
+ width: 200,\r
+ fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}\r
+ }\r
+},\r
+ * </code></pre>\r
+ */\r
+ /**\r
+ * @cfg {Object} iconCls\r
+ * The iconCls to be applied to each comparator field item.\r
+ * Defaults to:<pre>\r
+iconCls : {\r
+ gt : 'ux-rangemenu-gt',\r
+ lt : 'ux-rangemenu-lt',\r
+ eq : 'ux-rangemenu-eq'\r
+}\r
+ * </pre>\r
+ */\r
+ iconCls : {\r
+ gt : 'ux-rangemenu-gt',\r
+ lt : 'ux-rangemenu-lt',\r
+ eq : 'ux-rangemenu-eq'\r
},\r
\r
/**\r
- * Toggle the display of the summary row on/off\r
- * @param {Boolean} visible <tt>true</tt> to show the summary, <tt>false</tt> to hide the summary.\r
+ * @cfg {Object} menuItemCfgs\r
+ * Default configuration options for each menu item\r
+ * Defaults to:<pre>\r
+menuItemCfgs : {\r
+ emptyText: 'Enter Filter Text...',\r
+ selectOnFocus: true,\r
+ width: 125\r
+}\r
+ * </pre>\r
*/\r
- toggleSummaries : function(visible){\r
- var el = this.grid.getGridEl();\r
- if(el){\r
- if(visible === undefined){\r
- visible = el.hasClass('x-grid-hide-summary');\r
- }\r
- el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');\r
- }\r
+ menuItemCfgs : {\r
+ emptyText: 'Enter Filter Text...',\r
+ selectOnFocus: true,\r
+ width: 125\r
},\r
\r
- renderSummary : function(o, cs){\r
- cs = cs || this.view.getColumnData();\r
- var cfg = this.cm.config;\r
+ /**\r
+ * @cfg {Array} menuItems\r
+ * The items to be shown in this menu. Items are added to the menu\r
+ * according to their position within this array. Defaults to:<pre>\r
+ * menuItems : ['lt','gt','-','eq']\r
+ * </pre>\r
+ */\r
+ menuItems : ['lt', 'gt', '-', 'eq'],\r
\r
- var buf = [], c, p = {}, cf, last = cs.length-1;\r
- for(var i = 0, len = cs.length; i < len; i++){\r
- c = cs[i];\r
- cf = cfg[i];\r
- p.id = c.id;\r
- p.style = c.style;\r
- p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');\r
- if(cf.summaryType || cf.summaryRenderer){\r
- p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);\r
- }else{\r
- p.value = '';\r
- }\r
- if(p.value == undefined || p.value === "") p.value = " ";\r
- buf[buf.length] = this.cellTpl.apply(p);\r
- }\r
+ /** \r
+ * @private\r
+ * Template method that is to initialize the filter and install required menu items.\r
+ */\r
+ init : function (config) {\r
+ // if a menu already existed, do clean up first\r
+ if (this.menu){\r
+ this.menu.destroy();\r
+ } \r
+ this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, {\r
+ // pass along filter configs to the menu\r
+ fieldCfg : this.fieldCfg || {},\r
+ fieldCls : this.fieldCls,\r
+ fields : this.fields || {},\r
+ iconCls: this.iconCls,\r
+ menuItemCfgs: this.menuItemCfgs,\r
+ menuItems: this.menuItems,\r
+ updateBuffer: this.updateBuffer\r
+ }));\r
+ // relay the event fired by the menu\r
+ this.menu.on('update', this.fireUpdate, this);\r
+ },\r
+ \r
+ /**\r
+ * @private\r
+ * Template method that is to get and return the value of the filter.\r
+ * @return {String} The value of this filter\r
+ */\r
+ getValue : function () {\r
+ return this.menu.getValue();\r
+ },\r
\r
- return this.rowTpl.apply({\r
- tstyle: 'width:'+this.view.getTotalWidth()+';',\r
- cells: buf.join('')\r
- });\r
+ /**\r
+ * @private\r
+ * Template method that is to set the value of the filter.\r
+ * @param {Object} value The value to set the filter\r
+ */ \r
+ setValue : function (value) {\r
+ this.menu.setValue(value);\r
},\r
\r
/**\r
* @private\r
- * @param {Object} rs\r
- * @param {Object} cs\r
+ * Template method that is to return <tt>true</tt> if the filter\r
+ * has enough configuration information to be activated.\r
+ * @return {Boolean}\r
*/\r
- calculate : function(rs, cs){\r
- var data = {}, r, c, cfg = this.cm.config, cf;\r
- for(var j = 0, jlen = rs.length; j < jlen; j++){\r
- r = rs[j];\r
- for(var i = 0, len = cs.length; i < len; i++){\r
- c = cs[i];\r
- cf = cfg[i];\r
- if(cf.summaryType){\r
- data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);\r
- }\r
+ isActivatable : function () {\r
+ var values = this.getValue();\r
+ for (key in values) {\r
+ if (values[key] !== undefined) {\r
+ return true;\r
}\r
}\r
- return data;\r
+ return false;\r
},\r
-\r
- doGroupEnd : function(buf, g, cs, ds, colCount){\r
- var data = this.calculate(g.rs, cs);\r
- buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');\r
+ \r
+ /**\r
+ * @private\r
+ * Template method that is to get and return serialized filter data for\r
+ * transmission to the server.\r
+ * @return {Object/Array} An object or collection of objects containing\r
+ * key value pairs representing the current configuration of the filter.\r
+ */\r
+ getSerialArgs : function () {\r
+ var key,\r
+ args = [],\r
+ values = this.menu.getValue();\r
+ for (key in values) {\r
+ args.push({\r
+ type: 'numeric',\r
+ comparison: key,\r
+ value: values[key]\r
+ });\r
+ }\r
+ return args;\r
},\r
\r
- doWidth : function(col, w, tw){\r
- var gs = this.view.getGroups(), s;\r
- for(var i = 0, len = gs.length; i < len; i++){\r
- s = gs[i].childNodes[2];\r
- s.style.width = tw;\r
- s.firstChild.style.width = tw;\r
- s.firstChild.rows[0].childNodes[col].style.width = w;\r
+ /**\r
+ * Template method that is to validate the provided Ext.data.Record\r
+ * against the filters configuration.\r
+ * @param {Ext.data.Record} record The record to validate\r
+ * @return {Boolean} true if the record is valid within the bounds\r
+ * of the filter, false otherwise.\r
+ */\r
+ validateRecord : function (record) {\r
+ var val = record.get(this.dataIndex),\r
+ values = this.getValue();\r
+ if (values.eq !== undefined && val != values.eq) {\r
+ return false;\r
}\r
- },\r
-\r
- doAllWidths : function(ws, tw){\r
- var gs = this.view.getGroups(), s, cells, wlen = ws.length;\r
- for(var i = 0, len = gs.length; i < len; i++){\r
- s = gs[i].childNodes[2];\r
- s.style.width = tw;\r
- s.firstChild.style.width = tw;\r
- cells = s.firstChild.rows[0].childNodes;\r
- for(var j = 0; j < wlen; j++){\r
- cells[j].style.width = ws[j];\r
- }\r
+ if (values.lt !== undefined && val >= values.lt) {\r
+ return false;\r
}\r
- },\r
-\r
- doHidden : function(col, hidden, tw){\r
- var gs = this.view.getGroups(), s, display = hidden ? 'none' : '';\r
- for(var i = 0, len = gs.length; i < len; i++){\r
- s = gs[i].childNodes[2];\r
- s.style.width = tw;\r
- s.firstChild.style.width = tw;\r
- s.firstChild.rows[0].childNodes[col].style.display = display;\r
+ if (values.gt !== undefined && val <= values.gt) {\r
+ return false;\r
}\r
- },\r
-\r
- // Note: requires that all (or the first) record in the\r
- // group share the same group value. Returns false if the group\r
- // could not be found.\r
- refreshSummary : function(groupValue){\r
- return this.refreshSummaryById(this.view.getGroupId(groupValue));\r
- },\r
+ return true;\r
+ }\r
+});/** \r
+ * @class Ext.ux.grid.filter.StringFilter\r
+ * @extends Ext.ux.grid.filter.Filter\r
+ * Filter by a configurable Ext.form.TextField\r
+ * <p><b><u>Example Usage:</u></b></p>\r
+ * <pre><code> \r
+var filters = new Ext.ux.grid.GridFilters({\r
+ ...\r
+ filters: [{\r
+ // required configs\r
+ type: 'string',\r
+ dataIndex: 'name',\r
+ \r
+ // optional configs\r
+ value: 'foo',\r
+ active: true, // default is false\r
+ iconCls: 'ux-gridfilter-text-icon' // default\r
+ // any Ext.form.TextField configs accepted\r
+ }]\r
+});\r
+ * </code></pre>\r
+ */\r
+Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
\r
- getSummaryNode : function(gid){\r
- var g = Ext.fly(gid, '_gsummary');\r
- if(g){\r
- return g.down('.x-grid3-summary-row', true);\r
- }\r
- return null;\r
- },\r
+ /**\r
+ * @cfg {String} iconCls\r
+ * The iconCls to be applied to the menu item.\r
+ * Defaults to <tt>'ux-gridfilter-text-icon'</tt>.\r
+ */\r
+ iconCls : 'ux-gridfilter-text-icon',\r
\r
- refreshSummaryById : function(gid){\r
- var g = document.getElementById(gid);\r
- if(!g){\r
- return false;\r
- }\r
- var rs = [];\r
- this.grid.store.each(function(r){\r
- if(r._groupId == gid){\r
- rs[rs.length] = r;\r
+ emptyText: 'Enter Filter Text...',\r
+ selectOnFocus: true,\r
+ width: 125,\r
+ \r
+ /** \r
+ * @private\r
+ * Template method that is to initialize the filter and install required menu items.\r
+ */\r
+ init : function (config) {\r
+ Ext.applyIf(config, {\r
+ enableKeyEvents: true,\r
+ iconCls: this.iconCls,\r
+ listeners: {\r
+ scope: this,\r
+ keyup: this.onInputKeyUp\r
}\r
});\r
- var cs = this.view.getColumnData();\r
- var data = this.calculate(rs, cs);\r
- var markup = this.renderSummary({data: data}, cs);\r
\r
- var existing = this.getSummaryNode(gid);\r
- if(existing){\r
- g.removeChild(existing);\r
- }\r
- Ext.DomHelper.append(g, markup);\r
- return true;\r
+ this.inputItem = new Ext.form.TextField(config); \r
+ this.menu.add(this.inputItem);\r
+ this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);\r
+ },\r
+ \r
+ /**\r
+ * @private\r
+ * Template method that is to get and return the value of the filter.\r
+ * @return {String} The value of this filter\r
+ */\r
+ getValue : function () {\r
+ return this.inputItem.getValue();\r
+ },\r
+ \r
+ /**\r
+ * @private\r
+ * Template method that is to set the value of the filter.\r
+ * @param {Object} value The value to set the filter\r
+ */ \r
+ setValue : function (value) {\r
+ this.inputItem.setValue(value);\r
+ this.fireEvent('update', this);\r
},\r
\r
- doUpdate : function(ds, record){\r
- this.refreshSummaryById(record._groupId);\r
+ /**\r
+ * @private\r
+ * Template method that is to return <tt>true</tt> if the filter\r
+ * has enough configuration information to be activated.\r
+ * @return {Boolean}\r
+ */\r
+ isActivatable : function () {\r
+ return this.inputItem.getValue().length > 0;\r
},\r
\r
- doRemove : function(ds, record, index, isUpdate){\r
- if(!isUpdate){\r
- this.refreshSummaryById(record._groupId);\r
- }\r
+ /**\r
+ * @private\r
+ * Template method that is to get and return serialized filter data for\r
+ * transmission to the server.\r
+ * @return {Object/Array} An object or collection of objects containing\r
+ * key value pairs representing the current configuration of the filter.\r
+ */\r
+ getSerialArgs : function () {\r
+ return {type: 'string', value: this.getValue()};\r
},\r
\r
/**\r
- * Show a message in the summary row.\r
- * <pre><code>\r
-grid.on('afteredit', function(){\r
- var groupValue = 'Ext Forms: Field Anchoring';\r
- summary.showSummaryMsg(groupValue, 'Updating Summary...');\r
-});\r
- * </code></pre>\r
- * @param {String} groupValue\r
- * @param {String} msg Text to use as innerHTML for the summary row.\r
+ * Template method that is to validate the provided Ext.data.Record\r
+ * against the filters configuration.\r
+ * @param {Ext.data.Record} record The record to validate\r
+ * @return {Boolean} true if the record is valid within the bounds\r
+ * of the filter, false otherwise.\r
*/\r
- showSummaryMsg : function(groupValue, msg){\r
- var gid = this.view.getGroupId(groupValue);\r
- var node = this.getSummaryNode(gid);\r
- if(node){\r
- node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';\r
+ validateRecord : function (record) {\r
+ var val = record.get(this.dataIndex);\r
+\r
+ if(typeof val != 'string') {\r
+ return (this.getValue().length === 0);\r
+ }\r
+\r
+ return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;\r
+ },\r
+ \r
+ /** \r
+ * @private\r
+ * Handler method called when there is a keyup event on this.inputItem\r
+ */\r
+ onInputKeyUp : function (field, e) {\r
+ var k = e.getKey();\r
+ if (k == e.RETURN && field.isValid()) {\r
+ e.stopEvent();\r
+ this.menu.hide(true);\r
+ return;\r
}\r
+ // restart the timer\r
+ this.updateTask.delay(this.updateBuffer);\r
}\r
});\r
-\r
-//backwards compat\r
-Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;\r
-\r
-\r
-/**\r
- * Calculation types for summary row:</p><div class="mdetail-params"><ul>\r
- * <li><b><tt>sum</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>count</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>max</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>min</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>average</tt></b> : <div class="sub-desc"></div></li>\r
- * </ul></div>\r
- * <p>Custom calculations may be implemented. An example of\r
- * custom <code>summaryType=totalCost</code>:</p><pre><code>\r
-// define a custom summary function\r
-Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){\r
- return v + (record.data.estimate * record.data.rate);\r
-};\r
- * </code></pre>\r
- * @property Calculations\r
+Ext.namespace('Ext.ux.menu');\r
+\r
+/** \r
+ * @class Ext.ux.menu.ListMenu\r
+ * @extends Ext.menu.Menu\r
+ * This is a supporting class for {@link Ext.ux.grid.filter.ListFilter}.\r
+ * Although not listed as configuration options for this class, this class\r
+ * also accepts all configuration options from {@link Ext.ux.grid.filter.ListFilter}.\r
*/\r
+Ext.ux.menu.ListMenu = Ext.extend(Ext.menu.Menu, {\r
+ /**\r
+ * @cfg {String} labelField\r
+ * Defaults to 'text'.\r
+ */\r
+ labelField : 'text',\r
+ /**\r
+ * @cfg {String} paramPrefix\r
+ * Defaults to 'Loading...'.\r
+ */\r
+ loadingText : 'Loading...',\r
+ /**\r
+ * @cfg {Boolean} loadOnShow\r
+ * Defaults to true.\r
+ */\r
+ loadOnShow : true,\r
+ /**\r
+ * @cfg {Boolean} single\r
+ * Specify true to group all items in this list into a single-select\r
+ * radio button group. Defaults to false.\r
+ */\r
+ single : false,\r
\r
-Ext.ux.grid.GroupSummary.Calculations = {\r
- 'sum' : function(v, record, field){\r
- return v + (record.data[field]||0);\r
+ constructor : function (cfg) {\r
+ this.selected = [];\r
+ this.addEvents(\r
+ /**\r
+ * @event checkchange\r
+ * Fires when there is a change in checked items from this list\r
+ * @param {Object} item Ext.menu.CheckItem\r
+ * @param {Object} checked The checked value that was set\r
+ */\r
+ 'checkchange'\r
+ );\r
+ \r
+ Ext.ux.menu.ListMenu.superclass.constructor.call(this, cfg = cfg || {});\r
+ \r
+ if(!cfg.store && cfg.options){\r
+ var options = [];\r
+ for(var i=0, len=cfg.options.length; i<len; i++){\r
+ var value = cfg.options[i];\r
+ switch(Ext.type(value)){\r
+ case 'array': options.push(value); break;\r
+ case 'object': options.push([value.id, value[this.labelField]]); break;\r
+ case 'string': options.push([value, value]); break;\r
+ }\r
+ }\r
+ \r
+ this.store = new Ext.data.Store({\r
+ reader: new Ext.data.ArrayReader({id: 0}, ['id', this.labelField]),\r
+ data: options,\r
+ listeners: {\r
+ 'load': this.onLoad,\r
+ scope: this\r
+ }\r
+ });\r
+ this.loaded = true;\r
+ } else {\r
+ this.add({text: this.loadingText, iconCls: 'loading-indicator'});\r
+ this.store.on('load', this.onLoad, this);\r
+ }\r
},\r
\r
- 'count' : function(v, record, field, data){\r
- return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);\r
+ destroy : function () {\r
+ if (this.store) {\r
+ this.store.destroy(); \r
+ }\r
+ Ext.ux.menu.ListMenu.superclass.destroy.call(this);\r
},\r
\r
- 'max' : function(v, record, field, data){\r
- var v = record.data[field];\r
- var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];\r
- return v > max ? (data[field+'max'] = v) : max;\r
+ /**\r
+ * Lists will initially show a 'loading' item while the data is retrieved from the store.\r
+ * In some cases the loaded data will result in a list that goes off the screen to the\r
+ * right (as placement calculations were done with the loading item). This adapter will\r
+ * allow show to be called with no arguments to show with the previous arguments and\r
+ * thus recalculate the width and potentially hang the menu from the left.\r
+ */\r
+ show : function () {\r
+ var lastArgs = null;\r
+ return function(){\r
+ if(arguments.length === 0){\r
+ Ext.ux.menu.ListMenu.superclass.show.apply(this, lastArgs);\r
+ } else {\r
+ lastArgs = arguments;\r
+ if (this.loadOnShow && !this.loaded) {\r
+ this.store.load();\r
+ }\r
+ Ext.ux.menu.ListMenu.superclass.show.apply(this, arguments);\r
+ }\r
+ };\r
+ }(),\r
+ \r
+ /** @private */\r
+ onLoad : function (store, records) {\r
+ var visible = this.isVisible();\r
+ this.hide(false);\r
+ \r
+ this.removeAll(true);\r
+ \r
+ var gid = this.single ? Ext.id() : null;\r
+ for(var i=0, len=records.length; i<len; i++){\r
+ var item = new Ext.menu.CheckItem({\r
+ text: records[i].get(this.labelField), \r
+ group: gid,\r
+ checked: this.selected.indexOf(records[i].id) > -1,\r
+ hideOnClick: false});\r
+ \r
+ item.itemId = records[i].id;\r
+ item.on('checkchange', this.checkChange, this);\r
+ \r
+ this.add(item);\r
+ }\r
+ \r
+ this.loaded = true;\r
+ \r
+ if (visible) {\r
+ this.show();\r
+ } \r
+ this.fireEvent('load', this, records);\r
},\r
\r
- 'min' : function(v, record, field, data){\r
- var v = record.data[field];\r
- var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];\r
- return v < min ? (data[field+'min'] = v) : min;\r
+ /**\r
+ * Get the selected items.\r
+ * @return {Array} selected\r
+ */\r
+ getSelected : function () {\r
+ return this.selected;\r
+ },\r
+ \r
+ /** @private */\r
+ setSelected : function (value) {\r
+ value = this.selected = [].concat(value);\r
+\r
+ if (this.loaded) {\r
+ this.items.each(function(item){\r
+ item.setChecked(false, true);\r
+ for (var i = 0, len = value.length; i < len; i++) {\r
+ if (item.itemId == value[i]) {\r
+ item.setChecked(true, true);\r
+ }\r
+ }\r
+ }, this);\r
+ }\r
},\r
+ \r
+ /**\r
+ * Handler for the 'checkchange' event from an check item in this menu\r
+ * @param {Object} item Ext.menu.CheckItem\r
+ * @param {Object} checked The checked value that was set\r
+ */\r
+ checkChange : function (item, checked) {\r
+ var value = [];\r
+ this.items.each(function(item){\r
+ if (item.checked) {\r
+ value.push(item.itemId);\r
+ }\r
+ },this);\r
+ this.selected = value;\r
+ \r
+ this.fireEvent('checkchange', item, checked);\r
+ } \r
+});Ext.ns('Ext.ux.menu');\r
+\r
+/** \r
+ * @class Ext.ux.menu.RangeMenu\r
+ * @extends Ext.menu.Menu\r
+ * Custom implementation of Ext.menu.Menu that has preconfigured\r
+ * items for gt, lt, eq.\r
+ * <p><b><u>Example Usage:</u></b></p>\r
+ * <pre><code> \r
+\r
+ * </code></pre> \r
+ */\r
+Ext.ux.menu.RangeMenu = Ext.extend(Ext.menu.Menu, {\r
\r
- 'average' : function(v, record, field, data){\r
- var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);\r
- var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));\r
- return t === 0 ? 0 : t / c;\r
- }\r
-};\r
-Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;\r
+ constructor : function (config) {\r
\r
-/**\r
- * @class Ext.ux.grid.HybridSummary\r
- * @extends Ext.ux.grid.GroupSummary\r
- * Adds capability to specify the summary data for the group via json as illustrated here:\r
- * <pre><code>\r
-{\r
- data: [\r
- {\r
- projectId: 100, project: 'House',\r
- taskId: 112, description: 'Paint',\r
- estimate: 6, rate: 150,\r
- due:'06/24/2007'\r
- },\r
- ...\r
- ],\r
+ Ext.ux.menu.RangeMenu.superclass.constructor.call(this, config);\r
\r
- summaryData: {\r
- 'House': {\r
- description: 14, estimate: 9,\r
- rate: 99, due: new Date(2009, 6, 29),\r
- cost: 999\r
+ this.addEvents(\r
+ /**\r
+ * @event update\r
+ * Fires when a filter configuration has changed\r
+ * @param {Ext.ux.grid.filter.Filter} this The filter object.\r
+ */\r
+ 'update'\r
+ );\r
+ \r
+ this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);\r
+ \r
+ var i, len, item, cfg, Cls;\r
+\r
+ for (i = 0, len = this.menuItems.length; i < len; i++) {\r
+ item = this.menuItems[i];\r
+ if (item !== '-') {\r
+ // defaults\r
+ cfg = {\r
+ itemId: 'range-' + item,\r
+ enableKeyEvents: true,\r
+ iconCls: this.iconCls[item] || 'no-icon',\r
+ listeners: {\r
+ scope: this,\r
+ keyup: this.onInputKeyUp\r
+ }\r
+ };\r
+ Ext.apply(\r
+ cfg,\r
+ // custom configs\r
+ Ext.applyIf(this.fields[item] || {}, this.fieldCfg[item]),\r
+ // configurable defaults\r
+ this.menuItemCfgs\r
+ );\r
+ Cls = cfg.fieldCls || this.fieldCls;\r
+ item = this.fields[item] = new Cls(cfg);\r
+ }\r
+ this.add(item);\r
}\r
- }\r
-}\r
- * </code></pre>\r
- *\r
- */\r
-Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {\r
+ },\r
+\r
/**\r
* @private\r
- * @param {Object} rs\r
- * @param {Object} cs\r
+ * called by this.updateTask\r
*/\r
- calculate : function(rs, cs){\r
- var gcol = this.view.getGroupField();\r
- var gvalue = rs[0].data[gcol];\r
- var gdata = this.getSummaryData(gvalue);\r
- return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);\r
+ fireUpdate : function () {\r
+ this.fireEvent('update', this);\r
},\r
-\r
+ \r
/**\r
- * <pre><code>\r
-grid.on('afteredit', function(){\r
- var groupValue = 'Ext Forms: Field Anchoring';\r
- summary.showSummaryMsg(groupValue, 'Updating Summary...');\r
- setTimeout(function(){ // simulate server call\r
- // HybridSummary class implements updateSummaryData\r
- summary.updateSummaryData(groupValue,\r
- // create data object based on configured dataIndex\r
- {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});\r
- }, 2000);\r
-});\r
- * </code></pre>\r
- * @param {String} groupValue\r
- * @param {Object} data data object\r
- * @param {Boolean} skipRefresh (Optional) Defaults to false\r
+ * Get and return the value of the filter.\r
+ * @return {String} The value of this filter\r
*/\r
- updateSummaryData : function(groupValue, data, skipRefresh){\r
- var json = this.grid.store.reader.jsonData;\r
- if(!json.summaryData){\r
- json.summaryData = {};\r
+ getValue : function () {\r
+ var result = {}, key, field;\r
+ for (key in this.fields) {\r
+ field = this.fields[key];\r
+ if (field.isValid() && String(field.getValue()).length > 0) {\r
+ result[key] = field.getValue();\r
+ }\r
}\r
- json.summaryData[groupValue] = data;\r
- if(!skipRefresh){\r
- this.refreshSummary(groupValue);\r
+ return result;\r
+ },\r
+ \r
+ /**\r
+ * Set the value of this menu and fires the 'update' event.\r
+ * @param {Object} data The data to assign to this menu\r
+ */ \r
+ setValue : function (data) {\r
+ var key;\r
+ for (key in this.fields) {\r
+ this.fields[key].setValue(data[key] !== undefined ? data[key] : '');\r
}\r
+ this.fireEvent('update', this);\r
},\r
\r
- /**\r
- * Returns the summaryData for the specified groupValue or null.\r
- * @param {String} groupValue\r
- * @return {Object} summaryData\r
+ /** \r
+ * @private\r
+ * Handler method called when there is a keyup event on an input\r
+ * item of this menu.\r
*/\r
- getSummaryData : function(groupValue){\r
- var json = this.grid.store.reader.jsonData;\r
- if(json && json.summaryData){\r
- return json.summaryData[groupValue];\r
+ onInputKeyUp : function (field, e) {\r
+ var k = e.getKey();\r
+ if (k == e.RETURN && field.isValid()) {\r
+ e.stopEvent();\r
+ this.hide(true);\r
+ return;\r
}\r
- return null;\r
+ \r
+ if (field == this.fields.eq) {\r
+ if (this.fields.gt) {\r
+ this.fields.gt.setValue(null);\r
+ }\r
+ if (this.fields.lt) {\r
+ this.fields.lt.setValue(null);\r
+ }\r
+ }\r
+ else {\r
+ this.fields.eq.setValue(null);\r
+ }\r
+ \r
+ // restart the timer\r
+ this.updateTask.delay(this.updateBuffer);\r
}\r
});\r
+Ext.ns('Ext.ux.grid');\r
\r
-//backwards compat\r
-Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;\r
-Ext.ux.GroupTab = Ext.extend(Ext.Container, {\r
- mainItem: 0,\r
- \r
- expanded: true,\r
- \r
- deferredRender: true,\r
- \r
- activeTab: null,\r
- \r
- idDelimiter: '__',\r
- \r
- headerAsText: false,\r
- \r
- frame: false,\r
- \r
- hideBorders: true,\r
- \r
- initComponent: function(config){\r
+/**\r
+ * @class Ext.ux.grid.GroupSummary\r
+ * @extends Ext.util.Observable\r
+ * A GridPanel plugin that enables dynamic column calculations and a dynamically\r
+ * updated grouped summary row.\r
+ */\r
+Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {\r
+ /**\r
+ * @cfg {Function} summaryRenderer Renderer example:<pre><code>\r
+summaryRenderer: function(v, params, data){\r
+ return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');\r
+},\r
+ * </code></pre>\r
+ */\r
+ /**\r
+ * @cfg {String} summaryType (Optional) The type of\r
+ * calculation to be used for the column. For options available see\r
+ * {@link #Calculations}.\r
+ */\r
+\r
+ constructor : function(config){\r
Ext.apply(this, config);\r
- this.frame = false;\r
- \r
- Ext.ux.GroupTab.superclass.initComponent.call(this);\r
- \r
- this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');\r
- \r
- this.setLayout(new Ext.layout.CardLayout({\r
- deferredRender: this.deferredRender\r
- }));\r
- \r
- if (!this.stack) {\r
- this.stack = Ext.TabPanel.AccessStack();\r
+ Ext.ux.grid.GroupSummary.superclass.constructor.call(this);\r
+ },\r
+ init : function(grid){\r
+ this.grid = grid;\r
+ var v = this.view = grid.getView();\r
+ v.doGroupEnd = this.doGroupEnd.createDelegate(this);\r
+\r
+ v.afterMethod('onColumnWidthUpdated', this.doWidth, this);\r
+ v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);\r
+ v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);\r
+ v.afterMethod('onUpdate', this.doUpdate, this);\r
+ v.afterMethod('onRemove', this.doRemove, this);\r
+\r
+ if(!this.rowTpl){\r
+ this.rowTpl = new Ext.Template(\r
+ '<div class="x-grid3-summary-row" style="{tstyle}">',\r
+ '<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',\r
+ '<tbody><tr>{cells}</tr></tbody>',\r
+ '</table></div>'\r
+ );\r
+ this.rowTpl.disableFormats = true;\r
}\r
- \r
- this.initItems();\r
- \r
- this.on('beforerender', function(){\r
- this.groupEl = this.ownerCt.getGroupEl(this);\r
- }, this);\r
- \r
- this.on('add', this.onAdd, this, {\r
- target: this\r
- });\r
- this.on('remove', this.onRemove, this, {\r
- target: this\r
- });\r
- \r
- if (this.mainItem !== undefined) {\r
- var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);\r
- delete this.mainItem;\r
- this.setMainItem(item);\r
+ this.rowTpl.compile();\r
+\r
+ if(!this.cellTpl){\r
+ this.cellTpl = new Ext.Template(\r
+ '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',\r
+ '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',\r
+ "</td>"\r
+ );\r
+ this.cellTpl.disableFormats = true;\r
}\r
+ this.cellTpl.compile();\r
},\r
- \r
+\r
/**\r
- * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which\r
- * can return false to cancel the tab change.\r
- * @param {String/Panel} tab The id or tab Panel to activate\r
+ * Toggle the display of the summary row on/off\r
+ * @param {Boolean} visible <tt>true</tt> to show the summary, <tt>false</tt> to hide the summary.\r
*/\r
- setActiveTab : function(item){\r
- item = this.getComponent(item);\r
- if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){\r
- return;\r
+ toggleSummaries : function(visible){\r
+ var el = this.grid.getGridEl();\r
+ if(el){\r
+ if(visible === undefined){\r
+ visible = el.hasClass('x-grid-hide-summary');\r
+ }\r
+ el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');\r
}\r
- if(!this.rendered){\r
- this.activeTab = item;\r
- return;\r
+ },\r
+\r
+ renderSummary : function(o, cs){\r
+ cs = cs || this.view.getColumnData();\r
+ var cfg = this.grid.getColumnModel().config,\r
+ buf = [], c, p = {}, cf, last = cs.length-1;\r
+ for(var i = 0, len = cs.length; i < len; i++){\r
+ c = cs[i];\r
+ cf = cfg[i];\r
+ p.id = c.id;\r
+ p.style = c.style;\r
+ p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');\r
+ if(cf.summaryType || cf.summaryRenderer){\r
+ p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);\r
+ }else{\r
+ p.value = '';\r
+ }\r
+ if(p.value == undefined || p.value === "") p.value = " ";\r
+ buf[buf.length] = this.cellTpl.apply(p);\r
}\r
- if(this.activeTab != item){\r
- if(this.activeTab && this.activeTab != this.mainItem){\r
- var oldEl = this.getTabEl(this.activeTab);\r
- if(oldEl){\r
- Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');\r
+\r
+ return this.rowTpl.apply({\r
+ tstyle: 'width:'+this.view.getTotalWidth()+';',\r
+ cells: buf.join('')\r
+ });\r
+ },\r
+\r
+ /**\r
+ * @private\r
+ * @param {Object} rs\r
+ * @param {Object} cs\r
+ */\r
+ calculate : function(rs, cs){\r
+ var data = {}, r, c, cfg = this.grid.getColumnModel().config, cf;\r
+ for(var j = 0, jlen = rs.length; j < jlen; j++){\r
+ r = rs[j];\r
+ for(var i = 0, len = cs.length; i < len; i++){\r
+ c = cs[i];\r
+ cf = cfg[i];\r
+ if(cf.summaryType){\r
+ data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);\r
}\r
- this.activeTab.fireEvent('deactivate', this.activeTab);\r
}\r
- var el = this.getTabEl(item);\r
- Ext.fly(el).addClass('x-grouptabs-strip-active');\r
- this.activeTab = item;\r
- this.stack.add(item);\r
+ }\r
+ return data;\r
+ },\r
\r
- this.layout.setActiveItem(item);\r
- if(this.layoutOnTabChange && item.doLayout){\r
- item.doLayout();\r
- }\r
- if(this.scrolling){\r
- this.scrollToTab(item, this.animScroll);\r
- }\r
+ doGroupEnd : function(buf, g, cs, ds, colCount){\r
+ var data = this.calculate(g.rs, cs);\r
+ buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');\r
+ },\r
\r
- item.fireEvent('activate', item);\r
- this.fireEvent('tabchange', this, item);\r
+ doWidth : function(col, w, tw){\r
+ var gs = this.view.getGroups(), s;\r
+ for(var i = 0, len = gs.length; i < len; i++){\r
+ s = gs[i].childNodes[2];\r
+ s.style.width = tw;\r
+ s.firstChild.style.width = tw;\r
+ s.firstChild.rows[0].childNodes[col].style.width = w;\r
}\r
},\r
- \r
- getTabEl: function(item){\r
- if (item == this.mainItem) {\r
- return this.groupEl;\r
+\r
+ doAllWidths : function(ws, tw){\r
+ var gs = this.view.getGroups(), s, cells, wlen = ws.length;\r
+ for(var i = 0, len = gs.length; i < len; i++){\r
+ s = gs[i].childNodes[2];\r
+ s.style.width = tw;\r
+ s.firstChild.style.width = tw;\r
+ cells = s.firstChild.rows[0].childNodes;\r
+ for(var j = 0; j < wlen; j++){\r
+ cells[j].style.width = ws[j];\r
+ }\r
}\r
- return Ext.TabPanel.prototype.getTabEl.call(this, item);\r
},\r
- \r
- onRender: function(ct, position){\r
- Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);\r
- \r
- this.strip = Ext.fly(this.groupEl).createChild({\r
- tag: 'ul',\r
- cls: 'x-grouptabs-sub'\r
- });\r
\r
- this.tooltip = new Ext.ToolTip({\r
- target: this.groupEl,\r
- delegate: 'a.x-grouptabs-text',\r
- trackMouse: true,\r
- renderTo: document.body,\r
- listeners: {\r
- beforeshow: function(tip) {\r
- var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)\r
- ? this.mainItem\r
- : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);\r
-\r
- if(!item.tabTip) {\r
- return false;\r
- }\r
- tip.body.dom.innerHTML = item.tabTip;\r
- },\r
- scope: this\r
- }\r
- });\r
- \r
- if (!this.itemTpl) {\r
- var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');\r
- tt.disableFormats = true;\r
- tt.compile();\r
- Ext.ux.GroupTab.prototype.itemTpl = tt;\r
- }\r
- \r
- this.items.each(this.initTab, this);\r
- },\r
- \r
- afterRender: function(){\r
- Ext.ux.GroupTab.superclass.afterRender.call(this);\r
- \r
- if (this.activeTab !== undefined) {\r
- var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);\r
- delete this.activeTab;\r
- this.setActiveTab(item);\r
+ doHidden : function(col, hidden, tw){\r
+ var gs = this.view.getGroups(), s, display = hidden ? 'none' : '';\r
+ for(var i = 0, len = gs.length; i < len; i++){\r
+ s = gs[i].childNodes[2];\r
+ s.style.width = tw;\r
+ s.firstChild.style.width = tw;\r
+ s.firstChild.rows[0].childNodes[col].style.display = display;\r
}\r
},\r
- \r
- // private\r
- initTab: function(item, index){\r
- var before = this.strip.dom.childNodes[index];\r
- var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);\r
- \r
- if (item === this.mainItem) {\r
- item.tabEl = this.groupEl;\r
- p.cls += ' x-grouptabs-main-item';\r
- }\r
- \r
- var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);\r
- \r
- item.tabEl = item.tabEl || el;\r
- \r
- item.on('disable', this.onItemDisabled, this);\r
- item.on('enable', this.onItemEnabled, this);\r
- item.on('titlechange', this.onItemTitleChanged, this);\r
- item.on('iconchange', this.onItemIconChanged, this);\r
- item.on('beforeshow', this.onBeforeShowItem, this);\r
+\r
+ // Note: requires that all (or the first) record in the\r
+ // group share the same group value. Returns false if the group\r
+ // could not be found.\r
+ refreshSummary : function(groupValue){\r
+ return this.refreshSummaryById(this.view.getGroupId(groupValue));\r
},\r
- \r
- setMainItem: function(item){\r
- item = this.getComponent(item);\r
- if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {\r
- return;\r
+\r
+ getSummaryNode : function(gid){\r
+ var g = Ext.fly(gid, '_gsummary');\r
+ if(g){\r
+ return g.down('.x-grid3-summary-row', true);\r
}\r
- \r
- this.mainItem = item;\r
- },\r
- \r
- getMainItem: function(){\r
- return this.mainItem || null;\r
+ return null;\r
},\r
- \r
- // private\r
- onBeforeShowItem: function(item){\r
- if (item != this.activeTab) {\r
- this.setActiveTab(item);\r
+\r
+ refreshSummaryById : function(gid){\r
+ var g = Ext.getDom(gid);\r
+ if(!g){\r
return false;\r
}\r
- },\r
- \r
- // private\r
- onAdd: function(gt, item, index){\r
- if (this.rendered) {\r
- this.initTab.call(this, item, index);\r
- }\r
- },\r
- \r
- // private\r
- onRemove: function(tp, item){\r
- Ext.destroy(Ext.get(this.getTabEl(item)));\r
- this.stack.remove(item);\r
- item.un('disable', this.onItemDisabled, this);\r
- item.un('enable', this.onItemEnabled, this);\r
- item.un('titlechange', this.onItemTitleChanged, this);\r
- item.un('iconchange', this.onItemIconChanged, this);\r
- item.un('beforeshow', this.onBeforeShowItem, this);\r
- if (item == this.activeTab) {\r
- var next = this.stack.next();\r
- if (next) {\r
- this.setActiveTab(next);\r
- }\r
- else if (this.items.getCount() > 0) {\r
- this.setActiveTab(0);\r
- }\r
- else {\r
- this.activeTab = null;\r
+ var rs = [];\r
+ this.grid.getStore().each(function(r){\r
+ if(r._groupId == gid){\r
+ rs[rs.length] = r;\r
}\r
+ });\r
+ var cs = this.view.getColumnData(),\r
+ data = this.calculate(rs, cs),\r
+ markup = this.renderSummary({data: data}, cs),\r
+ existing = this.getSummaryNode(gid);\r
+ \r
+ if(existing){\r
+ g.removeChild(existing);\r
}\r
+ Ext.DomHelper.append(g, markup);\r
+ return true;\r
},\r
- \r
- // private\r
- onBeforeAdd: function(item){\r
- var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);\r
- if (existing) {\r
- this.setActiveTab(item);\r
- return false;\r
- }\r
- Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);\r
- var es = item.elements;\r
- item.elements = es ? es.replace(',header', '') : es;\r
- item.border = (item.border === true);\r
+\r
+ doUpdate : function(ds, record){\r
+ this.refreshSummaryById(record._groupId);\r
},\r
- \r
- // private\r
- onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,\r
- onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,\r
- \r
- // private\r
- onItemTitleChanged: function(item){\r
- var el = this.getTabEl(item);\r
- if (el) {\r
- Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;\r
+\r
+ doRemove : function(ds, record, index, isUpdate){\r
+ if(!isUpdate){\r
+ this.refreshSummaryById(record._groupId);\r
}\r
},\r
- \r
- //private\r
- onItemIconChanged: function(item, iconCls, oldCls){\r
- var el = this.getTabEl(item);\r
- if (el) {\r
- Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);\r
+\r
+ /**\r
+ * Show a message in the summary row.\r
+ * <pre><code>\r
+grid.on('afteredit', function(){\r
+ var groupValue = 'Ext Forms: Field Anchoring';\r
+ summary.showSummaryMsg(groupValue, 'Updating Summary...');\r
+});\r
+ * </code></pre>\r
+ * @param {String} groupValue\r
+ * @param {String} msg Text to use as innerHTML for the summary row.\r
+ */\r
+ showSummaryMsg : function(groupValue, msg){\r
+ var gid = this.view.getGroupId(groupValue),\r
+ node = this.getSummaryNode(gid);\r
+ if(node){\r
+ node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';\r
}\r
- },\r
- \r
- beforeDestroy: function(){\r
- Ext.TabPanel.prototype.beforeDestroy.call(this);\r
- this.tooltip.destroy();\r
}\r
});\r
\r
-Ext.reg('grouptab', Ext.ux.GroupTab);\r
-Ext.ns('Ext.ux');\r
+//backwards compat\r
+Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;\r
\r
-Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {\r
- tabPosition: 'left',\r
- \r
- alternateColor: false,\r
- \r
- alternateCls: 'x-grouptabs-panel-alt',\r
- \r
- defaultType: 'grouptab',\r
- \r
- deferredRender: false,\r
- \r
- activeGroup : null,\r
- \r
- initComponent: function(){\r
- Ext.ux.GroupTabPanel.superclass.initComponent.call(this);\r
- \r
- this.addEvents(\r
- 'beforegroupchange',\r
- 'groupchange'\r
- );\r
- this.elements = 'body,header';\r
- this.stripTarget = 'header';\r
- \r
- this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';\r
- \r
- this.addClass('x-grouptabs-panel');\r
- \r
- if (this.tabStyle && this.tabStyle != '') {\r
- this.addClass('x-grouptabs-panel-' + this.tabStyle);\r
- }\r
- \r
- if (this.alternateColor) {\r
- this.addClass(this.alternateCls);\r
- }\r
- \r
- this.on('beforeadd', function(gtp, item, index){\r
- this.initGroup(item, index);\r
- }); \r
- },\r
- \r
- initEvents : function() {\r
- this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);\r
- },\r
- \r
- onRender: function(ct, position){\r
- Ext.TabPanel.superclass.onRender.call(this, ct, position);\r
\r
- if(this.plain){\r
- var pos = this.tabPosition == 'top' ? 'header' : 'footer';\r
- this[pos].addClass('x-tab-panel-'+pos+'-plain');\r
- }\r
+/**\r
+ * Calculation types for summary row:</p><div class="mdetail-params"><ul>\r
+ * <li><b><tt>sum</tt></b> : <div class="sub-desc"></div></li>\r
+ * <li><b><tt>count</tt></b> : <div class="sub-desc"></div></li>\r
+ * <li><b><tt>max</tt></b> : <div class="sub-desc"></div></li>\r
+ * <li><b><tt>min</tt></b> : <div class="sub-desc"></div></li>\r
+ * <li><b><tt>average</tt></b> : <div class="sub-desc"></div></li>\r
+ * </ul></div>\r
+ * <p>Custom calculations may be implemented. An example of\r
+ * custom <code>summaryType=totalCost</code>:</p><pre><code>\r
+// define a custom summary function\r
+Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){\r
+ return v + (record.data.estimate * record.data.rate);\r
+};\r
+ * </code></pre>\r
+ * @property Calculations\r
+ */\r
\r
- var st = this[this.stripTarget];\r
+Ext.ux.grid.GroupSummary.Calculations = {\r
+ 'sum' : function(v, record, field){\r
+ return v + (record.data[field]||0);\r
+ },\r
\r
- this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{\r
- tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});\r
+ 'count' : function(v, record, field, data){\r
+ return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);\r
+ },\r
\r
- var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);\r
- this.strip = new Ext.Element(this.stripWrap.dom.firstChild);\r
+ 'max' : function(v, record, field, data){\r
+ var v = record.data[field];\r
+ var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];\r
+ return v > max ? (data[field+'max'] = v) : max;\r
+ },\r
\r
- this.header.addClass('x-grouptabs-panel-header');\r
- this.bwrap.addClass('x-grouptabs-bwrap');\r
- this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');\r
+ 'min' : function(v, record, field, data){\r
+ var v = record.data[field];\r
+ var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];\r
+ return v < min ? (data[field+'min'] = v) : min;\r
+ },\r
\r
- if (!this.itemTpl) {\r
- var tt = new Ext.Template(\r
- '<li class="{cls}" id="{id}">', \r
- '<a class="x-grouptabs-expand" onclick="return false;"></a>', \r
- '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',\r
- '<span>{text}</span></a>', \r
- '</li>'\r
- );\r
- tt.disableFormats = true;\r
- tt.compile();\r
- Ext.ux.GroupTabPanel.prototype.itemTpl = tt;\r
+ 'average' : function(v, record, field, data){\r
+ var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);\r
+ var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));\r
+ return t === 0 ? 0 : t / c;\r
+ }\r
+};\r
+Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;\r
+\r
+/**\r
+ * @class Ext.ux.grid.HybridSummary\r
+ * @extends Ext.ux.grid.GroupSummary\r
+ * Adds capability to specify the summary data for the group via json as illustrated here:\r
+ * <pre><code>\r
+{\r
+ data: [\r
+ {\r
+ projectId: 100, project: 'House',\r
+ taskId: 112, description: 'Paint',\r
+ estimate: 6, rate: 150,\r
+ due:'06/24/2007'\r
+ },\r
+ ...\r
+ ],\r
+\r
+ summaryData: {\r
+ 'House': {\r
+ description: 14, estimate: 9,\r
+ rate: 99, due: new Date(2009, 6, 29),\r
+ cost: 999\r
}\r
+ }\r
+}\r
+ * </code></pre>\r
+ *\r
+ */\r
+Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {\r
+ /**\r
+ * @private\r
+ * @param {Object} rs\r
+ * @param {Object} cs\r
+ */\r
+ calculate : function(rs, cs){\r
+ var gcol = this.view.getGroupField(),\r
+ gvalue = rs[0].data[gcol],\r
+ gdata = this.getSummaryData(gvalue);\r
+ return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);\r
+ },\r
\r
- this.items.each(this.initGroup, this);\r
+ /**\r
+ * <pre><code>\r
+grid.on('afteredit', function(){\r
+ var groupValue = 'Ext Forms: Field Anchoring';\r
+ summary.showSummaryMsg(groupValue, 'Updating Summary...');\r
+ setTimeout(function(){ // simulate server call\r
+ // HybridSummary class implements updateSummaryData\r
+ summary.updateSummaryData(groupValue,\r
+ // create data object based on configured dataIndex\r
+ {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});\r
+ }, 2000);\r
+});\r
+ * </code></pre>\r
+ * @param {String} groupValue\r
+ * @param {Object} data data object\r
+ * @param {Boolean} skipRefresh (Optional) Defaults to false\r
+ */\r
+ updateSummaryData : function(groupValue, data, skipRefresh){\r
+ var json = this.grid.getStore().reader.jsonData;\r
+ if(!json.summaryData){\r
+ json.summaryData = {};\r
+ }\r
+ json.summaryData[groupValue] = data;\r
+ if(!skipRefresh){\r
+ this.refreshSummary(groupValue);\r
+ }\r
},\r
+\r
+ /**\r
+ * Returns the summaryData for the specified groupValue or null.\r
+ * @param {String} groupValue\r
+ * @return {Object} summaryData\r
+ */\r
+ getSummaryData : function(groupValue){\r
+ var json = this.grid.getStore().reader.jsonData;\r
+ if(json && json.summaryData){\r
+ return json.summaryData[groupValue];\r
+ }\r
+ return null;\r
+ }\r
+});\r
+\r
+//backwards compat\r
+Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;\r
+Ext.ux.GroupTab = Ext.extend(Ext.Container, {\r
+ mainItem: 0,\r
\r
- afterRender: function(){\r
- Ext.ux.GroupTabPanel.superclass.afterRender.call(this);\r
+ expanded: true,\r
+ \r
+ deferredRender: true,\r
+ \r
+ activeTab: null,\r
+ \r
+ idDelimiter: '__',\r
+ \r
+ headerAsText: false,\r
+ \r
+ frame: false,\r
+ \r
+ hideBorders: true,\r
+ \r
+ initComponent: function(config){\r
+ Ext.apply(this, config);\r
+ this.frame = false;\r
\r
- this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({\r
- cls: 'x-tab-joint'\r
- });\r
+ Ext.ux.GroupTab.superclass.initComponent.call(this);\r
\r
- this.addClass('x-tab-panel-' + this.tabPosition);\r
- this.header.setWidth(this.tabWidth);\r
+ this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');\r
\r
- if (this.activeGroup !== undefined) {\r
- var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);\r
- delete this.activeGroup;\r
- this.setActiveGroup(group);\r
- group.setActiveTab(group.getMainItem());\r
+ this.setLayout(new Ext.layout.CardLayout({\r
+ deferredRender: this.deferredRender\r
+ }));\r
+ \r
+ if (!this.stack) {\r
+ this.stack = Ext.TabPanel.AccessStack();\r
}\r
- },\r
-\r
- getGroupEl : Ext.TabPanel.prototype.getTabEl,\r
\r
- // private\r
- findTargets: function(e){\r
- var item = null;\r
- var itemEl = e.getTarget('li', this.strip);\r
- if (itemEl) {\r
- item = this.findById(itemEl.id.split(this.idDelimiter)[1]);\r
- if (item.disabled) {\r
- return {\r
- expand: null,\r
- item: null,\r
- el: null\r
- };\r
- }\r
+ this.initItems();\r
+ \r
+ this.on('beforerender', function(){\r
+ this.groupEl = this.ownerCt.getGroupEl(this);\r
+ }, this);\r
+ \r
+ this.on('add', this.onAdd, this, {\r
+ target: this\r
+ });\r
+ this.on('remove', this.onRemove, this, {\r
+ target: this\r
+ });\r
+ \r
+ if (this.mainItem !== undefined) {\r
+ var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);\r
+ delete this.mainItem;\r
+ this.setMainItem(item);\r
}\r
- return {\r
- expand: e.getTarget('.x-grouptabs-expand', this.strip),\r
- isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),\r
- item: item,\r
- el: itemEl\r
- };\r
},\r
\r
- // private\r
- onStripMouseDown: function(e){\r
- if (e.button != 0) {\r
- return;\r
+ /**\r
+ * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which\r
+ * can return false to cancel the tab change.\r
+ * @param {String/Panel} tab The id or tab Panel to activate\r
+ */\r
+ setActiveTab : function(item){\r
+ item = this.getComponent(item);\r
+ if(!item){\r
+ return false;\r
}\r
- e.preventDefault();\r
- var t = this.findTargets(e);\r
- if (t.expand) {\r
- this.toggleGroup(t.el);\r
+ if(!this.rendered){\r
+ this.activeTab = item;\r
+ return true;\r
}\r
- else if (t.item) {\r
- if(t.isGroup) {\r
- t.item.setActiveTab(t.item.getMainItem());\r
+ if(this.activeTab != item && this.fireEvent('beforetabchange', this, item, this.activeTab) !== false){\r
+ if(this.activeTab && this.activeTab != this.mainItem){\r
+ var oldEl = this.getTabEl(this.activeTab);\r
+ if(oldEl){\r
+ Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');\r
+ }\r
}\r
- else {\r
- t.item.ownerCt.setActiveTab(t.item);\r
+ var el = this.getTabEl(item);\r
+ Ext.fly(el).addClass('x-grouptabs-strip-active');\r
+ this.activeTab = item;\r
+ this.stack.add(item);\r
+\r
+ this.layout.setActiveItem(item);\r
+ if(this.layoutOnTabChange && item.doLayout){\r
+ item.doLayout();\r
+ }\r
+ if(this.scrolling){\r
+ this.scrollToTab(item, this.animScroll);\r
}\r
+\r
+ this.fireEvent('tabchange', this, item);\r
+ return true;\r
}\r
+ return false;\r
},\r
\r
- expandGroup: function(groupEl){\r
- if(groupEl.isXType) {\r
- groupEl = this.getGroupEl(groupEl);\r
+ getTabEl: function(item){\r
+ if (item == this.mainItem) {\r
+ return this.groupEl;\r
}\r
- Ext.fly(groupEl).addClass('x-grouptabs-expanded');\r
+ return Ext.TabPanel.prototype.getTabEl.call(this, item);\r
},\r
\r
- toggleGroup: function(groupEl){\r
- if(groupEl.isXType) {\r
- groupEl = this.getGroupEl(groupEl);\r
- } \r
- Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');\r
- this.syncTabJoint();\r
- }, \r
- \r
- syncTabJoint: function(groupEl){\r
- if (!this.tabJoint) {\r
- return;\r
- }\r
+ onRender: function(ct, position){\r
+ Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);\r
\r
- groupEl = groupEl || this.getGroupEl(this.activeGroup);\r
- if(groupEl) {\r
- this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2); \r
- \r
- var y = Ext.isGecko2 ? 0 : 1;\r
- if (this.tabPosition == 'left'){\r
- this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);\r
- }\r
- else {\r
- this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);\r
- } \r
+ this.strip = Ext.fly(this.groupEl).createChild({\r
+ tag: 'ul',\r
+ cls: 'x-grouptabs-sub'\r
+ });\r
+\r
+ this.tooltip = new Ext.ToolTip({\r
+ target: this.groupEl,\r
+ delegate: 'a.x-grouptabs-text',\r
+ trackMouse: true,\r
+ renderTo: document.body,\r
+ listeners: {\r
+ beforeshow: function(tip) {\r
+ var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)\r
+ ? this.mainItem\r
+ : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);\r
+\r
+ if(!item.tabTip) {\r
+ return false;\r
+ }\r
+ tip.body.dom.innerHTML = item.tabTip;\r
+ },\r
+ scope: this\r
+ }\r
+ });\r
+ \r
+ if (!this.itemTpl) {\r
+ var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');\r
+ tt.disableFormats = true;\r
+ tt.compile();\r
+ Ext.ux.GroupTab.prototype.itemTpl = tt;\r
}\r
- else {\r
- this.tabJoint.hide();\r
+ \r
+ this.items.each(this.initTab, this);\r
+ },\r
+ \r
+ afterRender: function(){\r
+ Ext.ux.GroupTab.superclass.afterRender.call(this);\r
+ \r
+ if (this.activeTab !== undefined) {\r
+ var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);\r
+ delete this.activeTab;\r
+ this.setActiveTab(item);\r
}\r
},\r
\r
- getActiveTab : function() {\r
- if(!this.activeGroup) return null;\r
- return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null; \r
+ // private\r
+ initTab: function(item, index){\r
+ var before = this.strip.dom.childNodes[index];\r
+ var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);\r
+ \r
+ if (item === this.mainItem) {\r
+ item.tabEl = this.groupEl;\r
+ p.cls += ' x-grouptabs-main-item';\r
+ }\r
+ \r
+ var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);\r
+ \r
+ item.tabEl = item.tabEl || el;\r
+ \r
+ item.on('disable', this.onItemDisabled, this);\r
+ item.on('enable', this.onItemEnabled, this);\r
+ item.on('titlechange', this.onItemTitleChanged, this);\r
+ item.on('iconchange', this.onItemIconChanged, this);\r
+ item.on('beforeshow', this.onBeforeShowItem, this);\r
},\r
\r
- onResize: function(){\r
- Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);\r
- this.syncTabJoint();\r
+ setMainItem: function(item){\r
+ item = this.getComponent(item);\r
+ if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {\r
+ return;\r
+ }\r
+ \r
+ this.mainItem = item;\r
},\r
\r
- createCorner: function(el, pos){\r
- return Ext.fly(el).createChild({\r
- cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos\r
- });\r
+ getMainItem: function(){\r
+ return this.mainItem || null;\r
},\r
\r
- initGroup: function(group, index){\r
- var before = this.strip.dom.childNodes[index]; \r
- var p = this.getTemplateArgs(group);\r
- if (index === 0) {\r
- p.cls += ' x-tab-first';\r
- }\r
- p.cls += ' x-grouptabs-main';\r
- p.text = group.getMainItem().title;\r
- \r
- var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);\r
- \r
- var tl = this.createCorner(el, 'top-' + this.tabPosition);\r
- var bl = this.createCorner(el, 'bottom-' + this.tabPosition);\r
-\r
- if (group.expanded) {\r
- this.expandGroup(el);\r
+ // private\r
+ onBeforeShowItem: function(item){\r
+ if (item != this.activeTab) {\r
+ this.setActiveTab(item);\r
+ return false;\r
}\r
-\r
- if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){\r
- bl.setLeft('-10px');\r
- bl.setBottom('-5px');\r
- tl.setLeft('-10px');\r
- tl.setTop('-5px');\r
+ },\r
+ \r
+ // private\r
+ onAdd: function(gt, item, index){\r
+ if (this.rendered) {\r
+ this.initTab.call(this, item, index);\r
}\r
-\r
- this.mon(group, 'changemainitem', this.onGroupChangeMainItem, this);\r
- this.mon(group, 'beforetabchange', this.onGroupBeforeTabChange, this);\r
},\r
\r
- setActiveGroup : function(group) {\r
- group = this.getComponent(group);\r
- if(!group || this.fireEvent('beforegroupchange', this, group, this.activeGroup) === false){\r
- return;\r
+ // private\r
+ onRemove: function(tp, item){\r
+ Ext.destroy(Ext.get(this.getTabEl(item)));\r
+ this.stack.remove(item);\r
+ item.un('disable', this.onItemDisabled, this);\r
+ item.un('enable', this.onItemEnabled, this);\r
+ item.un('titlechange', this.onItemTitleChanged, this);\r
+ item.un('iconchange', this.onItemIconChanged, this);\r
+ item.un('beforeshow', this.onBeforeShowItem, this);\r
+ if (item == this.activeTab) {\r
+ var next = this.stack.next();\r
+ if (next) {\r
+ this.setActiveTab(next);\r
+ }\r
+ else if (this.items.getCount() > 0) {\r
+ this.setActiveTab(0);\r
+ }\r
+ else {\r
+ this.activeTab = null;\r
+ }\r
}\r
- if(!this.rendered){\r
- this.activeGroup = group;\r
- return;\r
+ },\r
+ \r
+ // private\r
+ onBeforeAdd: function(item){\r
+ var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);\r
+ if (existing) {\r
+ this.setActiveTab(item);\r
+ return false;\r
}\r
- if(this.activeGroup != group){\r
- if(this.activeGroup){\r
- var oldEl = this.getGroupEl(this.activeGroup);\r
- if(oldEl){\r
- Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');\r
- }\r
- this.activeGroup.fireEvent('deactivate', this.activeTab);\r
- }\r
-\r
- var groupEl = this.getGroupEl(group);\r
- Ext.fly(groupEl).addClass('x-grouptabs-strip-active');\r
- \r
- this.activeGroup = group;\r
- this.stack.add(group);\r
-\r
- this.layout.setActiveItem(group);\r
- this.syncTabJoint(groupEl);\r
-\r
- group.fireEvent('activate', group);\r
- this.fireEvent('groupchange', this, group);\r
- } \r
+ Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);\r
+ var es = item.elements;\r
+ item.elements = es ? es.replace(',header', '') : es;\r
+ item.border = (item.border === true);\r
},\r
\r
- onGroupBeforeTabChange: function(group, newTab, oldTab){\r
- if(group !== this.activeGroup || newTab !== oldTab) {\r
- this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');\r
- } \r
- \r
- this.expandGroup(this.getGroupEl(group));\r
- this.setActiveGroup(group);\r
+ // private\r
+ onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,\r
+ onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,\r
+ \r
+ // private\r
+ onItemTitleChanged: function(item){\r
+ var el = this.getTabEl(item);\r
+ if (el) {\r
+ Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;\r
+ }\r
},\r
\r
- getFrameHeight: function(){\r
- var h = this.el.getFrameWidth('tb');\r
- h += (this.tbar ? this.tbar.getHeight() : 0) +\r
- (this.bbar ? this.bbar.getHeight() : 0);\r
- \r
- return h;\r
+ //private\r
+ onItemIconChanged: function(item, iconCls, oldCls){\r
+ var el = this.getTabEl(item);\r
+ if (el) {\r
+ Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);\r
+ }\r
},\r
\r
- adjustBodyWidth: function(w){\r
- return w - this.tabWidth;\r
+ beforeDestroy: function(){\r
+ Ext.TabPanel.prototype.beforeDestroy.call(this);\r
+ this.tooltip.destroy();\r
}\r
});\r
\r
-Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);/*\r
- * Note that this control will most likely remain as an example, and not as a core Ext form\r
- * control. However, the API will be changing in a future release and so should not yet be\r
- * treated as a final, stable API at this time.\r
- */\r
-\r
-/**\r
- * @class Ext.ux.form.ItemSelector\r
- * @extends Ext.form.Field\r
- * A control that allows selection of between two Ext.ux.form.MultiSelect controls.\r
- *\r
- * @history\r
- * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)\r
- *\r
- * @constructor\r
- * Create a new ItemSelector\r
- * @param {Object} config Configuration options\r
- * @xtype itemselector \r
- */\r
-Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {\r
- hideNavIcons:false,\r
- imagePath:"",\r
- iconUp:"up2.gif",\r
- iconDown:"down2.gif",\r
- iconLeft:"left2.gif",\r
- iconRight:"right2.gif",\r
- iconTop:"top2.gif",\r
- iconBottom:"bottom2.gif",\r
- drawUpIcon:true,\r
- drawDownIcon:true,\r
- drawLeftIcon:true,\r
- drawRightIcon:true,\r
- drawTopIcon:true,\r
- drawBotIcon:true,\r
- delimiter:',',\r
- bodyStyle:null,\r
- border:false,\r
- defaultAutoCreate:{tag: "div"},\r
- /**\r
- * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)\r
- */\r
- multiselects:null,\r
+Ext.reg('grouptab', Ext.ux.GroupTab);\r
+Ext.ns('Ext.ux');\r
\r
- initComponent: function(){\r
- Ext.ux.form.ItemSelector.superclass.initComponent.call(this);\r
- this.addEvents({\r
- 'rowdblclick' : true,\r
- 'change' : true\r
- });\r
+Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {\r
+ tabPosition: 'left',\r
+ \r
+ alternateColor: false,\r
+ \r
+ alternateCls: 'x-grouptabs-panel-alt',\r
+ \r
+ defaultType: 'grouptab',\r
+ \r
+ deferredRender: false,\r
+ \r
+ activeGroup : null,\r
+ \r
+ initComponent: function(){\r
+ Ext.ux.GroupTabPanel.superclass.initComponent.call(this);\r
+ \r
+ this.addEvents(\r
+ 'beforegroupchange',\r
+ 'groupchange'\r
+ );\r
+ this.elements = 'body,header';\r
+ this.stripTarget = 'header';\r
+ \r
+ this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';\r
+ \r
+ this.addClass('x-grouptabs-panel');\r
+ \r
+ if (this.tabStyle && this.tabStyle != '') {\r
+ this.addClass('x-grouptabs-panel-' + this.tabStyle);\r
+ }\r
+ \r
+ if (this.alternateColor) {\r
+ this.addClass(this.alternateCls);\r
+ }\r
+ \r
+ this.on('beforeadd', function(gtp, item, index){\r
+ this.initGroup(item, index);\r
+ }); \r
},\r
-\r
+ \r
+ initEvents : function() {\r
+ this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);\r
+ },\r
+ \r
onRender: function(ct, position){\r
- Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);\r
-\r
- // Internal default configuration for both multiselects\r
- var msConfig = [{\r
- legend: 'Available',\r
- draggable: true,\r
- droppable: true,\r
- width: 100,\r
- height: 100\r
- },{\r
- legend: 'Selected',\r
- droppable: true,\r
- draggable: true,\r
- width: 100,\r
- height: 100\r
- }];\r
-\r
- this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));\r
- this.fromMultiselect.on('dblclick', this.onRowDblClick, this);\r
-\r
- this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));\r
- this.toMultiselect.on('dblclick', this.onRowDblClick, this);\r
+ Ext.TabPanel.superclass.onRender.call(this, ct, position);\r
+ if(this.plain){\r
+ var pos = this.tabPosition == 'top' ? 'header' : 'footer';\r
+ this[pos].addClass('x-tab-panel-'+pos+'-plain');\r
+ }\r
\r
- var p = new Ext.Panel({\r
- bodyStyle:this.bodyStyle,\r
- border:this.border,\r
- layout:"table",\r
- layoutConfig:{columns:3}\r
- });\r
+ var st = this[this.stripTarget];\r
\r
- p.add(this.fromMultiselect);\r
- var icons = new Ext.Panel({header:false});\r
- p.add(icons);\r
- p.add(this.toMultiselect);\r
- p.render(this.el);\r
- icons.el.down('.'+icons.bwrapCls).remove();\r
+ this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{\r
+ tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});\r
\r
- // ICON HELL!!!\r
- if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")\r
- this.imagePath+="/";\r
- this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');\r
- this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');\r
- this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');\r
- this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');\r
- this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');\r
- this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');\r
- var el=icons.getEl();\r
- this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});\r
- el.createChild({tag: 'br'});\r
- this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});\r
- el.createChild({tag: 'br'});\r
- this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});\r
- el.createChild({tag: 'br'});\r
- this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});\r
- el.createChild({tag: 'br'});\r
- this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});\r
- el.createChild({tag: 'br'});\r
- this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});\r
- this.toTopIcon.on('click', this.toTop, this);\r
- this.upIcon.on('click', this.up, this);\r
- this.downIcon.on('click', this.down, this);\r
- this.toBottomIcon.on('click', this.toBottom, this);\r
- this.addIcon.on('click', this.fromTo, this);\r
- this.removeIcon.on('click', this.toFrom, this);\r
- if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }\r
- if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }\r
- if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }\r
- if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }\r
- if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }\r
- if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }\r
+ var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);\r
+ this.strip = new Ext.Element(this.stripWrap.dom.firstChild);\r
\r
- var tb = p.body.first();\r
- this.el.setWidth(p.body.first().getWidth());\r
- p.body.removeClass();\r
+ this.header.addClass('x-grouptabs-panel-header');\r
+ this.bwrap.addClass('x-grouptabs-bwrap');\r
+ this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');\r
\r
- this.hiddenName = this.name;\r
- var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};\r
- this.hiddenField = this.el.createChild(hiddenTag);\r
- },\r
- \r
- doLayout: function(){\r
- if(this.rendered){\r
- this.fromMultiselect.fs.doLayout();\r
- this.toMultiselect.fs.doLayout();\r
+ if (!this.groupTpl) {\r
+ var tt = new Ext.Template(\r
+ '<li class="{cls}" id="{id}">', \r
+ '<a class="x-grouptabs-expand" onclick="return false;"></a>', \r
+ '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',\r
+ '<span>{text}</span></a>', \r
+ '</li>'\r
+ );\r
+ tt.disableFormats = true;\r
+ tt.compile();\r
+ Ext.ux.GroupTabPanel.prototype.groupTpl = tt;\r
}\r
+ this.items.each(this.initGroup, this);\r
},\r
-\r
+ \r
afterRender: function(){\r
- Ext.ux.form.ItemSelector.superclass.afterRender.call(this);\r
-\r
- this.toStore = this.toMultiselect.store;\r
- this.toStore.on('add', this.valueChanged, this);\r
- this.toStore.on('remove', this.valueChanged, this);\r
- this.toStore.on('load', this.valueChanged, this);\r
- this.valueChanged(this.toStore);\r
+ Ext.ux.GroupTabPanel.superclass.afterRender.call(this);\r
+ \r
+ this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({\r
+ cls: 'x-tab-joint'\r
+ });\r
+ \r
+ this.addClass('x-tab-panel-' + this.tabPosition);\r
+ this.header.setWidth(this.tabWidth);\r
+ \r
+ if (this.activeGroup !== undefined) {\r
+ var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);\r
+ delete this.activeGroup;\r
+ this.setActiveGroup(group);\r
+ group.setActiveTab(group.getMainItem());\r
+ }\r
},\r
\r
- toTop : function() {\r
- var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
- var records = [];\r
- if (selectionsArray.length > 0) {\r
- selectionsArray.sort();\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
- records.push(record);\r
- }\r
- selectionsArray = [];\r
- for (var i=records.length-1; i>-1; i--) {\r
- record = records[i];\r
- this.toMultiselect.view.store.remove(record);\r
- this.toMultiselect.view.store.insert(0, record);\r
- selectionsArray.push(((records.length - 1) - i));\r
+ getGroupEl : Ext.TabPanel.prototype.getTabEl,\r
+ \r
+ // private\r
+ findTargets: function(e){\r
+ var item = null,\r
+ itemEl = e.getTarget('li', this.strip);\r
+ if (itemEl) {\r
+ item = this.findById(itemEl.id.split(this.idDelimiter)[1]);\r
+ if (item.disabled) {\r
+ return {\r
+ expand: null,\r
+ item: null,\r
+ el: null\r
+ };\r
}\r
}\r
- this.toMultiselect.view.refresh();\r
- this.toMultiselect.view.select(selectionsArray);\r
+ return {\r
+ expand: e.getTarget('.x-grouptabs-expand', this.strip),\r
+ isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),\r
+ item: item,\r
+ el: itemEl\r
+ };\r
},\r
-\r
- toBottom : function() {\r
- var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
- var records = [];\r
- if (selectionsArray.length > 0) {\r
- selectionsArray.sort();\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
- records.push(record);\r
+ \r
+ // private\r
+ onStripMouseDown: function(e){\r
+ if (e.button != 0) {\r
+ return;\r
+ }\r
+ e.preventDefault();\r
+ var t = this.findTargets(e);\r
+ if (t.expand) {\r
+ this.toggleGroup(t.el);\r
+ }\r
+ else if (t.item) {\r
+ if(t.isGroup) {\r
+ t.item.setActiveTab(t.item.getMainItem());\r
}\r
- selectionsArray = [];\r
- for (var i=0; i<records.length; i++) {\r
- record = records[i];\r
- this.toMultiselect.view.store.remove(record);\r
- this.toMultiselect.view.store.add(record);\r
- selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));\r
+ else {\r
+ t.item.ownerCt.setActiveTab(t.item);\r
}\r
}\r
- this.toMultiselect.view.refresh();\r
- this.toMultiselect.view.select(selectionsArray);\r
},\r
-\r
- up : function() {\r
- var record = null;\r
- var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
- selectionsArray.sort();\r
- var newSelectionsArray = [];\r
- if (selectionsArray.length > 0) {\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
- if ((selectionsArray[i] - 1) >= 0) {\r
- this.toMultiselect.view.store.remove(record);\r
- this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);\r
- newSelectionsArray.push(selectionsArray[i] - 1);\r
- }\r
- }\r
- this.toMultiselect.view.refresh();\r
- this.toMultiselect.view.select(newSelectionsArray);\r
+ \r
+ expandGroup: function(groupEl){\r
+ if(groupEl.isXType) {\r
+ groupEl = this.getGroupEl(groupEl);\r
}\r
+ Ext.fly(groupEl).addClass('x-grouptabs-expanded');\r
+ this.syncTabJoint();\r
},\r
+ \r
+ toggleGroup: function(groupEl){\r
+ if(groupEl.isXType) {\r
+ groupEl = this.getGroupEl(groupEl);\r
+ } \r
+ Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');\r
+ this.syncTabJoint();\r
+ }, \r
\r
- down : function() {\r
- var record = null;\r
- var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
- selectionsArray.sort();\r
- selectionsArray.reverse();\r
- var newSelectionsArray = [];\r
- if (selectionsArray.length > 0) {\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
- if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {\r
- this.toMultiselect.view.store.remove(record);\r
- this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);\r
- newSelectionsArray.push(selectionsArray[i] + 1);\r
- }\r
- }\r
- this.toMultiselect.view.refresh();\r
- this.toMultiselect.view.select(newSelectionsArray);\r
+ collapseGroup: function(groupEl){\r
+ if(groupEl.isXType) {\r
+ groupEl = this.getGroupEl(groupEl);\r
}\r
+ Ext.fly(groupEl).removeClass('x-grouptabs-expanded');\r
+ this.syncTabJoint();\r
},\r
-\r
- fromTo : function() {\r
- var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();\r
- var records = [];\r
- if (selectionsArray.length > 0) {\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);\r
- records.push(record);\r
- }\r
- if(!this.allowDup)selectionsArray = [];\r
- for (var i=0; i<records.length; i++) {\r
- record = records[i];\r
- if(this.allowDup){\r
- var x=new Ext.data.Record();\r
- record.id=x.id;\r
- delete x;\r
- this.toMultiselect.view.store.add(record);\r
- }else{\r
- this.fromMultiselect.view.store.remove(record);\r
- this.toMultiselect.view.store.add(record);\r
- selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));\r
- }\r
+ \r
+ syncTabJoint: function(groupEl){\r
+ if (!this.tabJoint) {\r
+ return;\r
+ }\r
+ \r
+ groupEl = groupEl || this.getGroupEl(this.activeGroup);\r
+ if(groupEl) {\r
+ this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2); \r
+ \r
+ var y = Ext.isGecko2 ? 0 : 1;\r
+ if (this.tabPosition == 'left'){\r
+ this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);\r
}\r
+ else {\r
+ this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);\r
+ } \r
}\r
- this.toMultiselect.view.refresh();\r
- this.fromMultiselect.view.refresh();\r
- var si = this.toMultiselect.store.sortInfo;\r
- if(si){\r
- this.toMultiselect.store.sort(si.field, si.direction);\r
+ else {\r
+ this.tabJoint.hide();\r
}\r
- this.toMultiselect.view.select(selectionsArray);\r
},\r
-\r
- toFrom : function() {\r
- var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
- var records = [];\r
- if (selectionsArray.length > 0) {\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
- records.push(record);\r
- }\r
- selectionsArray = [];\r
- for (var i=0; i<records.length; i++) {\r
- record = records[i];\r
- this.toMultiselect.view.store.remove(record);\r
- if(!this.allowDup){\r
- this.fromMultiselect.view.store.add(record);\r
- selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));\r
- }\r
- }\r
+ \r
+ getActiveTab : function() {\r
+ if(!this.activeGroup) return null;\r
+ return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null; \r
+ },\r
+ \r
+ onResize: function(){\r
+ Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);\r
+ this.syncTabJoint();\r
+ },\r
+ \r
+ createCorner: function(el, pos){\r
+ return Ext.fly(el).createChild({\r
+ cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos\r
+ });\r
+ },\r
+ \r
+ initGroup: function(group, index){\r
+ var before = this.strip.dom.childNodes[index], \r
+ p = this.getTemplateArgs(group);\r
+ if (index === 0) {\r
+ p.cls += ' x-tab-first';\r
}\r
- this.fromMultiselect.view.refresh();\r
- this.toMultiselect.view.refresh();\r
- var si = this.fromMultiselect.store.sortInfo;\r
- if (si){\r
- this.fromMultiselect.store.sort(si.field, si.direction);\r
+ p.cls += ' x-grouptabs-main';\r
+ p.text = group.getMainItem().title;\r
+ \r
+ var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),\r
+ tl = this.createCorner(el, 'top-' + this.tabPosition),\r
+ bl = this.createCorner(el, 'bottom-' + this.tabPosition);\r
+\r
+ group.tabEl = el;\r
+ if (group.expanded) {\r
+ this.expandGroup(el);\r
}\r
- this.fromMultiselect.view.select(selectionsArray);\r
- },\r
\r
- valueChanged: function(store) {\r
- var record = null;\r
- var values = [];\r
- for (var i=0; i<store.getCount(); i++) {\r
- record = store.getAt(i);\r
- values.push(record.get(this.toMultiselect.valueField));\r
+ if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){\r
+ bl.setLeft('-10px');\r
+ bl.setBottom('-5px');\r
+ tl.setLeft('-10px');\r
+ tl.setTop('-5px');\r
}\r
- this.hiddenField.dom.value = values.join(this.delimiter);\r
- this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
- },\r
\r
- getValue : function() {\r
- return this.hiddenField.dom.value;\r
+ this.mon(group, {\r
+ scope: this,\r
+ changemainitem: this.onGroupChangeMainItem,\r
+ beforetabchange: this.onGroupBeforeTabChange\r
+ });\r
},\r
-\r
- onRowDblClick : function(vw, index, node, e) {\r
- if (vw == this.toMultiselect.view){\r
- this.toFrom();\r
- } else if (vw == this.fromMultiselect.view) {\r
- this.fromTo();\r
+ \r
+ setActiveGroup : function(group) {\r
+ group = this.getComponent(group);\r
+ if(!group){\r
+ return false;\r
}\r
- return this.fireEvent('rowdblclick', vw, index, node, e);\r
- },\r
+ if(!this.rendered){\r
+ this.activeGroup = group;\r
+ return true;\r
+ }\r
+ if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){\r
+ if(this.activeGroup){\r
+ this.activeGroup.activeTab = null;\r
+ var oldEl = this.getGroupEl(this.activeGroup);\r
+ if(oldEl){\r
+ Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');\r
+ }\r
+ }\r
\r
- reset: function(){\r
- range = this.toMultiselect.store.getRange();\r
- this.toMultiselect.store.removeAll();\r
- this.fromMultiselect.store.add(range);\r
- var si = this.fromMultiselect.store.sortInfo;\r
- if (si){\r
- this.fromMultiselect.store.sort(si.field, si.direction);\r
+ var groupEl = this.getGroupEl(group);\r
+ Ext.fly(groupEl).addClass('x-grouptabs-strip-active');\r
+ \r
+ this.activeGroup = group;\r
+ this.stack.add(group);\r
+\r
+ this.layout.setActiveItem(group);\r
+ this.syncTabJoint(groupEl);\r
+\r
+ this.fireEvent('groupchange', this, group);\r
+ return true;\r
}\r
- this.valueChanged(this.toMultiselect.store);\r
+ return false; \r
+ },\r
+ \r
+ onGroupBeforeTabChange: function(group, newTab, oldTab){\r
+ if(group !== this.activeGroup || newTab !== oldTab) {\r
+ this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');\r
+ } \r
+ this.expandGroup(this.getGroupEl(group));\r
+ if(group !== this.activeGroup) {\r
+ return this.setActiveGroup(group);\r
+ } \r
+ },\r
+ \r
+ getFrameHeight: function(){\r
+ var h = this.el.getFrameWidth('tb');\r
+ h += (this.tbar ? this.tbar.getHeight() : 0) +\r
+ (this.bbar ? this.bbar.getHeight() : 0);\r
+ \r
+ return h;\r
+ },\r
+ \r
+ adjustBodyWidth: function(w){\r
+ return w - this.tabWidth;\r
}\r
});\r
\r
-Ext.reg('itemselector', Ext.ux.form.ItemSelector);\r
-\r
-//backwards compat\r
-Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;\r
-Ext.ns('Ext.ux.form');\r
+Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);/*\r
+ * Note that this control will most likely remain as an example, and not as a core Ext form\r
+ * control. However, the API will be changing in a future release and so should not yet be\r
+ * treated as a final, stable API at this time.\r
+ */\r
\r
/**\r
- * @class Ext.ux.form.MultiSelect\r
+ * @class Ext.ux.form.ItemSelector\r
* @extends Ext.form.Field\r
- * A control that allows selection and form submission of multiple list items.\r
+ * A control that allows selection of between two Ext.ux.form.MultiSelect controls.\r
*\r
* @history\r
* 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)\r
- * 2008-06-19 bpm Docs and demo code clean up\r
*\r
* @constructor\r
- * Create a new MultiSelect\r
+ * Create a new ItemSelector\r
* @param {Object} config Configuration options\r
- * @xtype multiselect \r
+ * @xtype itemselector \r
*/\r
-Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field, {\r
- /**\r
- * @cfg {String} legend Wraps the object with a fieldset and specified legend.\r
- */\r
+Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {\r
+ hideNavIcons:false,\r
+ imagePath:"",\r
+ iconUp:"up2.gif",\r
+ iconDown:"down2.gif",\r
+ iconLeft:"left2.gif",\r
+ iconRight:"right2.gif",\r
+ iconTop:"top2.gif",\r
+ iconBottom:"bottom2.gif",\r
+ drawUpIcon:true,\r
+ drawDownIcon:true,\r
+ drawLeftIcon:true,\r
+ drawRightIcon:true,\r
+ drawTopIcon:true,\r
+ drawBotIcon:true,\r
+ delimiter:',',\r
+ bodyStyle:null,\r
+ border:false,\r
+ defaultAutoCreate:{tag: "div"},\r
/**\r
- * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.\r
+ * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)\r
*/\r
- /**\r
- * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).\r
- */\r
- /**\r
- * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).\r
- */\r
- /**\r
- * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).\r
- */\r
- ddReorder:false,\r
- /**\r
- * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a\r
- * toolbar config, or an array of buttons/button configs to be added to the toolbar.\r
- */\r
- /**\r
- * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled\r
- * (use for lists which are sorted, defaults to false).\r
- */\r
- appendOnly:false,\r
- /**\r
- * @cfg {Number} width Width in pixels of the control (defaults to 100).\r
- */\r
- width:100,\r
- /**\r
- * @cfg {Number} height Height in pixels of the control (defaults to 100).\r
- */\r
- height:100,\r
- /**\r
- * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).\r
- */\r
- displayField:0,\r
- /**\r
- * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).\r
- */\r
- valueField:1,\r
- /**\r
- * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no\r
- * selection (defaults to true).\r
- */\r
- allowBlank:true,\r
- /**\r
- * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).\r
- */\r
- minSelections:0,\r
- /**\r
- * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).\r
- */\r
- maxSelections:Number.MAX_VALUE,\r
- /**\r
- * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as\r
- * {@link Ext.form.TextField#blankText}.\r
- */\r
- blankText:Ext.form.TextField.prototype.blankText,\r
- /**\r
- * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}\r
- * item(s) required'). The {0} token will be replaced by the value of {@link #minSelections}.\r
- */\r
- minSelectionsText:'Minimum {0} item(s) required',\r
- /**\r
- * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}\r
- * item(s) allowed'). The {0} token will be replaced by the value of {@link #maxSelections}.\r
- */\r
- maxSelectionsText:'Maximum {0} item(s) allowed',\r
- /**\r
- * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values\r
- * (defaults to ',').\r
- */\r
- delimiter:',',\r
- /**\r
- * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).\r
- * Acceptable values for this property are:\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>any {@link Ext.data.Store Store} subclass</b></li>\r
- * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">\r
- * A 1-dimensional array will automatically be expanded (each array item will be the combo\r
- * {@link #valueField value} and {@link #displayField text})</div></li>\r
- * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">\r
- * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo\r
- * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.\r
- * </div></li></ul></div></li></ul></div>\r
- */\r
-\r
- // private\r
- defaultAutoCreate : {tag: "div"},\r
+ multiselects:null,\r
\r
- // private\r
initComponent: function(){\r
- Ext.ux.form.MultiSelect.superclass.initComponent.call(this);\r
-\r
- if(Ext.isArray(this.store)){\r
- if (Ext.isArray(this.store[0])){\r
- this.store = new Ext.data.ArrayStore({\r
- fields: ['value','text'],\r
- data: this.store\r
- });\r
- this.valueField = 'value';\r
- }else{\r
- this.store = new Ext.data.ArrayStore({\r
- fields: ['text'],\r
- data: this.store,\r
- expandData: true\r
- });\r
- this.valueField = 'text';\r
- }\r
- this.displayField = 'text';\r
- } else {\r
- this.store = Ext.StoreMgr.lookup(this.store);\r
- }\r
-\r
+ Ext.ux.form.ItemSelector.superclass.initComponent.call(this);\r
this.addEvents({\r
- 'dblclick' : true,\r
- 'click' : true,\r
- 'change' : true,\r
- 'drop' : true\r
+ 'rowdblclick' : true,\r
+ 'change' : true\r
});\r
},\r
\r
- // private\r
onRender: function(ct, position){\r
- Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);\r
+ Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);\r
\r
- var fs = this.fs = new Ext.form.FieldSet({\r
- renderTo: this.el,\r
- title: this.legend,\r
- height: this.height,\r
- width: this.width,\r
- style: "padding:0;",\r
- tbar: this.tbar,\r
- bodyStyle: 'overflow: auto;'\r
- });\r
+ // Internal default configuration for both multiselects\r
+ var msConfig = [{\r
+ legend: 'Available',\r
+ draggable: true,\r
+ droppable: true,\r
+ width: 100,\r
+ height: 100\r
+ },{\r
+ legend: 'Selected',\r
+ droppable: true,\r
+ draggable: true,\r
+ width: 100,\r
+ height: 100\r
+ }];\r
\r
- this.view = new Ext.ListView({\r
- multiSelect: true,\r
- store: this.store,\r
- columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],\r
- hideHeaders: true\r
+ this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));\r
+ this.fromMultiselect.on('dblclick', this.onRowDblClick, this);\r
+\r
+ this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));\r
+ this.toMultiselect.on('dblclick', this.onRowDblClick, this);\r
+\r
+ var p = new Ext.Panel({\r
+ bodyStyle:this.bodyStyle,\r
+ border:this.border,\r
+ layout:"table",\r
+ layoutConfig:{columns:3}\r
});\r
\r
- fs.add(this.view);\r
+ p.add(this.fromMultiselect);\r
+ var icons = new Ext.Panel({header:false});\r
+ p.add(icons);\r
+ p.add(this.toMultiselect);\r
+ p.render(this.el);\r
+ icons.el.down('.'+icons.bwrapCls).remove();\r
\r
- this.view.on('click', this.onViewClick, this);\r
- this.view.on('beforeclick', this.onViewBeforeClick, this);\r
- this.view.on('dblclick', this.onViewDblClick, this);\r
+ // ICON HELL!!!\r
+ if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")\r
+ this.imagePath+="/";\r
+ this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');\r
+ this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');\r
+ this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');\r
+ this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');\r
+ this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');\r
+ this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');\r
+ var el=icons.getEl();\r
+ this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});\r
+ el.createChild({tag: 'br'});\r
+ this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});\r
+ el.createChild({tag: 'br'});\r
+ this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});\r
+ el.createChild({tag: 'br'});\r
+ this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});\r
+ el.createChild({tag: 'br'});\r
+ this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});\r
+ el.createChild({tag: 'br'});\r
+ this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});\r
+ this.toTopIcon.on('click', this.toTop, this);\r
+ this.upIcon.on('click', this.up, this);\r
+ this.downIcon.on('click', this.down, this);\r
+ this.toBottomIcon.on('click', this.toBottom, this);\r
+ this.addIcon.on('click', this.fromTo, this);\r
+ this.removeIcon.on('click', this.toFrom, this);\r
+ if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }\r
+ if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }\r
+ if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }\r
+ if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }\r
+ if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }\r
+ if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }\r
\r
- this.hiddenName = this.name || Ext.id();\r
- var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };\r
+ var tb = p.body.first();\r
+ this.el.setWidth(p.body.first().getWidth());\r
+ p.body.removeClass();\r
+\r
+ this.hiddenName = this.name;\r
+ var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};\r
this.hiddenField = this.el.createChild(hiddenTag);\r
- this.hiddenField.dom.disabled = this.hiddenName != this.name;\r
- fs.doLayout();\r
+ },\r
+ \r
+ doLayout: function(){\r
+ if(this.rendered){\r
+ this.fromMultiselect.fs.doLayout();\r
+ this.toMultiselect.fs.doLayout();\r
+ }\r
},\r
\r
- // private\r
afterRender: function(){\r
- Ext.ux.form.MultiSelect.superclass.afterRender.call(this);\r
+ Ext.ux.form.ItemSelector.superclass.afterRender.call(this);\r
\r
- if (this.ddReorder && !this.dragGroup && !this.dropGroup){\r
- this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();\r
- }\r
+ this.toStore = this.toMultiselect.store;\r
+ this.toStore.on('add', this.valueChanged, this);\r
+ this.toStore.on('remove', this.valueChanged, this);\r
+ this.toStore.on('load', this.valueChanged, this);\r
+ this.valueChanged(this.toStore);\r
+ },\r
\r
- if (this.draggable || this.dragGroup){\r
- this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {\r
- ddGroup: this.dragGroup\r
- });\r
- }\r
- if (this.droppable || this.dropGroup){\r
- this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {\r
- ddGroup: this.dropGroup\r
- });\r
+ toTop : function() {\r
+ var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
+ var records = [];\r
+ if (selectionsArray.length > 0) {\r
+ selectionsArray.sort();\r
+ for (var i=0; i<selectionsArray.length; i++) {\r
+ record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
+ records.push(record);\r
+ }\r
+ selectionsArray = [];\r
+ for (var i=records.length-1; i>-1; i--) {\r
+ record = records[i];\r
+ this.toMultiselect.view.store.remove(record);\r
+ this.toMultiselect.view.store.insert(0, record);\r
+ selectionsArray.push(((records.length - 1) - i));\r
+ }\r
}\r
+ this.toMultiselect.view.refresh();\r
+ this.toMultiselect.view.select(selectionsArray);\r
},\r
\r
- // private\r
- onViewClick: function(vw, index, node, e) {\r
- this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
- this.hiddenField.dom.value = this.getValue();\r
- this.fireEvent('click', this, e);\r
- this.validate();\r
- },\r
-\r
- // private\r
- onViewBeforeClick: function(vw, index, node, e) {\r
- if (this.disabled) {return false;}\r
- },\r
-\r
- // private\r
- onViewDblClick : function(vw, index, node, e) {\r
- return this.fireEvent('dblclick', vw, index, node, e);\r
- },\r
-\r
- /**\r
- * Returns an array of data values for the selected items in the list. The values will be separated\r
- * by {@link #delimiter}.\r
- * @return {Array} value An array of string data values\r
- */\r
- getValue: function(valueField){\r
- var returnArray = [];\r
- var selectionsArray = this.view.getSelectedIndexes();\r
- if (selectionsArray.length == 0) {return '';}\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));\r
+ toBottom : function() {\r
+ var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
+ var records = [];\r
+ if (selectionsArray.length > 0) {\r
+ selectionsArray.sort();\r
+ for (var i=0; i<selectionsArray.length; i++) {\r
+ record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
+ records.push(record);\r
+ }\r
+ selectionsArray = [];\r
+ for (var i=0; i<records.length; i++) {\r
+ record = records[i];\r
+ this.toMultiselect.view.store.remove(record);\r
+ this.toMultiselect.view.store.add(record);\r
+ selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));\r
+ }\r
}\r
- return returnArray.join(this.delimiter);\r
+ this.toMultiselect.view.refresh();\r
+ this.toMultiselect.view.select(selectionsArray);\r
},\r
\r
- /**\r
- * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.\r
- * @param {String/Array} values The values to set\r
- */\r
- setValue: function(values) {\r
- var index;\r
- var selections = [];\r
- this.view.clearSelections();\r
- this.hiddenField.dom.value = '';\r
-\r
- if (!values || (values == '')) { return; }\r
-\r
- if (!Ext.isArray(values)) { values = values.split(this.delimiter); }\r
- for (var i=0; i<values.length; i++) {\r
- index = this.view.store.indexOf(this.view.store.query(this.valueField,\r
- new RegExp('^' + values[i] + '$', "i")).itemAt(0));\r
- selections.push(index);\r
+ up : function() {\r
+ var record = null;\r
+ var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
+ selectionsArray.sort();\r
+ var newSelectionsArray = [];\r
+ if (selectionsArray.length > 0) {\r
+ for (var i=0; i<selectionsArray.length; i++) {\r
+ record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
+ if ((selectionsArray[i] - 1) >= 0) {\r
+ this.toMultiselect.view.store.remove(record);\r
+ this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);\r
+ newSelectionsArray.push(selectionsArray[i] - 1);\r
+ }\r
+ }\r
+ this.toMultiselect.view.refresh();\r
+ this.toMultiselect.view.select(newSelectionsArray);\r
}\r
- this.view.select(selections);\r
- this.hiddenField.dom.value = this.getValue();\r
- this.validate();\r
},\r
\r
- // inherit docs\r
- reset : function() {\r
- this.setValue('');\r
+ down : function() {\r
+ var record = null;\r
+ var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
+ selectionsArray.sort();\r
+ selectionsArray.reverse();\r
+ var newSelectionsArray = [];\r
+ if (selectionsArray.length > 0) {\r
+ for (var i=0; i<selectionsArray.length; i++) {\r
+ record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
+ if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {\r
+ this.toMultiselect.view.store.remove(record);\r
+ this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);\r
+ newSelectionsArray.push(selectionsArray[i] + 1);\r
+ }\r
+ }\r
+ this.toMultiselect.view.refresh();\r
+ this.toMultiselect.view.select(newSelectionsArray);\r
+ }\r
},\r
\r
- // inherit docs\r
- getRawValue: function(valueField) {\r
- var tmp = this.getValue(valueField);\r
- if (tmp.length) {\r
- tmp = tmp.split(this.delimiter);\r
+ fromTo : function() {\r
+ var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();\r
+ var records = [];\r
+ if (selectionsArray.length > 0) {\r
+ for (var i=0; i<selectionsArray.length; i++) {\r
+ record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);\r
+ records.push(record);\r
+ }\r
+ if(!this.allowDup)selectionsArray = [];\r
+ for (var i=0; i<records.length; i++) {\r
+ record = records[i];\r
+ if(this.allowDup){\r
+ var x=new Ext.data.Record();\r
+ record.id=x.id;\r
+ delete x;\r
+ this.toMultiselect.view.store.add(record);\r
+ }else{\r
+ this.fromMultiselect.view.store.remove(record);\r
+ this.toMultiselect.view.store.add(record);\r
+ selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));\r
+ }\r
+ }\r
}\r
- else {\r
- tmp = [];\r
+ this.toMultiselect.view.refresh();\r
+ this.fromMultiselect.view.refresh();\r
+ var si = this.toMultiselect.store.sortInfo;\r
+ if(si){\r
+ this.toMultiselect.store.sort(si.field, si.direction);\r
}\r
- return tmp;\r
- },\r
-\r
- // inherit docs\r
- setRawValue: function(values){\r
- setValue(values);\r
+ this.toMultiselect.view.select(selectionsArray);\r
},\r
\r
- // inherit docs\r
- validateValue : function(value){\r
- if (value.length < 1) { // if it has no value\r
- if (this.allowBlank) {\r
- this.clearInvalid();\r
- return true;\r
- } else {\r
- this.markInvalid(this.blankText);\r
- return false;\r
- }\r
+ toFrom : function() {\r
+ var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
+ var records = [];\r
+ if (selectionsArray.length > 0) {\r
+ for (var i=0; i<selectionsArray.length; i++) {\r
+ record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
+ records.push(record);\r
+ }\r
+ selectionsArray = [];\r
+ for (var i=0; i<records.length; i++) {\r
+ record = records[i];\r
+ this.toMultiselect.view.store.remove(record);\r
+ if(!this.allowDup){\r
+ this.fromMultiselect.view.store.add(record);\r
+ selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));\r
+ }\r
+ }\r
}\r
- if (value.length < this.minSelections) {\r
- this.markInvalid(String.format(this.minSelectionsText, this.minSelections));\r
- return false;\r
+ this.fromMultiselect.view.refresh();\r
+ this.toMultiselect.view.refresh();\r
+ var si = this.fromMultiselect.store.sortInfo;\r
+ if (si){\r
+ this.fromMultiselect.store.sort(si.field, si.direction);\r
}\r
- if (value.length > this.maxSelections) {\r
- this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));\r
- return false;\r
+ this.fromMultiselect.view.select(selectionsArray);\r
+ },\r
+\r
+ valueChanged: function(store) {\r
+ var record = null;\r
+ var values = [];\r
+ for (var i=0; i<store.getCount(); i++) {\r
+ record = store.getAt(i);\r
+ values.push(record.get(this.toMultiselect.valueField));\r
}\r
- return true;\r
+ this.hiddenField.dom.value = values.join(this.delimiter);\r
+ this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
},\r
\r
- // inherit docs\r
- disable: function(){\r
- this.disabled = true;\r
- this.hiddenField.dom.disabled = true;\r
- this.fs.disable();\r
+ getValue : function() {\r
+ return this.hiddenField.dom.value;\r
},\r
\r
- // inherit docs\r
- enable: function(){\r
- this.disabled = false;\r
- this.hiddenField.dom.disabled = false;\r
- this.fs.enable();\r
+ onRowDblClick : function(vw, index, node, e) {\r
+ if (vw == this.toMultiselect.view){\r
+ this.toFrom();\r
+ } else if (vw == this.fromMultiselect.view) {\r
+ this.fromTo();\r
+ }\r
+ return this.fireEvent('rowdblclick', vw, index, node, e);\r
},\r
\r
- // inherit docs\r
- destroy: function(){\r
- Ext.destroy(this.fs, this.dragZone, this.dropZone);\r
- Ext.ux.form.MultiSelect.superclass.destroy.call(this);\r
+ reset: function(){\r
+ range = this.toMultiselect.store.getRange();\r
+ this.toMultiselect.store.removeAll();\r
+ this.fromMultiselect.store.add(range);\r
+ var si = this.fromMultiselect.store.sortInfo;\r
+ if (si){\r
+ this.fromMultiselect.store.sort(si.field, si.direction);\r
+ }\r
+ this.valueChanged(this.toMultiselect.store);\r
}\r
});\r
\r
-\r
-Ext.reg('multiselect', Ext.ux.form.MultiSelect);\r
+Ext.reg('itemselector', Ext.ux.form.ItemSelector);\r
\r
//backwards compat\r
-Ext.ux.Multiselect = Ext.ux.form.MultiSelect;\r
-\r
-\r
-Ext.ux.form.MultiSelect.DragZone = function(ms, config){\r
- this.ms = ms;\r
- this.view = ms.view;\r
- var ddGroup = config.ddGroup || 'MultiselectDD';\r
- var dd;\r
- if (Ext.isArray(ddGroup)){\r
- dd = ddGroup.shift();\r
- } else {\r
- dd = ddGroup;\r
- ddGroup = null;\r
- }\r
- Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });\r
- this.setDraggable(ddGroup);\r
-};\r
+Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;\r
+Ext.ns('Ext.ux.grid');\r
\r
-Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {\r
- onInitDrag : function(x, y){\r
- var el = Ext.get(this.dragData.ddel.cloneNode(true));\r
- this.proxy.update(el.dom);\r
- el.setWidth(el.child('em').getWidth());\r
- this.onStartDrag(x, y);\r
- return true;\r
+Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, {\r
+ lockText : 'Lock',\r
+ unlockText : 'Unlock',\r
+ rowBorderWidth : 1,\r
+ lockedBorderWidth : 1,\r
+ /*\r
+ * This option ensures that height between the rows is synchronized\r
+ * between the locked and unlocked sides. This option only needs to be used\r
+ * when the row heights isn't predictable.\r
+ */\r
+ syncHeights: false,\r
+ initTemplates : function(){\r
+ var ts = this.templates || {};\r
+ if(!ts.master){\r
+ ts.master = new Ext.Template(\r
+ '<div class="x-grid3" hidefocus="true">',\r
+ '<div class="x-grid3-locked">',\r
+ '<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>',\r
+ '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{lstyle}">{lockedBody}</div><div class="x-grid3-scroll-spacer"></div></div>',\r
+ '</div>',\r
+ '<div class="x-grid3-viewport x-grid3-unlocked">',\r
+ '<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>',\r
+ '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',\r
+ '</div>',\r
+ '<div class="x-grid3-resize-marker"> </div>',\r
+ '<div class="x-grid3-resize-proxy"> </div>',\r
+ '</div>'\r
+ );\r
+ }\r
+ this.templates = ts;\r
+ Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);\r
+ },\r
+ getEditorParent : function(ed){\r
+ return this.el.dom;\r
+ },\r
+ initElements : function(){\r
+ var E = Ext.Element;\r
+ var el = this.grid.getGridEl().dom.firstChild;\r
+ var cs = el.childNodes;\r
+ this.el = new E(el);\r
+ this.lockedWrap = new E(cs[0]);\r
+ this.lockedHd = new E(this.lockedWrap.dom.firstChild);\r
+ this.lockedInnerHd = this.lockedHd.dom.firstChild;\r
+ this.lockedScroller = new E(this.lockedWrap.dom.childNodes[1]);\r
+ this.lockedBody = new E(this.lockedScroller.dom.firstChild);\r
+ this.mainWrap = new E(cs[1]);\r
+ this.mainHd = new E(this.mainWrap.dom.firstChild);\r
+ if(this.grid.hideHeaders){\r
+ this.lockedHd.setDisplayed(false);\r
+ this.mainHd.setDisplayed(false);\r
+ }\r
+ this.innerHd = this.mainHd.dom.firstChild;\r
+ this.scroller = new E(this.mainWrap.dom.childNodes[1]);\r
+ if(this.forceFit){\r
+ this.scroller.setStyle('overflow-x', 'hidden');\r
+ }\r
+ this.mainBody = new E(this.scroller.dom.firstChild);\r
+ this.focusEl = new E(this.scroller.dom.childNodes[1]);\r
+ this.focusEl.swallowEvent('click', true);\r
+ this.resizeMarker = new E(cs[2]);\r
+ this.resizeProxy = new E(cs[3]);\r
},\r
\r
- // private\r
- collectSelection: function(data) {\r
- data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();\r
- var i = 0;\r
- this.view.store.each(function(rec){\r
- if (this.view.isSelected(i)) {\r
- var n = this.view.getNode(i);\r
- var dragNode = n.cloneNode(true);\r
- dragNode.id = Ext.id();\r
- data.ddel.appendChild(dragNode);\r
- data.records.push(this.view.store.getAt(i));\r
- data.viewNodes.push(n);\r
- }\r
- i++;\r
- }, this);\r
+ getLockedRows : function(){\r
+ return this.hasRows() ? this.lockedBody.dom.childNodes : [];\r
},\r
-\r
- // override\r
- onEndDrag: function(data, e) {\r
- var d = Ext.get(this.dragData.ddel);\r
- if (d && d.hasClass("multi-proxy")) {\r
- d.remove();\r
- }\r
+ \r
+ getLockedRow : function(row){\r
+ return this.getLockedRows()[row];\r
},\r
-\r
- // override\r
- getDragData: function(e){\r
- var target = this.view.findItemFromChild(e.getTarget());\r
- if(target) {\r
- if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {\r
- this.view.select(target);\r
- this.ms.setValue(this.ms.getValue());\r
- }\r
- if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;\r
- var dragData = {\r
- sourceView: this.view,\r
- viewNodes: [],\r
- records: []\r
- };\r
- if (this.view.getSelectionCount() == 1) {\r
- var i = this.view.getSelectedIndexes()[0];\r
- var n = this.view.getNode(i);\r
- dragData.viewNodes.push(dragData.ddel = n);\r
- dragData.records.push(this.view.store.getAt(i));\r
- dragData.repairXY = Ext.fly(n).getXY();\r
- } else {\r
- dragData.ddel = document.createElement('div');\r
- dragData.ddel.className = 'multi-proxy';\r
- this.collectSelection(dragData);\r
- }\r
- return dragData;\r
+ \r
+ getCell : function(row, col){\r
+ var llen = this.cm.getLockedCount();\r
+ if(col < llen){\r
+ return this.getLockedRow(row).getElementsByTagName('td')[col];\r
}\r
- return false;\r
+ return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - llen);\r
},\r
-\r
- // override the default repairXY.\r
- getRepairXY : function(e){\r
- return this.dragData.repairXY;\r
- },\r
-\r
- // private\r
- setDraggable: function(ddGroup){\r
- if (!ddGroup) return;\r
- if (Ext.isArray(ddGroup)) {\r
- Ext.each(ddGroup, this.setDraggable, this);\r
- return;\r
+ \r
+ getHeaderCell : function(index){\r
+ var llen = this.cm.getLockedCount();\r
+ if(index < llen){\r
+ return this.lockedHd.dom.getElementsByTagName('td')[index];\r
}\r
- this.addToGroup(ddGroup);\r
- }\r
-});\r
-\r
-Ext.ux.form.MultiSelect.DropZone = function(ms, config){\r
- this.ms = ms;\r
- this.view = ms.view;\r
- var ddGroup = config.ddGroup || 'MultiselectDD';\r
- var dd;\r
- if (Ext.isArray(ddGroup)){\r
- dd = ddGroup.shift();\r
- } else {\r
- dd = ddGroup;\r
- ddGroup = null;\r
- }\r
- Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });\r
- this.setDroppable(ddGroup);\r
-};\r
-\r
-Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {\r
- /**\r
- * Part of the Ext.dd.DropZone interface. If no target node is found, the\r
- * whole Element becomes the target, and this causes the drop gesture to append.\r
- */\r
- getTargetFromEvent : function(e) {\r
- var target = e.getTarget();\r
- return target;\r
+ return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - llen);\r
},\r
-\r
- // private\r
- getDropPoint : function(e, n, dd){\r
- if (n == this.ms.fs.body.dom) { return "below"; }\r
- var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;\r
- var c = t + (b - t) / 2;\r
- var y = Ext.lib.Event.getPageY(e);\r
- if(y <= c) {\r
- return "above";\r
- }else{\r
- return "below";\r
+ \r
+ addRowClass : function(row, cls){\r
+ var r = this.getLockedRow(row);\r
+ if(r){\r
+ this.fly(r).addClass(cls);\r
}\r
+ Ext.ux.grid.LockingGridView.superclass.addRowClass.call(this, row, cls);\r
},\r
-\r
- // private\r
- isValidDropPoint: function(pt, n, data) {\r
- if (!data.viewNodes || (data.viewNodes.length != 1)) {\r
- return true;\r
- }\r
- var d = data.viewNodes[0];\r
- if (d == n) {\r
- return false;\r
- }\r
- if ((pt == "below") && (n.nextSibling == d)) {\r
- return false;\r
+ \r
+ removeRowClass : function(row, cls){\r
+ var r = this.getLockedRow(row);\r
+ if(r){\r
+ this.fly(r).removeClass(cls);\r
}\r
- if ((pt == "above") && (n.previousSibling == d)) {\r
- return false;\r
+ Ext.ux.grid.LockingGridView.superclass.removeRowClass.call(this, row, cls);\r
+ },\r
+ \r
+ removeRow : function(row) {\r
+ Ext.removeNode(this.getLockedRow(row));\r
+ Ext.ux.grid.LockingGridView.superclass.removeRow.call(this, row);\r
+ },\r
+ \r
+ removeRows : function(firstRow, lastRow){\r
+ var bd = this.lockedBody.dom;\r
+ for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){\r
+ Ext.removeNode(bd.childNodes[firstRow]);\r
}\r
- return true;\r
+ Ext.ux.grid.LockingGridView.superclass.removeRows.call(this, firstRow, lastRow);\r
},\r
-\r
- // override\r
- onNodeEnter : function(n, dd, e, data){\r
- return false;\r
+ \r
+ syncScroll : function(e){\r
+ var mb = this.scroller.dom;\r
+ this.lockedScroller.dom.scrollTop = mb.scrollTop;\r
+ Ext.ux.grid.LockingGridView.superclass.syncScroll.call(this, e);\r
},\r
-\r
- // override\r
- onNodeOver : function(n, dd, e, data){\r
- var dragElClass = this.dropNotAllowed;\r
- var pt = this.getDropPoint(e, n, dd);\r
- if (this.isValidDropPoint(pt, n, data)) {\r
- if (this.ms.appendOnly) {\r
- return "x-tree-drop-ok-below";\r
- }\r
-\r
- // set the insert point style on the target node\r
- if (pt) {\r
- var targetElClass;\r
- if (pt == "above"){\r
- dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";\r
- targetElClass = "x-view-drag-insert-above";\r
- } else {\r
- dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";\r
- targetElClass = "x-view-drag-insert-below";\r
+ \r
+ updateSortIcon : function(col, dir){\r
+ var sc = this.sortClasses,\r
+ lhds = this.lockedHd.select('td').removeClass(sc),\r
+ hds = this.mainHd.select('td').removeClass(sc),\r
+ llen = this.cm.getLockedCount(),\r
+ cls = sc[dir == 'DESC' ? 1 : 0];\r
+ if(col < llen){\r
+ lhds.item(col).addClass(cls);\r
+ }else{\r
+ hds.item(col - llen).addClass(cls);\r
+ }\r
+ },\r
+ \r
+ updateAllColumnWidths : function(){\r
+ var tw = this.getTotalWidth(),\r
+ clen = this.cm.getColumnCount(),\r
+ lw = this.getLockedWidth(),\r
+ llen = this.cm.getLockedCount(),\r
+ ws = [], len, i;\r
+ this.updateLockedWidth();\r
+ for(i = 0; i < clen; i++){\r
+ ws[i] = this.getColumnWidth(i);\r
+ var hd = this.getHeaderCell(i);\r
+ hd.style.width = ws[i];\r
+ }\r
+ var lns = this.getLockedRows(), ns = this.getRows(), row, trow, j;\r
+ for(i = 0, len = ns.length; i < len; i++){\r
+ row = lns[i];\r
+ row.style.width = lw;\r
+ if(row.firstChild){\r
+ row.firstChild.style.width = lw;\r
+ trow = row.firstChild.rows[0];\r
+ for (j = 0; j < llen; j++) {\r
+ trow.childNodes[j].style.width = ws[j];\r
}\r
- if (this.lastInsertClass != targetElClass){\r
- Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);\r
- this.lastInsertClass = targetElClass;\r
+ }\r
+ row = ns[i];\r
+ row.style.width = tw;\r
+ if(row.firstChild){\r
+ row.firstChild.style.width = tw;\r
+ trow = row.firstChild.rows[0];\r
+ for (j = llen; j < clen; j++) {\r
+ trow.childNodes[j - llen].style.width = ws[j];\r
}\r
}\r
}\r
- return dragElClass;\r
+ this.onAllColumnWidthsUpdated(ws, tw);\r
+ this.syncHeaderHeight();\r
},\r
-\r
- // private\r
- onNodeOut : function(n, dd, e, data){\r
- this.removeDropIndicators(n);\r
- },\r
-\r
- // private\r
- onNodeDrop : function(n, dd, e, data){\r
- if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {\r
- return false;\r
+ \r
+ updateColumnWidth : function(col, width){\r
+ var w = this.getColumnWidth(col),\r
+ llen = this.cm.getLockedCount(),\r
+ ns, rw, c, row;\r
+ this.updateLockedWidth();\r
+ if(col < llen){\r
+ ns = this.getLockedRows();\r
+ rw = this.getLockedWidth();\r
+ c = col;\r
+ }else{\r
+ ns = this.getRows();\r
+ rw = this.getTotalWidth();\r
+ c = col - llen;\r
+ }\r
+ var hd = this.getHeaderCell(col);\r
+ hd.style.width = w;\r
+ for(var i = 0, len = ns.length; i < len; i++){\r
+ row = ns[i];\r
+ row.style.width = rw;\r
+ if(row.firstChild){\r
+ row.firstChild.style.width = rw;\r
+ row.firstChild.rows[0].childNodes[c].style.width = w;\r
+ }\r
}\r
- var pt = this.getDropPoint(e, n, dd);\r
- if (n != this.ms.fs.body.dom)\r
- n = this.view.findItemFromChild(n);\r
- var insertAt = (this.ms.appendOnly || (n == this.ms.fs.body.dom)) ? this.view.store.getCount() : this.view.indexOf(n);\r
- if (pt == "below") {\r
- insertAt++;\r
+ this.onColumnWidthUpdated(col, w, this.getTotalWidth());\r
+ this.syncHeaderHeight();\r
+ },\r
+ \r
+ updateColumnHidden : function(col, hidden){\r
+ var llen = this.cm.getLockedCount(),\r
+ ns, rw, c, row,\r
+ display = hidden ? 'none' : '';\r
+ this.updateLockedWidth();\r
+ if(col < llen){\r
+ ns = this.getLockedRows();\r
+ rw = this.getLockedWidth();\r
+ c = col;\r
+ }else{\r
+ ns = this.getRows();\r
+ rw = this.getTotalWidth();\r
+ c = col - llen;\r
+ }\r
+ var hd = this.getHeaderCell(col);\r
+ hd.style.display = display;\r
+ for(var i = 0, len = ns.length; i < len; i++){\r
+ row = ns[i];\r
+ row.style.width = rw;\r
+ if(row.firstChild){\r
+ row.firstChild.style.width = rw;\r
+ row.firstChild.rows[0].childNodes[c].style.display = display;\r
+ }\r
}\r
-\r
- var dir = false;\r
-\r
- // Validate if dragging within the same MultiSelect\r
- if (data.sourceView == this.view) {\r
- // If the first element to be inserted below is the target node, remove it\r
- if (pt == "below") {\r
- if (data.viewNodes[0] == n) {\r
- data.viewNodes.shift();\r
+ this.onColumnHiddenUpdated(col, hidden, this.getTotalWidth());\r
+ delete this.lastViewWidth;\r
+ this.layout();\r
+ },\r
+ \r
+ doRender : function(cs, rs, ds, startRow, colCount, stripe){\r
+ var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1,\r
+ tstyle = 'width:'+this.getTotalWidth()+';',\r
+ lstyle = 'width:'+this.getLockedWidth()+';',\r
+ buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r;\r
+ for(var j = 0, len = rs.length; j < len; j++){\r
+ r = rs[j]; cb = []; lcb = [];\r
+ var rowIndex = (j+startRow);\r
+ for(var i = 0; i < colCount; i++){\r
+ c = cs[i];\r
+ p.id = c.id;\r
+ p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +\r
+ (this.cm.config[i].cellCls ? ' ' + this.cm.config[i].cellCls : '');\r
+ p.attr = p.cellAttr = '';\r
+ p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);\r
+ p.style = c.style;\r
+ if(Ext.isEmpty(p.value)){\r
+ p.value = ' ';\r
}\r
- } else { // If the last element to be inserted above is the target node, remove it\r
- if (data.viewNodes[data.viewNodes.length - 1] == n) {\r
- data.viewNodes.pop();\r
+ if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){\r
+ p.css += ' x-grid3-dirty-cell';\r
+ }\r
+ if(c.locked){\r
+ lcb[lcb.length] = ct.apply(p);\r
+ }else{\r
+ cb[cb.length] = ct.apply(p);\r
}\r
}\r
-\r
- // Nothing to drop...\r
- if (!data.viewNodes.length) {\r
- return false;\r
+ var alt = [];\r
+ if(stripe && ((rowIndex+1) % 2 === 0)){\r
+ alt[0] = 'x-grid3-row-alt';\r
}\r
-\r
- // If we are moving DOWN, then because a store.remove() takes place first,\r
- // the insertAt must be decremented.\r
- if (insertAt > this.view.store.indexOf(data.records[0])) {\r
- dir = 'down';\r
- insertAt--;\r
+ if(r.dirty){\r
+ alt[1] = ' x-grid3-dirty-row';\r
+ }\r
+ rp.cols = colCount;\r
+ if(this.getRowClass){\r
+ alt[2] = this.getRowClass(r, rowIndex, rp, ds);\r
}\r
+ rp.alt = alt.join(' ');\r
+ rp.cells = cb.join('');\r
+ rp.tstyle = tstyle;\r
+ buf[buf.length] = rt.apply(rp);\r
+ rp.cells = lcb.join('');\r
+ rp.tstyle = lstyle;\r
+ lbuf[lbuf.length] = rt.apply(rp);\r
+ }\r
+ return [buf.join(''), lbuf.join('')];\r
+ },\r
+ processRows : function(startRow, skipStripe){\r
+ if(!this.ds || this.ds.getCount() < 1){\r
+ return;\r
}\r
-\r
- for (var i = 0; i < data.records.length; i++) {\r
- var r = data.records[i];\r
- if (data.sourceView) {\r
- data.sourceView.store.remove(r);\r
+ var rows = this.getRows(),\r
+ lrows = this.getLockedRows(),\r
+ row, lrow;\r
+ skipStripe = skipStripe || !this.grid.stripeRows;\r
+ startRow = startRow || 0;\r
+ for(var i = 0, len = rows.length; i < len; ++i){\r
+ row = rows[i];\r
+ lrow = lrows[i];\r
+ row.rowIndex = i;\r
+ lrow.rowIndex = i;\r
+ if(!skipStripe){\r
+ row.className = row.className.replace(this.rowClsRe, ' ');\r
+ lrow.className = lrow.className.replace(this.rowClsRe, ' ');\r
+ if ((i + 1) % 2 === 0){\r
+ row.className += ' x-grid3-row-alt';\r
+ lrow.className += ' x-grid3-row-alt';\r
+ }\r
}\r
- this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);\r
- var si = this.view.store.sortInfo;\r
- if(si){\r
- this.view.store.sort(si.field, si.direction);\r
+ if(this.syncHeights){\r
+ var el1 = Ext.get(row),\r
+ el2 = Ext.get(lrow),\r
+ h1 = el1.getHeight(),\r
+ h2 = el2.getHeight();\r
+ \r
+ if(h1 > h2){\r
+ el2.setHeight(h1); \r
+ }else if(h2 > h1){\r
+ el1.setHeight(h2);\r
+ }\r
}\r
}\r
- return true;\r
- },\r
-\r
- // private\r
- removeDropIndicators : function(n){\r
- if(n){\r
- Ext.fly(n).removeClass([\r
- "x-view-drag-insert-above",\r
- "x-view-drag-insert-left",\r
- "x-view-drag-insert-right",\r
- "x-view-drag-insert-below"]);\r
- this.lastInsertClass = "_noclass";\r
+ if(startRow === 0){\r
+ Ext.fly(rows[0]).addClass(this.firstRowCls);\r
+ Ext.fly(lrows[0]).addClass(this.firstRowCls);\r
}\r
+ Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);\r
+ Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls);\r
},\r
-\r
- // private\r
- setDroppable: function(ddGroup){\r
- if (!ddGroup) return;\r
- if (Ext.isArray(ddGroup)) {\r
- Ext.each(ddGroup, this.setDroppable, this);\r
+ \r
+ afterRender : function(){\r
+ if(!this.ds || !this.cm){\r
return;\r
}\r
- this.addToGroup(ddGroup);\r
- }\r
-});\r
-
-/* Fix for Opera, which does not seem to include the map function on Array's */
-if (!Array.prototype.map) {
- Array.prototype.map = function(fun){
- var len = this.length;
- if (typeof fun != 'function') {
- throw new TypeError();
- }
- var res = new Array(len);
- var thisp = arguments[1];
- for (var i = 0; i < len; i++) {
- if (i in this) {
- res[i] = fun.call(thisp, this[i], i, this);
- }
- }
- return res;
- };
-}
-
-Ext.ns('Ext.ux.data');
-
-/**
- * @class Ext.ux.data.PagingMemoryProxy
- * @extends Ext.data.MemoryProxy
- * <p>Paging Memory Proxy, allows to use paging grid with in memory dataset</p>
- */
-Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
- constructor : function(data){
- Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
- this.data = data;
- },
- doRequest : function(action, rs, params, reader, callback, scope, options){
- params = params ||
- {};
- var result;
- try {
- result = reader.readRecords(this.data);
- }
- catch (e) {
- this.fireEvent('loadexception', this, options, null, e);
- callback.call(scope, null, options, false);
- return;
- }
-
- // filtering
- if (params.filter !== undefined) {
- result.records = result.records.filter(function(el){
- if (typeof(el) == 'object') {
- var att = params.filterCol || 0;
- return String(el.data[att]).match(params.filter) ? true : false;
- }
- else {
- return String(el).match(params.filter) ? true : false;
- }
- });
- result.totalRecords = result.records.length;
- }
-
- // sorting
- if (params.sort !== undefined) {
- // use integer as params.sort to specify column, since arrays are not named
- // params.sort=0; would also match a array without columns
- var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
- var fn = function(r1, r2){
- return r1 < r2;
- };
- result.records.sort(function(a, b){
- var v = 0;
- if (typeof(a) == 'object') {
- v = fn(a.data[params.sort], b.data[params.sort]) * dir;
- }
- else {
- v = fn(a, b) * dir;
- }
- if (v == 0) {
- v = (a.index < b.index ? -1 : 1);
- }
- return v;
- });
- }
- // paging (use undefined cause start can also be 0 (thus false))
- if (params.start !== undefined && params.limit !== undefined) {
- result.records = result.records.slice(params.start, params.start + params.limit);
- }
- callback.call(scope, result, options, true);
- }
-});
-
-//backwards compat.
-Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;
-Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {\r
- minHeight: 0,\r
- maxHeight:10000000,\r
-\r
- constructor: function(config){\r
- Ext.apply(this, config);\r
- this.events = {};\r
- Ext.ux.PanelResizer.superclass.constructor.call(this, config);\r
- },\r
-\r
- init : function(p){\r
- this.panel = p;\r
-\r
- if(this.panel.elements.indexOf('footer')==-1){\r
- p.elements += ',footer';\r
+ var bd = this.renderRows() || [' ', ' '];\r
+ this.mainBody.dom.innerHTML = bd[0];\r
+ this.lockedBody.dom.innerHTML = bd[1];\r
+ this.processRows(0, true);\r
+ if(this.deferEmptyText !== true){\r
+ this.applyEmptyText();\r
}\r
- p.on('render', this.onRender, this);\r
},\r
-\r
- onRender : function(p){\r
- this.handle = p.footer.createChild({cls:'x-panel-resize'});\r
-\r
- this.tracker = new Ext.dd.DragTracker({\r
- onStart: this.onDragStart.createDelegate(this),\r
- onDrag: this.onDrag.createDelegate(this),\r
- onEnd: this.onDragEnd.createDelegate(this),\r
- tolerance: 3,\r
- autoStart: 300\r
+ \r
+ renderUI : function(){\r
+ var header = this.renderHeaders();\r
+ var body = this.templates.body.apply({rows:' '});\r
+ var html = this.templates.master.apply({\r
+ body: body,\r
+ header: header[0],\r
+ ostyle: 'width:'+this.getOffsetWidth()+';',\r
+ bstyle: 'width:'+this.getTotalWidth()+';',\r
+ lockedBody: body,\r
+ lockedHeader: header[1],\r
+ lstyle: 'width:'+this.getLockedWidth()+';'\r
});\r
- this.tracker.initEl(this.handle);\r
- p.on('beforedestroy', this.tracker.destroy, this.tracker);\r
+ var g = this.grid;\r
+ g.getGridEl().dom.innerHTML = html;\r
+ this.initElements();\r
+ Ext.fly(this.innerHd).on('click', this.handleHdDown, this);\r
+ Ext.fly(this.lockedInnerHd).on('click', this.handleHdDown, this);\r
+ this.mainHd.on({\r
+ scope: this,\r
+ mouseover: this.handleHdOver,\r
+ mouseout: this.handleHdOut,\r
+ mousemove: this.handleHdMove\r
+ });\r
+ this.lockedHd.on({\r
+ scope: this,\r
+ mouseover: this.handleHdOver,\r
+ mouseout: this.handleHdOut,\r
+ mousemove: this.handleHdMove\r
+ });\r
+ this.scroller.on('scroll', this.syncScroll, this);\r
+ if(g.enableColumnResize !== false){\r
+ this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);\r
+ this.splitZone.setOuterHandleElId(Ext.id(this.lockedHd.dom));\r
+ this.splitZone.setOuterHandleElId(Ext.id(this.mainHd.dom));\r
+ }\r
+ if(g.enableColumnMove){\r
+ this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);\r
+ this.columnDrag.setOuterHandleElId(Ext.id(this.lockedInnerHd));\r
+ this.columnDrag.setOuterHandleElId(Ext.id(this.innerHd));\r
+ this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);\r
+ }\r
+ if(g.enableHdMenu !== false){\r
+ this.hmenu = new Ext.menu.Menu({id: g.id + '-hctx'});\r
+ this.hmenu.add(\r
+ {itemId: 'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},\r
+ {itemId: 'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}\r
+ );\r
+ if(this.grid.enableColLock !== false){\r
+ this.hmenu.add('-',\r
+ {itemId: 'lock', text: this.lockText, cls: 'xg-hmenu-lock'},\r
+ {itemId: 'unlock', text: this.unlockText, cls: 'xg-hmenu-unlock'}\r
+ );\r
+ }\r
+ if(g.enableColumnHide !== false){\r
+ this.colMenu = new Ext.menu.Menu({id:g.id + '-hcols-menu'});\r
+ this.colMenu.on({\r
+ scope: this,\r
+ beforeshow: this.beforeColMenuShow,\r
+ itemclick: this.handleHdMenuClick\r
+ });\r
+ this.hmenu.add('-', {\r
+ itemId:'columns',\r
+ hideOnClick: false,\r
+ text: this.columnsText,\r
+ menu: this.colMenu,\r
+ iconCls: 'x-cols-icon'\r
+ });\r
+ }\r
+ this.hmenu.on('itemclick', this.handleHdMenuClick, this);\r
+ }\r
+ if(g.trackMouseOver){\r
+ this.mainBody.on({\r
+ scope: this,\r
+ mouseover: this.onRowOver,\r
+ mouseout: this.onRowOut\r
+ });\r
+ this.lockedBody.on({\r
+ scope: this,\r
+ mouseover: this.onRowOver,\r
+ mouseout: this.onRowOut\r
+ });\r
+ }\r
+ \r
+ if(g.enableDragDrop || g.enableDrag){\r
+ this.dragZone = new Ext.grid.GridDragZone(g, {\r
+ ddGroup : g.ddGroup || 'GridDD'\r
+ });\r
+ }\r
+ this.updateHeaderSortState();\r
},\r
-\r
- // private\r
- onDragStart: function(e){\r
- this.dragging = true;\r
- this.startHeight = this.panel.el.getHeight();\r
- this.fireEvent('dragstart', this, e);\r
+ \r
+ layout : function(){\r
+ if(!this.mainBody){\r
+ return;\r
+ }\r
+ var g = this.grid;\r
+ var c = g.getGridEl();\r
+ var csize = c.getSize(true);\r
+ var vw = csize.width;\r
+ if(!g.hideHeaders && (vw < 20 || csize.height < 20)){\r
+ return;\r
+ }\r
+ this.syncHeaderHeight();\r
+ if(g.autoHeight){\r
+ this.scroller.dom.style.overflow = 'visible';\r
+ this.lockedScroller.dom.style.overflow = 'visible';\r
+ if(Ext.isWebKit){\r
+ this.scroller.dom.style.position = 'static';\r
+ this.lockedScroller.dom.style.position = 'static';\r
+ }\r
+ }else{\r
+ this.el.setSize(csize.width, csize.height);\r
+ var hdHeight = this.mainHd.getHeight();\r
+ var vh = csize.height - (hdHeight);\r
+ }\r
+ this.updateLockedWidth();\r
+ if(this.forceFit){\r
+ if(this.lastViewWidth != vw){\r
+ this.fitColumns(false, false);\r
+ this.lastViewWidth = vw;\r
+ }\r
+ }else {\r
+ this.autoExpand();\r
+ this.syncHeaderScroll();\r
+ }\r
+ this.onLayout(vw, vh);\r
},\r
-\r
- // private\r
- onDrag: function(e){\r
- this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));\r
- this.fireEvent('drag', this, e);\r
+ \r
+ getOffsetWidth : function() {\r
+ return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth() + this.getScrollOffset()) + 'px';\r
+ },\r
+ \r
+ renderHeaders : function(){\r
+ var cm = this.cm,\r
+ ts = this.templates,\r
+ ct = ts.hcell,\r
+ cb = [], lcb = [],\r
+ p = {},\r
+ len = cm.getColumnCount(),\r
+ last = len - 1;\r
+ for(var i = 0; i < len; i++){\r
+ p.id = cm.getColumnId(i);\r
+ p.value = cm.getColumnHeader(i) || '';\r
+ p.style = this.getColumnStyle(i, true);\r
+ p.tooltip = this.getColumnTooltip(i);\r
+ p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +\r
+ (cm.config[i].headerCls ? ' ' + cm.config[i].headerCls : '');\r
+ if(cm.config[i].align == 'right'){\r
+ p.istyle = 'padding-right:16px';\r
+ } else {\r
+ delete p.istyle;\r
+ }\r
+ if(cm.isLocked(i)){\r
+ lcb[lcb.length] = ct.apply(p);\r
+ }else{\r
+ cb[cb.length] = ct.apply(p);\r
+ }\r
+ }\r
+ return [ts.header.apply({cells: cb.join(''), tstyle:'width:'+this.getTotalWidth()+';'}),\r
+ ts.header.apply({cells: lcb.join(''), tstyle:'width:'+this.getLockedWidth()+';'})];\r
+ },\r
+ \r
+ updateHeaders : function(){\r
+ var hd = this.renderHeaders();\r
+ this.innerHd.firstChild.innerHTML = hd[0];\r
+ this.innerHd.firstChild.style.width = this.getOffsetWidth();\r
+ this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();\r
+ this.lockedInnerHd.firstChild.innerHTML = hd[1];\r
+ var lw = this.getLockedWidth();\r
+ this.lockedInnerHd.firstChild.style.width = lw;\r
+ this.lockedInnerHd.firstChild.firstChild.style.width = lw;\r
+ },\r
+ \r
+ getResolvedXY : function(resolved){\r
+ if(!resolved){\r
+ return null;\r
+ }\r
+ var c = resolved.cell, r = resolved.row;\r
+ return c ? Ext.fly(c).getXY() : [this.scroller.getX(), Ext.fly(r).getY()];\r
+ },\r
+ \r
+ syncFocusEl : function(row, col, hscroll){\r
+ Ext.ux.grid.LockingGridView.superclass.syncFocusEl.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);\r
},\r
+ \r
+ ensureVisible : function(row, col, hscroll){\r
+ return Ext.ux.grid.LockingGridView.superclass.ensureVisible.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);\r
+ },\r
+ \r
+ insertRows : function(dm, firstRow, lastRow, isUpdate){\r
+ var last = dm.getCount() - 1;\r
+ if(!isUpdate && firstRow === 0 && lastRow >= last){\r
+ this.refresh();\r
+ }else{\r
+ if(!isUpdate){\r
+ this.fireEvent('beforerowsinserted', this, firstRow, lastRow);\r
+ }\r
+ var html = this.renderRows(firstRow, lastRow),\r
+ before = this.getRow(firstRow);\r
+ if(before){\r
+ if(firstRow === 0){\r
+ this.removeRowClass(0, this.firstRowCls);\r
+ }\r
+ Ext.DomHelper.insertHtml('beforeBegin', before, html[0]);\r
+ before = this.getLockedRow(firstRow);\r
+ Ext.DomHelper.insertHtml('beforeBegin', before, html[1]);\r
+ }else{\r
+ this.removeRowClass(last - 1, this.lastRowCls);\r
+ Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html[0]);\r
+ Ext.DomHelper.insertHtml('beforeEnd', this.lockedBody.dom, html[1]);\r
+ }\r
+ if(!isUpdate){\r
+ this.fireEvent('rowsinserted', this, firstRow, lastRow);\r
+ this.processRows(firstRow);\r
+ }else if(firstRow === 0 || firstRow >= last){\r
+ this.addRowClass(firstRow, firstRow === 0 ? this.firstRowCls : this.lastRowCls);\r
+ }\r
+ }\r
+ this.syncFocusEl(firstRow);\r
+ },\r
+ \r
+ getColumnStyle : function(col, isHeader){\r
+ var style = !isHeader ? this.cm.config[col].cellStyle || this.cm.config[col].css || '' : this.cm.config[col].headerStyle || '';\r
+ style += 'width:'+this.getColumnWidth(col)+';';\r
+ if(this.cm.isHidden(col)){\r
+ style += 'display:none;';\r
+ }\r
+ var align = this.cm.config[col].align;\r
+ if(align){\r
+ style += 'text-align:'+align+';';\r
+ }\r
+ return style;\r
+ },\r
+ \r
+ getLockedWidth : function() {\r
+ return this.cm.getTotalLockedWidth() + 'px';\r
+ },\r
+ \r
+ getTotalWidth : function() {\r
+ return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth()) + 'px';\r
+ },\r
+ \r
+ getColumnData : function(){\r
+ var cs = [], cm = this.cm, colCount = cm.getColumnCount();\r
+ for(var i = 0; i < colCount; i++){\r
+ var name = cm.getDataIndex(i);\r
+ cs[i] = {\r
+ name : (!Ext.isDefined(name) ? this.ds.fields.get(i).name : name),\r
+ renderer : cm.getRenderer(i),\r
+ id : cm.getColumnId(i),\r
+ style : this.getColumnStyle(i),\r
+ locked : cm.isLocked(i)\r
+ };\r
+ }\r
+ return cs;\r
+ },\r
+ \r
+ renderBody : function(){\r
+ var markup = this.renderRows() || [' ', ' '];\r
+ return [this.templates.body.apply({rows: markup[0]}), this.templates.body.apply({rows: markup[1]})];\r
+ },\r
+ \r
+ refreshRow : function(record){\r
+ Ext.ux.grid.LockingGridView.superclass.refreshRow.call(this, record);\r
+ var index = Ext.isNumber(record) ? record : this.ds.indexOf(record);\r
+ this.getLockedRow(index).rowIndex = index;\r
+ },\r
+ \r
+ refresh : function(headersToo){\r
+ this.fireEvent('beforerefresh', this);\r
+ this.grid.stopEditing(true);\r
+ var result = this.renderBody();\r
+ this.mainBody.update(result[0]).setWidth(this.getTotalWidth());\r
+ this.lockedBody.update(result[1]).setWidth(this.getLockedWidth());\r
+ if(headersToo === true){\r
+ this.updateHeaders();\r
+ this.updateHeaderSortState();\r
+ }\r
+ this.processRows(0, true);\r
+ this.layout();\r
+ this.applyEmptyText();\r
+ this.fireEvent('refresh', this);\r
+ },\r
+ \r
+ onDenyColumnLock : function(){\r
\r
- // private\r
- onDragEnd: function(e){\r
- this.dragging = false;\r
- this.fireEvent('dragend', this, e);\r
+ },\r
+ \r
+ initData : function(ds, cm){\r
+ if(this.cm){\r
+ this.cm.un('columnlockchange', this.onColumnLock, this);\r
+ }\r
+ Ext.ux.grid.LockingGridView.superclass.initData.call(this, ds, cm);\r
+ if(this.cm){\r
+ this.cm.on('columnlockchange', this.onColumnLock, this);\r
+ }\r
+ },\r
+ \r
+ onColumnLock : function(){\r
+ this.refresh(true);\r
+ },\r
+ \r
+ handleHdMenuClick : function(item){\r
+ var index = this.hdCtxIndex,\r
+ cm = this.cm,\r
+ id = item.getItemId(),\r
+ llen = cm.getLockedCount();\r
+ switch(id){\r
+ case 'lock':\r
+ if(cm.getColumnCount(true) <= llen + 1){\r
+ this.onDenyColumnLock();\r
+ return;\r
+ }\r
+ if(llen != index){\r
+ cm.setLocked(index, true, true);\r
+ cm.moveColumn(index, llen);\r
+ this.grid.fireEvent('columnmove', index, llen);\r
+ }else{\r
+ cm.setLocked(index, true);\r
+ }\r
+ break;\r
+ case 'unlock':\r
+ if(llen - 1 != index){\r
+ cm.setLocked(index, false, true);\r
+ cm.moveColumn(index, llen - 1);\r
+ this.grid.fireEvent('columnmove', index, llen - 1);\r
+ }else{\r
+ cm.setLocked(index, false);\r
+ }\r
+ break;\r
+ default:\r
+ return Ext.ux.grid.LockingGridView.superclass.handleHdMenuClick.call(this, item);\r
+ }\r
+ return true;\r
+ },\r
+ \r
+ handleHdDown : function(e, t){\r
+ Ext.ux.grid.LockingGridView.superclass.handleHdDown.call(this, e, t);\r
+ if(this.grid.enableColLock !== false){\r
+ if(Ext.fly(t).hasClass('x-grid3-hd-btn')){\r
+ var hd = this.findHeaderCell(t),\r
+ index = this.getCellIndex(hd),\r
+ ms = this.hmenu.items, cm = this.cm;\r
+ ms.get('lock').setDisabled(cm.isLocked(index));\r
+ ms.get('unlock').setDisabled(!cm.isLocked(index));\r
+ }\r
+ }\r
+ },\r
+ \r
+ syncHeaderHeight: function(){\r
+ this.innerHd.firstChild.firstChild.style.height = 'auto';\r
+ this.lockedInnerHd.firstChild.firstChild.style.height = 'auto';\r
+ var hd = this.innerHd.firstChild.firstChild.offsetHeight,\r
+ lhd = this.lockedInnerHd.firstChild.firstChild.offsetHeight,\r
+ height = (lhd > hd ? lhd : hd) + 'px';\r
+ this.innerHd.firstChild.firstChild.style.height = height;\r
+ this.lockedInnerHd.firstChild.firstChild.style.height = height;\r
+ },\r
+ \r
+ updateLockedWidth: function(){\r
+ var lw = this.cm.getTotalLockedWidth(),\r
+ tw = this.cm.getTotalWidth() - lw,\r
+ csize = this.grid.getGridEl().getSize(true),\r
+ lp = Ext.isBorderBox ? 0 : this.lockedBorderWidth,\r
+ rp = Ext.isBorderBox ? 0 : this.rowBorderWidth,\r
+ vw = (csize.width - lw - lp - rp) + 'px',\r
+ so = this.getScrollOffset();\r
+ if(!this.grid.autoHeight){\r
+ var vh = (csize.height - this.mainHd.getHeight()) + 'px';\r
+ this.lockedScroller.dom.style.height = vh;\r
+ this.scroller.dom.style.height = vh;\r
+ }\r
+ this.lockedWrap.dom.style.width = (lw + rp) + 'px';\r
+ this.scroller.dom.style.width = vw;\r
+ this.mainWrap.dom.style.left = (lw + lp + rp) + 'px';\r
+ if(this.innerHd){\r
+ this.lockedInnerHd.firstChild.style.width = lw + 'px';\r
+ this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';\r
+ this.innerHd.style.width = vw;\r
+ this.innerHd.firstChild.style.width = (tw + rp + so) + 'px';\r
+ this.innerHd.firstChild.firstChild.style.width = tw + 'px';\r
+ }\r
+ if(this.mainBody){\r
+ this.lockedBody.dom.style.width = (lw + rp) + 'px';\r
+ this.mainBody.dom.style.width = (tw + rp) + 'px';\r
+ }\r
}\r
});\r
-Ext.preg('panelresizer', Ext.ux.PanelResizer);Ext.ux.Portal = Ext.extend(Ext.Panel, {\r
- layout : 'column',\r
- autoScroll : true,\r
- cls : 'x-portal',\r
- defaultType : 'portalcolumn',\r
+\r
+Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {\r
+ isLocked : function(colIndex){\r
+ return this.config[colIndex].locked === true;\r
+ },\r
\r
- initComponent : function(){\r
- Ext.ux.Portal.superclass.initComponent.call(this);\r
- this.addEvents({\r
- validatedrop:true,\r
- beforedragover:true,\r
- dragover:true,\r
- beforedrop:true,\r
- drop:true\r
- });\r
+ setLocked : function(colIndex, value, suppressEvent){\r
+ if(this.isLocked(colIndex) == value){\r
+ return;\r
+ }\r
+ this.config[colIndex].locked = value;\r
+ if(!suppressEvent){\r
+ this.fireEvent('columnlockchange', this, colIndex, value);\r
+ }\r
},\r
-\r
- initEvents : function(){\r
- Ext.ux.Portal.superclass.initEvents.call(this);\r
- this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);\r
+ \r
+ getTotalLockedWidth : function(){\r
+ var totalWidth = 0;\r
+ for(var i = 0, len = this.config.length; i < len; i++){\r
+ if(this.isLocked(i) && !this.isHidden(i)){\r
+ totalWidth += this.getColumnWidth(i);\r
+ }\r
+ }\r
+ return totalWidth;\r
},\r
\r
- beforeDestroy : function() {\r
- if(this.dd){\r
- this.dd.unreg();\r
+ getLockedCount : function(){\r
+ for(var i = 0, len = this.config.length; i < len; i++){\r
+ if(!this.isLocked(i)){\r
+ return i;\r
+ }\r
}\r
- Ext.ux.Portal.superclass.beforeDestroy.call(this);\r
+ },\r
+ \r
+ moveColumn : function(oldIndex, newIndex){\r
+ if(oldIndex < newIndex && this.isLocked(oldIndex) && !this.isLocked(newIndex)){\r
+ this.setLocked(oldIndex, false, true);\r
+ }else if(oldIndex > newIndex && !this.isLocked(oldIndex) && this.isLocked(newIndex)){\r
+ this.setLocked(oldIndex, true, true);\r
+ }\r
+ Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments);\r
}\r
});\r
+Ext.ns('Ext.ux.form');\r
\r
-Ext.reg('portal', Ext.ux.Portal);\r
-\r
-\r
-Ext.ux.Portal.DropZone = function(portal, cfg){\r
- this.portal = portal;\r
- Ext.dd.ScrollManager.register(portal.body);\r
- Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);\r
- portal.body.ddScrollConfig = this.ddScrollConfig;\r
-};\r
-\r
-Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {\r
- ddScrollConfig : {\r
- vthresh: 50,\r
- hthresh: -1,\r
- animate: true,\r
- increment: 200\r
- },\r
-\r
- createEvent : function(dd, e, data, col, c, pos){\r
- return {\r
- portal: this.portal,\r
- panel: data.panel,\r
- columnIndex: col,\r
- column: c,\r
- position: pos,\r
- data: data,\r
- source: dd,\r
- rawEvent: e,\r
- status: this.dropAllowed\r
- };\r
- },\r
-\r
- notifyOver : function(dd, e, data){\r
- var xy = e.getXY(), portal = this.portal, px = dd.proxy;\r
+/**\r
+ * @class Ext.ux.form.MultiSelect\r
+ * @extends Ext.form.Field\r
+ * A control that allows selection and form submission of multiple list items.\r
+ *\r
+ * @history\r
+ * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)\r
+ * 2008-06-19 bpm Docs and demo code clean up\r
+ *\r
+ * @constructor\r
+ * Create a new MultiSelect\r
+ * @param {Object} config Configuration options\r
+ * @xtype multiselect\r
+ */\r
+Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field, {\r
+ /**\r
+ * @cfg {String} legend Wraps the object with a fieldset and specified legend.\r
+ */\r
+ /**\r
+ * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.\r
+ */\r
+ /**\r
+ * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).\r
+ */\r
+ /**\r
+ * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).\r
+ */\r
+ /**\r
+ * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).\r
+ */\r
+ ddReorder:false,\r
+ /**\r
+ * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a\r
+ * toolbar config, or an array of buttons/button configs to be added to the toolbar.\r
+ */\r
+ /**\r
+ * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled\r
+ * (use for lists which are sorted, defaults to false).\r
+ */\r
+ appendOnly:false,\r
+ /**\r
+ * @cfg {Number} width Width in pixels of the control (defaults to 100).\r
+ */\r
+ width:100,\r
+ /**\r
+ * @cfg {Number} height Height in pixels of the control (defaults to 100).\r
+ */\r
+ height:100,\r
+ /**\r
+ * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).\r
+ */\r
+ displayField:0,\r
+ /**\r
+ * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).\r
+ */\r
+ valueField:1,\r
+ /**\r
+ * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no\r
+ * selection (defaults to true).\r
+ */\r
+ allowBlank:true,\r
+ /**\r
+ * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).\r
+ */\r
+ minSelections:0,\r
+ /**\r
+ * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).\r
+ */\r
+ maxSelections:Number.MAX_VALUE,\r
+ /**\r
+ * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as\r
+ * {@link Ext.form.TextField#blankText}.\r
+ */\r
+ blankText:Ext.form.TextField.prototype.blankText,\r
+ /**\r
+ * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}\r
+ * item(s) required'). The {0} token will be replaced by the value of {@link #minSelections}.\r
+ */\r
+ minSelectionsText:'Minimum {0} item(s) required',\r
+ /**\r
+ * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}\r
+ * item(s) allowed'). The {0} token will be replaced by the value of {@link #maxSelections}.\r
+ */\r
+ maxSelectionsText:'Maximum {0} item(s) allowed',\r
+ /**\r
+ * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values\r
+ * (defaults to ',').\r
+ */\r
+ delimiter:',',\r
+ /**\r
+ * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).\r
+ * Acceptable values for this property are:\r
+ * <div class="mdetail-params"><ul>\r
+ * <li><b>any {@link Ext.data.Store Store} subclass</b></li>\r
+ * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.\r
+ * <div class="mdetail-params"><ul>\r
+ * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">\r
+ * A 1-dimensional array will automatically be expanded (each array item will be the combo\r
+ * {@link #valueField value} and {@link #displayField text})</div></li>\r
+ * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">\r
+ * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo\r
+ * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.\r
+ * </div></li></ul></div></li></ul></div>\r
+ */\r
\r
- // case column widths\r
- if(!this.grid){\r
- this.grid = this.getGrid();\r
- }\r
+ // private\r
+ defaultAutoCreate : {tag: "div"},\r
\r
- // handle case scroll where scrollbars appear during drag\r
- var cw = portal.body.dom.clientWidth;\r
- if(!this.lastCW){\r
- this.lastCW = cw;\r
- }else if(this.lastCW != cw){\r
- this.lastCW = cw;\r
- portal.doLayout();\r
- this.grid = this.getGrid();\r
- }\r
+ // private\r
+ initComponent: function(){\r
+ Ext.ux.form.MultiSelect.superclass.initComponent.call(this);\r
\r
- // determine column\r
- var col = 0, xs = this.grid.columnX, cmatch = false;\r
- for(var len = xs.length; col < len; col++){\r
- if(xy[0] < (xs[col].x + xs[col].w)){\r
- cmatch = true;\r
- break;\r
+ if(Ext.isArray(this.store)){\r
+ if (Ext.isArray(this.store[0])){\r
+ this.store = new Ext.data.ArrayStore({\r
+ fields: ['value','text'],\r
+ data: this.store\r
+ });\r
+ this.valueField = 'value';\r
+ }else{\r
+ this.store = new Ext.data.ArrayStore({\r
+ fields: ['text'],\r
+ data: this.store,\r
+ expandData: true\r
+ });\r
+ this.valueField = 'text';\r
}\r
- }\r
- // no match, fix last index\r
- if(!cmatch){\r
- col--;\r
+ this.displayField = 'text';\r
+ } else {\r
+ this.store = Ext.StoreMgr.lookup(this.store);\r
}\r
\r
- // find insert position\r
- var p, match = false, pos = 0,\r
- c = portal.items.itemAt(col),\r
- items = c.items.items, overSelf = false;\r
+ this.addEvents({\r
+ 'dblclick' : true,\r
+ 'click' : true,\r
+ 'change' : true,\r
+ 'drop' : true\r
+ });\r
+ },\r
\r
- for(var len = items.length; pos < len; pos++){\r
- p = items[pos];\r
- var h = p.el.getHeight();\r
- if(h === 0){\r
- overSelf = true;\r
- }\r
- else if((p.el.getY()+(h/2)) > xy[1]){\r
- match = true;\r
- break;\r
- }\r
- }\r
+ // private\r
+ onRender: function(ct, position){\r
+ Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);\r
\r
- pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);\r
- var overEvent = this.createEvent(dd, e, data, col, c, pos);\r
+ var fs = this.fs = new Ext.form.FieldSet({\r
+ renderTo: this.el,\r
+ title: this.legend,\r
+ height: this.height,\r
+ width: this.width,\r
+ style: "padding:0;",\r
+ tbar: this.tbar\r
+ });\r
+ fs.body.addClass('ux-mselect');\r
\r
- if(portal.fireEvent('validatedrop', overEvent) !== false &&\r
- portal.fireEvent('beforedragover', overEvent) !== false){\r
+ this.view = new Ext.ListView({\r
+ multiSelect: true,\r
+ store: this.store,\r
+ columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],\r
+ hideHeaders: true\r
+ });\r
\r
- // make sure proxy width is fluid\r
- px.getProxy().setWidth('auto');\r
+ fs.add(this.view);\r
\r
- if(p){\r
- px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);\r
- }else{\r
- px.moveProxy(c.el.dom, null);\r
- }\r
+ this.view.on('click', this.onViewClick, this);\r
+ this.view.on('beforeclick', this.onViewBeforeClick, this);\r
+ this.view.on('dblclick', this.onViewDblClick, this);\r
\r
- this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};\r
- this.scrollPos = portal.body.getScroll();\r
+ this.hiddenName = this.name || Ext.id();\r
+ var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };\r
+ this.hiddenField = this.el.createChild(hiddenTag);\r
+ this.hiddenField.dom.disabled = this.hiddenName != this.name;\r
+ fs.doLayout();\r
+ },\r
\r
- portal.fireEvent('dragover', overEvent);\r
+ // private\r
+ afterRender: function(){\r
+ Ext.ux.form.MultiSelect.superclass.afterRender.call(this);\r
\r
- return overEvent.status;\r
- }else{\r
- return overEvent.status;\r
+ if (this.ddReorder && !this.dragGroup && !this.dropGroup){\r
+ this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();\r
}\r
\r
- },\r
-\r
- notifyOut : function(){\r
- delete this.grid;\r
- },\r
+ if (this.draggable || this.dragGroup){\r
+ this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {\r
+ ddGroup: this.dragGroup\r
+ });\r
+ }\r
+ if (this.droppable || this.dropGroup){\r
+ this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {\r
+ ddGroup: this.dropGroup\r
+ });\r
+ }\r
+ },\r
\r
- notifyDrop : function(dd, e, data){\r
- delete this.grid;\r
- if(!this.lastPos){\r
- return;\r
+ // private\r
+ onViewClick: function(vw, index, node, e) {\r
+ this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
+ this.hiddenField.dom.value = this.getValue();\r
+ this.fireEvent('click', this, e);\r
+ this.validate();\r
+ },\r
+\r
+ // private\r
+ onViewBeforeClick: function(vw, index, node, e) {\r
+ if (this.disabled) {return false;}\r
+ },\r
+\r
+ // private\r
+ onViewDblClick : function(vw, index, node, e) {\r
+ return this.fireEvent('dblclick', vw, index, node, e);\r
+ },\r
+\r
+ /**\r
+ * Returns an array of data values for the selected items in the list. The values will be separated\r
+ * by {@link #delimiter}.\r
+ * @return {Array} value An array of string data values\r
+ */\r
+ getValue: function(valueField){\r
+ var returnArray = [];\r
+ var selectionsArray = this.view.getSelectedIndexes();\r
+ if (selectionsArray.length == 0) {return '';}\r
+ for (var i=0; i<selectionsArray.length; i++) {\r
+ returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));\r
}\r
- var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;\r
+ return returnArray.join(this.delimiter);\r
+ },\r
\r
- var dropEvent = this.createEvent(dd, e, data, col, c,\r
- pos !== false ? pos : c.items.getCount());\r
+ /**\r
+ * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.\r
+ * @param {String/Array} values The values to set\r
+ */\r
+ setValue: function(values) {\r
+ var index;\r
+ var selections = [];\r
+ this.view.clearSelections();\r
+ this.hiddenField.dom.value = '';\r
\r
- if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&\r
- this.portal.fireEvent('beforedrop', dropEvent) !== false){\r
+ if (!values || (values == '')) { return; }\r
\r
- dd.proxy.getProxy().remove();\r
- dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);\r
- \r
- if(pos !== false){\r
- if(c == dd.panel.ownerCt && (c.items.items.indexOf(dd.panel) <= pos)){\r
- pos++;\r
- }\r
- c.insert(pos, dd.panel);\r
- }else{\r
- c.add(dd.panel);\r
- }\r
- \r
- c.doLayout();\r
+ if (!Ext.isArray(values)) { values = values.split(this.delimiter); }\r
+ for (var i=0; i<values.length; i++) {\r
+ index = this.view.store.indexOf(this.view.store.query(this.valueField,\r
+ new RegExp('^' + values[i] + '$', "i")).itemAt(0));\r
+ selections.push(index);\r
+ }\r
+ this.view.select(selections);\r
+ this.hiddenField.dom.value = this.getValue();\r
+ this.validate();\r
+ },\r
\r
- this.portal.fireEvent('drop', dropEvent);\r
+ // inherit docs\r
+ reset : function() {\r
+ this.setValue('');\r
+ },\r
\r
- // scroll position is lost on drop, fix it\r
- var st = this.scrollPos.top;\r
- if(st){\r
- var d = this.portal.body.dom;\r
- setTimeout(function(){\r
- d.scrollTop = st;\r
- }, 10);\r
- }\r
+ // inherit docs\r
+ getRawValue: function(valueField) {\r
+ var tmp = this.getValue(valueField);\r
+ if (tmp.length) {\r
+ tmp = tmp.split(this.delimiter);\r
+ }\r
+ else {\r
+ tmp = [];\r
+ }\r
+ return tmp;\r
+ },\r
+\r
+ // inherit docs\r
+ setRawValue: function(values){\r
+ setValue(values);\r
+ },\r
\r
+ // inherit docs\r
+ validateValue : function(value){\r
+ if (value.length < 1) { // if it has no value\r
+ if (this.allowBlank) {\r
+ this.clearInvalid();\r
+ return true;\r
+ } else {\r
+ this.markInvalid(this.blankText);\r
+ return false;\r
+ }\r
}\r
- delete this.lastPos;\r
+ if (value.length < this.minSelections) {\r
+ this.markInvalid(String.format(this.minSelectionsText, this.minSelections));\r
+ return false;\r
+ }\r
+ if (value.length > this.maxSelections) {\r
+ this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));\r
+ return false;\r
+ }\r
+ return true;\r
},\r
\r
- // internal cache of body and column coords\r
- getGrid : function(){\r
- var box = this.portal.bwrap.getBox();\r
- box.columnX = [];\r
- this.portal.items.each(function(c){\r
- box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});\r
- });\r
- return box;\r
+ // inherit docs\r
+ disable: function(){\r
+ this.disabled = true;\r
+ this.hiddenField.dom.disabled = true;\r
+ this.fs.disable();\r
},\r
\r
- // unregister the dropzone from ScrollManager\r
- unreg: function() {\r
- //Ext.dd.ScrollManager.unregister(this.portal.body);\r
- Ext.ux.Portal.DropZone.superclass.unreg.call(this);\r
+ // inherit docs\r
+ enable: function(){\r
+ this.disabled = false;\r
+ this.hiddenField.dom.disabled = false;\r
+ this.fs.enable();\r
+ },\r
+\r
+ // inherit docs\r
+ destroy: function(){\r
+ Ext.destroy(this.fs, this.dragZone, this.dropZone);\r
+ Ext.ux.form.MultiSelect.superclass.destroy.call(this);\r
}\r
});\r
-Ext.ux.PortalColumn = Ext.extend(Ext.Container, {\r
- layout : 'anchor',\r
- //autoEl : 'div',//already defined by Ext.Component\r
- defaultType : 'portlet',\r
- cls : 'x-portal-column'\r
-});\r
\r
-Ext.reg('portalcolumn', Ext.ux.PortalColumn);\r
-Ext.ux.Portlet = Ext.extend(Ext.Panel, {\r
- anchor : '100%',\r
- frame : true,\r
- collapsible : true,\r
- draggable : true,\r
- cls : 'x-portlet'\r
-});\r
\r
-Ext.reg('portlet', Ext.ux.Portlet);\r
-/**
-* @class Ext.ux.ProgressBarPager
-* @extends Object
-* Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
-*
-* @ptype progressbarpager
-* @constructor
-* Create a new ItemSelector
-* @param {Object} config Configuration options
-* @xtype itemselector
-*/
-Ext.ux.ProgressBarPager = Ext.extend(Object, {
- /**
- * @cfg {Integer} progBarWidth
- * <p>The default progress bar width. Default is 225.</p>
- */
- progBarWidth : 225,
- /**
- * @cfg {String} defaultText
- * <p>The text to display while the store is loading. Default is 'Loading...'</p>
- */
- defaultText : 'Loading...',
- /**
- * @cfg {Object} defaultAnimCfg
- * <p>A {@link Ext.Fx Ext.Fx} configuration object. Default is { duration : 1, easing : 'bounceOut' }.</p>
- */
- defaultAnimCfg : {
- duration : 1,
- easing : 'bounceOut'
- },
- constructor : function(config) {
- if (config) {
- Ext.apply(this, config);
- }
- },
- //public
- init : function (parent) {
-
- if(parent.displayInfo){
- this.parent = parent;
- var ind = parent.items.indexOf(parent.displayItem);
- parent.remove(parent.displayItem, true);
- this.progressBar = new Ext.ProgressBar({
- text : this.defaultText,
- width : this.progBarWidth,
- animate : this.defaultAnimCfg
- });
-
- parent.displayItem = this.progressBar;
-
- parent.add(parent.displayItem);
- parent.doLayout();
- Ext.apply(parent, this.parentOverrides);
-
- this.progressBar.on('render', function(pb) {
- pb.el.applyStyles('cursor:pointer');
-
- pb.el.on('click', this.handleProgressBarClick, this);
- }, this);
-
-
- // Remove the click handler from the
- this.progressBar.on({
- scope : this,
- beforeDestroy : function() {
- this.progressBar.el.un('click', this.handleProgressBarClick, this);
- }
- });
-
- }
-
- },
- // private
- // This method handles the click for the progress bar
- handleProgressBarClick : function(e){
- var parent = this.parent;
- var displayItem = parent.displayItem;
-
- var box = this.progressBar.getBox();
- var xy = e.getXY();
- var position = xy[0]-box.x;
- var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize);
-
- var newpage = Math.ceil(position/(displayItem.width/pages));
- parent.changePage(newpage);
- },
-
- // private, overriddes
- parentOverrides : {
- // private
- // This method updates the information via the progress bar.
- updateInfo : function(){
- if(this.displayItem){
- var count = this.store.getCount();
- var pgData = this.getPageData();
- var pageNum = this.readPage(pgData);
-
- var msg = count == 0 ?
- this.emptyMsg :
- String.format(
+Ext.reg('multiselect', Ext.ux.form.MultiSelect);\r
+\r
+//backwards compat\r
+Ext.ux.Multiselect = Ext.ux.form.MultiSelect;\r
+\r
+\r
+Ext.ux.form.MultiSelect.DragZone = function(ms, config){\r
+ this.ms = ms;\r
+ this.view = ms.view;\r
+ var ddGroup = config.ddGroup || 'MultiselectDD';\r
+ var dd;\r
+ if (Ext.isArray(ddGroup)){\r
+ dd = ddGroup.shift();\r
+ } else {\r
+ dd = ddGroup;\r
+ ddGroup = null;\r
+ }\r
+ Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });\r
+ this.setDraggable(ddGroup);\r
+};\r
+\r
+Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {\r
+ onInitDrag : function(x, y){\r
+ var el = Ext.get(this.dragData.ddel.cloneNode(true));\r
+ this.proxy.update(el.dom);\r
+ el.setWidth(el.child('em').getWidth());\r
+ this.onStartDrag(x, y);\r
+ return true;\r
+ },\r
+\r
+ // private\r
+ collectSelection: function(data) {\r
+ data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();\r
+ var i = 0;\r
+ this.view.store.each(function(rec){\r
+ if (this.view.isSelected(i)) {\r
+ var n = this.view.getNode(i);\r
+ var dragNode = n.cloneNode(true);\r
+ dragNode.id = Ext.id();\r
+ data.ddel.appendChild(dragNode);\r
+ data.records.push(this.view.store.getAt(i));\r
+ data.viewNodes.push(n);\r
+ }\r
+ i++;\r
+ }, this);\r
+ },\r
+\r
+ // override\r
+ onEndDrag: function(data, e) {\r
+ var d = Ext.get(this.dragData.ddel);\r
+ if (d && d.hasClass("multi-proxy")) {\r
+ d.remove();\r
+ }\r
+ },\r
+\r
+ // override\r
+ getDragData: function(e){\r
+ var target = this.view.findItemFromChild(e.getTarget());\r
+ if(target) {\r
+ if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {\r
+ this.view.select(target);\r
+ this.ms.setValue(this.ms.getValue());\r
+ }\r
+ if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;\r
+ var dragData = {\r
+ sourceView: this.view,\r
+ viewNodes: [],\r
+ records: []\r
+ };\r
+ if (this.view.getSelectionCount() == 1) {\r
+ var i = this.view.getSelectedIndexes()[0];\r
+ var n = this.view.getNode(i);\r
+ dragData.viewNodes.push(dragData.ddel = n);\r
+ dragData.records.push(this.view.store.getAt(i));\r
+ dragData.repairXY = Ext.fly(n).getXY();\r
+ } else {\r
+ dragData.ddel = document.createElement('div');\r
+ dragData.ddel.className = 'multi-proxy';\r
+ this.collectSelection(dragData);\r
+ }\r
+ return dragData;\r
+ }\r
+ return false;\r
+ },\r
+\r
+ // override the default repairXY.\r
+ getRepairXY : function(e){\r
+ return this.dragData.repairXY;\r
+ },\r
+\r
+ // private\r
+ setDraggable: function(ddGroup){\r
+ if (!ddGroup) return;\r
+ if (Ext.isArray(ddGroup)) {\r
+ Ext.each(ddGroup, this.setDraggable, this);\r
+ return;\r
+ }\r
+ this.addToGroup(ddGroup);\r
+ }\r
+});\r
+\r
+Ext.ux.form.MultiSelect.DropZone = function(ms, config){\r
+ this.ms = ms;\r
+ this.view = ms.view;\r
+ var ddGroup = config.ddGroup || 'MultiselectDD';\r
+ var dd;\r
+ if (Ext.isArray(ddGroup)){\r
+ dd = ddGroup.shift();\r
+ } else {\r
+ dd = ddGroup;\r
+ ddGroup = null;\r
+ }\r
+ Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });\r
+ this.setDroppable(ddGroup);\r
+};\r
+\r
+Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {\r
+ /**\r
+ * Part of the Ext.dd.DropZone interface. If no target node is found, the\r
+ * whole Element becomes the target, and this causes the drop gesture to append.\r
+ */\r
+ getTargetFromEvent : function(e) {\r
+ var target = e.getTarget();\r
+ return target;\r
+ },\r
+\r
+ // private\r
+ getDropPoint : function(e, n, dd){\r
+ if (n == this.ms.fs.body.dom) { return "below"; }\r
+ var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;\r
+ var c = t + (b - t) / 2;\r
+ var y = Ext.lib.Event.getPageY(e);\r
+ if(y <= c) {\r
+ return "above";\r
+ }else{\r
+ return "below";\r
+ }\r
+ },\r
+\r
+ // private\r
+ isValidDropPoint: function(pt, n, data) {\r
+ if (!data.viewNodes || (data.viewNodes.length != 1)) {\r
+ return true;\r
+ }\r
+ var d = data.viewNodes[0];\r
+ if (d == n) {\r
+ return false;\r
+ }\r
+ if ((pt == "below") && (n.nextSibling == d)) {\r
+ return false;\r
+ }\r
+ if ((pt == "above") && (n.previousSibling == d)) {\r
+ return false;\r
+ }\r
+ return true;\r
+ },\r
+\r
+ // override\r
+ onNodeEnter : function(n, dd, e, data){\r
+ return false;\r
+ },\r
+\r
+ // override\r
+ onNodeOver : function(n, dd, e, data){\r
+ var dragElClass = this.dropNotAllowed;\r
+ var pt = this.getDropPoint(e, n, dd);\r
+ if (this.isValidDropPoint(pt, n, data)) {\r
+ if (this.ms.appendOnly) {\r
+ return "x-tree-drop-ok-below";\r
+ }\r
+\r
+ // set the insert point style on the target node\r
+ if (pt) {\r
+ var targetElClass;\r
+ if (pt == "above"){\r
+ dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";\r
+ targetElClass = "x-view-drag-insert-above";\r
+ } else {\r
+ dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";\r
+ targetElClass = "x-view-drag-insert-below";\r
+ }\r
+ if (this.lastInsertClass != targetElClass){\r
+ Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);\r
+ this.lastInsertClass = targetElClass;\r
+ }\r
+ }\r
+ }\r
+ return dragElClass;\r
+ },\r
+\r
+ // private\r
+ onNodeOut : function(n, dd, e, data){\r
+ this.removeDropIndicators(n);\r
+ },\r
+\r
+ // private\r
+ onNodeDrop : function(n, dd, e, data){\r
+ if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {\r
+ return false;\r
+ }\r
+ var pt = this.getDropPoint(e, n, dd);\r
+ if (n != this.ms.fs.body.dom)\r
+ n = this.view.findItemFromChild(n);\r
+\r
+ if(this.ms.appendOnly) {\r
+ insertAt = this.view.store.getCount();\r
+ } else {\r
+ insertAt = n == this.ms.fs.body.dom ? this.view.store.getCount() - 1 : this.view.indexOf(n);\r
+ if (pt == "below") {\r
+ insertAt++;\r
+ }\r
+ }\r
+\r
+ var dir = false;\r
+\r
+ // Validate if dragging within the same MultiSelect\r
+ if (data.sourceView == this.view) {\r
+ // If the first element to be inserted below is the target node, remove it\r
+ if (pt == "below") {\r
+ if (data.viewNodes[0] == n) {\r
+ data.viewNodes.shift();\r
+ }\r
+ } else { // If the last element to be inserted above is the target node, remove it\r
+ if (data.viewNodes[data.viewNodes.length - 1] == n) {\r
+ data.viewNodes.pop();\r
+ }\r
+ }\r
+\r
+ // Nothing to drop...\r
+ if (!data.viewNodes.length) {\r
+ return false;\r
+ }\r
+\r
+ // If we are moving DOWN, then because a store.remove() takes place first,\r
+ // the insertAt must be decremented.\r
+ if (insertAt > this.view.store.indexOf(data.records[0])) {\r
+ dir = 'down';\r
+ insertAt--;\r
+ }\r
+ }\r
+\r
+ for (var i = 0; i < data.records.length; i++) {\r
+ var r = data.records[i];\r
+ if (data.sourceView) {\r
+ data.sourceView.store.remove(r);\r
+ }\r
+ this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);\r
+ var si = this.view.store.sortInfo;\r
+ if(si){\r
+ this.view.store.sort(si.field, si.direction);\r
+ }\r
+ }\r
+ return true;\r
+ },\r
+\r
+ // private\r
+ removeDropIndicators : function(n){\r
+ if(n){\r
+ Ext.fly(n).removeClass([\r
+ "x-view-drag-insert-above",\r
+ "x-view-drag-insert-left",\r
+ "x-view-drag-insert-right",\r
+ "x-view-drag-insert-below"]);\r
+ this.lastInsertClass = "_noclass";\r
+ }\r
+ },\r
+\r
+ // private\r
+ setDroppable: function(ddGroup){\r
+ if (!ddGroup) return;\r
+ if (Ext.isArray(ddGroup)) {\r
+ Ext.each(ddGroup, this.setDroppable, this);\r
+ return;\r
+ }\r
+ this.addToGroup(ddGroup);\r
+ }\r
+});\r
+
+/* Fix for Opera, which does not seem to include the map function on Array's */
+if (!Array.prototype.map) {
+ Array.prototype.map = function(fun){
+ var len = this.length;
+ if (typeof fun != 'function') {
+ throw new TypeError();
+ }
+ var res = new Array(len);
+ var thisp = arguments[1];
+ for (var i = 0; i < len; i++) {
+ if (i in this) {
+ res[i] = fun.call(thisp, this[i], i, this);
+ }
+ }
+ return res;
+ };
+}
+
+Ext.ns('Ext.ux.data');
+
+/**
+ * @class Ext.ux.data.PagingMemoryProxy
+ * @extends Ext.data.MemoryProxy
+ * <p>Paging Memory Proxy, allows to use paging grid with in memory dataset</p>
+ */
+Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
+ constructor : function(data){
+ Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
+ this.data = data;
+ },
+ doRequest : function(action, rs, params, reader, callback, scope, options){
+ params = params ||
+ {};
+ var result;
+ try {
+ result = reader.readRecords(this.data);
+ }
+ catch (e) {
+ this.fireEvent('loadexception', this, options, null, e);
+ callback.call(scope, null, options, false);
+ return;
+ }
+
+ // filtering
+ if (params.filter !== undefined) {
+ result.records = result.records.filter(function(el){
+ if (typeof(el) == 'object') {
+ var att = params.filterCol || 0;
+ return String(el.data[att]).match(params.filter) ? true : false;
+ }
+ else {
+ return String(el).match(params.filter) ? true : false;
+ }
+ });
+ result.totalRecords = result.records.length;
+ }
+
+ // sorting
+ if (params.sort !== undefined) {
+ // use integer as params.sort to specify column, since arrays are not named
+ // params.sort=0; would also match a array without columns
+ var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
+ var fn = function(v1, v2){
+ return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
+ };
+ result.records.sort(function(a, b){
+ var v = 0;
+ if (typeof(a) == 'object') {
+ v = fn(a.data[params.sort], b.data[params.sort]) * dir;
+ }
+ else {
+ v = fn(a, b) * dir;
+ }
+ if (v == 0) {
+ v = (a.index < b.index ? -1 : 1);
+ }
+ return v;
+ });
+ }
+ // paging (use undefined cause start can also be 0 (thus false))
+ if (params.start !== undefined && params.limit !== undefined) {
+ result.records = result.records.slice(params.start, params.start + params.limit);
+ }
+ callback.call(scope, result, options, true);
+ }
+});
+
+//backwards compat.
+Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;
+Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {\r
+ minHeight: 0,\r
+ maxHeight:10000000,\r
+\r
+ constructor: function(config){\r
+ Ext.apply(this, config);\r
+ this.events = {};\r
+ Ext.ux.PanelResizer.superclass.constructor.call(this, config);\r
+ },\r
+\r
+ init : function(p){\r
+ this.panel = p;\r
+\r
+ if(this.panel.elements.indexOf('footer')==-1){\r
+ p.elements += ',footer';\r
+ }\r
+ p.on('render', this.onRender, this);\r
+ },\r
+\r
+ onRender : function(p){\r
+ this.handle = p.footer.createChild({cls:'x-panel-resize'});\r
+\r
+ this.tracker = new Ext.dd.DragTracker({\r
+ onStart: this.onDragStart.createDelegate(this),\r
+ onDrag: this.onDrag.createDelegate(this),\r
+ onEnd: this.onDragEnd.createDelegate(this),\r
+ tolerance: 3,\r
+ autoStart: 300\r
+ });\r
+ this.tracker.initEl(this.handle);\r
+ p.on('beforedestroy', this.tracker.destroy, this.tracker);\r
+ },\r
+\r
+ // private\r
+ onDragStart: function(e){\r
+ this.dragging = true;\r
+ this.startHeight = this.panel.el.getHeight();\r
+ this.fireEvent('dragstart', this, e);\r
+ },\r
+\r
+ // private\r
+ onDrag: function(e){\r
+ this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));\r
+ this.fireEvent('drag', this, e);\r
+ },\r
+\r
+ // private\r
+ onDragEnd: function(e){\r
+ this.dragging = false;\r
+ this.fireEvent('dragend', this, e);\r
+ }\r
+});\r
+Ext.preg('panelresizer', Ext.ux.PanelResizer);Ext.ux.Portal = Ext.extend(Ext.Panel, {\r
+ layout : 'column',\r
+ autoScroll : true,\r
+ cls : 'x-portal',\r
+ defaultType : 'portalcolumn',\r
+ \r
+ initComponent : function(){\r
+ Ext.ux.Portal.superclass.initComponent.call(this);\r
+ this.addEvents({\r
+ validatedrop:true,\r
+ beforedragover:true,\r
+ dragover:true,\r
+ beforedrop:true,\r
+ drop:true\r
+ });\r
+ },\r
+\r
+ initEvents : function(){\r
+ Ext.ux.Portal.superclass.initEvents.call(this);\r
+ this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);\r
+ },\r
+ \r
+ beforeDestroy : function() {\r
+ if(this.dd){\r
+ this.dd.unreg();\r
+ }\r
+ Ext.ux.Portal.superclass.beforeDestroy.call(this);\r
+ }\r
+});\r
+\r
+Ext.reg('portal', Ext.ux.Portal);\r
+\r
+\r
+Ext.ux.Portal.DropZone = function(portal, cfg){\r
+ this.portal = portal;\r
+ Ext.dd.ScrollManager.register(portal.body);\r
+ Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);\r
+ portal.body.ddScrollConfig = this.ddScrollConfig;\r
+};\r
+\r
+Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {\r
+ ddScrollConfig : {\r
+ vthresh: 50,\r
+ hthresh: -1,\r
+ animate: true,\r
+ increment: 200\r
+ },\r
+\r
+ createEvent : function(dd, e, data, col, c, pos){\r
+ return {\r
+ portal: this.portal,\r
+ panel: data.panel,\r
+ columnIndex: col,\r
+ column: c,\r
+ position: pos,\r
+ data: data,\r
+ source: dd,\r
+ rawEvent: e,\r
+ status: this.dropAllowed\r
+ };\r
+ },\r
+\r
+ notifyOver : function(dd, e, data){\r
+ var xy = e.getXY(), portal = this.portal, px = dd.proxy;\r
+\r
+ // case column widths\r
+ if(!this.grid){\r
+ this.grid = this.getGrid();\r
+ }\r
+\r
+ // handle case scroll where scrollbars appear during drag\r
+ var cw = portal.body.dom.clientWidth;\r
+ if(!this.lastCW){\r
+ this.lastCW = cw;\r
+ }else if(this.lastCW != cw){\r
+ this.lastCW = cw;\r
+ portal.doLayout();\r
+ this.grid = this.getGrid();\r
+ }\r
+\r
+ // determine column\r
+ var col = 0, xs = this.grid.columnX, cmatch = false;\r
+ for(var len = xs.length; col < len; col++){\r
+ if(xy[0] < (xs[col].x + xs[col].w)){\r
+ cmatch = true;\r
+ break;\r
+ }\r
+ }\r
+ // no match, fix last index\r
+ if(!cmatch){\r
+ col--;\r
+ }\r
+\r
+ // find insert position\r
+ var p, match = false, pos = 0,\r
+ c = portal.items.itemAt(col),\r
+ items = c.items.items, overSelf = false;\r
+\r
+ for(var len = items.length; pos < len; pos++){\r
+ p = items[pos];\r
+ var h = p.el.getHeight();\r
+ if(h === 0){\r
+ overSelf = true;\r
+ }\r
+ else if((p.el.getY()+(h/2)) > xy[1]){\r
+ match = true;\r
+ break;\r
+ }\r
+ }\r
+\r
+ pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);\r
+ var overEvent = this.createEvent(dd, e, data, col, c, pos);\r
+\r
+ if(portal.fireEvent('validatedrop', overEvent) !== false &&\r
+ portal.fireEvent('beforedragover', overEvent) !== false){\r
+\r
+ // make sure proxy width is fluid\r
+ px.getProxy().setWidth('auto');\r
+\r
+ if(p){\r
+ px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);\r
+ }else{\r
+ px.moveProxy(c.el.dom, null);\r
+ }\r
+\r
+ this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};\r
+ this.scrollPos = portal.body.getScroll();\r
+\r
+ portal.fireEvent('dragover', overEvent);\r
+\r
+ return overEvent.status;\r
+ }else{\r
+ return overEvent.status;\r
+ }\r
+\r
+ },\r
+\r
+ notifyOut : function(){\r
+ delete this.grid;\r
+ },\r
+\r
+ notifyDrop : function(dd, e, data){\r
+ delete this.grid;\r
+ if(!this.lastPos){\r
+ return;\r
+ }\r
+ var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;\r
+\r
+ var dropEvent = this.createEvent(dd, e, data, col, c,\r
+ pos !== false ? pos : c.items.getCount());\r
+\r
+ if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&\r
+ this.portal.fireEvent('beforedrop', dropEvent) !== false){\r
+\r
+ dd.proxy.getProxy().remove();\r
+ dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);\r
+ \r
+ if(pos !== false){\r
+ if(c == dd.panel.ownerCt && (c.items.items.indexOf(dd.panel) <= pos)){\r
+ pos++;\r
+ }\r
+ c.insert(pos, dd.panel);\r
+ }else{\r
+ c.add(dd.panel);\r
+ }\r
+ \r
+ c.doLayout();\r
+\r
+ this.portal.fireEvent('drop', dropEvent);\r
+\r
+ // scroll position is lost on drop, fix it\r
+ var st = this.scrollPos.top;\r
+ if(st){\r
+ var d = this.portal.body.dom;\r
+ setTimeout(function(){\r
+ d.scrollTop = st;\r
+ }, 10);\r
+ }\r
+\r
+ }\r
+ delete this.lastPos;\r
+ },\r
+\r
+ // internal cache of body and column coords\r
+ getGrid : function(){\r
+ var box = this.portal.bwrap.getBox();\r
+ box.columnX = [];\r
+ this.portal.items.each(function(c){\r
+ box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});\r
+ });\r
+ return box;\r
+ },\r
+\r
+ // unregister the dropzone from ScrollManager\r
+ unreg: function() {\r
+ //Ext.dd.ScrollManager.unregister(this.portal.body);\r
+ Ext.ux.Portal.DropZone.superclass.unreg.call(this);\r
+ }\r
+});\r
+Ext.ux.PortalColumn = Ext.extend(Ext.Container, {\r
+ layout : 'anchor',\r
+ //autoEl : 'div',//already defined by Ext.Component\r
+ defaultType : 'portlet',\r
+ cls : 'x-portal-column'\r
+});\r
+\r
+Ext.reg('portalcolumn', Ext.ux.PortalColumn);\r
+Ext.ux.Portlet = Ext.extend(Ext.Panel, {\r
+ anchor : '100%',\r
+ frame : true,\r
+ collapsible : true,\r
+ draggable : true,\r
+ cls : 'x-portlet'\r
+});\r
+\r
+Ext.reg('portlet', Ext.ux.Portlet);\r
+/**
+* @class Ext.ux.ProgressBarPager
+* @extends Object
+* Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
+*
+* @ptype progressbarpager
+* @constructor
+* Create a new ItemSelector
+* @param {Object} config Configuration options
+* @xtype itemselector
+*/
+Ext.ux.ProgressBarPager = Ext.extend(Object, {
+ /**
+ * @cfg {Integer} progBarWidth
+ * <p>The default progress bar width. Default is 225.</p>
+ */
+ progBarWidth : 225,
+ /**
+ * @cfg {String} defaultText
+ * <p>The text to display while the store is loading. Default is 'Loading...'</p>
+ */
+ defaultText : 'Loading...',
+ /**
+ * @cfg {Object} defaultAnimCfg
+ * <p>A {@link Ext.Fx Ext.Fx} configuration object. Default is { duration : 1, easing : 'bounceOut' }.</p>
+ */
+ defaultAnimCfg : {
+ duration : 1,
+ easing : 'bounceOut'
+ },
+ constructor : function(config) {
+ if (config) {
+ Ext.apply(this, config);
+ }
+ },
+ //public
+ init : function (parent) {
+
+ if(parent.displayInfo){
+ this.parent = parent;
+ var ind = parent.items.indexOf(parent.displayItem);
+ parent.remove(parent.displayItem, true);
+ this.progressBar = new Ext.ProgressBar({
+ text : this.defaultText,
+ width : this.progBarWidth,
+ animate : this.defaultAnimCfg
+ });
+
+ parent.displayItem = this.progressBar;
+
+ parent.add(parent.displayItem);
+ parent.doLayout();
+ Ext.apply(parent, this.parentOverrides);
+
+ this.progressBar.on('render', function(pb) {
+ pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
+ }, this, {single: true});
+
+ }
+
+ },
+ // private
+ // This method handles the click for the progress bar
+ handleProgressBarClick : function(e){
+ var parent = this.parent,
+ displayItem = parent.displayItem,
+ box = this.progressBar.getBox(),
+ xy = e.getXY(),
+ position = xy[0]-box.x,
+ pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
+ newpage = Math.ceil(position/(displayItem.width/pages));
+
+ parent.changePage(newpage);
+ },
+
+ // private, overriddes
+ parentOverrides : {
+ // private
+ // This method updates the information via the progress bar.
+ updateInfo : function(){
+ if(this.displayItem){
+ var count = this.store.getCount(),
+ pgData = this.getPageData(),
+ pageNum = this.readPage(pgData),
+ msg = count == 0 ?
+ this.emptyMsg :
+ String.format(
this.displayMsg,
this.cursor+1, this.cursor+count, this.store.getTotalCount()
);
/**
* @class Ext.ux.grid.RowEditor
- * @extends Ext.Panel
+ * @extends Ext.Panel
* Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid.
* A validation mode may be enabled which uses AnchorTips to notify the user of all
* validation errors at once.
- *
+ *
* @ptype roweditor
*/
Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
focusDelay: 250,
errorSummary: true,
+ saveText: 'Save',
+ cancelText: 'Cancel',
+ commitChangesText: 'You need to commit or cancel your changes',
+ errorText: 'Errors',
+
defaults: {
normalWidth: true
},
* @param {Number} rowIndex The rowIndex of the row just edited
*/
'beforeedit',
+ /**
+ * @event canceledit
+ * Fired when the editor is cancelled.
+ * @param {Ext.ux.grid.RowEditor} roweditor This object
+ * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
+ */
+ 'canceledit',
/**
* @event validateedit
* Fired after a row is edited and passes validation.
columnresize: this.verifyLayout,
columnmove: this.refreshFields,
reconfigure: this.refreshFields,
- destroy : this.destroy,
+ beforedestroy : this.beforedestroy,
+ destroy : this.destroy,
bodyscroll: {
buffer: 250,
fn: this.positionButtons
grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
},
+ beforedestroy: function() {
+ this.grid.getStore().un('remove', this.onStoreRemove, this);
+ this.stopEditing(false);
+ Ext.destroy(this.btns);
+ },
+
refreshFields: function(){
this.initFields();
this.verifyLayout();
startEditing: function(rowIndex, doFocus){
if(this.editing && this.isDirty()){
- this.showTooltip('You need to commit or cancel your changes');
+ this.showTooltip(this.commitChangesText);
return;
}
- this.editing = true;
- if(typeof rowIndex == 'object'){
+ if(Ext.isObject(rowIndex)){
rowIndex = this.grid.getStore().indexOf(rowIndex);
}
if(this.fireEvent('beforeedit', this, rowIndex) !== false){
- var g = this.grid, view = g.getView();
- var row = view.getRow(rowIndex);
- var record = g.store.getAt(rowIndex);
+ this.editing = true;
+ var g = this.grid, view = g.getView(),
+ row = view.getRow(rowIndex),
+ record = g.store.getAt(rowIndex);
+
this.record = record;
this.rowIndex = rowIndex;
this.values = {};
val = this.preEditValue(record, cm.getDataIndex(i));
f = fields[i];
f.setValue(val);
- this.values[f.id] = val || '';
+ this.values[f.id] = Ext.isEmpty(val) ? '' : val;
}
this.verifyLayout(true);
if(!this.isVisible()){
}
if(saveChanges === false || !this.isValid()){
this.hide();
+ this.fireEvent('canceledit', this, saveChanges === false);
return;
}
- var changes = {}, r = this.record, hasChange = false;
- var cm = this.grid.colModel, fields = this.items.items;
+ var changes = {},
+ r = this.record,
+ hasChange = false,
+ cm = this.grid.colModel,
+ fields = this.items.items;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
if(!cm.isHidden(i)){
var dindex = cm.getDataIndex(i);
if(!Ext.isEmpty(dindex)){
- var oldValue = r.data[dindex];
- var value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
+ var oldValue = r.data[dindex],
+ value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
if(String(oldValue) !== String(value)){
changes[dindex] = value;
hasChange = true;
}
if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
r.beginEdit();
- for(var k in changes){
- if(changes.hasOwnProperty(k)){
- r.set(k, changes[k]);
- }
- }
+ Ext.iterate(changes, function(name, value){
+ r.set(name, value);
+ });
r.endEdit();
this.fireEvent('afteredit', this, changes, r, this.rowIndex);
}
verifyLayout: function(force){
if(this.el && (this.isVisible() || force === true)){
var row = this.grid.getView().getRow(this.rowIndex);
- this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + (Ext.isBorderBox ? 9 : 0) : undefined);
+ this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + 9 : undefined);
var cm = this.grid.colModel, fields = this.items.items;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
if(!cm.isHidden(i)){
var adjust = 0;
- if(i === 0){
- adjust += 0; // outer padding
- }
if(i === (len - 1)){
adjust += 3; // outer padding
} else{
var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
this.removeAll(false);
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- var c = cm.getColumnAt(i);
- var ed = c.getEditor();
+ var c = cm.getColumnAt(i),
+ ed = c.getEditor();
if(!ed){
ed = c.displayEditor || new Ext.form.DisplayField();
+ }else{
+ ed = ed.field;
}
if(i == 0){
ed.margins = pm('0 1 2 1');
ref: 'saveBtn',
itemId: 'saveBtn',
xtype: 'button',
- text: this.saveText || 'Save',
+ text: this.saveText,
width: this.minButtonWidth,
handler: this.stopEditing.createDelegate(this, [true])
}, {
xtype: 'button',
- text: this.cancelText || 'Cancel',
+ text: this.cancelText,
width: this.minButtonWidth,
handler: this.stopEditing.createDelegate(this, [false])
}]
positionButtons: function(){
if(this.btns){
- var h = this.el.dom.clientHeight;
- var view = this.grid.getView();
- var scroll = view.scroller.dom.scrollLeft;
- var width = view.mainBody.getWidth();
- var bw = this.btns.getWidth();
+ var g = this.grid,
+ h = this.el.dom.clientHeight,
+ view = g.getView(),
+ scroll = view.scroller.dom.scrollLeft,
+ bw = this.btns.getWidth(),
+ width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
+
this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
}
},
doFocus: function(pt){
if(this.isVisible()){
- var index = 0;
+ var index = 0,
+ cm = this.grid.getColumnModel(),
+ c,
+ ed;
if(pt){
index = this.getTargetColumnIndex(pt);
}
- var cm = this.grid.getColumnModel();
for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
- var c = cm.getColumnAt(i);
- if(!c.hidden && c.getEditor()){
- c.getEditor().focus();
+ c = cm.getColumnAt(i);
+ ed = c.getEditor();
+ if(!c.hidden && ed){
+ ed.field.focus();
break;
}
}
},
getTargetColumnIndex: function(pt){
- var grid = this.grid, v = grid.view;
- var x = pt.left;
- var cms = grid.colModel.config;
- var i = 0, match = false;
+ var grid = this.grid,
+ v = grid.view,
+ x = pt.left,
+ cms = grid.colModel.config,
+ i = 0,
+ match = false;
for(var len = cms.length, c; c = cms[i]; i++){
if(!c.hidden){
if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
maxWidth: 600,
cls: 'errorTip',
width: 300,
- title: 'Errors',
+ title: this.errorText,
autoHide: false,
anchor: 'left',
anchorToTarget: true,
mouseOffset: [40,0]
});
}
- t.initTarget(this.items.last().getEl());
- if(!t.rendered){
+ var v = this.grid.getView(),
+ top = parseInt(this.el.dom.style.top, 10),
+ scroll = v.scroller.dom.scrollTop,
+ h = this.el.getHeight();
+
+ if(top + h >= scroll){
+ t.initTarget(this.items.last().getEl());
+ if(!t.rendered){
+ t.show();
+ t.hide();
+ }
+ t.body.update(msg);
+ t.doAutoWidth(20);
t.show();
+ }else if(t.rendered){
t.hide();
}
- t.body.update(msg);
- t.doAutoWidth();
- t.show();
},
getErrorText: function(){
var data = ['<ul>'];
this.items.each(function(f){
if(!f.isValid(true)){
- data.push('<li>', f.activeError, '</li>');
+ data.push('<li>', f.getActiveError(), '</li>');
}
});
data.push('</ul>');
}
});
Ext.preg('roweditor', Ext.ux.grid.RowEditor);
-
-Ext.override(Ext.form.Field, {
- markInvalid : function(msg){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
- msg = msg || this.invalidText;
-
- var mt = this.getMessageHandler();
- if(mt){
- mt.mark(this, msg);
- }else if(this.msgTarget){
- this.el.addClass(this.invalidClass);
- var t = Ext.getDom(this.msgTarget);
- if(t){
- t.innerHTML = msg;
- t.style.display = this.msgDisplay;
- }
- }
- this.activeError = msg;
- this.fireEvent('invalid', this, msg);
- }
-});
-
-Ext.override(Ext.ToolTip, {
- doAutoWidth : function(){
- var bw = this.body.getTextWidth();
- if(this.title){
- bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
- }
- bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + 20;
- this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
-
- // IE7 repaint bug on initial show
- if(Ext.isIE7 && !this.repainted){
- this.el.repaint();
- this.repainted = true;
- }
- }
-});
Ext.ns('Ext.ux.grid');\r
\r
/**\r
\r
// @private \r
onDestroy: function() {\r
- this.keyNav.disable();\r
- delete this.keyNav;\r
+ if(this.keyNav){\r
+ this.keyNav.disable();\r
+ delete this.keyNav;\r
+ }\r
+ /*\r
+ * A majority of the time, the plugin will be destroyed along with the grid,\r
+ * which means the mainBody won't be available. On the off chance that the plugin\r
+ * isn't destroyed with the grid, take care of removing the listener.\r
+ */\r
var mainBody = this.grid.getView().mainBody;\r
- mainBody.un('mousedown', this.onMouseDown, this);\r
+ if(mainBody){\r
+ mainBody.un('mousedown', this.onMouseDown, this);\r
+ }\r
},\r
// @private\r
onRowDblClick: function(grid, rowIdx, e) {\r
// private
monitorResize:true,
+ type: 'row',
+
+ // private
+ allowContainerRemove: false,
+
// private
isValidParent : function(c, target){
- return c.getEl().dom.parentNode == this.innerCt.dom;
+ return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
+ },
+
+ getLayoutTargetSize : function() {
+ var target = this.container.getLayoutTarget(), ret;
+ if (target) {
+ ret = target.getViewSize();
+ ret.width -= target.getPadding('lr');
+ ret.height -= target.getPadding('tb');
+ }
+ return ret;
+ },
+
+ renderAll : function(ct, target) {
+ if(!this.innerCt){
+ // the innerCt prevents wrapping and shuffling while
+ // the container is resizing
+ this.innerCt = target.createChild({cls:'x-column-inner'});
+ this.innerCt.createChild({cls:'x-clear'});
+ }
+ Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
},
// private
onLayout : function(ct, target){
var rs = ct.items.items, len = rs.length, r, i;
- if(!this.innerCt){
- target.addClass('ux-row-layout-ct');
- this.innerCt = target.createChild({cls:'x-row-inner'});
- }
- this.renderAll(ct, this.innerCt);
+ this.renderAll(ct, target);
- var size = target.getViewSize();
+ var size = this.getLayoutTargetSize();
if(size.width < 1 && size.height < 1){ // display none?
return;
}
- var h = size.height - target.getPadding('tb'),
+ var h = size.height,
ph = h;
this.innerCt.setSize({height:h});
for(i = 0; i < len; i++){
r = rs[i];
if(!r.rowHeight){
- ph -= (r.getSize().height + r.getEl().getMargins('tb'));
+ ph -= (r.getHeight() + r.getEl().getMargins('tb'));
}
}
r.setSize({height: Math.floor(r.rowHeight*ph) - r.getEl().getMargins('tb')});
}
}
+
+ // Browsers differ as to when they account for scrollbars. We need to re-measure to see if the scrollbar
+ // spaces were accounted for properly. If not, re-layout.
+ if (Ext.isIE) {
+ if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) {
+ var ts = this.getLayoutTargetSize();
+ if (ts.width != size.width){
+ this.adjustmentPass = true;
+ this.layoutTargetSize = ts;
+ this.onLayout(ct, target);
+ }
+ }
+ }
+ delete this.adjustmentPass;
}
/**
this.store.on('load', this.calcRowsPerPage, this);\r
Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);\r
if( this.mode == 'local' ) {\r
+ this.initList();\r
this.calcRowsPerPage();\r
}\r
},\r
}\r
},\r
\r
- render : function(ct) {\r
- Ext.ux.form.SelectBox.superclass.render.apply(this, arguments);\r
- if( Ext.isSafari ) {\r
+ afterRender : function() {\r
+ Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);\r
+ if(Ext.isWebKit) {\r
this.el.swallowEvent('mousedown', true);\r
}\r
this.el.unselectable();\r
},\r
\r
focusAndSelect : function(record) {\r
- var index = typeof record === 'number' ? record : this.store.indexOf(record);\r
- this.select(index, this.isExpanded());\r
- this.onSelect(this.store.getAt(record), index, this.isExpanded());\r
+ var index = Ext.isNumber(record) ? record : this.store.indexOf(record);\r
+ this.select(index, this.isExpanded());\r
+ this.onSelect(this.store.getAt(index), index, this.isExpanded());\r
},\r
\r
calcRowsPerPage : function() {\r
});\r
Ext.ux.SlidingPager = Ext.extend(Object, {\r
init : function(pbar){\r
- Ext.each(pbar.items.getRange(2,6), function(c){\r
+ var idx = pbar.items.indexOf(pbar.inputItem);\r
+ Ext.each(pbar.items.getRange(idx - 2, idx + 2), function(c){\r
c.hide();\r
});\r
var slider = new Ext.Slider({\r
}\r
}\r
});\r
- pbar.insert(5, slider);\r
+ pbar.insert(idx + 1, slider);\r
pbar.on({\r
change: function(pb, data){\r
- slider.maxValue = data.pages;\r
+ slider.setMaxValue(data.pages);\r
slider.setValue(data.activePage);\r
- },\r
- beforedestroy: function(){\r
- slider.destroy();\r
}\r
});\r
}\r
* @xtype spinnerfield\r
*/\r
Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {\r
+ actionMode: 'wrap',\r
deferHeight: true,\r
autoSize: Ext.emptyFn,\r
onBlur: Ext.emptyFn,\r
Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));\r
},\r
\r
- onShow: function(){\r
- if (this.wrap) {\r
- this.wrap.dom.style.display = '';\r
- this.wrap.dom.style.visibility = 'visible';\r
- }\r
- },\r
-\r
- onHide: function(){\r
- this.wrap.dom.style.display = 'none';\r
- },\r
-\r
// private\r
getResizeEl: function(){\r
return this.wrap;\r
\r
doResize: function(w, h){\r
if (typeof w == 'number') {\r
- this.el.setWidth(this.field.adjustWidth('input', w - this.trigger.getWidth()));\r
+ this.el.setWidth(w - this.trigger.getWidth());\r
}\r
this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());\r
},\r
};\r
\r
//backwards compat\r
-Ext.Spotlight = Ext.ux.Spotlight;/**\r
+Ext.Spotlight = Ext.ux.Spotlight;/**
+ * @class Ext.ux.StatusBar
+ * <p>Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}. In addition to
+ * supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar
+ * provides a greedy status element that can be aligned to either side and has convenient methods for setting the
+ * status text and icon. You can also indicate that something is processing using the {@link #showBusy} method.</p>
+ * <pre><code>
+new Ext.Panel({
+ title: 'StatusBar',
+ // etc.
+ bbar: new Ext.ux.StatusBar({
+ id: 'my-status',
+
+ // defaults to use when the status is cleared:
+ defaultText: 'Default status text',
+ defaultIconCls: 'default-icon',
+
+ // values to set initially:
+ text: 'Ready',
+ iconCls: 'ready-icon',
+
+ // any standard Toolbar items:
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text']
+ })
+});
+
+// Update the status bar later in code:
+var sb = Ext.getCmp('my-status');
+sb.setStatus({
+ text: 'OK',
+ iconCls: 'ok-icon',
+ clear: true // auto-clear after a set interval
+});
+
+// Set the status bar to show that something is processing:
+sb.showBusy();
+
+// processing....
+
+sb.clearStatus(); // once completeed
+</code></pre>
+ * @extends Ext.Toolbar
+ * @constructor
+ * Creates a new StatusBar
+ * @param {Object/Array} config A config object
+ */
+Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
+ /**
+ * @cfg {String} statusAlign
+ * The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered,
+ * it creates an internal div containing the status text and icon. Any additional Toolbar items added in the
+ * StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* methods, will be
+ * rendered, in added order, to the opposite side. The status element is greedy, so it will automatically
+ * expand to take up all sapce left over by any other items. Example usage:
+ * <pre><code>
+// Create a left-aligned status bar containing a button,
+// separator and text item that will be right-aligned (default):
+new Ext.Panel({
+ title: 'StatusBar',
+ // etc.
+ bbar: new Ext.ux.StatusBar({
+ defaultText: 'Default status text',
+ id: 'status-id',
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text']
+ })
+});
+
+// By adding the statusAlign config, this will create the
+// exact same toolbar, except the status and toolbar item
+// layout will be reversed from the previous example:
+new Ext.Panel({
+ title: 'StatusBar',
+ // etc.
+ bbar: new Ext.ux.StatusBar({
+ defaultText: 'Default status text',
+ id: 'status-id',
+ statusAlign: 'right',
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text']
+ })
+});
+</code></pre>
+ */
+ /**
+ * @cfg {String} defaultText
+ * The default {@link #text} value. This will be used anytime the status bar is cleared with the
+ * <tt>useDefaults:true</tt> option (defaults to '').
+ */
+ /**
+ * @cfg {String} defaultIconCls
+ * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).
+ * This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').
+ */
+ /**
+ * @cfg {String} text
+ * A string that will be <b>initially</b> set as the status message. This string
+ * will be set as innerHTML (html tags are accepted) for the toolbar item.
+ * If not specified, the value set for <code>{@link #defaultText}</code>
+ * will be used.
+ */
+ /**
+ * @cfg {String} iconCls
+ * A CSS class that will be <b>initially</b> set as the status bar icon and is
+ * expected to provide a background image (defaults to '').
+ * Example usage:<pre><code>
+// Example CSS rule:
+.x-statusbar .x-status-custom {
+ padding-left: 25px;
+ background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
+}
+
+// Setting a default icon:
+var sb = new Ext.ux.StatusBar({
+ defaultIconCls: 'x-status-custom'
+});
+
+// Changing the icon:
+sb.setStatus({
+ text: 'New status',
+ iconCls: 'x-status-custom'
+});
+</code></pre>
+ */
+
+ /**
+ * @cfg {String} cls
+ * The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
+ */
+ cls : 'x-statusbar',
+ /**
+ * @cfg {String} busyIconCls
+ * The default <code>{@link #iconCls}</code> applied when calling
+ * <code>{@link #showBusy}</code> (defaults to <tt>'x-status-busy'</tt>).
+ * It can be overridden at any time by passing the <code>iconCls</code>
+ * argument into <code>{@link #showBusy}</code>.
+ */
+ busyIconCls : 'x-status-busy',
+ /**
+ * @cfg {String} busyText
+ * The default <code>{@link #text}</code> applied when calling
+ * <code>{@link #showBusy}</code> (defaults to <tt>'Loading...'</tt>).
+ * It can be overridden at any time by passing the <code>text</code>
+ * argument into <code>{@link #showBusy}</code>.
+ */
+ busyText : 'Loading...',
+ /**
+ * @cfg {Number} autoClear
+ * The number of milliseconds to wait after setting the status via
+ * <code>{@link #setStatus}</code> before automatically clearing the status
+ * text and icon (defaults to <tt>5000</tt>). Note that this only applies
+ * when passing the <tt>clear</tt> argument to <code>{@link #setStatus}</code>
+ * since that is the only way to defer clearing the status. This can
+ * be overridden by specifying a different <tt>wait</tt> value in
+ * <code>{@link #setStatus}</code>. Calls to <code>{@link #clearStatus}</code>
+ * always clear the status bar immediately and ignore this value.
+ */
+ autoClear : 5000,
+
+ /**
+ * @cfg {String} emptyText
+ * The text string to use if no text has been set. Defaults to
+ * <tt>' '</tt>). If there are no other items in the toolbar using
+ * an empty string (<tt>''</tt>) for this value would end up in the toolbar
+ * height collapsing since the empty string will not maintain the toolbar
+ * height. Use <tt>''</tt> if the toolbar should collapse in height
+ * vertically when no text is specified and there are no other items in
+ * the toolbar.
+ */
+ emptyText : ' ',
+
+ // private
+ activeThreadId : 0,
+
+ // private
+ initComponent : function(){
+ if(this.statusAlign=='right'){
+ this.cls += ' x-status-right';
+ }
+ Ext.ux.StatusBar.superclass.initComponent.call(this);
+ },
+
+ // private
+ afterRender : function(){
+ Ext.ux.StatusBar.superclass.afterRender.call(this);
+
+ var right = this.statusAlign == 'right';
+ this.currIconCls = this.iconCls || this.defaultIconCls;
+ this.statusEl = new Ext.Toolbar.TextItem({
+ cls: 'x-status-text ' + (this.currIconCls || ''),
+ text: this.text || this.defaultText || ''
+ });
+
+ if(right){
+ this.add('->');
+ this.add(this.statusEl);
+ }else{
+ this.insert(0, this.statusEl);
+ this.insert(1, '->');
+ }
+ this.doLayout();
+ },
+
+ /**
+ * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
+ * status that was set after a specified interval.
+ * @param {Object/String} config A config object specifying what status to set, or a string assumed
+ * to be the status text (and all other options are defaulted as explained below). A config
+ * object containing any or all of the following properties can be passed:<ul>
+ * <li><tt>text</tt> {String} : (optional) The status text to display. If not specified, any current
+ * status text will remain unchanged.</li>
+ * <li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see
+ * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.</li>
+ * <li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
+ * automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
+ * specified, the new status will not be auto-cleared and will stay until updated again or cleared using
+ * {@link #clearStatus}. If <tt>true</tt> is passed, the status will be cleared using {@link #autoClear},
+ * {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed,
+ * it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value.
+ * All other options will be defaulted as with the boolean option. To customize any other options,
+ * you can pass an object in the format:<ul>
+ * <li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing
+ * (defaults to {@link #autoClear}).</li>
+ * <li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback
+ * executes (defaults to true which fades the status out).</li>
+ * <li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls
+ * (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).</li>
+ * </ul></li></ul>
+ * Example usage:<pre><code>
+// Simple call to update the text
+statusBar.setStatus('New status');
+
+// Set the status and icon, auto-clearing with default options:
+statusBar.setStatus({
+ text: 'New status',
+ iconCls: 'x-status-custom',
+ clear: true
+});
+
+// Auto-clear with custom options:
+statusBar.setStatus({
+ text: 'New status',
+ iconCls: 'x-status-custom',
+ clear: {
+ wait: 8000,
+ anim: false,
+ useDefaults: false
+ }
+});
+</code></pre>
+ * @return {Ext.ux.StatusBar} this
+ */
+ setStatus : function(o){
+ o = o || {};
+
+ if(typeof o == 'string'){
+ o = {text:o};
+ }
+ if(o.text !== undefined){
+ this.setText(o.text);
+ }
+ if(o.iconCls !== undefined){
+ this.setIcon(o.iconCls);
+ }
+
+ if(o.clear){
+ var c = o.clear,
+ wait = this.autoClear,
+ defaults = {useDefaults: true, anim: true};
+
+ if(typeof c == 'object'){
+ c = Ext.applyIf(c, defaults);
+ if(c.wait){
+ wait = c.wait;
+ }
+ }else if(typeof c == 'number'){
+ wait = c;
+ c = defaults;
+ }else if(typeof c == 'boolean'){
+ c = defaults;
+ }
+
+ c.threadId = this.activeThreadId;
+ this.clearStatus.defer(wait, this, [c]);
+ }
+ return this;
+ },
+
+ /**
+ * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
+ * @param {Object} config (optional) A config object containing any or all of the following properties. If this
+ * object is not specified the status will be cleared using the defaults below:<ul>
+ * <li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults
+ * to false which clears immediately).</li>
+ * <li><tt>useDefaults</tt> {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and
+ * {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).</li>
+ * </ul>
+ * @return {Ext.ux.StatusBar} this
+ */
+ clearStatus : function(o){
+ o = o || {};
+
+ if(o.threadId && o.threadId !== this.activeThreadId){
+ // this means the current call was made internally, but a newer
+ // thread has set a message since this call was deferred. Since
+ // we don't want to overwrite a newer message just ignore.
+ return this;
+ }
+
+ var text = o.useDefaults ? this.defaultText : this.emptyText,
+ iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
+
+ if(o.anim){
+ // animate the statusEl Ext.Element
+ this.statusEl.el.fadeOut({
+ remove: false,
+ useDisplay: true,
+ scope: this,
+ callback: function(){
+ this.setStatus({
+ text: text,
+ iconCls: iconCls
+ });
+
+ this.statusEl.el.show();
+ }
+ });
+ }else{
+ // hide/show the el to avoid jumpy text or icon
+ this.statusEl.hide();
+ this.setStatus({
+ text: text,
+ iconCls: iconCls
+ });
+ this.statusEl.show();
+ }
+ return this;
+ },
+
+ /**
+ * Convenience method for setting the status text directly. For more flexible options see {@link #setStatus}.
+ * @param {String} text (optional) The text to set (defaults to '')
+ * @return {Ext.ux.StatusBar} this
+ */
+ setText : function(text){
+ this.activeThreadId++;
+ this.text = text || '';
+ if(this.rendered){
+ this.statusEl.setText(this.text);
+ }
+ return this;
+ },
+
+ /**
+ * Returns the current status text.
+ * @return {String} The status text
+ */
+ getText : function(){
+ return this.text;
+ },
+
+ /**
+ * Convenience method for setting the status icon directly. For more flexible options see {@link #setStatus}.
+ * See {@link #iconCls} for complete details about customizing the icon.
+ * @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)
+ * @return {Ext.ux.StatusBar} this
+ */
+ setIcon : function(cls){
+ this.activeThreadId++;
+ cls = cls || '';
+
+ if(this.rendered){
+ if(this.currIconCls){
+ this.statusEl.removeClass(this.currIconCls);
+ this.currIconCls = null;
+ }
+ if(cls.length > 0){
+ this.statusEl.addClass(cls);
+ this.currIconCls = cls;
+ }
+ }else{
+ this.currIconCls = cls;
+ }
+ return this;
+ },
+
+ /**
+ * Convenience method for setting the status text and icon to special values that are pre-configured to indicate
+ * a "busy" state, usually for loading or processing activities.
+ * @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
+ * string to use as the status text (in which case all other options for setStatus will be defaulted). Use the
+ * <tt>text</tt> and/or <tt>iconCls</tt> properties on the config to override the default {@link #busyText}
+ * and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and
+ * {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
+ * @return {Ext.ux.StatusBar} this
+ */
+ showBusy : function(o){
+ if(typeof o == 'string'){
+ o = {text:o};
+ }
+ o = Ext.applyIf(o || {}, {
+ text: this.busyText,
+ iconCls: this.busyIconCls
+ });
+ return this.setStatus(o);
+ }
+});
+Ext.reg('statusbar', Ext.ux.StatusBar);
+/**\r
* @class Ext.ux.TabCloseMenu\r
* @extends Object \r
* Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs.\r
Ext.ns('Ext.ux.grid');
/**
- * @class Ext.ux.grid.TableGrid
- * @extends Ext.grid.GridPanel
- * A Grid which creates itself from an existing HTML table element.
- * @history
- * 2007-03-01 Original version by Nige "Animal" White
- * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
- * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
- * The table MUST have some type of size defined for the grid to fill. The container will be
- * automatically set to position relative if it isn't already.
- * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
- * properties: fields and columns which allow for customizing data fields and columns for this grid.
+ * @class Ext.ux.grid.TableGrid
+ * @extends Ext.grid.GridPanel
+ * A Grid which creates itself from an existing HTML table element.
+ * @history
+ * 2007-03-01 Original version by Nige "Animal" White
+ * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
+ * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
+ * The table MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
+ * properties: fields and columns which allow for customizing data fields and columns for this grid.
+ */
+Ext.ux.grid.TableGrid = function(table, config){
+ config = config ||
+ {};
+ Ext.apply(this, config);
+ var cf = config.fields || [], ch = config.columns || [];
+ table = Ext.get(table);
+
+ var ct = table.insertSibling();
+
+ var fields = [], cols = [];
+ var headers = table.query("thead th");
+ for (var i = 0, h; h = headers[i]; i++) {
+ var text = h.innerHTML;
+ var name = 'tcol-' + i;
+
+ fields.push(Ext.applyIf(cf[i] ||
+ {}, {
+ name: name,
+ mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
+ }));
+
+ cols.push(Ext.applyIf(ch[i] ||
+ {}, {
+ 'header': text,
+ 'dataIndex': name,
+ 'width': h.offsetWidth,
+ 'tooltip': h.title,
+ 'sortable': true
+ }));
+ }
+
+ var ds = new Ext.data.Store({
+ reader: new Ext.data.XmlReader({
+ record: 'tbody tr'
+ }, fields)
+ });
+
+ ds.loadData(table.dom);
+
+ var cm = new Ext.grid.ColumnModel(cols);
+
+ if (config.width || config.height) {
+ ct.setSize(config.width || 'auto', config.height || 'auto');
+ }
+ else {
+ ct.setWidth(table.getWidth());
+ }
+
+ if (config.remove !== false) {
+ table.remove();
+ }
+
+ Ext.applyIf(this, {
+ 'ds': ds,
+ 'cm': cm,
+ 'sm': new Ext.grid.RowSelectionModel(),
+ autoHeight: true,
+ autoWidth: false
+ });
+ Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {});
+};
+
+Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);
+
+//backwards compat
+Ext.grid.TableGrid = Ext.ux.grid.TableGrid;
+Ext.ns('Ext.ux');
+/**
+ * @class Ext.ux.TabScrollerMenu
+ * @extends Object
+ * Plugin (ptype = 'tabscrollermenu') for adding a tab scroller menu to tabs.
+ * @constructor
+ * @param {Object} config Configuration options
+ * @ptype tabscrollermenu
+ */
+Ext.ux.TabScrollerMenu = Ext.extend(Object, {
+ /**
+ * @cfg {Number} pageSize How many items to allow per submenu.
+ */
+ pageSize : 10,
+ /**
+ * @cfg {Number} maxText How long should the title of each {@link Ext.menu.Item} be.
+ */
+ maxText : 15,
+ /**
+ * @cfg {String} menuPrefixText Text to prefix the submenus.
+ */
+ menuPrefixText : 'Items',
+ constructor : function(config) {
+ config = config || {};
+ Ext.apply(this, config);
+ },
+ //private
+ init : function(tabPanel) {
+ Ext.apply(tabPanel, this.parentOverrides);
+
+ tabPanel.tabScrollerMenu = this;
+ var thisRef = this;
+
+ tabPanel.on({
+ render : {
+ scope : tabPanel,
+ single : true,
+ fn : function() {
+ var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
+ tabPanel.createScrollers = newFn;
+ }
+ }
+ });
+ },
+ // private && sequeneced
+ createPanelsMenu : function() {
+ var h = this.stripWrap.dom.offsetHeight;
+
+ //move the right menu item to the left 18px
+ var rtScrBtn = this.header.dom.firstChild;
+ Ext.fly(rtScrBtn).applyStyles({
+ right : '18px'
+ });
+
+ var stripWrap = Ext.get(this.strip.dom.parentNode);
+ stripWrap.applyStyles({
+ 'margin-right' : '36px'
+ });
+
+ // Add the new righthand menu
+ var scrollMenu = this.header.insertFirst({
+ cls:'x-tab-tabmenu-right'
+ });
+ scrollMenu.setHeight(h);
+ scrollMenu.addClassOnOver('x-tab-tabmenu-over');
+ scrollMenu.on('click', this.showTabsMenu, this);
+
+ this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
+ scrollMenu.show();
+ });
+
+ this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
+ scrollMenu.hide();
+ });
+
+ },
+ /**
+ * Returns an the current page size (this.pageSize);
+ * @return {Number} this.pageSize The current page size.
+ */
+ getPageSize : function() {
+ return this.pageSize;
+ },
+ /**
+ * Sets the number of menu items per submenu "page size".
+ * @param {Number} pageSize The page size
+ */
+ setPageSize : function(pageSize) {
+ this.pageSize = pageSize;
+ },
+ /**
+ * Returns the current maxText length;
+ * @return {Number} this.maxText The current max text length.
+ */
+ getMaxText : function() {
+ return this.maxText;
+ },
+ /**
+ * Sets the maximum text size for each menu item.
+ * @param {Number} t The max text per each menu item.
+ */
+ setMaxText : function(t) {
+ this.maxText = t;
+ },
+ /**
+ * Returns the current menu prefix text String.;
+ * @return {String} this.menuPrefixText The current menu prefix text.
+ */
+ getMenuPrefixText : function() {
+ return this.menuPrefixText;
+ },
+ /**
+ * Sets the menu prefix text String.
+ * @param {String} t The menu prefix text.
+ */
+ setMenuPrefixText : function(t) {
+ this.menuPrefixText = t;
+ },
+ // private && applied to the tab panel itself.
+ parentOverrides : {
+ // all execute within the scope of the tab panel
+ // private
+ showTabsMenu : function(e) {
+ if (this.tabsMenu) {
+ this.tabsMenu.destroy();
+ this.un('destroy', this.tabsMenu.destroy, this.tabsMenu);
+ this.tabsMenu = null;
+ }
+ this.tabsMenu = new Ext.menu.Menu();
+ this.on('destroy', this.tabsMenu.destroy, this.tabsMenu);
+
+ this.generateTabMenuItems();
+
+ var target = Ext.get(e.getTarget());
+ var xy = target.getXY();
+//
+ //Y param + 24 pixels
+ xy[1] += 24;
+
+ this.tabsMenu.showAt(xy);
+ },
+ // private
+ generateTabMenuItems : function() {
+ var curActive = this.getActiveTab();
+ var totalItems = this.items.getCount();
+ var pageSize = this.tabScrollerMenu.getPageSize();
+
+
+ if (totalItems > pageSize) {
+ var numSubMenus = Math.floor(totalItems / pageSize);
+ var remainder = totalItems % pageSize;
+
+ // Loop through all of the items and create submenus in chunks of 10
+ for (var i = 0 ; i < numSubMenus; i++) {
+ var curPage = (i + 1) * pageSize;
+ var menuItems = [];
+
+
+ for (var x = 0; x < pageSize; x++) {
+ index = x + curPage - pageSize;
+ var item = this.items.get(index);
+ menuItems.push(this.autoGenMenuItem(item));
+ }
+
+ this.tabsMenu.add({
+ text : this.tabScrollerMenu.getMenuPrefixText() + ' ' + (curPage - pageSize + 1) + ' - ' + curPage,
+ menu : menuItems
+ });
+
+ }
+ // remaining items
+ if (remainder > 0) {
+ var start = numSubMenus * pageSize;
+ menuItems = [];
+ for (var i = start ; i < totalItems; i ++ ) {
+ var item = this.items.get(i);
+ menuItems.push(this.autoGenMenuItem(item));
+ }
+
+ this.tabsMenu.add({
+ text : this.tabScrollerMenu.menuPrefixText + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
+ menu : menuItems
+ });
+
+ }
+ }
+ else {
+ this.items.each(function(item) {
+ if (item.id != curActive.id && ! item.hidden) {
+ menuItems.push(this.autoGenMenuItem(item));
+ }
+ }, this);
+ }
+ },
+ // private
+ autoGenMenuItem : function(item) {
+ var maxText = this.tabScrollerMenu.getMaxText();
+ var text = Ext.util.Format.ellipsis(item.title, maxText);
+
+ return {
+ text : text,
+ handler : this.showTabFromMenu,
+ scope : this,
+ disabled : item.disabled,
+ tabToShow : item,
+ iconCls : item.iconCls
+ }
+
+ },
+ // private
+ showTabFromMenu : function(menuItem) {
+ this.setActiveTab(menuItem.tabToShow);
+ }
+ }
+});
+
+Ext.reg('tabscrollermenu', Ext.ux.TabScrollerMenu);
+Ext.ns('Ext.ux.tree');
+
+/**
+ * @class Ext.ux.tree.XmlTreeLoader
+ * @extends Ext.tree.TreeLoader
+ * <p>A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
+ * Any text value included as a text node in the XML will be added to the parent node as an attribute
+ * called <tt>innerText</tt>. Also, the tag name of each XML node will be added to the tree node as
+ * an attribute called <tt>tagName</tt>.</p>
+ * <p>By default, this class expects that your source XML will provide the necessary attributes on each
+ * node as expected by the {@link Ext.tree.TreePanel} to display and load properly. However, you can
+ * provide your own custom processing of node attributes by overriding the {@link #processNode} method
+ * and modifying the attributes as needed before they are used to create the associated TreeNode.</p>
+ * @constructor
+ * Creates a new XmlTreeloader.
+ * @param {Object} config A config object containing config properties.
*/
-Ext.ux.grid.TableGrid = function(table, config){
- config = config ||
- {};
- Ext.apply(this, config);
- var cf = config.fields || [], ch = config.columns || [];
- table = Ext.get(table);
+Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
+ /**
+ * @property XML_NODE_ELEMENT
+ * XML element node (value 1, read-only)
+ * @type Number
+ */
+ XML_NODE_ELEMENT : 1,
+ /**
+ * @property XML_NODE_TEXT
+ * XML text node (value 3, read-only)
+ * @type Number
+ */
+ XML_NODE_TEXT : 3,
+
+ // private override
+ processResponse : function(response, node, callback){
+ var xmlData = response.responseXML;
+ var root = xmlData.documentElement || xmlData;
+
+ try{
+ node.beginUpdate();
+ node.appendChild(this.parseXml(root));
+ node.endUpdate();
+
+ if(typeof callback == "function"){
+ callback(this, node);
+ }
+ }catch(e){
+ this.handleFailure(response);
+ }
+ },
+
+ // private
+ parseXml : function(node) {
+ var nodes = [];
+ Ext.each(node.childNodes, function(n){
+ if(n.nodeType == this.XML_NODE_ELEMENT){
+ var treeNode = this.createNode(n);
+ if(n.childNodes.length > 0){
+ var child = this.parseXml(n);
+ if(typeof child == 'string'){
+ treeNode.attributes.innerText = child;
+ }else{
+ treeNode.appendChild(child);
+ }
+ }
+ nodes.push(treeNode);
+ }
+ else if(n.nodeType == this.XML_NODE_TEXT){
+ var text = n.nodeValue.trim();
+ if(text.length > 0){
+ return nodes = text;
+ }
+ }
+ }, this);
+
+ return nodes;
+ },
+
+ // private override
+ createNode : function(node){
+ var attr = {
+ tagName: node.tagName
+ };
+
+ Ext.each(node.attributes, function(a){
+ attr[a.nodeName] = a.nodeValue;
+ });
+
+ this.processAttributes(attr);
+
+ return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr);
+ },
+
+ /*
+ * Template method intended to be overridden by subclasses that need to provide
+ * custom attribute processing prior to the creation of each TreeNode. This method
+ * will be passed a config object containing existing TreeNode attribute name/value
+ * pairs which can be modified as needed directly (no need to return the object).
+ */
+ processAttributes: Ext.emptyFn
+});
+
+//backwards compat
+Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;
+/**
+ * @class Ext.ux.ValidationStatus
+ * A {@link Ext.StatusBar} plugin that provides automatic error notification when the
+ * associated form contains validation errors.
+ * @extends Ext.Component
+ * @constructor
+ * Creates a new ValiationStatus plugin
+ * @param {Object} config A config object
+ */
+Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
+ /**
+ * @cfg {String} errorIconCls
+ * The {@link #iconCls} value to be applied to the status message when there is a
+ * validation error. Defaults to <tt>'x-status-error'</tt>.
+ */
+ errorIconCls : 'x-status-error',
+ /**
+ * @cfg {String} errorListCls
+ * The css class to be used for the error list when there are validation errors.
+ * Defaults to <tt>'x-status-error-list'</tt>.
+ */
+ errorListCls : 'x-status-error-list',
+ /**
+ * @cfg {String} validIconCls
+ * The {@link #iconCls} value to be applied to the status message when the form
+ * validates. Defaults to <tt>'x-status-valid'</tt>.
+ */
+ validIconCls : 'x-status-valid',
- var ct = table.insertSibling();
+ /**
+ * @cfg {String} showText
+ * The {@link #text} value to be applied when there is a form validation error.
+ * Defaults to <tt>'The form has errors (click for details...)'</tt>.
+ */
+ showText : 'The form has errors (click for details...)',
+ /**
+ * @cfg {String} showText
+ * The {@link #text} value to display when the error list is displayed.
+ * Defaults to <tt>'Click again to hide the error list'</tt>.
+ */
+ hideText : 'Click again to hide the error list',
+ /**
+ * @cfg {String} submitText
+ * The {@link #text} value to be applied when the form is being submitted.
+ * Defaults to <tt>'Saving...'</tt>.
+ */
+ submitText : 'Saving...',
- var fields = [], cols = [];
- var headers = table.query("thead th");
- for (var i = 0, h; h = headers[i]; i++) {
- var text = h.innerHTML;
- var name = 'tcol-' + i;
-
- fields.push(Ext.applyIf(cf[i] ||
- {}, {
- name: name,
- mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
- }));
-
- cols.push(Ext.applyIf(ch[i] ||
- {}, {
- 'header': text,
- 'dataIndex': name,
- 'width': h.offsetWidth,
- 'tooltip': h.title,
- 'sortable': true
- }));
- }
+ // private
+ init : function(sb){
+ sb.on('render', function(){
+ this.statusBar = sb;
+ this.monitor = true;
+ this.errors = new Ext.util.MixedCollection();
+ this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');
+
+ if(this.form){
+ this.form = Ext.getCmp(this.form).getForm();
+ this.startMonitoring();
+ this.form.on('beforeaction', function(f, action){
+ if(action.type == 'submit'){
+ // Ignore monitoring while submitting otherwise the field validation
+ // events cause the status message to reset too early
+ this.monitor = false;
+ }
+ }, this);
+ var startMonitor = function(){
+ this.monitor = true;
+ };
+ this.form.on('actioncomplete', startMonitor, this);
+ this.form.on('actionfailed', startMonitor, this);
+ }
+ }, this, {single:true});
+ sb.on({
+ scope: this,
+ afterlayout:{
+ single: true,
+ fn: function(){
+ // Grab the statusEl after the first layout.
+ sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});
+ }
+ },
+ beforedestroy:{
+ single: true,
+ fn: this.onDestroy
+ }
+ });
+ },
- var ds = new Ext.data.Store({
- reader: new Ext.data.XmlReader({
- record: 'tbody tr'
- }, fields)
- });
+ // private
+ startMonitoring : function(){
+ this.form.items.each(function(f){
+ f.on('invalid', this.onFieldValidation, this);
+ f.on('valid', this.onFieldValidation, this);
+ }, this);
+ },
- ds.loadData(table.dom);
+ // private
+ stopMonitoring : function(){
+ this.form.items.each(function(f){
+ f.un('invalid', this.onFieldValidation, this);
+ f.un('valid', this.onFieldValidation, this);
+ }, this);
+ },
- var cm = new Ext.grid.ColumnModel(cols);
+ // private
+ onDestroy : function(){
+ this.stopMonitoring();
+ this.statusBar.statusEl.un('click', this.onStatusClick, this);
+ Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
+ },
- if (config.width || config.height) {
- ct.setSize(config.width || 'auto', config.height || 'auto');
- }
- else {
- ct.setWidth(table.getWidth());
- }
+ // private
+ onFieldValidation : function(f, msg){
+ if(!this.monitor){
+ return false;
+ }
+ if(msg){
+ this.errors.add(f.id, {field:f, msg:msg});
+ }else{
+ this.errors.removeKey(f.id);
+ }
+ this.updateErrorList();
+ if(this.errors.getCount() > 0){
+ if(this.statusBar.getText() != this.showText){
+ this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
+ }
+ }else{
+ this.statusBar.clearStatus().setIcon(this.validIconCls);
+ }
+ },
- if (config.remove !== false) {
- table.remove();
- }
+ // private
+ updateErrorList : function(){
+ if(this.errors.getCount() > 0){
+ var msg = '<ul>';
+ this.errors.each(function(err){
+ msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');
+ }, this);
+ this.getMsgEl().update(msg+'</ul>');
+ }else{
+ this.getMsgEl().update('');
+ }
+ },
- Ext.applyIf(this, {
- 'ds': ds,
- 'cm': cm,
- 'sm': new Ext.grid.RowSelectionModel(),
- autoHeight: true,
- autoWidth: false
+ // private
+ getMsgEl : function(){
+ if(!this.msgEl){
+ this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
+ cls: this.errorListCls+' x-hide-offsets'
+ }, true);
+
+ this.msgEl.on('click', function(e){
+ var t = e.getTarget('li', 10, true);
+ if(t){
+ Ext.getCmp(t.id.split('x-err-')[1]).focus();
+ this.hideErrors();
+ }
+ }, this, {stopEvent:true}); // prevent anchor click navigation
+ }
+ return this.msgEl;
+ },
+
+ // private
+ showErrors : function(){
+ this.updateErrorList();
+ this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:0.3, easing:'easeOut'});
+ this.statusBar.setText(this.hideText);
+ this.form.getEl().on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
+ },
+
+ // private
+ hideErrors : function(){
+ var el = this.getMsgEl();
+ if(el.isVisible()){
+ el.slideOut('b', {duration:0.2, easing:'easeIn'});
+ this.statusBar.setText(this.showText);
+ }
+ this.form.getEl().un('click', this.hideErrors, this);
+ },
+
+ // private
+ onStatusClick : function(){
+ if(this.getMsgEl().isVisible()){
+ this.hideErrors();
+ }else if(this.errors.getCount() > 0){
+ this.showErrors();
+ }
+ }
+});(function() {
+ Ext.override(Ext.list.Column, {
+ init : function() {
+ if(!this.type){
+ this.type = "auto";
+ }
+
+ var st = Ext.data.SortTypes;
+ // named sortTypes are supported, here we look them up
+ if(typeof this.sortType == "string"){
+ this.sortType = st[this.sortType];
+ }
+
+ // set default sortType for strings and dates
+ if(!this.sortType){
+ switch(this.type){
+ case "string":
+ this.sortType = st.asUCString;
+ break;
+ case "date":
+ this.sortType = st.asDate;
+ break;
+ default:
+ this.sortType = st.none;
+ }
+ }
+ }
});
- Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {});
-};
-Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);
+ Ext.tree.Column = Ext.extend(Ext.list.Column, {});
+ Ext.tree.NumberColumn = Ext.extend(Ext.list.NumberColumn, {});
+ Ext.tree.DateColumn = Ext.extend(Ext.list.DateColumn, {});
+ Ext.tree.BooleanColumn = Ext.extend(Ext.list.BooleanColumn, {});
-//backwards compat
-Ext.grid.TableGrid = Ext.ux.grid.TableGrid;
+ Ext.reg('tgcolumn', Ext.tree.Column);
+ Ext.reg('tgnumbercolumn', Ext.tree.NumberColumn);
+ Ext.reg('tgdatecolumn', Ext.tree.DateColumn);
+ Ext.reg('tgbooleancolumn', Ext.tree.BooleanColumn);
+})();
+/**
+ * @class Ext.ux.tree.TreeGridNodeUI
+ * @extends Ext.tree.TreeNodeUI
+ */
+Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
+ isTreeGridNodeUI: true,
+ renderElements : function(n, a, targetNode, bulkRender){
+ var t = n.getOwnerTree(),
+ cols = t.columns,
+ c = cols[0],
+ i, buf, len;
-Ext.ux.TabScrollerMenu = Ext.extend(Object, {
- pageSize : 10,
- maxText : 15,
- menuPrefixText : 'Items',
- constructor : function(config) {
- config = config || {};
- Ext.apply(this, config);
- },
- init : function(tabPanel) {
- Ext.apply(tabPanel, this.tabPanelMethods);
-
- tabPanel.tabScrollerMenu = this;
- var thisRef = this;
-
- tabPanel.on({
- render : {
- scope : tabPanel,
- single : true,
- fn : function() {
- var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
- tabPanel.createScrollers = newFn;
- }
- }
- });
- },
- // private && sequeneced
- createPanelsMenu : function() {
- var h = this.stripWrap.dom.offsetHeight;
-
- //move the right menu item to the left 18px
- var rtScrBtn = this.header.dom.firstChild;
- Ext.fly(rtScrBtn).applyStyles({
- right : '18px'
- });
-
- var stripWrap = Ext.get(this.strip.dom.parentNode);
- stripWrap.applyStyles({
- 'margin-right' : '36px'
- });
-
- // Add the new righthand menu
- var scrollMenu = this.header.insertFirst({
- cls:'x-tab-tabmenu-right'
- });
- scrollMenu.setHeight(h);
- scrollMenu.addClassOnOver('x-tab-tabmenu-over');
- scrollMenu.on('click', this.showTabsMenu, this);
-
- this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
- scrollMenu.show();
- });
-
- this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
- scrollMenu.hide();
- });
-
- },
- // public
- getPageSize : function() {
- return this.pageSize;
- },
- // public
- setPageSize : function(pageSize) {
- this.pageSize = pageSize;
- },
- // public
- getMaxText : function() {
- return this.maxText;
- },
- // public
- setMaxText : function(t) {
- this.maxText = t;
- },
- getMenuPrefixText : function() {
- return this.menuPrefixText;
- },
- setMenuPrefixText : function(t) {
- this.menuPrefixText = t;
- },
- // private && applied to the tab panel itself.
- tabPanelMethods : {
- // all execute within the scope of the tab panel
- // private
- showTabsMenu : function(e) {
- if (! this.tabsMenu) {
- this.tabsMenu = new Ext.menu.Menu();
- this.on('beforedestroy', this.tabsMenu.destroy, this.tabsMenu);
- }
-
- this.tabsMenu.removeAll();
-
- this.generateTabMenuItems();
-
- var target = Ext.get(e.getTarget());
- var xy = target.getXY();
-
- //Y param + 24 pixels
- xy[1] += 24;
-
- this.tabsMenu.showAt(xy);
- },
- // private
- generateTabMenuItems : function() {
- var curActive = this.getActiveTab();
- var totalItems = this.items.getCount();
- var pageSize = this.tabScrollerMenu.getPageSize();
-
-
- if (totalItems > pageSize) {
- var numSubMenus = Math.floor(totalItems / pageSize);
- var remainder = totalItems % pageSize;
-
- // Loop through all of the items and create submenus in chunks of 10
- for (var i = 0 ; i < numSubMenus; i++) {
- var curPage = (i + 1) * pageSize;
- var menuItems = [];
-
-
- for (var x = 0; x < pageSize; x++) {
- index = x + curPage - pageSize;
- var item = this.items.get(index);
- menuItems.push(this.autoGenMenuItem(item));
- }
-
- this.tabsMenu.add({
- text : this.tabScrollerMenu.getMenuPrefixText() + ' ' + (curPage - pageSize + 1) + ' - ' + curPage,
- menu : menuItems
- });
-
- }
- // remaining items
- if (remainder > 0) {
- var start = numSubMenus * pageSize;
- menuItems = [];
- for (var i = start ; i < totalItems; i ++ ) {
- var item = this.items.get(i);
- menuItems.push(this.autoGenMenuItem(item));
- }
-
-
- this.tabsMenu.add({
- text : this.tabScrollerMenu.menuPrefixText + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
- menu : menuItems
- });
-
+ this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
+
+ buf = [
+ '<tbody class="x-tree-node">',
+ '<tr ext:tree-node-id="', n.id ,'" class="x-tree-node-el x-tree-node-leaf ', a.cls, '">',
+ '<td class="x-treegrid-col">',
+ '<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
+ '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
+ '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " "+a.iconCls : ""), '" unselectable="on">',
+ '<a hidefocus="on" class="x-tree-node-anchor" href="', a.href ? a.href : '#', '" tabIndex="1" ',
+ a.hrefTarget ? ' target="'+a.hrefTarget+'"' : '', '>',
+ '<span unselectable="on">', (c.tpl ? c.tpl.apply(a) : a[c.dataIndex] || c.text), '</span></a>',
+ '</td>'
+ ];
+
+ for(i = 1, len = cols.length; i < len; i++){
+ c = cols[i];
+ buf.push(
+ '<td class="x-treegrid-col ', (c.cls ? c.cls : ''), '">',
+ '<div unselectable="on" class="x-treegrid-text"', (c.align ? ' style="text-align: ' + c.align + ';"' : ''), '>',
+ (c.tpl ? c.tpl.apply(a) : a[c.dataIndex]),
+ '</div>',
+ '</td>'
+ );
+ }
+
+ buf.push(
+ '</tr><tr class="x-tree-node-ct"><td colspan="', cols.length, '">',
+ '<table class="x-treegrid-node-ct-table" cellpadding="0" cellspacing="0" style="table-layout: fixed; display: none; width: ', t.innerCt.getWidth() ,'px;"><colgroup>'
+ );
+ for(i = 0, len = cols.length; i<len; i++) {
+ buf.push('<col style="width: ', (cols[i].hidden ? 0 : cols[i].width) ,'px;" />');
+ }
+ buf.push('</colgroup></table></td></tr></tbody>');
+
+ if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
+ this.wrap = Ext.DomHelper.insertHtml("beforeBegin", n.nextSibling.ui.getEl(), buf.join(''));
+ }else{
+ this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(''));
+ }
+
+ this.elNode = this.wrap.childNodes[0];
+ this.ctNode = this.wrap.childNodes[1].firstChild.firstChild;
+ var cs = this.elNode.firstChild.childNodes;
+ this.indentNode = cs[0];
+ this.ecNode = cs[1];
+ this.iconNode = cs[2];
+ this.anchor = cs[3];
+ this.textNode = cs[3].firstChild;
+ },
+
+ // private
+ animExpand : function(cb){
+ this.ctNode.style.display = "";
+ Ext.ux.tree.TreeGridNodeUI.superclass.animExpand.call(this, cb);
+ }
+});
+
+Ext.ux.tree.TreeGridRootNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
+ isTreeGridNodeUI: true,
+
+ // private
+ render : function(){
+ if(!this.rendered){
+ this.wrap = this.ctNode = this.node.ownerTree.innerCt.dom;
+ this.node.expanded = true;
+ }
+
+ if(Ext.isWebKit) {
+ // weird table-layout: fixed issue in webkit
+ var ct = this.ctNode;
+ ct.style.tableLayout = null;
+ (function() {
+ ct.style.tableLayout = 'fixed';
+ }).defer(1);
+ }
+ },
+
+ destroy : function(){
+ if(this.elNode){
+ Ext.dd.Registry.unregister(this.elNode.id);
+ }
+ delete this.node;
+ },
+
+ collapse : Ext.emptyFn,
+ expand : Ext.emptyFn
+});/**
+ * @class Ext.tree.ColumnResizer
+ * @extends Ext.util.Observable
+ */
+Ext.tree.ColumnResizer = Ext.extend(Ext.util.Observable, {
+ /**
+ * @cfg {Number} minWidth The minimum width the column can be dragged to.
+ * Defaults to <tt>14</tt>.
+ */
+ minWidth: 14,
+
+ constructor: function(config){
+ Ext.apply(this, config);
+ Ext.tree.ColumnResizer.superclass.constructor.call(this);
+ },
+
+ init : function(tree){
+ this.tree = tree;
+ tree.on('render', this.initEvents, this);
+ },
+
+ initEvents : function(tree){
+ tree.mon(tree.innerHd, 'mousemove', this.handleHdMove, this);
+ this.tracker = new Ext.dd.DragTracker({
+ onBeforeStart: this.onBeforeStart.createDelegate(this),
+ onStart: this.onStart.createDelegate(this),
+ onDrag: this.onDrag.createDelegate(this),
+ onEnd: this.onEnd.createDelegate(this),
+ tolerance: 3,
+ autoStart: 300
+ });
+ this.tracker.initEl(tree.innerHd);
+ tree.on('beforedestroy', this.tracker.destroy, this.tracker);
+ },
+
+ handleHdMove : function(e, t){
+ var hw = 5,
+ x = e.getPageX(),
+ hd = e.getTarget('.x-treegrid-hd', 3, true);
+
+ if(hd){
+ var r = hd.getRegion(),
+ ss = hd.dom.style,
+ pn = hd.dom.parentNode;
+
+ if(x - r.left <= hw && hd.dom !== pn.firstChild) {
+ var ps = hd.dom.previousSibling;
+ while(ps && Ext.fly(ps).hasClass('x-treegrid-hd-hidden')) {
+ ps = ps.previousSibling;
+ }
+ if(ps) {
+ this.activeHd = Ext.get(ps);
+ ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
+ }
+ } else if(r.right - x <= hw) {
+ var ns = hd.dom;
+ while(ns && Ext.fly(ns).hasClass('x-treegrid-hd-hidden')) {
+ ns = ns.previousSibling;
+ }
+ if(ns) {
+ this.activeHd = Ext.get(ns);
+ ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
+ }
+ } else{
+ delete this.activeHd;
+ ss.cursor = '';
+ }
+ }
+ },
+
+ onBeforeStart : function(e){
+ this.dragHd = this.activeHd;
+ return !!this.dragHd;
+ },
+
+ onStart : function(e){
+ this.tree.headersDisabled = true;
+ this.proxy = this.tree.body.createChild({cls:'x-treegrid-resizer'});
+ this.proxy.setHeight(this.tree.body.getHeight());
- }
- }
- else {
- this.items.each(function(item) {
- if (item.id != curActive.id && ! item.hidden) {
- menuItems.push(this.autoGenMenuItem(item));
- }
- }, this);
- }
- },
- // private
- autoGenMenuItem : function(item) {
- var maxText = this.tabScrollerMenu.getMaxText();
- var text = Ext.util.Format.ellipsis(item.title, maxText);
-
- return {
- text : text,
- handler : this.showTabFromMenu,
- scope : this,
- disabled : item.disabled,
- tabToShow : item,
- iconCls : item.iconCls
- }
-
- },
- // private
- showTabFromMenu : function(menuItem) {
- this.setActiveTab(menuItem.tabToShow);
- }
- }
-});
-Ext.ns('Ext.ux.tree');
+ var x = this.tracker.getXY()[0];
+
+ this.hdX = this.dragHd.getX();
+ this.hdIndex = this.tree.findHeaderIndex(this.dragHd);
+
+ this.proxy.setX(this.hdX);
+ this.proxy.setWidth(x-this.hdX);
+
+ this.maxWidth = this.tree.outerCt.getWidth() - this.tree.innerBody.translatePoints(this.hdX).left;
+ },
+
+ onDrag : function(e){
+ var cursorX = this.tracker.getXY()[0];
+ this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
+ },
+
+ onEnd : function(e){
+ var nw = this.proxy.getWidth(),
+ tree = this.tree;
+
+ this.proxy.remove();
+ delete this.dragHd;
+
+ tree.columns[this.hdIndex].width = nw;
+ tree.updateColumnWidths();
+
+ setTimeout(function(){
+ tree.headersDisabled = false;
+ }, 100);
+ }
+});Ext.ns('Ext.ux.tree');
/**
- * @class Ext.ux.tree.XmlTreeLoader
- * @extends Ext.tree.TreeLoader
- * <p>A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
- * Any text value included as a text node in the XML will be added to the parent node as an attribute
- * called <tt>innerText</tt>. Also, the tag name of each XML node will be added to the tree node as
- * an attribute called <tt>tagName</tt>.</p>
- * <p>By default, this class expects that your source XML will provide the necessary attributes on each
- * node as expected by the {@link Ext.tree.TreePanel} to display and load properly. However, you can
- * provide your own custom processing of node attributes by overriding the {@link #processNode} method
- * and modifying the attributes as needed before they are used to create the associated TreeNode.</p>
+ * @class Ext.ux.tree.TreeGridSorter
+ * @extends Ext.tree.TreeSorter
+ * Provides sorting of nodes in a {@link Ext.ux.tree.TreeGrid}. The TreeGridSorter automatically monitors events on the
+ * associated TreeGrid that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).
+ * Example usage:<br />
+ * <pre><code>
+ new Ext.ux.tree.TreeGridSorter(myTreeGrid, {
+ folderSort: true,
+ dir: "desc",
+ sortType: function(node) {
+ // sort by a custom, typed attribute:
+ return parseInt(node.id, 10);
+ }
+ });
+ </code></pre>
* @constructor
- * Creates a new XmlTreeloader.
- * @param {Object} config A config object containing config properties.
+ * @param {TreeGrid} tree
+ * @param {Object} config
*/
-Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
+Ext.ux.tree.TreeGridSorter = Ext.extend(Ext.tree.TreeSorter, {
/**
- * @property XML_NODE_ELEMENT
- * XML element node (value 1, read-only)
- * @type Number
+ * @cfg {Array} sortClasses The CSS classes applied to a header when it is sorted. (defaults to <tt>['sort-asc', 'sort-desc']</tt>)
*/
- XML_NODE_ELEMENT : 1,
+ sortClasses : ['sort-asc', 'sort-desc'],
/**
- * @property XML_NODE_TEXT
- * XML text node (value 3, read-only)
- * @type Number
+ * @cfg {String} sortAscText The text displayed in the 'Sort Ascending' menu item (defaults to <tt>'Sort Ascending'</tt>)
*/
- XML_NODE_TEXT : 3,
+ sortAscText : 'Sort Ascending',
+ /**
+ * @cfg {String} sortDescText The text displayed in the 'Sort Descending' menu item (defaults to <tt>'Sort Descending'</tt>)
+ */
+ sortDescText : 'Sort Descending',
- // private override
- processResponse : function(response, node, callback){
- var xmlData = response.responseXML;
- var root = xmlData.documentElement || xmlData;
+ constructor : function(tree, config) {
+ if(!Ext.isObject(config)) {
+ config = {
+ property: tree.columns[0].dataIndex || 'text',
+ folderSort: true
+ }
+ }
- try{
- node.beginUpdate();
- node.appendChild(this.parseXml(root));
- node.endUpdate();
+ Ext.ux.tree.TreeGridSorter.superclass.constructor.apply(this, arguments);
- if(typeof callback == "function"){
- callback(this, node);
+ this.tree = tree;
+ tree.on('headerclick', this.onHeaderClick, this);
+ tree.ddAppendOnly = true;
+
+ me = this;
+ this.defaultSortFn = function(n1, n2){
+
+ var dsc = me.dir && me.dir.toLowerCase() == 'desc';
+ var p = me.property || 'text';
+ var sortType = me.sortType;
+ var fs = me.folderSort;
+ var cs = me.caseSensitive === true;
+ var leafAttr = me.leafAttr || 'leaf';
+
+ if(fs){
+ if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
+ return 1;
+ }
+ if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
+ return -1;
+ }
}
- }catch(e){
- this.handleFailure(response);
+ var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
+ var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
+ if(v1 < v2){
+ return dsc ? +1 : -1;
+ }else if(v1 > v2){
+ return dsc ? -1 : +1;
+ }else{
+ return 0;
+ }
+ };
+
+ tree.on('afterrender', this.onAfterTreeRender, this, {single: true});
+ tree.on('headermenuclick', this.onHeaderMenuClick, this);
+ },
+
+ onAfterTreeRender : function() {
+ if(this.tree.hmenu){
+ this.tree.hmenu.insert(0,
+ {itemId:'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
+ {itemId:'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
+ );
+ }
+ this.updateSortIcon(0, 'asc');
+ },
+
+ onHeaderMenuClick : function(c, id, index) {
+ if(id === 'asc' || id === 'desc') {
+ this.onHeaderClick(c, null, index);
+ return false;
+ }
+ },
+
+ onHeaderClick : function(c, el, i) {
+ if(c && !this.tree.headersDisabled){
+ var me = this;
+
+ me.property = c.dataIndex;
+ me.dir = c.dir = (c.dir === 'desc' ? 'asc' : 'desc');
+ me.sortType = c.sortType;
+ me.caseSensitive === Ext.isBoolean(c.caseSensitive) ? c.caseSensitive : this.caseSensitive;
+ me.sortFn = c.sortFn || this.defaultSortFn;
+
+ this.tree.root.cascade(function(n) {
+ if(!n.isLeaf()) {
+ me.updateSort(me.tree, n);
+ }
+ });
+
+ this.updateSortIcon(i, c.dir);
}
},
// private
- parseXml : function(node) {
- var nodes = [];
- Ext.each(node.childNodes, function(n){
- if(n.nodeType == this.XML_NODE_ELEMENT){
- var treeNode = this.createNode(n);
- if(n.childNodes.length > 0){
- var child = this.parseXml(n);
- if(typeof child == 'string'){
- treeNode.attributes.innerText = child;
- }else{
- treeNode.appendChild(child);
- }
+ updateSortIcon : function(col, dir){
+ var sc = this.sortClasses;
+ var hds = this.tree.innerHd.select('td').removeClass(sc);
+ hds.item(col).addClass(sc[dir == 'desc' ? 1 : 0]);
+ }
+});/**
+ * @class Ext.ux.tree.TreeGridLoader
+ * @extends Ext.tree.TreeLoader
+ */
+Ext.ux.tree.TreeGridLoader = Ext.extend(Ext.tree.TreeLoader, {
+ createNode : function(attr) {
+ if (!attr.uiProvider) {
+ attr.uiProvider = Ext.ux.tree.TreeGridNodeUI;
+ }
+ return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
+ }
+});/**
+ * @class Ext.ux.tree.TreeGrid
+ * @extends Ext.tree.TreePanel
+ *
+ * @xtype treegrid
+ */
+Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
+ rootVisible : false,
+ useArrows : true,
+ lines : false,
+ borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
+ cls : 'x-treegrid',
+
+ columnResize : true,
+ enableSort : true,
+ reserveScrollOffset : true,
+ enableHdMenu : true,
+
+ columnsText : 'Columns',
+
+ initComponent : function() {
+ if(!this.root) {
+ this.root = new Ext.tree.AsyncTreeNode({text: 'Root'});
+ }
+
+ // initialize the loader
+ var l = this.loader;
+ if(!l){
+ l = new Ext.ux.tree.TreeGridLoader({
+ dataUrl: this.dataUrl,
+ requestMethod: this.requestMethod,
+ store: this.store
+ });
+ }else if(Ext.isObject(l) && !l.load){
+ l = new Ext.ux.tree.TreeGridLoader(l);
+ }
+ else if(l) {
+ l.createNode = function(attr) {
+ if (!attr.uiProvider) {
+ attr.uiProvider = Ext.ux.tree.TreeGridNodeUI;
}
- nodes.push(treeNode);
+ return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
}
- else if(n.nodeType == this.XML_NODE_TEXT){
- var text = n.nodeValue.trim();
- if(text.length > 0){
- return nodes = text;
- }
+ }
+ this.loader = l;
+
+ Ext.ux.tree.TreeGrid.superclass.initComponent.call(this);
+
+ this.initColumns();
+
+ if(this.enableSort) {
+ this.treeGridSorter = new Ext.ux.tree.TreeGridSorter(this, this.enableSort);
+ }
+
+ if(this.columnResize){
+ this.colResizer = new Ext.tree.ColumnResizer(this.columnResize);
+ this.colResizer.init(this);
+ }
+
+ var c = this.columns;
+ if(!this.internalTpl){
+ this.internalTpl = new Ext.XTemplate(
+ '<div class="x-grid3-header">',
+ '<div class="x-treegrid-header-inner">',
+ '<div class="x-grid3-header-offset">',
+ '<table cellspacing="0" cellpadding="0" border="0"><colgroup><tpl for="columns"><col /></tpl></colgroup>',
+ '<thead><tr class="x-grid3-hd-row">',
+ '<tpl for="columns">',
+ '<td class="x-grid3-hd x-grid3-cell x-treegrid-hd" style="text-align: {align};" id="', this.id, '-xlhd-{#}">',
+ '<div class="x-grid3-hd-inner x-treegrid-hd-inner" unselectable="on">',
+ this.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
+ '{header}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',
+ '</div>',
+ '</td></tpl>',
+ '</tr></thead>',
+ '</div></table>',
+ '</div></div>',
+ '</div>',
+ '<div class="x-treegrid-root-node">',
+ '<table class="x-treegrid-root-table" cellpadding="0" cellspacing="0" style="table-layout: fixed;"></table>',
+ '</div>'
+ );
+ }
+
+ if(!this.colgroupTpl) {
+ this.colgroupTpl = new Ext.XTemplate(
+ '<colgroup><tpl for="columns"><col style="width: {width}px"/></tpl></colgroup>'
+ );
+ }
+ },
+
+ initColumns : function() {
+ var cs = this.columns,
+ len = cs.length,
+ columns = [],
+ i, c;
+
+ for(i = 0; i < len; i++){
+ c = cs[i];
+ if(!c.isColumn) {
+ c.xtype = c.xtype ? (/^tg/.test(c.xtype) ? c.xtype : 'tg' + c.xtype) : 'tgcolumn';
+ c = Ext.create(c);
}
- }, this);
+ c.init(this);
+ columns.push(c);
+
+ if(this.enableSort !== false && c.sortable !== false) {
+ c.sortable = true;
+ this.enableSort = true;
+ }
+ }
- return nodes;
+ this.columns = columns;
},
- // private override
- createNode : function(node){
- var attr = {
- tagName: node.tagName
- };
+ onRender : function(){
+ Ext.tree.TreePanel.superclass.onRender.apply(this, arguments);
- Ext.each(node.attributes, function(a){
- attr[a.nodeName] = a.nodeValue;
+ this.el.addClass('x-treegrid');
+
+ this.outerCt = this.body.createChild({
+ cls:'x-tree-root-ct x-treegrid-ct ' + (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')
});
+
+ this.internalTpl.overwrite(this.outerCt, {columns: this.columns});
+
+ this.mainHd = Ext.get(this.outerCt.dom.firstChild);
+ this.innerHd = Ext.get(this.mainHd.dom.firstChild);
+ this.innerBody = Ext.get(this.outerCt.dom.lastChild);
+ this.innerCt = Ext.get(this.innerBody.dom.firstChild);
+
+ this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});
+
+ if(this.hideHeaders){
+ this.header.dom.style.display = 'none';
+ }
+ else if(this.enableHdMenu !== false){
+ this.hmenu = new Ext.menu.Menu({id: this.id + '-hctx'});
+ if(this.enableColumnHide !== false){
+ this.colMenu = new Ext.menu.Menu({id: this.id + '-hcols-menu'});
+ this.colMenu.on({
+ scope: this,
+ beforeshow: this.beforeColMenuShow,
+ itemclick: this.handleHdMenuClick
+ });
+ this.hmenu.add({
+ itemId:'columns',
+ hideOnClick: false,
+ text: this.columnsText,
+ menu: this.colMenu,
+ iconCls: 'x-cols-icon'
+ });
+ }
+ this.hmenu.on('itemclick', this.handleHdMenuClick, this);
+ }
+ },
- this.processAttributes(attr);
+ setRootNode : function(node){
+ node.attributes.uiProvider = Ext.ux.tree.TreeGridRootNodeUI;
+ node = Ext.ux.tree.TreeGrid.superclass.setRootNode.call(this, node);
+ if(this.innerCt) {
+ this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});
+ }
+ return node;
+ },
+
+ clearInnerCt : function(){
+ if(Ext.isIE){
+ var dom = this.innerCt.dom;
+ while(dom.firstChild){
+ dom.removeChild(dom.firstChild);
+ }
+ }else{
+ Ext.ux.tree.TreeGrid.superclass.clearInnerCt.call(this);
+ }
+ },
+
+ initEvents : function() {
+ Ext.ux.tree.TreeGrid.superclass.initEvents.apply(this, arguments);
- return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr);
+ this.mon(this.innerBody, 'scroll', this.syncScroll, this);
+ this.mon(this.innerHd, 'click', this.handleHdDown, this);
+ this.mon(this.mainHd, {
+ scope: this,
+ mouseover: this.handleHdOver,
+ mouseout: this.handleHdOut
+ });
},
+
+ onResize : function(w, h) {
+ Ext.ux.tree.TreeGrid.superclass.onResize.apply(this, arguments);
+
+ var bd = this.innerBody.dom;
+ var hd = this.innerHd.dom;
- /*
- * Template method intended to be overridden by subclasses that need to provide
- * custom attribute processing prior to the creation of each TreeNode. This method
- * will be passed a config object containing existing TreeNode attribute name/value
- * pairs which can be modified as needed directly (no need to return the object).
+ if(!bd){
+ return;
+ }
+
+ if(Ext.isNumber(h)){
+ bd.style.height = this.body.getHeight(true) - hd.offsetHeight + 'px';
+ }
+
+ if(Ext.isNumber(w)){
+ var sw = Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
+ if(this.reserveScrollOffset || ((bd.offsetWidth - bd.clientWidth) > 10)){
+ this.setScrollOffset(sw);
+ }else{
+ var me = this;
+ setTimeout(function(){
+ me.setScrollOffset(bd.offsetWidth - bd.clientWidth > 10 ? sw : 0);
+ }, 10);
+ }
+ }
+ },
+
+ updateColumnWidths : function() {
+ var cols = this.columns,
+ colCount = cols.length,
+ groups = this.outerCt.query('colgroup'),
+ groupCount = groups.length,
+ c, g, i, j;
+
+ for(i = 0; i<colCount; i++) {
+ c = cols[i];
+ for(j = 0; j<groupCount; j++) {
+ g = groups[j];
+ g.childNodes[i].style.width = (c.hidden ? 0 : c.width) + 'px';
+ }
+ }
+
+ for(i = 0, groups = this.innerHd.query('td'), len = groups.length; i<len; i++) {
+ c = Ext.fly(groups[i]);
+ if(cols[i] && cols[i].hidden) {
+ c.addClass('x-treegrid-hd-hidden');
+ }
+ else {
+ c.removeClass('x-treegrid-hd-hidden');
+ }
+ }
+
+ var tcw = this.getTotalColumnWidth();
+ Ext.fly(this.innerHd.dom.firstChild).setWidth(tcw + (this.scrollOffset || 0));
+ this.outerCt.select('table').setWidth(tcw);
+ this.syncHeaderScroll();
+ },
+
+ getVisibleColumns : function() {
+ var columns = [],
+ cs = this.columns,
+ len = cs.length,
+ i;
+
+ for(i = 0; i<len; i++) {
+ if(!cs[i].hidden) {
+ columns.push(cs[i]);
+ }
+ }
+ return columns;
+ },
+
+ getTotalColumnWidth : function() {
+ var total = 0;
+ for(var i = 0, cs = this.getVisibleColumns(), len = cs.length; i<len; i++) {
+ total += cs[i].width;
+ }
+ return total;
+ },
+
+ setScrollOffset : function(scrollOffset) {
+ this.scrollOffset = scrollOffset;
+ this.updateColumnWidths();
+ },
+
+ // private
+ handleHdDown : function(e, t){
+ var hd = e.getTarget('.x-treegrid-hd');
+
+ if(hd && Ext.fly(t).hasClass('x-grid3-hd-btn')){
+ var ms = this.hmenu.items,
+ cs = this.columns,
+ index = this.findHeaderIndex(hd),
+ c = cs[index],
+ sort = c.sortable;
+
+ e.stopEvent();
+ Ext.fly(hd).addClass('x-grid3-hd-menu-open');
+ this.hdCtxIndex = index;
+
+ this.fireEvent('headerbuttonclick', ms, c, hd, index);
+
+ this.hmenu.on('hide', function(){
+ Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
+ }, this, {single:true});
+
+ this.hmenu.show(t, 'tl-bl?');
+ }
+ else if(hd) {
+ var index = this.findHeaderIndex(hd);
+ this.fireEvent('headerclick', this.columns[index], hd, index);
+ }
+ },
+
+ // private
+ handleHdOver : function(e, t){
+ var hd = e.getTarget('.x-treegrid-hd');
+ if(hd && !this.headersDisabled){
+ index = this.findHeaderIndex(hd);
+ this.activeHdRef = t;
+ this.activeHdIndex = index;
+ var el = Ext.get(hd);
+ this.activeHdRegion = el.getRegion();
+ el.addClass('x-grid3-hd-over');
+ this.activeHdBtn = el.child('.x-grid3-hd-btn');
+ if(this.activeHdBtn){
+ this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight-1)+'px';
+ }
+ }
+ },
+
+ // private
+ handleHdOut : function(e, t){
+ var hd = e.getTarget('.x-treegrid-hd');
+ if(hd && (!Ext.isIE || !e.within(hd, true))){
+ this.activeHdRef = null;
+ Ext.fly(hd).removeClass('x-grid3-hd-over');
+ hd.style.cursor = '';
+ }
+ },
+
+ findHeaderIndex : function(hd){
+ hd = hd.dom || hd;
+ var cs = hd.parentNode.childNodes;
+ for(var i = 0, c; c = cs[i]; i++){
+ if(c == hd){
+ return i;
+ }
+ }
+ return -1;
+ },
+
+ // private
+ beforeColMenuShow : function(){
+ var cols = this.columns,
+ colCount = cols.length,
+ i, c;
+ this.colMenu.removeAll();
+ for(i = 1; i < colCount; i++){
+ c = cols[i];
+ if(c.hideable !== false){
+ this.colMenu.add(new Ext.menu.CheckItem({
+ itemId: 'col-' + i,
+ text: c.header,
+ checked: !c.hidden,
+ hideOnClick:false,
+ disabled: c.hideable === false
+ }));
+ }
+ }
+ },
+
+ // private
+ handleHdMenuClick : function(item){
+ var index = this.hdCtxIndex,
+ id = item.getItemId();
+
+ if(this.fireEvent('headermenuclick', this.columns[index], id, index) !== false) {
+ index = id.substr(4);
+ if(index > 0 && this.columns[index]) {
+ this.setColumnVisible(index, !item.checked);
+ }
+ }
+
+ return true;
+ },
+
+ setColumnVisible : function(index, visible) {
+ this.columns[index].hidden = !visible;
+ this.updateColumnWidths();
+ },
+
+ /**
+ * Scrolls the grid to the top
*/
- processAttributes: Ext.emptyFn
+ scrollToTop : function(){
+ this.innerBody.dom.scrollTop = 0;
+ this.innerBody.dom.scrollLeft = 0;
+ },
+
+ // private
+ syncScroll : function(){
+ this.syncHeaderScroll();
+ var mb = this.innerBody.dom;
+ this.fireEvent('bodyscroll', mb.scrollLeft, mb.scrollTop);
+ },
+
+ // private
+ syncHeaderScroll : function(){
+ var mb = this.innerBody.dom;
+ this.innerHd.dom.scrollLeft = mb.scrollLeft;
+ this.innerHd.dom.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
+ },
+
+ registerNode : function(n) {
+ Ext.ux.tree.TreeGrid.superclass.registerNode.call(this, n);
+ if(!n.uiProvider && !n.isRoot && !n.ui.isTreeGridNodeUI) {
+ n.ui = new Ext.ux.tree.TreeGridNodeUI(n);
+ }
+ }
});
-//backwards compat
-Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;
+Ext.reg('treegrid', Ext.ux.tree.TreeGrid);
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff