/*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
-Ext.ns('Ext.ux.grid');\r
-\r
-/**\r
- * @class Ext.ux.grid.CheckColumn\r
- * @extends Object\r
- * GridPanel plugin to add a column with check boxes to a grid.\r
- * <p>Example usage:</p>\r
- * <pre><code>\r
-// create the column\r
-var checkColumn = new Ext.grid.CheckColumn({\r
- header: 'Indoor?',\r
- dataIndex: 'indoor',\r
- id: 'check',\r
- width: 55\r
-});\r
-\r
-// add the column to the column model\r
-var cm = new Ext.grid.ColumnModel([{\r
- header: 'Foo',\r
- ...\r
- },\r
- checkColumn\r
-]);\r
-\r
-// create the grid\r
-var grid = new Ext.grid.EditorGridPanel({\r
- ...\r
- cm: cm,\r
- plugins: [checkColumn], // include plugin\r
- ...\r
-});\r
- * </code></pre>\r
- * In addition to storing a Boolean value within the record data, this\r
- * class toggles a css class between <tt>'x-grid3-check-col'</tt> and\r
- * <tt>'x-grid3-check-col-on'</tt> to alter the background image used for\r
- * a column.\r
- */\r
-Ext.ux.grid.CheckColumn = function(config){\r
- Ext.apply(this, config);\r
- if(!this.id){\r
- this.id = Ext.id();\r
- }\r
- this.renderer = this.renderer.createDelegate(this);\r
-};\r
-\r
-Ext.ux.grid.CheckColumn.prototype ={\r
- init : function(grid){\r
- this.grid = grid;\r
- this.grid.on('render', function(){\r
- var view = this.grid.getView();\r
- view.mainBody.on('mousedown', this.onMouseDown, this);\r
- }, this);\r
- },\r
-\r
- onMouseDown : function(e, t){\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
- record.set(this.dataIndex, !record.data[this.dataIndex]);\r
- }\r
- },\r
-\r
- renderer : function(v, p, record){\r
- p.css += ' x-grid3-check-col-td'; \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
-// register ptype\r
-Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);\r
-\r
-// backwards compat\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
- * @extends Ext.tree.TreePanel\r
- * \r
- * @xtype columntree\r
- */\r
-Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {\r
- lines : false,\r
- borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell\r
- cls : 'x-column-tree',\r
-\r
- onRender : function(){\r
- Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);\r
- this.headers = this.header.createChild({cls:'x-tree-headers'});\r
-\r
- var cols = this.columns, c;\r
- var totalWidth = 0;\r
- var scrollOffset = 19; // similar to Ext.grid.GridView default\r
-\r
- for(var i = 0, len = cols.length; i < len; i++){\r
- c = cols[i];\r
- totalWidth += c.width;\r
- this.headers.createChild({\r
- cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),\r
- cn: {\r
- cls:'x-tree-hd-text',\r
- html: c.header\r
- },\r
- style:'width:'+(c.width-this.borderWidth)+'px;'\r
- });\r
- }\r
- this.headers.createChild({cls:'x-clear'});\r
- // prevent floats from wrapping when clipped\r
- this.headers.setWidth(totalWidth+scrollOffset);\r
- this.innerCt.setWidth(totalWidth);\r
- }\r
-});\r
-\r
-Ext.reg('columntree', Ext.ux.tree.ColumnTree);\r
-\r
-//backwards compat\r
-Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;\r
-\r
-\r
-/**\r
- * @class Ext.ux.tree.ColumnNodeUI\r
- * @extends Ext.tree.TreeNodeUI\r
- */\r
-Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {\r
- focus: Ext.emptyFn, // prevent odd scrolling behavior\r
-\r
- renderElements : function(n, a, targetNode, bulkRender){\r
- this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';\r
-\r
- var t = n.getOwnerTree();\r
- var cols = t.columns;\r
- var bw = t.borderWidth;\r
- var c = cols[0];\r
-\r
- var buf = [\r
- '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',\r
- '<div class="x-tree-col" style="width:',c.width-bw,'px;">',\r
- '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",\r
- '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',\r
- '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',\r
- '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',\r
- a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',\r
- '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",\r
- "</div>"];\r
- for(var i = 1, len = cols.length; i < len; i++){\r
- c = cols[i];\r
-\r
- buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',\r
- '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",\r
- "</div>");\r
- }\r
- buf.push(\r
- '<div class="x-clear"></div></div>',\r
- '<ul class="x-tree-node-ct" style="display:none;"></ul>',\r
- "</li>");\r
-\r
- if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){\r
- this.wrap = Ext.DomHelper.insertHtml("beforeBegin",\r
- n.nextSibling.ui.getEl(), buf.join(""));\r
- }else{\r
- this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));\r
- }\r
-\r
- this.elNode = this.wrap.childNodes[0];\r
- this.ctNode = this.wrap.childNodes[1];\r
- var cs = this.elNode.firstChild.childNodes;\r
- this.indentNode = cs[0];\r
- this.ecNode = cs[1];\r
- this.iconNode = cs[2];\r
- this.anchor = cs[3];\r
- this.textNode = cs[3].firstChild;\r
- }\r
-});\r
-\r
-//backwards compat\r
-Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;\r
-/**\r
- * @class Ext.DataView.LabelEditor\r
- * @extends Ext.Editor\r
- * \r
- */\r
-Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {\r
- alignment: "tl-tl",\r
- hideEl : false,\r
- cls: "x-small-editor",\r
- shim: false,\r
- completeOnEnter: true,\r
- cancelOnEsc: true,\r
- labelSelector: 'span.x-editable',\r
- \r
- constructor: function(cfg, field){\r
- Ext.DataView.LabelEditor.superclass.constructor.call(this,\r
- field || new Ext.form.TextField({\r
- allowBlank: false,\r
- growMin:90,\r
- growMax:240,\r
- grow:true,\r
- selectOnFocus:true\r
- }), cfg\r
- );\r
- },\r
- \r
- init : function(view){\r
- this.view = view;\r
- view.on('render', this.initEditor, this);\r
- this.on('complete', this.onSave, this);\r
- },\r
-\r
- initEditor : function(){\r
- this.view.on({\r
- scope: this,\r
- containerclick: this.doBlur,\r
- click: this.doBlur\r
- });\r
- this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});\r
- },\r
- \r
- doBlur: function(){\r
- if(this.editing){\r
- this.field.blur();\r
- }\r
- },\r
-\r
- onMouseDown : function(e, target){\r
- if(!e.ctrlKey && !e.shiftKey){\r
- var item = this.view.findItemFromChild(target);\r
- e.stopEvent();\r
- var record = this.view.store.getAt(this.view.indexOf(item));\r
- this.startEdit(target, record.data[this.dataIndex]);\r
- this.activeRecord = record;\r
- }else{\r
- e.preventDefault();\r
- }\r
- },\r
-\r
- onSave : function(ed, value){\r
- this.activeRecord.set(this.dataIndex, value);\r
- }\r
-});\r
-\r
-\r
-Ext.DataView.DragSelector = function(cfg){\r
- cfg = cfg || {};\r
- var view, proxy, tracker;\r
- var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);\r
- var dragSafe = cfg.dragSafe === true;\r
-\r
- this.init = function(dataView){\r
- view = dataView;\r
- view.on('render', onRender);\r
- };\r
-\r
- function fillRegions(){\r
- rs = [];\r
- view.all.each(function(el){\r
- rs[rs.length] = el.getRegion();\r
- });\r
- bodyRegion = view.el.getRegion();\r
- }\r
-\r
- function cancelClick(){\r
- return false;\r
- }\r
-\r
- function onBeforeStart(e){\r
- return !dragSafe || e.target == view.el.dom;\r
- }\r
-\r
- function onStart(e){\r
- view.on('containerclick', cancelClick, view, {single:true});\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
- view.clearSelections();\r
- }\r
-\r
- function onDrag(e){\r
- var startXY = tracker.startXY;\r
- var xy = tracker.getXY();\r
-\r
- var x = Math.min(startXY[0], xy[0]);\r
- var y = Math.min(startXY[1], xy[1]);\r
- var w = Math.abs(startXY[0] - xy[0]);\r
- var h = Math.abs(startXY[1] - xy[1]);\r
-\r
- dragRegion.left = x;\r
- dragRegion.top = y;\r
- dragRegion.right = x+w;\r
- dragRegion.bottom = y+h;\r
-\r
- dragRegion.constrainTo(bodyRegion);\r
- proxy.setRegion(dragRegion);\r
-\r
- for(var i = 0, len = rs.length; i < len; i++){\r
- var r = rs[i], sel = dragRegion.intersect(r);\r
- if(sel && !r.selected){\r
- r.selected = true;\r
- view.select(i, true);\r
- }else if(!sel && r.selected){\r
- r.selected = false;\r
- view.deselect(i);\r
- }\r
- }\r
- }\r
-\r
- function onEnd(e){\r
- if (!Ext.isIE) {\r
- view.un('containerclick', cancelClick, view); \r
- } \r
- if(proxy){\r
- proxy.setDisplayed(false);\r
- }\r
- }\r
-\r
- function onRender(view){\r
- tracker = new Ext.dd.DragTracker({\r
- onBeforeStart: onBeforeStart,\r
- onStart: onStart,\r
- onDrag: onDrag,\r
- onEnd: onEnd\r
- });\r
- tracker.initEl(view.el);\r
- }\r
+Ext.ns('Ext.ux.grid');
+
+/**
+ * @class Ext.ux.grid.CheckColumn
+ * @extends Object
+ * GridPanel plugin to add a column with check boxes to a grid.
+ * <p>Example usage:</p>
+ * <pre><code>
+// create the column
+var checkColumn = new Ext.grid.CheckColumn({
+ header: 'Indoor?',
+ dataIndex: 'indoor',
+ id: 'check',
+ width: 55
+});
+
+// add the column to the column model
+var cm = new Ext.grid.ColumnModel([{
+ header: 'Foo',
+ ...
+ },
+ checkColumn
+]);
+
+// create the grid
+var grid = new Ext.grid.EditorGridPanel({
+ ...
+ cm: cm,
+ plugins: [checkColumn], // include plugin
+ ...
+});
+ * </code></pre>
+ * In addition to storing a Boolean value within the record data, this
+ * class toggles a css class between <tt>'x-grid3-check-col'</tt> and
+ * <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
+ * a column.
+ */
+Ext.ux.grid.CheckColumn = function(config){
+ Ext.apply(this, config);
+ if(!this.id){
+ this.id = Ext.id();
+ }
+ this.renderer = this.renderer.createDelegate(this);
+};
+
+Ext.ux.grid.CheckColumn.prototype ={
+ init : function(grid){
+ this.grid = grid;
+ this.grid.on('render', function(){
+ var view = this.grid.getView();
+ view.mainBody.on('mousedown', this.onMouseDown, this);
+ }, this);
+ },
+
+ onMouseDown : function(e, t){
+ if(Ext.fly(t).hasClass(this.createId())){
+ e.stopEvent();
+ var index = this.grid.getView().findRowIndex(t);
+ var record = this.grid.store.getAt(index);
+ record.set(this.dataIndex, !record.data[this.dataIndex]);
+ }
+ },
+
+ renderer : function(v, p, record){
+ p.css += ' x-grid3-check-col-td';
+ return String.format('<div class="x-grid3-check-col{0} {1}"> </div>', v ? '-on' : '', this.createId());
+ },
+
+ createId : function(){
+ return 'x-grid3-cc-' + this.id;
+ }
+};
+
+// register ptype
+Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
+
+// backwards compat
+Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;Ext.ns('Ext.ux.grid');
+
+Ext.ux.grid.ColumnHeaderGroup = Ext.extend(Ext.util.Observable, {
+
+ constructor: function(config){
+ this.config = config;
+ },
+
+ init: function(grid){
+ Ext.applyIf(grid.colModel, this.config);
+ Ext.apply(grid.getView(), this.viewConfig);
+ },
+
+ viewConfig: {
+ initTemplates: function(){
+ this.constructor.prototype.initTemplates.apply(this, arguments);
+ var ts = this.templates || {};
+ if(!ts.gcell){
+ ts.gcell = new Ext.XTemplate('<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>');
+ }
+ this.templates = ts;
+ this.hrowRe = new RegExp("ux-grid-hd-group-row-(\\d+)", "");
+ },
+
+ renderHeaders: function(){
+ var ts = this.templates, headers = [], cm = this.cm, rows = cm.rows, tstyle = 'width:' + this.getTotalWidth() + ';';
+
+ for(var row = 0, rlen = rows.length; row < rlen; row++){
+ var r = rows[row], cells = [];
+ for(var i = 0, gcol = 0, len = r.length; i < len; i++){
+ var group = r[i];
+ group.colspan = group.colspan || 1;
+ var id = this.getColumnId(group.dataIndex ? cm.findColumnIndex(group.dataIndex) : gcol), gs = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle.call(this, group, gcol);
+ cells[i] = ts.gcell.apply({
+ cls: 'ux-grid-hd-group-cell',
+ id: id,
+ row: row,
+ style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (group.align ? 'text-align:' + group.align + ';' : ''),
+ tooltip: group.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + group.tooltip + '"' : '',
+ istyle: group.align == 'right' ? 'padding-right:16px' : '',
+ btn: this.grid.enableHdMenu && group.header,
+ value: group.header || ' '
+ });
+ gcol += group.colspan;
+ }
+ headers[row] = ts.header.apply({
+ tstyle: tstyle,
+ cells: cells.join('')
+ });
+ }
+ headers.push(this.constructor.prototype.renderHeaders.apply(this, arguments));
+ return headers.join('');
+ },
+
+ onColumnWidthUpdated: function(){
+ this.constructor.prototype.onColumnWidthUpdated.apply(this, arguments);
+ Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
+ },
+
+ onAllColumnWidthsUpdated: function(){
+ this.constructor.prototype.onAllColumnWidthsUpdated.apply(this, arguments);
+ Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
+ },
+
+ onColumnHiddenUpdated: function(){
+ this.constructor.prototype.onColumnHiddenUpdated.apply(this, arguments);
+ Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
+ },
+
+ getHeaderCell: function(index){
+ return this.mainHd.query(this.cellSelector)[index];
+ },
+
+ findHeaderCell: function(el){
+ return el ? this.fly(el).findParent('td.x-grid3-hd', this.cellSelectorDepth) : false;
+ },
+
+ findHeaderIndex: function(el){
+ var cell = this.findHeaderCell(el);
+ return cell ? this.getCellIndex(cell) : false;
+ },
+
+ updateSortIcon: function(col, dir){
+ var sc = this.sortClasses, hds = this.mainHd.select(this.cellSelector).removeClass(sc);
+ hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
+ },
+
+ handleHdDown: function(e, t){
+ var el = Ext.get(t);
+ if(el.hasClass('x-grid3-hd-btn')){
+ e.stopEvent();
+ var hd = this.findHeaderCell(t);
+ Ext.fly(hd).addClass('x-grid3-hd-menu-open');
+ var index = this.getCellIndex(hd);
+ this.hdCtxIndex = index;
+ var ms = this.hmenu.items, cm = this.cm;
+ ms.get('asc').setDisabled(!cm.isSortable(index));
+ ms.get('desc').setDisabled(!cm.isSortable(index));
+ this.hmenu.on('hide', function(){
+ Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
+ }, this, {
+ single: true
+ });
+ this.hmenu.show(t, 'tl-bl?');
+ }else if(el.hasClass('ux-grid-hd-group-cell') || Ext.fly(t).up('.ux-grid-hd-group-cell')){
+ e.stopEvent();
+ }
+ },
+
+ handleHdMove: function(e, t){
+ var hd = this.findHeaderCell(this.activeHdRef);
+ if(hd && !this.headersDisabled && !Ext.fly(hd).hasClass('ux-grid-hd-group-cell')){
+ var hw = this.splitHandleWidth || 5, r = this.activeHdRegion, x = e.getPageX(), ss = hd.style, cur = '';
+ if(this.grid.enableColumnResize !== false){
+ if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex - 1)){
+ cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'e-resize' : 'col-resize'; // col-resize
+ // not
+ // always
+ // supported
+ }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){
+ cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize';
+ }
+ }
+ ss.cursor = cur;
+ }
+ },
+
+ handleHdOver: function(e, t){
+ var hd = this.findHeaderCell(t);
+ if(hd && !this.headersDisabled){
+ this.activeHdRef = t;
+ this.activeHdIndex = this.getCellIndex(hd);
+ var fly = this.fly(hd);
+ this.activeHdRegion = fly.getRegion();
+ if(!(this.cm.isMenuDisabled(this.activeHdIndex) || fly.hasClass('ux-grid-hd-group-cell'))){
+ fly.addClass('x-grid3-hd-over');
+ this.activeHdBtn = fly.child('.x-grid3-hd-btn');
+ if(this.activeHdBtn){
+ this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight - 1) + 'px';
+ }
+ }
+ }
+ },
+
+ handleHdOut: function(e, t){
+ var hd = this.findHeaderCell(t);
+ if(hd && (!Ext.isIE || !e.within(hd, true))){
+ this.activeHdRef = null;
+ this.fly(hd).removeClass('x-grid3-hd-over');
+ hd.style.cursor = '';
+ }
+ },
+
+ handleHdMenuClick: function(item){
+ var index = this.hdCtxIndex, cm = this.cm, ds = this.ds, id = item.getItemId();
+ switch(id){
+ case 'asc':
+ ds.sort(cm.getDataIndex(index), 'ASC');
+ break;
+ case 'desc':
+ ds.sort(cm.getDataIndex(index), 'DESC');
+ break;
+ default:
+ if(id.substr(0, 5) == 'group'){
+ var i = id.split('-'), row = parseInt(i[1], 10), col = parseInt(i[2], 10), r = this.cm.rows[row], group, gcol = 0;
+ for(var i = 0, len = r.length; i < len; i++){
+ group = r[i];
+ if(col >= gcol && col < gcol + group.colspan){
+ break;
+ }
+ gcol += group.colspan;
+ }
+ if(item.checked){
+ var max = cm.getColumnsBy(this.isHideableColumn, this).length;
+ for(var i = gcol, len = gcol + group.colspan; i < len; i++){
+ if(!cm.isHidden(i)){
+ max--;
+ }
+ }
+ if(max < 1){
+ this.onDenyColumnHide();
+ return false;
+ }
+ }
+ for(var i = gcol, len = gcol + group.colspan; i < len; i++){
+ if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){
+ cm.setHidden(i, item.checked);
+ }
+ }
+ }else{
+ index = cm.getIndexById(id.substr(4));
+ if(index != -1){
+ if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
+ this.onDenyColumnHide();
+ return false;
+ }
+ cm.setHidden(index, item.checked);
+ }
+ }
+ item.checked = !item.checked;
+ if(item.menu){
+ var updateChildren = function(menu){
+ menu.items.each(function(childItem){
+ if(!childItem.disabled){
+ childItem.setChecked(item.checked, false);
+ if(childItem.menu){
+ updateChildren(childItem.menu);
+ }
+ }
+ });
+ }
+ updateChildren(item.menu);
+ }
+ var parentMenu = item, parentItem;
+ while(parentMenu = parentMenu.parentMenu){
+ if(!parentMenu.parentMenu || !(parentItem = parentMenu.parentMenu.items.get(parentMenu.getItemId())) || !parentItem.setChecked){
+ break;
+ }
+ var checked = parentMenu.items.findIndexBy(function(m){
+ return m.checked;
+ }) >= 0;
+ parentItem.setChecked(checked, true);
+ }
+ item.checked = !item.checked;
+ }
+ return true;
+ },
+
+ beforeColMenuShow: function(){
+ var cm = this.cm, rows = this.cm.rows;
+ this.colMenu.removeAll();
+ for(var col = 0, clen = cm.getColumnCount(); col < clen; col++){
+ var menu = this.colMenu, title = cm.getColumnHeader(col), text = [];
+ if(cm.config[col].fixed !== true && cm.config[col].hideable !== false){
+ for(var row = 0, rlen = rows.length; row < rlen; row++){
+ var r = rows[row], group, gcol = 0;
+ for(var i = 0, len = r.length; i < len; i++){
+ group = r[i];
+ if(col >= gcol && col < gcol + group.colspan){
+ break;
+ }
+ gcol += group.colspan;
+ }
+ if(group && group.header){
+ if(cm.hierarchicalColMenu){
+ var gid = 'group-' + row + '-' + gcol;
+ var item = menu.items.item(gid);
+ var submenu = item ? item.menu : null;
+ if(!submenu){
+ submenu = new Ext.menu.Menu({
+ itemId: gid
+ });
+ submenu.on("itemclick", this.handleHdMenuClick, this);
+ var checked = false, disabled = true;
+ for(var c = gcol, lc = gcol + group.colspan; c < lc; c++){
+ if(!cm.isHidden(c)){
+ checked = true;
+ }
+ if(cm.config[c].hideable !== false){
+ disabled = false;
+ }
+ }
+ menu.add({
+ itemId: gid,
+ text: group.header,
+ menu: submenu,
+ hideOnClick: false,
+ checked: checked,
+ disabled: disabled
+ });
+ }
+ menu = submenu;
+ }else{
+ text.push(group.header);
+ }
+ }
+ }
+ text.push(title);
+ menu.add(new Ext.menu.CheckItem({
+ itemId: "col-" + cm.getColumnId(col),
+ text: text.join(' '),
+ checked: !cm.isHidden(col),
+ hideOnClick: false,
+ disabled: cm.config[col].hideable === false
+ }));
+ }
+ }
+ },
+
+ renderUI: function(){
+ this.constructor.prototype.renderUI.apply(this, arguments);
+ Ext.apply(this.columnDrop, Ext.ux.grid.ColumnHeaderGroup.prototype.columnDropConfig);
+ Ext.apply(this.splitZone, Ext.ux.grid.ColumnHeaderGroup.prototype.splitZoneConfig);
+ }
+ },
+
+ splitZoneConfig: {
+ allowHeaderDrag: function(e){
+ return !e.getTarget(null, null, true).hasClass('ux-grid-hd-group-cell');
+ }
+ },
+
+ columnDropConfig: {
+ getTargetFromEvent: function(e){
+ var t = Ext.lib.Event.getTarget(e);
+ return this.view.findHeaderCell(t);
+ },
+
+ positionIndicator: function(h, n, e){
+ var data = Ext.ux.grid.ColumnHeaderGroup.prototype.getDragDropData.call(this, h, n, e);
+ if(data === false){
+ return false;
+ }
+ var px = data.px + this.proxyOffsets[0];
+ this.proxyTop.setLeftTop(px, data.r.top + this.proxyOffsets[1]);
+ this.proxyTop.show();
+ this.proxyBottom.setLeftTop(px, data.r.bottom);
+ this.proxyBottom.show();
+ return data.pt;
+ },
+
+ onNodeDrop: function(n, dd, e, data){
+ var h = data.header;
+ if(h != n){
+ var d = Ext.ux.grid.ColumnHeaderGroup.prototype.getDragDropData.call(this, h, n, e);
+ if(d === false){
+ return false;
+ }
+ var cm = this.grid.colModel, right = d.oldIndex < d.newIndex, rows = cm.rows;
+ for(var row = d.row, rlen = rows.length; row < rlen; row++){
+ var r = rows[row], len = r.length, fromIx = 0, span = 1, toIx = len;
+ for(var i = 0, gcol = 0; i < len; i++){
+ var group = r[i];
+ if(d.oldIndex >= gcol && d.oldIndex < gcol + group.colspan){
+ fromIx = i;
+ }
+ if(d.oldIndex + d.colspan - 1 >= gcol && d.oldIndex + d.colspan - 1 < gcol + group.colspan){
+ span = i - fromIx + 1;
+ }
+ if(d.newIndex >= gcol && d.newIndex < gcol + group.colspan){
+ toIx = i;
+ }
+ gcol += group.colspan;
+ }
+ var groups = r.splice(fromIx, span);
+ rows[row] = r.splice(0, toIx - (right ? span : 0)).concat(groups).concat(r);
+ }
+ for(var c = 0; c < d.colspan; c++){
+ var oldIx = d.oldIndex + (right ? 0 : c), newIx = d.newIndex + (right ? -1 : c);
+ cm.moveColumn(oldIx, newIx);
+ this.grid.fireEvent("columnmove", oldIx, newIx);
+ }
+ return true;
+ }
+ return false;
+ }
+ },
+
+ getGroupStyle: function(group, gcol){
+ var width = 0, hidden = true;
+ for(var i = gcol, len = gcol + group.colspan; i < len; i++){
+ if(!this.cm.isHidden(i)){
+ var cw = this.cm.getColumnWidth(i);
+ if(typeof cw == 'number'){
+ width += cw;
+ }
+ hidden = false;
+ }
+ }
+ return {
+ width: (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2) ? width : Math.max(width - this.borderWidth, 0)) + 'px',
+ hidden: hidden
+ };
+ },
+
+ updateGroupStyles: function(col){
+ var tables = this.mainHd.query('.x-grid3-header-offset > table'), tw = this.getTotalWidth(), rows = this.cm.rows;
+ for(var row = 0; row < tables.length; row++){
+ tables[row].style.width = tw;
+ if(row < rows.length){
+ var cells = tables[row].firstChild.firstChild.childNodes;
+ for(var i = 0, gcol = 0; i < cells.length; i++){
+ var group = rows[row][i];
+ if((typeof col != 'number') || (col >= gcol && col < gcol + group.colspan)){
+ var gs = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle.call(this, group, gcol);
+ cells[i].style.width = gs.width;
+ cells[i].style.display = gs.hidden ? 'none' : '';
+ }
+ gcol += group.colspan;
+ }
+ }
+ }
+ },
+
+ getGroupRowIndex: function(el){
+ if(el){
+ var m = el.className.match(this.hrowRe);
+ if(m && m[1]){
+ return parseInt(m[1], 10);
+ }
+ }
+ return this.cm.rows.length;
+ },
+
+ getGroupSpan: function(row, col){
+ if(row < 0){
+ return {
+ col: 0,
+ colspan: this.cm.getColumnCount()
+ };
+ }
+ var r = this.cm.rows[row];
+ if(r){
+ for(var i = 0, gcol = 0, len = r.length; i < len; i++){
+ var group = r[i];
+ if(col >= gcol && col < gcol + group.colspan){
+ return {
+ col: gcol,
+ colspan: group.colspan
+ };
+ }
+ gcol += group.colspan;
+ }
+ return {
+ col: gcol,
+ colspan: 0
+ };
+ }
+ return {
+ col: col,
+ colspan: 1
+ };
+ },
+
+ getDragDropData: function(h, n, e){
+ if(h.parentNode != n.parentNode){
+ return false;
+ }
+ var cm = this.grid.colModel, x = Ext.lib.Event.getPageX(e), r = Ext.lib.Dom.getRegion(n.firstChild), px, pt;
+ if((r.right - x) <= (r.right - r.left) / 2){
+ px = r.right + this.view.borderWidth;
+ pt = "after";
+ }else{
+ px = r.left;
+ pt = "before";
+ }
+ var oldIndex = this.view.getCellIndex(h), newIndex = this.view.getCellIndex(n);
+ if(cm.isFixed(newIndex)){
+ return false;
+ }
+ var row = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupRowIndex.call(this.view, h),
+ oldGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row, oldIndex),
+ newGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row, newIndex),
+ oldIndex = oldGroup.col;
+ newIndex = newGroup.col + (pt == "after" ? newGroup.colspan : 0);
+ if(newIndex >= oldGroup.col && newIndex <= oldGroup.col + oldGroup.colspan){
+ return false;
+ }
+ var parentGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row - 1, oldIndex);
+ if(newIndex < parentGroup.col || newIndex > parentGroup.col + parentGroup.colspan){
+ return false;
+ }
+ return {
+ r: r,
+ px: px,
+ pt: pt,
+ row: row,
+ oldIndex: oldIndex,
+ newIndex: newIndex,
+ colspan: oldGroup.colspan
+ };
+ }
+});Ext.ns('Ext.ux.tree');
+
+/**
+ * @class Ext.ux.tree.ColumnTree
+ * @extends Ext.tree.TreePanel
+ *
+ * @xtype columntree
+ */
+Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
+ lines : false,
+ borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
+ cls : 'x-column-tree',
+
+ onRender : function(){
+ Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
+ this.headers = this.header.createChild({cls:'x-tree-headers'});
+
+ var cols = this.columns, c;
+ var totalWidth = 0;
+ var scrollOffset = 19; // similar to Ext.grid.GridView default
+
+ for(var i = 0, len = cols.length; i < len; i++){
+ c = cols[i];
+ totalWidth += c.width;
+ this.headers.createChild({
+ cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
+ cn: {
+ cls:'x-tree-hd-text',
+ html: c.header
+ },
+ style:'width:'+(c.width-this.borderWidth)+'px;'
+ });
+ }
+ this.headers.createChild({cls:'x-clear'});
+ // prevent floats from wrapping when clipped
+ this.headers.setWidth(totalWidth+scrollOffset);
+ this.innerCt.setWidth(totalWidth);
+ }
+});
+
+Ext.reg('columntree', Ext.ux.tree.ColumnTree);
+
+//backwards compat
+Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;
+
+
+/**
+ * @class Ext.ux.tree.ColumnNodeUI
+ * @extends Ext.tree.TreeNodeUI
+ */
+Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
+ focus: Ext.emptyFn, // prevent odd scrolling behavior
+
+ renderElements : function(n, a, targetNode, bulkRender){
+ this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
+
+ var t = n.getOwnerTree();
+ var cols = t.columns;
+ var bw = t.borderWidth;
+ var c = cols[0];
+
+ var buf = [
+ '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
+ '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
+ '<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">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
+ "</div>"];
+ for(var i = 1, len = cols.length; i < len; i++){
+ c = cols[i];
+
+ buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
+ '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
+ "</div>");
+ }
+ buf.push(
+ '<div class="x-clear"></div></div>',
+ '<ul class="x-tree-node-ct" style="display:none;"></ul>',
+ "</li>");
+
+ if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
+ this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
+ n.nextSibling.ui.getEl(), buf.join(""));
+ }else{
+ this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
+ }
+
+ this.elNode = this.wrap.childNodes[0];
+ this.ctNode = this.wrap.childNodes[1];
+ var cs = this.elNode.firstChild.childNodes;
+ this.indentNode = cs[0];
+ this.ecNode = cs[1];
+ this.iconNode = cs[2];
+ this.anchor = cs[3];
+ this.textNode = cs[3].firstChild;
+ }
+});
+
+//backwards compat
+Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;
+/**
+ * @class Ext.DataView.LabelEditor
+ * @extends Ext.Editor
+ *
+ */
+Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
+ alignment: "tl-tl",
+ hideEl : false,
+ cls: "x-small-editor",
+ shim: false,
+ completeOnEnter: true,
+ cancelOnEsc: true,
+ labelSelector: 'span.x-editable',
+
+ constructor: function(cfg, field){
+ Ext.DataView.LabelEditor.superclass.constructor.call(this,
+ field || new Ext.form.TextField({
+ allowBlank: false,
+ growMin:90,
+ growMax:240,
+ grow:true,
+ selectOnFocus:true
+ }), cfg
+ );
+ },
+
+ init : function(view){
+ this.view = view;
+ view.on('render', this.initEditor, this);
+ this.on('complete', this.onSave, this);
+ },
+
+ initEditor : function(){
+ this.view.on({
+ scope: this,
+ containerclick: this.doBlur,
+ click: this.doBlur
+ });
+ this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
+ },
+
+ doBlur: function(){
+ if(this.editing){
+ this.field.blur();
+ }
+ },
+
+ onMouseDown : function(e, target){
+ if(!e.ctrlKey && !e.shiftKey){
+ var item = this.view.findItemFromChild(target);
+ e.stopEvent();
+ var record = this.view.store.getAt(this.view.indexOf(item));
+ this.startEdit(target, record.data[this.dataIndex]);
+ this.activeRecord = record;
+ }else{
+ e.preventDefault();
+ }
+ },
+
+ onSave : function(ed, value){
+ this.activeRecord.set(this.dataIndex, value);
+ }
+});
+
+
+Ext.DataView.DragSelector = function(cfg){
+ cfg = cfg || {};
+ var view, proxy, tracker;
+ var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
+ var dragSafe = cfg.dragSafe === true;
+
+ this.init = function(dataView){
+ view = dataView;
+ view.on('render', onRender);
+ };
+
+ function fillRegions(){
+ rs = [];
+ view.all.each(function(el){
+ rs[rs.length] = el.getRegion();
+ });
+ bodyRegion = view.el.getRegion();
+ }
+
+ function cancelClick(){
+ return false;
+ }
+
+ function onBeforeStart(e){
+ return !dragSafe || e.target == view.el.dom;
+ }
+
+ function onStart(e){
+ view.on('containerclick', cancelClick, view, {single:true});
+ if(!proxy){
+ proxy = view.el.createChild({cls:'x-view-selector'});
+ }else{
+ if(proxy.dom.parentNode !== view.el.dom){
+ view.el.dom.appendChild(proxy.dom);
+ }
+ proxy.setDisplayed('block');
+ }
+ fillRegions();
+ view.clearSelections();
+ }
+
+ function onDrag(e){
+ var startXY = tracker.startXY;
+ var xy = tracker.getXY();
+
+ var x = Math.min(startXY[0], xy[0]);
+ var y = Math.min(startXY[1], xy[1]);
+ var w = Math.abs(startXY[0] - xy[0]);
+ var h = Math.abs(startXY[1] - xy[1]);
+
+ dragRegion.left = x;
+ dragRegion.top = y;
+ dragRegion.right = x+w;
+ dragRegion.bottom = y+h;
+
+ dragRegion.constrainTo(bodyRegion);
+ proxy.setRegion(dragRegion);
+
+ for(var i = 0, len = rs.length; i < len; i++){
+ var r = rs[i], sel = dragRegion.intersect(r);
+ if(sel && !r.selected){
+ r.selected = true;
+ view.select(i, true);
+ }else if(!sel && r.selected){
+ r.selected = false;
+ view.deselect(i);
+ }
+ }
+ }
+
+ function onEnd(e){
+ if (!Ext.isIE) {
+ view.un('containerclick', cancelClick, view);
+ }
+ if(proxy){
+ proxy.setDisplayed(false);
+ }
+ }
+
+ function onRender(view){
+ tracker = new Ext.dd.DragTracker({
+ onBeforeStart: onBeforeStart,
+ onStart: onStart,
+ onDrag: onDrag,
+ onEnd: onEnd
+ });
+ tracker.initEl(view.el);
+ }
};Ext.ns('Ext.ux.form');
/**
// backwards compat
Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
-/**\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
- 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
-\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
- }\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
- GEvent.bind(this.gmap, 'load', this, function(){\r
- this.onMapReady();\r
- });\r
-\r
- },\r
- onMapReady : function(){\r
- this.addMarkers(this.markers);\r
- this.addMapControls();\r
- this.addOptions(); \r
- },\r
- onResize : function(w, h){\r
-\r
- if (typeof this.getMap() == 'object') {\r
- this.gmap.checkResize();\r
- }\r
- \r
- Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);\r
-\r
- },\r
- setSize : function(width, height, animate){\r
- \r
- if (typeof this.getMap() == 'object') {\r
- this.gmap.checkResize();\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
- getCenter : function(){\r
- \r
- return this.getMap().getCenter();\r
- \r
- },\r
- getCenterLatLng : function(){\r
- \r
- var ll = this.getCenter();\r
- return {lat: ll.lat(), lng: ll.lng()};\r
- \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
- },\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
-\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
- this.getMap().addOverlay(mark);\r
-\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
- \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
- },\r
- addOption : function(mc){\r
- \r
- var mcf = this.getMap()[mc];\r
- if (typeof mcf === 'function') {\r
- this.getMap()[mc]();\r
- } \r
- \r
- },\r
- geoCodeLookup : function(addr) {\r
- \r
- this.geocoder = new GClientGeocoder();\r
- this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));\r
- \r
- },\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
- \r
- }\r
- \r
-});\r
-\r
-Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.namespace('Ext.ux.grid');\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
-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
-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
- /** @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
- /**\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
- /**\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
- /**\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
- },\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
- },\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
- }\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
- /**\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
- 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
- /**\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
- /**\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
- 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
- /** @private */\r
- onBeforeCheck : function (check, value) {\r
- return !value || this.getMenuFilter().isActivatable();\r
- },\r
-\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
-\r
- if (filter == this.getMenuFilter()) {\r
- this.menu.setChecked(filter.active, false);\r
- }\r
-\r
- if ((this.autoReload || this.local) && !this.applyingState) {\r
- this.deferredUpdate.delay(this.updateBuffer);\r
- }\r
- this.updateColumnHeadings();\r
-\r
- if (!this.applyingState) {\r
- this.grid.saveState();\r
- }\r
- this.grid.fireEvent('filterupdate', this, filter);\r
- },\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
- /**\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
- /**\r
- * @private\r
- * Handler called when the grid's view is refreshed\r
- */\r
- onRefresh : function () {\r
- this.updateColumnHeadings();\r
- },\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
- }\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
- /**\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
- /**\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
- },\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
- /**\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
- /**\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
- 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
-// 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.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
- 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
-\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
- /**\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
-\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
-\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
- // 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
- /**\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
-\r
- onCheckChange : function () {\r
- this.setActive(this.isActivatable());\r
- this.fireEvent('update', this);\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
-\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
- field.setChecked(true);\r
- \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
- this.fireEvent('update', 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
- 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
- /**\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.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
-\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
- return args;\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
- \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
-\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
- 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
- return true;\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
- * </code></pre>\r
- * \r
- */\r
-Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
-\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 {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
- /** \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
- // 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
- /**\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
- /** @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
- /**\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
- * @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
- menuItemCfgs : {\r
- emptyText: 'Enter Filter Text...',\r
- selectOnFocus: true,\r
- width: 125\r
- },\r
-\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
- /** \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
- /**\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
- * 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 values = this.getValue();\r
- for (key in values) {\r
- if (values[key] !== undefined) {\r
- return true;\r
- }\r
- }\r
- return false;\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 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
- /**\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
- if (values.lt !== undefined && val >= values.lt) {\r
- return false;\r
- }\r
- if (values.gt !== undefined && val <= values.gt) {\r
- return false;\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
- /**\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
- 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
-\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
- /**\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
- /**\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
- * 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
-\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
-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
- 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
- destroy : function () {\r
- if (this.store) {\r
- this.store.destroy(); \r
- }\r
- Ext.ux.menu.ListMenu.superclass.destroy.call(this);\r
- },\r
-\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
- /**\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
- constructor : function (config) {\r
-\r
- Ext.ux.menu.RangeMenu.superclass.constructor.call(this, config);\r
-\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
- /**\r
- * @private\r
- * called by this.updateTask\r
- */\r
- fireUpdate : function () {\r
- this.fireEvent('update', this);\r
- },\r
- \r
- /**\r
- * Get and return the value of the filter.\r
- * @return {String} The value of this filter\r
- */\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
- 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
- * @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.hide(true);\r
- return;\r
- }\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
-/**\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
- 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
- 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
- * 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
- 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
- },\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
-\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
- }\r
- }\r
- return data;\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
- 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
- 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
- },\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
- }\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
-\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
- refreshSummaryById : function(gid){\r
- var g = Ext.getDom(gid);\r
- if(!g){\r
- return false;\r
- }\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
- doUpdate : function(ds, record){\r
- this.refreshSummaryById(record._groupId);\r
- },\r
-\r
- doRemove : function(ds, record, index, isUpdate){\r
- if(!isUpdate){\r
- this.refreshSummaryById(record._groupId);\r
- }\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
- */\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
-\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
- */\r
-\r
-Ext.ux.grid.GroupSummary.Calculations = {\r
- 'sum' : function(v, record, field){\r
- return v + (record.data[field]||0);\r
- },\r
-\r
- 'count' : function(v, record, field, data){\r
- return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);\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
-\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
- '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
- /**\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
- 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
- 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
- }\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
- },\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
- */\r
- setActiveTab : function(item){\r
- item = this.getComponent(item);\r
- if(!item){\r
- return false;\r
- }\r
- if(!this.rendered){\r
- this.activeTab = item;\r
- return true;\r
- }\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
- 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
- getTabEl: function(item){\r
- if (item == this.mainItem) {\r
- return this.groupEl;\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
- }\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
- \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
- getMainItem: function(){\r
- return this.mainItem || null;\r
- },\r
- \r
- // private\r
- onBeforeShowItem: function(item){\r
- if (item != this.activeTab) {\r
- this.setActiveTab(item);\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
- }\r
- }\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
- \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
- //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
- 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
-\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
- if(this.plain){\r
- var pos = this.tabPosition == 'top' ? 'header' : 'footer';\r
- this[pos].addClass('x-tab-panel-'+pos+'-plain');\r
- }\r
-\r
- var st = this[this.stripTarget];\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
-\r
- var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);\r
- this.strip = new Ext.Element(this.stripWrap.dom.firstChild);\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
-\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
- afterRender: function(){\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
- 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
- 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
- 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
- else {\r
- t.item.ownerCt.setActiveTab(t.item);\r
- }\r
- }\r
- },\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
- 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
- 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
- else {\r
- this.tabJoint.hide();\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
- 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
-\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
- this.mon(group, {\r
- scope: this,\r
- changemainitem: this.onGroupChangeMainItem,\r
- beforetabchange: this.onGroupBeforeTabChange\r
- });\r
- },\r
- \r
- setActiveGroup : function(group) {\r
- group = this.getComponent(group);\r
- if(!group){\r
- return false;\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
- 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
- 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('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
-\r
- initComponent: function(){\r
- Ext.ux.form.ItemSelector.superclass.initComponent.call(this);\r
- this.addEvents({\r
- 'rowdblclick' : true,\r
- 'change' : true\r
- });\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
-\r
- var p = new Ext.Panel({\r
- bodyStyle:this.bodyStyle,\r
- border:this.border,\r
- layout:"table",\r
- layoutConfig:{columns:3}\r
- });\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
-\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
- 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
- },\r
- \r
- doLayout: function(){\r
- if(this.rendered){\r
- this.fromMultiselect.fs.doLayout();\r
- this.toMultiselect.fs.doLayout();\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
- },\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
- 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
- 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
- },\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
- }\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
- }\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
- 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
- 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
- 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
- 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
- },\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
- return this.fireEvent('rowdblclick', vw, index, node, e);\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
- }\r
- this.valueChanged(this.toMultiselect.store);\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.grid');\r
-\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
- getLockedRows : function(){\r
- return this.hasRows() ? this.lockedBody.dom.childNodes : [];\r
- },\r
- \r
- getLockedRow : function(row){\r
- return this.getLockedRows()[row];\r
- },\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 Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - llen);\r
- },\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
- return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - llen);\r
- },\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
- removeRowClass : function(row, cls){\r
- var r = this.getLockedRow(row);\r
- if(r){\r
- this.fly(r).removeClass(cls);\r
- }\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
- Ext.ux.grid.LockingGridView.superclass.removeRows.call(this, firstRow, lastRow);\r
- },\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
- 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
- }\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
- this.onAllColumnWidthsUpdated(ws, tw);\r
- this.syncHeaderHeight();\r
- },\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
- 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
- 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
- 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
- var alt = [];\r
- if(stripe && ((rowIndex+1) % 2 === 0)){\r
- alt[0] = 'x-grid3-row-alt';\r
- }\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
- 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
- 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
- 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
- afterRender : function(){\r
- if(!this.ds || !this.cm){\r
- return;\r
- }\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
- },\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
- 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
- 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
- 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
- },\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
-\r
-Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {\r
- isLocked : function(colIndex){\r
- return this.config[colIndex].locked === true;\r
- },\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
- 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
- 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
- },\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
-/**\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
- // private\r
- defaultAutoCreate : {tag: "div"},\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
- this.addEvents({\r
- 'dblclick' : true,\r
- 'click' : true,\r
- 'change' : true,\r
- 'drop' : true\r
- });\r
- },\r
-\r
- // private\r
- onRender: function(ct, position){\r
- Ext.ux.form.MultiSelect.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
- });\r
- fs.body.addClass('ux-mselect');\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
- });\r
-\r
- fs.add(this.view);\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.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
- // private\r
- afterRender: function(){\r
- Ext.ux.form.MultiSelect.superclass.afterRender.call(this);\r
-\r
- if (this.ddReorder && !this.dragGroup && !this.dropGroup){\r
- this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();\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
- }\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
- }\r
- return returnArray.join(this.delimiter);\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
- }\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
- },\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
- 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
- // inherit docs\r
- disable: function(){\r
- this.disabled = true;\r
- this.hiddenField.dom.disabled = true;\r
- this.fs.disable();\r
- },\r
-\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
-\r
-\r
-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
+/**
+ * @class Ext.ux.GMapPanel
+ * @extends Ext.Panel
+ * @author Shea Frederick
+ */
+Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
+ initComponent : function(){
+
+ var defConfig = {
+ plain: true,
+ zoomLevel: 3,
+ yaw: 180,
+ pitch: 0,
+ zoom: 0,
+ gmapType: 'map',
+ border: false
+ };
+
+ Ext.applyIf(this,defConfig);
+
+ Ext.ux.GMapPanel.superclass.initComponent.call(this);
-/* 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();
+ },
+ afterRender : function(){
+
+ var wh = this.ownerCt.getSize();
+ Ext.applyIf(this, wh);
+
+ Ext.ux.GMapPanel.superclass.afterRender.call(this);
+
+ if (this.gmapType === 'map'){
+ this.gmap = new GMap2(this.body.dom);
}
- 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);
+
+ if (this.gmapType === 'panorama'){
+ this.gmap = new GStreetviewPanorama(this.body.dom);
+ }
+
+ if (typeof this.addControl == 'object' && this.gmapType === 'map') {
+ this.gmap.addControl(this.addControl);
+ }
+
+ if (typeof this.setCenter === 'object') {
+ if (typeof this.setCenter.geoCodeAddr === 'string'){
+ this.geoCodeLookup(this.setCenter.geoCodeAddr);
+ }else{
+ if (this.gmapType === 'map'){
+ var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
+ this.gmap.setCenter(point, this.zoomLevel);
+ }
+ if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
+ this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
+ }
+ }
+ if (this.gmapType === 'panorama'){
+ this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
}
}
- return res;
- };
-}
-Ext.ns('Ext.ux.data');
+ GEvent.bind(this.gmap, 'load', this, function(){
+ this.onMapReady();
+ });
-/**
- * @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 ||
+ onMapReady : function(){
+ this.addMarkers(this.markers);
+ this.addMapControls();
+ this.addOptions();
+ },
+ onResize : function(w, h){
+
+ if (typeof this.getMap() == 'object') {
+ this.gmap.checkResize();
+ }
+
+ Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
+
+ },
+ setSize : function(width, height, animate){
+
+ if (typeof this.getMap() == 'object') {
+ this.gmap.checkResize();
+ }
+
+ Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
+
+ },
+ getMap : function(){
+
+ return this.gmap;
+
+ },
+ getCenter : function(){
+
+ return this.getMap().getCenter();
+
+ },
+ getCenterLatLng : function(){
+
+ var ll = this.getCenter();
+ return {lat: ll.lat(), lng: ll.lng()};
+
+ },
+ addMarkers : function(markers) {
+
+ if (Ext.isArray(markers)){
+ for (var i = 0; i < markers.length; i++) {
+ var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
+ this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
+ }
+ }
+
+ },
+ addMarker : function(point, marker, clear, center, listeners){
+
+ Ext.applyIf(marker,G_DEFAULT_ICON);
+
+ if (clear === true){
+ this.getMap().clearOverlays();
+ }
+ if (center === true) {
+ this.getMap().setCenter(point, this.zoomLevel);
+ }
+
+ var mark = new GMarker(point,marker);
+ if (typeof listeners === 'object'){
+ for (evt in listeners) {
+ GEvent.bind(mark, evt, this, listeners[evt]);
+ }
+ }
+ this.getMap().addOverlay(mark);
+
+ },
+ addMapControls : function(){
+
+ if (this.gmapType === 'map') {
+ if (Ext.isArray(this.mapControls)) {
+ for(i=0;i<this.mapControls.length;i++){
+ this.addMapControl(this.mapControls[i]);
+ }
+ }else if(typeof this.mapControls === 'string'){
+ this.addMapControl(this.mapControls);
+ }else if(typeof this.mapControls === 'object'){
+ this.getMap().addControl(this.mapControls);
+ }
+ }
+
+ },
+ addMapControl : function(mc){
+
+ var mcf = window[mc];
+ if (typeof mcf === 'function') {
+ this.getMap().addControl(new mcf());
+ }
+
+ },
+ addOptions : function(){
+
+ if (Ext.isArray(this.mapConfOpts)) {
+ var mc;
+ for(i=0;i<this.mapConfOpts.length;i++){
+ this.addOption(this.mapConfOpts[i]);
+ }
+ }else if(typeof this.mapConfOpts === 'string'){
+ this.addOption(this.mapConfOpts);
+ }
+
+ },
+ addOption : function(mc){
+
+ var mcf = this.getMap()[mc];
+ if (typeof mcf === 'function') {
+ this.getMap()[mc]();
+ }
+
+ },
+ geoCodeLookup : function(addr) {
+
+ this.geocoder = new GClientGeocoder();
+ this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));
+
+ },
+ addAddressToMap : function(response) {
+
+ if (!response || response.Status.code != 200) {
+ Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
+ }else{
+ place = response.Placemark[0];
+ addressinfo = place.AddressDetails;
+ accuracy = addressinfo.Accuracy;
+ if (accuracy === 0) {
+ Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
+ }else{
+ if (accuracy < 7) {
+ Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
+ }else{
+ point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
+ if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
+ this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
+ }
+ }
+ }
+ }
+
+ }
+
+});
+
+Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.namespace('Ext.ux.grid');
+
+/**
+ * @class Ext.ux.grid.GridFilters
+ * @extends Ext.util.Observable
+ * <p>GridFilter is a plugin (<code>ptype='gridfilters'</code>) for grids that
+ * allow for a slightly more robust representation of filtering than what is
+ * provided by the default store.</p>
+ * <p>Filtering is adjusted by the user using the grid's column header menu
+ * (this menu can be disabled through configuration). Through this menu users
+ * can configure, enable, and disable filters for each column.</p>
+ * <p><b><u>Features:</u></b></p>
+ * <div class="mdetail-params"><ul>
+ * <li><b>Filtering implementations</b> :
+ * <div class="sub-desc">
+ * Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can
+ * be backed by a Ext.data.Store), and Boolean. Additional custom filter types
+ * and menus are easily created by extending Ext.ux.grid.filter.Filter.
+ * </div></li>
+ * <li><b>Graphical indicators</b> :
+ * <div class="sub-desc">
+ * Columns that are filtered have {@link #filterCls a configurable css class}
+ * applied to the column headers.
+ * </div></li>
+ * <li><b>Paging</b> :
+ * <div class="sub-desc">
+ * If specified as a plugin to the grid's configured PagingToolbar, the current page
+ * will be reset to page 1 whenever you update the filters.
+ * </div></li>
+ * <li><b>Automatic Reconfiguration</b> :
+ * <div class="sub-desc">
+ * Filters automatically reconfigure when the grid 'reconfigure' event fires.
+ * </div></li>
+ * <li><b>Stateful</b> :
+ * Filter information will be persisted across page loads by specifying a
+ * <code>stateId</code> in the Grid configuration.
+ * <div class="sub-desc">
+ * The filter collection binds to the
+ * <code>{@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}</code>
+ * and <code>{@link Ext.grid.GridPanel#beforestatesave beforestatesave}</code>
+ * events in order to be stateful.
+ * </div></li>
+ * <li><b>Grid Changes</b> :
+ * <div class="sub-desc"><ul>
+ * <li>A <code>filters</code> <i>property</i> is added to the grid pointing to
+ * this plugin.</li>
+ * <li>A <code>filterupdate</code> <i>event</i> is added to the grid and is
+ * fired upon onStateChange completion.</li>
+ * </ul></div></li>
+ * <li><b>Server side code examples</b> :
+ * <div class="sub-desc"><ul>
+ * <li><a href="http://www.vinylfox.com/extjs/grid-filter-php-backend-code.php">PHP</a> - (Thanks VinylFox)</li>
+ * <li><a href="http://extjs.com/forum/showthread.php?p=77326#post77326">Ruby on Rails</a> - (Thanks Zyclops)</li>
+ * <li><a href="http://extjs.com/forum/showthread.php?p=176596#post176596">Ruby on Rails</a> - (Thanks Rotomaul)</li>
+ * <li><a href="http://www.debatablybeta.com/posts/using-extjss-grid-filtering-with-django/">Python</a> - (Thanks Matt)</li>
+ * <li><a href="http://mcantrell.wordpress.com/2008/08/22/extjs-grids-and-grails/">Grails</a> - (Thanks Mike)</li>
+ * </ul></div></li>
+ * </ul></div>
+ * <p><b><u>Example usage:</u></b></p>
+ * <pre><code>
+var store = new Ext.data.GroupingStore({
+ ...
+});
+
+var filters = new Ext.ux.grid.GridFilters({
+ autoReload: false, //don't reload automatically
+ local: true, //only filter locally
+ // filters may be configured through the plugin,
+ // or in the column definition within the column model configuration
+ filters: [{
+ type: 'numeric',
+ dataIndex: 'id'
+ }, {
+ type: 'string',
+ dataIndex: 'name'
+ }, {
+ type: 'numeric',
+ dataIndex: 'price'
+ }, {
+ type: 'date',
+ dataIndex: 'dateAdded'
+ }, {
+ type: 'list',
+ dataIndex: 'size',
+ options: ['extra small', 'small', 'medium', 'large', 'extra large'],
+ phpMode: true
+ }, {
+ type: 'boolean',
+ dataIndex: 'visible'
+ }]
+});
+var cm = new Ext.grid.ColumnModel([{
+ ...
+}]);
+
+var grid = new Ext.grid.GridPanel({
+ ds: store,
+ cm: cm,
+ view: new Ext.grid.GroupingView(),
+ plugins: [filters],
+ height: 400,
+ width: 700,
+ bbar: new Ext.PagingToolbar({
+ store: store,
+ pageSize: 15,
+ plugins: [filters] //reset page to page 1 if filters change
+ })
+ });
+
+store.load({params: {start: 0, limit: 15}});
+
+// a filters property is added to the grid
+grid.filters
+ * </code></pre>
+ */
+Ext.ux.grid.GridFilters = Ext.extend(Ext.util.Observable, {
+ /**
+ * @cfg {Boolean} autoReload
+ * Defaults to true, reloading the datasource when a filter change happens.
+ * Set this to false to prevent the datastore from being reloaded if there
+ * are changes to the filters. See <code>{@link updateBuffer}</code>.
+ */
+ autoReload : true,
+ /**
+ * @cfg {Boolean} encode
+ * Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to
+ * encode the filter query parameter sent with a remote request.
+ * Defaults to false.
+ */
+ /**
+ * @cfg {Array} filters
+ * An Array of filters config objects. Refer to each filter type class for
+ * configuration details specific to each filter type. Filters for Strings,
+ * Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters
+ * available.
+ */
+ /**
+ * @cfg {String} filterCls
+ * The css class to be applied to column headers with active filters.
+ * Defaults to <tt>'ux-filterd-column'</tt>.
+ */
+ filterCls : 'ux-filtered-column',
+ /**
+ * @cfg {Boolean} local
+ * <tt>true</tt> to use Ext.data.Store filter functions (local filtering)
+ * instead of the default (<tt>false</tt>) server side filtering.
+ */
+ local : false,
+ /**
+ * @cfg {String} menuFilterText
+ * defaults to <tt>'Filters'</tt>.
+ */
+ menuFilterText : 'Filters',
+ /**
+ * @cfg {String} paramPrefix
+ * The url parameter prefix for the filters.
+ * Defaults to <tt>'filter'</tt>.
+ */
+ paramPrefix : 'filter',
+ /**
+ * @cfg {Boolean} showMenu
+ * Defaults to true, including a filter submenu in the default header menu.
+ */
+ showMenu : true,
+ /**
+ * @cfg {String} stateId
+ * Name of the value to be used to store state information.
+ */
+ stateId : undefined,
+ /**
+ * @cfg {Integer} updateBuffer
+ * Number of milliseconds to defer store updates since the last filter change.
+ */
+ updateBuffer : 500,
+
+ /** @private */
+ constructor : function (config) {
+ config = config || {};
+ this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);
+ this.filters = new Ext.util.MixedCollection();
+ this.filters.getKey = function (o) {
+ return o ? o.dataIndex : null;
+ };
+ this.addFilters(config.filters);
+ delete config.filters;
+ Ext.apply(this, config);
+ },
+
+ /** @private */
+ init : function (grid) {
+ if (grid instanceof Ext.grid.GridPanel) {
+ this.grid = grid;
+
+ this.bindStore(this.grid.getStore(), true);
+ // assumes no filters were passed in the constructor, so try and use ones from the colModel
+ if(this.filters.getCount() == 0){
+ this.addFilters(this.grid.getColumnModel());
+ }
+
+ this.grid.filters = this;
+
+ this.grid.addEvents({'filterupdate': true});
+
+ grid.on({
+ scope: this,
+ beforestaterestore: this.applyState,
+ beforestatesave: this.saveState,
+ beforedestroy: this.destroy,
+ reconfigure: this.onReconfigure
+ });
+
+ if (grid.rendered){
+ this.onRender();
+ } else {
+ grid.on({
+ scope: this,
+ single: true,
+ render: this.onRender
+ });
+ }
+
+ } else if (grid instanceof Ext.PagingToolbar) {
+ this.toolbar = grid;
+ }
+ },
+
+ /**
+ * @private
+ * Handler for the grid's beforestaterestore event (fires before the state of the
+ * grid is restored).
+ * @param {Object} grid The grid object
+ * @param {Object} state The hash of state values returned from the StateProvider.
+ */
+ applyState : function (grid, state) {
+ var key, filter;
+ this.applyingState = true;
+ this.clearFilters();
+ if (state.filters) {
+ for (key in state.filters) {
+ filter = this.filters.get(key);
+ if (filter) {
+ filter.setValue(state.filters[key]);
+ filter.setActive(true);
+ }
+ }
+ }
+ this.deferredUpdate.cancel();
+ if (this.local) {
+ this.reload();
+ }
+ delete this.applyingState;
+ },
+
+ /**
+ * Saves the state of all active filters
+ * @param {Object} grid
+ * @param {Object} state
+ * @return {Boolean}
+ */
+ saveState : function (grid, state) {
+ var filters = {};
+ this.filters.each(function (filter) {
+ if (filter.active) {
+ filters[filter.dataIndex] = filter.getValue();
+ }
+ });
+ return (state.filters = filters);
+ },
+
+ /**
+ * @private
+ * Handler called when the grid is rendered
+ */
+ onRender : function () {
+ this.grid.getView().on('refresh', this.onRefresh, this);
+ this.createMenu();
+ },
+
+ /**
+ * @private
+ * Handler called by the grid 'beforedestroy' event
+ */
+ destroy : function () {
+ this.removeAll();
+ this.purgeListeners();
+
+ if(this.filterMenu){
+ Ext.menu.MenuMgr.unregister(this.filterMenu);
+ this.filterMenu.destroy();
+ this.filterMenu = this.menu.menu = null;
+ }
+ },
+
+ /**
+ * Remove all filters, permanently destroying them.
+ */
+ removeAll : function () {
+ if(this.filters){
+ Ext.destroy.apply(Ext, this.filters.items);
+ // remove all items from the collection
+ this.filters.clear();
+ }
+ },
+
+
+ /**
+ * Changes the data store bound to this view and refreshes it.
+ * @param {Store} store The store to bind to this view
+ */
+ bindStore : function(store, initial){
+ if(!initial && this.store){
+ if (this.local) {
+ store.un('load', this.onLoad, this);
+ } else {
+ store.un('beforeload', this.onBeforeLoad, this);
+ }
+ }
+ if(store){
+ if (this.local) {
+ store.on('load', this.onLoad, this);
+ } else {
+ store.on('beforeload', this.onBeforeLoad, this);
+ }
+ }
+ this.store = store;
+ },
+
+ /**
+ * @private
+ * Handler called when the grid reconfigure event fires
+ */
+ onReconfigure : function () {
+ this.bindStore(this.grid.getStore());
+ this.store.clearFilter();
+ this.removeAll();
+ this.addFilters(this.grid.getColumnModel());
+ this.updateColumnHeadings();
+ },
+
+ createMenu : function () {
+ var view = this.grid.getView(),
+ hmenu = view.hmenu;
+
+ if (this.showMenu && hmenu) {
+
+ this.sep = hmenu.addSeparator();
+ this.filterMenu = new Ext.menu.Menu({
+ id: this.grid.id + '-filters-menu'
+ });
+ this.menu = hmenu.add({
+ checked: false,
+ itemId: 'filters',
+ text: this.menuFilterText,
+ menu: this.filterMenu
+ });
+
+ this.menu.on({
+ scope: this,
+ checkchange: this.onCheckChange,
+ beforecheckchange: this.onBeforeCheck
+ });
+ hmenu.on('beforeshow', this.onMenu, this);
+ }
+ this.updateColumnHeadings();
+ },
+
+ /**
+ * @private
+ * Get the filter menu from the filters MixedCollection based on the clicked header
+ */
+ getMenuFilter : function () {
+ var view = this.grid.getView();
+ if (!view || view.hdCtxIndex === undefined) {
+ return null;
+ }
+ return this.filters.get(
+ view.cm.config[view.hdCtxIndex].dataIndex
+ );
+ },
+
+ /**
+ * @private
+ * Handler called by the grid's hmenu beforeshow event
+ */
+ onMenu : function (filterMenu) {
+ var filter = this.getMenuFilter();
+
+ if (filter) {
+/*
+TODO: lazy rendering
+ if (!filter.menu) {
+ filter.menu = filter.createMenu();
+ }
+*/
+ this.menu.menu = filter.menu;
+ this.menu.setChecked(filter.active, false);
+ // disable the menu if filter.disabled explicitly set to true
+ this.menu.setDisabled(filter.disabled === true);
+ }
+
+ this.menu.setVisible(filter !== undefined);
+ this.sep.setVisible(filter !== undefined);
+ },
+
+ /** @private */
+ onCheckChange : function (item, value) {
+ this.getMenuFilter().setActive(value);
+ },
+
+ /** @private */
+ onBeforeCheck : function (check, value) {
+ return !value || this.getMenuFilter().isActivatable();
+ },
+
+ /**
+ * @private
+ * Handler for all events on filters.
+ * @param {String} event Event name
+ * @param {Object} filter Standard signature of the event before the event is fired
+ */
+ onStateChange : function (event, filter) {
+ if (event === 'serialize') {
+ return;
+ }
+
+ if (filter == this.getMenuFilter()) {
+ this.menu.setChecked(filter.active, false);
+ }
+
+ if ((this.autoReload || this.local) && !this.applyingState) {
+ this.deferredUpdate.delay(this.updateBuffer);
+ }
+ this.updateColumnHeadings();
+
+ if (!this.applyingState) {
+ this.grid.saveState();
+ }
+ this.grid.fireEvent('filterupdate', this, filter);
+ },
+
+ /**
+ * @private
+ * Handler for store's beforeload event when configured for remote filtering
+ * @param {Object} store
+ * @param {Object} options
+ */
+ onBeforeLoad : function (store, options) {
+ options.params = options.params || {};
+ this.cleanParams(options.params);
+ var params = this.buildQuery(this.getFilterData());
+ Ext.apply(options.params, params);
+ },
+
+ /**
+ * @private
+ * Handler for store's load event when configured for local filtering
+ * @param {Object} store
+ * @param {Object} options
+ */
+ onLoad : function (store, options) {
+ store.filterBy(this.getRecordFilter());
+ },
+
+ /**
+ * @private
+ * Handler called when the grid's view is refreshed
+ */
+ onRefresh : function () {
+ this.updateColumnHeadings();
+ },
+
+ /**
+ * Update the styles for the header row based on the active filters
+ */
+ updateColumnHeadings : function () {
+ var view = this.grid.getView(),
+ i, len, filter;
+ if (view.mainHd) {
+ for (i = 0, len = view.cm.config.length; i < len; i++) {
+ filter = this.getFilter(view.cm.config[i].dataIndex);
+ Ext.fly(view.getHeaderCell(i))[filter && filter.active ? 'addClass' : 'removeClass'](this.filterCls);
+ }
+ }
+ },
+
+ /** @private */
+ reload : function () {
+ if (this.local) {
+ this.grid.store.clearFilter(true);
+ this.grid.store.filterBy(this.getRecordFilter());
+ } else {
+ var start,
+ store = this.grid.store;
+ this.deferredUpdate.cancel();
+ if (this.toolbar) {
+ start = store.paramNames.start;
+ if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {
+ store.lastOptions.params[start] = 0;
+ }
+ }
+ store.reload();
+ }
+ },
+
+ /**
+ * Method factory that generates a record validator for the filters active at the time
+ * of invokation.
+ * @private
+ */
+ getRecordFilter : function () {
+ var f = [], len, i;
+ this.filters.each(function (filter) {
+ if (filter.active) {
+ f.push(filter);
+ }
+ });
+
+ len = f.length;
+ return function (record) {
+ for (i = 0; i < len; i++) {
+ if (!f[i].validateRecord(record)) {
+ return false;
+ }
+ }
+ return true;
+ };
+ },
+
+ /**
+ * Adds a filter to the collection and observes it for state change.
+ * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.
+ * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.
+ */
+ addFilter : function (config) {
+ var Cls = this.getFilterClass(config.type),
+ filter = config.menu ? config : (new Cls(config));
+ this.filters.add(filter);
+
+ Ext.util.Observable.capture(filter, this.onStateChange, this);
+ return filter;
+ },
+
+ /**
+ * Adds filters to the collection.
+ * @param {Array/Ext.grid.ColumnModel} filters Either an Array of
+ * filter configuration objects or an Ext.grid.ColumnModel. The columns
+ * of a passed Ext.grid.ColumnModel will be examined for a <code>filter</code>
+ * property and, if present, will be used as the filter configuration object.
+ */
+ addFilters : function (filters) {
+ if (filters) {
+ var i, len, filter, cm = false, dI;
+ if (filters instanceof Ext.grid.ColumnModel) {
+ filters = filters.config;
+ cm = true;
+ }
+ for (i = 0, len = filters.length; i < len; i++) {
+ filter = false;
+ if (cm) {
+ dI = filters[i].dataIndex;
+ filter = filters[i].filter || filters[i].filterable;
+ if (filter){
+ filter = (filter === true) ? {} : filter;
+ Ext.apply(filter, {dataIndex:dI});
+ // filter type is specified in order of preference:
+ // filter type specified in config
+ // type specified in store's field's type config
+ filter.type = filter.type || this.store.fields.get(dI).type;
+ }
+ } else {
+ filter = filters[i];
+ }
+ // if filter config found add filter for the column
+ if (filter) {
+ this.addFilter(filter);
+ }
+ }
+ }
+ },
+
+ /**
+ * Returns a filter for the given dataIndex, if one exists.
+ * @param {String} dataIndex The dataIndex of the desired filter object.
+ * @return {Ext.ux.grid.filter.Filter}
+ */
+ getFilter : function (dataIndex) {
+ return this.filters.get(dataIndex);
+ },
+
+ /**
+ * Turns all filters off. This does not clear the configuration information
+ * (see {@link #removeAll}).
+ */
+ clearFilters : function () {
+ this.filters.each(function (filter) {
+ filter.setActive(false);
+ });
+ },
+
+ /**
+ * Returns an Array of the currently active filters.
+ * @return {Array} filters Array of the currently active filters.
+ */
+ getFilterData : function () {
+ var filters = [], i, len;
+
+ this.filters.each(function (f) {
+ if (f.active) {
+ var d = [].concat(f.serialize());
+ for (i = 0, len = d.length; i < len; i++) {
+ filters.push({
+ field: f.dataIndex,
+ data: d[i]
+ });
+ }
+ }
+ });
+ return filters;
+ },
+
+ /**
+ * Function to take the active filters data and build it into a query.
+ * The format of the query depends on the <code>{@link #encode}</code>
+ * configuration:
+ * <div class="mdetail-params"><ul>
+ *
+ * <li><b><tt>false</tt></b> : <i>Default</i>
+ * <div class="sub-desc">
+ * Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:
+ * <pre><code>
+filters[0][field]="someDataIndex"&
+filters[0][data][comparison]="someValue1"&
+filters[0][data][type]="someValue2"&
+filters[0][data][value]="someValue3"&
+ * </code></pre>
+ * </div></li>
+ * <li><b><tt>true</tt></b> :
+ * <div class="sub-desc">
+ * JSON encode the filter data
+ * <pre><code>
+filters[0][field]="someDataIndex"&
+filters[0][data][comparison]="someValue1"&
+filters[0][data][type]="someValue2"&
+filters[0][data][value]="someValue3"&
+ * </code></pre>
+ * </div></li>
+ * </ul></div>
+ * Override this method to customize the format of the filter query for remote requests.
+ * @param {Array} filters A collection of objects representing active filters and their configuration.
+ * Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured
+ * to be unique as any one filter may be a composite of more basic filters for the same dataIndex.
+ * @return {Object} Query keys and values
+ */
+ buildQuery : function (filters) {
+ var p = {}, i, f, root, dataPrefix, key, tmp,
+ len = filters.length;
+
+ if (!this.encode){
+ for (i = 0; i < len; i++) {
+ f = filters[i];
+ root = [this.paramPrefix, '[', i, ']'].join('');
+ p[root + '[field]'] = f.field;
+
+ dataPrefix = root + '[data]';
+ for (key in f.data) {
+ p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];
+ }
+ }
+ } else {
+ tmp = [];
+ for (i = 0; i < len; i++) {
+ f = filters[i];
+ tmp.push(Ext.apply(
+ {},
+ {field: f.field},
+ f.data
+ ));
+ }
+ // only build if there is active filter
+ if (tmp.length > 0){
+ p[this.paramPrefix] = Ext.util.JSON.encode(tmp);
+ }
+ }
+ return p;
+ },
+
+ /**
+ * Removes filter related query parameters from the provided object.
+ * @param {Object} p Query parameters that may contain filter related fields.
+ */
+ cleanParams : function (p) {
+ // if encoding just delete the property
+ if (this.encode) {
+ delete p[this.paramPrefix];
+ // otherwise scrub the object of filter data
+ } else {
+ var regex, key;
+ regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');
+ for (key in p) {
+ if (regex.test(key)) {
+ delete p[key];
+ }
+ }
+ }
+ },
+
+ /**
+ * Function for locating filter classes, overwrite this with your favorite
+ * loader to provide dynamic filter loading.
+ * @param {String} type The type of filter to load ('Filter' is automatically
+ * appended to the passed type; eg, 'string' becomes 'StringFilter').
+ * @return {Class} The Ext.ux.grid.filter.Class
+ */
+ getFilterClass : function (type) {
+ // map the supported Ext.data.Field type values into a supported filter
+ switch(type) {
+ case 'auto':
+ type = 'string';
+ break;
+ case 'int':
+ case 'float':
+ type = 'numeric';
+ break;
+ }
+ return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];
+ }
+});
+
+// register ptype
+Ext.preg('gridfilters', Ext.ux.grid.GridFilters);
+Ext.namespace('Ext.ux.grid.filter');
+
+/**
+ * @class Ext.ux.grid.filter.Filter
+ * @extends Ext.util.Observable
+ * Abstract base class for filter implementations.
+ */
+Ext.ux.grid.filter.Filter = Ext.extend(Ext.util.Observable, {
+ /**
+ * @cfg {Boolean} active
+ * Indicates the initial status of the filter (defaults to false).
+ */
+ active : false,
+ /**
+ * True if this filter is active. Use setActive() to alter after configuration.
+ * @type Boolean
+ * @property active
+ */
+ /**
+ * @cfg {String} dataIndex
+ * The {@link Ext.data.Store} dataIndex of the field this filter represents.
+ * The dataIndex does not actually have to exist in the store.
+ */
+ dataIndex : null,
+ /**
+ * The filter configuration menu that will be installed into the filter submenu of a column menu.
+ * @type Ext.menu.Menu
+ * @property
+ */
+ menu : null,
+ /**
+ * @cfg {Number} updateBuffer
+ * Number of milliseconds to wait after user interaction to fire an update. Only supported
+ * by filters: 'list', 'numeric', and 'string'. Defaults to 500.
+ */
+ updateBuffer : 500,
+
+ constructor : function (config) {
+ Ext.apply(this, config);
+
+ this.addEvents(
+ /**
+ * @event activate
+ * Fires when an inactive filter becomes active
+ * @param {Ext.ux.grid.filter.Filter} this
+ */
+ 'activate',
+ /**
+ * @event deactivate
+ * Fires when an active filter becomes inactive
+ * @param {Ext.ux.grid.filter.Filter} this
+ */
+ 'deactivate',
+ /**
+ * @event serialize
+ * Fires after the serialization process. Use this to attach additional parameters to serialization
+ * data before it is encoded and sent to the server.
+ * @param {Array/Object} data A map or collection of maps representing the current filter configuration.
+ * @param {Ext.ux.grid.filter.Filter} filter The filter being serialized.
+ */
+ 'serialize',
+ /**
+ * @event update
+ * Fires when a filter configuration has changed
+ * @param {Ext.ux.grid.filter.Filter} this The filter object.
+ */
+ 'update'
+ );
+ Ext.ux.grid.filter.Filter.superclass.constructor.call(this);
+
+ this.menu = new Ext.menu.Menu();
+ this.init(config);
+ if(config && config.value){
+ this.setValue(config.value);
+ this.setActive(config.active !== false, true);
+ delete config.value;
+ }
+ },
+
+ /**
+ * Destroys this filter by purging any event listeners, and removing any menus.
+ */
+ destroy : function(){
+ if (this.menu){
+ this.menu.destroy();
+ }
+ this.purgeListeners();
+ },
+
+ /**
+ * Template method to be implemented by all subclasses that is to
+ * initialize the filter and install required menu items.
+ * Defaults to Ext.emptyFn.
+ */
+ init : Ext.emptyFn,
+
+ /**
+ * Template method to be implemented by all subclasses that is to
+ * get and return the value of the filter.
+ * Defaults to Ext.emptyFn.
+ * @return {Object} The 'serialized' form of this filter
+ * @methodOf Ext.ux.grid.filter.Filter
+ */
+ getValue : Ext.emptyFn,
+
+ /**
+ * Template method to be implemented by all subclasses that is to
+ * set the value of the filter and fire the 'update' event.
+ * Defaults to Ext.emptyFn.
+ * @param {Object} data The value to set the filter
+ * @methodOf Ext.ux.grid.filter.Filter
+ */
+ setValue : Ext.emptyFn,
+
+ /**
+ * Template method to be implemented by all subclasses that is to
+ * return <tt>true</tt> if the filter has enough configuration information to be activated.
+ * Defaults to <tt>return true</tt>.
+ * @return {Boolean}
+ */
+ isActivatable : function(){
+ return true;
+ },
+
+ /**
+ * Template method to be implemented by all subclasses that is to
+ * get and return serialized filter data for transmission to the server.
+ * Defaults to Ext.emptyFn.
+ */
+ getSerialArgs : Ext.emptyFn,
+
+ /**
+ * Template method to be implemented by all subclasses that is to
+ * validates the provided Ext.data.Record against the filters configuration.
+ * Defaults to <tt>return true</tt>.
+ * @param {Ext.data.Record} record The record to validate
+ * @return {Boolean} true if the record is valid within the bounds
+ * of the filter, false otherwise.
+ */
+ validateRecord : function(){
+ return true;
+ },
+
+ /**
+ * Returns the serialized filter data for transmission to the server
+ * and fires the 'serialize' event.
+ * @return {Object/Array} An object or collection of objects containing
+ * key value pairs representing the current configuration of the filter.
+ * @methodOf Ext.ux.grid.filter.Filter
+ */
+ serialize : function(){
+ var args = this.getSerialArgs();
+ this.fireEvent('serialize', args, this);
+ return args;
+ },
+
+ /** @private */
+ fireUpdate : function(){
+ if (this.active) {
+ this.fireEvent('update', this);
+ }
+ this.setActive(this.isActivatable());
+ },
+
+ /**
+ * Sets the status of the filter and fires the appropriate events.
+ * @param {Boolean} active The new filter state.
+ * @param {Boolean} suppressEvent True to prevent events from being fired.
+ * @methodOf Ext.ux.grid.filter.Filter
+ */
+ setActive : function(active, suppressEvent){
+ if(this.active != active){
+ this.active = active;
+ if (suppressEvent !== true) {
+ this.fireEvent(active ? 'activate' : 'deactivate', this);
+ }
+ }
+ }
+});/**
+ * @class Ext.ux.grid.filter.BooleanFilter
+ * @extends Ext.ux.grid.filter.Filter
+ * Boolean filters use unique radio group IDs (so you can have more than one!)
+ * <p><b><u>Example Usage:</u></b></p>
+ * <pre><code>
+var filters = new Ext.ux.grid.GridFilters({
+ ...
+ filters: [{
+ // required configs
+ type: 'boolean',
+ dataIndex: 'visible'
+
+ // optional configs
+ defaultValue: null, // leave unselected (false selected by default)
+ yesText: 'Yes', // default
+ noText: 'No' // default
+ }]
+});
+ * </code></pre>
+ */
+Ext.ux.grid.filter.BooleanFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
+ /**
+ * @cfg {Boolean} defaultValue
+ * Set this to null if you do not want either option to be checked by default. Defaults to false.
+ */
+ defaultValue : false,
+ /**
+ * @cfg {String} yesText
+ * Defaults to 'Yes'.
+ */
+ yesText : 'Yes',
+ /**
+ * @cfg {String} noText
+ * Defaults to 'No'.
+ */
+ noText : 'No',
+
+ /**
+ * @private
+ * Template method that is to initialize the filter and install required menu items.
+ */
+ init : function (config) {
+ var gId = Ext.id();
+ this.options = [
+ new Ext.menu.CheckItem({text: this.yesText, group: gId, checked: this.defaultValue === true}),
+ new Ext.menu.CheckItem({text: this.noText, group: gId, checked: this.defaultValue === false})];
+
+ this.menu.add(this.options[0], this.options[1]);
+
+ for(var i=0; i<this.options.length; i++){
+ this.options[i].on('click', this.fireUpdate, this);
+ this.options[i].on('checkchange', this.fireUpdate, this);
+ }
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return the value of the filter.
+ * @return {String} The value of this filter
+ */
+ getValue : function () {
+ return this.options[0].checked;
+ },
+
+ /**
+ * @private
+ * Template method that is to set the value of the filter.
+ * @param {Object} value The value to set the filter
+ */
+ setValue : function (value) {
+ this.options[value ? 0 : 1].setChecked(true);
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return serialized filter data for
+ * transmission to the server.
+ * @return {Object/Array} An object or collection of objects containing
+ * key value pairs representing the current configuration of the filter.
+ */
+ getSerialArgs : function () {
+ var args = {type: 'boolean', value: this.getValue()};
+ return args;
+ },
+
+ /**
+ * Template method that is to validate the provided Ext.data.Record
+ * against the filters configuration.
+ * @param {Ext.data.Record} record The record to validate
+ * @return {Boolean} true if the record is valid within the bounds
+ * of the filter, false otherwise.
+ */
+ validateRecord : function (record) {
+ return record.get(this.dataIndex) == this.getValue();
+ }
+});/**
+ * @class Ext.ux.grid.filter.DateFilter
+ * @extends Ext.ux.grid.filter.Filter
+ * Filter by a configurable Ext.menu.DateMenu
+ * <p><b><u>Example Usage:</u></b></p>
+ * <pre><code>
+var filters = new Ext.ux.grid.GridFilters({
+ ...
+ filters: [{
+ // required configs
+ type: 'date',
+ dataIndex: 'dateAdded',
+
+ // optional configs
+ dateFormat: 'm/d/Y', // default
+ beforeText: 'Before', // default
+ afterText: 'After', // default
+ onText: 'On', // default
+ pickerOpts: {
+ // any DateMenu configs
+ },
+
+ active: true // default is false
+ }]
+});
+ * </code></pre>
+ */
+Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
+ /**
+ * @cfg {String} afterText
+ * Defaults to 'After'.
+ */
+ afterText : 'After',
+ /**
+ * @cfg {String} beforeText
+ * Defaults to 'Before'.
+ */
+ beforeText : 'Before',
+ /**
+ * @cfg {Object} compareMap
+ * Map for assigning the comparison values used in serialization.
+ */
+ compareMap : {
+ before: 'lt',
+ after: 'gt',
+ on: 'eq'
+ },
+ /**
+ * @cfg {String} dateFormat
+ * The date format to return when using getValue.
+ * Defaults to 'm/d/Y'.
+ */
+ dateFormat : 'm/d/Y',
+
+ /**
+ * @cfg {Date} maxDate
+ * Allowable date as passed to the Ext.DatePicker
+ * Defaults to undefined.
+ */
+ /**
+ * @cfg {Date} minDate
+ * Allowable date as passed to the Ext.DatePicker
+ * Defaults to undefined.
+ */
+ /**
+ * @cfg {Array} menuItems
+ * The items to be shown in this menu
+ * Defaults to:<pre>
+ * menuItems : ['before', 'after', '-', 'on'],
+ * </pre>
+ */
+ menuItems : ['before', 'after', '-', 'on'],
+
+ /**
+ * @cfg {Object} menuItemCfgs
+ * Default configuration options for each menu item
+ */
+ menuItemCfgs : {
+ selectOnFocus: true,
+ width: 125
+ },
+
+ /**
+ * @cfg {String} onText
+ * Defaults to 'On'.
+ */
+ onText : 'On',
+
+ /**
+ * @cfg {Object} pickerOpts
+ * Configuration options for the date picker associated with each field.
+ */
+ pickerOpts : {},
+
+ /**
+ * @private
+ * Template method that is to initialize the filter and install required menu items.
+ */
+ init : function (config) {
+ var menuCfg, i, len, item, cfg, Cls;
+
+ menuCfg = Ext.apply(this.pickerOpts, {
+ minDate: this.minDate,
+ maxDate: this.maxDate,
+ format: this.dateFormat,
+ listeners: {
+ scope: this,
+ select: this.onMenuSelect
+ }
+ });
+
+ this.fields = {};
+ for (i = 0, len = this.menuItems.length; i < len; i++) {
+ item = this.menuItems[i];
+ if (item !== '-') {
+ cfg = {
+ itemId: 'range-' + item,
+ text: this[item + 'Text'],
+ menu: new Ext.menu.DateMenu(
+ Ext.apply(menuCfg, {
+ itemId: item
+ })
+ ),
+ listeners: {
+ scope: this,
+ checkchange: this.onCheckChange
+ }
+ };
+ Cls = Ext.menu.CheckItem;
+ item = this.fields[item] = new Cls(cfg);
+ }
+ //this.add(item);
+ this.menu.add(item);
+ }
+ },
+
+ onCheckChange : function () {
+ this.setActive(this.isActivatable());
+ this.fireEvent('update', this);
+ },
+
+ /**
+ * @private
+ * Handler method called when there is a keyup event on an input
+ * item of this menu.
+ */
+ onInputKeyUp : function (field, e) {
+ var k = e.getKey();
+ if (k == e.RETURN && field.isValid()) {
+ e.stopEvent();
+ this.menu.hide(true);
+ return;
+ }
+ },
+
+ /**
+ * Handler for when the menu for a field fires the 'select' event
+ * @param {Object} date
+ * @param {Object} menuItem
+ * @param {Object} value
+ * @param {Object} picker
+ */
+ onMenuSelect : function (menuItem, value, picker) {
+ var fields = this.fields,
+ field = this.fields[menuItem.itemId];
+
+ field.setChecked(true);
+
+ if (field == fields.on) {
+ fields.before.setChecked(false, true);
+ fields.after.setChecked(false, true);
+ } else {
+ fields.on.setChecked(false, true);
+ if (field == fields.after && fields.before.menu.picker.value < value) {
+ fields.before.setChecked(false, true);
+ } else if (field == fields.before && fields.after.menu.picker.value > value) {
+ fields.after.setChecked(false, true);
+ }
+ }
+ this.fireEvent('update', this);
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return the value of the filter.
+ * @return {String} The value of this filter
+ */
+ getValue : function () {
+ var key, result = {};
+ for (key in this.fields) {
+ if (this.fields[key].checked) {
+ result[key] = this.fields[key].menu.picker.getValue();
+ }
+ }
+ return result;
+ },
+
+ /**
+ * @private
+ * Template method that is to set the value of the filter.
+ * @param {Object} value The value to set the filter
+ * @param {Boolean} preserve true to preserve the checked status
+ * of the other fields. Defaults to false, unchecking the
+ * other fields
+ */
+ setValue : function (value, preserve) {
+ var key;
+ for (key in this.fields) {
+ if(value[key]){
+ this.fields[key].menu.picker.setValue(value[key]);
+ this.fields[key].setChecked(true);
+ } else if (!preserve) {
+ this.fields[key].setChecked(false);
+ }
+ }
+ this.fireEvent('update', this);
+ },
+
+ /**
+ * @private
+ * Template method that is to return <tt>true</tt> if the filter
+ * has enough configuration information to be activated.
+ * @return {Boolean}
+ */
+ isActivatable : function () {
+ var key;
+ for (key in this.fields) {
+ if (this.fields[key].checked) {
+ return true;
+ }
+ }
+ return false;
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return serialized filter data for
+ * transmission to the server.
+ * @return {Object/Array} An object or collection of objects containing
+ * key value pairs representing the current configuration of the filter.
+ */
+ getSerialArgs : function () {
+ var args = [];
+ for (var key in this.fields) {
+ if(this.fields[key].checked){
+ args.push({
+ type: 'date',
+ comparison: this.compareMap[key],
+ value: this.getFieldValue(key).format(this.dateFormat)
+ });
+ }
+ }
+ return args;
+ },
+
+ /**
+ * Get and return the date menu picker value
+ * @param {String} item The field identifier ('before', 'after', 'on')
+ * @return {Date} Gets the current selected value of the date field
+ */
+ getFieldValue : function(item){
+ return this.fields[item].menu.picker.getValue();
+ },
+
+ /**
+ * Gets the menu picker associated with the passed field
+ * @param {String} item The field identifier ('before', 'after', 'on')
+ * @return {Object} The menu picker
+ */
+ getPicker : function(item){
+ return this.fields[item].menu.picker;
+ },
+
+ /**
+ * Template method that is to validate the provided Ext.data.Record
+ * against the filters configuration.
+ * @param {Ext.data.Record} record The record to validate
+ * @return {Boolean} true if the record is valid within the bounds
+ * of the filter, false otherwise.
+ */
+ validateRecord : function (record) {
+ var key,
+ pickerValue,
+ val = record.get(this.dataIndex);
+
+ if(!Ext.isDate(val)){
+ return false;
+ }
+ val = val.clearTime(true).getTime();
+
+ for (key in this.fields) {
+ if (this.fields[key].checked) {
+ pickerValue = this.getFieldValue(key).clearTime(true).getTime();
+ if (key == 'before' && pickerValue <= val) {
+ return false;
+ }
+ if (key == 'after' && pickerValue >= val) {
+ return false;
+ }
+ if (key == 'on' && pickerValue != val) {
+ return false;
+ }
+ }
+ }
+ return true;
+ }
+});/**
+ * @class Ext.ux.grid.filter.ListFilter
+ * @extends Ext.ux.grid.filter.Filter
+ * <p>List filters are able to be preloaded/backed by an Ext.data.Store to load
+ * their options the first time they are shown. ListFilter utilizes the
+ * {@link Ext.ux.menu.ListMenu} component.</p>
+ * <p>Although not shown here, this class accepts all configuration options
+ * for {@link Ext.ux.menu.ListMenu}.</p>
+ *
+ * <p><b><u>Example Usage:</u></b></p>
+ * <pre><code>
+var filters = new Ext.ux.grid.GridFilters({
+ ...
+ filters: [{
+ type: 'list',
+ dataIndex: 'size',
+ phpMode: true,
+ // options will be used as data to implicitly creates an ArrayStore
+ options: ['extra small', 'small', 'medium', 'large', 'extra large']
+ }]
+});
+ * </code></pre>
+ *
+ */
+Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
+
+ /**
+ * @cfg {Array} options
+ * <p><code>data</code> to be used to implicitly create a data store
+ * to back this list when the data source is <b>local</b>. If the
+ * data for the list is remote, use the <code>{@link #store}</code>
+ * config instead.</p>
+ * <br><p>Each item within the provided array may be in one of the
+ * following formats:</p>
+ * <div class="mdetail-params"><ul>
+ * <li><b>Array</b> :
+ * <pre><code>
+options: [
+ [11, 'extra small'],
+ [18, 'small'],
+ [22, 'medium'],
+ [35, 'large'],
+ [44, 'extra large']
+]
+ * </code></pre>
+ * </li>
+ * <li><b>Object</b> :
+ * <pre><code>
+labelField: 'name', // override default of 'text'
+options: [
+ {id: 11, name:'extra small'},
+ {id: 18, name:'small'},
+ {id: 22, name:'medium'},
+ {id: 35, name:'large'},
+ {id: 44, name:'extra large'}
+]
+ * </code></pre>
+ * </li>
+ * <li><b>String</b> :
+ * <pre><code>
+ * options: ['extra small', 'small', 'medium', 'large', 'extra large']
+ * </code></pre>
+ * </li>
+ */
+ /**
+ * @cfg {Boolean} phpMode
+ * <p>Adjust the format of this filter. Defaults to false.</p>
+ * <br><p>When GridFilters <code>@cfg encode = false</code> (default):</p>
+ * <pre><code>
+// phpMode == false (default):
+filter[0][data][type] list
+filter[0][data][value] value1
+filter[0][data][value] value2
+filter[0][field] prod
+
+// phpMode == true:
+filter[0][data][type] list
+filter[0][data][value] value1, value2
+filter[0][field] prod
+ * </code></pre>
+ * When GridFilters <code>@cfg encode = true</code>:
+ * <pre><code>
+// phpMode == false (default):
+filter : [{"type":"list","value":["small","medium"],"field":"size"}]
+
+// phpMode == true:
+filter : [{"type":"list","value":"small,medium","field":"size"}]
+ * </code></pre>
+ */
+ phpMode : false,
+ /**
+ * @cfg {Ext.data.Store} store
+ * The {@link Ext.data.Store} this list should use as its data source
+ * when the data source is <b>remote</b>. If the data for the list
+ * is local, use the <code>{@link #options}</code> config instead.
+ */
+
+ /**
+ * @private
+ * Template method that is to initialize the filter and install required menu items.
+ * @param {Object} config
+ */
+ init : function (config) {
+ this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);
+
+ // if a menu already existed, do clean up first
+ if (this.menu){
+ this.menu.destroy();
+ }
+ this.menu = new Ext.ux.menu.ListMenu(config);
+ this.menu.on('checkchange', this.onCheckChange, this);
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return the value of the filter.
+ * @return {String} The value of this filter
+ */
+ getValue : function () {
+ return this.menu.getSelected();
+ },
+ /**
+ * @private
+ * Template method that is to set the value of the filter.
+ * @param {Object} value The value to set the filter
+ */
+ setValue : function (value) {
+ this.menu.setSelected(value);
+ this.fireEvent('update', this);
+ },
+
+ /**
+ * @private
+ * Template method that is to return <tt>true</tt> if the filter
+ * has enough configuration information to be activated.
+ * @return {Boolean}
+ */
+ isActivatable : function () {
+ return this.getValue().length > 0;
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return serialized filter data for
+ * transmission to the server.
+ * @return {Object/Array} An object or collection of objects containing
+ * key value pairs representing the current configuration of the filter.
+ */
+ getSerialArgs : function () {
+ var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};
+ return args;
+ },
+
+ /** @private */
+ onCheckChange : function(){
+ this.dt.delay(this.updateBuffer);
+ },
+
+
+ /**
+ * Template method that is to validate the provided Ext.data.Record
+ * against the filters configuration.
+ * @param {Ext.data.Record} record The record to validate
+ * @return {Boolean} true if the record is valid within the bounds
+ * of the filter, false otherwise.
+ */
+ validateRecord : function (record) {
+ return this.getValue().indexOf(record.get(this.dataIndex)) > -1;
+ }
+});/**
+ * @class Ext.ux.grid.filter.NumericFilter
+ * @extends Ext.ux.grid.filter.Filter
+ * Filters using an Ext.ux.menu.RangeMenu.
+ * <p><b><u>Example Usage:</u></b></p>
+ * <pre><code>
+var filters = new Ext.ux.grid.GridFilters({
+ ...
+ filters: [{
+ type: 'numeric',
+ dataIndex: 'price'
+ }]
+});
+ * </code></pre>
+ */
+Ext.ux.grid.filter.NumericFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
+
+ /**
+ * @cfg {Object} fieldCls
+ * The Class to use to construct each field item within this menu
+ * Defaults to:<pre>
+ * fieldCls : Ext.form.NumberField
+ * </pre>
+ */
+ fieldCls : Ext.form.NumberField,
+ /**
+ * @cfg {Object} fieldCfg
+ * The default configuration options for any field item unless superseded
+ * by the <code>{@link #fields}</code> configuration.
+ * Defaults to:<pre>
+ * fieldCfg : {}
+ * </pre>
+ * Example usage:
+ * <pre><code>
+fieldCfg : {
+ width: 150,
+},
+ * </code></pre>
+ */
+ /**
+ * @cfg {Object} fields
+ * The field items may be configured individually
+ * Defaults to <tt>undefined</tt>.
+ * Example usage:
+ * <pre><code>
+fields : {
+ gt: { // override fieldCfg options
+ width: 200,
+ fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}
+ }
+},
+ * </code></pre>
+ */
+ /**
+ * @cfg {Object} iconCls
+ * The iconCls to be applied to each comparator field item.
+ * Defaults to:<pre>
+iconCls : {
+ gt : 'ux-rangemenu-gt',
+ lt : 'ux-rangemenu-lt',
+ eq : 'ux-rangemenu-eq'
+}
+ * </pre>
+ */
+ iconCls : {
+ gt : 'ux-rangemenu-gt',
+ lt : 'ux-rangemenu-lt',
+ eq : 'ux-rangemenu-eq'
+ },
+
+ /**
+ * @cfg {Object} menuItemCfgs
+ * Default configuration options for each menu item
+ * Defaults to:<pre>
+menuItemCfgs : {
+ emptyText: 'Enter Filter Text...',
+ selectOnFocus: true,
+ width: 125
+}
+ * </pre>
+ */
+ menuItemCfgs : {
+ emptyText: 'Enter Filter Text...',
+ selectOnFocus: true,
+ width: 125
+ },
+
+ /**
+ * @cfg {Array} menuItems
+ * The items to be shown in this menu. Items are added to the menu
+ * according to their position within this array. Defaults to:<pre>
+ * menuItems : ['lt','gt','-','eq']
+ * </pre>
+ */
+ menuItems : ['lt', 'gt', '-', 'eq'],
+
+ /**
+ * @private
+ * Template method that is to initialize the filter and install required menu items.
+ */
+ init : function (config) {
+ // if a menu already existed, do clean up first
+ if (this.menu){
+ this.menu.destroy();
+ }
+ this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, {
+ // pass along filter configs to the menu
+ fieldCfg : this.fieldCfg || {},
+ fieldCls : this.fieldCls,
+ fields : this.fields || {},
+ iconCls: this.iconCls,
+ menuItemCfgs: this.menuItemCfgs,
+ menuItems: this.menuItems,
+ updateBuffer: this.updateBuffer
+ }));
+ // relay the event fired by the menu
+ this.menu.on('update', this.fireUpdate, this);
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return the value of the filter.
+ * @return {String} The value of this filter
+ */
+ getValue : function () {
+ return this.menu.getValue();
+ },
+
+ /**
+ * @private
+ * Template method that is to set the value of the filter.
+ * @param {Object} value The value to set the filter
+ */
+ setValue : function (value) {
+ this.menu.setValue(value);
+ },
+
+ /**
+ * @private
+ * Template method that is to return <tt>true</tt> if the filter
+ * has enough configuration information to be activated.
+ * @return {Boolean}
+ */
+ isActivatable : function () {
+ var values = this.getValue();
+ for (key in values) {
+ if (values[key] !== undefined) {
+ return true;
+ }
+ }
+ return false;
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return serialized filter data for
+ * transmission to the server.
+ * @return {Object/Array} An object or collection of objects containing
+ * key value pairs representing the current configuration of the filter.
+ */
+ getSerialArgs : function () {
+ var key,
+ args = [],
+ values = this.menu.getValue();
+ for (key in values) {
+ args.push({
+ type: 'numeric',
+ comparison: key,
+ value: values[key]
+ });
+ }
+ return args;
+ },
+
+ /**
+ * Template method that is to validate the provided Ext.data.Record
+ * against the filters configuration.
+ * @param {Ext.data.Record} record The record to validate
+ * @return {Boolean} true if the record is valid within the bounds
+ * of the filter, false otherwise.
+ */
+ validateRecord : function (record) {
+ var val = record.get(this.dataIndex),
+ values = this.getValue();
+ if (values.eq !== undefined && val != values.eq) {
+ return false;
+ }
+ if (values.lt !== undefined && val >= values.lt) {
+ return false;
+ }
+ if (values.gt !== undefined && val <= values.gt) {
+ return false;
+ }
+ return true;
+ }
+});/**
+ * @class Ext.ux.grid.filter.StringFilter
+ * @extends Ext.ux.grid.filter.Filter
+ * Filter by a configurable Ext.form.TextField
+ * <p><b><u>Example Usage:</u></b></p>
+ * <pre><code>
+var filters = new Ext.ux.grid.GridFilters({
+ ...
+ filters: [{
+ // required configs
+ type: 'string',
+ dataIndex: 'name',
+
+ // optional configs
+ value: 'foo',
+ active: true, // default is false
+ iconCls: 'ux-gridfilter-text-icon' // default
+ // any Ext.form.TextField configs accepted
+ }]
+});
+ * </code></pre>
+ */
+Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
+
+ /**
+ * @cfg {String} iconCls
+ * The iconCls to be applied to the menu item.
+ * Defaults to <tt>'ux-gridfilter-text-icon'</tt>.
+ */
+ iconCls : 'ux-gridfilter-text-icon',
+
+ emptyText: 'Enter Filter Text...',
+ selectOnFocus: true,
+ width: 125,
+
+ /**
+ * @private
+ * Template method that is to initialize the filter and install required menu items.
+ */
+ init : function (config) {
+ Ext.applyIf(config, {
+ enableKeyEvents: true,
+ iconCls: this.iconCls,
+ listeners: {
+ scope: this,
+ keyup: this.onInputKeyUp
+ }
+ });
+
+ this.inputItem = new Ext.form.TextField(config);
+ this.menu.add(this.inputItem);
+ this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return the value of the filter.
+ * @return {String} The value of this filter
+ */
+ getValue : function () {
+ return this.inputItem.getValue();
+ },
+
+ /**
+ * @private
+ * Template method that is to set the value of the filter.
+ * @param {Object} value The value to set the filter
+ */
+ setValue : function (value) {
+ this.inputItem.setValue(value);
+ this.fireEvent('update', this);
+ },
+
+ /**
+ * @private
+ * Template method that is to return <tt>true</tt> if the filter
+ * has enough configuration information to be activated.
+ * @return {Boolean}
+ */
+ isActivatable : function () {
+ return this.inputItem.getValue().length > 0;
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return serialized filter data for
+ * transmission to the server.
+ * @return {Object/Array} An object or collection of objects containing
+ * key value pairs representing the current configuration of the filter.
+ */
+ getSerialArgs : function () {
+ return {type: 'string', value: this.getValue()};
+ },
+
+ /**
+ * Template method that is to validate the provided Ext.data.Record
+ * against the filters configuration.
+ * @param {Ext.data.Record} record The record to validate
+ * @return {Boolean} true if the record is valid within the bounds
+ * of the filter, false otherwise.
+ */
+ validateRecord : function (record) {
+ var val = record.get(this.dataIndex);
+
+ if(typeof val != 'string') {
+ return (this.getValue().length === 0);
+ }
+
+ return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
+ },
+
+ /**
+ * @private
+ * Handler method called when there is a keyup event on this.inputItem
+ */
+ onInputKeyUp : function (field, e) {
+ var k = e.getKey();
+ if (k == e.RETURN && field.isValid()) {
+ e.stopEvent();
+ this.menu.hide(true);
+ return;
+ }
+ // restart the timer
+ this.updateTask.delay(this.updateBuffer);
+ }
+});
+Ext.namespace('Ext.ux.menu');
+
+/**
+ * @class Ext.ux.menu.ListMenu
+ * @extends Ext.menu.Menu
+ * This is a supporting class for {@link Ext.ux.grid.filter.ListFilter}.
+ * Although not listed as configuration options for this class, this class
+ * also accepts all configuration options from {@link Ext.ux.grid.filter.ListFilter}.
+ */
+Ext.ux.menu.ListMenu = Ext.extend(Ext.menu.Menu, {
+ /**
+ * @cfg {String} labelField
+ * Defaults to 'text'.
+ */
+ labelField : 'text',
+ /**
+ * @cfg {String} paramPrefix
+ * Defaults to 'Loading...'.
+ */
+ loadingText : 'Loading...',
+ /**
+ * @cfg {Boolean} loadOnShow
+ * Defaults to true.
+ */
+ loadOnShow : true,
+ /**
+ * @cfg {Boolean} single
+ * Specify true to group all items in this list into a single-select
+ * radio button group. Defaults to false.
+ */
+ single : false,
+
+ constructor : function (cfg) {
+ this.selected = [];
+ this.addEvents(
+ /**
+ * @event checkchange
+ * Fires when there is a change in checked items from this list
+ * @param {Object} item Ext.menu.CheckItem
+ * @param {Object} checked The checked value that was set
+ */
+ 'checkchange'
+ );
+
+ Ext.ux.menu.ListMenu.superclass.constructor.call(this, cfg = cfg || {});
+
+ if(!cfg.store && cfg.options){
+ var options = [];
+ for(var i=0, len=cfg.options.length; i<len; i++){
+ var value = cfg.options[i];
+ switch(Ext.type(value)){
+ case 'array': options.push(value); break;
+ case 'object': options.push([value.id, value[this.labelField]]); break;
+ case 'string': options.push([value, value]); break;
+ }
+ }
+
+ this.store = new Ext.data.Store({
+ reader: new Ext.data.ArrayReader({id: 0}, ['id', this.labelField]),
+ data: options,
+ listeners: {
+ 'load': this.onLoad,
+ scope: this
+ }
+ });
+ this.loaded = true;
+ } else {
+ this.add({text: this.loadingText, iconCls: 'loading-indicator'});
+ this.store.on('load', this.onLoad, this);
+ }
+ },
+
+ destroy : function () {
+ if (this.store) {
+ this.store.destroy();
+ }
+ Ext.ux.menu.ListMenu.superclass.destroy.call(this);
+ },
+
+ /**
+ * Lists will initially show a 'loading' item while the data is retrieved from the store.
+ * In some cases the loaded data will result in a list that goes off the screen to the
+ * right (as placement calculations were done with the loading item). This adapter will
+ * allow show to be called with no arguments to show with the previous arguments and
+ * thus recalculate the width and potentially hang the menu from the left.
+ */
+ show : function () {
+ var lastArgs = null;
+ return function(){
+ if(arguments.length === 0){
+ Ext.ux.menu.ListMenu.superclass.show.apply(this, lastArgs);
+ } else {
+ lastArgs = arguments;
+ if (this.loadOnShow && !this.loaded) {
+ this.store.load();
+ }
+ Ext.ux.menu.ListMenu.superclass.show.apply(this, arguments);
+ }
+ };
+ }(),
+
+ /** @private */
+ onLoad : function (store, records) {
+ var visible = this.isVisible();
+ this.hide(false);
+
+ this.removeAll(true);
+
+ var gid = this.single ? Ext.id() : null;
+ for(var i=0, len=records.length; i<len; i++){
+ var item = new Ext.menu.CheckItem({
+ text: records[i].get(this.labelField),
+ group: gid,
+ checked: this.selected.indexOf(records[i].id) > -1,
+ hideOnClick: false});
+
+ item.itemId = records[i].id;
+ item.on('checkchange', this.checkChange, this);
+
+ this.add(item);
+ }
+
+ this.loaded = true;
+
+ if (visible) {
+ this.show();
+ }
+ this.fireEvent('load', this, records);
+ },
+
+ /**
+ * Get the selected items.
+ * @return {Array} selected
+ */
+ getSelected : function () {
+ return this.selected;
+ },
+
+ /** @private */
+ setSelected : function (value) {
+ value = this.selected = [].concat(value);
+
+ if (this.loaded) {
+ this.items.each(function(item){
+ item.setChecked(false, true);
+ for (var i = 0, len = value.length; i < len; i++) {
+ if (item.itemId == value[i]) {
+ item.setChecked(true, true);
+ }
+ }
+ }, this);
+ }
+ },
+
+ /**
+ * Handler for the 'checkchange' event from an check item in this menu
+ * @param {Object} item Ext.menu.CheckItem
+ * @param {Object} checked The checked value that was set
+ */
+ checkChange : function (item, checked) {
+ var value = [];
+ this.items.each(function(item){
+ if (item.checked) {
+ value.push(item.itemId);
+ }
+ },this);
+ this.selected = value;
+
+ this.fireEvent('checkchange', item, checked);
+ }
+});Ext.ns('Ext.ux.menu');
+
+/**
+ * @class Ext.ux.menu.RangeMenu
+ * @extends Ext.menu.Menu
+ * Custom implementation of Ext.menu.Menu that has preconfigured
+ * items for gt, lt, eq.
+ * <p><b><u>Example Usage:</u></b></p>
+ * <pre><code>
+
+ * </code></pre>
+ */
+Ext.ux.menu.RangeMenu = Ext.extend(Ext.menu.Menu, {
+
+ constructor : function (config) {
+
+ Ext.ux.menu.RangeMenu.superclass.constructor.call(this, config);
+
+ this.addEvents(
+ /**
+ * @event update
+ * Fires when a filter configuration has changed
+ * @param {Ext.ux.grid.filter.Filter} this The filter object.
+ */
+ 'update'
+ );
+
+ this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
+
+ var i, len, item, cfg, Cls;
+
+ for (i = 0, len = this.menuItems.length; i < len; i++) {
+ item = this.menuItems[i];
+ if (item !== '-') {
+ // defaults
+ cfg = {
+ itemId: 'range-' + item,
+ enableKeyEvents: true,
+ iconCls: this.iconCls[item] || 'no-icon',
+ listeners: {
+ scope: this,
+ keyup: this.onInputKeyUp
+ }
+ };
+ Ext.apply(
+ cfg,
+ // custom configs
+ Ext.applyIf(this.fields[item] || {}, this.fieldCfg[item]),
+ // configurable defaults
+ this.menuItemCfgs
+ );
+ Cls = cfg.fieldCls || this.fieldCls;
+ item = this.fields[item] = new Cls(cfg);
+ }
+ this.add(item);
+ }
+ },
+
+ /**
+ * @private
+ * called by this.updateTask
+ */
+ fireUpdate : function () {
+ this.fireEvent('update', this);
+ },
+
+ /**
+ * Get and return the value of the filter.
+ * @return {String} The value of this filter
+ */
+ getValue : function () {
+ var result = {}, key, field;
+ for (key in this.fields) {
+ field = this.fields[key];
+ if (field.isValid() && String(field.getValue()).length > 0) {
+ result[key] = field.getValue();
+ }
+ }
+ return result;
+ },
+
+ /**
+ * Set the value of this menu and fires the 'update' event.
+ * @param {Object} data The data to assign to this menu
+ */
+ setValue : function (data) {
+ var key;
+ for (key in this.fields) {
+ this.fields[key].setValue(data[key] !== undefined ? data[key] : '');
+ }
+ this.fireEvent('update', this);
+ },
+
+ /**
+ * @private
+ * Handler method called when there is a keyup event on an input
+ * item of this menu.
+ */
+ onInputKeyUp : function (field, e) {
+ var k = e.getKey();
+ if (k == e.RETURN && field.isValid()) {
+ e.stopEvent();
+ this.hide(true);
+ return;
+ }
+
+ if (field == this.fields.eq) {
+ if (this.fields.gt) {
+ this.fields.gt.setValue(null);
+ }
+ if (this.fields.lt) {
+ this.fields.lt.setValue(null);
+ }
+ }
+ else {
+ this.fields.eq.setValue(null);
+ }
+
+ // restart the timer
+ this.updateTask.delay(this.updateBuffer);
+ }
+});
+/*!
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.ns('Ext.ux.grid');
+
+/**
+ * @class Ext.ux.grid.GroupSummary
+ * @extends Ext.util.Observable
+ * A GridPanel plugin that enables dynamic column calculations and a dynamically
+ * updated grouped summary row.
+ */
+Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {
+ /**
+ * @cfg {Function} summaryRenderer Renderer example:<pre><code>
+summaryRenderer: function(v, params, data){
+ return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
+},
+ * </code></pre>
+ */
+ /**
+ * @cfg {String} summaryType (Optional) The type of
+ * calculation to be used for the column. For options available see
+ * {@link #Calculations}.
+ */
+
+ constructor : function(config){
+ Ext.apply(this, config);
+ Ext.ux.grid.GroupSummary.superclass.constructor.call(this);
+ },
+ init : function(grid){
+ this.grid = grid;
+ var v = this.view = grid.getView();
+ v.doGroupEnd = this.doGroupEnd.createDelegate(this);
+
+ v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
+ v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
+ v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
+ v.afterMethod('onUpdate', this.doUpdate, this);
+ v.afterMethod('onRemove', this.doRemove, this);
+
+ if(!this.rowTpl){
+ this.rowTpl = new Ext.Template(
+ '<div class="x-grid3-summary-row" style="{tstyle}">',
+ '<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
+ '<tbody><tr>{cells}</tr></tbody>',
+ '</table></div>'
+ );
+ this.rowTpl.disableFormats = true;
+ }
+ this.rowTpl.compile();
+
+ if(!this.cellTpl){
+ this.cellTpl = new Ext.Template(
+ '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
+ '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',
+ "</td>"
+ );
+ this.cellTpl.disableFormats = true;
+ }
+ this.cellTpl.compile();
+ },
+
+ /**
+ * Toggle the display of the summary row on/off
+ * @param {Boolean} visible <tt>true</tt> to show the summary, <tt>false</tt> to hide the summary.
+ */
+ toggleSummaries : function(visible){
+ var el = this.grid.getGridEl();
+ if(el){
+ if(visible === undefined){
+ visible = el.hasClass('x-grid-hide-summary');
+ }
+ el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');
+ }
+ },
+
+ renderSummary : function(o, cs){
+ cs = cs || this.view.getColumnData();
+ var cfg = this.grid.getColumnModel().config,
+ buf = [], c, p = {}, cf, last = cs.length-1;
+ for(var i = 0, len = cs.length; i < len; i++){
+ c = cs[i];
+ cf = cfg[i];
+ p.id = c.id;
+ p.style = c.style;
+ p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
+ if(cf.summaryType || cf.summaryRenderer){
+ p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
+ }else{
+ p.value = '';
+ }
+ if(p.value == undefined || p.value === "") p.value = " ";
+ buf[buf.length] = this.cellTpl.apply(p);
+ }
+
+ return this.rowTpl.apply({
+ tstyle: 'width:'+this.view.getTotalWidth()+';',
+ cells: buf.join('')
+ });
+ },
+
+ /**
+ * @private
+ * @param {Object} rs
+ * @param {Object} cs
+ */
+ calculate : function(rs, cs){
+ var data = {}, r, c, cfg = this.grid.getColumnModel().config, cf;
+ for(var j = 0, jlen = rs.length; j < jlen; j++){
+ r = rs[j];
+ for(var i = 0, len = cs.length; i < len; i++){
+ c = cs[i];
+ cf = cfg[i];
+ if(cf.summaryType){
+ data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
+ }
+ }
+ }
+ return data;
+ },
+
+ doGroupEnd : function(buf, g, cs, ds, colCount){
+ var data = this.calculate(g.rs, cs);
+ buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');
+ },
+
+ doWidth : function(col, w, tw){
+ if(!this.isGrouped()){
+ return;
+ }
+ var gs = this.view.getGroups(),
+ len = gs.length,
+ i = 0,
+ s;
+ for(; i < len; ++i){
+ s = gs[i].childNodes[2];
+ s.style.width = tw;
+ s.firstChild.style.width = tw;
+ s.firstChild.rows[0].childNodes[col].style.width = w;
+ }
+ },
+
+ doAllWidths : function(ws, tw){
+ if(!this.isGrouped()){
+ return;
+ }
+ var gs = this.view.getGroups(),
+ len = gs.length,
+ i = 0,
+ j,
+ s,
+ cells,
+ wlen = ws.length;
+
+ for(; i < len; i++){
+ s = gs[i].childNodes[2];
+ s.style.width = tw;
+ s.firstChild.style.width = tw;
+ cells = s.firstChild.rows[0].childNodes;
+ for(j = 0; j < wlen; j++){
+ cells[j].style.width = ws[j];
+ }
+ }
+ },
+
+ doHidden : function(col, hidden, tw){
+ if(!this.isGrouped()){
+ return;
+ }
+ var gs = this.view.getGroups(),
+ len = gs.length,
+ i = 0,
+ s,
+ display = hidden ? 'none' : '';
+ for(; i < len; i++){
+ s = gs[i].childNodes[2];
+ s.style.width = tw;
+ s.firstChild.style.width = tw;
+ s.firstChild.rows[0].childNodes[col].style.display = display;
+ }
+ },
+
+ isGrouped : function(){
+ return !Ext.isEmpty(this.grid.getStore().groupField);
+ },
+
+ // Note: requires that all (or the first) record in the
+ // group share the same group value. Returns false if the group
+ // could not be found.
+ refreshSummary : function(groupValue){
+ return this.refreshSummaryById(this.view.getGroupId(groupValue));
+ },
+
+ getSummaryNode : function(gid){
+ var g = Ext.fly(gid, '_gsummary');
+ if(g){
+ return g.down('.x-grid3-summary-row', true);
+ }
+ return null;
+ },
+
+ refreshSummaryById : function(gid){
+ var g = Ext.getDom(gid);
+ if(!g){
+ return false;
+ }
+ var rs = [];
+ this.grid.getStore().each(function(r){
+ if(r._groupId == gid){
+ rs[rs.length] = r;
+ }
+ });
+ var cs = this.view.getColumnData(),
+ data = this.calculate(rs, cs),
+ markup = this.renderSummary({data: data}, cs),
+ existing = this.getSummaryNode(gid);
+
+ if(existing){
+ g.removeChild(existing);
+ }
+ Ext.DomHelper.append(g, markup);
+ return true;
+ },
+
+ doUpdate : function(ds, record){
+ this.refreshSummaryById(record._groupId);
+ },
+
+ doRemove : function(ds, record, index, isUpdate){
+ if(!isUpdate){
+ this.refreshSummaryById(record._groupId);
+ }
+ },
+
+ /**
+ * Show a message in the summary row.
+ * <pre><code>
+grid.on('afteredit', function(){
+ var groupValue = 'Ext Forms: Field Anchoring';
+ summary.showSummaryMsg(groupValue, 'Updating Summary...');
+});
+ * </code></pre>
+ * @param {String} groupValue
+ * @param {String} msg Text to use as innerHTML for the summary row.
+ */
+ showSummaryMsg : function(groupValue, msg){
+ var gid = this.view.getGroupId(groupValue),
+ node = this.getSummaryNode(gid);
+ if(node){
+ node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';
+ }
+ }
+});
+
+//backwards compat
+Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;
+
+
+/**
+ * Calculation types for summary row:</p><div class="mdetail-params"><ul>
+ * <li><b><tt>sum</tt></b> : <div class="sub-desc"></div></li>
+ * <li><b><tt>count</tt></b> : <div class="sub-desc"></div></li>
+ * <li><b><tt>max</tt></b> : <div class="sub-desc"></div></li>
+ * <li><b><tt>min</tt></b> : <div class="sub-desc"></div></li>
+ * <li><b><tt>average</tt></b> : <div class="sub-desc"></div></li>
+ * </ul></div>
+ * <p>Custom calculations may be implemented. An example of
+ * custom <code>summaryType=totalCost</code>:</p><pre><code>
+// define a custom summary function
+Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
+ return v + (record.data.estimate * record.data.rate);
+};
+ * </code></pre>
+ * @property Calculations
+ */
+
+Ext.ux.grid.GroupSummary.Calculations = {
+ 'sum' : function(v, record, field){
+ return v + (record.data[field]||0);
+ },
+
+ 'count' : function(v, record, field, data){
+ return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
+ },
+
+ 'max' : function(v, record, field, data){
+ var v = record.data[field];
+ var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
+ return v > max ? (data[field+'max'] = v) : max;
+ },
+
+ 'min' : function(v, record, field, data){
+ var v = record.data[field];
+ var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
+ return v < min ? (data[field+'min'] = v) : min;
+ },
+
+ 'average' : function(v, record, field, data){
+ var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
+ var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
+ return t === 0 ? 0 : t / c;
+ }
+};
+Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;
+
+/**
+ * @class Ext.ux.grid.HybridSummary
+ * @extends Ext.ux.grid.GroupSummary
+ * Adds capability to specify the summary data for the group via json as illustrated here:
+ * <pre><code>
+{
+ data: [
+ {
+ projectId: 100, project: 'House',
+ taskId: 112, description: 'Paint',
+ estimate: 6, rate: 150,
+ due:'06/24/2007'
+ },
+ ...
+ ],
+
+ summaryData: {
+ 'House': {
+ description: 14, estimate: 9,
+ rate: 99, due: new Date(2009, 6, 29),
+ cost: 999
+ }
+ }
+}
+ * </code></pre>
+ *
+ */
+Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {
+ /**
+ * @private
+ * @param {Object} rs
+ * @param {Object} cs
+ */
+ calculate : function(rs, cs){
+ var gcol = this.view.getGroupField(),
+ gvalue = rs[0].data[gcol],
+ gdata = this.getSummaryData(gvalue);
+ return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
+ },
+
+ /**
+ * <pre><code>
+grid.on('afteredit', function(){
+ var groupValue = 'Ext Forms: Field Anchoring';
+ summary.showSummaryMsg(groupValue, 'Updating Summary...');
+ setTimeout(function(){ // simulate server call
+ // HybridSummary class implements updateSummaryData
+ summary.updateSummaryData(groupValue,
+ // create data object based on configured dataIndex
+ {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
+ }, 2000);
+});
+ * </code></pre>
+ * @param {String} groupValue
+ * @param {Object} data data object
+ * @param {Boolean} skipRefresh (Optional) Defaults to false
+ */
+ updateSummaryData : function(groupValue, data, skipRefresh){
+ var json = this.grid.getStore().reader.jsonData;
+ if(!json.summaryData){
+ json.summaryData = {};
+ }
+ json.summaryData[groupValue] = data;
+ if(!skipRefresh){
+ this.refreshSummary(groupValue);
+ }
+ },
+
+ /**
+ * Returns the summaryData for the specified groupValue or null.
+ * @param {String} groupValue
+ * @return {Object} summaryData
+ */
+ getSummaryData : function(groupValue){
+ var reader = this.grid.getStore().reader,
+ json = reader.jsonData,
+ fields = reader.recordType.prototype.fields,
+ v;
+
+ if(json && json.summaryData){
+ v = json.summaryData[groupValue];
+ if(v){
+ return reader.extractValues(v, fields.items, fields.length);
+ }
+ }
+ return null;
+ }
+});
+
+//backwards compat
+Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;
+Ext.ux.GroupTab = Ext.extend(Ext.Container, {
+ mainItem: 0,
+
+ expanded: true,
+
+ deferredRender: true,
+
+ activeTab: null,
+
+ idDelimiter: '__',
+
+ headerAsText: false,
+
+ frame: false,
+
+ hideBorders: true,
+
+ initComponent: function(config){
+ Ext.apply(this, config);
+ this.frame = false;
+
+ Ext.ux.GroupTab.superclass.initComponent.call(this);
+
+ this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');
+
+ this.setLayout(new Ext.layout.CardLayout({
+ deferredRender: this.deferredRender
+ }));
+
+ if (!this.stack) {
+ this.stack = Ext.TabPanel.AccessStack();
+ }
+
+ this.initItems();
+
+ this.on('beforerender', function(){
+ this.groupEl = this.ownerCt.getGroupEl(this);
+ }, this);
+
+ this.on('add', this.onAdd, this, {
+ target: this
+ });
+ this.on('remove', this.onRemove, this, {
+ target: this
+ });
+
+ if (this.mainItem !== undefined) {
+ var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
+ delete this.mainItem;
+ this.setMainItem(item);
+ }
+ },
+
+ /**
+ * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
+ * can return false to cancel the tab change.
+ * @param {String/Panel} tab The id or tab Panel to activate
+ */
+ setActiveTab : function(item){
+ item = this.getComponent(item);
+ if(!item){
+ return false;
+ }
+ if(!this.rendered){
+ this.activeTab = item;
+ return true;
+ }
+ if(this.activeTab != item && this.fireEvent('beforetabchange', this, item, this.activeTab) !== false){
+ if(this.activeTab && this.activeTab != this.mainItem){
+ var oldEl = this.getTabEl(this.activeTab);
+ if(oldEl){
+ Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
+ }
+ }
+ var el = this.getTabEl(item);
+ Ext.fly(el).addClass('x-grouptabs-strip-active');
+ this.activeTab = item;
+ this.stack.add(item);
+
+ this.layout.setActiveItem(item);
+ if(this.layoutOnTabChange && item.doLayout){
+ item.doLayout();
+ }
+ if(this.scrolling){
+ this.scrollToTab(item, this.animScroll);
+ }
+
+ this.fireEvent('tabchange', this, item);
+ return true;
+ }
+ return false;
+ },
+
+ getTabEl: function(item){
+ if (item == this.mainItem) {
+ return this.groupEl;
+ }
+ return Ext.TabPanel.prototype.getTabEl.call(this, item);
+ },
+
+ onRender: function(ct, position){
+ Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);
+
+ this.strip = Ext.fly(this.groupEl).createChild({
+ tag: 'ul',
+ cls: 'x-grouptabs-sub'
+ });
+
+ this.tooltip = new Ext.ToolTip({
+ target: this.groupEl,
+ delegate: 'a.x-grouptabs-text',
+ trackMouse: true,
+ renderTo: document.body,
+ listeners: {
+ beforeshow: function(tip) {
+ var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
+ ? this.mainItem
+ : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);
+
+ if(!item.tabTip) {
+ return false;
+ }
+ tip.body.dom.innerHTML = item.tabTip;
+ },
+ scope: this
+ }
+ });
+
+ if (!this.itemTpl) {
+ var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');
+ tt.disableFormats = true;
+ tt.compile();
+ Ext.ux.GroupTab.prototype.itemTpl = tt;
+ }
+
+ this.items.each(this.initTab, this);
+ },
+
+ afterRender: function(){
+ Ext.ux.GroupTab.superclass.afterRender.call(this);
+
+ if (this.activeTab !== undefined) {
+ var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
+ delete this.activeTab;
+ this.setActiveTab(item);
+ }
+ },
+
+ // private
+ initTab: function(item, index){
+ var before = this.strip.dom.childNodes[index];
+ var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
+
+ if (item === this.mainItem) {
+ item.tabEl = this.groupEl;
+ p.cls += ' x-grouptabs-main-item';
+ }
+
+ var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
+
+ item.tabEl = item.tabEl || el;
+
+ item.on('disable', this.onItemDisabled, this);
+ item.on('enable', this.onItemEnabled, this);
+ item.on('titlechange', this.onItemTitleChanged, this);
+ item.on('iconchange', this.onItemIconChanged, this);
+ item.on('beforeshow', this.onBeforeShowItem, this);
+ },
+
+ setMainItem: function(item){
+ item = this.getComponent(item);
+ if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
+ return;
+ }
+
+ this.mainItem = item;
+ },
+
+ getMainItem: function(){
+ return this.mainItem || null;
+ },
+
+ // private
+ onBeforeShowItem: function(item){
+ if (item != this.activeTab) {
+ this.setActiveTab(item);
+ return false;
+ }
+ },
+
+ // private
+ onAdd: function(gt, item, index){
+ if (this.rendered) {
+ this.initTab.call(this, item, index);
+ }
+ },
+
+ // private
+ onRemove: function(tp, item){
+ Ext.destroy(Ext.get(this.getTabEl(item)));
+ this.stack.remove(item);
+ item.un('disable', this.onItemDisabled, this);
+ item.un('enable', this.onItemEnabled, this);
+ item.un('titlechange', this.onItemTitleChanged, this);
+ item.un('iconchange', this.onItemIconChanged, this);
+ item.un('beforeshow', this.onBeforeShowItem, this);
+ if (item == this.activeTab) {
+ var next = this.stack.next();
+ if (next) {
+ this.setActiveTab(next);
+ }
+ else if (this.items.getCount() > 0) {
+ this.setActiveTab(0);
+ }
+ else {
+ this.activeTab = null;
+ }
+ }
+ },
+
+ // private
+ onBeforeAdd: function(item){
+ var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
+ if (existing) {
+ this.setActiveTab(item);
+ return false;
+ }
+ Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
+ var es = item.elements;
+ item.elements = es ? es.replace(',header', '') : es;
+ item.border = (item.border === true);
+ },
+
+ // private
+ onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
+ onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,
+
+ // private
+ onItemTitleChanged: function(item){
+ var el = this.getTabEl(item);
+ if (el) {
+ Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
+ }
+ },
+
+ //private
+ onItemIconChanged: function(item, iconCls, oldCls){
+ var el = this.getTabEl(item);
+ if (el) {
+ Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
+ }
+ },
+
+ beforeDestroy: function(){
+ Ext.TabPanel.prototype.beforeDestroy.call(this);
+ this.tooltip.destroy();
+ }
+});
+
+Ext.reg('grouptab', Ext.ux.GroupTab);
+Ext.ns('Ext.ux');
+
+Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
+ tabPosition: 'left',
+
+ alternateColor: false,
+
+ alternateCls: 'x-grouptabs-panel-alt',
+
+ defaultType: 'grouptab',
+
+ deferredRender: false,
+
+ activeGroup : null,
+
+ initComponent: function(){
+ Ext.ux.GroupTabPanel.superclass.initComponent.call(this);
+
+ this.addEvents(
+ 'beforegroupchange',
+ 'groupchange'
+ );
+ this.elements = 'body,header';
+ this.stripTarget = 'header';
+
+ this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';
+
+ this.addClass('x-grouptabs-panel');
+
+ if (this.tabStyle && this.tabStyle != '') {
+ this.addClass('x-grouptabs-panel-' + this.tabStyle);
+ }
+
+ if (this.alternateColor) {
+ this.addClass(this.alternateCls);
+ }
+
+ this.on('beforeadd', function(gtp, item, index){
+ this.initGroup(item, index);
+ });
+ },
+
+ initEvents : function() {
+ this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
+ },
+
+ onRender: function(ct, position){
+ Ext.TabPanel.superclass.onRender.call(this, ct, position);
+ if(this.plain){
+ var pos = this.tabPosition == 'top' ? 'header' : 'footer';
+ this[pos].addClass('x-tab-panel-'+pos+'-plain');
+ }
+
+ var st = this[this.stripTarget];
+
+ this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
+ tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});
+
+ var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
+ this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
+
+ this.header.addClass('x-grouptabs-panel-header');
+ this.bwrap.addClass('x-grouptabs-bwrap');
+ this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
+
+ if (!this.groupTpl) {
+ var tt = new Ext.Template(
+ '<li class="{cls}" id="{id}">',
+ '<a class="x-grouptabs-expand" onclick="return false;"></a>',
+ '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
+ '<span>{text}</span></a>',
+ '</li>'
+ );
+ tt.disableFormats = true;
+ tt.compile();
+ Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
+ }
+ this.items.each(this.initGroup, this);
+ },
+
+ afterRender: function(){
+ Ext.ux.GroupTabPanel.superclass.afterRender.call(this);
+
+ this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
+ cls: 'x-tab-joint'
+ });
+
+ this.addClass('x-tab-panel-' + this.tabPosition);
+ this.header.setWidth(this.tabWidth);
+
+ if (this.activeGroup !== undefined) {
+ var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);
+ delete this.activeGroup;
+ this.setActiveGroup(group);
+ group.setActiveTab(group.getMainItem());
+ }
+ },
+
+ getGroupEl : Ext.TabPanel.prototype.getTabEl,
+
+ // private
+ findTargets: function(e){
+ var item = null,
+ itemEl = e.getTarget('li', this.strip);
+ if (itemEl) {
+ item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
+ if (item.disabled) {
+ return {
+ expand: null,
+ item: null,
+ el: null
+ };
+ }
+ }
+ return {
+ expand: e.getTarget('.x-grouptabs-expand', this.strip),
+ isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
+ item: item,
+ el: itemEl
+ };
+ },
+
+ // private
+ onStripMouseDown: function(e){
+ if (e.button != 0) {
+ return;
+ }
+ e.preventDefault();
+ var t = this.findTargets(e);
+ if (t.expand) {
+ this.toggleGroup(t.el);
+ }
+ else if (t.item) {
+ if(t.isGroup) {
+ t.item.setActiveTab(t.item.getMainItem());
+ }
+ else {
+ t.item.ownerCt.setActiveTab(t.item);
+ }
+ }
+ },
+
+ expandGroup: function(groupEl){
+ if(groupEl.isXType) {
+ groupEl = this.getGroupEl(groupEl);
+ }
+ Ext.fly(groupEl).addClass('x-grouptabs-expanded');
+ this.syncTabJoint();
+ },
+
+ toggleGroup: function(groupEl){
+ if(groupEl.isXType) {
+ groupEl = this.getGroupEl(groupEl);
+ }
+ Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
+ this.syncTabJoint();
+ },
+
+ collapseGroup: function(groupEl){
+ if(groupEl.isXType) {
+ groupEl = this.getGroupEl(groupEl);
+ }
+ Ext.fly(groupEl).removeClass('x-grouptabs-expanded');
+ this.syncTabJoint();
+ },
+
+ syncTabJoint: function(groupEl){
+ if (!this.tabJoint) {
+ return;
+ }
+
+ groupEl = groupEl || this.getGroupEl(this.activeGroup);
+ if(groupEl) {
+ this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2);
+
+ var y = Ext.isGecko2 ? 0 : 1;
+ if (this.tabPosition == 'left'){
+ this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
+ }
+ else {
+ this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
+ }
+ }
+ else {
+ this.tabJoint.hide();
+ }
+ },
+
+ getActiveTab : function() {
+ if(!this.activeGroup) return null;
+ return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;
+ },
+
+ onResize: function(){
+ Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
+ this.syncTabJoint();
+ },
+
+ createCorner: function(el, pos){
+ return Ext.fly(el).createChild({
+ cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
+ });
+ },
+
+ initGroup: function(group, index){
+ var before = this.strip.dom.childNodes[index],
+ p = this.getTemplateArgs(group);
+ if (index === 0) {
+ p.cls += ' x-tab-first';
+ }
+ p.cls += ' x-grouptabs-main';
+ p.text = group.getMainItem().title;
+
+ var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),
+ tl = this.createCorner(el, 'top-' + this.tabPosition),
+ bl = this.createCorner(el, 'bottom-' + this.tabPosition);
+
+ group.tabEl = el;
+ if (group.expanded) {
+ this.expandGroup(el);
+ }
+
+ if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
+ bl.setLeft('-10px');
+ bl.setBottom('-5px');
+ tl.setLeft('-10px');
+ tl.setTop('-5px');
+ }
+
+ this.mon(group, {
+ scope: this,
+ changemainitem: this.onGroupChangeMainItem,
+ beforetabchange: this.onGroupBeforeTabChange
+ });
+ },
+
+ setActiveGroup : function(group) {
+ group = this.getComponent(group);
+ if(!group){
+ return false;
+ }
+ if(!this.rendered){
+ this.activeGroup = group;
+ return true;
+ }
+ if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){
+ if(this.activeGroup){
+ this.activeGroup.activeTab = null;
+ var oldEl = this.getGroupEl(this.activeGroup);
+ if(oldEl){
+ Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
+ }
+ }
+
+ var groupEl = this.getGroupEl(group);
+ Ext.fly(groupEl).addClass('x-grouptabs-strip-active');
+
+ this.activeGroup = group;
+ this.stack.add(group);
+
+ this.layout.setActiveItem(group);
+ this.syncTabJoint(groupEl);
+
+ this.fireEvent('groupchange', this, group);
+ return true;
+ }
+ return false;
+ },
+
+ onGroupBeforeTabChange: function(group, newTab, oldTab){
+ if(group !== this.activeGroup || newTab !== oldTab) {
+ this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
+ }
+ this.expandGroup(this.getGroupEl(group));
+ if(group !== this.activeGroup) {
+ return this.setActiveGroup(group);
+ }
+ },
+
+ getFrameHeight: function(){
+ var h = this.el.getFrameWidth('tb');
+ h += (this.tbar ? this.tbar.getHeight() : 0) +
+ (this.bbar ? this.bbar.getHeight() : 0);
+
+ return h;
+ },
+
+ adjustBodyWidth: function(w){
+ return w - this.tabWidth;
+ }
+});
+
+Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);/*
+ * Note that this control will most likely remain as an example, and not as a core Ext form
+ * control. However, the API will be changing in a future release and so should not yet be
+ * treated as a final, stable API at this time.
+ */
+
+/**
+ * @class Ext.ux.form.ItemSelector
+ * @extends Ext.form.Field
+ * A control that allows selection of between two Ext.ux.form.MultiSelect controls.
+ *
+ * @history
+ * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
+ *
+ * @constructor
+ * Create a new ItemSelector
+ * @param {Object} config Configuration options
+ * @xtype itemselector
+ */
+Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {
+ hideNavIcons:false,
+ imagePath:"",
+ iconUp:"up2.gif",
+ iconDown:"down2.gif",
+ iconLeft:"left2.gif",
+ iconRight:"right2.gif",
+ iconTop:"top2.gif",
+ iconBottom:"bottom2.gif",
+ drawUpIcon:true,
+ drawDownIcon:true,
+ drawLeftIcon:true,
+ drawRightIcon:true,
+ drawTopIcon:true,
+ drawBotIcon:true,
+ delimiter:',',
+ bodyStyle:null,
+ border:false,
+ defaultAutoCreate:{tag: "div"},
+ /**
+ * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
+ */
+ multiselects:null,
+
+ initComponent: function(){
+ Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
+ this.addEvents({
+ 'rowdblclick' : true,
+ 'change' : true
+ });
+ },
+
+ onRender: function(ct, position){
+ Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);
+
+ // Internal default configuration for both multiselects
+ var msConfig = [{
+ legend: 'Available',
+ draggable: true,
+ droppable: true,
+ width: 100,
+ height: 100
+ },{
+ legend: 'Selected',
+ droppable: true,
+ draggable: true,
+ width: 100,
+ height: 100
+ }];
+
+ this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
+ this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
+
+ this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
+ this.toMultiselect.on('dblclick', this.onRowDblClick, this);
+
+ var p = new Ext.Panel({
+ bodyStyle:this.bodyStyle,
+ border:this.border,
+ layout:"table",
+ layoutConfig:{columns:3}
+ });
+
+ p.add(this.fromMultiselect);
+ var icons = new Ext.Panel({header:false});
+ p.add(icons);
+ p.add(this.toMultiselect);
+ p.render(this.el);
+ icons.el.down('.'+icons.bwrapCls).remove();
+
+ // ICON HELL!!!
+ if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
+ this.imagePath+="/";
+ this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
+ this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
+ this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
+ this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
+ this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
+ this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
+ var el=icons.getEl();
+ this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
+ el.createChild({tag: 'br'});
+ this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
+ el.createChild({tag: 'br'});
+ this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
+ el.createChild({tag: 'br'});
+ this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
+ el.createChild({tag: 'br'});
+ this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
+ el.createChild({tag: 'br'});
+ this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
+ this.toTopIcon.on('click', this.toTop, this);
+ this.upIcon.on('click', this.up, this);
+ this.downIcon.on('click', this.down, this);
+ this.toBottomIcon.on('click', this.toBottom, this);
+ this.addIcon.on('click', this.fromTo, this);
+ this.removeIcon.on('click', this.toFrom, this);
+ if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
+ if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
+ if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
+ if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
+ if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
+ if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
+
+ var tb = p.body.first();
+ this.el.setWidth(p.body.first().getWidth());
+ p.body.removeClass();
+
+ this.hiddenName = this.name;
+ var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
+ this.hiddenField = this.el.createChild(hiddenTag);
+ },
+
+ doLayout: function(){
+ if(this.rendered){
+ this.fromMultiselect.fs.doLayout();
+ this.toMultiselect.fs.doLayout();
+ }
+ },
+
+ afterRender: function(){
+ Ext.ux.form.ItemSelector.superclass.afterRender.call(this);
+
+ this.toStore = this.toMultiselect.store;
+ this.toStore.on('add', this.valueChanged, this);
+ this.toStore.on('remove', this.valueChanged, this);
+ this.toStore.on('load', this.valueChanged, this);
+ this.valueChanged(this.toStore);
+ },
+
+ toTop : function() {
+ var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
+ var records = [];
+ if (selectionsArray.length > 0) {
+ selectionsArray.sort();
+ for (var i=0; i<selectionsArray.length; i++) {
+ record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
+ records.push(record);
+ }
+ selectionsArray = [];
+ for (var i=records.length-1; i>-1; i--) {
+ record = records[i];
+ this.toMultiselect.view.store.remove(record);
+ this.toMultiselect.view.store.insert(0, record);
+ selectionsArray.push(((records.length - 1) - i));
+ }
+ }
+ this.toMultiselect.view.refresh();
+ this.toMultiselect.view.select(selectionsArray);
+ },
+
+ toBottom : function() {
+ var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
+ var records = [];
+ if (selectionsArray.length > 0) {
+ selectionsArray.sort();
+ for (var i=0; i<selectionsArray.length; i++) {
+ record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
+ records.push(record);
+ }
+ selectionsArray = [];
+ for (var i=0; i<records.length; i++) {
+ record = records[i];
+ this.toMultiselect.view.store.remove(record);
+ this.toMultiselect.view.store.add(record);
+ selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
+ }
+ }
+ this.toMultiselect.view.refresh();
+ this.toMultiselect.view.select(selectionsArray);
+ },
+
+ up : function() {
+ var record = null;
+ var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
+ selectionsArray.sort();
+ var newSelectionsArray = [];
+ if (selectionsArray.length > 0) {
+ for (var i=0; i<selectionsArray.length; i++) {
+ record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
+ if ((selectionsArray[i] - 1) >= 0) {
+ this.toMultiselect.view.store.remove(record);
+ this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
+ newSelectionsArray.push(selectionsArray[i] - 1);
+ }
+ }
+ this.toMultiselect.view.refresh();
+ this.toMultiselect.view.select(newSelectionsArray);
+ }
+ },
+
+ down : function() {
+ var record = null;
+ var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
+ selectionsArray.sort();
+ selectionsArray.reverse();
+ var newSelectionsArray = [];
+ if (selectionsArray.length > 0) {
+ for (var i=0; i<selectionsArray.length; i++) {
+ record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
+ if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
+ this.toMultiselect.view.store.remove(record);
+ this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
+ newSelectionsArray.push(selectionsArray[i] + 1);
+ }
+ }
+ this.toMultiselect.view.refresh();
+ this.toMultiselect.view.select(newSelectionsArray);
+ }
+ },
+
+ fromTo : function() {
+ var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
+ var records = [];
+ if (selectionsArray.length > 0) {
+ for (var i=0; i<selectionsArray.length; i++) {
+ record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
+ records.push(record);
+ }
+ if(!this.allowDup)selectionsArray = [];
+ for (var i=0; i<records.length; i++) {
+ record = records[i];
+ if(this.allowDup){
+ var x=new Ext.data.Record();
+ record.id=x.id;
+ delete x;
+ this.toMultiselect.view.store.add(record);
+ }else{
+ this.fromMultiselect.view.store.remove(record);
+ this.toMultiselect.view.store.add(record);
+ selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
+ }
+ }
+ }
+ this.toMultiselect.view.refresh();
+ this.fromMultiselect.view.refresh();
+ var si = this.toMultiselect.store.sortInfo;
+ if(si){
+ this.toMultiselect.store.sort(si.field, si.direction);
+ }
+ this.toMultiselect.view.select(selectionsArray);
+ },
+
+ toFrom : function() {
+ var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
+ var records = [];
+ if (selectionsArray.length > 0) {
+ for (var i=0; i<selectionsArray.length; i++) {
+ record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
+ records.push(record);
+ }
+ selectionsArray = [];
+ for (var i=0; i<records.length; i++) {
+ record = records[i];
+ this.toMultiselect.view.store.remove(record);
+ if(!this.allowDup){
+ this.fromMultiselect.view.store.add(record);
+ selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
+ }
+ }
+ }
+ this.fromMultiselect.view.refresh();
+ this.toMultiselect.view.refresh();
+ var si = this.fromMultiselect.store.sortInfo;
+ if (si){
+ this.fromMultiselect.store.sort(si.field, si.direction);
+ }
+ this.fromMultiselect.view.select(selectionsArray);
+ },
+
+ valueChanged: function(store) {
+ var record = null;
+ var values = [];
+ for (var i=0; i<store.getCount(); i++) {
+ record = store.getAt(i);
+ values.push(record.get(this.toMultiselect.valueField));
+ }
+ this.hiddenField.dom.value = values.join(this.delimiter);
+ this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
+ },
+
+ getValue : function() {
+ return this.hiddenField.dom.value;
+ },
+
+ onRowDblClick : function(vw, index, node, e) {
+ if (vw == this.toMultiselect.view){
+ this.toFrom();
+ } else if (vw == this.fromMultiselect.view) {
+ this.fromTo();
+ }
+ return this.fireEvent('rowdblclick', vw, index, node, e);
+ },
+
+ reset: function(){
+ range = this.toMultiselect.store.getRange();
+ this.toMultiselect.store.removeAll();
+ this.fromMultiselect.store.add(range);
+ var si = this.fromMultiselect.store.sortInfo;
+ if (si){
+ this.fromMultiselect.store.sort(si.field, si.direction);
+ }
+ this.valueChanged(this.toMultiselect.store);
+ }
+});
+
+Ext.reg('itemselector', Ext.ux.form.ItemSelector);
+
+//backwards compat
+Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;
+Ext.ns('Ext.ux.grid');
+
+Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, {
+ lockText : 'Lock',
+ unlockText : 'Unlock',
+ rowBorderWidth : 1,
+ lockedBorderWidth : 1,
+
+ /*
+ * This option ensures that height between the rows is synchronized
+ * between the locked and unlocked sides. This option only needs to be used
+ * when the row heights aren't predictable.
+ */
+ syncHeights: false,
+
+ initTemplates : function(){
+ var ts = this.templates || {};
+
+ if (!ts.master) {
+ ts.master = new Ext.Template(
+ '<div class="x-grid3" hidefocus="true">',
+ '<div class="x-grid3-locked">',
+ '<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>',
+ '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{lstyle}">{lockedBody}</div><div class="x-grid3-scroll-spacer"></div></div>',
+ '</div>',
+ '<div class="x-grid3-viewport x-grid3-unlocked">',
+ '<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>',
+ '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
+ '</div>',
+ '<div class="x-grid3-resize-marker"> </div>',
+ '<div class="x-grid3-resize-proxy"> </div>',
+ '</div>'
+ );
+ }
+
+ this.templates = ts;
+
+ Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);
+ },
+
+ getEditorParent : function(ed){
+ return this.el.dom;
+ },
+
+ initElements : function(){
+ var E = Ext.Element,
+ el = this.grid.getGridEl().dom.firstChild,
+ cs = el.childNodes;
+
+ this.el = new E(el);
+ this.lockedWrap = new E(cs[0]);
+ this.lockedHd = new E(this.lockedWrap.dom.firstChild);
+ this.lockedInnerHd = this.lockedHd.dom.firstChild;
+ this.lockedScroller = new E(this.lockedWrap.dom.childNodes[1]);
+ this.lockedBody = new E(this.lockedScroller.dom.firstChild);
+ this.mainWrap = new E(cs[1]);
+ this.mainHd = new E(this.mainWrap.dom.firstChild);
+
+ if (this.grid.hideHeaders) {
+ this.lockedHd.setDisplayed(false);
+ this.mainHd.setDisplayed(false);
+ }
+
+ this.innerHd = this.mainHd.dom.firstChild;
+ this.scroller = new E(this.mainWrap.dom.childNodes[1]);
+
+ if(this.forceFit){
+ this.scroller.setStyle('overflow-x', 'hidden');
+ }
+
+ this.mainBody = new E(this.scroller.dom.firstChild);
+ this.focusEl = new E(this.scroller.dom.childNodes[1]);
+ this.resizeMarker = new E(cs[2]);
+ this.resizeProxy = new E(cs[3]);
+
+ this.focusEl.swallowEvent('click', true);
+ },
+
+ getLockedRows : function(){
+ return this.hasRows() ? this.lockedBody.dom.childNodes : [];
+ },
+
+ getLockedRow : function(row){
+ return this.getLockedRows()[row];
+ },
+
+ getCell : function(row, col){
+ var llen = this.cm.getLockedCount();
+ if(col < llen){
+ return this.getLockedRow(row).getElementsByTagName('td')[col];
+ }
+ return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - llen);
+ },
+
+ getHeaderCell : function(index){
+ var llen = this.cm.getLockedCount();
+ if(index < llen){
+ return this.lockedHd.dom.getElementsByTagName('td')[index];
+ }
+ return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - llen);
+ },
+
+ addRowClass : function(row, cls){
+ var r = this.getLockedRow(row);
+ if(r){
+ this.fly(r).addClass(cls);
+ }
+ Ext.ux.grid.LockingGridView.superclass.addRowClass.call(this, row, cls);
+ },
+
+ removeRowClass : function(row, cls){
+ var r = this.getLockedRow(row);
+ if(r){
+ this.fly(r).removeClass(cls);
+ }
+ Ext.ux.grid.LockingGridView.superclass.removeRowClass.call(this, row, cls);
+ },
+
+ removeRow : function(row) {
+ Ext.removeNode(this.getLockedRow(row));
+ Ext.ux.grid.LockingGridView.superclass.removeRow.call(this, row);
+ },
+
+ removeRows : function(firstRow, lastRow){
+ var bd = this.lockedBody.dom;
+ for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
+ Ext.removeNode(bd.childNodes[firstRow]);
+ }
+ Ext.ux.grid.LockingGridView.superclass.removeRows.call(this, firstRow, lastRow);
+ },
+
+ syncScroll : function(e){
+ var mb = this.scroller.dom;
+ this.lockedScroller.dom.scrollTop = mb.scrollTop;
+ Ext.ux.grid.LockingGridView.superclass.syncScroll.call(this, e);
+ },
+
+ updateSortIcon : function(col, dir){
+ var sc = this.sortClasses,
+ lhds = this.lockedHd.select('td').removeClass(sc),
+ hds = this.mainHd.select('td').removeClass(sc),
+ llen = this.cm.getLockedCount(),
+ cls = sc[dir == 'DESC' ? 1 : 0];
+ if(col < llen){
+ lhds.item(col).addClass(cls);
+ }else{
+ hds.item(col - llen).addClass(cls);
+ }
+ },
+
+ updateAllColumnWidths : function(){
+ var tw = this.getTotalWidth(),
+ clen = this.cm.getColumnCount(),
+ lw = this.getLockedWidth(),
+ llen = this.cm.getLockedCount(),
+ ws = [], len, i;
+ this.updateLockedWidth();
+ for(i = 0; i < clen; i++){
+ ws[i] = this.getColumnWidth(i);
+ var hd = this.getHeaderCell(i);
+ hd.style.width = ws[i];
+ }
+ var lns = this.getLockedRows(), ns = this.getRows(), row, trow, j;
+ for(i = 0, len = ns.length; i < len; i++){
+ row = lns[i];
+ row.style.width = lw;
+ if(row.firstChild){
+ row.firstChild.style.width = lw;
+ trow = row.firstChild.rows[0];
+ for (j = 0; j < llen; j++) {
+ trow.childNodes[j].style.width = ws[j];
+ }
+ }
+ row = ns[i];
+ row.style.width = tw;
+ if(row.firstChild){
+ row.firstChild.style.width = tw;
+ trow = row.firstChild.rows[0];
+ for (j = llen; j < clen; j++) {
+ trow.childNodes[j - llen].style.width = ws[j];
+ }
+ }
+ }
+ this.onAllColumnWidthsUpdated(ws, tw);
+ this.syncHeaderHeight();
+ },
+
+ updateColumnWidth : function(col, width){
+ var w = this.getColumnWidth(col),
+ llen = this.cm.getLockedCount(),
+ ns, rw, c, row;
+ this.updateLockedWidth();
+ if(col < llen){
+ ns = this.getLockedRows();
+ rw = this.getLockedWidth();
+ c = col;
+ }else{
+ ns = this.getRows();
+ rw = this.getTotalWidth();
+ c = col - llen;
+ }
+ var hd = this.getHeaderCell(col);
+ hd.style.width = w;
+ for(var i = 0, len = ns.length; i < len; i++){
+ row = ns[i];
+ row.style.width = rw;
+ if(row.firstChild){
+ row.firstChild.style.width = rw;
+ row.firstChild.rows[0].childNodes[c].style.width = w;
+ }
+ }
+ this.onColumnWidthUpdated(col, w, this.getTotalWidth());
+ this.syncHeaderHeight();
+ },
+
+ updateColumnHidden : function(col, hidden){
+ var llen = this.cm.getLockedCount(),
+ ns, rw, c, row,
+ display = hidden ? 'none' : '';
+ this.updateLockedWidth();
+ if(col < llen){
+ ns = this.getLockedRows();
+ rw = this.getLockedWidth();
+ c = col;
+ }else{
+ ns = this.getRows();
+ rw = this.getTotalWidth();
+ c = col - llen;
+ }
+ var hd = this.getHeaderCell(col);
+ hd.style.display = display;
+ for(var i = 0, len = ns.length; i < len; i++){
+ row = ns[i];
+ row.style.width = rw;
+ if(row.firstChild){
+ row.firstChild.style.width = rw;
+ row.firstChild.rows[0].childNodes[c].style.display = display;
+ }
+ }
+ this.onColumnHiddenUpdated(col, hidden, this.getTotalWidth());
+ delete this.lastViewWidth;
+ this.layout();
+ },
+
+ doRender : function(cs, rs, ds, startRow, colCount, stripe){
+ var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1,
+ tstyle = 'width:'+this.getTotalWidth()+';',
+ lstyle = 'width:'+this.getLockedWidth()+';',
+ buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r;
+ for(var j = 0, len = rs.length; j < len; j++){
+ r = rs[j]; cb = []; lcb = [];
+ var rowIndex = (j+startRow);
+ for(var i = 0; i < colCount; i++){
+ c = cs[i];
+ p.id = c.id;
+ p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
+ (this.cm.config[i].cellCls ? ' ' + this.cm.config[i].cellCls : '');
+ p.attr = p.cellAttr = '';
+ p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
+ p.style = c.style;
+ if(Ext.isEmpty(p.value)){
+ p.value = ' ';
+ }
+ if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){
+ p.css += ' x-grid3-dirty-cell';
+ }
+ if(c.locked){
+ lcb[lcb.length] = ct.apply(p);
+ }else{
+ cb[cb.length] = ct.apply(p);
+ }
+ }
+ var alt = [];
+ if(stripe && ((rowIndex+1) % 2 === 0)){
+ alt[0] = 'x-grid3-row-alt';
+ }
+ if(r.dirty){
+ alt[1] = ' x-grid3-dirty-row';
+ }
+ rp.cols = colCount;
+ if(this.getRowClass){
+ alt[2] = this.getRowClass(r, rowIndex, rp, ds);
+ }
+ rp.alt = alt.join(' ');
+ rp.cells = cb.join('');
+ rp.tstyle = tstyle;
+ buf[buf.length] = rt.apply(rp);
+ rp.cells = lcb.join('');
+ rp.tstyle = lstyle;
+ lbuf[lbuf.length] = rt.apply(rp);
+ }
+ return [buf.join(''), lbuf.join('')];
+ },
+ processRows : function(startRow, skipStripe){
+ if(!this.ds || this.ds.getCount() < 1){
+ return;
+ }
+ var rows = this.getRows(),
+ lrows = this.getLockedRows(),
+ row, lrow;
+ skipStripe = skipStripe || !this.grid.stripeRows;
+ startRow = startRow || 0;
+ for(var i = 0, len = rows.length; i < len; ++i){
+ row = rows[i];
+ lrow = lrows[i];
+ row.rowIndex = i;
+ lrow.rowIndex = i;
+ if(!skipStripe){
+ row.className = row.className.replace(this.rowClsRe, ' ');
+ lrow.className = lrow.className.replace(this.rowClsRe, ' ');
+ if ((i + 1) % 2 === 0){
+ row.className += ' x-grid3-row-alt';
+ lrow.className += ' x-grid3-row-alt';
+ }
+ }
+ if(this.syncHeights){
+ var el1 = Ext.get(row),
+ el2 = Ext.get(lrow),
+ h1 = el1.getHeight(),
+ h2 = el2.getHeight();
+
+ if(h1 > h2){
+ el2.setHeight(h1);
+ }else if(h2 > h1){
+ el1.setHeight(h2);
+ }
+ }
+ }
+ if(startRow === 0){
+ Ext.fly(rows[0]).addClass(this.firstRowCls);
+ Ext.fly(lrows[0]).addClass(this.firstRowCls);
+ }
+ Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
+ Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls);
+ },
+
+ afterRender : function(){
+ if(!this.ds || !this.cm){
+ return;
+ }
+ var bd = this.renderRows() || [' ', ' '];
+ this.mainBody.dom.innerHTML = bd[0];
+ this.lockedBody.dom.innerHTML = bd[1];
+ this.processRows(0, true);
+ if(this.deferEmptyText !== true){
+ this.applyEmptyText();
+ }
+ },
+
+ renderUI : function(){
+ var header = this.renderHeaders();
+ var body = this.templates.body.apply({rows:' '});
+ var html = this.templates.master.apply({
+ body: body,
+ header: header[0],
+ ostyle: 'width:'+this.getOffsetWidth()+';',
+ bstyle: 'width:'+this.getTotalWidth()+';',
+ lockedBody: body,
+ lockedHeader: header[1],
+ lstyle: 'width:'+this.getLockedWidth()+';'
+ });
+ var g = this.grid;
+ g.getGridEl().dom.innerHTML = html;
+ this.initElements();
+ Ext.fly(this.innerHd).on('click', this.handleHdDown, this);
+ Ext.fly(this.lockedInnerHd).on('click', this.handleHdDown, this);
+ this.mainHd.on({
+ scope: this,
+ mouseover: this.handleHdOver,
+ mouseout: this.handleHdOut,
+ mousemove: this.handleHdMove
+ });
+ this.lockedHd.on({
+ scope: this,
+ mouseover: this.handleHdOver,
+ mouseout: this.handleHdOut,
+ mousemove: this.handleHdMove
+ });
+ this.scroller.on('scroll', this.syncScroll, this);
+ if(g.enableColumnResize !== false){
+ this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
+ this.splitZone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
+ this.splitZone.setOuterHandleElId(Ext.id(this.mainHd.dom));
+ }
+ if(g.enableColumnMove){
+ this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
+ this.columnDrag.setOuterHandleElId(Ext.id(this.lockedInnerHd));
+ this.columnDrag.setOuterHandleElId(Ext.id(this.innerHd));
+ this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
+ }
+ if(g.enableHdMenu !== false){
+ this.hmenu = new Ext.menu.Menu({id: g.id + '-hctx'});
+ this.hmenu.add(
+ {itemId: 'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
+ {itemId: 'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
+ );
+ if(this.grid.enableColLock !== false){
+ this.hmenu.add('-',
+ {itemId: 'lock', text: this.lockText, cls: 'xg-hmenu-lock'},
+ {itemId: 'unlock', text: this.unlockText, cls: 'xg-hmenu-unlock'}
+ );
+ }
+ if(g.enableColumnHide !== false){
+ this.colMenu = new Ext.menu.Menu({id:g.id + '-hcols-menu'});
+ this.colMenu.on({
+ scope: this,
+ beforeshow: this.beforeColMenuShow,
+ itemclick: this.handleHdMenuClick
+ });
+ this.hmenu.add('-', {
+ itemId:'columns',
+ hideOnClick: false,
+ text: this.columnsText,
+ menu: this.colMenu,
+ iconCls: 'x-cols-icon'
+ });
+ }
+ this.hmenu.on('itemclick', this.handleHdMenuClick, this);
+ }
+ if(g.trackMouseOver){
+ this.mainBody.on({
+ scope: this,
+ mouseover: this.onRowOver,
+ mouseout: this.onRowOut
+ });
+ this.lockedBody.on({
+ scope: this,
+ mouseover: this.onRowOver,
+ mouseout: this.onRowOut
+ });
+ }
+
+ if(g.enableDragDrop || g.enableDrag){
+ this.dragZone = new Ext.grid.GridDragZone(g, {
+ ddGroup : g.ddGroup || 'GridDD'
+ });
+ }
+ this.updateHeaderSortState();
+ },
+
+ layout : function(){
+ if(!this.mainBody){
+ return;
+ }
+ var g = this.grid;
+ var c = g.getGridEl();
+ var csize = c.getSize(true);
+ var vw = csize.width;
+ if(!g.hideHeaders && (vw < 20 || csize.height < 20)){
+ return;
+ }
+ this.syncHeaderHeight();
+ if(g.autoHeight){
+ this.scroller.dom.style.overflow = 'visible';
+ this.lockedScroller.dom.style.overflow = 'visible';
+ if(Ext.isWebKit){
+ this.scroller.dom.style.position = 'static';
+ this.lockedScroller.dom.style.position = 'static';
+ }
+ }else{
+ this.el.setSize(csize.width, csize.height);
+ var hdHeight = this.mainHd.getHeight();
+ var vh = csize.height - (hdHeight);
+ }
+ this.updateLockedWidth();
+ if(this.forceFit){
+ if(this.lastViewWidth != vw){
+ this.fitColumns(false, false);
+ this.lastViewWidth = vw;
+ }
+ }else {
+ this.autoExpand();
+ this.syncHeaderScroll();
+ }
+ this.onLayout(vw, vh);
+ },
+
+ getOffsetWidth : function() {
+ return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth() + this.getScrollOffset()) + 'px';
+ },
+
+ renderHeaders : function(){
+ var cm = this.cm,
+ ts = this.templates,
+ ct = ts.hcell,
+ cb = [], lcb = [],
+ p = {},
+ len = cm.getColumnCount(),
+ last = len - 1;
+ for(var i = 0; i < len; i++){
+ p.id = cm.getColumnId(i);
+ p.value = cm.getColumnHeader(i) || '';
+ p.style = this.getColumnStyle(i, true);
+ p.tooltip = this.getColumnTooltip(i);
+ p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
+ (cm.config[i].headerCls ? ' ' + cm.config[i].headerCls : '');
+ if(cm.config[i].align == 'right'){
+ p.istyle = 'padding-right:16px';
+ } else {
+ delete p.istyle;
+ }
+ if(cm.isLocked(i)){
+ lcb[lcb.length] = ct.apply(p);
+ }else{
+ cb[cb.length] = ct.apply(p);
+ }
+ }
+ return [ts.header.apply({cells: cb.join(''), tstyle:'width:'+this.getTotalWidth()+';'}),
+ ts.header.apply({cells: lcb.join(''), tstyle:'width:'+this.getLockedWidth()+';'})];
+ },
+
+ updateHeaders : function(){
+ var hd = this.renderHeaders();
+ this.innerHd.firstChild.innerHTML = hd[0];
+ this.innerHd.firstChild.style.width = this.getOffsetWidth();
+ this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
+ this.lockedInnerHd.firstChild.innerHTML = hd[1];
+ var lw = this.getLockedWidth();
+ this.lockedInnerHd.firstChild.style.width = lw;
+ this.lockedInnerHd.firstChild.firstChild.style.width = lw;
+ },
+
+ getResolvedXY : function(resolved){
+ if(!resolved){
+ return null;
+ }
+ var c = resolved.cell, r = resolved.row;
+ return c ? Ext.fly(c).getXY() : [this.scroller.getX(), Ext.fly(r).getY()];
+ },
+
+ syncFocusEl : function(row, col, hscroll){
+ Ext.ux.grid.LockingGridView.superclass.syncFocusEl.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
+ },
+
+ ensureVisible : function(row, col, hscroll){
+ return Ext.ux.grid.LockingGridView.superclass.ensureVisible.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
+ },
+
+ insertRows : function(dm, firstRow, lastRow, isUpdate){
+ var last = dm.getCount() - 1;
+ if(!isUpdate && firstRow === 0 && lastRow >= last){
+ this.refresh();
+ }else{
+ if(!isUpdate){
+ this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
+ }
+ var html = this.renderRows(firstRow, lastRow),
+ before = this.getRow(firstRow);
+ if(before){
+ if(firstRow === 0){
+ this.removeRowClass(0, this.firstRowCls);
+ }
+ Ext.DomHelper.insertHtml('beforeBegin', before, html[0]);
+ before = this.getLockedRow(firstRow);
+ Ext.DomHelper.insertHtml('beforeBegin', before, html[1]);
+ }else{
+ this.removeRowClass(last - 1, this.lastRowCls);
+ Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html[0]);
+ Ext.DomHelper.insertHtml('beforeEnd', this.lockedBody.dom, html[1]);
+ }
+ if(!isUpdate){
+ this.fireEvent('rowsinserted', this, firstRow, lastRow);
+ this.processRows(firstRow);
+ }else if(firstRow === 0 || firstRow >= last){
+ this.addRowClass(firstRow, firstRow === 0 ? this.firstRowCls : this.lastRowCls);
+ }
+ }
+ this.syncFocusEl(firstRow);
+ },
+
+ getColumnStyle : function(col, isHeader){
+ var style = !isHeader ? this.cm.config[col].cellStyle || this.cm.config[col].css || '' : this.cm.config[col].headerStyle || '';
+ style += 'width:'+this.getColumnWidth(col)+';';
+ if(this.cm.isHidden(col)){
+ style += 'display:none;';
+ }
+ var align = this.cm.config[col].align;
+ if(align){
+ style += 'text-align:'+align+';';
+ }
+ return style;
+ },
+
+ getLockedWidth : function() {
+ return this.cm.getTotalLockedWidth() + 'px';
+ },
+
+ getTotalWidth : function() {
+ return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth()) + 'px';
+ },
+
+ getColumnData : function(){
+ var cs = [], cm = this.cm, colCount = cm.getColumnCount();
+ for(var i = 0; i < colCount; i++){
+ var name = cm.getDataIndex(i);
+ cs[i] = {
+ name : (!Ext.isDefined(name) ? this.ds.fields.get(i).name : name),
+ renderer : cm.getRenderer(i),
+ id : cm.getColumnId(i),
+ style : this.getColumnStyle(i),
+ locked : cm.isLocked(i)
+ };
+ }
+ return cs;
+ },
+
+ renderBody : function(){
+ var markup = this.renderRows() || [' ', ' '];
+ return [this.templates.body.apply({rows: markup[0]}), this.templates.body.apply({rows: markup[1]})];
+ },
+
+ refreshRow : function(record){
+ Ext.ux.grid.LockingGridView.superclass.refreshRow.call(this, record);
+ var index = Ext.isNumber(record) ? record : this.ds.indexOf(record);
+ this.getLockedRow(index).rowIndex = index;
+ },
+
+ refresh : function(headersToo){
+ this.fireEvent('beforerefresh', this);
+ this.grid.stopEditing(true);
+ var result = this.renderBody();
+ this.mainBody.update(result[0]).setWidth(this.getTotalWidth());
+ this.lockedBody.update(result[1]).setWidth(this.getLockedWidth());
+ if(headersToo === true){
+ this.updateHeaders();
+ this.updateHeaderSortState();
+ }
+ this.processRows(0, true);
+ this.layout();
+ this.applyEmptyText();
+ this.fireEvent('refresh', this);
+ },
+
+ onDenyColumnLock : function(){
+
+ },
+
+ initData : function(ds, cm){
+ if(this.cm){
+ this.cm.un('columnlockchange', this.onColumnLock, this);
+ }
+ Ext.ux.grid.LockingGridView.superclass.initData.call(this, ds, cm);
+ if(this.cm){
+ this.cm.on('columnlockchange', this.onColumnLock, this);
+ }
+ },
+
+ onColumnLock : function(){
+ this.refresh(true);
+ },
+
+ handleHdMenuClick : function(item){
+ var index = this.hdCtxIndex,
+ cm = this.cm,
+ id = item.getItemId(),
+ llen = cm.getLockedCount();
+ switch(id){
+ case 'lock':
+ if(cm.getColumnCount(true) <= llen + 1){
+ this.onDenyColumnLock();
+ return;
+ }
+ if(llen != index){
+ cm.setLocked(index, true, true);
+ cm.moveColumn(index, llen);
+ this.grid.fireEvent('columnmove', index, llen);
+ }else{
+ cm.setLocked(index, true);
+ }
+ break;
+ case 'unlock':
+ if(llen - 1 != index){
+ cm.setLocked(index, false, true);
+ cm.moveColumn(index, llen - 1);
+ this.grid.fireEvent('columnmove', index, llen - 1);
+ }else{
+ cm.setLocked(index, false);
+ }
+ break;
+ default:
+ return Ext.ux.grid.LockingGridView.superclass.handleHdMenuClick.call(this, item);
+ }
+ return true;
+ },
+
+ handleHdDown : function(e, t){
+ Ext.ux.grid.LockingGridView.superclass.handleHdDown.call(this, e, t);
+ if(this.grid.enableColLock !== false){
+ if(Ext.fly(t).hasClass('x-grid3-hd-btn')){
+ var hd = this.findHeaderCell(t),
+ index = this.getCellIndex(hd),
+ ms = this.hmenu.items, cm = this.cm;
+ ms.get('lock').setDisabled(cm.isLocked(index));
+ ms.get('unlock').setDisabled(!cm.isLocked(index));
+ }
+ }
+ },
+
+ syncHeaderHeight: function(){
+ this.innerHd.firstChild.firstChild.style.height = 'auto';
+ this.lockedInnerHd.firstChild.firstChild.style.height = 'auto';
+ var hd = this.innerHd.firstChild.firstChild.offsetHeight,
+ lhd = this.lockedInnerHd.firstChild.firstChild.offsetHeight,
+ height = (lhd > hd ? lhd : hd) + 'px';
+ this.innerHd.firstChild.firstChild.style.height = height;
+ this.lockedInnerHd.firstChild.firstChild.style.height = height;
+ },
+
+ updateLockedWidth: function(){
+ var lw = this.cm.getTotalLockedWidth(),
+ tw = this.cm.getTotalWidth() - lw,
+ csize = this.grid.getGridEl().getSize(true),
+ lp = Ext.isBorderBox ? 0 : this.lockedBorderWidth,
+ rp = Ext.isBorderBox ? 0 : this.rowBorderWidth,
+ vw = (csize.width - lw - lp - rp) + 'px',
+ so = this.getScrollOffset();
+ if(!this.grid.autoHeight){
+ var vh = (csize.height - this.mainHd.getHeight()) + 'px';
+ this.lockedScroller.dom.style.height = vh;
+ this.scroller.dom.style.height = vh;
+ }
+ this.lockedWrap.dom.style.width = (lw + rp) + 'px';
+ this.scroller.dom.style.width = vw;
+ this.mainWrap.dom.style.left = (lw + lp + rp) + 'px';
+ if(this.innerHd){
+ this.lockedInnerHd.firstChild.style.width = lw + 'px';
+ this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';
+ this.innerHd.style.width = vw;
+ this.innerHd.firstChild.style.width = (tw + rp + so) + 'px';
+ this.innerHd.firstChild.firstChild.style.width = tw + 'px';
+ }
+ if(this.mainBody){
+ this.lockedBody.dom.style.width = (lw + rp) + 'px';
+ this.mainBody.dom.style.width = (tw + rp) + 'px';
+ }
+ }
+});
+
+Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {
+ /**
+ * Returns true if the given column index is currently locked
+ * @param {Number} colIndex The column index
+ * @return {Boolean} True if the column is locked
+ */
+ isLocked : function(colIndex){
+ return this.config[colIndex].locked === true;
+ },
+
+ /**
+ * Locks or unlocks a given column
+ * @param {Number} colIndex The column index
+ * @param {Boolean} value True to lock, false to unlock
+ * @param {Boolean} suppressEvent Pass false to cause the columnlockchange event not to fire
+ */
+ setLocked : function(colIndex, value, suppressEvent){
+ if (this.isLocked(colIndex) == value) {
+ return;
+ }
+ this.config[colIndex].locked = value;
+ if (!suppressEvent) {
+ this.fireEvent('columnlockchange', this, colIndex, value);
+ }
+ },
+
+ /**
+ * Returns the total width of all locked columns
+ * @return {Number} The width of all locked columns
+ */
+ getTotalLockedWidth : function(){
+ var totalWidth = 0;
+ for (var i = 0, len = this.config.length; i < len; i++) {
+ if (this.isLocked(i) && !this.isHidden(i)) {
+ totalWidth += this.getColumnWidth(i);
+ }
+ }
+
+ return totalWidth;
+ },
+
+ /**
+ * Returns the total number of locked columns
+ * @return {Number} The number of locked columns
+ */
+ getLockedCount : function() {
+ var len = this.config.length;
+
+ for (var i = 0; i < len; i++) {
+ if (!this.isLocked(i)) {
+ return i;
+ }
+ }
+
+ //if we get to this point all of the columns are locked so we return the total
+ return len;
+ },
+
+ /**
+ * Moves a column from one position to another
+ * @param {Number} oldIndex The current column index
+ * @param {Number} newIndex The destination column index
+ */
+ moveColumn : function(oldIndex, newIndex){
+ var oldLocked = this.isLocked(oldIndex),
+ newLocked = this.isLocked(newIndex);
+
+ if (oldIndex < newIndex && oldLocked && !newLocked) {
+ this.setLocked(oldIndex, false, true);
+ } else if (oldIndex > newIndex && !oldLocked && newLocked) {
+ this.setLocked(oldIndex, true, true);
+ }
+
+ Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments);
+ }
+});
+Ext.ns('Ext.ux.form');
+
+/**
+ * @class Ext.ux.form.MultiSelect
+ * @extends Ext.form.Field
+ * A control that allows selection and form submission of multiple list items.
+ *
+ * @history
+ * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
+ * 2008-06-19 bpm Docs and demo code clean up
+ *
+ * @constructor
+ * Create a new MultiSelect
+ * @param {Object} config Configuration options
+ * @xtype multiselect
+ */
+Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field, {
+ /**
+ * @cfg {String} legend Wraps the object with a fieldset and specified legend.
+ */
+ /**
+ * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.
+ */
+ /**
+ * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
+ */
+ /**
+ * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
+ */
+ /**
+ * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
+ */
+ ddReorder:false,
+ /**
+ * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a
+ * toolbar config, or an array of buttons/button configs to be added to the toolbar.
+ */
+ /**
+ * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled
+ * (use for lists which are sorted, defaults to false).
+ */
+ appendOnly:false,
+ /**
+ * @cfg {Number} width Width in pixels of the control (defaults to 100).
+ */
+ width:100,
+ /**
+ * @cfg {Number} height Height in pixels of the control (defaults to 100).
+ */
+ height:100,
+ /**
+ * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).
+ */
+ displayField:0,
+ /**
+ * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).
+ */
+ valueField:1,
+ /**
+ * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no
+ * selection (defaults to true).
+ */
+ allowBlank:true,
+ /**
+ * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).
+ */
+ minSelections:0,
+ /**
+ * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).
+ */
+ maxSelections:Number.MAX_VALUE,
+ /**
+ * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as
+ * {@link Ext.form.TextField#blankText}.
+ */
+ blankText:Ext.form.TextField.prototype.blankText,
+ /**
+ * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}
+ * item(s) required'). The {0} token will be replaced by the value of {@link #minSelections}.
+ */
+ minSelectionsText:'Minimum {0} item(s) required',
+ /**
+ * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}
+ * item(s) allowed'). The {0} token will be replaced by the value of {@link #maxSelections}.
+ */
+ maxSelectionsText:'Maximum {0} item(s) allowed',
+ /**
+ * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values
+ * (defaults to ',').
+ */
+ delimiter:',',
+ /**
+ * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).
+ * Acceptable values for this property are:
+ * <div class="mdetail-params"><ul>
+ * <li><b>any {@link Ext.data.Store Store} subclass</b></li>
+ * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.
+ * <div class="mdetail-params"><ul>
+ * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">
+ * A 1-dimensional array will automatically be expanded (each array item will be the combo
+ * {@link #valueField value} and {@link #displayField text})</div></li>
+ * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">
+ * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
+ * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
+ * </div></li></ul></div></li></ul></div>
+ */
+
+ // private
+ defaultAutoCreate : {tag: "div"},
+
+ // private
+ initComponent: function(){
+ Ext.ux.form.MultiSelect.superclass.initComponent.call(this);
+
+ if(Ext.isArray(this.store)){
+ if (Ext.isArray(this.store[0])){
+ this.store = new Ext.data.ArrayStore({
+ fields: ['value','text'],
+ data: this.store
+ });
+ this.valueField = 'value';
+ }else{
+ this.store = new Ext.data.ArrayStore({
+ fields: ['text'],
+ data: this.store,
+ expandData: true
+ });
+ this.valueField = 'text';
+ }
+ this.displayField = 'text';
+ } else {
+ this.store = Ext.StoreMgr.lookup(this.store);
+ }
+
+ this.addEvents({
+ 'dblclick' : true,
+ 'click' : true,
+ 'change' : true,
+ 'drop' : true
+ });
+ },
+
+ // private
+ onRender: function(ct, position){
+ Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);
+
+ var fs = this.fs = new Ext.form.FieldSet({
+ renderTo: this.el,
+ title: this.legend,
+ height: this.height,
+ width: this.width,
+ style: "padding:0;",
+ tbar: this.tbar
+ });
+ fs.body.addClass('ux-mselect');
+
+ this.view = new Ext.ListView({
+ multiSelect: true,
+ store: this.store,
+ columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
+ hideHeaders: true
+ });
+
+ fs.add(this.view);
+
+ this.view.on('click', this.onViewClick, this);
+ this.view.on('beforeclick', this.onViewBeforeClick, this);
+ this.view.on('dblclick', this.onViewDblClick, this);
+
+ this.hiddenName = this.name || Ext.id();
+ var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
+ this.hiddenField = this.el.createChild(hiddenTag);
+ this.hiddenField.dom.disabled = this.hiddenName != this.name;
+ fs.doLayout();
+ },
+
+ // private
+ afterRender: function(){
+ Ext.ux.form.MultiSelect.superclass.afterRender.call(this);
+
+ if (this.ddReorder && !this.dragGroup && !this.dropGroup){
+ this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();
+ }
+
+ if (this.draggable || this.dragGroup){
+ this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {
+ ddGroup: this.dragGroup
+ });
+ }
+ if (this.droppable || this.dropGroup){
+ this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {
+ ddGroup: this.dropGroup
+ });
+ }
+ },
+
+ // private
+ onViewClick: function(vw, index, node, e) {
+ this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
+ this.hiddenField.dom.value = this.getValue();
+ this.fireEvent('click', this, e);
+ this.validate();
+ },
+
+ // private
+ onViewBeforeClick: function(vw, index, node, e) {
+ if (this.disabled) {return false;}
+ },
+
+ // private
+ onViewDblClick : function(vw, index, node, e) {
+ return this.fireEvent('dblclick', vw, index, node, e);
+ },
+
+ /**
+ * Returns an array of data values for the selected items in the list. The values will be separated
+ * by {@link #delimiter}.
+ * @return {Array} value An array of string data values
+ */
+ getValue: function(valueField){
+ var returnArray = [];
+ var selectionsArray = this.view.getSelectedIndexes();
+ if (selectionsArray.length == 0) {return '';}
+ for (var i=0; i<selectionsArray.length; i++) {
+ returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));
+ }
+ return returnArray.join(this.delimiter);
+ },
+
+ /**
+ * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.
+ * @param {String/Array} values The values to set
+ */
+ setValue: function(values) {
+ var index;
+ var selections = [];
+ this.view.clearSelections();
+ this.hiddenField.dom.value = '';
+
+ if (!values || (values == '')) { return; }
+
+ if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
+ for (var i=0; i<values.length; i++) {
+ index = this.view.store.indexOf(this.view.store.query(this.valueField,
+ new RegExp('^' + values[i] + '$', "i")).itemAt(0));
+ selections.push(index);
+ }
+ this.view.select(selections);
+ this.hiddenField.dom.value = this.getValue();
+ this.validate();
+ },
+
+ // inherit docs
+ reset : function() {
+ this.setValue('');
+ },
+
+ // inherit docs
+ getRawValue: function(valueField) {
+ var tmp = this.getValue(valueField);
+ if (tmp.length) {
+ tmp = tmp.split(this.delimiter);
+ }
+ else {
+ tmp = [];
+ }
+ return tmp;
+ },
+
+ // inherit docs
+ setRawValue: function(values){
+ setValue(values);
+ },
+
+ // inherit docs
+ validateValue : function(value){
+ if (value.length < 1) { // if it has no value
+ if (this.allowBlank) {
+ this.clearInvalid();
+ return true;
+ } else {
+ this.markInvalid(this.blankText);
+ return false;
+ }
+ }
+ if (value.length < this.minSelections) {
+ this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
+ return false;
+ }
+ if (value.length > this.maxSelections) {
+ this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
+ return false;
+ }
+ return true;
+ },
+
+ // inherit docs
+ disable: function(){
+ this.disabled = true;
+ this.hiddenField.dom.disabled = true;
+ this.fs.disable();
+ },
+
+ // inherit docs
+ enable: function(){
+ this.disabled = false;
+ this.hiddenField.dom.disabled = false;
+ this.fs.enable();
+ },
+
+ // inherit docs
+ destroy: function(){
+ Ext.destroy(this.fs, this.dragZone, this.dropZone);
+ Ext.ux.form.MultiSelect.superclass.destroy.call(this);
+ }
+});
+
+
+Ext.reg('multiselect', Ext.ux.form.MultiSelect);
+
+//backwards compat
+Ext.ux.Multiselect = Ext.ux.form.MultiSelect;
+
+
+Ext.ux.form.MultiSelect.DragZone = function(ms, config){
+ this.ms = ms;
+ this.view = ms.view;
+ var ddGroup = config.ddGroup || 'MultiselectDD';
+ var dd;
+ if (Ext.isArray(ddGroup)){
+ dd = ddGroup.shift();
+ } else {
+ dd = ddGroup;
+ ddGroup = null;
+ }
+ Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
+ this.setDraggable(ddGroup);
+};
+
+Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
+ onInitDrag : function(x, y){
+ var el = Ext.get(this.dragData.ddel.cloneNode(true));
+ this.proxy.update(el.dom);
+ el.setWidth(el.child('em').getWidth());
+ this.onStartDrag(x, y);
+ return true;
+ },
+
+ // private
+ collectSelection: function(data) {
+ data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
+ var i = 0;
+ this.view.store.each(function(rec){
+ if (this.view.isSelected(i)) {
+ var n = this.view.getNode(i);
+ var dragNode = n.cloneNode(true);
+ dragNode.id = Ext.id();
+ data.ddel.appendChild(dragNode);
+ data.records.push(this.view.store.getAt(i));
+ data.viewNodes.push(n);
+ }
+ i++;
+ }, this);
+ },
+
+ // override
+ onEndDrag: function(data, e) {
+ var d = Ext.get(this.dragData.ddel);
+ if (d && d.hasClass("multi-proxy")) {
+ d.remove();
+ }
+ },
+
+ // override
+ getDragData: function(e){
+ var target = this.view.findItemFromChild(e.getTarget());
+ if(target) {
+ if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
+ this.view.select(target);
+ this.ms.setValue(this.ms.getValue());
+ }
+ if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
+ var dragData = {
+ sourceView: this.view,
+ viewNodes: [],
+ records: []
+ };
+ if (this.view.getSelectionCount() == 1) {
+ var i = this.view.getSelectedIndexes()[0];
+ var n = this.view.getNode(i);
+ dragData.viewNodes.push(dragData.ddel = n);
+ dragData.records.push(this.view.store.getAt(i));
+ dragData.repairXY = Ext.fly(n).getXY();
+ } else {
+ dragData.ddel = document.createElement('div');
+ dragData.ddel.className = 'multi-proxy';
+ this.collectSelection(dragData);
+ }
+ return dragData;
+ }
+ return false;
+ },
+
+ // override the default repairXY.
+ getRepairXY : function(e){
+ return this.dragData.repairXY;
+ },
+
+ // private
+ setDraggable: function(ddGroup){
+ if (!ddGroup) return;
+ if (Ext.isArray(ddGroup)) {
+ Ext.each(ddGroup, this.setDraggable, this);
+ return;
+ }
+ this.addToGroup(ddGroup);
+ }
+});
+
+Ext.ux.form.MultiSelect.DropZone = function(ms, config){
+ this.ms = ms;
+ this.view = ms.view;
+ var ddGroup = config.ddGroup || 'MultiselectDD';
+ var dd;
+ if (Ext.isArray(ddGroup)){
+ dd = ddGroup.shift();
+ } else {
+ dd = ddGroup;
+ ddGroup = null;
+ }
+ Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
+ this.setDroppable(ddGroup);
+};
+
+Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {
+ /**
+ * Part of the Ext.dd.DropZone interface. If no target node is found, the
+ * whole Element becomes the target, and this causes the drop gesture to append.
+ */
+ getTargetFromEvent : function(e) {
+ var target = e.getTarget();
+ return target;
+ },
+
+ // private
+ getDropPoint : function(e, n, dd){
+ if (n == this.ms.fs.body.dom) { return "below"; }
+ var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
+ var c = t + (b - t) / 2;
+ var y = Ext.lib.Event.getPageY(e);
+ if(y <= c) {
+ return "above";
+ }else{
+ return "below";
+ }
+ },
+
+ // private
+ isValidDropPoint: function(pt, n, data) {
+ if (!data.viewNodes || (data.viewNodes.length != 1)) {
+ return true;
+ }
+ var d = data.viewNodes[0];
+ if (d == n) {
+ return false;
+ }
+ if ((pt == "below") && (n.nextSibling == d)) {
+ return false;
+ }
+ if ((pt == "above") && (n.previousSibling == d)) {
+ return false;
+ }
+ return true;
+ },
+
+ // override
+ onNodeEnter : function(n, dd, e, data){
+ return false;
+ },
+
+ // override
+ onNodeOver : function(n, dd, e, data){
+ var dragElClass = this.dropNotAllowed;
+ var pt = this.getDropPoint(e, n, dd);
+ if (this.isValidDropPoint(pt, n, data)) {
+ if (this.ms.appendOnly) {
+ return "x-tree-drop-ok-below";
+ }
+
+ // set the insert point style on the target node
+ if (pt) {
+ var targetElClass;
+ if (pt == "above"){
+ dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
+ targetElClass = "x-view-drag-insert-above";
+ } else {
+ dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
+ targetElClass = "x-view-drag-insert-below";
+ }
+ if (this.lastInsertClass != targetElClass){
+ Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
+ this.lastInsertClass = targetElClass;
+ }
+ }
+ }
+ return dragElClass;
+ },
+
+ // private
+ onNodeOut : function(n, dd, e, data){
+ this.removeDropIndicators(n);
+ },
+
+ // private
+ onNodeDrop : function(n, dd, e, data){
+ if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
+ return false;
+ }
+ var pt = this.getDropPoint(e, n, dd);
+ if (n != this.ms.fs.body.dom)
+ n = this.view.findItemFromChild(n);
+
+ if(this.ms.appendOnly) {
+ insertAt = this.view.store.getCount();
+ } else {
+ insertAt = n == this.ms.fs.body.dom ? this.view.store.getCount() - 1 : this.view.indexOf(n);
+ if (pt == "below") {
+ insertAt++;
+ }
+ }
+
+ var dir = false;
+
+ // Validate if dragging within the same MultiSelect
+ if (data.sourceView == this.view) {
+ // If the first element to be inserted below is the target node, remove it
+ if (pt == "below") {
+ if (data.viewNodes[0] == n) {
+ data.viewNodes.shift();
+ }
+ } else { // If the last element to be inserted above is the target node, remove it
+ if (data.viewNodes[data.viewNodes.length - 1] == n) {
+ data.viewNodes.pop();
+ }
+ }
+
+ // Nothing to drop...
+ if (!data.viewNodes.length) {
+ return false;
+ }
+
+ // If we are moving DOWN, then because a store.remove() takes place first,
+ // the insertAt must be decremented.
+ if (insertAt > this.view.store.indexOf(data.records[0])) {
+ dir = 'down';
+ insertAt--;
+ }
+ }
+
+ for (var i = 0; i < data.records.length; i++) {
+ var r = data.records[i];
+ if (data.sourceView) {
+ data.sourceView.store.remove(r);
+ }
+ this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
+ var si = this.view.store.sortInfo;
+ if(si){
+ this.view.store.sort(si.field, si.direction);
+ }
+ }
+ return true;
+ },
+
+ // private
+ removeDropIndicators : function(n){
+ if(n){
+ Ext.fly(n).removeClass([
+ "x-view-drag-insert-above",
+ "x-view-drag-insert-left",
+ "x-view-drag-insert-right",
+ "x-view-drag-insert-below"]);
+ this.lastInsertClass = "_noclass";
+ }
+ },
+
+ // private
+ setDroppable: function(ddGroup){
+ if (!ddGroup) return;
+ if (Ext.isArray(ddGroup)) {
+ Ext.each(ddGroup, this.setDroppable, this);
+ return;
+ }
+ this.addToGroup(ddGroup);
+ }
+});
+
+/* Fix for Opera, which does not seem to include the map function on Array's */
+if (!Array.prototype.map) {
+ Array.prototype.map = function(fun){
+ var len = this.length;
+ if (typeof fun != 'function') {
+ throw new TypeError();
+ }
+ var res = new Array(len);
+ var thisp = arguments[1];
+ for (var i = 0; i < len; i++) {
+ if (i in this) {
+ res[i] = fun.call(thisp, this[i], i, this);
+ }
+ }
+ return res;
+ };
+}
+
+Ext.ns('Ext.ux.data');
+
+/**
+ * @class Ext.ux.data.PagingMemoryProxy
+ * @extends Ext.data.MemoryProxy
+ * <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 {
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;
+
+ // filtering
+ if (params.filter !== undefined) {
+ result.records = result.records.filter(function(el){
+ if (typeof(el) == 'object') {
+ var att = params.filterCol || 0;
+ return String(el.data[att]).match(params.filter) ? true : false;
+ }
+ else {
+ return String(el).match(params.filter) ? true : false;
+ }
+ });
+ result.totalRecords = result.records.length;
+ }
+
+ // sorting
+ if (params.sort !== undefined) {
+ // use integer as params.sort to specify column, since arrays are not named
+ // params.sort=0; would also match a array without columns
+ var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
+ var fn = function(v1, v2){
+ return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
+ };
+ result.records.sort(function(a, b){
+ var v = 0;
+ if (typeof(a) == 'object') {
+ v = fn(a.data[params.sort], b.data[params.sort]) * dir;
+ }
+ else {
+ v = fn(a, b) * dir;
+ }
+ if (v == 0) {
+ v = (a.index < b.index ? -1 : 1);
+ }
+ return v;
+ });
+ }
+ // paging (use undefined cause start can also be 0 (thus false))
+ if (params.start !== undefined && params.limit !== undefined) {
+ result.records = result.records.slice(params.start, params.start + params.limit);
+ }
+ callback.call(scope, result, options, true);
+ }
+});
+
+//backwards compat.
+Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;
+Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {
+ minHeight: 0,
+ maxHeight:10000000,
+
+ constructor: function(config){
+ Ext.apply(this, config);
+ this.events = {};
+ Ext.ux.PanelResizer.superclass.constructor.call(this, config);
+ },
+
+ init : function(p){
+ this.panel = p;
+
+ if(this.panel.elements.indexOf('footer')==-1){
+ p.elements += ',footer';
+ }
+ p.on('render', this.onRender, this);
+ },
+
+ onRender : function(p){
+ this.handle = p.footer.createChild({cls:'x-panel-resize'});
+
+ this.tracker = new Ext.dd.DragTracker({
+ onStart: this.onDragStart.createDelegate(this),
+ onDrag: this.onDrag.createDelegate(this),
+ onEnd: this.onDragEnd.createDelegate(this),
+ tolerance: 3,
+ autoStart: 300
+ });
+ this.tracker.initEl(this.handle);
+ p.on('beforedestroy', this.tracker.destroy, this.tracker);
+ },
+
+ // private
+ onDragStart: function(e){
+ this.dragging = true;
+ this.startHeight = this.panel.el.getHeight();
+ this.fireEvent('dragstart', this, e);
+ },
+
+ // private
+ onDrag: function(e){
+ this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));
+ this.fireEvent('drag', this, e);
+ },
+
+ // private
+ onDragEnd: function(e){
+ this.dragging = false;
+ this.fireEvent('dragend', this, e);
+ }
+});
+Ext.preg('panelresizer', Ext.ux.PanelResizer);Ext.ux.Portal = Ext.extend(Ext.Panel, {
+ layout : 'column',
+ autoScroll : true,
+ cls : 'x-portal',
+ defaultType : 'portalcolumn',
+
+ initComponent : function(){
+ Ext.ux.Portal.superclass.initComponent.call(this);
+ this.addEvents({
+ validatedrop:true,
+ beforedragover:true,
+ dragover:true,
+ beforedrop:true,
+ drop:true
+ });
+ },
+
+ initEvents : function(){
+ Ext.ux.Portal.superclass.initEvents.call(this);
+ this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
+ },
+
+ beforeDestroy : function() {
+ if(this.dd){
+ this.dd.unreg();
+ }
+ Ext.ux.Portal.superclass.beforeDestroy.call(this);
+ }
+});
+
+Ext.reg('portal', Ext.ux.Portal);
+
+
+Ext.ux.Portal.DropZone = function(portal, cfg){
+ this.portal = portal;
+ Ext.dd.ScrollManager.register(portal.body);
+ Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
+ portal.body.ddScrollConfig = this.ddScrollConfig;
+};
+
+Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {
+ ddScrollConfig : {
+ vthresh: 50,
+ hthresh: -1,
+ animate: true,
+ increment: 200
+ },
+
+ createEvent : function(dd, e, data, col, c, pos){
+ return {
+ portal: this.portal,
+ panel: data.panel,
+ columnIndex: col,
+ column: c,
+ position: pos,
+ data: data,
+ source: dd,
+ rawEvent: e,
+ status: this.dropAllowed
+ };
+ },
+
+ notifyOver : function(dd, e, data){
+ var xy = e.getXY(), portal = this.portal, px = dd.proxy;
+
+ // case column widths
+ if(!this.grid){
+ this.grid = this.getGrid();
+ }
+
+ // handle case scroll where scrollbars appear during drag
+ var cw = portal.body.dom.clientWidth;
+ if(!this.lastCW){
+ this.lastCW = cw;
+ }else if(this.lastCW != cw){
+ this.lastCW = cw;
+ portal.doLayout();
+ this.grid = this.getGrid();
+ }
+
+ // determine column
+ var col = 0, xs = this.grid.columnX, cmatch = false;
+ for(var len = xs.length; col < len; col++){
+ if(xy[0] < (xs[col].x + xs[col].w)){
+ cmatch = true;
+ break;
+ }
+ }
+ // no match, fix last index
+ if(!cmatch){
+ col--;
+ }
+
+ // find insert position
+ var p, match = false, pos = 0,
+ c = portal.items.itemAt(col),
+ items = c.items.items, overSelf = false;
+
+ for(var len = items.length; pos < len; pos++){
+ p = items[pos];
+ var h = p.el.getHeight();
+ if(h === 0){
+ overSelf = true;
+ }
+ else if((p.el.getY()+(h/2)) > xy[1]){
+ match = true;
+ break;
+ }
+ }
+
+ pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);
+ var overEvent = this.createEvent(dd, e, data, col, c, pos);
+
+ if(portal.fireEvent('validatedrop', overEvent) !== false &&
+ portal.fireEvent('beforedragover', overEvent) !== false){
+
+ // make sure proxy width is fluid
+ px.getProxy().setWidth('auto');
+
+ if(p){
+ px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
+ }else{
+ px.moveProxy(c.el.dom, null);
+ }
+
+ this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};
+ this.scrollPos = portal.body.getScroll();
+
+ portal.fireEvent('dragover', overEvent);
+
+ return overEvent.status;
+ }else{
+ return overEvent.status;
+ }
+
+ },
+
+ notifyOut : function(){
+ delete this.grid;
+ },
+
+ notifyDrop : function(dd, e, data){
+ delete this.grid;
+ if(!this.lastPos){
+ return;
+ }
+ var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;
+
+ var dropEvent = this.createEvent(dd, e, data, col, c,
+ pos !== false ? pos : c.items.getCount());
+
+ if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
+ this.portal.fireEvent('beforedrop', dropEvent) !== false){
+
+ dd.proxy.getProxy().remove();
+ dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
+
+ if(pos !== false){
+ if(c == dd.panel.ownerCt && (c.items.items.indexOf(dd.panel) <= pos)){
+ pos++;
+ }
+ c.insert(pos, dd.panel);
+ }else{
+ c.add(dd.panel);
+ }
+
+ c.doLayout();
+
+ this.portal.fireEvent('drop', dropEvent);
+
+ // scroll position is lost on drop, fix it
+ var st = this.scrollPos.top;
+ if(st){
+ var d = this.portal.body.dom;
+ setTimeout(function(){
+ d.scrollTop = st;
+ }, 10);
+ }
+
+ }
+ delete this.lastPos;
+ },
+
+ // internal cache of body and column coords
+ getGrid : function(){
+ var box = this.portal.bwrap.getBox();
+ box.columnX = [];
+ this.portal.items.each(function(c){
+ box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
+ });
+ return box;
+ },
+
+ // unregister the dropzone from ScrollManager
+ unreg: function() {
+ //Ext.dd.ScrollManager.unregister(this.portal.body);
+ Ext.ux.Portal.DropZone.superclass.unreg.call(this);
+ }
+});
+Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
+ layout : 'anchor',
+ //autoEl : 'div',//already defined by Ext.Component
+ defaultType : 'portlet',
+ cls : 'x-portal-column'
+});
+
+Ext.reg('portalcolumn', Ext.ux.PortalColumn);
+Ext.ux.Portlet = Ext.extend(Ext.Panel, {
+ anchor : '100%',
+ frame : true,
+ collapsible : true,
+ draggable : true,
+ cls : 'x-portlet'
+});
+
+Ext.reg('portlet', Ext.ux.Portlet);
+/**
+* @class Ext.ux.ProgressBarPager
+* @extends Object
+* Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
+*
+* @ptype progressbarpager
+* @constructor
+* Create a new ItemSelector
+* @param {Object} config Configuration options
+* @xtype itemselector
+*/
+Ext.ux.ProgressBarPager = Ext.extend(Object, {
+ /**
+ * @cfg {Integer} progBarWidth
+ * <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()
+ );
+
+ pageNum = pgData.activePage; ;
+
+ var pct = pageNum / pgData.pages;
+
+ this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
+ }
+ }
+ }
+});
+Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
+
+Ext.ns('Ext.ux.grid');
+
+/**
+ * @class Ext.ux.grid.RowEditor
+ * @extends Ext.Panel
+ * Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid.
+ * A validation mode may be enabled which uses AnchorTips to notify the user of all
+ * validation errors at once.
+ *
+ * @ptype roweditor
+ */
+Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
+ floating: true,
+ shadow: false,
+ layout: 'hbox',
+ cls: 'x-small-editor',
+ buttonAlign: 'center',
+ baseCls: 'x-row-editor',
+ elements: 'header,footer,body',
+ frameWidth: 5,
+ buttonPad: 3,
+ clicksToEdit: 'auto',
+ monitorValid: true,
+ focusDelay: 250,
+ errorSummary: true,
+
+ saveText: 'Save',
+ cancelText: 'Cancel',
+ commitChangesText: 'You need to commit or cancel your changes',
+ errorText: 'Errors',
+
+ defaults: {
+ normalWidth: true
+ },
+
+ initComponent: function(){
+ Ext.ux.grid.RowEditor.superclass.initComponent.call(this);
+ this.addEvents(
+ /**
+ * @event beforeedit
+ * Fired before the row editor is activated.
+ * If the listener returns <tt>false</tt> the editor will not be activated.
+ * @param {Ext.ux.grid.RowEditor} roweditor This object
+ * @param {Number} rowIndex The rowIndex of the row just edited
+ */
+ 'beforeedit',
+ /**
+ * @event canceledit
+ * Fired when the editor is cancelled.
+ * @param {Ext.ux.grid.RowEditor} roweditor This object
+ * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
+ */
+ 'canceledit',
+ /**
+ * @event validateedit
+ * Fired after a row is edited and passes validation.
+ * If the listener returns <tt>false</tt> changes to the record will not be set.
+ * @param {Ext.ux.grid.RowEditor} roweditor This object
+ * @param {Object} changes Object with changes made to the record.
+ * @param {Ext.data.Record} r The Record that was edited.
+ * @param {Number} rowIndex The rowIndex of the row just edited
+ */
+ 'validateedit',
+ /**
+ * @event afteredit
+ * Fired after a row is edited and passes validation. This event is fired
+ * after the store's update event is fired with this edit.
+ * @param {Ext.ux.grid.RowEditor} roweditor This object
+ * @param {Object} changes Object with changes made to the record.
+ * @param {Ext.data.Record} r The Record that was edited.
+ * @param {Number} rowIndex The rowIndex of the row just edited
+ */
+ 'afteredit'
+ );
+ },
+
+ init: function(grid){
+ this.grid = grid;
+ this.ownerCt = grid;
+ if(this.clicksToEdit === 2){
+ grid.on('rowdblclick', this.onRowDblClick, this);
+ }else{
+ grid.on('rowclick', this.onRowClick, this);
+ if(Ext.isIE){
+ grid.on('rowdblclick', this.onRowDblClick, this);
+ }
+ }
+
+ // stopEditing without saving when a record is removed from Store.
+ grid.getStore().on('remove', function() {
+ this.stopEditing(false);
+ },this);
+
+ grid.on({
+ scope: this,
+ keydown: this.onGridKey,
+ columnresize: this.verifyLayout,
+ columnmove: this.refreshFields,
+ reconfigure: this.refreshFields,
+ beforedestroy : this.beforedestroy,
+ destroy : this.destroy,
+ bodyscroll: {
+ buffer: 250,
+ fn: this.positionButtons
+ }
+ });
+ grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1});
+ grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
+ },
+
+ beforedestroy: function() {
+ this.stopMonitoring();
+ this.grid.getStore().un('remove', this.onStoreRemove, this);
+ this.stopEditing(false);
+ Ext.destroy(this.btns, this.tooltip);
+ },
+
+ refreshFields: function(){
+ this.initFields();
+ this.verifyLayout();
+ },
+
+ isDirty: function(){
+ var dirty;
+ this.items.each(function(f){
+ if(String(this.values[f.id]) !== String(f.getValue())){
+ dirty = true;
+ return false;
+ }
+ }, this);
+ return dirty;
+ },
+
+ startEditing: function(rowIndex, doFocus){
+ if(this.editing && this.isDirty()){
+ this.showTooltip(this.commitChangesText);
+ return;
+ }
+ if(Ext.isObject(rowIndex)){
+ rowIndex = this.grid.getStore().indexOf(rowIndex);
+ }
+ if(this.fireEvent('beforeedit', this, rowIndex) !== false){
+ this.editing = true;
+ var g = this.grid, view = g.getView(),
+ row = view.getRow(rowIndex),
+ record = g.store.getAt(rowIndex);
+
+ this.record = record;
+ this.rowIndex = rowIndex;
+ this.values = {};
+ if(!this.rendered){
+ this.render(view.getEditorParent());
+ }
+ var w = Ext.fly(row).getWidth();
+ this.setSize(w);
+ if(!this.initialized){
+ this.initFields();
+ }
+ var cm = g.getColumnModel(), fields = this.items.items, f, val;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ val = this.preEditValue(record, cm.getDataIndex(i));
+ f = fields[i];
+ f.setValue(val);
+ this.values[f.id] = Ext.isEmpty(val) ? '' : val;
+ }
+ this.verifyLayout(true);
+ if(!this.isVisible()){
+ this.setPagePosition(Ext.fly(row).getXY());
+ } else{
+ this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
+ }
+ if(!this.isVisible()){
+ this.show().doLayout();
+ }
+ if(doFocus !== false){
+ this.doFocus.defer(this.focusDelay, this);
+ }
+ }
+ },
+
+ stopEditing : function(saveChanges){
+ this.editing = false;
+ if(!this.isVisible()){
+ return;
+ }
+ if(saveChanges === false || !this.isValid()){
+ this.hide();
+ this.fireEvent('canceledit', this, saveChanges === false);
+ return;
+ }
+ var changes = {},
+ r = this.record,
+ hasChange = false,
+ cm = this.grid.colModel,
+ fields = this.items.items;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ if(!cm.isHidden(i)){
+ var dindex = cm.getDataIndex(i);
+ if(!Ext.isEmpty(dindex)){
+ var oldValue = r.data[dindex],
+ value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
+ if(String(oldValue) !== String(value)){
+ changes[dindex] = value;
+ hasChange = true;
+ }
+ }
+ }
+ }
+ if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
+ r.beginEdit();
+ Ext.iterate(changes, function(name, value){
+ r.set(name, value);
+ });
+ r.endEdit();
+ this.fireEvent('afteredit', this, changes, r, this.rowIndex);
+ }
+ this.hide();
+ },
+
+ verifyLayout: function(force){
+ if(this.el && (this.isVisible() || force === true)){
+ var row = this.grid.getView().getRow(this.rowIndex);
+ this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + 9 : undefined);
+ var cm = this.grid.colModel, fields = this.items.items;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ if(!cm.isHidden(i)){
+ var adjust = 0;
+ if(i === (len - 1)){
+ adjust += 3; // outer padding
+ } else{
+ adjust += 1;
+ }
+ fields[i].show();
+ fields[i].setWidth(cm.getColumnWidth(i) - adjust);
+ } else{
+ fields[i].hide();
+ }
+ }
+ this.doLayout();
+ this.positionButtons();
+ }
+ },
+
+ slideHide : function(){
+ this.hide();
+ },
+
+ initFields: function(){
+ var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
+ this.removeAll(false);
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ var c = cm.getColumnAt(i),
+ ed = c.getEditor();
+ if(!ed){
+ ed = c.displayEditor || new Ext.form.DisplayField();
+ }
+ if(i == 0){
+ ed.margins = pm('0 1 2 1');
+ } else if(i == len - 1){
+ ed.margins = pm('0 0 2 1');
+ } else{
+ ed.margins = pm('0 1 2');
+ }
+ ed.setWidth(cm.getColumnWidth(i));
+ ed.column = c;
+ if(ed.ownerCt !== this){
+ ed.on('focus', this.ensureVisible, this);
+ ed.on('specialkey', this.onKey, this);
+ }
+ this.insert(i, ed);
+ }
+ this.initialized = true;
+ },
+
+ onKey: function(f, e){
+ if(e.getKey() === e.ENTER){
+ this.stopEditing(true);
+ e.stopPropagation();
+ }
+ },
+
+ onGridKey: function(e){
+ if(e.getKey() === e.ENTER && !this.isVisible()){
+ var r = this.grid.getSelectionModel().getSelected();
+ if(r){
+ var index = this.grid.store.indexOf(r);
+ this.startEditing(index);
+ e.stopPropagation();
+ }
+ }
+ },
+
+ ensureVisible: function(editor){
+ if(this.isVisible()){
+ this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true);
+ }
+ },
+
+ onRowClick: function(g, rowIndex, e){
+ if(this.clicksToEdit == 'auto'){
+ var li = this.lastClickIndex;
+ this.lastClickIndex = rowIndex;
+ if(li != rowIndex && !this.isVisible()){
+ return;
+ }
+ }
+ this.startEditing(rowIndex, false);
+ this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
+ },
+
+ onRowDblClick: function(g, rowIndex, e){
+ this.startEditing(rowIndex, false);
+ this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
+ },
+
+ onRender: function(){
+ Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments);
+ this.el.swallowEvent(['keydown', 'keyup', 'keypress']);
+ this.btns = new Ext.Panel({
+ baseCls: 'x-plain',
+ cls: 'x-btns',
+ elements:'body',
+ layout: 'table',
+ width: (this.minButtonWidth * 2) + (this.frameWidth * 2) + (this.buttonPad * 4), // width must be specified for IE
+ items: [{
+ ref: 'saveBtn',
+ itemId: 'saveBtn',
+ xtype: 'button',
+ text: this.saveText,
+ width: this.minButtonWidth,
+ handler: this.stopEditing.createDelegate(this, [true])
+ }, {
+ xtype: 'button',
+ text: this.cancelText,
+ width: this.minButtonWidth,
+ handler: this.stopEditing.createDelegate(this, [false])
+ }]
+ });
+ this.btns.render(this.bwrap);
+ },
+
+ afterRender: function(){
+ Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments);
+ this.positionButtons();
+ if(this.monitorValid){
+ this.startMonitoring();
+ }
+ },
+
+ onShow: function(){
+ if(this.monitorValid){
+ this.startMonitoring();
+ }
+ Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments);
+ },
+
+ onHide: function(){
+ Ext.ux.grid.RowEditor.superclass.onHide.apply(this, arguments);
+ this.stopMonitoring();
+ this.grid.getView().focusRow(this.rowIndex);
+ },
+
+ positionButtons: function(){
+ if(this.btns){
+ var g = this.grid,
+ h = this.el.dom.clientHeight,
+ view = g.getView(),
+ scroll = view.scroller.dom.scrollLeft,
+ bw = this.btns.getWidth(),
+ width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
+
+ this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
+ }
+ },
+
+ // private
+ preEditValue : function(r, field){
+ var value = r.data[field];
+ return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
+ },
+
+ // private
+ postEditValue : function(value, originalValue, r, field){
+ return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
+ },
+
+ doFocus: function(pt){
+ if(this.isVisible()){
+ var index = 0,
+ cm = this.grid.getColumnModel(),
+ c;
+ if(pt){
+ index = this.getTargetColumnIndex(pt);
+ }
+ for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
+ c = cm.getColumnAt(i);
+ if(!c.hidden && c.getEditor()){
+ c.getEditor().focus();
+ break;
+ }
+ }
+ }
+ },
+
+ getTargetColumnIndex: function(pt){
+ var grid = this.grid,
+ v = grid.view,
+ x = pt.left,
+ cms = grid.colModel.config,
+ i = 0,
+ match = false;
+ for(var len = cms.length, c; c = cms[i]; i++){
+ if(!c.hidden){
+ if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
+ match = i;
+ break;
+ }
+ }
+ }
+ return match;
+ },
+
+ startMonitoring : function(){
+ if(!this.bound && this.monitorValid){
+ this.bound = true;
+ Ext.TaskMgr.start({
+ run : this.bindHandler,
+ interval : this.monitorPoll || 200,
+ scope: this
+ });
+ }
+ },
+
+ stopMonitoring : function(){
+ this.bound = false;
+ if(this.tooltip){
+ this.tooltip.hide();
+ }
+ },
+
+ isValid: function(){
+ var valid = true;
+ this.items.each(function(f){
+ if(!f.isValid(true)){
+ valid = false;
+ return false;
+ }
+ });
+ return valid;
+ },
+
+ // private
+ bindHandler : function(){
+ if(!this.bound){
+ return false; // stops binding
+ }
+ var valid = this.isValid();
+ if(!valid && this.errorSummary){
+ this.showTooltip(this.getErrorText().join(''));
+ }
+ this.btns.saveBtn.setDisabled(!valid);
+ this.fireEvent('validation', this, valid);
+ },
+
+ showTooltip: function(msg){
+ var t = this.tooltip;
+ if(!t){
+ t = this.tooltip = new Ext.ToolTip({
+ maxWidth: 600,
+ cls: 'errorTip',
+ width: 300,
+ title: this.errorText,
+ autoHide: false,
+ anchor: 'left',
+ anchorToTarget: true,
+ mouseOffset: [40,0]
+ });
+ }
+ var v = this.grid.getView(),
+ top = parseInt(this.el.dom.style.top, 10),
+ scroll = v.scroller.dom.scrollTop,
+ h = this.el.getHeight();
+
+ if(top + h >= scroll){
+ t.initTarget(this.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();
+ }
+ },
+
+ getErrorText: function(){
+ var data = ['<ul>'];
+ this.items.each(function(f){
+ if(!f.isValid(true)){
+ data.push('<li>', f.getActiveError(), '</li>');
+ }
+ });
+ data.push('</ul>');
+ return data;
+ }
+});
+Ext.preg('roweditor', Ext.ux.grid.RowEditor);
+Ext.ns('Ext.ux.grid');
+
+/**
+ * @class Ext.ux.grid.RowExpander
+ * @extends Ext.util.Observable
+ * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
+ * a second row body which expands/contracts. The expand/contract behavior is configurable to react
+ * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
+ *
+ * @ptype rowexpander
+ */
+Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
+ /**
+ * @cfg {Boolean} expandOnEnter
+ * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
+ * key is pressed (defaults to <tt>true</tt>).
+ */
+ expandOnEnter : true,
+ /**
+ * @cfg {Boolean} expandOnDblClick
+ * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
+ * (defaults to <tt>true</tt>).
+ */
+ expandOnDblClick : true,
+
+ header : '',
+ width : 20,
+ sortable : false,
+ fixed : true,
+ hideable: false,
+ menuDisabled : true,
+ dataIndex : '',
+ id : 'expander',
+ lazyRender : true,
+ enableCaching : true,
+
+ constructor: function(config){
+ Ext.apply(this, config);
+
+ this.addEvents({
+ /**
+ * @event beforeexpand
+ * Fires before the row expands. Have the listener return false to prevent the row from expanding.
+ * @param {Object} this RowExpander object.
+ * @param {Object} Ext.data.Record Record for the selected row.
+ * @param {Object} body body element for the secondary row.
+ * @param {Number} rowIndex The current row index.
+ */
+ beforeexpand: true,
+ /**
+ * @event expand
+ * Fires after the row expands.
+ * @param {Object} this RowExpander object.
+ * @param {Object} Ext.data.Record Record for the selected row.
+ * @param {Object} body body element for the secondary row.
+ * @param {Number} rowIndex The current row index.
+ */
+ expand: true,
+ /**
+ * @event beforecollapse
+ * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
+ * @param {Object} this RowExpander object.
+ * @param {Object} Ext.data.Record Record for the selected row.
+ * @param {Object} body body element for the secondary row.
+ * @param {Number} rowIndex The current row index.
+ */
+ beforecollapse: true,
+ /**
+ * @event collapse
+ * Fires after the row collapses.
+ * @param {Object} this RowExpander object.
+ * @param {Object} Ext.data.Record Record for the selected row.
+ * @param {Object} body body element for the secondary row.
+ * @param {Number} rowIndex The current row index.
+ */
+ collapse: true
+ });
+
+ Ext.ux.grid.RowExpander.superclass.constructor.call(this);
+
+ if(this.tpl){
+ if(typeof this.tpl == 'string'){
+ this.tpl = new Ext.Template(this.tpl);
+ }
+ this.tpl.compile();
+ }
+
+ this.state = {};
+ this.bodyContent = {};
+ },
+
+ getRowClass : function(record, rowIndex, p, ds){
+ p.cols = p.cols-1;
+ var content = this.bodyContent[record.id];
+ if(!content && !this.lazyRender){
+ content = this.getBodyContent(record, rowIndex);
+ }
+ if(content){
+ p.body = content;
+ }
+ return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
+ },
+
+ init : function(grid){
+ this.grid = grid;
+
+ var view = grid.getView();
+ view.getRowClass = this.getRowClass.createDelegate(this);
+
+ view.enableRowBody = true;
+
+
+ grid.on('render', this.onRender, this);
+ grid.on('destroy', this.onDestroy, this);
+ },
+
+ // @private
+ onRender: function() {
+ var grid = this.grid;
+ var mainBody = grid.getView().mainBody;
+ mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
+ if (this.expandOnEnter) {
+ this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
+ 'enter' : this.onEnter,
+ scope: this
+ });
+ }
+ if (this.expandOnDblClick) {
+ grid.on('rowdblclick', this.onRowDblClick, this);
+ }
+ },
+
+ // @private
+ onDestroy: function() {
+ if(this.keyNav){
+ this.keyNav.disable();
+ delete this.keyNav;
+ }
+ /*
+ * A majority of the time, the plugin will be destroyed along with the grid,
+ * which means the mainBody won't be available. On the off chance that the plugin
+ * isn't destroyed with the grid, take care of removing the listener.
+ */
+ var mainBody = this.grid.getView().mainBody;
+ if(mainBody){
+ mainBody.un('mousedown', this.onMouseDown, this);
+ }
+ },
+ // @private
+ onRowDblClick: function(grid, rowIdx, e) {
+ this.toggleRow(rowIdx);
+ },
+
+ onEnter: function(e) {
+ var g = this.grid;
+ var sm = g.getSelectionModel();
+ var sels = sm.getSelections();
+ for (var i = 0, len = sels.length; i < len; i++) {
+ var rowIdx = g.getStore().indexOf(sels[i]);
+ this.toggleRow(rowIdx);
+ }
+ },
+
+ getBodyContent : function(record, index){
+ if(!this.enableCaching){
+ return this.tpl.apply(record.data);
+ }
+ var content = this.bodyContent[record.id];
+ if(!content){
+ content = this.tpl.apply(record.data);
+ this.bodyContent[record.id] = content;
+ }
+ return content;
+ },
+
+ onMouseDown : function(e, t){
+ e.stopEvent();
+ var row = e.getTarget('.x-grid3-row');
+ this.toggleRow(row);
+ },
+
+ renderer : function(v, p, record){
+ p.cellAttr = 'rowspan="2"';
+ return '<div class="x-grid3-row-expander"> </div>';
+ },
+
+ beforeExpand : function(record, body, rowIndex){
+ if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
+ if(this.tpl && this.lazyRender){
+ body.innerHTML = this.getBodyContent(record, rowIndex);
+ }
+ return true;
+ }else{
+ return false;
+ }
+ },
+
+ toggleRow : function(row){
+ if(typeof row == 'number'){
+ row = this.grid.view.getRow(row);
+ }
+ this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
+ },
+
+ expandRow : function(row){
+ if(typeof row == 'number'){
+ row = this.grid.view.getRow(row);
+ }
+ var record = this.grid.store.getAt(row.rowIndex);
+ var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
+ if(this.beforeExpand(record, body, row.rowIndex)){
+ this.state[record.id] = true;
+ Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
+ this.fireEvent('expand', this, record, body, row.rowIndex);
+ }
+ },
+
+ collapseRow : function(row){
+ if(typeof row == 'number'){
+ row = this.grid.view.getRow(row);
+ }
+ var record = this.grid.store.getAt(row.rowIndex);
+ var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
+ if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
+ this.state[record.id] = false;
+ Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
+ this.fireEvent('collapse', this, record, body, row.rowIndex);
+ }
+ }
+});
+
+Ext.preg('rowexpander', Ext.ux.grid.RowExpander);
+
+//backwards compat
+Ext.grid.RowExpander = Ext.ux.grid.RowExpander;// We are adding these custom layouts to a namespace that does not
+// exist by default in Ext, so we have to add the namespace first:
+Ext.ns('Ext.ux.layout');
+
+/**
+ * @class Ext.ux.layout.RowLayout
+ * @extends Ext.layout.ContainerLayout
+ * <p>This is the layout style of choice for creating structural layouts in a multi-row format where the height of
+ * each row can be specified as a percentage or fixed height. Row widths can also be fixed, percentage or auto.
+ * This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config,
+ * and should generally not need to be created directly via the new keyword.</p>
+ * <p>RowLayout does not have any direct config options (other than inherited ones), but it does support a
+ * specific config property of <b><tt>rowHeight</tt></b> that can be included in the config of any panel added to it. The
+ * layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel.
+ * If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).</p>
+ * <p>The height property is always evaluated as pixels, and must be a number greater than or equal to 1.
+ * The rowHeight property is always evaluated as a percentage, and must be a decimal value greater than 0 and
+ * less than 1 (e.g., .25).</p>
+ * <p>The basic rules for specifying row heights are pretty simple. The logic makes two passes through the
+ * set of contained panels. During the first layout pass, all panels that either have a fixed height or none
+ * specified (auto) are skipped, but their heights are subtracted from the overall container height. During the second
+ * pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on
+ * the total <b>remaining</b> container height. In other words, percentage height panels are designed to fill the space
+ * left over by all the fixed-height and/or auto-height panels. Because of this, while you can specify any number of rows
+ * with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your
+ * layout may not render as expected. Example usage:</p>
+ * <pre><code>
+// All rows are percentages -- they must add up to 1
+var p = new Ext.Panel({
+ title: 'Row Layout - Percentage Only',
+ layout:'ux.row',
+ items: [{
+ title: 'Row 1',
+ rowHeight: .25
+ },{
+ title: 'Row 2',
+ rowHeight: .6
+ },{
+ title: 'Row 3',
+ rowHeight: .15
+ }]
+});
+
+// Mix of height and rowHeight -- all rowHeight values must add
+// up to 1. The first row will take up exactly 120px, and the last two
+// rows will fill the remaining container height.
+var p = new Ext.Panel({
+ title: 'Row Layout - Mixed',
+ layout:'ux.row',
+ items: [{
+ title: 'Row 1',
+ height: 120,
+ // standard panel widths are still supported too:
+ width: '50%' // or 200
+ },{
+ title: 'Row 2',
+ rowHeight: .8,
+ width: 300
+ },{
+ title: 'Row 3',
+ rowHeight: .2
+ }]
+});
+</code></pre>
+ */
+Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {
+ // private
+ monitorResize:true,
+
+ type: 'row',
+
+ // private
+ allowContainerRemove: false,
+
+ // private
+ isValidParent : function(c, target){
+ return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
+ },
+
+ getLayoutTargetSize : function() {
+ var target = this.container.getLayoutTarget(), ret;
+ if (target) {
+ ret = target.getViewSize();
+
+ // IE in strict mode will return a height of 0 on the 1st pass of getViewSize.
+ // Use getStyleSize to verify the 0 height, the adjustment pass will then work properly
+ // with getViewSize
+ if (Ext.isIE && Ext.isStrict && ret.height == 0){
+ ret = target.getStyleSize();
+ }
+
+ ret.width -= target.getPadding('lr');
+ ret.height -= target.getPadding('tb');
+ }
+ return ret;
+ },
+
+ renderAll : function(ct, target) {
+ if(!this.innerCt){
+ // the innerCt prevents wrapping and shuffling while
+ // the container is resizing
+ this.innerCt = target.createChild({cls:'x-column-inner'});
+ this.innerCt.createChild({cls:'x-clear'});
+ }
+ Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
+ },
+
+ // private
+ onLayout : function(ct, target){
+ var rs = ct.items.items,
+ len = rs.length,
+ r,
+ m,
+ i,
+ margins = [];
+
+ this.renderAll(ct, target);
+
+ var size = this.getLayoutTargetSize();
+
+ if(size.width < 1 && size.height < 1){ // display none?
+ return;
+ }
+
+ var h = size.height,
+ ph = h;
+
+ this.innerCt.setSize({height:h});
+
+ // some rows can be percentages while others are fixed
+ // so we need to make 2 passes
+
+ for(i = 0; i < len; i++){
+ r = rs[i];
+ m = r.getPositionEl().getMargins('tb');
+ margins[i] = m;
+ if(!r.rowHeight){
+ ph -= (r.getHeight() + m);
+ }
}
-
- // 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;
- });
+
+ ph = ph < 0 ? 0 : ph;
+
+ for(i = 0; i < len; i++){
+ r = rs[i];
+ m = margins[i];
+ if(r.rowHeight){
+ r.setSize({height: Math.floor(r.rowHeight*ph) - m});
+ }
}
- // 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);
+
+ // Browsers differ as to when they account for scrollbars. We need to re-measure to see if the scrollbar
+ // spaces were accounted for properly. If not, re-layout.
+ if (Ext.isIE) {
+ if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) {
+ var ts = this.getLayoutTargetSize();
+ if (ts.width != size.width){
+ this.adjustmentPass = true;
+ this.onLayout(ct, target);
+ }
+ }
}
- callback.call(scope, result, options, true);
+ delete this.adjustmentPass;
}
+
+ /**
+ * @property activeItem
+ * @hide
+ */
});
-//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
+Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout;
+Ext.ns('Ext.ux.form');
+
+Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
+ initComponent : function(){
+ Ext.ux.form.SearchField.superclass.initComponent.call(this);
+ this.on('specialkey', function(f, e){
+ if(e.getKey() == e.ENTER){
+ this.onTrigger2Click();
+ }
+ }, this);
+ },
+
+ validationEvent:false,
+ validateOnBlur:false,
+ trigger1Class:'x-form-clear-trigger',
+ trigger2Class:'x-form-search-trigger',
+ hideTrigger1:true,
+ width:180,
+ hasSearch : false,
+ paramName : 'query',
+
+ onTrigger1Click : function(){
+ if(this.hasSearch){
+ this.el.dom.value = '';
+ var o = {start: 0};
+ this.store.baseParams = this.store.baseParams || {};
+ this.store.baseParams[this.paramName] = '';
+ this.store.reload({params:o});
+ this.triggers[0].hide();
+ this.hasSearch = false;
+ }
+ },
+
+ onTrigger2Click : function(){
+ var v = this.getRawValue();
+ if(v.length < 1){
+ this.onTrigger1Click();
+ return;
+ }
+ var o = {start: 0};
+ this.store.baseParams = this.store.baseParams || {};
+ this.store.baseParams[this.paramName] = v;
+ this.store.reload({params:o});
+ this.hasSearch = true;
+ this.triggers[0].show();
+ }
+});Ext.ns('Ext.ux.form');
+
/**
-* @class Ext.ux.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);
+ * @class Ext.ux.form.SelectBox
+ * @extends Ext.form.ComboBox
+ * <p>Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging
+ * through the list, with item selection occurring when the mouse button is released.
+ * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
+ * on inner elements. Re-enabling editable after calling this will NOT work.</p>
+ * @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
+ * @history 2007-07-08 jvs
+ * Slight mods for Ext 2.0
+ * @xtype selectbox
+ */
+Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
+ constructor: function(config){
+ this.searchResetDelay = 1000;
+ config = config || {};
+ config = Ext.apply(config || {}, {
+ editable: false,
+ forceSelection: true,
+ rowHeight: false,
+ lastSearchTerm: false,
+ triggerAction: 'all',
+ mode: 'local'
+ });
+
+ Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);
+
+ this.lastSelectedIndex = this.selectedIndex || 0;
+ },
+
+ initEvents : function(){
+ Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);
+ // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
+ this.el.on('keydown', this.keySearch, this, true);
+ this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
+ },
+
+ keySearch : function(e, target, options) {
+ var raw = e.getKey();
+ var key = String.fromCharCode(raw);
+ var startIndex = 0;
+
+ if( !this.store.getCount() ) {
+ return;
+ }
+
+ switch(raw) {
+ case Ext.EventObject.HOME:
+ e.stopEvent();
+ this.selectFirst();
+ return;
+
+ case Ext.EventObject.END:
+ e.stopEvent();
+ this.selectLast();
+ return;
+
+ case Ext.EventObject.PAGEDOWN:
+ this.selectNextPage();
+ e.stopEvent();
+ return;
+
+ case Ext.EventObject.PAGEUP:
+ this.selectPrevPage();
+ e.stopEvent();
+ return;
+ }
+
+ // skip special keys other than the shift key
+ if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
+ return;
+ }
+ if( this.lastSearchTerm == key ) {
+ startIndex = this.lastSelectedIndex;
}
+ this.search(this.displayField, key, startIndex);
+ this.cshTask.delay(this.searchResetDelay);
},
- //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});
-
+
+ onRender : function(ct, position) {
+ this.store.on('load', this.calcRowsPerPage, this);
+ Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
+ if( this.mode == 'local' ) {
+ this.initList();
+ this.calcRowsPerPage();
}
-
},
- // 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);
+
+ onSelect : function(record, index, skipCollapse){
+ if(this.fireEvent('beforeselect', this, record, index) !== false){
+ this.setValue(record.data[this.valueField || this.displayField]);
+ if( !skipCollapse ) {
+ this.collapse();
+ }
+ this.lastSelectedIndex = index + 1;
+ this.fireEvent('select', this, record, index);
+ }
},
-
- // private, overriddes
- parentOverrides : {
- // private
- // This method updates the information via the progress bar.
- updateInfo : function(){
- if(this.displayItem){
- var count = this.store.getCount(),
- pgData = this.getPageData(),
- pageNum = this.readPage(pgData),
- msg = count == 0 ?
- this.emptyMsg :
- String.format(
- this.displayMsg,
- this.cursor+1, this.cursor+count, this.store.getTotalCount()
- );
-
- pageNum = pgData.activePage; ;
-
- var pct = pageNum / pgData.pages;
-
- this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
+
+ afterRender : function() {
+ Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
+ if(Ext.isWebKit) {
+ this.el.swallowEvent('mousedown', true);
+ }
+ this.el.unselectable();
+ this.innerList.unselectable();
+ this.trigger.unselectable();
+ this.innerList.on('mouseup', function(e, target, options) {
+ if( target.id && target.id == this.innerList.id ) {
+ return;
+ }
+ this.onViewClick();
+ }, this);
+
+ this.innerList.on('mouseover', function(e, target, options) {
+ if( target.id && target.id == this.innerList.id ) {
+ return;
}
+ this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
+ this.cshTask.delay(this.searchResetDelay);
+ }, this);
+
+ this.trigger.un('click', this.onTriggerClick, this);
+ this.trigger.on('mousedown', function(e, target, options) {
+ e.preventDefault();
+ this.onTriggerClick();
+ }, this);
+
+ this.on('collapse', function(e, target, options) {
+ Ext.getDoc().un('mouseup', this.collapseIf, this);
+ }, this, true);
+
+ this.on('expand', function(e, target, options) {
+ Ext.getDoc().on('mouseup', this.collapseIf, this);
+ }, this, true);
+ },
+
+ clearSearchHistory : function() {
+ this.lastSelectedIndex = 0;
+ this.lastSearchTerm = false;
+ },
+
+ selectFirst : function() {
+ this.focusAndSelect(this.store.data.first());
+ },
+
+ selectLast : function() {
+ this.focusAndSelect(this.store.data.last());
+ },
+
+ selectPrevPage : function() {
+ if( !this.rowHeight ) {
+ return;
+ }
+ var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
+ this.focusAndSelect(this.store.getAt(index));
+ },
+
+ selectNextPage : function() {
+ if( !this.rowHeight ) {
+ return;
+ }
+ var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
+ this.focusAndSelect(this.store.getAt(index));
+ },
+
+ search : function(field, value, startIndex) {
+ field = field || this.displayField;
+ this.lastSearchTerm = value;
+ var index = this.store.find.apply(this.store, arguments);
+ if( index !== -1 ) {
+ this.focusAndSelect(index);
+ }
+ },
+
+ focusAndSelect : function(record) {
+ var index = Ext.isNumber(record) ? record : this.store.indexOf(record);
+ this.select(index, this.isExpanded());
+ this.onSelect(this.store.getAt(index), index, this.isExpanded());
+ },
+
+ calcRowsPerPage : function() {
+ if( this.store.getCount() ) {
+ this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
+ this.rowsPerPage = this.maxHeight / this.rowHeight;
+ } else {
+ this.rowHeight = false;
}
}
+
});
-Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
-Ext.ns('Ext.ux.grid');
+Ext.reg('selectbox', Ext.ux.form.SelectBox);
+//backwards compat
+Ext.ux.SelectBox = Ext.ux.form.SelectBox;
/**
- * @class Ext.ux.grid.RowEditor
- * @extends Ext.Panel
- * Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid.
- * A validation mode may be enabled which uses AnchorTips to notify the user of all
- * validation errors at once.
- *
- * @ptype roweditor
+ * Plugin for PagingToolbar which replaces the textfield input with a slider
*/
-Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
- floating: true,
- shadow: false,
- layout: 'hbox',
- cls: 'x-small-editor',
- buttonAlign: 'center',
- baseCls: 'x-row-editor',
- elements: 'header,footer,body',
- frameWidth: 5,
- buttonPad: 3,
- clicksToEdit: 'auto',
- monitorValid: true,
- focusDelay: 250,
- errorSummary: true,
+Ext.ux.SlidingPager = Ext.extend(Object, {
+ init : function(pbar){
+ var idx = pbar.items.indexOf(pbar.inputItem);
+ Ext.each(pbar.items.getRange(idx - 2, idx + 2), function(c){
+ c.hide();
+ });
+ var slider = new Ext.Slider({
+ width: 114,
+ minValue: 1,
+ maxValue: 1,
+ plugins: new Ext.slider.Tip({
+ getText : function(thumb) {
+ return String.format('Page <b>{0}</b> of <b>{1}</b>', thumb.value, thumb.slider.maxValue);
+ }
+ }),
+ listeners: {
+ changecomplete: function(s, v){
+ pbar.changePage(v);
+ }
+ }
+ });
+ pbar.insert(idx + 1, slider);
+ pbar.on({
+ change: function(pb, data){
+ slider.setMaxValue(data.pages);
+ slider.setValue(data.activePage);
+ }
+ });
+ }
+});Ext.ns('Ext.ux.form');
- saveText: 'Save',
- cancelText: 'Cancel',
- commitChangesText: 'You need to commit or cancel your changes',
- errorText: 'Errors',
+/**
+ * @class Ext.ux.form.SpinnerField
+ * @extends Ext.form.NumberField
+ * Creates a field utilizing Ext.ux.Spinner
+ * @xtype spinnerfield
+ */
+Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
+ actionMode: 'wrap',
+ deferHeight: true,
+ autoSize: Ext.emptyFn,
+ onBlur: Ext.emptyFn,
+ adjustSize: Ext.BoxComponent.prototype.adjustSize,
- defaults: {
- normalWidth: true
- },
+ constructor: function(config) {
+ var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');
- initComponent: function(){
- Ext.ux.grid.RowEditor.superclass.initComponent.call(this);
- this.addEvents(
- /**
- * @event beforeedit
- * Fired before the row editor is activated.
- * If the listener returns <tt>false</tt> the editor will not be activated.
- * @param {Ext.ux.grid.RowEditor} roweditor This object
- * @param {Number} rowIndex The rowIndex of the row just edited
- */
- 'beforeedit',
- /**
- * @event canceledit
- * Fired when the editor is cancelled.
- * @param {Ext.ux.grid.RowEditor} roweditor This object
- * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
- */
- 'canceledit',
- /**
- * @event validateedit
- * Fired after a row is edited and passes validation.
- * If the listener returns <tt>false</tt> changes to the record will not be set.
- * @param {Ext.ux.grid.RowEditor} roweditor This object
- * @param {Object} changes Object with changes made to the record.
- * @param {Ext.data.Record} r The Record that was edited.
- * @param {Number} rowIndex The rowIndex of the row just edited
- */
- 'validateedit',
- /**
- * @event afteredit
- * Fired after a row is edited and passes validation. This event is fired
- * after the store's update event is fired with this edit.
- * @param {Ext.ux.grid.RowEditor} roweditor This object
- * @param {Object} changes Object with changes made to the record.
- * @param {Ext.data.Record} r The Record that was edited.
- * @param {Number} rowIndex The rowIndex of the row just edited
- */
- 'afteredit'
- );
- },
+ var spl = this.spinner = new Ext.ux.Spinner(spinnerConfig);
- init: function(grid){
- this.grid = grid;
- this.ownerCt = grid;
- if(this.clicksToEdit === 2){
- grid.on('rowdblclick', this.onRowDblClick, this);
- }else{
- grid.on('rowclick', this.onRowClick, this);
- if(Ext.isIE){
- grid.on('rowdblclick', this.onRowDblClick, this);
- }
- }
+ var plugins = config.plugins
+ ? (Ext.isArray(config.plugins)
+ ? config.plugins.push(spl)
+ : [config.plugins, spl])
+ : spl;
- // stopEditing without saving when a record is removed from Store.
- grid.getStore().on('remove', function() {
- this.stopEditing(false);
- },this);
+ Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
+ },
- grid.on({
- scope: this,
- keydown: this.onGridKey,
- columnresize: this.verifyLayout,
- columnmove: this.refreshFields,
- reconfigure: this.refreshFields,
- beforedestroy : this.beforedestroy,
- destroy : this.destroy,
- bodyscroll: {
- buffer: 250,
- fn: this.positionButtons
- }
- });
- grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1});
- grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
+ // private
+ getResizeEl: function(){
+ return this.wrap;
},
- beforedestroy: function() {
- this.grid.getStore().un('remove', this.onStoreRemove, this);
- this.stopEditing(false);
- Ext.destroy(this.btns);
+ // private
+ getPositionEl: function(){
+ return this.wrap;
},
- refreshFields: function(){
- this.initFields();
- this.verifyLayout();
+ // private
+ alignErrorIcon: function(){
+ if (this.wrap) {
+ this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
+ }
},
- isDirty: function(){
- var dirty;
- this.items.each(function(f){
- if(String(this.values[f.id]) !== String(f.getValue())){
- dirty = true;
- return false;
- }
- }, this);
- return dirty;
+ validateBlur: function(){
+ return true;
+ }
+});
+
+Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);
+
+//backwards compat
+Ext.form.SpinnerField = Ext.ux.form.SpinnerField;
+/**
+ * @class Ext.ux.Spinner
+ * @extends Ext.util.Observable
+ * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
+ */
+Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
+ incrementValue: 1,
+ alternateIncrementValue: 5,
+ triggerClass: 'x-form-spinner-trigger',
+ splitterClass: 'x-form-spinner-splitter',
+ alternateKey: Ext.EventObject.shiftKey,
+ defaultValue: 0,
+ accelerate: false,
+
+ constructor: function(config){
+ Ext.ux.Spinner.superclass.constructor.call(this, config);
+ Ext.apply(this, config);
+ this.mimicing = false;
},
- startEditing: function(rowIndex, doFocus){
- if(this.editing && this.isDirty()){
- this.showTooltip(this.commitChangesText);
- return;
- }
- if(Ext.isObject(rowIndex)){
- rowIndex = this.grid.getStore().indexOf(rowIndex);
- }
- if(this.fireEvent('beforeedit', this, rowIndex) !== false){
- this.editing = true;
- var g = this.grid, view = g.getView(),
- row = view.getRow(rowIndex),
- record = g.store.getAt(rowIndex);
+ init: function(field){
+ this.field = field;
- this.record = record;
- this.rowIndex = rowIndex;
- this.values = {};
- if(!this.rendered){
- this.render(view.getEditorParent());
- }
- var w = Ext.fly(row).getWidth();
- this.setSize(w);
- if(!this.initialized){
- this.initFields();
- }
- var cm = g.getColumnModel(), fields = this.items.items, f, val;
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- val = this.preEditValue(record, cm.getDataIndex(i));
- f = fields[i];
- f.setValue(val);
- this.values[f.id] = Ext.isEmpty(val) ? '' : val;
- }
- this.verifyLayout(true);
- if(!this.isVisible()){
- this.setPagePosition(Ext.fly(row).getXY());
- } else{
- this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
- }
- if(!this.isVisible()){
- this.show().doLayout();
- }
- if(doFocus !== false){
- this.doFocus.defer(this.focusDelay, this);
- }
- }
+ field.afterMethod('onRender', this.doRender, this);
+ field.afterMethod('onEnable', this.doEnable, this);
+ field.afterMethod('onDisable', this.doDisable, this);
+ field.afterMethod('afterRender', this.doAfterRender, this);
+ field.afterMethod('onResize', this.doResize, this);
+ field.afterMethod('onFocus', this.doFocus, this);
+ field.beforeMethod('onDestroy', this.doDestroy, this);
},
- stopEditing : function(saveChanges){
- this.editing = false;
- if(!this.isVisible()){
- return;
- }
- if(saveChanges === false || !this.isValid()){
- this.hide();
- this.fireEvent('canceledit', this, saveChanges === false);
- return;
- }
- var changes = {},
- r = this.record,
- hasChange = false,
- cm = this.grid.colModel,
- fields = this.items.items;
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- if(!cm.isHidden(i)){
- var dindex = cm.getDataIndex(i);
- if(!Ext.isEmpty(dindex)){
- var oldValue = r.data[dindex],
- value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
- if(String(oldValue) !== String(value)){
- changes[dindex] = value;
- hasChange = true;
- }
- }
- }
- }
- if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
- r.beginEdit();
- Ext.iterate(changes, function(name, value){
- r.set(name, value);
+ doRender: function(ct, position){
+ var el = this.el = this.field.getEl();
+ var f = this.field;
+
+ if (!f.wrap) {
+ f.wrap = this.wrap = el.wrap({
+ cls: "x-form-field-wrap"
});
- r.endEdit();
- this.fireEvent('afteredit', this, changes, r, this.rowIndex);
}
- this.hide();
- },
-
- verifyLayout: function(force){
- if(this.el && (this.isVisible() || force === true)){
- var row = this.grid.getView().getRow(this.rowIndex);
- this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + 9 : undefined);
- var cm = this.grid.colModel, fields = this.items.items;
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- if(!cm.isHidden(i)){
- var adjust = 0;
- if(i === (len - 1)){
- adjust += 3; // outer padding
- } else{
- adjust += 1;
- }
- fields[i].show();
- fields[i].setWidth(cm.getColumnWidth(i) - adjust);
- } else{
- fields[i].hide();
- }
- }
- this.doLayout();
- this.positionButtons();
+ else {
+ this.wrap = f.wrap.addClass('x-form-field-wrap');
+ }
+
+ this.trigger = this.wrap.createChild({
+ tag: "img",
+ src: Ext.BLANK_IMAGE_URL,
+ cls: "x-form-trigger " + this.triggerClass
+ });
+
+ if (!f.width) {
+ this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
}
+
+ this.splitter = this.wrap.createChild({
+ tag: 'div',
+ cls: this.splitterClass,
+ style: 'width:13px; height:2px;'
+ });
+ this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
+
+ this.proxy = this.trigger.createProxy('', this.splitter, true);
+ this.proxy.addClass("x-form-spinner-proxy");
+ this.proxy.setStyle('left', '0px');
+ this.proxy.setSize(14, 1);
+ this.proxy.hide();
+ this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
+ dragElId: this.proxy.id
+ });
+
+ this.initTrigger();
+ this.initSpinner();
},
- slideHide : function(){
- this.hide();
+ doAfterRender: function(){
+ var y;
+ if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
+ this.el.position();
+ this.el.setY(y);
+ }
},
- initFields: function(){
- var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
- this.removeAll(false);
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- var c = cm.getColumnAt(i),
- ed = c.getEditor();
- if(!ed){
- ed = c.displayEditor || new Ext.form.DisplayField();
- }else{
- ed = ed.field;
- }
- if(i == 0){
- ed.margins = pm('0 1 2 1');
- } else if(i == len - 1){
- ed.margins = pm('0 0 2 1');
- } else{
- ed.margins = pm('0 1 2');
- }
- ed.setWidth(cm.getColumnWidth(i));
- ed.column = c;
- if(ed.ownerCt !== this){
- ed.on('focus', this.ensureVisible, this);
- ed.on('specialkey', this.onKey, this);
- }
- this.insert(i, ed);
+ doEnable: function(){
+ if (this.wrap) {
+ this.wrap.removeClass(this.field.disabledClass);
}
- this.initialized = true;
},
- onKey: function(f, e){
- if(e.getKey() === e.ENTER){
- this.stopEditing(true);
- e.stopPropagation();
+ doDisable: function(){
+ if (this.wrap) {
+ this.wrap.addClass(this.field.disabledClass);
+ this.el.removeClass(this.field.disabledClass);
}
},
- onGridKey: function(e){
- if(e.getKey() === e.ENTER && !this.isVisible()){
- var r = this.grid.getSelectionModel().getSelected();
- if(r){
- var index = this.grid.store.indexOf(r);
- this.startEditing(index);
- e.stopPropagation();
- }
+ doResize: function(w, h){
+ if (typeof w == 'number') {
+ this.el.setWidth(w - this.trigger.getWidth());
}
+ this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
},
- ensureVisible: function(editor){
- if(this.isVisible()){
- this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true);
+ doFocus: function(){
+ if (!this.mimicing) {
+ this.wrap.addClass('x-trigger-wrap-focus');
+ this.mimicing = true;
+ Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
+ delay: 10
+ });
+ this.el.on('keydown', this.checkTab, this);
}
},
- onRowClick: function(g, rowIndex, e){
- if(this.clicksToEdit == 'auto'){
- var li = this.lastClickIndex;
- this.lastClickIndex = rowIndex;
- if(li != rowIndex && !this.isVisible()){
- return;
- }
+ // private
+ checkTab: function(e){
+ if (e.getKey() == e.TAB) {
+ this.triggerBlur();
}
- this.startEditing(rowIndex, false);
- this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
},
- onRowDblClick: function(g, rowIndex, e){
- this.startEditing(rowIndex, false);
- this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
+ // private
+ mimicBlur: function(e){
+ if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
+ this.triggerBlur();
+ }
},
- onRender: function(){
- Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments);
- this.el.swallowEvent(['keydown', 'keyup', 'keypress']);
- this.btns = new Ext.Panel({
- baseCls: 'x-plain',
- cls: 'x-btns',
- elements:'body',
- layout: 'table',
- width: (this.minButtonWidth * 2) + (this.frameWidth * 2) + (this.buttonPad * 4), // width must be specified for IE
- items: [{
- ref: 'saveBtn',
- itemId: 'saveBtn',
- xtype: 'button',
- text: this.saveText,
- width: this.minButtonWidth,
- handler: this.stopEditing.createDelegate(this, [true])
- }, {
- xtype: 'button',
- text: this.cancelText,
- width: this.minButtonWidth,
- handler: this.stopEditing.createDelegate(this, [false])
- }]
+ // private
+ triggerBlur: function(){
+ this.mimicing = false;
+ Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
+ this.el.un("keydown", this.checkTab, this);
+ this.field.beforeBlur();
+ this.wrap.removeClass('x-trigger-wrap-focus');
+ this.field.onBlur.call(this.field);
+ },
+
+ initTrigger: function(){
+ this.trigger.addClassOnOver('x-form-trigger-over');
+ this.trigger.addClassOnClick('x-form-trigger-click');
+ },
+
+ initSpinner: function(){
+ this.field.addEvents({
+ 'spin': true,
+ 'spinup': true,
+ 'spindown': true
});
- this.btns.render(this.bwrap);
+
+ this.keyNav = new Ext.KeyNav(this.el, {
+ "up": function(e){
+ e.preventDefault();
+ this.onSpinUp();
+ },
+
+ "down": function(e){
+ e.preventDefault();
+ this.onSpinDown();
+ },
+
+ "pageUp": function(e){
+ e.preventDefault();
+ this.onSpinUpAlternate();
+ },
+
+ "pageDown": function(e){
+ e.preventDefault();
+ this.onSpinDownAlternate();
+ },
+
+ scope: this
+ });
+
+ this.repeater = new Ext.util.ClickRepeater(this.trigger, {
+ accelerate: this.accelerate
+ });
+ this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
+ preventDefault: true
+ });
+
+ this.field.mon(this.trigger, {
+ mouseover: this.onMouseOver,
+ mouseout: this.onMouseOut,
+ mousemove: this.onMouseMove,
+ mousedown: this.onMouseDown,
+ mouseup: this.onMouseUp,
+ scope: this,
+ preventDefault: true
+ });
+
+ this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
+
+ this.dd.setXConstraint(0, 0, 10)
+ this.dd.setYConstraint(1500, 1500, 10);
+ this.dd.endDrag = this.endDrag.createDelegate(this);
+ this.dd.startDrag = this.startDrag.createDelegate(this);
+ this.dd.onDrag = this.onDrag.createDelegate(this);
},
- afterRender: function(){
- Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments);
- this.positionButtons();
- if(this.monitorValid){
- this.startMonitoring();
+ onMouseOver: function(){
+ if (this.disabled) {
+ return;
}
+ var middle = this.getMiddle();
+ this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
+ this.trigger.addClass(this.tmpHoverClass);
},
- onShow: function(){
- if(this.monitorValid){
- this.startMonitoring();
+ //private
+ onMouseOut: function(){
+ this.trigger.removeClass(this.tmpHoverClass);
+ },
+
+ //private
+ onMouseMove: function(){
+ if (this.disabled) {
+ return;
+ }
+ var middle = this.getMiddle();
+ if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
+ ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
}
- Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments);
},
- onHide: function(){
- Ext.ux.grid.RowEditor.superclass.onHide.apply(this, arguments);
- this.stopMonitoring();
- this.grid.getView().focusRow(this.rowIndex);
+ //private
+ onMouseDown: function(){
+ if (this.disabled) {
+ return;
+ }
+ var middle = this.getMiddle();
+ this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
+ this.trigger.addClass(this.tmpClickClass);
},
- positionButtons: function(){
- if(this.btns){
- var g = this.grid,
- h = this.el.dom.clientHeight,
- view = g.getView(),
- scroll = view.scroller.dom.scrollLeft,
- bw = this.btns.getWidth(),
- width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
+ //private
+ onMouseUp: function(){
+ this.trigger.removeClass(this.tmpClickClass);
+ },
- this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
+ //private
+ onTriggerClick: function(){
+ if (this.disabled || this.el.dom.readOnly) {
+ return;
}
+ var middle = this.getMiddle();
+ var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
+ this['onSpin' + ud]();
},
- // private
- preEditValue : function(r, field){
- var value = r.data[field];
- return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
+ //private
+ getMiddle: function(){
+ var t = this.trigger.getTop();
+ var h = this.trigger.getHeight();
+ var middle = t + (h / 2);
+ return middle;
},
- // private
- postEditValue : function(value, originalValue, r, field){
- return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
+ //private
+ //checks if control is allowed to spin
+ isSpinnable: function(){
+ if (this.disabled || this.el.dom.readOnly) {
+ Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
+ return false;
+ }
+ return true;
},
- doFocus: function(pt){
- if(this.isVisible()){
- var index = 0,
- cm = this.grid.getColumnModel(),
- c,
- ed;
- if(pt){
- index = this.getTargetColumnIndex(pt);
- }
- for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
- c = cm.getColumnAt(i);
- ed = c.getEditor();
- if(!c.hidden && ed){
- ed.field.focus();
- break;
- }
- }
+ handleMouseWheel: function(e){
+ //disable scrolling when not focused
+ if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
+ return;
}
- },
- getTargetColumnIndex: function(pt){
- var grid = this.grid,
- v = grid.view,
- x = pt.left,
- cms = grid.colModel.config,
- i = 0,
- match = false;
- for(var len = cms.length, c; c = cms[i]; i++){
- if(!c.hidden){
- if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
- match = i;
- break;
- }
- }
+ var delta = e.getWheelDelta();
+ if (delta > 0) {
+ this.onSpinUp();
+ e.stopEvent();
}
- return match;
+ else
+ if (delta < 0) {
+ this.onSpinDown();
+ e.stopEvent();
+ }
},
- startMonitoring : function(){
- if(!this.bound && this.monitorValid){
- this.bound = true;
- Ext.TaskMgr.start({
- run : this.bindHandler,
- interval : this.monitorPoll || 200,
- scope: this
- });
- }
+ //private
+ startDrag: function(){
+ this.proxy.show();
+ this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
},
- stopMonitoring : function(){
- this.bound = false;
- if(this.tooltip){
- this.tooltip.hide();
+ //private
+ endDrag: function(){
+ this.proxy.hide();
+ },
+
+ //private
+ onDrag: function(){
+ if (this.disabled) {
+ return;
+ }
+ var y = Ext.fly(this.dd.getDragEl()).getTop();
+ var ud = '';
+
+ if (this._previousY > y) {
+ ud = 'Up';
+ } //up
+ if (this._previousY < y) {
+ ud = 'Down';
+ } //down
+ if (ud != '') {
+ this['onSpin' + ud]();
}
+
+ this._previousY = y;
},
- isValid: function(){
- var valid = true;
- this.items.each(function(f){
- if(!f.isValid(true)){
- valid = false;
- return false;
- }
- });
- return valid;
+ //private
+ onSpinUp: function(){
+ if (this.isSpinnable() == false) {
+ return;
+ }
+ if (Ext.EventObject.shiftKey == true) {
+ this.onSpinUpAlternate();
+ return;
+ }
+ else {
+ this.spin(false, false);
+ }
+ this.field.fireEvent("spin", this);
+ this.field.fireEvent("spinup", this);
},
- // private
- bindHandler : function(){
- if(!this.bound){
- return false; // stops binding
+ //private
+ onSpinDown: function(){
+ if (this.isSpinnable() == false) {
+ return;
}
- var valid = this.isValid();
- if(!valid && this.errorSummary){
- this.showTooltip(this.getErrorText().join(''));
+ if (Ext.EventObject.shiftKey == true) {
+ this.onSpinDownAlternate();
+ return;
}
- this.btns.saveBtn.setDisabled(!valid);
- this.fireEvent('validation', this, valid);
+ else {
+ this.spin(true, false);
+ }
+ this.field.fireEvent("spin", this);
+ this.field.fireEvent("spindown", this);
},
- showTooltip: function(msg){
- var t = this.tooltip;
- if(!t){
- t = this.tooltip = new Ext.ToolTip({
- maxWidth: 600,
- cls: 'errorTip',
- width: 300,
- title: this.errorText,
- autoHide: false,
- anchor: 'left',
- anchorToTarget: true,
- mouseOffset: [40,0]
- });
+ //private
+ onSpinUpAlternate: function(){
+ if (this.isSpinnable() == false) {
+ return;
}
- var v = this.grid.getView(),
- top = parseInt(this.el.dom.style.top, 10),
- scroll = v.scroller.dom.scrollTop,
- h = this.el.getHeight();
+ this.spin(false, true);
+ this.field.fireEvent("spin", this);
+ this.field.fireEvent("spinup", this);
+ },
- 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();
+ //private
+ onSpinDownAlternate: function(){
+ if (this.isSpinnable() == false) {
+ return;
}
+ this.spin(true, true);
+ this.field.fireEvent("spin", this);
+ this.field.fireEvent("spindown", this);
},
- getErrorText: function(){
- var data = ['<ul>'];
- this.items.each(function(f){
- if(!f.isValid(true)){
- data.push('<li>', f.getActiveError(), '</li>');
- }
- });
- data.push('</ul>');
- return data;
- }
-});
-Ext.preg('roweditor', Ext.ux.grid.RowEditor);
-Ext.ns('Ext.ux.grid');\r
-\r
-/**\r
- * @class Ext.ux.grid.RowExpander\r
- * @extends Ext.util.Observable\r
- * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables\r
- * a second row body which expands/contracts. The expand/contract behavior is configurable to react\r
- * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.\r
- *\r
- * @ptype rowexpander\r
- */\r
-Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {\r
- /**\r
- * @cfg {Boolean} expandOnEnter\r
- * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter\r
- * key is pressed (defaults to <tt>true</tt>).\r
- */\r
- expandOnEnter : true,\r
- /**\r
- * @cfg {Boolean} expandOnDblClick\r
- * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked\r
- * (defaults to <tt>true</tt>).\r
- */\r
- expandOnDblClick : true,\r
-\r
- header : '',\r
- width : 20,\r
- sortable : false,\r
- fixed : true,\r
- menuDisabled : true,\r
- dataIndex : '',\r
- id : 'expander',\r
- lazyRender : true,\r
- enableCaching : true,\r
-\r
- constructor: function(config){\r
- Ext.apply(this, config);\r
-\r
- this.addEvents({\r
- /**\r
- * @event beforeexpand\r
- * Fires before the row expands. Have the listener return false to prevent the row from expanding.\r
- * @param {Object} this RowExpander object.\r
- * @param {Object} Ext.data.Record Record for the selected row.\r
- * @param {Object} body body element for the secondary row.\r
- * @param {Number} rowIndex The current row index.\r
- */\r
- beforeexpand: true,\r
- /**\r
- * @event expand\r
- * Fires after the row expands.\r
- * @param {Object} this RowExpander object.\r
- * @param {Object} Ext.data.Record Record for the selected row.\r
- * @param {Object} body body element for the secondary row.\r
- * @param {Number} rowIndex The current row index.\r
- */\r
- expand: true,\r
- /**\r
- * @event beforecollapse\r
- * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.\r
- * @param {Object} this RowExpander object.\r
- * @param {Object} Ext.data.Record Record for the selected row.\r
- * @param {Object} body body element for the secondary row.\r
- * @param {Number} rowIndex The current row index.\r
- */\r
- beforecollapse: true,\r
- /**\r
- * @event collapse\r
- * Fires after the row collapses.\r
- * @param {Object} this RowExpander object.\r
- * @param {Object} Ext.data.Record Record for the selected row.\r
- * @param {Object} body body element for the secondary row.\r
- * @param {Number} rowIndex The current row index.\r
- */\r
- collapse: true\r
- });\r
-\r
- Ext.ux.grid.RowExpander.superclass.constructor.call(this);\r
-\r
- if(this.tpl){\r
- if(typeof this.tpl == 'string'){\r
- this.tpl = new Ext.Template(this.tpl);\r
- }\r
- this.tpl.compile();\r
- }\r
-\r
- this.state = {};\r
- this.bodyContent = {};\r
- },\r
-\r
- getRowClass : function(record, rowIndex, p, ds){\r
- p.cols = p.cols-1;\r
- var content = this.bodyContent[record.id];\r
- if(!content && !this.lazyRender){\r
- content = this.getBodyContent(record, rowIndex);\r
- }\r
- if(content){\r
- p.body = content;\r
- }\r
- return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';\r
- },\r
-\r
- init : function(grid){\r
- this.grid = grid;\r
-\r
- var view = grid.getView();\r
- view.getRowClass = this.getRowClass.createDelegate(this);\r
-\r
- view.enableRowBody = true;\r
-\r
-\r
- grid.on('render', this.onRender, this);\r
- grid.on('destroy', this.onDestroy, this);\r
- },\r
-\r
- // @private\r
- onRender: function() {\r
- var grid = this.grid;\r
- var mainBody = grid.getView().mainBody;\r
- mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});\r
- if (this.expandOnEnter) {\r
- this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {\r
- 'enter' : this.onEnter,\r
- scope: this\r
- });\r
- }\r
- if (this.expandOnDblClick) {\r
- grid.on('rowdblclick', this.onRowDblClick, this);\r
- }\r
- },\r
- \r
- // @private \r
- onDestroy: function() {\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
- if(mainBody){\r
- mainBody.un('mousedown', this.onMouseDown, this);\r
- }\r
- },\r
- // @private\r
- onRowDblClick: function(grid, rowIdx, e) {\r
- this.toggleRow(rowIdx);\r
- },\r
-\r
- onEnter: function(e) {\r
- var g = this.grid;\r
- var sm = g.getSelectionModel();\r
- var sels = sm.getSelections();\r
- for (var i = 0, len = sels.length; i < len; i++) {\r
- var rowIdx = g.getStore().indexOf(sels[i]);\r
- this.toggleRow(rowIdx);\r
- }\r
- },\r
-\r
- getBodyContent : function(record, index){\r
- if(!this.enableCaching){\r
- return this.tpl.apply(record.data);\r
- }\r
- var content = this.bodyContent[record.id];\r
- if(!content){\r
- content = this.tpl.apply(record.data);\r
- this.bodyContent[record.id] = content;\r
- }\r
- return content;\r
- },\r
-\r
- onMouseDown : function(e, t){\r
- e.stopEvent();\r
- var row = e.getTarget('.x-grid3-row');\r
- this.toggleRow(row);\r
- },\r
-\r
- renderer : function(v, p, record){\r
- p.cellAttr = 'rowspan="2"';\r
- return '<div class="x-grid3-row-expander"> </div>';\r
- },\r
-\r
- beforeExpand : function(record, body, rowIndex){\r
- if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){\r
- if(this.tpl && this.lazyRender){\r
- body.innerHTML = this.getBodyContent(record, rowIndex);\r
- }\r
- return true;\r
- }else{\r
- return false;\r
- }\r
- },\r
-\r
- toggleRow : function(row){\r
- if(typeof row == 'number'){\r
- row = this.grid.view.getRow(row);\r
- }\r
- this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);\r
- },\r
-\r
- expandRow : function(row){\r
- if(typeof row == 'number'){\r
- row = this.grid.view.getRow(row);\r
- }\r
- var record = this.grid.store.getAt(row.rowIndex);\r
- var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);\r
- if(this.beforeExpand(record, body, row.rowIndex)){\r
- this.state[record.id] = true;\r
- Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');\r
- this.fireEvent('expand', this, record, body, row.rowIndex);\r
- }\r
- },\r
-\r
- collapseRow : function(row){\r
- if(typeof row == 'number'){\r
- row = this.grid.view.getRow(row);\r
- }\r
- var record = this.grid.store.getAt(row.rowIndex);\r
- var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);\r
- if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){\r
- this.state[record.id] = false;\r
- Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');\r
- this.fireEvent('collapse', this, record, body, row.rowIndex);\r
- }\r
- }\r
-});\r
-\r
-Ext.preg('rowexpander', Ext.ux.grid.RowExpander);\r
-\r
-//backwards compat\r
-Ext.grid.RowExpander = Ext.ux.grid.RowExpander;// We are adding these custom layouts to a namespace that does not
-// exist by default in Ext, so we have to add the namespace first:
-Ext.ns('Ext.ux.layout');
+ spin: function(down, alternate){
+ var v = parseFloat(this.field.getValue());
+ var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
+ (down == true) ? v -= incr : v += incr;
-/**
- * @class Ext.ux.layout.RowLayout
- * @extends Ext.layout.ContainerLayout
- * <p>This is the layout style of choice for creating structural layouts in a multi-row format where the height of
- * each row can be specified as a percentage or fixed height. Row widths can also be fixed, percentage or auto.
- * This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config,
- * and should generally not need to be created directly via the new keyword.</p>
- * <p>RowLayout does not have any direct config options (other than inherited ones), but it does support a
- * specific config property of <b><tt>rowHeight</tt></b> that can be included in the config of any panel added to it. The
- * layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel.
- * If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).</p>
- * <p>The height property is always evaluated as pixels, and must be a number greater than or equal to 1.
- * The rowHeight property is always evaluated as a percentage, and must be a decimal value greater than 0 and
- * less than 1 (e.g., .25).</p>
- * <p>The basic rules for specifying row heights are pretty simple. The logic makes two passes through the
- * set of contained panels. During the first layout pass, all panels that either have a fixed height or none
- * specified (auto) are skipped, but their heights are subtracted from the overall container height. During the second
- * pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on
- * the total <b>remaining</b> container height. In other words, percentage height panels are designed to fill the space
- * left over by all the fixed-height and/or auto-height panels. Because of this, while you can specify any number of rows
- * with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your
- * layout may not render as expected. Example usage:</p>
- * <pre><code>
-// All rows are percentages -- they must add up to 1
-var p = new Ext.Panel({
- title: 'Row Layout - Percentage Only',
- layout:'ux.row',
- items: [{
- title: 'Row 1',
- rowHeight: .25
- },{
- title: 'Row 2',
- rowHeight: .6
- },{
- title: 'Row 3',
- rowHeight: .15
- }]
-});
+ v = (isNaN(v)) ? this.defaultValue : v;
+ v = this.fixBoundries(v);
+ this.field.setRawValue(v);
+ },
-// Mix of height and rowHeight -- all rowHeight values must add
-// up to 1. The first row will take up exactly 120px, and the last two
-// rows will fill the remaining container height.
-var p = new Ext.Panel({
- title: 'Row Layout - Mixed',
- layout:'ux.row',
- items: [{
- title: 'Row 1',
- height: 120,
- // standard panel widths are still supported too:
- width: '50%' // or 200
- },{
- title: 'Row 2',
- rowHeight: .8,
- width: 300
- },{
- title: 'Row 3',
- rowHeight: .2
- }]
-});
-</code></pre>
- */
-Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {
- // private
- monitorResize:true,
+ fixBoundries: function(value){
+ var v = value;
- type: 'row',
+ if (this.field.minValue != undefined && v < this.field.minValue) {
+ v = this.field.minValue;
+ }
+ if (this.field.maxValue != undefined && v > this.field.maxValue) {
+ v = this.field.maxValue;
+ }
- // private
- allowContainerRemove: false,
+ return this.fixPrecision(v);
+ },
// private
- isValidParent : function(c, target){
- return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
+ fixPrecision: function(value){
+ var nan = isNaN(value);
+ if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
+ return nan ? '' : value;
+ }
+ return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
},
- getLayoutTargetSize : function() {
- var target = this.container.getLayoutTarget(), ret;
- if (target) {
- ret = target.getViewSize();
- ret.width -= target.getPadding('lr');
- ret.height -= target.getPadding('tb');
+ doDestroy: function(){
+ if (this.trigger) {
+ this.trigger.remove();
+ }
+ if (this.wrap) {
+ this.wrap.remove();
+ delete this.field.wrap;
}
- 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'});
+ if (this.splitter) {
+ this.splitter.remove();
}
- Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
- },
+
+ if (this.dd) {
+ this.dd.unreg();
+ this.dd = null;
+ }
+
+ if (this.proxy) {
+ this.proxy.remove();
+ }
+
+ if (this.repeater) {
+ this.repeater.purgeListeners();
+ }
+ }
+});
+
+//backwards compat
+Ext.form.Spinner = Ext.ux.Spinner;Ext.ux.Spotlight = function(config){
+ Ext.apply(this, config);
+}
+Ext.ux.Spotlight.prototype = {
+ active : false,
+ animate : true,
+ duration: .25,
+ easing:'easeNone',
// private
- onLayout : function(ct, target){
- var rs = ct.items.items, len = rs.length, r, i;
+ animated : false,
- this.renderAll(ct, target);
+ createElements : function(){
+ var bd = Ext.getBody();
- var size = this.getLayoutTargetSize();
+ this.right = bd.createChild({cls:'x-spotlight'});
+ this.left = bd.createChild({cls:'x-spotlight'});
+ this.top = bd.createChild({cls:'x-spotlight'});
+ this.bottom = bd.createChild({cls:'x-spotlight'});
- if(size.width < 1 && size.height < 1){ // display none?
+ this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
+ },
+
+ show : function(el, callback, scope){
+ if(this.animated){
+ this.show.defer(50, this, [el, callback, scope]);
return;
}
+ this.el = Ext.get(el);
+ if(!this.right){
+ this.createElements();
+ }
+ if(!this.active){
+ this.all.setDisplayed('');
+ this.applyBounds(true, false);
+ this.active = true;
+ Ext.EventManager.onWindowResize(this.syncSize, this);
+ this.applyBounds(false, this.animate, false, callback, scope);
+ }else{
+ this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
+ }
+ },
- var h = size.height,
- ph = h;
+ hide : function(callback, scope){
+ if(this.animated){
+ this.hide.defer(50, this, [callback, scope]);
+ return;
+ }
+ Ext.EventManager.removeResizeListener(this.syncSize, this);
+ this.applyBounds(true, this.animate, true, callback, scope);
+ },
- this.innerCt.setSize({height:h});
+ doHide : function(){
+ this.active = false;
+ this.all.setDisplayed(false);
+ },
- // some rows can be percentages while others are fixed
- // so we need to make 2 passes
+ syncSize : function(){
+ this.applyBounds(false, false);
+ },
- for(i = 0; i < len; i++){
- r = rs[i];
- if(!r.rowHeight){
- ph -= (r.getHeight() + r.getEl().getMargins('tb'));
- }
- }
+ applyBounds : function(basePts, anim, doHide, callback, scope){
- ph = ph < 0 ? 0 : ph;
+ var rg = this.el.getRegion();
- for(i = 0; i < len; i++){
- r = rs[i];
- if(r.rowHeight){
- r.setSize({height: Math.floor(r.rowHeight*ph) - r.getEl().getMargins('tb')});
- }
+ var dw = Ext.lib.Dom.getViewWidth(true);
+ var dh = Ext.lib.Dom.getViewHeight(true);
+
+ var c = 0, cb = false;
+ if(anim){
+ cb = {
+ callback: function(){
+ c++;
+ if(c == 4){
+ this.animated = false;
+ if(doHide){
+ this.doHide();
+ }
+ Ext.callback(callback, scope, [this]);
+ }
+ },
+ scope: this,
+ duration: this.duration,
+ easing: this.easing
+ };
+ this.animated = true;
}
- // 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);
- }
+ this.right.setBounds(
+ rg.right,
+ basePts ? dh : rg.top,
+ dw - rg.right,
+ basePts ? 0 : (dh - rg.top),
+ cb);
+
+ this.left.setBounds(
+ 0,
+ 0,
+ rg.left,
+ basePts ? 0 : rg.bottom,
+ cb);
+
+ this.top.setBounds(
+ basePts ? dw : rg.left,
+ 0,
+ basePts ? 0 : dw - rg.left,
+ rg.top,
+ cb);
+
+ this.bottom.setBounds(
+ 0,
+ rg.bottom,
+ basePts ? 0 : rg.right,
+ dh - rg.bottom,
+ cb);
+
+ if(!anim){
+ if(doHide){
+ this.doHide();
+ }
+ if(callback){
+ Ext.callback(callback, scope, [this]);
}
}
- delete this.adjustmentPass;
- }
+ },
- /**
- * @property activeItem
- * @hide
- */
-});
+ destroy : function(){
+ this.doHide();
+ Ext.destroy(
+ this.right,
+ this.left,
+ this.top,
+ this.bottom);
+ delete this.el;
+ delete this.all;
+ }
+};
-Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout;
-Ext.ns('Ext.ux.form');\r
-\r
-Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {\r
- initComponent : function(){\r
- Ext.ux.form.SearchField.superclass.initComponent.call(this);\r
- this.on('specialkey', function(f, e){\r
- if(e.getKey() == e.ENTER){\r
- this.onTrigger2Click();\r
- }\r
- }, this);\r
- },\r
-\r
- validationEvent:false,\r
- validateOnBlur:false,\r
- trigger1Class:'x-form-clear-trigger',\r
- trigger2Class:'x-form-search-trigger',\r
- hideTrigger1:true,\r
- width:180,\r
- hasSearch : false,\r
- paramName : 'query',\r
-\r
- onTrigger1Click : function(){\r
- if(this.hasSearch){\r
- this.el.dom.value = '';\r
- var o = {start: 0};\r
- this.store.baseParams = this.store.baseParams || {};\r
- this.store.baseParams[this.paramName] = '';\r
- this.store.reload({params:o});\r
- this.triggers[0].hide();\r
- this.hasSearch = false;\r
- }\r
- },\r
-\r
- onTrigger2Click : function(){\r
- var v = this.getRawValue();\r
- if(v.length < 1){\r
- this.onTrigger1Click();\r
- return;\r
- }\r
- var o = {start: 0};\r
- this.store.baseParams = this.store.baseParams || {};\r
- this.store.baseParams[this.paramName] = v;\r
- this.store.reload({params:o});\r
- this.hasSearch = true;\r
- this.triggers[0].show();\r
- }\r
-});Ext.ns('Ext.ux.form');\r
-\r
-/**\r
- * @class Ext.ux.form.SelectBox\r
- * @extends Ext.form.ComboBox\r
- * <p>Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging\r
- * through the list, with item selection occurring when the mouse button is released.\r
- * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}\r
- * on inner elements. Re-enabling editable after calling this will NOT work.</p>\r
- * @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392\r
- * @history 2007-07-08 jvs\r
- * Slight mods for Ext 2.0\r
- * @xtype selectbox\r
- */\r
-Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {\r
- constructor: function(config){\r
- this.searchResetDelay = 1000;\r
- config = config || {};\r
- config = Ext.apply(config || {}, {\r
- editable: false,\r
- forceSelection: true,\r
- rowHeight: false,\r
- lastSearchTerm: false,\r
- triggerAction: 'all',\r
- mode: 'local'\r
- });\r
-\r
- Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);\r
-\r
- this.lastSelectedIndex = this.selectedIndex || 0;\r
- },\r
-\r
- initEvents : function(){\r
- Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);\r
- // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE\r
- this.el.on('keydown', this.keySearch, this, true);\r
- this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);\r
- },\r
-\r
- keySearch : function(e, target, options) {\r
- var raw = e.getKey();\r
- var key = String.fromCharCode(raw);\r
- var startIndex = 0;\r
-\r
- if( !this.store.getCount() ) {\r
- return;\r
- }\r
-\r
- switch(raw) {\r
- case Ext.EventObject.HOME:\r
- e.stopEvent();\r
- this.selectFirst();\r
- return;\r
-\r
- case Ext.EventObject.END:\r
- e.stopEvent();\r
- this.selectLast();\r
- return;\r
-\r
- case Ext.EventObject.PAGEDOWN:\r
- this.selectNextPage();\r
- e.stopEvent();\r
- return;\r
-\r
- case Ext.EventObject.PAGEUP:\r
- this.selectPrevPage();\r
- e.stopEvent();\r
- return;\r
- }\r
-\r
- // skip special keys other than the shift key\r
- if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {\r
- return;\r
- }\r
- if( this.lastSearchTerm == key ) {\r
- startIndex = this.lastSelectedIndex;\r
- }\r
- this.search(this.displayField, key, startIndex);\r
- this.cshTask.delay(this.searchResetDelay);\r
- },\r
-\r
- onRender : function(ct, position) {\r
- 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
- onSelect : function(record, index, skipCollapse){\r
- if(this.fireEvent('beforeselect', this, record, index) !== false){\r
- this.setValue(record.data[this.valueField || this.displayField]);\r
- if( !skipCollapse ) {\r
- this.collapse();\r
- }\r
- this.lastSelectedIndex = index + 1;\r
- this.fireEvent('select', this, record, index);\r
- }\r
- },\r
-\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
- this.innerList.unselectable();\r
- this.trigger.unselectable();\r
- this.innerList.on('mouseup', function(e, target, options) {\r
- if( target.id && target.id == this.innerList.id ) {\r
- return;\r
- }\r
- this.onViewClick();\r
- }, this);\r
-\r
- this.innerList.on('mouseover', function(e, target, options) {\r
- if( target.id && target.id == this.innerList.id ) {\r
- return;\r
- }\r
- this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;\r
- this.cshTask.delay(this.searchResetDelay);\r
- }, this);\r
-\r
- this.trigger.un('click', this.onTriggerClick, this);\r
- this.trigger.on('mousedown', function(e, target, options) {\r
- e.preventDefault();\r
- this.onTriggerClick();\r
- }, this);\r
-\r
- this.on('collapse', function(e, target, options) {\r
- Ext.getDoc().un('mouseup', this.collapseIf, this);\r
- }, this, true);\r
-\r
- this.on('expand', function(e, target, options) {\r
- Ext.getDoc().on('mouseup', this.collapseIf, this);\r
- }, this, true);\r
- },\r
-\r
- clearSearchHistory : function() {\r
- this.lastSelectedIndex = 0;\r
- this.lastSearchTerm = false;\r
- },\r
-\r
- selectFirst : function() {\r
- this.focusAndSelect(this.store.data.first());\r
- },\r
-\r
- selectLast : function() {\r
- this.focusAndSelect(this.store.data.last());\r
- },\r
-\r
- selectPrevPage : function() {\r
- if( !this.rowHeight ) {\r
- return;\r
- }\r
- var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);\r
- this.focusAndSelect(this.store.getAt(index));\r
- },\r
-\r
- selectNextPage : function() {\r
- if( !this.rowHeight ) {\r
- return;\r
- }\r
- var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);\r
- this.focusAndSelect(this.store.getAt(index));\r
- },\r
-\r
- search : function(field, value, startIndex) {\r
- field = field || this.displayField;\r
- this.lastSearchTerm = value;\r
- var index = this.store.find.apply(this.store, arguments);\r
- if( index !== -1 ) {\r
- this.focusAndSelect(index);\r
- }\r
- },\r
-\r
- focusAndSelect : function(record) {\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
- if( this.store.getCount() ) {\r
- this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();\r
- this.rowsPerPage = this.maxHeight / this.rowHeight;\r
- } else {\r
- this.rowHeight = false;\r
- }\r
- }\r
-\r
-});\r
-\r
-Ext.reg('selectbox', Ext.ux.form.SelectBox);\r
-\r
-//backwards compat\r
-Ext.ux.SelectBox = Ext.ux.form.SelectBox;\r
-/**\r
- * @class Ext.ux.SliderTip\r
- * @extends Ext.Tip\r
- * Simple plugin for using an Ext.Tip with a slider to show the slider value\r
- */\r
-Ext.ux.SliderTip = Ext.extend(Ext.Tip, {\r
- minWidth: 10,\r
- offsets : [0, -10],\r
- init : function(slider){\r
- slider.on('dragstart', this.onSlide, this);\r
- slider.on('drag', this.onSlide, this);\r
- slider.on('dragend', this.hide, this);\r
- slider.on('destroy', this.destroy, this);\r
- },\r
-\r
- onSlide : function(slider){\r
- this.show();\r
- this.body.update(this.getText(slider));\r
- this.doAutoWidth();\r
- this.el.alignTo(slider.thumb, 'b-t?', this.offsets);\r
- },\r
-\r
- getText : function(slider){\r
- return String(slider.getValue());\r
- }\r
-});\r
-Ext.ux.SlidingPager = Ext.extend(Object, {\r
- init : function(pbar){\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
- width: 114,\r
- minValue: 1,\r
- maxValue: 1,\r
- plugins: new Ext.ux.SliderTip({\r
- getText : function(s){\r
- return String.format('Page <b>{0}</b> of <b>{1}</b>', s.value, s.maxValue);\r
- }\r
- }),\r
- listeners: {\r
- changecomplete: function(s, v){\r
- pbar.changePage(v);\r
- }\r
- }\r
- });\r
- pbar.insert(idx + 1, slider);\r
- pbar.on({\r
- change: function(pb, data){\r
- slider.setMaxValue(data.pages);\r
- slider.setValue(data.activePage);\r
- }\r
- });\r
- }\r
-});Ext.ns('Ext.ux.form');\r
-\r
-/**\r
- * @class Ext.ux.form.SpinnerField\r
- * @extends Ext.form.NumberField\r
- * Creates a field utilizing Ext.ux.Spinner\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
- adjustSize: Ext.BoxComponent.prototype.adjustSize,\r
-\r
- constructor: function(config) {\r
- var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');\r
-\r
- var spl = this.spinner = new Ext.ux.Spinner(spinnerConfig);\r
-\r
- var plugins = config.plugins\r
- ? (Ext.isArray(config.plugins)\r
- ? config.plugins.push(spl)\r
- : [config.plugins, spl])\r
- : spl;\r
-\r
- Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));\r
- },\r
-\r
- // private\r
- getResizeEl: function(){\r
- return this.wrap;\r
- },\r
-\r
- // private\r
- getPositionEl: function(){\r
- return this.wrap;\r
- },\r
-\r
- // private\r
- alignErrorIcon: function(){\r
- if (this.wrap) {\r
- this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);\r
- }\r
- },\r
-\r
- validateBlur: function(){\r
- return true;\r
- }\r
-});\r
-\r
-Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);\r
-\r
-//backwards compat\r
-Ext.form.SpinnerField = Ext.ux.form.SpinnerField;\r
-/**\r
- * @class Ext.ux.Spinner\r
- * @extends Ext.util.Observable\r
- * Creates a Spinner control utilized by Ext.ux.form.SpinnerField\r
- */\r
-Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {\r
- incrementValue: 1,\r
- alternateIncrementValue: 5,\r
- triggerClass: 'x-form-spinner-trigger',\r
- splitterClass: 'x-form-spinner-splitter',\r
- alternateKey: Ext.EventObject.shiftKey,\r
- defaultValue: 0,\r
- accelerate: false,\r
-\r
- constructor: function(config){\r
- Ext.ux.Spinner.superclass.constructor.call(this, config);\r
- Ext.apply(this, config);\r
- this.mimicing = false;\r
- },\r
-\r
- init: function(field){\r
- this.field = field;\r
-\r
- field.afterMethod('onRender', this.doRender, this);\r
- field.afterMethod('onEnable', this.doEnable, this);\r
- field.afterMethod('onDisable', this.doDisable, this);\r
- field.afterMethod('afterRender', this.doAfterRender, this);\r
- field.afterMethod('onResize', this.doResize, this);\r
- field.afterMethod('onFocus', this.doFocus, this);\r
- field.beforeMethod('onDestroy', this.doDestroy, this);\r
- },\r
-\r
- doRender: function(ct, position){\r
- var el = this.el = this.field.getEl();\r
- var f = this.field;\r
-\r
- if (!f.wrap) {\r
- f.wrap = this.wrap = el.wrap({\r
- cls: "x-form-field-wrap"\r
- });\r
- }\r
- else {\r
- this.wrap = f.wrap.addClass('x-form-field-wrap');\r
- }\r
-\r
- this.trigger = this.wrap.createChild({\r
- tag: "img",\r
- src: Ext.BLANK_IMAGE_URL,\r
- cls: "x-form-trigger " + this.triggerClass\r
- });\r
-\r
- if (!f.width) {\r
- this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());\r
- }\r
-\r
- this.splitter = this.wrap.createChild({\r
- tag: 'div',\r
- cls: this.splitterClass,\r
- style: 'width:13px; height:2px;'\r
- });\r
- this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();\r
-\r
- this.proxy = this.trigger.createProxy('', this.splitter, true);\r
- this.proxy.addClass("x-form-spinner-proxy");\r
- this.proxy.setStyle('left', '0px');\r
- this.proxy.setSize(14, 1);\r
- this.proxy.hide();\r
- this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {\r
- dragElId: this.proxy.id\r
- });\r
-\r
- this.initTrigger();\r
- this.initSpinner();\r
- },\r
-\r
- doAfterRender: function(){\r
- var y;\r
- if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {\r
- this.el.position();\r
- this.el.setY(y);\r
- }\r
- },\r
-\r
- doEnable: function(){\r
- if (this.wrap) {\r
- this.wrap.removeClass(this.field.disabledClass);\r
- }\r
- },\r
-\r
- doDisable: function(){\r
- if (this.wrap) {\r
- this.wrap.addClass(this.field.disabledClass);\r
- this.el.removeClass(this.field.disabledClass);\r
- }\r
- },\r
-\r
- doResize: function(w, h){\r
- if (typeof w == 'number') {\r
- this.el.setWidth(w - this.trigger.getWidth());\r
- }\r
- this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());\r
- },\r
-\r
- doFocus: function(){\r
- if (!this.mimicing) {\r
- this.wrap.addClass('x-trigger-wrap-focus');\r
- this.mimicing = true;\r
- Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {\r
- delay: 10\r
- });\r
- this.el.on('keydown', this.checkTab, this);\r
- }\r
- },\r
-\r
- // private\r
- checkTab: function(e){\r
- if (e.getKey() == e.TAB) {\r
- this.triggerBlur();\r
- }\r
- },\r
-\r
- // private\r
- mimicBlur: function(e){\r
- if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {\r
- this.triggerBlur();\r
- }\r
- },\r
-\r
- // private\r
- triggerBlur: function(){\r
- this.mimicing = false;\r
- Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);\r
- this.el.un("keydown", this.checkTab, this);\r
- this.field.beforeBlur();\r
- this.wrap.removeClass('x-trigger-wrap-focus');\r
- this.field.onBlur.call(this.field);\r
- },\r
-\r
- initTrigger: function(){\r
- this.trigger.addClassOnOver('x-form-trigger-over');\r
- this.trigger.addClassOnClick('x-form-trigger-click');\r
- },\r
-\r
- initSpinner: function(){\r
- this.field.addEvents({\r
- 'spin': true,\r
- 'spinup': true,\r
- 'spindown': true\r
- });\r
-\r
- this.keyNav = new Ext.KeyNav(this.el, {\r
- "up": function(e){\r
- e.preventDefault();\r
- this.onSpinUp();\r
- },\r
-\r
- "down": function(e){\r
- e.preventDefault();\r
- this.onSpinDown();\r
- },\r
-\r
- "pageUp": function(e){\r
- e.preventDefault();\r
- this.onSpinUpAlternate();\r
- },\r
-\r
- "pageDown": function(e){\r
- e.preventDefault();\r
- this.onSpinDownAlternate();\r
- },\r
-\r
- scope: this\r
- });\r
-\r
- this.repeater = new Ext.util.ClickRepeater(this.trigger, {\r
- accelerate: this.accelerate\r
- });\r
- this.field.mon(this.repeater, "click", this.onTriggerClick, this, {\r
- preventDefault: true\r
- });\r
-\r
- this.field.mon(this.trigger, {\r
- mouseover: this.onMouseOver,\r
- mouseout: this.onMouseOut,\r
- mousemove: this.onMouseMove,\r
- mousedown: this.onMouseDown,\r
- mouseup: this.onMouseUp,\r
- scope: this,\r
- preventDefault: true\r
- });\r
-\r
- this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);\r
-\r
- this.dd.setXConstraint(0, 0, 10)\r
- this.dd.setYConstraint(1500, 1500, 10);\r
- this.dd.endDrag = this.endDrag.createDelegate(this);\r
- this.dd.startDrag = this.startDrag.createDelegate(this);\r
- this.dd.onDrag = this.onDrag.createDelegate(this);\r
- },\r
-\r
- onMouseOver: function(){\r
- if (this.disabled) {\r
- return;\r
- }\r
- var middle = this.getMiddle();\r
- this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';\r
- this.trigger.addClass(this.tmpHoverClass);\r
- },\r
-\r
- //private\r
- onMouseOut: function(){\r
- this.trigger.removeClass(this.tmpHoverClass);\r
- },\r
-\r
- //private\r
- onMouseMove: function(){\r
- if (this.disabled) {\r
- return;\r
- }\r
- var middle = this.getMiddle();\r
- if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||\r
- ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {\r
- }\r
- },\r
-\r
- //private\r
- onMouseDown: function(){\r
- if (this.disabled) {\r
- return;\r
- }\r
- var middle = this.getMiddle();\r
- this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';\r
- this.trigger.addClass(this.tmpClickClass);\r
- },\r
-\r
- //private\r
- onMouseUp: function(){\r
- this.trigger.removeClass(this.tmpClickClass);\r
- },\r
-\r
- //private\r
- onTriggerClick: function(){\r
- if (this.disabled || this.el.dom.readOnly) {\r
- return;\r
- }\r
- var middle = this.getMiddle();\r
- var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';\r
- this['onSpin' + ud]();\r
- },\r
-\r
- //private\r
- getMiddle: function(){\r
- var t = this.trigger.getTop();\r
- var h = this.trigger.getHeight();\r
- var middle = t + (h / 2);\r
- return middle;\r
- },\r
-\r
- //private\r
- //checks if control is allowed to spin\r
- isSpinnable: function(){\r
- if (this.disabled || this.el.dom.readOnly) {\r
- Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly\r
- return false;\r
- }\r
- return true;\r
- },\r
-\r
- handleMouseWheel: function(e){\r
- //disable scrolling when not focused\r
- if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {\r
- return;\r
- }\r
-\r
- var delta = e.getWheelDelta();\r
- if (delta > 0) {\r
- this.onSpinUp();\r
- e.stopEvent();\r
- }\r
- else\r
- if (delta < 0) {\r
- this.onSpinDown();\r
- e.stopEvent();\r
- }\r
- },\r
-\r
- //private\r
- startDrag: function(){\r
- this.proxy.show();\r
- this._previousY = Ext.fly(this.dd.getDragEl()).getTop();\r
- },\r
-\r
- //private\r
- endDrag: function(){\r
- this.proxy.hide();\r
- },\r
-\r
- //private\r
- onDrag: function(){\r
- if (this.disabled) {\r
- return;\r
- }\r
- var y = Ext.fly(this.dd.getDragEl()).getTop();\r
- var ud = '';\r
-\r
- if (this._previousY > y) {\r
- ud = 'Up';\r
- } //up\r
- if (this._previousY < y) {\r
- ud = 'Down';\r
- } //down\r
- if (ud != '') {\r
- this['onSpin' + ud]();\r
- }\r
-\r
- this._previousY = y;\r
- },\r
-\r
- //private\r
- onSpinUp: function(){\r
- if (this.isSpinnable() == false) {\r
- return;\r
- }\r
- if (Ext.EventObject.shiftKey == true) {\r
- this.onSpinUpAlternate();\r
- return;\r
- }\r
- else {\r
- this.spin(false, false);\r
- }\r
- this.field.fireEvent("spin", this);\r
- this.field.fireEvent("spinup", this);\r
- },\r
-\r
- //private\r
- onSpinDown: function(){\r
- if (this.isSpinnable() == false) {\r
- return;\r
- }\r
- if (Ext.EventObject.shiftKey == true) {\r
- this.onSpinDownAlternate();\r
- return;\r
- }\r
- else {\r
- this.spin(true, false);\r
- }\r
- this.field.fireEvent("spin", this);\r
- this.field.fireEvent("spindown", this);\r
- },\r
-\r
- //private\r
- onSpinUpAlternate: function(){\r
- if (this.isSpinnable() == false) {\r
- return;\r
- }\r
- this.spin(false, true);\r
- this.field.fireEvent("spin", this);\r
- this.field.fireEvent("spinup", this);\r
- },\r
-\r
- //private\r
- onSpinDownAlternate: function(){\r
- if (this.isSpinnable() == false) {\r
- return;\r
- }\r
- this.spin(true, true);\r
- this.field.fireEvent("spin", this);\r
- this.field.fireEvent("spindown", this);\r
- },\r
-\r
- spin: function(down, alternate){\r
- var v = parseFloat(this.field.getValue());\r
- var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;\r
- (down == true) ? v -= incr : v += incr;\r
-\r
- v = (isNaN(v)) ? this.defaultValue : v;\r
- v = this.fixBoundries(v);\r
- this.field.setRawValue(v);\r
- },\r
-\r
- fixBoundries: function(value){\r
- var v = value;\r
-\r
- if (this.field.minValue != undefined && v < this.field.minValue) {\r
- v = this.field.minValue;\r
- }\r
- if (this.field.maxValue != undefined && v > this.field.maxValue) {\r
- v = this.field.maxValue;\r
- }\r
-\r
- return this.fixPrecision(v);\r
- },\r
-\r
- // private\r
- fixPrecision: function(value){\r
- var nan = isNaN(value);\r
- if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {\r
- return nan ? '' : value;\r
- }\r
- return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));\r
- },\r
-\r
- doDestroy: function(){\r
- if (this.trigger) {\r
- this.trigger.remove();\r
- }\r
- if (this.wrap) {\r
- this.wrap.remove();\r
- delete this.field.wrap;\r
- }\r
-\r
- if (this.splitter) {\r
- this.splitter.remove();\r
- }\r
-\r
- if (this.dd) {\r
- this.dd.unreg();\r
- this.dd = null;\r
- }\r
-\r
- if (this.proxy) {\r
- this.proxy.remove();\r
- }\r
-\r
- if (this.repeater) {\r
- this.repeater.purgeListeners();\r
- }\r
- }\r
-});\r
-\r
-//backwards compat\r
-Ext.form.Spinner = Ext.ux.Spinner;Ext.ux.Spotlight = function(config){\r
- Ext.apply(this, config);\r
-}\r
-Ext.ux.Spotlight.prototype = {\r
- active : false,\r
- animate : true,\r
- duration: .25,\r
- easing:'easeNone',\r
-\r
- // private\r
- animated : false,\r
-\r
- createElements : function(){\r
- var bd = Ext.getBody();\r
-\r
- this.right = bd.createChild({cls:'x-spotlight'});\r
- this.left = bd.createChild({cls:'x-spotlight'});\r
- this.top = bd.createChild({cls:'x-spotlight'});\r
- this.bottom = bd.createChild({cls:'x-spotlight'});\r
-\r
- this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);\r
- },\r
-\r
- show : function(el, callback, scope){\r
- if(this.animated){\r
- this.show.defer(50, this, [el, callback, scope]);\r
- return;\r
- }\r
- this.el = Ext.get(el);\r
- if(!this.right){\r
- this.createElements();\r
- }\r
- if(!this.active){\r
- this.all.setDisplayed('');\r
- this.applyBounds(true, false);\r
- this.active = true;\r
- Ext.EventManager.onWindowResize(this.syncSize, this);\r
- this.applyBounds(false, this.animate, false, callback, scope);\r
- }else{\r
- this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous\r
- }\r
- },\r
-\r
- hide : function(callback, scope){\r
- if(this.animated){\r
- this.hide.defer(50, this, [callback, scope]);\r
- return;\r
- }\r
- Ext.EventManager.removeResizeListener(this.syncSize, this);\r
- this.applyBounds(true, this.animate, true, callback, scope);\r
- },\r
-\r
- doHide : function(){\r
- this.active = false;\r
- this.all.setDisplayed(false);\r
- },\r
-\r
- syncSize : function(){\r
- this.applyBounds(false, false);\r
- },\r
-\r
- applyBounds : function(basePts, anim, doHide, callback, scope){\r
-\r
- var rg = this.el.getRegion();\r
-\r
- var dw = Ext.lib.Dom.getViewWidth(true);\r
- var dh = Ext.lib.Dom.getViewHeight(true);\r
-\r
- var c = 0, cb = false;\r
- if(anim){\r
- cb = {\r
- callback: function(){\r
- c++;\r
- if(c == 4){\r
- this.animated = false;\r
- if(doHide){\r
- this.doHide();\r
- }\r
- Ext.callback(callback, scope, [this]);\r
- }\r
- },\r
- scope: this,\r
- duration: this.duration,\r
- easing: this.easing\r
- };\r
- this.animated = true;\r
- }\r
-\r
- this.right.setBounds(\r
- rg.right,\r
- basePts ? dh : rg.top,\r
- dw - rg.right,\r
- basePts ? 0 : (dh - rg.top),\r
- cb);\r
-\r
- this.left.setBounds(\r
- 0,\r
- 0,\r
- rg.left,\r
- basePts ? 0 : rg.bottom,\r
- cb);\r
-\r
- this.top.setBounds(\r
- basePts ? dw : rg.left,\r
- 0,\r
- basePts ? 0 : dw - rg.left,\r
- rg.top,\r
- cb);\r
-\r
- this.bottom.setBounds(\r
- 0,\r
- rg.bottom,\r
- basePts ? 0 : rg.right,\r
- dh - rg.bottom,\r
- cb);\r
-\r
- if(!anim){\r
- if(doHide){\r
- this.doHide();\r
- }\r
- if(callback){\r
- Ext.callback(callback, scope, [this]);\r
- }\r
- }\r
- },\r
-\r
- destroy : function(){\r
- this.doHide();\r
- Ext.destroy(\r
- this.right,\r
- this.left,\r
- this.top,\r
- this.bottom);\r
- delete this.el;\r
- delete this.all;\r
- }\r
-};\r
-\r
-//backwards compat\r
+//backwards compat
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
}
});
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
- * \r
- * @ptype tabclosemenu\r
- */\r
-Ext.ux.TabCloseMenu = function(){\r
- var tabs, menu, ctxItem;\r
- this.init = function(tp){\r
- tabs = tp;\r
- tabs.on('contextmenu', onContextMenu);\r
- };\r
-\r
- function onContextMenu(ts, item, e){\r
- if(!menu){ // create context menu on first right click\r
- menu = new Ext.menu.Menu({ \r
- items: [{\r
- id: tabs.id + '-close',\r
- text: 'Close Tab',\r
- handler : function(){\r
- tabs.remove(ctxItem);\r
- }\r
- },{\r
- id: tabs.id + '-close-others',\r
- text: 'Close Other Tabs',\r
- handler : function(){\r
- tabs.items.each(function(item){\r
- if(item.closable && item != ctxItem){\r
- tabs.remove(item);\r
- }\r
- });\r
- }\r
- }]});\r
- }\r
- ctxItem = item;\r
- var items = menu.items;\r
- items.get(tabs.id + '-close').setDisabled(!item.closable);\r
- var disableOthers = true;\r
- tabs.items.each(function(){\r
- if(this != item && this.closable){\r
- disableOthers = false;\r
- return false;\r
- }\r
- });\r
- items.get(tabs.id + '-close-others').setDisabled(disableOthers);\r
- e.stopEvent();\r
- menu.showAt(e.getPoint());\r
- }\r
-};\r
-\r
-Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);\r
-Ext.ns('Ext.ux.grid');
+/**
+ * @class Ext.ux.TabCloseMenu
+ * @extends Object
+ * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs. Note that the menu respects
+ * the closable configuration on the tab. As such, commands like remove others and remove all will not
+ * remove items that are not closable.
+ *
+ * @constructor
+ * @param {Object} config The configuration options
+ * @ptype tabclosemenu
+ */
+Ext.ux.TabCloseMenu = Ext.extend(Object, {
+ /**
+ * @cfg {String} closeTabText
+ * The text for closing the current tab. Defaults to <tt>'Close Tab'</tt>.
+ */
+ closeTabText: 'Close Tab',
+
+ /**
+ * @cfg {String} closeOtherTabsText
+ * The text for closing all tabs except the current one. Defaults to <tt>'Close Other Tabs'</tt>.
+ */
+ closeOtherTabsText: 'Close Other Tabs',
+
+ /**
+ * @cfg {Boolean} showCloseAll
+ * Indicates whether to show the 'Close All' option. Defaults to <tt>true</tt>.
+ */
+ showCloseAll: true,
+
+ /**
+ * @cfg {String} closeAllTabsText
+ * <p>The text for closing all tabs. Defaults to <tt>'Close All Tabs'</tt>.
+ */
+ closeAllTabsText: 'Close All Tabs',
+
+ constructor : function(config){
+ Ext.apply(this, config || {});
+ },
+
+ //public
+ init : function(tabs){
+ this.tabs = tabs;
+ tabs.on({
+ scope: this,
+ contextmenu: this.onContextMenu,
+ destroy: this.destroy
+ });
+ },
+
+ destroy : function(){
+ Ext.destroy(this.menu);
+ delete this.menu;
+ delete this.tabs;
+ delete this.active;
+ },
+
+ // private
+ onContextMenu : function(tabs, item, e){
+ this.active = item;
+ var m = this.createMenu(),
+ disableAll = true,
+ disableOthers = true,
+ closeAll = m.getComponent('closeall');
+
+ m.getComponent('close').setDisabled(!item.closable);
+ tabs.items.each(function(){
+ if(this.closable){
+ disableAll = false;
+ if(this != item){
+ disableOthers = false;
+ return false;
+ }
+ }
+ });
+ m.getComponent('closeothers').setDisabled(disableOthers);
+ if(closeAll){
+ closeAll.setDisabled(disableAll);
+ }
+
+ e.stopEvent();
+ m.showAt(e.getPoint());
+ },
+
+ createMenu : function(){
+ if(!this.menu){
+ var items = [{
+ itemId: 'close',
+ text: this.closeTabText,
+ scope: this,
+ handler: this.onClose
+ }];
+ if(this.showCloseAll){
+ items.push('-');
+ }
+ items.push({
+ itemId: 'closeothers',
+ text: this.closeOtherTabsText,
+ scope: this,
+ handler: this.onCloseOthers
+ });
+ if(this.showCloseAll){
+ items.push({
+ itemId: 'closeall',
+ text: this.closeAllTabsText,
+ scope: this,
+ handler: this.onCloseAll
+ });
+ }
+ this.menu = new Ext.menu.Menu({
+ items: items
+ });
+ }
+ return this.menu;
+ },
+
+ onClose : function(){
+ this.tabs.remove(this.active);
+ },
+
+ onCloseOthers : function(){
+ this.doClose(true);
+ },
+
+ onCloseAll : function(){
+ this.doClose(false);
+ },
+
+ doClose : function(excludeActive){
+ var items = [];
+ this.tabs.items.each(function(item){
+ if(item.closable){
+ if(!excludeActive || item != this.active){
+ items.push(item);
+ }
+ }
+ }, this);
+ Ext.each(items, function(item){
+ this.tabs.remove(item);
+ }, this);
+ }
+});
+
+Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);Ext.ns('Ext.ux.grid');
/**
* @class Ext.ux.grid.TableGrid
this.showErrors();
}
}
-});(function() {
+});(function() {
Ext.override(Ext.list.Column, {
- init : function() {
- if(!this.type){
- this.type = "auto";
+ init : function() {
+ var types = Ext.data.Types,
+ st = this.sortType;
+
+ if(this.type){
+ if(Ext.isString(this.type)){
+ this.type = Ext.data.Types[this.type.toUpperCase()] || types.AUTO;
+ }
+ }else{
+ this.type = types.AUTO;
}
- 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;
- }
+ if(Ext.isString(st)){
+ this.sortType = Ext.data.SortTypes[st];
+ }else if(Ext.isEmpty(st)){
+ this.sortType = this.type.sortType;
}
}
});
git.ithinksw.org / extjs.git / blobdiff