-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-view.Table'>/**
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-view-Table'>/**
</span> * @class Ext.view.Table
* @extends Ext.view.View
It acts as a centralized manager for controlling the various interface
elements of the view. This includes handling events, such as row and cell
level based DOM events. It also reacts to events from the underlying {@link Ext.selection.Model}
-to provide visual feedback to the user.
+to provide visual feedback to the user.
This class does not provide ways to manipulate the underlying data of the configured
{@link Ext.data.Store}.
* @markdown
* @abstract
- * @xtype tableview
* @author Nicolas Ferrero
*/
Ext.define('Ext.view.Table', {
// cfg docs inherited
trackOver: true,
-<span id='Ext-view.Table-method-getRowClass'> /**
+<span id='Ext-view-Table-method-getRowClass'> /**
</span> * 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 <b>rowParams</b>
* parameter. This function should return the CSS class name (or empty string '' for none) that will be added
getRowClass: null,
initComponent: function() {
- this.scrollState = {};
- this.selModel.view = this;
- this.headerCt.view = this;
- this.initFeatures();
- this.setNewTemplate();
- this.callParent();
- this.mon(this.store, {
- load: this.onStoreLoad,
- scope: this
+ var me = this;
+
+ if (me.deferRowRender !== false) {
+ me.refresh = function() {
+ delete me.refresh;
+ setTimeout(function() {
+ me.refresh();
+ }, 0);
+ };
+ }
+
+ me.scrollState = {};
+ me.selModel.view = me;
+ me.headerCt.view = me;
+ me.initFeatures();
+ me.tpl = '<div></div>';
+ me.callParent();
+ me.mon(me.store, {
+ load: me.onStoreLoad,
+ scope: me
});
// this.addEvents(
// scroll to top of the grid when store loads
onStoreLoad: function(){
- if (this.invalidateScrollerOnRefresh) {
+ var me = this;
+
+ if (me.invalidateScrollerOnRefresh) {
if (Ext.isGecko) {
- if (!this.scrollToTopTask) {
- this.scrollToTopTask = Ext.create('Ext.util.DelayedTask', this.scrollToTop, this);
+ if (!me.scrollToTopTask) {
+ me.scrollToTopTask = Ext.create('Ext.util.DelayedTask', me.scrollToTop, me);
}
- this.scrollToTopTask.delay(1);
+ me.scrollToTopTask.delay(1);
} else {
- this.scrollToTop();
+ me .scrollToTop();
}
}
},
// scroll the view to the top
scrollToTop: Ext.emptyFn,
-
-<span id='Ext-view.Table-method-getGridColumns'> /**
+
+<span id='Ext-view-Table-method-addElListener'> /**
+</span> * Add a listener to the main view element. It will be destroyed with the view.
+ * @private
+ */
+ addElListener: function(eventName, fn, scope){
+ this.mon(this, eventName, fn, scope, {
+ element: 'el'
+ });
+ },
+
+<span id='Ext-view-Table-method-getGridColumns'> /**
</span> * Get the columns used for generating a template via TableChunker.
* See {@link Ext.grid.header.Container#getGridColumns}.
* @private
*/
getGridColumns: function() {
- return this.headerCt.getGridColumns();
+ return this.headerCt.getGridColumns();
},
-
-<span id='Ext-view.Table-method-getHeaderAtIndex'> /**
+
+<span id='Ext-view-Table-method-getHeaderAtIndex'> /**
</span> * Get a leaf level header by index regardless of what the nesting
* structure is.
* @private
getHeaderAtIndex: function(index) {
return this.headerCt.getHeaderAtIndex(index);
},
-
-<span id='Ext-view.Table-method-getCell'> /**
+
+<span id='Ext-view-Table-method-getCell'> /**
</span> * Get the cell (td) for a particular record and column.
* @param {Ext.data.Model} record
* @param {Ext.grid.column.Colunm} column
return Ext.fly(row).down(column.getCellSelector());
},
-<span id='Ext-view.Table-method-getFeature'> /**
+<span id='Ext-view-Table-method-getFeature'> /**
</span> * Get a reference to a feature
* @param {String} id The id of the feature
* @return {Ext.grid.feature.Feature} The feature. Undefined if not found
}
},
-<span id='Ext-view.Table-method-initFeatures'> /**
+<span id='Ext-view-Table-method-initFeatures'> /**
</span> * Initializes each feature and bind it to this view.
* @private
*/
initFeatures: function() {
- this.features = this.features || [];
- var features = this.features,
- ln = features.length,
- i = 0;
+ var me = this,
+ i = 0,
+ features,
+ len;
- this.featuresMC = Ext.create('Ext.util.MixedCollection');
- for (; i < ln; i++) {
+ me.features = me.features || [];
+ features = me.features;
+ len = features.length;
+
+ me.featuresMC = Ext.create('Ext.util.MixedCollection');
+ for (; i < len; i++) {
// ensure feature hasnt already been instantiated
if (!features[i].isFeature) {
- features[i] = Ext.create('feature.'+features[i].ftype, features[i]);
+ features[i] = Ext.create('feature.' + features[i].ftype, features[i]);
}
// inject a reference to view
- features[i].view = this;
- this.featuresMC.add(features[i]);
+ features[i].view = me;
+ me.featuresMC.add(features[i]);
}
},
-<span id='Ext-view.Table-method-attachEventsForFeatures'> /**
+<span id='Ext-view-Table-method-attachEventsForFeatures'> /**
</span> * Gives features an injection point to attach events to the markup that
* has been created for this view.
* @private
},
afterRender: function() {
- this.callParent();
- this.mon(this.el, {
- scroll: this.fireBodyScroll,
- scope: this
+ var me = this;
+
+ me.callParent();
+ me.mon(me.el, {
+ scroll: me.fireBodyScroll,
+ scope: me
});
- this.attachEventsForFeatures();
+ me.el.unselectable();
+ me.attachEventsForFeatures();
},
fireBodyScroll: function(e, t) {
},
// TODO: Refactor headerCt dependency here to colModel
-<span id='Ext-view.Table-method-prepareData'> /**
+<span id='Ext-view-Table-method-prepareData'> /**
</span> * Uses the headerCt to transform data from dataIndex keys in a record to
* headerId keys in each header and then run them through each feature to
* get additional data for variables they have injected into the view template.
* @private
*/
prepareData: function(data, idx, record) {
- var orig = this.headerCt.prepareData(data, idx, record, this),
- features = this.features,
+ var me = this,
+ orig = me.headerCt.prepareData(data, idx, record, me, me.ownerCt),
+ features = me.features,
ln = features.length,
i = 0,
node, feature;
for (; i < ln; i++) {
feature = features[i];
if (feature.isFeature) {
- Ext.apply(orig, feature.getAdditionalData(data, idx, record, orig, this));
+ Ext.apply(orig, feature.getAdditionalData(data, idx, record, orig, me));
}
}
jln = preppedRecords.length;
// process row classes, rowParams has been deprecated and has been moved
- // to the individual features that implement the behavior.
+ // to the individual features that implement the behavior.
if (this.getRowClass) {
for (; j < jln; j++) {
rowParams = {};
},
// TODO: Refactor header resizing to column resizing
-<span id='Ext-view.Table-method-onHeaderResize'> /**
+<span id='Ext-view-Table-method-onHeaderResize'> /**
</span> * When a header is resized, setWidth on the individual columns resizer class,
* the top level table, save/restore scroll state, generate a new template and
* restore focus to the grid view's element so that keyboard navigation
* @private
*/
onHeaderResize: function(header, w, suppressFocus) {
- var el = this.el;
+ var me = this,
+ el = me.el;
+
if (el) {
- this.saveScrollState();
+ me.saveScrollState();
// Grab the col and set the width, css
// class is generated in TableChunker.
// Select composites because there may be several chunks.
+
+ // IE6 and IE7 bug.
+ // Setting the width of the first TD does not work - ends up with a 1 pixel discrepancy.
+ // We need to increment the passed with in this case.
+ if (Ext.isIE6 || Ext.isIE7) {
+ if (header.el.hasCls(Ext.baseCSSPrefix + 'column-header-first')) {
+ w += 1;
+ }
+ }
el.select('.' + Ext.baseCSSPrefix + 'grid-col-resizer-'+header.id).setWidth(w);
- el.select('.' + Ext.baseCSSPrefix + 'grid-table-resizer').setWidth(this.headerCt.getFullWidth());
- this.restoreScrollState();
- this.setNewTemplate();
+ el.select('.' + Ext.baseCSSPrefix + 'grid-table-resizer').setWidth(me.headerCt.getFullWidth());
+ me.restoreScrollState();
+ me.setNewTemplate();
if (!suppressFocus) {
- this.el.focus();
+ me.el.focus();
}
}
},
-<span id='Ext-view.Table-method-onHeaderShow'> /**
+<span id='Ext-view-Table-method-onHeaderShow'> /**
</span> * When a header is shown restore its oldWidth if it was previously hidden.
* @private
*/
this.setNewTemplate();
},
-<span id='Ext-view.Table-method-onHeaderHide'> /**
+<span id='Ext-view-Table-method-onHeaderHide'> /**
</span> * When the header hides treat it as a resize to 0.
* @private
*/
this.onHeaderResize(header, 0, suppressFocus);
},
-<span id='Ext-view.Table-method-setNewTemplate'> /**
+<span id='Ext-view-Table-method-setNewTemplate'> /**
</span> * Set a new template based on the current columns displayed in the
* grid.
* @private
*/
setNewTemplate: function() {
- var columns = this.headerCt.getColumnsForTpl(true);
- this.tpl = this.getTableChunker().getTableTpl({
+ var me = this,
+ columns = me.headerCt.getColumnsForTpl(true);
+
+ me.tpl = me.getTableChunker().getTableTpl({
columns: columns,
- features: this.features
+ features: me.features
});
},
-<span id='Ext-view.Table-method-getTableChunker'> /**
+<span id='Ext-view-Table-method-getTableChunker'> /**
</span> * Get the configured chunker or default of Ext.view.TableChunker
*/
getTableChunker: function() {
return this.chunker || Ext.view.TableChunker;
},
-<span id='Ext-view.Table-method-addRowCls'> /**
+<span id='Ext-view-Table-method-addRowCls'> /**
</span> * Add a CSS Class to a specific row.
* @param {HTMLElement/String/Number/Ext.data.Model} rowInfo An HTMLElement, index or instance of a model representing this row
* @param {String} cls
}
},
-<span id='Ext-view.Table-method-removeRowCls'> /**
+<span id='Ext-view-Table-method-removeRowCls'> /**
</span> * Remove a CSS Class from a specific row.
* @param {HTMLElement/String/Number/Ext.data.Model} rowInfo An HTMLElement, index or instance of a model representing this row
* @param {String} cls
// GridSelectionModel invokes onRowDeselect as selection changes
onRowDeselect : function(rowIdx) {
- this.removeRowCls(rowIdx, this.selectedItemCls);
- this.removeRowCls(rowIdx, this.focusedItemCls);
+ var me = this;
+
+ me.removeRowCls(rowIdx, me.selectedItemCls);
+ me.removeRowCls(rowIdx, me.focusedItemCls);
},
-
+
onCellSelect: function(position) {
var cell = this.getCellByPosition(position);
if (cell) {
cell.addCls(this.selectedCellCls);
}
},
-
+
onCellDeselect: function(position) {
var cell = this.getCellByPosition(position);
if (cell) {
cell.removeCls(this.selectedCellCls);
}
-
+
},
-
+
onCellFocus: function(position) {
//var cell = this.getCellByPosition(position);
this.focusCell(position);
},
-
+
getCellByPosition: function(position) {
var row = position.row,
column = position.column,
header = this.headerCt.getHeaderAtIndex(column),
cellSelector,
cell = false;
-
- if (header) {
+
+ if (header && node) {
cellSelector = header.getCellSelector();
cell = Ext.fly(node).down(cellSelector);
}
// GridSelectionModel invokes onRowFocus to 'highlight'
// the last row focused
onRowFocus: function(rowIdx, highlight, supressFocus) {
- var row = this.getNode(rowIdx);
+ var me = this,
+ row = me.getNode(rowIdx);
if (highlight) {
- this.addRowCls(rowIdx, this.focusedItemCls);
+ me.addRowCls(rowIdx, me.focusedItemCls);
if (!supressFocus) {
- this.focusRow(rowIdx);
+ me.focusRow(rowIdx);
}
//this.el.dom.setAttribute('aria-activedescendant', row.id);
} else {
- this.removeRowCls(rowIdx, this.focusedItemCls);
+ me.removeRowCls(rowIdx, me.focusedItemCls);
}
},
-<span id='Ext-view.Table-cfg-An'> /**
+<span id='Ext-view-Table-method-focusRow'> /**
</span> * Focus a particular row and bring it into view. Will fire the rowfocus event.
- * @cfg {Mixed} An HTMLElement template node, index of a template node, the
+ * @param {Mixed} rowIdx An HTMLElement template node, index of a template node, the
* id of a template node or the record associated with the node.
*/
focusRow: function(rowIdx) {
- var row = this.getNode(rowIdx),
- el = this.el,
+ var me = this,
+ row = me.getNode(rowIdx),
+ el = me.el,
adjustment = 0,
- panel = this.ownerCt,
+ panel = me.ownerCt,
rowRegion,
elRegion,
record;
-
- if (row && this.el) {
+
+ if (row && el) {
elRegion = el.getRegion();
rowRegion = Ext.fly(row).getRegion();
// row is above
} else if (rowRegion.bottom > elRegion.bottom) {
adjustment = rowRegion.bottom - elRegion.bottom;
}
- record = this.getRecord(row);
- rowIdx = this.store.indexOf(record);
+ record = me.getRecord(row);
+ rowIdx = me.store.indexOf(record);
if (adjustment) {
// scroll the grid itself, so that all gridview's update.
panel.scrollByDeltaY(adjustment);
}
- this.fireEvent('rowfocus', record, row, rowIdx);
+ me.fireEvent('rowfocus', record, row, rowIdx);
}
},
focusCell: function(position) {
- var cell = this.getCellByPosition(position),
- el = this.el,
+ var me = this,
+ cell = me.getCellByPosition(position),
+ el = me.el,
adjustmentY = 0,
adjustmentX = 0,
elRegion = el.getRegion(),
- panel = this.ownerCt,
+ panel = me.ownerCt,
cellRegion,
record;
panel.scrollByDeltaX(adjustmentX);
}
el.focus();
- this.fireEvent('cellfocus', record, cell, position);
+ me.fireEvent('cellfocus', record, cell, position);
}
},
-<span id='Ext-view.Table-method-scrollByDelta'> /**
+<span id='Ext-view-Table-method-scrollByDelta'> /**
</span> * Scroll by delta. This affects this individual view ONLY and does not
* synchronize across views or scrollers.
* @param {Number} delta
this.callParent(arguments);
},
-<span id='Ext-view.Table-method-saveScrollState'> /**
+<span id='Ext-view-Table-method-saveScrollState'> /**
</span> * Save the scrollState in a private variable.
* Must be used in conjunction with restoreScrollState
*/
state.top = dom.scrollTop;
},
-<span id='Ext-view.Table-method-restoreScrollState'> /**
+<span id='Ext-view-Table-method-restoreScrollState'> /**
</span> * Restore the scrollState.
* Must be used in conjunction with saveScrollState
* @private
dom.scrollTop = state.top;
},
-<span id='Ext-view.Table-method-refresh'> /**
+<span id='Ext-view-Table-method-refresh'> /**
</span> * Refresh the grid view.
* Saves and restores the scroll state, generates a new template, stripes rows
* and invalidates the scrollers.
- * @param {Boolean} firstPass This is a private flag for internal use only.
*/
- refresh: function(firstPass) {
- var me = this,
- table;
-
- //this.saveScrollState();
- me.setNewTemplate();
-
- // The table.unselectable() call below adds a selectstart listener to the table element.
- // Before we clear the whole dataview in the callParent, we remove all the listeners from the
- // table. This prevents a big memory leak on IE6 and IE7.
- if (me.rendered) {
- table = me.el.child('table');
- if (table) {
- table.removeAllListeners();
- }
- }
-
- me.callParent(arguments);
-
- //this.restoreScrollState();
- if (me.rendered) {
- // Make the table view unselectable
- table = me.el.child('table');
- if (table) {
- table.unselectable();
- }
-
- if (!firstPass) {
- // give focus back to gridview
- me.el.focus();
- }
- }
+ refresh: function() {
+ this.setNewTemplate();
+ this.callParent(arguments);
},
- processItemEvent: function(type, record, row, rowIndex, e) {
+ processItemEvent: function(record, row, rowIndex, e) {
var me = this,
cell = e.getTarget(me.cellSelector, row),
cellIndex = cell ? cell.cellIndex : -1,
map = me.statics().EventMap,
selModel = me.getSelectionModel(),
+ type = e.type,
result;
if (type == 'keydown' && !cell && selModel.getCurrentPosition) {
}
return !(
- // We are adding cell and feature events
+ // We are adding cell and feature events
(me['onBeforeCell' + map[type]](cell, cellIndex, record, row, rowIndex, e) === false) ||
(me.fireEvent('beforecell' + type, me, cell, cellIndex, record, row, rowIndex, e) === false) ||
(me['onCell' + map[type]](cell, cellIndex, record, row, rowIndex, e) === false) ||
processSpecialEvent: function(e) {
var me = this,
- map = this.statics().EventMap,
- features = this.features,
+ map = me.statics().EventMap,
+ features = me.features,
ln = features.length,
type = e.type,
i, feature, prefix, featureTarget,
beforeArgs, args,
panel = me.ownerCt;
- this.callParent(arguments);
+ me.callParent(arguments);
if (type == 'mouseover' || type == 'mouseout') {
return;
prefix = feature.eventPrefix;
// allows features to implement getFireEventArgs to change the
// fireEvent signature
- beforeArgs = feature.getFireEventArgs('before' + prefix + type, me, featureTarget);
- args = feature.getFireEventArgs(prefix + type, me, featureTarget);
-
+ beforeArgs = feature.getFireEventArgs('before' + prefix + type, me, featureTarget, e);
+ args = feature.getFireEventArgs(prefix + type, me, featureTarget, e);
+
if (
// before view event
(me.fireEvent.apply(me, beforeArgs) === false) ||
onBeforeCellContextMenu: Ext.emptyFn,
onBeforeCellKeyDown: Ext.emptyFn,
-<span id='Ext-view.Table-method-expandToFit'> /**
+<span id='Ext-view-Table-method-expandToFit'> /**
</span> * Expand a particular header to fit the max content width.
* This will ONLY expand, not contract.
* @private
*/
expandToFit: function(header) {
- var maxWidth = this.getMaxContentWidth(header);
- delete header.flex;
- header.setWidth(maxWidth);
+ if (header) {
+ var maxWidth = this.getMaxContentWidth(header);
+ delete header.flex;
+ header.setWidth(maxWidth);
+ }
},
-<span id='Ext-view.Table-method-getMaxContentWidth'> /**
+<span id='Ext-view-Table-method-getMaxContentWidth'> /**
</span> * Get the max contentWidth of the header's text and all cells
* in the grid under this header.
* @private
},
getPositionByEvent: function(e) {
- var cellNode = e.getTarget(this.cellSelector),
- rowNode = e.getTarget(this.itemSelector),
- record = this.getRecord(rowNode),
- header = this.getHeaderByCell(cellNode);
+ var me = this,
+ cellNode = e.getTarget(me.cellSelector),
+ rowNode = e.getTarget(me.itemSelector),
+ record = me.getRecord(rowNode),
+ header = me.getHeaderByCell(cellNode);
- return this.getPosition(record, header);
+ return me.getPosition(record, header);
},
getHeaderByCell: function(cell) {
return false;
},
-<span id='Ext-view.Table-method-walkCells'> /**
+<span id='Ext-view-Table-method-walkCells'> /**
</span> * @param {Object} position The current row and column: an object containing the following properties:<ul>
* <li>row<div class="sub-desc"> The row <b>index</b></div></li>
* <li>column<div class="sub-desc">The column <b>index</b></div></li>
* @private
*/
walkCells: function(pos, direction, e, preventWrap, verifierFn, scope) {
- var row = pos.row,
+ var me = this,
+ row = pos.row,
column = pos.column,
- rowCount = this.store.getCount(),
- firstCol = this.getFirstVisibleColumnIndex(),
- lastCol = this.getLastVisibleColumnIndex(),
+ rowCount = me.store.getCount(),
+ firstCol = me.getFirstVisibleColumnIndex(),
+ lastCol = me.getLastVisibleColumnIndex(),
newPos = {row: row, column: column},
- activeHeader = this.headerCt.getHeaderAtIndex(column);
+ activeHeader = me.headerCt.getHeaderAtIndex(column);
// no active header or its currently hidden
if (!activeHeader || activeHeader.hidden) {
// go right
} else {
if (!e.ctrlKey) {
- newPos.column = column + this.getRightGap(activeHeader);
+ newPos.column = column + me.getRightGap(activeHeader);
} else {
newPos.column = lastCol;
}
// go left
} else {
if (!e.ctrlKey) {
- newPos.column = column + this.getLeftGap(activeHeader);
+ newPos.column = column + me.getLeftGap(activeHeader);
} else {
newPos.column = firstCol;
}
};
},
-<span id='Ext-view.Table-method-getRightGap'> /**
+<span id='Ext-view-Table-method-getRightGap'> /**
</span> * Determines the 'gap' between the closest adjacent header to the right
* that is not hidden.
* @private
beforeDestroy: function() {
if (this.rendered) {
- table = this.el.child('table');
- if (table) {
- table.removeAllListeners();
- }
+ this.el.removeAllListeners();
}
this.callParent(arguments);
},
-<span id='Ext-view.Table-method-getLeftGap'> /**
+<span id='Ext-view-Table-method-getLeftGap'> /**
</span> * Determines the 'gap' between the closest adjacent header to the left
* that is not hidden.
* @private
return prevIdx - activeHeaderIdx;
}
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff