This class represents the primary interface of a component based grid control to represent data + * in a tabular format of rows and columns. The GridPanel is composed of the following:
+ *Example usage:
+ *
+var grid = new Ext.grid.GridPanel({
+ {@link #store}: new (@link Ext.data.Store}({
+ {@link Ext.data.Store#autoDestroy autoDestroy}: true,
+ {@link Ext.data.Store#reader reader}: reader,
+ {@link Ext.data.Store#data data}: xg.dummyData
+ }),
+ {@link #columns}: [
+ {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
+ {header: 'Price', width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
+ {header: 'Change', width: 120, sortable: true, dataIndex: 'change'},
+ {header: '% Change', width: 120, sortable: true, dataIndex: 'pctChange'},
+ // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
+ {header: 'Last Updated', width: 135, sortable: true, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'M d, Y'}
+ ],
+ {@link #viewConfig}: {
+ {@link Ext.grid.GridView#forceFit forceFit}: true,
+
+// Return CSS class to apply to rows depending upon data values
+ {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {
+ var c = record.{@link Ext.data.Record#get get}('change');
+ if (c < 0) {
+ return 'price-fall';
+ } else if (c > 0) {
+ return 'price-rise';
+ }
+ }
+ },
+ {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),
+ width: 600,
+ height: 300,
+ frame: true,
+ title: 'Framed with Row Selection and Horizontal Scrolling',
+ iconCls: 'icon-grid'
+});
+ * Notes:
+ *The {@link Ext.grid.Column#id id} of a {@link Ext.grid.Column column} in + * this grid that should expand to fill unused space. This value specified here can not + * be 0.
+ *Note: If the Grid's {@link Ext.grid.GridView view} is configured with + * {@link Ext.grid.GridView#forceFit forceFit}=true the autoExpandColumn + * is ignored. See {@link Ext.grid.Column}.{@link Ext.grid.Column#width width} + * for additional details.
+ *See {@link #autoExpandMax} and {@link #autoExpandMin} also.
+ */ + autoExpandColumn : false, + /** + * @cfg {Number} autoExpandMax The maximum width the {@link #autoExpandColumn} + * can have (if enabled). Defaults to 1000. + */ + autoExpandMax : 1000, + /** + * @cfg {Number} autoExpandMin The minimum width the {@link #autoExpandColumn} + * can have (if enabled). Defaults to 50. + */ + autoExpandMin : 50, + /** + * @cfg {Boolean} columnLines true to add css for column separation lines. + * Default is false. + */ + columnLines : false, + /** + * @cfg {Object} cm Shorthand for {@link #colModel}. + */ + /** + * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required). + */ + /** + * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a + * {@link Ext.grid.ColumnModel}. The ColumnModel may be explicitly created via the + * {@link #colModel} configuration property. + */ + /** + * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to 'GridDD' if not specified. + */ + /** + * @cfg {String} ddText + * Configures the text in the drag proxy. Defaults to: + *
+ * ddText : '{0} selected row{1}'
+ * Defaults to true to enable deferred row rendering.
+ *This allows the GridPanel to be initially rendered empty, with the expensive update of the row + * structure deferred so that layouts with GridPanels appear more quickly.
+ */ + deferRowRender : true, + /** + * @cfg {Boolean} disableSelectiontrue to disable selections in the grid. Defaults to false.
+ *Ignored if a {@link #selModel SelectionModel} is specified.
+ */ + /** + * @cfg {Boolean} enableColumnResize false to turn off column resizing for the whole grid. Defaults to true. + */ + /** + * @cfg {Boolean} enableColumnHide Defaults to true to enable hiding of columns with the header context menu. + */ + enableColumnHide : true, + /** + * @cfg {Boolean} enableColumnMove Defaults to true to enable drag and drop reorder of columns. false + * to turn off column reordering via drag drop. + */ + enableColumnMove : true, + /** + * @cfg {Boolean} enableDragDropEnables dragging of the selected rows of the GridPanel. Defaults to false.
+ *Setting this to true causes this GridPanel's {@link #getView GridView} to + * create an instance of {@link Ext.grid.GridDragZone}. Note: this is available only after + * the Grid has been rendered as the GridView's {@link Ext.grid.GridView#dragZone dragZone} + * property.
+ *A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of + * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver}, + * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able + * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.
+ */ + enableDragDrop : false, + /** + * @cfg {Boolean} enableHdMenu Defaults to true to enable the drop down button for menu in the headers. + */ + enableHdMenu : true, + /** + * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults tofalse.
+ */
+ /**
+ * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while
+ * loading. Defaults to false.
+ */
+ loadMask : false,
+ /**
+ * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
+ */
+ /**
+ * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to 25.
+ */
+ minColumnWidth : 25,
+ /**
+ * @cfg {Object} sm Shorthand for {@link #selModel}.
+ */
+ /**
+ * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide
+ * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).
+ */
+ /**
+ * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).
+ */
+ /**
+ * @cfg {Boolean} stripeRows true to stripe the rows. Default is false.
+ * This causes the CSS class x-grid3-row-alt to be added to alternate rows of + * the grid. A default CSS rule is provided which sets a background colour, but you can override this + * with a rule which either overrides the background-color style using the '!important' + * modifier, or which uses a CSS selector of higher specificity.
+ */ + stripeRows : false, + /** + * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true + * for GridPanel, but false for EditorGridPanel. + */ + trackMouseOver : true, + /** + * @cfg {Array} stateEvents + * An array of events that, when fired, should trigger this component to save its state. + * Defaults to:
+ * stateEvents: ['columnmove', 'columnresize', 'sortchange']
+ * These can be any types of events supported by this component, including browser or + * custom events (e.g., ['click', 'customerchange']).
+ *See {@link Ext.Component#stateful} for an explanation of saving and restoring + * Component state.
+ */ + stateEvents : ['columnmove', 'columnresize', 'sortchange'], + /** + * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set + * before a call to {@link Ext.Component#render render()}. + */ + view : null, + /** + * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view. Any of + * the config options available for {@link Ext.grid.GridView} can be specified here. This option + * is ignored if {@link #view} is specified. + */ + + // private + rendered : false, + // private + viewReady : false, + + // private + initComponent : function(){ + Ext.grid.GridPanel.superclass.initComponent.call(this); + + if(this.columnLines){ + this.cls = (this.cls || '') + ' x-grid-with-col-lines'; + } + // override any provided value since it isn't valid + // and is causing too many bug reports ;) + this.autoScroll = false; + this.autoWidth = false; + + if(Ext.isArray(this.columns)){ + this.colModel = new Ext.grid.ColumnModel(this.columns); + delete this.columns; + } + + // check and correct shorthanded configs + if(this.ds){ + this.store = this.ds; + delete this.ds; + } + if(this.cm){ + this.colModel = this.cm; + delete this.cm; + } + if(this.sm){ + this.selModel = this.sm; + delete this.sm; + } + this.store = Ext.StoreMgr.lookup(this.store); + + this.addEvents( + // raw events + /** + * @event click + * The raw click event for the entire grid. + * @param {Ext.EventObject} e + */ + 'click', + /** + * @event dblclick + * The raw dblclick event for the entire grid. + * @param {Ext.EventObject} e + */ + 'dblclick', + /** + * @event contextmenu + * The raw contextmenu event for the entire grid. + * @param {Ext.EventObject} e + */ + 'contextmenu', + /** + * @event mousedown + * The raw mousedown event for the entire grid. + * @param {Ext.EventObject} e + */ + 'mousedown', + /** + * @event mouseup + * The raw mouseup event for the entire grid. + * @param {Ext.EventObject} e + */ + 'mouseup', + /** + * @event mouseover + * The raw mouseover event for the entire grid. + * @param {Ext.EventObject} e + */ + 'mouseover', + /** + * @event mouseout + * The raw mouseout event for the entire grid. + * @param {Ext.EventObject} e + */ + 'mouseout', + /** + * @event keypress + * The raw keypress event for the entire grid. + * @param {Ext.EventObject} e + */ + 'keypress', + /** + * @event keydown + * The raw keydown event for the entire grid. + * @param {Ext.EventObject} e + */ + 'keydown', + + // custom events + /** + * @event cellmousedown + * Fires before a cell is clicked + * @param {Grid} this + * @param {Number} rowIndex + * @param {Number} columnIndex + * @param {Ext.EventObject} e + */ + 'cellmousedown', + /** + * @event rowmousedown + * Fires before a row is clicked + * @param {Grid} this + * @param {Number} rowIndex + * @param {Ext.EventObject} e + */ + 'rowmousedown', + /** + * @event headermousedown + * Fires before a header is clicked + * @param {Grid} this + * @param {Number} columnIndex + * @param {Ext.EventObject} e + */ + 'headermousedown', + + /** + * @event cellclick + * Fires when a cell is clicked. + * The data for the cell is drawn from the {@link Ext.data.Record Record} + * for this row. To access the data in the listener function use the + * following technique: + *
+function(grid, rowIndex, columnIndex, e) {
+ var record = grid.getStore().getAt(rowIndex); // Get the Record
+ var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
+ var data = record.get(fieldName);
+}
+Reconfigures the grid to use a different Store and Column Model + * and fires the 'reconfigure' event. The View will be bound to the new + * objects and refreshed.
+ *Be aware that upon reconfiguring a GridPanel, certain existing settings may become + * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the + * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound + * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring + * with the new data.
+ * @param {Ext.data.Store} store The new {@link Ext.data.Store} object + * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object + */ + reconfigure : function(store, colModel){ + if(this.loadMask){ + this.loadMask.destroy(); + this.loadMask = new Ext.LoadMask(this.bwrap, + Ext.apply({}, {store:store}, this.initialConfig.loadMask)); + } + this.view.initData(store, colModel); + this.store = store; + this.colModel = colModel; + if(this.rendered){ + this.view.refresh(true); + } + this.fireEvent('reconfigure', this, store, colModel); + }, + + // private + onKeyDown : function(e){ + this.fireEvent('keydown', e); + }, + + // private + onDestroy : function(){ + if(this.rendered){ + var c = this.body; + c.removeAllListeners(); + c.update(''); + Ext.destroy(this.view, this.loadMask); + }else if(this.store && this.store.autoDestroy){ + this.store.destroy(); + } + Ext.destroy(this.colModel, this.selModel); + this.store = this.selModel = this.colModel = this.view = this.loadMask = null; + Ext.grid.GridPanel.superclass.onDestroy.call(this); + }, + + // private + processEvent : function(name, e){ + this.fireEvent(name, e); + var t = e.getTarget(); + var v = this.view; + var header = v.findHeaderIndex(t); + if(header !== false){ + this.fireEvent('header' + name, this, header, e); + }else{ + var row = v.findRowIndex(t); + var cell = v.findCellIndex(t); + if(row !== false){ + this.fireEvent('row' + name, this, row, e); + if(cell !== false){ + this.fireEvent('cell' + name, this, row, cell, e); + } + } + } + }, + + // private + onClick : function(e){ + this.processEvent('click', e); + }, + + // private + onMouseDown : function(e){ + this.processEvent('mousedown', e); + }, + + // private + onContextMenu : function(e, t){ + this.processEvent('contextmenu', e); + }, + + // private + onDblClick : function(e){ + this.processEvent('dblclick', e); + }, + + // private + walkCells : function(row, col, step, fn, scope){ + var cm = this.colModel, clen = cm.getColumnCount(); + var ds = this.store, rlen = ds.getCount(), first = true; + if(step < 0){ + if(col < 0){ + row--; + first = false; + } + while(row >= 0){ + if(!first){ + col = clen-1; + } + first = false; + while(col >= 0){ + if(fn.call(scope || this, row, col, cm) === true){ + return [row, col]; + } + col--; + } + row--; + } + } else { + if(col >= clen){ + row++; + first = false; + } + while(row < rlen){ + if(!first){ + col = 0; + } + first = false; + while(col < clen){ + if(fn.call(scope || this, row, col, cm) === true){ + return [row, col]; + } + col++; + } + row++; + } + } + return null; + }, + + // private + onResize : function(){ + Ext.grid.GridPanel.superclass.onResize.apply(this, arguments); + if(this.viewReady){ + this.view.layout(); + } + }, + + /** + * Returns the grid's underlying element. + * @return {Element} The element + */ + getGridEl : function(){ + return this.body; + }, + + // private for compatibility, overridden by editor grid + stopEditing : Ext.emptyFn, + + /** + * Returns the grid's selection model configured by the{@link #selModel}
+ * configuration option. If no selection model was configured, this will create
+ * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}.
+ * @return {SelectionModel}
+ */
+ getSelectionModel : function(){
+ if(!this.selModel){
+ this.selModel = new Ext.grid.RowSelectionModel(
+ this.disableSelection ? {selectRow: Ext.emptyFn} : null);
+ }
+ return this.selModel;
+ },
+
+ /**
+ * Returns the grid's data store.
+ * @return {Ext.data.Store} The store
+ */
+ getStore : function(){
+ return this.store;
+ },
+
+ /**
+ * Returns the grid's ColumnModel.
+ * @return {Ext.grid.ColumnModel} The column model
+ */
+ getColumnModel : function(){
+ return this.colModel;
+ },
+
+ /**
+ * Returns the grid's GridView object.
+ * @return {Ext.grid.GridView} The grid view
+ */
+ getView : function(){
+ if(!this.view){
+ this.view = new Ext.grid.GridView(this.viewConfig);
+ }
+ return this.view;
+ },
+ /**
+ * Called to get grid's drag proxy text, by default returns this.ddText.
+ * @return {String} The text
+ */
+ getDragDropText : function(){
+ var count = this.selModel.getCount();
+ return String.format(this.ddText, count, count == 1 ? '' : 's');
+ }
+
+ /**
+ * @cfg {String/Number} activeItem
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} autoDestroy
+ * @hide
+ */
+ /**
+ * @cfg {Object/String/Function} autoLoad
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} autoWidth
+ * @hide
+ */
+ /**
+ * @cfg {Boolean/Number} bufferResize
+ * @hide
+ */
+ /**
+ * @cfg {String} defaultType
+ * @hide
+ */
+ /**
+ * @cfg {Object} defaults
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} hideBorders
+ * @hide
+ */
+ /**
+ * @cfg {Mixed} items
+ * @hide
+ */
+ /**
+ * @cfg {String} layout
+ * @hide
+ */
+ /**
+ * @cfg {Object} layoutConfig
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} monitorResize
+ * @hide
+ */
+ /**
+ * @property items
+ * @hide
+ */
+ /**
+ * @method add
+ * @hide
+ */
+ /**
+ * @method cascade
+ * @hide
+ */
+ /**
+ * @method doLayout
+ * @hide
+ */
+ /**
+ * @method find
+ * @hide
+ */
+ /**
+ * @method findBy
+ * @hide
+ */
+ /**
+ * @method findById
+ * @hide
+ */
+ /**
+ * @method findByType
+ * @hide
+ */
+ /**
+ * @method getComponent
+ * @hide
+ */
+ /**
+ * @method getLayout
+ * @hide
+ */
+ /**
+ * @method getUpdater
+ * @hide
+ */
+ /**
+ * @method insert
+ * @hide
+ */
+ /**
+ * @method load
+ * @hide
+ */
+ /**
+ * @method remove
+ * @hide
+ */
+ /**
+ * @event add
+ * @hide
+ */
+ /**
+ * @event afterLayout
+ * @hide
+ */
+ /**
+ * @event beforeadd
+ * @hide
+ */
+ /**
+ * @event beforeremove
+ * @hide
+ */
+ /**
+ * @event remove
+ * @hide
+ */
+
+
+
+ /**
+ * @cfg {String} allowDomMove @hide
+ */
+ /**
+ * @cfg {String} autoEl @hide
+ */
+ /**
+ * @cfg {String} applyTo @hide
+ */
+ /**
+ * @cfg {String} autoScroll @hide
+ */
+ /**
+ * @cfg {String} bodyBorder @hide
+ */
+ /**
+ * @cfg {String} bodyStyle @hide
+ */
+ /**
+ * @cfg {String} contentEl @hide
+ */
+ /**
+ * @cfg {String} disabledClass @hide
+ */
+ /**
+ * @cfg {String} elements @hide
+ */
+ /**
+ * @cfg {String} html @hide
+ */
+ /**
+ * @cfg {Boolean} preventBodyReset
+ * @hide
+ */
+ /**
+ * @property disabled
+ * @hide
+ */
+ /**
+ * @method applyToMarkup
+ * @hide
+ */
+ /**
+ * @method enable
+ * @hide
+ */
+ /**
+ * @method disable
+ * @hide
+ */
+ /**
+ * @method setDisabled
+ * @hide
+ */
+});
+Ext.reg('grid', Ext.grid.GridPanel);/**
+ * @class Ext.grid.GridView
+ * @extends Ext.util.Observable
+ * This class encapsulates the user interface of an {@link Ext.grid.GridPanel}. + * Methods of this class may be used to access user interface elements to enable + * special display effects. Do not change the DOM structure of the user interface.
+ *This class does not provide ways to manipulate the underlying data. The data + * model of a Grid is held in an {@link Ext.data.Store}.
+ * @constructor + * @param {Object} config + */ +Ext.grid.GridView = function(config){ + Ext.apply(this, config); + // These events are only used internally by the grid components + this.addEvents( + /** + * @event beforerowremoved + * Internal UI Event. Fired before a row is removed. + * @param {Ext.grid.GridView} view + * @param {Number} rowIndex The index of the row to be removed. + * @param {Ext.data.Record} record The Record to be removed + */ + "beforerowremoved", + /** + * @event beforerowsinserted + * Internal UI Event. Fired before rows are inserted. + * @param {Ext.grid.GridView} view + * @param {Number} firstRow The index of the first row to be inserted. + * @param {Number} lastRow The index of the last row to be inserted. + */ + "beforerowsinserted", + /** + * @event beforerefresh + * Internal UI Event. Fired before the view is refreshed. + * @param {Ext.grid.GridView} view + */ + "beforerefresh", + /** + * @event rowremoved + * Internal UI Event. Fired after a row is removed. + * @param {Ext.grid.GridView} view + * @param {Number} rowIndex The index of the row that was removed. + * @param {Ext.data.Record} record The Record that was removed + */ + "rowremoved", + /** + * @event rowsinserted + * Internal UI Event. Fired after rows are inserted. + * @param {Ext.grid.GridView} view + * @param {Number} firstRow The index of the first inserted. + * @param {Number} lastRow The index of the last row inserted. + */ + "rowsinserted", + /** + * @event rowupdated + * Internal UI Event. Fired after a row has been updated. + * @param {Ext.grid.GridView} view + * @param {Number} firstRow The index of the row updated. + * @param {Ext.data.record} record The Record backing the row updated. + */ + "rowupdated", + /** + * @event refresh + * Internal UI Event. Fired after the GridView's body has been refreshed. + * @param {Ext.grid.GridView} view + */ + "refresh" + ); + Ext.grid.GridView.superclass.constructor.call(this); +}; + +Ext.extend(Ext.grid.GridView, Ext.util.Observable, { + /** + * Override this function to apply custom CSS classes to rows during rendering. You can also supply custom + * parameters to the row template for the current row to customize how it is rendered using the rowParams + * parameter. This function should return the CSS class name (or empty string '' for none) that will be added + * to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string + * (e.g., 'my-class another-class'). Example usage: +
+viewConfig: {
+ forceFit: true,
+ showPreview: true, // custom property
+ enableRowBody: true, // required to create a second, full-width row to show expanded Record data
+ getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
+ if(this.showPreview){
+ rp.body = '<p>'+record.data.excerpt+'</p>';
+ return 'x-grid3-row-expanded';
+ }
+ return 'x-grid3-row-collapsed';
+ }
+},
+ If {@link #enableRowBody} is configured true, then the following properties may be set + * by this function, and will be used to render a full-width expansion row below each grid row:
+ *body : String bodyStyle : String tstyle : String
+ this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>');
+ A customized implementation of a {@link Ext.dd.DragZone DragZone} which provides default implementations + * of the template methods of DragZone to enable dragging of the selected rows of a GridPanel. + * See {@link Ext.grid.GridDragZone} for details.
+ *This will only be present:
+ .x-grid3-row-selected {background-color: yellow;}
+
+ .x-grid3-row-selected .x-grid3-cell-inner {
+ color: #FFCC00;
+ }
+ {body} |
Return the index of the grid column which contains the passed element.
+ * See also {@link #findRowIndex} + * @param {Element} el The target element + * @return The column index, or false if the target element is not within a row of this GridView. + */ + findCellIndex : function(el, requiredCls){ + var cell = this.findCell(el); + if(cell && (!requiredCls || this.fly(cell).hasClass(requiredCls))){ + return this.getCellIndex(cell); + } + return false; + }, + + // private + getCellIndex : function(el){ + if(el){ + var m = el.className.match(this.colRe); + if(m && m[1]){ + return this.cm.getIndexById(m[1]); + } + } + return false; + }, + + // private + findHeaderCell : function(el){ + var cell = this.findCell(el); + return cell && this.fly(cell).hasClass(this.hdCls) ? cell : null; + }, + + // private + findHeaderIndex : function(el){ + return this.findCellIndex(el, this.hdCls); + }, + +/** + * Return the HtmlElement representing the grid row which contains the passed element. + * @param {Element} el The target element + * @return The row element, or null if the target element is not within a row of this GridView. + */ + findRow : function(el){ + if(!el){ + return false; + } + return this.fly(el).findParent(this.rowSelector, this.rowSelectorDepth); + }, + +/** + *Return the index of the grid row which contains the passed element.
+ * See also {@link #findCellIndex} + * @param {Element} el The target element + * @return The row index, or false if the target element is not within a row of this GridView. + */ + findRowIndex : function(el){ + var r = this.findRow(el); + return r ? r.rowIndex : false; + }, + + // getter methods for fetching elements dynamically in the grid + +/** + * Return the <div> HtmlElement which represents a Grid row for the specified index. + * @param {Number} index The row index + * @return {HtmlElement} The div element. + */ + getRow : function(row){ + return this.getRows()[row]; + }, + +/** + * Returns the grid's <td> HtmlElement at the specified coordinates. + * @param {Number} row The row index in which to find the cell. + * @param {Number} col The column index of the cell. + * @return {HtmlElement} The td at the specified coordinates. + */ + getCell : function(row, col){ + return this.getRow(row).getElementsByTagName('td')[col]; + }, + +/** + * Return the <td> HtmlElement which represents the Grid's header cell for the specified column index. + * @param {Number} index The column index + * @return {HtmlElement} The td element. + */ + getHeaderCell : function(index){ + return this.mainHd.dom.getElementsByTagName('td')[index]; + }, + + // manipulating elements + + // private - use getRowClass to apply custom row classes + addRowClass : function(row, cls){ + var r = this.getRow(row); + if(r){ + this.fly(r).addClass(cls); + } + }, + + // private + removeRowClass : function(row, cls){ + var r = this.getRow(row); + if(r){ + this.fly(r).removeClass(cls); + } + }, + + // private + removeRow : function(row){ + Ext.removeNode(this.getRow(row)); + this.syncFocusEl(row); + }, + + // private + removeRows : function(firstRow, lastRow){ + var bd = this.mainBody.dom; + for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){ + Ext.removeNode(bd.childNodes[firstRow]); + } + this.syncFocusEl(firstRow); + }, + + // scrolling stuff + + // private + getScrollState : function(){ + var sb = this.scroller.dom; + return {left: sb.scrollLeft, top: sb.scrollTop}; + }, + + // private + restoreScroll : function(state){ + var sb = this.scroller.dom; + sb.scrollLeft = state.left; + sb.scrollTop = state.top; + }, + + /** + * Scrolls the grid to the top + */ + scrollToTop : function(){ + this.scroller.dom.scrollTop = 0; + this.scroller.dom.scrollLeft = 0; + }, + + // private + syncScroll : function(){ + this.syncHeaderScroll(); + var mb = this.scroller.dom; + this.grid.fireEvent("bodyscroll", mb.scrollLeft, mb.scrollTop); + }, + + // private + syncHeaderScroll : function(){ + var mb = this.scroller.dom; + this.innerHd.scrollLeft = mb.scrollLeft; + this.innerHd.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore) + }, + + // private + updateSortIcon : function(col, dir){ + var sc = this.sortClasses; + var hds = this.mainHd.select('td').removeClass(sc); + hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]); + }, + + // private + updateAllColumnWidths : function(){ + var tw = this.getTotalWidth(), + clen = this.cm.getColumnCount(), + ws = [], + len, + i; + for(i = 0; i < clen; i++){ + ws[i] = this.getColumnWidth(i); + } + this.innerHd.firstChild.style.width = this.getOffsetWidth(); + this.innerHd.firstChild.firstChild.style.width = tw; + this.mainBody.dom.style.width = tw; + for(i = 0; i < clen; i++){ + var hd = this.getHeaderCell(i); + hd.style.width = ws[i]; + } + + var ns = this.getRows(), row, trow; + for(i = 0, len = ns.length; i < len; i++){ + row = ns[i]; + row.style.width = tw; + if(row.firstChild){ + row.firstChild.style.width = tw; + trow = row.firstChild.rows[0]; + for (var j = 0; j < clen; j++) { + trow.childNodes[j].style.width = ws[j]; + } + } + } + + this.onAllColumnWidthsUpdated(ws, tw); + }, + + // private + updateColumnWidth : function(col, width){ + var w = this.getColumnWidth(col); + var tw = this.getTotalWidth(); + this.innerHd.firstChild.style.width = this.getOffsetWidth(); + this.innerHd.firstChild.firstChild.style.width = tw; + this.mainBody.dom.style.width = tw; + var hd = this.getHeaderCell(col); + hd.style.width = w; + + var ns = this.getRows(), row; + for(var i = 0, len = ns.length; i < len; i++){ + row = ns[i]; + row.style.width = tw; + if(row.firstChild){ + row.firstChild.style.width = tw; + row.firstChild.rows[0].childNodes[col].style.width = w; + } + } + + this.onColumnWidthUpdated(col, w, tw); + }, + + // private + updateColumnHidden : function(col, hidden){ + var tw = this.getTotalWidth(); + this.innerHd.firstChild.style.width = this.getOffsetWidth(); + this.innerHd.firstChild.firstChild.style.width = tw; + this.mainBody.dom.style.width = tw; + var display = hidden ? 'none' : ''; + + var hd = this.getHeaderCell(col); + hd.style.display = display; + + var ns = this.getRows(), row; + for(var i = 0, len = ns.length; i < len; i++){ + row = ns[i]; + row.style.width = tw; + if(row.firstChild){ + row.firstChild.style.width = tw; + row.firstChild.rows[0].childNodes[col].style.display = display; + } + } + + this.onColumnHiddenUpdated(col, hidden, tw); + delete this.lastViewWidth; // force recalc + this.layout(); + }, + + // private + doRender : function(cs, rs, ds, startRow, colCount, stripe){ + var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1; + var tstyle = 'width:'+this.getTotalWidth()+';'; + // buffers + var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r; + for(var j = 0, len = rs.length; j < len; j++){ + r = rs[j]; cb = []; + var rowIndex = (j+startRow); + for(var i = 0; i < colCount; i++){ + c = cs[i]; + p.id = c.id; + p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : ''); + p.attr = p.cellAttr = ""; + p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds); + p.style = c.style; + if(Ext.isEmpty(p.value)){ + p.value = " "; + } + if(this.markDirty && r.dirty && typeof r.modified[c.name] !== 'undefined'){ + p.css += ' x-grid3-dirty-cell'; + } + cb[cb.length] = ct.apply(p); + } + var alt = []; + if(stripe && ((rowIndex+1) % 2 === 0)){ + alt[0] = "x-grid3-row-alt"; + } + if(r.dirty){ + alt[1] = " x-grid3-dirty-row"; + } + rp.cols = colCount; + if(this.getRowClass){ + alt[2] = this.getRowClass(r, rowIndex, rp, ds); + } + rp.alt = alt.join(" "); + rp.cells = cb.join(""); + buf[buf.length] = rt.apply(rp); + } + return buf.join(""); + }, + + // private + processRows : function(startRow, skipStripe){ + if(!this.ds || this.ds.getCount() < 1){ + return; + } + var rows = this.getRows(); + skipStripe = skipStripe || !this.grid.stripeRows; + startRow = startRow || 0; + Ext.each(rows, function(row, idx){ + row.rowIndex = idx; + row.className = row.className.replace(this.rowClsRe, ' '); + if (!skipStripe && (idx + 1) % 2 === 0) { + row.className += ' x-grid3-row-alt'; + } + }); + // add first/last-row classes + if(startRow === 0){ + Ext.fly(rows[0]).addClass(this.firstRowCls); + } + Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls); + }, + + afterRender : function(){ + if(!this.ds || !this.cm){ + return; + } + this.mainBody.dom.innerHTML = this.renderRows() || ' '; + this.processRows(0, true); + + if(this.deferEmptyText !== true){ + this.applyEmptyText(); + } + }, + + // private + renderUI : function(){ + + var header = this.renderHeaders(); + var body = this.templates.body.apply({rows:' '}); + + + var html = this.templates.master.apply({ + body: body, + header: header, + ostyle: 'width:'+this.getOffsetWidth()+';', + bstyle: 'width:'+this.getTotalWidth()+';' + }); + + var g = this.grid; + + g.getGridEl().dom.innerHTML = html; + + this.initElements(); + + // get mousedowns early + Ext.fly(this.innerHd).on("click", this.handleHdDown, this); + this.mainHd.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); + } + + if(g.enableColumnMove){ + this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, 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(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 + }); + } + + if(g.enableDragDrop || g.enableDrag){ + this.dragZone = new Ext.grid.GridDragZone(g, { + ddGroup : g.ddGroup || 'GridDD' + }); + } + + this.updateHeaderSortState(); + + }, + + // private + layout : function(){ + if(!this.mainBody){ + return; // not rendered + } + 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)){ // display: none? + return; + } + + if(g.autoHeight){ + this.scroller.dom.style.overflow = 'visible'; + if(Ext.isWebKit){ + this.scroller.dom.style.position = 'static'; + } + }else{ + this.el.setSize(csize.width, csize.height); + + var hdHeight = this.mainHd.getHeight(); + var vh = csize.height - (hdHeight); + + this.scroller.setSize(vw, vh); + if(this.innerHd){ + this.innerHd.style.width = (vw)+'px'; + } + } + if(this.forceFit){ + if(this.lastViewWidth != vw){ + this.fitColumns(false, false); + this.lastViewWidth = vw; + } + }else { + this.autoExpand(); + this.syncHeaderScroll(); + } + this.onLayout(vw, vh); + }, + + // template functions for subclasses and plugins + // these functions include precalculated values + onLayout : function(vw, vh){ + // do nothing + }, + + onColumnWidthUpdated : function(col, w, tw){ + //template method + }, + + onAllColumnWidthsUpdated : function(ws, tw){ + //template method + }, + + onColumnHiddenUpdated : function(col, hidden, tw){ + // template method + }, + + updateColumnText : function(col, text){ + // template method + }, + + afterMove : function(colIndex){ + // template method + }, + + /* ----------------------------------- Core Specific -------------------------------------------*/ + // private + init : function(grid){ + this.grid = grid; + + this.initTemplates(); + this.initData(grid.store, grid.colModel); + this.initUI(grid); + }, + + // private + getColumnId : function(index){ + return this.cm.getColumnId(index); + }, + + // private + getOffsetWidth : function() { + return (this.cm.getTotalWidth() + this.scrollOffset) + 'px'; + }, + + // private + renderHeaders : function(){ + var cm = this.cm, + ts = this.templates, + ct = ts.hcell, + cb = [], + 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 ' : ''); + if(cm.config[i].align == 'right'){ + p.istyle = 'padding-right:16px'; + } else { + delete p.istyle; + } + cb[cb.length] = ct.apply(p); + } + return ts.header.apply({cells: cb.join(""), tstyle:'width:'+this.getTotalWidth()+';'}); + }, + + // private + getColumnTooltip : function(i){ + var tt = this.cm.getColumnTooltip(i); + if(tt){ + if(Ext.QuickTips.isEnabled()){ + return 'ext:qtip="'+tt+'"'; + }else{ + return 'title="'+tt+'"'; + } + } + return ""; + }, + + // private + beforeUpdate : function(){ + this.grid.stopEditing(true); + }, + + // private + updateHeaders : function(){ + this.innerHd.firstChild.innerHTML = this.renderHeaders(); + this.innerHd.firstChild.style.width = this.getOffsetWidth(); + this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth(); + }, + + /** + * Focuses the specified row. + * @param {Number} row The row index + */ + focusRow : function(row){ + this.focusCell(row, 0, false); + }, + + /** + * Focuses the specified cell. + * @param {Number} row The row index + * @param {Number} col The column index + */ + focusCell : function(row, col, hscroll){ + this.syncFocusEl(this.ensureVisible(row, col, hscroll)); + if(Ext.isGecko){ + this.focusEl.focus(); + }else{ + this.focusEl.focus.defer(1, this.focusEl); + } + }, + + resolveCell : function(row, col, hscroll){ + if(typeof row != "number"){ + row = row.rowIndex; + } + if(!this.ds){ + return null; + } + if(row < 0 || row >= this.ds.getCount()){ + return null; + } + col = (col !== undefined ? col : 0); + + var rowEl = this.getRow(row), + cm = this.cm, + colCount = cm.getColumnCount(), + cellEl; + if(!(hscroll === false && col === 0)){ + while(col < colCount && cm.isHidden(col)){ + col++; + } + cellEl = this.getCell(row, col); + } + + return {row: rowEl, cell: cellEl}; + }, + + getResolvedXY : function(resolved){ + if(!resolved){ + return null; + } + var s = this.scroller.dom, c = resolved.cell, r = resolved.row; + return c ? Ext.fly(c).getXY() : [this.el.getX(), Ext.fly(r).getY()]; + }, + + syncFocusEl : function(row, col, hscroll){ + var xy = row; + if(!Ext.isArray(xy)){ + row = Math.min(row, Math.max(0, this.getRows().length-1)); + xy = this.getResolvedXY(this.resolveCell(row, col, hscroll)); + } + this.focusEl.setXY(xy||this.scroller.getXY()); + }, + + ensureVisible : function(row, col, hscroll){ + var resolved = this.resolveCell(row, col, hscroll); + if(!resolved || !resolved.row){ + return; + } + + var rowEl = resolved.row, + cellEl = resolved.cell, + c = this.scroller.dom, + ctop = 0, + p = rowEl, + stop = this.el.dom; + + while(p && p != stop){ + ctop += p.offsetTop; + p = p.offsetParent; + } + ctop -= this.mainHd.dom.offsetHeight; + + var cbot = ctop + rowEl.offsetHeight, + ch = c.clientHeight, + sbot = stop + ch; + + stop = parseInt(c.scrollTop, 10); + + + if(ctop < stop){ + c.scrollTop = ctop; + }else if(cbot > sbot){ + c.scrollTop = cbot-ch; + } + + if(hscroll !== false){ + var cleft = parseInt(cellEl.offsetLeft, 10); + var cright = cleft + cellEl.offsetWidth; + + var sleft = parseInt(c.scrollLeft, 10); + var sright = sleft + c.clientWidth; + if(cleft < sleft){ + c.scrollLeft = cleft; + }else if(cright > sright){ + c.scrollLeft = cright-c.clientWidth; + } + } + return this.getResolvedXY(resolved); + }, + + // private + 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){ + Ext.fly(this.getRow(0)).removeClass(this.firstRowCls); + } + Ext.DomHelper.insertHtml('beforeBegin', before, html); + }else{ + var r = this.getRow(last - 1); + if(r){ + Ext.fly(r).removeClass(this.lastRowCls); + } + Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html); + } + if(!isUpdate){ + this.fireEvent("rowsinserted", this, firstRow, lastRow); + this.processRows(firstRow); + }else if(firstRow === 0 || firstRow >= last){ + //ensure first/last row is kept after an update. + Ext.fly(this.getRow(firstRow)).addClass(firstRow === 0 ? this.firstRowCls : this.lastRowCls); + } + } + this.syncFocusEl(firstRow); + }, + + // private + deleteRows : function(dm, firstRow, lastRow){ + if(dm.getRowCount()<1){ + this.refresh(); + }else{ + this.fireEvent("beforerowsdeleted", this, firstRow, lastRow); + + this.removeRows(firstRow, lastRow); + + this.processRows(firstRow); + this.fireEvent("rowsdeleted", this, firstRow, lastRow); + } + }, + + // private + getColumnStyle : function(col, isHeader){ + var style = !isHeader ? (this.cm.config[col].css || '') : ''; + 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; + }, + + // private + getColumnWidth : function(col){ + var w = this.cm.getColumnWidth(col); + if(typeof w == 'number'){ + return (Ext.isBorderBox ? w : (w-this.borderWidth > 0 ? w-this.borderWidth:0)) + 'px'; + } + return w; + }, + + // private + getTotalWidth : function(){ + return this.cm.getTotalWidth()+'px'; + }, + + // private + fitColumns : function(preventRefresh, onlyExpand, omitColumn){ + var cm = this.cm, i; + var tw = cm.getTotalWidth(false); + var aw = this.grid.getGridEl().getWidth(true)-this.scrollOffset; + + if(aw < 20){ // not initialized, so don't screw up the default widths + return; + } + var extra = aw - tw; + + if(extra === 0){ + return false; + } + + var vc = cm.getColumnCount(true); + var ac = vc-(typeof omitColumn == 'number' ? 1 : 0); + if(ac === 0){ + ac = 1; + omitColumn = undefined; + } + var colCount = cm.getColumnCount(); + var cols = []; + var extraCol = 0; + var width = 0; + var w; + for (i = 0; i < colCount; i++){ + if(!cm.isHidden(i) && !cm.isFixed(i) && i !== omitColumn){ + w = cm.getColumnWidth(i); + cols.push(i); + extraCol = i; + cols.push(w); + width += w; + } + } + var frac = (aw - cm.getTotalWidth())/width; + while (cols.length){ + w = cols.pop(); + i = cols.pop(); + cm.setColumnWidth(i, Math.max(this.grid.minColumnWidth, Math.floor(w + w*frac)), true); + } + + if((tw = cm.getTotalWidth(false)) > aw){ + var adjustCol = ac != vc ? omitColumn : extraCol; + cm.setColumnWidth(adjustCol, Math.max(1, + cm.getColumnWidth(adjustCol)- (tw-aw)), true); + } + + if(preventRefresh !== true){ + this.updateAllColumnWidths(); + } + + + return true; + }, + + // private + autoExpand : function(preventUpdate){ + var g = this.grid, cm = this.cm; + if(!this.userResized && g.autoExpandColumn){ + var tw = cm.getTotalWidth(false); + var aw = this.grid.getGridEl().getWidth(true)-this.scrollOffset; + if(tw != aw){ + var ci = cm.getIndexById(g.autoExpandColumn); + var currentWidth = cm.getColumnWidth(ci); + var cw = Math.min(Math.max(((aw-tw)+currentWidth), g.autoExpandMin), g.autoExpandMax); + if(cw != currentWidth){ + cm.setColumnWidth(ci, cw, true); + if(preventUpdate !== true){ + this.updateColumnWidth(ci, cw); + } + } + } + } + }, + + // private + getColumnData : function(){ + // build a map for all the columns + var cs = [], cm = this.cm, colCount = cm.getColumnCount(); + for(var i = 0; i < colCount; i++){ + var name = cm.getDataIndex(i); + cs[i] = { + name : (typeof name == 'undefined' ? this.ds.fields.get(i).name : name), + renderer : cm.getRenderer(i), + id : cm.getColumnId(i), + style : this.getColumnStyle(i) + }; + } + return cs; + }, + + // private + renderRows : function(startRow, endRow){ + // pull in all the crap needed to render rows + var g = this.grid, cm = g.colModel, ds = g.store, stripe = g.stripeRows; + var colCount = cm.getColumnCount(); + + if(ds.getCount() < 1){ + return ""; + } + + var cs = this.getColumnData(); + + startRow = startRow || 0; + endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow; + + // records to render + var rs = ds.getRange(startRow, endRow); + + return this.doRender(cs, rs, ds, startRow, colCount, stripe); + }, + + // private + renderBody : function(){ + var markup = this.renderRows() || ' '; + return this.templates.body.apply({rows: markup}); + }, + + // private + refreshRow : function(record){ + var ds = this.ds, index; + if(typeof record == 'number'){ + index = record; + record = ds.getAt(index); + if(!record){ + return; + } + }else{ + index = ds.indexOf(record); + if(index < 0){ + return; + } + } + this.insertRows(ds, index, index, true); + this.getRow(index).rowIndex = index; + this.onRemove(ds, record, index+1, true); + this.fireEvent("rowupdated", this, index, record); + }, + + /** + * Refreshs the grid UI + * @param {Boolean} headersToo (optional) True to also refresh the headers + */ + refresh : function(headersToo){ + this.fireEvent("beforerefresh", this); + this.grid.stopEditing(true); + + var result = this.renderBody(); + this.mainBody.update(result).setWidth(this.getTotalWidth()); + if(headersToo === true){ + this.updateHeaders(); + this.updateHeaderSortState(); + } + this.processRows(0, true); + this.layout(); + this.applyEmptyText(); + this.fireEvent("refresh", this); + }, + + // private + applyEmptyText : function(){ + if(this.emptyText && !this.hasRows()){ + this.mainBody.update('A customized implementation of a {@link Ext.dd.DragZone DragZone} which provides default implementations of two of the + * template methods of DragZone to enable dragging of the selected rows of a GridPanel.
+ *A cooperating {@link Ext.dd.DropZone DropZone} must be created who's template method implementations of + * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver}, + * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop}
are able + * to process the {@link #getDragData data} which is provided. + */ +Ext.grid.GridDragZone = function(grid, config){ + this.view = grid.getView(); + Ext.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config); + this.scroll = false; + this.grid = grid; + this.ddel = document.createElement('div'); + this.ddel.className = 'x-grid-dd-wrap'; +}; + +Ext.extend(Ext.grid.GridDragZone, Ext.dd.DragZone, { + ddGroup : "GridDD", + + /** + *The provided implementation of the getDragData method which collects the data to be dragged from the GridPanel on mousedown.
+ *This data is available for processing in the {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver}, + * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} methods of a cooperating {@link Ext.dd.DropZone DropZone}.
+ *The data object contains the following properties:
The provided implementation of the onInitDrag method. Sets the innerHTML of the drag proxy which provides the "picture" + * of the data being dragged.
+ *The innerHTML data is found by calling the owning GridPanel's {@link Ext.grid.GridPanel#getDragDropText getDragDropText}.
+ */ + onInitDrag : function(e){ + var data = this.dragData; + this.ddel.innerHTML = this.grid.getDragDropText(); + this.proxy.update(this.ddel); + // fire start drag? + }, + + /** + * An empty immplementation. Implement this to provide behaviour after a repair of an invalid drop. An implementation might highlight + * the selected rows to show that they have not been dragged. + */ + afterRepair : function(){ + this.dragging = false; + }, + + /** + *An empty implementation. Implement this to provide coordinates for the drag proxy to slide back to after an invalid drop.
+ *Called before a repair of an invalid drop to get the XY to animate to.
+ * @param {EventObject} e The mouse up event + * @return {Array} The xy location (e.g. [100, 200]) + */ + getRepairXY : function(e, data){ + return false; + }, + + onEndDrag : function(data, e){ + // fire end drag? + }, + + onValidDrop : function(dd, e, id){ + // fire drag drop? + this.hideProxy(); + }, + + beforeInvalidDrop : function(e, id){ + + } +}); +/** + * @class Ext.grid.ColumnModel + * @extends Ext.util.Observable + *After the data has been read into the client side cache ({@link Ext.data.Store Store}), + * the ColumnModel is used to configure how and what parts of that data will be displayed in the + * vertical slices (columns) of the grid. The Ext.grid.ColumnModel Class is the default implementation + * of a ColumnModel used by implentations of {@link Ext.grid.GridPanel GridPanel}.
+ *Data is mapped into the store's records and then indexed into the ColumnModel using the + * {@link Ext.grid.Column#dataIndex dataIndex}:
+ *
+{data source} == mapping ==> {data store} == {@link Ext.grid.Column#dataIndex dataIndex} ==> {ColumnModel}
+ * Each {@link Ext.grid.Column Column} in the grid's ColumnModel is configured with a + * {@link Ext.grid.Column#dataIndex dataIndex} to specify how the data within + * each record in the store is indexed into the ColumnModel.
+ *There are two ways to initialize the ColumnModel class:
+ *Initialization Method 1: an Array
+
+ var colModel = new Ext.grid.ColumnModel([
+ { header: "Ticker", width: 60, sortable: true},
+ { header: "Company Name", width: 150, sortable: true, id: 'company'},
+ { header: "Market Cap.", width: 100, sortable: true},
+ { header: "$ Sales", width: 100, sortable: true, renderer: money},
+ { header: "Employees", width: 100, sortable: true, resizable: false}
+ ]);
+ The ColumnModel may be initialized with an Array of {@link Ext.grid.Column} column configuration + * objects to define the initial layout / display of the columns in the Grid. The order of each + * {@link Ext.grid.Column} column configuration object within the specified Array defines the initial + * order of the column display. A Column's display may be initially hidden using the + * {@link Ext.grid.Column#hidden hidden} config property (and then shown using the column + * header menu). Field's that are not included in the ColumnModel will not be displayable at all.
+ *How each column in the grid correlates (maps) to the {@link Ext.data.Record} field in the + * {@link Ext.data.Store Store} the column draws its data from is configured through the + * {@link Ext.grid.Column#dataIndex dataIndex}. If the + * {@link Ext.grid.Column#dataIndex dataIndex} is not explicitly defined (as shown in the + * example above) it will use the column configuration's index in the Array as the index.
+ *See {@link Ext.grid.Column} for additional configuration options for each column.
+ *Initialization Method 2: an Object
+ *In order to use configuration options from Ext.grid.ColumnModel, an Object may be used to + * initialize the ColumnModel. The column configuration Array will be specified in the {@link #columns} + * config property. The {@link #defaults} config property can be used to apply defaults + * for all columns, e.g.:
+ var colModel = new Ext.grid.ColumnModel({
+ columns: [
+ { header: "Ticker", width: 60, menuDisabled: false},
+ { header: "Company Name", width: 150, id: 'company'},
+ { header: "Market Cap."},
+ { header: "$ Sales", renderer: money},
+ { header: "Employees", resizable: false}
+ ],
+ defaults: {
+ sortable: true,
+ menuDisabled: true,
+ width: 100
+ },
+ listeners: {
+ {@link #hiddenchange}: function(cm, colIndex, hidden) {
+ saveConfig(colIndex, hidden);
+ }
+ }
+});
+ In both examples above, the ability to apply a CSS class to all cells in a column (including the + * header) is demonstrated through the use of the {@link Ext.grid.Column#id id} config + * option. This column could be styled by including the following css:
+ //add this css *after* the core css is loaded
+.x-grid3-td-company {
+ color: red; // entire column will have red font
+}
+// modify the header row only, adding an icon to the column header
+.x-grid3-hd-company {
+ background: transparent
+ url(../../resources/images/icons/silk/building.png)
+ no-repeat 3px 3px ! important;
+ padding-left:20px;
+}
+ {@link #setColumnWidth}.
+ * Note internal resizing suppresses the event from firing. See also
+ * {@link Ext.grid.GridPanel}.{@link #columnresize}.
+ * @param {ColumnModel} this
+ * @param {Number} columnIndex The column index
+ * @param {Number} newWidth The new width
+ */
+ "widthchange",
+ /**
+ * @event headerchange
+ * Fires when the text of a header changes.
+ * @param {ColumnModel} this
+ * @param {Number} columnIndex The column index
+ * @param {String} newText The new header text
+ */
+ "headerchange",
+ /**
+ * @event hiddenchange
+ * Fires when a column is hidden or "unhidden".
+ * @param {ColumnModel} this
+ * @param {Number} columnIndex The column index
+ * @param {Boolean} hidden true if hidden, false otherwise
+ */
+ "hiddenchange",
+ /**
+ * @event columnmoved
+ * Fires when a column is moved.
+ * @param {ColumnModel} this
+ * @param {Number} oldIndex
+ * @param {Number} newIndex
+ */
+ "columnmoved",
+ /**
+ * @event configchange
+ * Fires when the configuration is changed
+ * @param {ColumnModel} this
+ */
+ "configchange"
+ );
+ Ext.grid.ColumnModel.superclass.constructor.call(this);
+};
+Ext.extend(Ext.grid.ColumnModel, Ext.util.Observable, {
+ /**
+ * @cfg {Number} defaultWidth (optional) The width of columns which have no {@link #width}
+ * specified (defaults to 100). This property shall preferably be configured through the
+ * {@link #defaults} config property.
+ */
+ defaultWidth: 100,
+ /**
+ * @cfg {Boolean} defaultSortable (optional) Default sortable of columns which have no
+ * sortable specified (defaults to false). This property shall preferably be configured
+ * through the {@link #defaults} config property.
+ */
+ defaultSortable: false,
+ /**
+ * @cfg {Array} columns An Array of object literals. The config options defined by
+ * {@link Ext.grid.Column} are the options which may appear in the object literal for each
+ * individual column definition.
+ */
+ /**
+ * @cfg {Object} defaults Object literal which will be used to apply {@link Ext.grid.Column}
+ * configuration options to all {@link #columns}. Configuration options specified with
+ * individual {@link Ext.grid.Column column} configs will supersede these {@link #defaults}.
+ */
+
+ /**
+ * Returns the id of the column at the specified index.
+ * @param {Number} index The column index
+ * @return {String} the id
+ */
+ getColumnId : function(index){
+ return this.config[index].id;
+ },
+
+ getColumnAt : function(index){
+ return this.config[index];
+ },
+
+ /**
+ * Reconfigures this column model according to the passed Array of column definition objects. + * For a description of the individual properties of a column definition object, see the + * Config Options.
+ *Causes the {@link #configchange} event to be fired. A {@link Ext.grid.GridPanel GridPanel} + * using this ColumnModel will listen for this event and refresh its UI automatically.
+ * @param {Array} config Array of Column definition objects. + * @param {Boolean} initial Specify true to bypass cleanup which deletes the totalWidth + * and destroys existing editors. + */ + setConfig : function(config, initial){ + var i, c, len; + if(!initial){ // cleanup + delete this.totalWidth; + for(i = 0, len = this.config.length; i < len; i++){ + c = this.config[i]; + if(c.editor){ + c.editor.destroy(); + } + } + } + + // backward compatibility + this.defaults = Ext.apply({ + width: this.defaultWidth, + sortable: this.defaultSortable + }, this.defaults); + + this.config = config; + this.lookup = {}; + // if no id, create one + for(i = 0, len = config.length; i < len; i++){ + c = Ext.applyIf(config[i], this.defaults); + if(!c.isColumn){ + var cls = Ext.grid.Column.types[c.xtype || 'gridcolumn']; + c = new cls(c); + config[i] = c; + } + this.lookup[c.id] = c; + } + if(!initial){ + this.fireEvent('configchange', this); + } + }, + + /** + * Returns the column for a specified id. + * @param {String} id The column id + * @return {Object} the column + */ + getColumnById : function(id){ + return this.lookup[id]; + }, + + /** + * Returns the index for a specified column id. + * @param {String} id The column id + * @return {Number} the index, or -1 if not found + */ + getIndexById : function(id){ + for(var i = 0, len = this.config.length; i < len; i++){ + if(this.config[i].id == id){ + return i; + } + } + return -1; + }, + + /** + * Moves a column from one position to another. + * @param {Number} oldIndex The index of the column to move. + * @param {Number} newIndex The position at which to reinsert the coolumn. + */ + moveColumn : function(oldIndex, newIndex){ + var c = this.config[oldIndex]; + this.config.splice(oldIndex, 1); + this.config.splice(newIndex, 0, c); + this.dataMap = null; + this.fireEvent("columnmoved", this, oldIndex, newIndex); + }, + + /** + * Returns the number of columns. + * @param {Boolean} visibleOnly Optional. Pass as true to only include visible columns. + * @return {Number} + */ + getColumnCount : function(visibleOnly){ + if(visibleOnly === true){ + var c = 0; + for(var i = 0, len = this.config.length; i < len; i++){ + if(!this.isHidden(i)){ + c++; + } + } + return c; + } + return this.config.length; + }, + + /** + * Returns the column configs that return true by the passed function that is called + * with (columnConfig, index) +
+// returns an array of column config objects for all hidden columns
+var columns = grid.getColumnModel().getColumnsBy(function(c){
+ return c.hidden;
+});
+The data value for the cell.
An object in which you may set the following attributes:
A CSS class name to add to the cell's TD element.
An HTML attribute definition string to apply to the data container element within the table cell + * (e.g. 'style="color:red;"').
The {@link Ext.data.Record} from which the data was extracted.
Row index
Column index
The {@link Ext.data.Store} object from which the Record was extracted.
{@link #widthchange}
+ * event. Defaults to false.
+ */
+ setColumnWidth : function(col, width, suppressEvent){
+ this.config[col].width = width;
+ this.totalWidth = null;
+ if(!suppressEvent){
+ this.fireEvent("widthchange", this, col, width);
+ }
+ },
+
+ /**
+ * Returns the total width of all columns.
+ * @param {Boolean} includeHidden True to include hidden column widths
+ * @return {Number}
+ */
+ getTotalWidth : function(includeHidden){
+ if(!this.totalWidth){
+ this.totalWidth = 0;
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(includeHidden || !this.isHidden(i)){
+ this.totalWidth += this.getColumnWidth(i);
+ }
+ }
+ }
+ return this.totalWidth;
+ },
+
+ /**
+ * Returns the header for the specified column.
+ * @param {Number} col The column index
+ * @return {String}
+ */
+ getColumnHeader : function(col){
+ return this.config[col].header;
+ },
+
+ /**
+ * Sets the header for a column.
+ * @param {Number} col The column index
+ * @param {String} header The new header
+ */
+ setColumnHeader : function(col, header){
+ this.config[col].header = header;
+ this.fireEvent("headerchange", this, col, header);
+ },
+
+ /**
+ * Returns the tooltip for the specified column.
+ * @param {Number} col The column index
+ * @return {String}
+ */
+ getColumnTooltip : function(col){
+ return this.config[col].tooltip;
+ },
+ /**
+ * Sets the tooltip for a column.
+ * @param {Number} col The column index
+ * @param {String} tooltip The new tooltip
+ */
+ setColumnTooltip : function(col, tooltip){
+ this.config[col].tooltip = tooltip;
+ },
+
+ /**
+ * Returns the dataIndex for the specified column.
+
+// Get field name for the column
+var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
+
+var store = new Ext.data.Store({...});
+var colModel = new Ext.grid.ColumnModel({
+ columns: [...],
+ isCellEditable: function(col, row) {
+ var record = store.getAt(row);
+ if (record.get('readonly')) { // replace with your condition
+ return false;
+ }
+ return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
+ }
+});
+var grid = new Ext.grid.GridPanel({
+ store: store,
+ colModel: colModel,
+ ...
+});
+
+myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first column).
+This class encapsulates column configuration data to be used in the initialization of a + * {@link Ext.grid.ColumnModel ColumnModel}.
+ *While subclasses are provided to render data in different ways, this class renders a passed + * data field unchanged and is usually used for textual columns.
+ */ +Ext.grid.Column = function(config){ + Ext.apply(this, config); + + if(typeof this.renderer == 'string'){ + this.renderer = Ext.util.Format[this.renderer]; + } else if(Ext.isObject(this.renderer)){ + this.scope = this.renderer.scope; + this.renderer = this.renderer.fn; + } + this.renderer = this.renderer.createDelegate(this.scope || config); + + if(this.id === undefined){ + this.id = ++Ext.grid.Column.AUTO_ID; + } + if(this.editor){ + this.editor = Ext.create(this.editor, 'textfield'); + } +}; + +Ext.grid.Column.AUTO_ID = 0; + +Ext.grid.Column.prototype = { + /** + * @cfg {Boolean} editable Optional. Defaults to true, enabling the configured + * {@link #editor}. Set to false to initially disable editing on this column. + * The initial configuration may be dynamically altered using + * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}. + */ + /** + * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial + * ordinal position.) The id is used to create a CSS class name which is applied to all + * table cells (including headers) in that column (in this context the id does not need to be + * unique). The class name takes the form ofx-grid3-td-id+ * Header cells will also receive this class name, but will also have the class
x-grid3-hd+ * So, to target header cells, use CSS selectors such as:
.x-grid3-hd-row .x-grid3-td-id+ * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this + * unique identifier. + */ + /** + * @cfg {String} header Optional. The header text to be used as innerHTML + * (html tags are accepted) to display in the Grid view. Note: to + * have a clickable header with no text displayed use ' '. + */ + /** + * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option + * may be used to disable the header menu item to group by the column selected. Defaults to true, + * which enables the header menu group option. Set to false to disable (but still show) the + * group option in the header menu for the column. See also
{@link #groupName}.
+ */
+ /**
+ * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
+ * may be used to specify the text with which to prefix the group field value in the group header line.
+ * See also {@link #groupRenderer} and
+ * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.
+ */
+ /**
+ * @cfg {Function} groupRenderer Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option + * may be used to specify the function used to format the grouping field value for display in the group + * {@link #groupName header}. If a groupRenderer is not specified, the configured + * {@link #renderer} will be called; if a {@link #renderer} is also not specified + * the new value of the group field will be used.
+ *The called function (either the groupRenderer or {@link #renderer}) will be + * passed the following parameters: + *
The new value of the group field.
Unused parameter.
The Record providing the data + * for the row which caused group change.
The row index of the Record which caused group change.
The column index of the group field.
The Store which is providing the data Model.
The function should return a string value.
+ */ + /** + * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option + * may be used to specify the text to display when there is an empty group value. Defaults to the + * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}. + */ + /** + * @cfg {String} dataIndexRequired. The name of the field in the + * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from + * which to draw the column's value.
+ */ + /** + * @cfg {Number} width + * Optional. The initial width in pixels of the column. + * The width of each column can also be affected if any of the following are configured: + *By specifying forceFit:true, {@link #fixed non-fixed width} columns will be + * re-proportioned (based on the relative initial widths) to fill the width of the grid so + * that no horizontal scrollbar is shown.
+ *Note: when the width of each column is determined, a space on the right side + * is reserved for the vertical scrollbar. The + * {@link Ext.grid.GridView}.{@link Ext.grid.GridView#scrollOffset scrollOffset} + * can be modified to reduce or eliminate the reserved offset.
+ */ + /** + * @cfg {Boolean} sortable Optional. true if sorting is to be allowed on this column. + * Defaults to the value of the {@link #defaultSortable} property. + * Whether local/remote sorting is used is specified in {@link Ext.data.Store#remoteSort}. + */ + /** + * @cfg {Boolean} fixed Optional. true if the column width cannot be changed. Defaults to false. + */ + /** + * @cfg {Boolean} resizable Optional. false to disable column resizing. Defaults to true. + */ + /** + * @cfg {Boolean} menuDisabled Optional. true to disable the column menu. Defaults to false. + */ + /** + * @cfg {Boolean} hidden Optional. true to hide the column. Defaults to false. + */ + /** + * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip. If Quicktips + * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the + * header's HTML title attribute. Defaults to ''. + */ + /** + * @cfg {Mixed} renderer + *For an alternative to specifying a renderer see {@link #xtype}
Optional. A renderer is an 'interceptor' method which can be used transform data (value, + * appearance, etc.) before it is rendered). This may be specified in either of three ways: + *
+{
+ fn: this.gridRenderer,
+ scope: this
+}
+For information about the renderer function (passed parameters, etc.), see + * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:
+var companyColumn = {
+ header: 'Company Name',
+ dataIndex: 'company',
+ renderer: function(value, metaData, record, rowIndex, colIndex, store) {
+ // provide the logic depending on business rules
+ // name of your own choosing to manipulate the cell depending upon
+ // the data in the underlying Record object.
+ if (value == 'whatever') {
+ //metaData.css : String : A CSS class name to add to the TD element of the cell.
+ //metaData.attr : String : An html attribute definition string to apply to
+ // the data container element within the table
+ // cell (e.g. 'style="color:red;"').
+ metaData.css = 'name-of-css-class-you-will-define';
+ }
+ return value;
+ }
+}
+ * {@link #renderer} to be easily
+ * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
+ * Configuration properties for the specified xtype may be specified with
+ * the Column configuration properties, for example:
+var grid = new Ext.grid.GridPanel({
+ ...
+ columns: [{
+ header: 'Last Updated',
+ dataIndex: 'lastChange',
+ width: 85,
+ sortable: true,
+ //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
+ xtype: 'datecolumn', // use xtype instead of renderer
+ format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}
+ }, {
+ ...
+ }]
+});
+ * The data value for the cell.
An object in which you may set the following attributes:
A CSS class name to add to the cell's TD element.
An HTML attribute definition string to apply to the data container + * element within the table cell (e.g. 'style="color:red;"').
The {@link Ext.data.Record} from which the data was + * extracted.
Row index
Column index
The {@link Ext.data.Store} object from which the Record + * was extracted.
A Column definition class which renders boolean data fields. See the {@link Ext.grid.ColumnModel#xtype xtype} + * config option of {@link Ext.grid.ColumnModel} for more details.
+ */ +Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, { + /** + * @cfg {String} trueText + * The string returned by the renderer when the column value is not falsey (defaults to 'true'). + */ + trueText: 'true', + /** + * @cfg {String} falseText + * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to + * 'false'). + */ + falseText: 'false', + /** + * @cfg {String} undefinedText + * The string returned by the renderer when the column value is undefined (defaults to ' '). + */ + undefinedText: ' ', + + constructor: function(cfg){ + Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg); + var t = this.trueText, f = this.falseText, u = this.undefinedText; + this.renderer = function(v){ + if(v === undefined){ + return u; + } + if(!v || v === 'false'){ + return f; + } + return t; + }; + } +}); + +/** + * @class Ext.grid.NumberColumn + * @extends Ext.grid.Column + *A Column definition class which renders a numeric data field according to a {@link #format} string. See the + * {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more details.
+ */ +Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, { + /** + * @cfg {String} format + * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column + * (defaults to '0,000.00'). + */ + format : '0,000.00', + constructor: function(cfg){ + Ext.grid.NumberColumn.superclass.constructor.call(this, cfg); + this.renderer = Ext.util.Format.numberRenderer(this.format); + } +}); + +/** + * @class Ext.grid.DateColumn + * @extends Ext.grid.Column + *A Column definition class which renders a passed date according to the default locale, or a configured + * {@link #format}. See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} + * for more details.
+ */ +Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, { + /** + * @cfg {String} format + * A formatting string as used by {@link Date#format} to format a Date for this Column + * (defaults to 'm/d/Y'). + */ + format : 'm/d/Y', + constructor: function(cfg){ + Ext.grid.DateColumn.superclass.constructor.call(this, cfg); + this.renderer = Ext.util.Format.dateRenderer(this.format); + } +}); + +/** + * @class Ext.grid.TemplateColumn + * @extends Ext.grid.Column + *A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s + * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}. + * See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more + * details.
+ */ +Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, { + /** + * @cfg {String/XTemplate} tpl + * An {@link Ext.XTemplate XTemplate}, or an XTemplate definition string to use to process a + * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value. + */ + constructor: function(cfg){ + Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg); + var tpl = typeof Ext.isObject(this.tpl) ? this.tpl : new Ext.XTemplate(this.tpl); + this.renderer = function(value, p, r){ + return tpl.apply(r.data); + }; + this.tpl = tpl; + } +}); + +/* + * @property types + * @type Object + * @member Ext.grid.Column + * @static + *An object containing predefined Column classes keyed by a mnemonic code which may be referenced + * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.
+ *This contains the following properties
+ // This is a typical column config with the first column providing row numbers
+ var colModel = new Ext.grid.ColumnModel([
+ new Ext.grid.RowNumberer(),
+ {header: "Name", width: 80, sortable: true},
+ {header: "Code", width: 50, sortable: true},
+ {header: "Description", width: 200, sortable: true}
+ ]);
+
+ * '<div class="x-grid3-hd-checker"> </div>'
+ *