/**
* @class Ext.view.AbstractView
* This is an abstract superclass and should not be used directly. Please see {@link Ext.view.View}.
* @private
*/
Ext.define('Ext.view.AbstractView', {
extend: 'Ext.Component',
requires: [
'Ext.LoadMask',
'Ext.CompositeElementLite',
'Ext.selection.DataViewModel',
'Ext.view.NavigationModel',
'Ext.util.CSS'
],
mixins: [
'Ext.util.StoreHolder'
],
isDataView: true,
inheritableStatics: {
/**
* @private
* @static
* @inheritable
*/
getRecord: function(node) {
return this.getBoundView(node).getRecord(node);
},
/**
* @private
* @static
* @inheritable
*/
getBoundView: function(node) {
return Ext.getCmp(node.getAttribute('data-boundView'));
}
},
/**
* @property defaultBindProperty
* @inheritdoc
*/
defaultBindProperty: 'store',
/**
* @private
* Used for buffered rendering.
*/
renderBuffer: new Ext.dom.Fly(document.createElement('div')),
statics: {
/**
* @prop {Number} [updateDelay=200] Global config for use when using
* {@link #throttledUpdate throttled view updating} if the data in the backing
* {@link Ext.data.Store store} is being changed rapidly, for example receiving changes
* from the server through a WebSocket connection.
*
* To avoid too-frequent view updates overloading the browser with style recalculation,
* layout and paint requests, updates can be {@link #throttledUpdate throttled} to
* coalesced, and applied at the interval specified in milliseconds.
*
* Note that on lower powered devices, updating is throttled to once every second.
*/
updateDelay: Ext.platformTags.desktop ? 200 : 1000,
queueRecordChange: function(view, store, record, operation, modifiedFieldNames) {
var me = this,
changeQueue = me.changeQueue || (me.changeQueue = {}),
recId = record.internalId,
recChange,
updated,
len, i, fieldName, value,
checkForReversion;
recChange = changeQueue[recId] || (changeQueue[recId] = {
operation: operation,
record: record,
data: {},
views: []
});
// Hash of original values
updated = recChange.data;
// Make sure this view is among those updated when record changes are flushed
Ext.Array.include(recChange.views, view);
// Note the following condition tests the result of an assignment statement.
// If we have been informed that specific fields have changed.
if (modifiedFieldNames && (len = modifiedFieldNames.length)) {
for (i = 0; i < len; i++) {
fieldName = modifiedFieldNames[i];
value = record.data[fieldName];
// More than one update is being performed...
if (updated.hasOwnProperty(fieldName)) {
// If the update is back to the original value,
// this may have reverted the record to original state
if (record.isEqual(updated[fieldName], value)) {
delete updated[fieldName];
checkForReversion = true;
}
}
// On first update, cache the original value
else {
updated[fieldName] = value;
}
}
// If the record has been returned to its original state, delete the queue entry.
// checkForReversion flag saves the expensive (on legacy browsers)
// call to Ext.Object.getKeys
if (checkForReversion && !Ext.Object.getKeys(updated).length) {
delete changeQueue[recId];
}
}
// Unspecified fields have changed. We have to collect the whole data object.
else {
Ext.apply(updated, record.data);
}
// Create a task which will call flushChangeQueue in updateDelay milliseconds
// from the time it's invoked.
if (!me.flushQueueTask) {
me.flushQueueTask = new Ext.util.DelayedTask(
Ext.global.requestAnimationFrame
? Ext.Function.createAnimationFrame(me.flushChangeQueue, me)
: me.flushChangeQueue.bind(me), me, null, false
);
}
if (!me.flushTimer) {
me.flushTimer = me.flushQueueTask.delay(Ext.view.AbstractView.updateDelay);
}
},
/**
* @private
* Flushes all queued field updates to the UI.
*
* Called in the context of the AbstractView class.
*
* The queue is shared across all Views so that there is only one global flush operation.
*/
flushChangeQueue: function() {
// Maintainer: Note that "me" references AbstractView class
var me = this,
dirtyViews, len, changeQueue, recChange, recId, i, view;
// If there is scrolling going on anywhere, requeue the flush operation ASAP.
if (Ext.isScrolling) {
return me.flushTimer = me.flushQueueTask.delay(1);
}
me.flushTimer = null;
changeQueue = me.changeQueue;
// Empty the view's changeQueue
me.changeQueue = {};
for (recId in changeQueue) {
recChange = changeQueue[recId];
dirtyViews = recChange.views;
len = dirtyViews.length;
// Loop through all the views which have outstanding changes.
for (i = 0; i < len; i++) {
view = dirtyViews[i];
// View may have been destroyed during the buffered phase.
if (!view.destroyed) {
view.handleUpdate(
view.dataSource, recChange.record, recChange.operation,
Ext.Object.getKeys(recChange.data)
);
}
}
}
}
},
config: {
/**
* @cfg {Ext.data.Store} store
* The {@link Ext.data.Store} to bind this DataView to.
* @since 2.3.0
*/
store: 'ext-empty-store',
// @cmd-auto-dependency { aliasPrefix: 'view.navigation.' }
/**
* @private
* The {@link Ext.view.NavigationModel} [default] alias to use.
* @since 5.0.1
*/
navigationModel: {
type: 'default'
},
// @cmd-auto-dependency { aliasPrefix: 'selection.' }
/**
* @cfg {Object/Ext.selection.DataViewModel} selectionModel
* The {@link Ext.selection.Model selection model} [dataviewmodel] config or alias to use.
* @since 5.1.0
*/
selectionModel: {
type: 'dataviewmodel'
}
},
/**
* @cfg publishes
* @inheritdoc
*/
publishes: ['selection'],
/**
* @cfg twoWayBindable
* @inheritdoc
*/
twoWayBindable: ['selection'],
/**
* @cfg {Ext.data.Model} selection
* The selected model. Typically used with {@link #bind binding}.
*/
selection: null,
/**
* @cfg {Boolean} throttledUpdate
* Configure as `true` to have this view participate in the global throttled update queue
* which flushes store changes to the UI at a maximum rate determined by the
* {@link #updateDelay} setting.
*/
throttledUpdate: false,
/**
* @cfg {String/String[]/Ext.XTemplate} tpl (required)
* The HTML fragment or an array of fragments that will make up the template
* used by this DataView. This should be specified in the same format expected by the
* constructor of {@link Ext.XTemplate}. When a `tpl` is specified, this class assumes that
* records are rendered in the order they appear in the `{@link #store}`. If a custom `tpl`
* does not conform to this assumption, index values will be incorrect which may cause the view
* to misbehave.
* @since 2.3.0
*/
/**
* @cfg {Boolean} deferInitialRefresh
* Configure as 'true` to defer the initial refresh of the view.
*
* This allows the View to execute its render and initial layout more quickly because
* the process will not be encumbered by the update of the view structure.
*/
deferInitialRefresh: false,
/**
* @cfg {String} itemSelector (required)
* <b>This is a required setting</b>. A simple CSS selector (e.g. `div.some-class` or
* `span:first-child`) that will be used to determine what nodes this DataView will be
* working with. The itemSelector is used to map DOM nodes to records. As such, there should
* only be one root level element that matches the selector for each record. The itemSelector
* will be automatically configured if the {@link #itemTpl} config is used.
*
* new Ext.view.View({
* renderTo: Ext.getBody(),
* store: {
* fields: ['name'],
* data: [
* {name: 'Item 1'},
* {name: 'Item 2'}
* ]
* },
* tpl: [
* '<ul>',
* '<tpl for=".">',
* '<li>{name}</li>',
* '</tpl>',
* '</ul>'
* ],
* // Match the li, since each one maps to a record
* itemSelector: 'li'
* });
*
* @since 2.3.0
*/
/**
* @cfg {String} itemCls
* Specifies the class to be assigned to each element in the view when used in conjunction
* with the {@link #itemTpl} configuration.
* @since 2.3.0
*/
itemCls: Ext.baseCSSPrefix + 'dataview-item',
/**
* @cfg {String/String[]/Ext.XTemplate} itemTpl
* The inner portion of the item template to be rendered. Follows an XTemplate
* structure and will be placed inside of a tpl.
*/
/**
* @cfg {String} overItemCls
* A CSS class to apply to each item in the view on mouseover.
* Setting this will automatically set {@link #trackOver} to `true`.
*/
/**
* @cfg {String} loadingText
* A string to display during data load operations. If specified, this text will be
* displayed in a loading div and the view's contents will be cleared while loading, otherwise
* the view's contents will continue to display normally until the new data is loaded
* and the contents are replaced.
* @since 2.3.0
* @locale
*/
loadingText: 'Loading...',
/**
* @cfg {Boolean/Object} loadMask
* False to disable a load mask from displaying while the view is loading. This can also be a
* {@link Ext.LoadMask} configuration object.
*/
loadMask: true,
/**
* @cfg {String} loadingCls
* The CSS class to apply to the loading message element. Defaults to
* Ext.LoadMask.prototype.msgCls "x-mask-loading".
*/
/**
* @cfg {Boolean} loadingUseMsg
* Whether or not to use the loading message.
* @private
*/
loadingUseMsg: true,
/**
* @cfg {Number} loadingHeight
* If specified, gives an explicit height for the data view when it is showing the
* {@link #loadingText}, if that is specified. This is useful to prevent the view's height
* from collapsing to zero when the loading mask is applied and there are no other contents
* in the data view.
*/
/**
* @cfg {String} selectedItemCls
* A CSS class to apply to each selected item in the view.
*/
selectedItemCls: Ext.baseCSSPrefix + 'item-selected',
/**
* @cfg {String} emptyText
* The text to display in the view when there is no data to display.
* Note that when using local data the emptyText will not be displayed unless you set
* the {@link #deferEmptyText} option to false.
* @since 2.3.0
* @accessor
* @locale
*/
emptyText: "",
/**
* @cfg {Boolean} deferEmptyText
* True to defer emptyText being applied until the store's first load.
* @since 2.3.0
*/
deferEmptyText: true,
/**
* @cfg {Boolean} trackOver
* When `true` the {@link #overItemCls} will be applied to items when hovered over.
* This in return will also cause {@link Ext.view.View#highlightitem highlightitem} and
* {@link Ext.view.View#unhighlightitem unhighlightitem} events to be fired.
*
* Enabled automatically when the {@link #overItemCls} config is set.
*
* @since 2.3.0
*/
trackOver: false,
/**
* @cfg {Boolean} blockRefresh
* Set this to true to ignore refresh events on the bound store. This is useful if
* you wish to provide custom transition animations via a plugin
* @since 3.4.0
*/
blockRefresh: false,
/**
* @cfg {Boolean} [disableSelection=false]
* True to disable selection within the DataView. This configuration will lock
* the selection model that the DataView uses.
*/
/**
* @cfg {Boolean} preserveScrollOnRefresh
* True to preserve scroll position across refresh operations.
*/
preserveScrollOnRefresh: false,
/**
* @cfg {Boolean} preserveScrollOnReload
* True to preserve scroll position when the store is reloaded.
*
* You may want to configure this as `true` if you are using a
* {@link Ext.data.BufferedStore buffered store} and you require refreshes of the client side
* data state not to disturb the state of the UI.
*
* @since 5.1.1
*/
preserveScrollOnReload: false,
/**
* @property autoDestroyBoundStore
* @inheritdoc
*/
autoDestroyBoundStore: true,
/**
* @property ariaRole
* @inheritdoc
*/
ariaRole: 'listbox',
itemAriaRole: 'option',
/**
* @private
*/
last: false,
/**
* @property focusable
* @inheritdoc
*/
focusable: true,
/**
* @cfg tabIndex
* @inheritdoc
*/
tabIndex: 0,
triggerEvent: 'itemclick',
triggerCtEvent: 'containerclick',
// Starts as true by default so that pn the leading edge of the first layout a refresh
// will be triggered. A refresh opereration sets this flag to false.
// When a refresh is requested using refreshView, the request may be deferred because of hidden
// or collapsed state. This is done by setting the refreshNeeded flag to true, and the the next
// layout will trigger refresh.
refreshNeeded: true,
updateSuspendCounter: 0,
addCmpEvents: Ext.emptyFn,
/**
* @event beforerefresh
* Fires before the view is refreshed
* @param {Ext.view.View} this The DataView object
*/
/**
* @event refresh
* Fires when the view is refreshed
* @param {Ext.view.View} this The DataView object
*/
/**
* @event viewready
* Fires when the View's item elements representing Store items has been rendered.
* No items will be available for selection until this event fires.
* @param {Ext.view.View} this
*/
/**
* @event itemupdate
* Fires when the node associated with an individual record is updated
* @param {Ext.data.Model} record The model instance
* @param {Number} index The index of the record
* @param {HTMLElement} node The node that has just been updated
* @param {Ext.view.View} view The view containing the item
*/
/**
* @event itemadd
* Fires when the nodes associated with an recordset have been added to the underlying store
* @param {Ext.data.Model[]} records The model instance
* @param {Number} index The index at which the set of records was inserted
* @param {HTMLElement[]} node The node that has just been updated
* @param {Ext.view.View} view The view adding the item
*/
/**
* @event itemremove
* Fires when the node associated with an individual record is removed
* @param {Ext.data.Model[]} records The model instances removed
* @param {Number} index The index from which the records wer removed
* @param {HTMLElement[]} item The view items removed
* @param {Ext.view.View} view The view removing the item
*/
constructor: function(config) {
if (config && config.selModel) {
config.selectionModel = config.selModel;
}
this.callParent([config]);
},
initComponent: function() {
var me = this,
isDef = Ext.isDefined,
itemTpl = me.itemTpl,
memberFn = {},
selection = me.selection,
store;
if (selection) {
me.selection = null;
me.setSelection(selection);
}
if (itemTpl) {
if (Ext.isArray(itemTpl)) {
// string array
if (typeof itemTpl[itemTpl.length - 1] !== 'string') {
itemTpl = itemTpl.slice(0);
memberFn = itemTpl.pop();
}
itemTpl = itemTpl.join('');
}
else if (Ext.isObject(itemTpl)) {
// tpl instance
memberFn = Ext.apply(memberFn, itemTpl.initialConfig);
itemTpl = itemTpl.html;
}
if (!me.itemSelector) {
me.itemSelector = '.' + me.itemCls;
}
if (memberFn.fn) {
memberFn.baseFn = memberFn.fn;
delete memberFn.fn;
itemTpl = "{%this.baseFn(out, values, parent, xindex, xcount, xkey)%}";
}
itemTpl = Ext.String.format(
'<tpl for="."><div class="{0}" role="{2}">{1}</div></tpl>', me.itemCls, itemTpl,
me.itemAriaRole
);
me.tpl = new Ext.XTemplate(itemTpl, memberFn);
}
//<debug>
if (!isDef(me.tpl) || !isDef(me.itemSelector)) {
Ext.raise({
sourceClass: 'Ext.view.View',
tpl: me.tpl,
itemSelector: me.itemSelector,
msg: "DataView requires both tpl and itemSelector configurations to be defined."
});
}
//</debug>
me.callParent();
me.tpl = me.lookupTpl('tpl');
//<debug>
// backwards compat alias for overClass/selectedClass
// TODO: Consider support for overCls generation Ext.Component config
if (isDef(me.overCls) || isDef(me.overClass)) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn(
'Ext.view.View: Using the deprecated overCls or overClass configuration. ' +
'Use overItemCls instead.'
);
}
me.overItemCls = me.overCls || me.overClass;
delete me.overCls;
delete me.overClass;
}
if (isDef(me.selectedCls) || isDef(me.selectedClass)) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn(
'Ext.view.View: Using the deprecated selectedCls or selectedClass ' +
'configuration. Use selectedItemCls instead.');
}
me.selectedItemCls = me.selectedCls || me.selectedClass;
delete me.selectedCls;
delete me.selectedClass;
}
//</debug>
if (me.overItemCls) {
me.trackOver = true;
}
me.addCmpEvents();
// Look up the configured Store. If none configured, use the fieldless,
// empty Store defined in Ext.data.Store.
store = me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');
// Use the provided store as the data source unless a Feature or plugin
// has injected a special one
if (!me.dataSource) {
me.dataSource = store;
}
me.bindStore(store, true);
// Must exist before the selection model.
// Selection model listens to this for navigation events.
me.getNavigationModel().bindComponent(this);
if (!me.all) {
me.all = new Ext.CompositeElementLite();
}
// We track the scroll position
me.scrollState = {
top: 0,
left: 0
};
me.savedTabIndexAttribute = 'data-savedtabindex-' + me.id;
},
getElConfig: function() {
var result = this.mixins.renderable.getElConfig.call(this);
// Subclasses may set focusable to false (BoundList is not focusable)
if (this.focusable) {
result.tabIndex = 0;
}
return result;
},
onRender: function(parentNode, containerIdx) {
var mask = this.loadMask;
this.callParent([parentNode, containerIdx]);
if (mask) {
this.createMask(mask);
}
},
beforeLayout: function() {
var me = this;
me.callParent();
// If there is a deferred refresh timer running, allow that to do the refresh.
if (me.refreshNeeded && !me.pendingRefresh) {
// If we have refreshed before, just call a refresh now.
if (me.refreshCounter) {
me.refreshView();
}
else {
me.doFirstRefresh(me.dataSource);
}
}
},
onMaskBeforeShow: function() {
var me = this,
loadingHeight = me.loadingHeight;
if (loadingHeight && loadingHeight > me.getHeight()) {
me.hasLoadingHeight = true;
me.oldMinHeight = me.minHeight;
me.minHeight = loadingHeight;
me.updateLayout();
}
},
onMaskHide: function() {
var me = this;
if (!me.destroying && me.hasLoadingHeight) {
me.minHeight = me.oldMinHeight;
me.updateLayout();
delete me.hasLoadingHeight;
}
},
beforeRender: function() {
this.callParent();
this.getSelectionModel().beforeViewRender(this);
},
afterRender: function() {
this.callParent();
// Subclasses may set focusable to false.
// BoundList is not focusable.
// BoundList processes key events from its boundField.
if (this.focusable) {
this.focusEl = this.el;
}
},
getRefItems: function() {
var mask = this.loadMask,
result = [];
if (mask && mask.isComponent) {
result.push(mask);
}
return result;
},
getSelection: function() {
return this.getSelectionModel().getSelection();
},
/**
* Sets the value of the selection.
* @param {Ext.data.Model} selection
*/
setSelection: function(selection) {
// This is purposefully written not as a config. Because getSelection
// is an existing API that doesn't mirror the value for setSelection, we
// don't want the publish system to call the getter, but rather just the
// raw property.
var current = this.selection;
if (selection !== current) {
this.selection = selection;
this.updateSelection(selection, current);
}
},
updateSelection: function(selection) {
var me = this,
sm;
if (!me.ignoreNextSelection) {
me.ignoreNextSelection = true;
sm = me.getSelectionModel();
if (selection) {
sm.select(selection);
}
else {
sm.deselectAll();
}
me.ignoreNextSelection = false;
}
me.publishState('selection', selection);
},
updateBindSelection: function(selModel, selection) {
var me = this,
selected = null;
if (!me.ignoreNextSelection) {
me.ignoreNextSelection = true;
if (selection.length) {
selected = selModel.getLastSelected();
me.hasHadSelection = true;
}
if (me.hasHadSelection) {
me.setSelection(selected);
}
me.ignoreNextSelection = false;
}
},
applySelectionModel: function(selModel, oldSelModel) {
var me = this,
grid = me.grid,
mode, ariaAttr, ariaDom;
if (oldSelModel) {
// Could be already destroyed, and listeners cleared
if (!oldSelModel.destroyed) {
oldSelModel.un({
scope: me,
selectionchange: me.updateBindSelection,
lastselectedchanged: me.updateBindSelection
});
}
Ext.destroy(me.selModelRelayer);
selModel = Ext.Factory.selection(selModel);
}
// If this is the initial configuration, pull overriding configs in from this view
else {
if (selModel && selModel.isSelectionModel) {
selModel.locked = me.disableSelection;
}
else {
if (me.simpleSelect) {
mode = 'SIMPLE';
}
else if (me.multiSelect) {
mode = 'MULTI';
}
else {
mode = 'SINGLE';
}
if (typeof selModel === 'string') {
selModel = {
type: selModel
};
}
selModel = Ext.Factory.selection(Ext.apply({
allowDeselect: me.allowDeselect || me.multiSelect,
mode: mode,
locked: me.disableSelection
}, selModel));
}
}
// Grids should have aria-multiselectable on their ariaEl instead
if (selModel.mode !== 'SINGLE') {
ariaDom = (grid || me).ariaEl.dom;
if (ariaDom) {
ariaDom.setAttribute('aria-multiselectable', true);
}
else if (!grid) {
ariaAttr = me.ariaRenderAttributes || (me.ariaRenderAttributes = {});
ariaAttr['aria-multiselectable'] = true;
}
}
me.selModelRelayer = me.relayEvents(selModel, [
'selectionchange', 'beforeselect', 'beforedeselect', 'select', 'deselect', 'focuschange'
]);
selModel.on({
scope: me,
lastselectedchanged: me.updateBindSelection,
selectionchange: me.updateBindSelection
});
return selModel;
},
updateSelectionModel: function(selectionModel) {
// Keep the legacy property correct
this.selModel = selectionModel;
},
applyNavigationModel: function(navigationModel) {
return Ext.Factory.viewNavigation(navigationModel);
},
onFocusEnter: function(e) {
var me = this,
navigationModel = me.getNavigationModel(),
focusPosition = me.lastFocused;
// This is set on mousedown on the scrollbar in IE/Edge.
// Those browsers focus the element on mousedown on its scrollbar
// which is not what we want, so throw focus back in this
// situation.
// See Ext.view.navigationModel for this being set.
me.lastFocused = null;
if (focusPosition === 'scrollbar') {
e.relatedTarget.focus();
return;
}
// Disable tabbability of elements within this view.
me.toggleChildrenTabbability(false);
if (!me.itemFocused && me.all.getCount()) {
// SHIFT+TAB hit the tab guard - focus last item.
if (e.event.getTarget() === me.tabGuardEl) {
focusPosition = me.all.getCount() - 1;
}
else {
focusPosition = navigationModel.getLastFocused();
}
navigationModel.setPosition(focusPosition || 0, e.event, null, !focusPosition);
// We now contain focus is that was successful
me.itemFocused = navigationModel.getPosition() != null;
}
// View's main el should be kept untabbable, otherwise pressing
// Shift-Tab key in the view would move the focus to the main el
// which will then bounce it back to the last focused item.
// That would effectively make Shift-Tab unusable.
if (me.itemFocused) {
me.el.dom.setAttribute('tabIndex', -1);
if (me.tabGuardEl) {
me.tabGuardEl.setAttribute('tabIndex', -1);
}
}
me.callParent([e]);
},
onFocusLeave: function(e) {
var me = this;
// Ignore this event if we do not actually contain focus,
// or if the reason for focus exiting was that we are refreshing.
if (me.itemFocused && !me.refreshing) {
// Blur the focused cell
me.getNavigationModel().setPosition(null, e.event, null, true);
me.itemFocused = false;
me.el.dom.setAttribute('tabIndex', 0);
if (me.tabGuardEl) {
me.tabGuardEl.setAttribute('tabIndex', 0);
}
}
me.callParent([e]);
},
/**
* @private
* Cancel a pending focus task, if any.
* This is a separate method to allow simple abstraction for locked views.
*/
cancelFocusTask: function() {
var task = this.getFocusTask();
if (task) {
task.cancel();
}
},
onRemoved: function(isDestroying) {
this.callParent([isDestroying]);
// IE does not fire focusleave on removal from DOM
if (!isDestroying) {
this.onFocusLeave({});
}
},
/**
* Refreshes the view by reloading the data from the store and re-rendering the template.
*
* @since 2.3.0
*/
refresh: function() {
var me = this,
items = me.all,
prevItemCount = items.getCount(),
refreshCounter = me.refreshCounter,
targetEl,
records,
selModel = me.getSelectionModel(),
restoreFocus,
// If there are items in the view, then honour preserveScrollOnRefresh
scroller = refreshCounter && items.getCount() && me.preserveScrollOnRefresh &&
me.getScrollable(),
bufferedRenderer = me.bufferedRenderer,
scrollPos;
if (!me.rendered || me.destroyed) {
return;
}
if (!me.hasListeners.beforerefresh || me.fireEvent('beforerefresh', me) !== false) {
// So that listeners to itemremove events know that its because of a refresh
me.refreshing = true;
// If focus was in this view, this will restore it
restoreFocus = me.saveFocusState();
targetEl = me.getTargetEl();
records = me.getViewRange();
if (scroller) {
scrollPos = scroller.getPosition();
if (!(scrollPos.x || scrollPos.y)) {
scrollPos = null;
}
}
if (refreshCounter || me.emptyEl) {
me.clearViewEl();
}
if (refreshCounter) {
me.refreshCounter++;
}
else {
me.refreshCounter = 1;
}
// if we have a captured 'beforeRefreshStartIndex' use it to update items.startIndex
if (bufferedRenderer && bufferedRenderer.beforeRefreshStartIndex) {
items.startIndex = bufferedRenderer.beforeRefreshStartIndex;
}
// Usually, for an empty record set, this would be blank, but when the Template
// Creates markup outside of the record loop, this must still be honoured
// even if there are no records.
me.tpl.append(targetEl, me.collectData(records, items.startIndex || 0));
// The emptyText is now appended to the View's element
// after nodes outside the tpl block.
if (records.length < 1) {
// Process empty text unless the store is being cleared.
me.addEmptyText();
items.clear();
}
else {
me.collectNodes(targetEl.dom);
me.updateIndexes(0);
}
// If focus was in any way in this view, this will restore it
restoreFocus();
// Some subclasses do not need to do this. TableView does not need to do this -
// it renders selected class using its tenmplate.
if (me.refreshSelmodelOnRefresh !== false) {
selModel.refresh();
}
me.refreshNeeded = false;
// Ensure layout system knows about new content size.
// If number of items have changed, force a layout.
me.refreshSize(items.getCount() !== prevItemCount);
me.fireItemMutationEvent('refresh', me, records);
if (scroller) {
scroller.scrollTo(scrollPos);
}
// Upon first refresh, fire the viewready event.
// Reconfiguring the grid "renews" this event.
if (!me.viewReady) {
// Fire an event when deferred content becomes available.
me.viewReady = true;
me.fireEvent('viewready', me);
}
me.refreshing = false;
if (bufferedRenderer) {
bufferedRenderer.refreshSize();
}
me.cleanupData();
}
// The tabGuardEl is only needed before focus has entered the view to prevent
// naturally tabbable interior elements from attracting focus when using SHIFT+TAB
// from after the view. Once focus has entered, we disable tabbability on interior
// elements so it will not be needed.
// Subsequent *full* refreshes will destroy it.
// Buffer rendered refreshes are more granular, and do not destroy extraneous
// DOM, but this does not matter because tha tabGuardEl will be tabIndex="-1"
// so out of the tab order.
if (!me.tabGuardEl) {
// We only need an "after" tab guard.
// The View el is tabIndex="0", so captures forward TAB.
// It's only SHIFT+TAB that we have to guard against.
me.tabGuardEl = me.el.createChild({
cls: Ext.baseCSSPrefix + 'tab-guard ' + Ext.baseCSSPrefix + 'tab-guard-after',
tabIndex: "0"
}, null, true);
}
},
addEmptyText: function() {
var me = this,
store = me.getStore();
if (me.emptyText && !store.isLoading() &&
(!me.deferEmptyText || me.refreshCounter > 1 || store.isLoaded())) {
if (!me.emptyEl) {
me.emptyEl =
Ext.core.DomHelper.insertHtml('beforeEnd', me.getTargetEl().dom, me.emptyText);
}
else {
Ext.fly(me.emptyEl).setHtml(me.emptyText);
}
}
},
getEmptyText: function() {
return this.emptyText;
},
setEmptyText: function(emptyText) {
var me = this;
if (me.emptyText !== emptyText) {
me.emptyText = emptyText;
me.refresh();
}
return me;
},
getViewRange: function() {
return this.dataSource.getRange();
},
/**
* @private
* Called by the framework when the view is refreshed, or when rows are added or deleted.
*
* These operations may cause the view's dimensions to change, and if the owning container
* is shrinkwrapping this view, then the layout must be updated to accommodate these new
* dimensions.
*/
refreshSize: function(forceLayout) {
var me = this,
sizeModel = me.getSizeModel();
if (sizeModel.height.shrinkWrap || sizeModel.width.shrinkWrap || forceLayout) {
me.updateLayout();
}
},
afterFirstLayout: function(width, height) {
var me = this,
scroller = me.getScrollable();
if (scroller) {
me.viewScrollListeners = scroller.on({
scroll: me.onViewScroll,
scrollend: me.onViewScrollEnd,
scope: me,
onFrame: !!Ext.global.requestAnimationFrame,
destroyable: true
});
}
me.callParent([width, height]);
},
clearViewEl: function() {
var me = this,
targetEl = me.getTargetEl(),
all = me.all,
store = me.getStore(),
nodeContainerIsTarget = me.getNodeContainer() === targetEl,
i, removedItems, removedRecs;
// We must ensure that the itemremove event is fired EVERY time an item is removed from the
// view. This is so that widgets rendered into a view by a WidgetColumn can be recycled.
removedItems = all.slice();
removedRecs = [];
for (i = all.startIndex; i <= all.endIndex; i++) {
removedRecs.push(
store.getByInternalId(all.item(i, true).getAttribute('data-recordId'))
);
}
me.fireItemMutationEvent('itemremove', removedRecs, all.startIndex || 0, removedItems, me);
me.clearEmptyEl();
// If nodeContainer is the el, just clear the innerHTML. Otherwise, we need
// to manually remove each node we know about.
me.all.clear(!nodeContainerIsTarget);
targetEl = nodeContainerIsTarget ? targetEl.dom : me.getNodeContainer();
if (targetEl) {
targetEl.innerHTML = '';
}
},
clearEmptyEl: function() {
var emptyEl = this.emptyEl;
// emptyEl is likely to be a TextNode if emptyText is not HTML code.
// Use native DOM to remove it.
if (emptyEl) {
Ext.removeNode(emptyEl);
}
this.emptyEl = null;
},
onViewScroll: function(scroller, x, y) {
if (!this.destroyed) {
this.fireEvent('scroll', this, x, y);
}
},
onViewScrollEnd: function(scroller, x, y) {
if (!this.destroyed) {
this.fireEvent('scrollend', this, x, y);
}
},
/**
* Saves the scrollState in a private variable.
* Must be used in conjunction with restoreScrollState.
* @private
*/
saveScrollState: function() {
var me = this,
state = me.scrollState;
if (me.rendered) {
state.left = me.getScrollX();
state.top = me.getScrollY();
}
},
/**
* Restores the scrollState.
* Must be used in conjunction with saveScrollState
* @private
*/
restoreScrollState: function() {
var me = this,
state = me.scrollState;
if (me.rendered) {
me.setScrollX(state.left);
me.setScrollY(state.top);
}
},
/**
* Function which can be overridden to provide custom formatting for each Record that is used by
* this DataView's {@link #tpl template} to render each node.
* @param {Object/Object[]} data The raw data object that was used to create the Record.
* @param {Number} recordIndex the index number of the Record being prepared for rendering.
* @param {Ext.data.Model} record The Record being prepared for rendering.
* @return {Array/Object} The formatted data in a format expected by the internal
* {@link #tpl template}'s overwrite() method. (either an array if your params are numeric
* (i.e. {0}) or an object (i.e. { foo: 'bar' }))
* @since 2.3.0
*/
prepareData: function(data, recordIndex, record) {
var associatedData, attr, hasCopied;
if (record) {
associatedData = record.getAssociatedData();
for (attr in associatedData) {
if (associatedData.hasOwnProperty(attr)) {
// This would be better done in collectData, however
// we only need to copy the data object if we have any associations,
// so we optimize it by only copying if we must.
// We do this so we don't mutate the underlying record.data
if (!hasCopied) {
data = Ext.Object.chain(data);
hasCopied = true;
}
data[attr] = associatedData[attr];
}
}
}
return data;
},
/**
* Function which can be overridden which returns the data object passed to this
* DataView's {@link #cfg-tpl template} to render the whole DataView.
*
* This is usually an Array of data objects, each element of which is processed by an
* {@link Ext.XTemplate XTemplate} which uses `'<tpl for=".">'` to iterate over
* its supplied data object as an Array. However, <i>named</i> properties may be placed
* into the data object to provide non-repeating data such as headings, totals etc.
*
* @param {Ext.data.Model[]} records An Array of {@link Ext.data.Model}s to be rendered into
* the DataView.
* @param {Number} startIndex the index number of the Record being prepared for rendering.
* @return {Object[]} An Array of data objects to be processed by a repeating XTemplate.
* May also contain <i>named</i> properties.
* @since 2.3.0
*/
collectData: function(records, startIndex) {
var data = [],
i = 0,
len = records.length,
record;
for (; i < len; i++) {
record = records[i];
data[i] = this.prepareData(record.data, startIndex + i, record);
}
return data;
},
cleanupData: Ext.emptyFn,
bufferRender: function(records, index) {
var me = this,
div = me.renderBuffer,
result = document.createDocumentFragment(),
nodes, len, i;
me.tpl.overwrite(div, me.collectData(records, index));
nodes = div.query(me.getItemSelector());
for (i = 0, len = nodes.length; i < len; i++) {
result.appendChild(nodes[i]);
}
return {
fragment: result,
children: nodes
};
},
// Element which contains rows
nodeContainerSelector: null,
/**
* For use by the {@link Ext.view.DragZone} plugin on platforms which use the
* [Pointer Events standard](https://www.w3.org/TR/pointerevents/).
*
* If using touch scrolling, the `pointerdown` event is reserved for starting the scroll
* gesture. To enable dragging of items using the ExtJS drag/drop system, items
* must be set draggable. This means that `pointerdown` on view items initiate an ExtJS drag
* and *not* a scroll gesture.
*
* When items are set draggable: true, pointer events platforms can still scroll using two
* finger drag, or by dragging empty parts of the view.
*
* For normal dataviews, havig the backgrounc-color of items and the view be different will
* indicate where to touch to initiate a scroll.
*
* For grids, if rows need to be dragged, there must be some blank space after rows
* to touch to initiate the scroll gesture.
*
* @param {type} draggable
* @private
*/
setItemsDraggable: function(draggable) {
var me = this,
selector = '#' + me.id + ' ' + me.getItemSelector(),
styleSheet = me.viewStyleSheet;
if (draggable) {
if (!styleSheet) {
styleSheet = Ext.view.AbstractView.prototype.viewStyleSheet =
Ext.util.CSS.createStyleSheet('', 'AbstractView');
}
// Pointer Events platforms implement the touch-action or -ms-touch-action properties
// which deicate how an element responds to touches.
// Non Pointer Events platforms such as iOS show a selection rectangle
// on longpress+drag, and that is disabled by -webkit-user-drag: none;
Ext.util.CSS.createRule(
styleSheet, selector,
'touch-action: pinch-zoom double-tap-zoom;' +
'-ms-touch-action: pinch-zoom double-tap-zoom;-webkit-user-drag: none;'
);
}
else if (styleSheet) {
Ext.util.CSS.deleteRule(selector);
}
},
/**
* Returns a CSS selector which selects the element which contains record nodes.
*/
getNodeContainerSelector: function() {
return this.nodeContainerSelector;
},
onUpdate: function(store, record, operation, modifiedFieldNames, details) {
var me = this,
isFiltered = details && details.filtered;
// If, due to filtering or buffered rendering, or node collapse, the updated record is not
// represented in the rendered structure, this is a no-op.
// The correct, new values will be rendered the next time the record becomes visible
// and is rendered.
if (!isFiltered && me.getNode(record)) {
// If we are throttling UI updates (See the updateDelay global config),
// ensure there's a change entry queued for the record in the global queue.
if (me.throttledUpdate) {
me.statics().queueRecordChange(me, store, record, operation, modifiedFieldNames);
}
else {
// Cannot use arguments array.
// TableView's signature acceses these arguments plus one more of its own.
// Event firing passes the addListener options object as rge final parameter
// and we must not pass that.
me.handleUpdate(store, record, operation, modifiedFieldNames, details);
}
}
},
handleUpdate: function(store, record) {
var me = this,
selModel = me.getSelectionModel(),
index, node;
if (me.viewReady && !me.refreshNeeded) {
index = me.dataSource.indexOf(record);
// If the record has been removed from the data source since the changes were made,
// do nothing
if (index > -1) {
// ensure the node actually exists in the DOM
if (me.getNode(record)) {
node = me.bufferRender([record], index).children[0];
me.all.replaceElement(index, node, true);
me.updateIndexes(index, index);
// Maintain selection after update
selModel.onUpdate(record);
me.refreshSizePending = true;
if (selModel.isSelected(record)) {
me.onItemSelect(record);
}
if (me.hasListeners.itemupdate) {
me.fireEvent('itemupdate', record, index, node, me);
}
return node;
}
}
}
},
/**
* @private
* Respond to store replace event which is fired by GroupStore group expand/collapse operations.
* This saves a layout because a remove and add operation are coalesced in this operation.
*/
onReplace: function(store, startIndex, oldRecords, newRecords) {
var me = this,
all = me.all,
scroller = me.getScrollable(),
yPos = scroller && scroller.getPosition().y,
selModel = me.getSelectionModel(),
origStart = startIndex,
result, item, fragment, children, oldItems, endIndex, restoreFocus;
if (me.rendered) {
// Insert the new items before the remove block
result = me.bufferRender(newRecords, startIndex, true);
fragment = result.fragment;
children = result.children;
item = all.item(startIndex);
if (item) {
all.item(startIndex).insertSibling(fragment, 'before', true);
}
else {
me.appendNodes(fragment);
}
all.insert(startIndex, children);
if (oldRecords.length) {
// If focus was in the view, this will return
// a function which will restore that state.
// If not, a function which does nothing.
restoreFocus = me.saveFocusState();
}
startIndex += newRecords.length;
endIndex = startIndex + oldRecords.length - 1;
// Remove the items which correspond to old records
oldItems = all.removeRange(startIndex, endIndex, true);
// Restore scroll position
if (scroller) {
scroller.scrollTo(null, yPos);
}
// Some subclasses do not need to do this. TableView does not need to do this.
if (me.refreshSelmodelOnRefresh !== false) {
selModel.refresh();
}
// Update the row indices (TableView) doesn't do this.
me.updateIndexes(startIndex);
me.fireItemMutationEvent('itemremove', oldRecords, origStart, oldItems, me);
me.fireItemMutationEvent('itemadd', newRecords, origStart, children, me);
// If focus was in this view, this will restore it
if (restoreFocus) {
restoreFocus();
}
me.refreshSize();
}
},
onAdd: function(store, records, index) {
var me = this,
nodes,
selModel = me.getSelectionModel();
if (me.rendered && !me.refreshNeeded) {
// If we are adding into an empty view, we must refresh in order that
// the *full tpl* is applied which might create boilerplate content *around*
// the record nodes.
if (me.all.getCount() === 0) {
me.refresh();
nodes = me.all.slice();
}
else {
nodes = me.doAdd(records, index);
// Some subclasses do not need to do this. TableView does not need to do this.
if (me.refreshSelmodelOnRefresh !== false) {
selModel.refresh();
}
me.updateIndexes(index);
// Ensure layout system knows about new content size
me.refreshSizePending = true;
}
me.fireItemMutationEvent('itemadd', records, index, nodes, me);
}
},
appendNodes: function(nodes) {
var all = this.all,
count = all.getCount();
if (this.nodeContainerSelector) {
this.getNodeContainer().appendChild(nodes);
}
else {
// If we don't have a nodeContainerSelector, we may have our
// itemSelector nodes wrapped in some other container, so we
// can't just append them to the node container, it may be the wrong element
all.item(count - 1).insertSibling(nodes, 'after');
}
},
doAdd: function(records, index) {
var me = this,
result = me.bufferRender(records, index, true),
fragment = result.fragment,
children = result.children,
all = me.all,
count = all.getCount(),
firstRowIndex = all.startIndex || 0,
lastRowIndex = all.endIndex || count - 1;
if (count === 0 || index > lastRowIndex) {
me.appendNodes(fragment);
}
else if (index <= firstRowIndex) {
all.item(firstRowIndex).insertSibling(fragment, 'before', true);
}
else {
all.item(index).insertSibling(children, 'before', true);
}
all.insert(index, children);
return children;
},
onRemove: function(store, records, index) {
var me = this,
rows = me.all,
currIdx, i, record, nodes, node, restoreFocus;
if (me.rendered && !me.refreshNeeded && rows.getCount()) {
if (me.dataSource.getCount() === 0) {
me.refresh();
}
else {
// If this view contains focus, this will return
// a function which will restore that state.
restoreFocus = me.saveFocusState();
// Just remove the elements which corresponds to the removed records
// The tpl's full HTML will still be in place.
nodes = [];
for (i = records.length - 1; i >= 0; --i) {
record = records[i];
currIdx = index + i;
if (nodes) {
node = rows.item(currIdx);
nodes[i] = node ? node.dom : undefined;
}
if (rows.item(currIdx)) {
me.doRemove(record, currIdx);
}
}
me.fireItemMutationEvent('itemremove', records, index, nodes, me);
// If focus was in this view, this will restore it
restoreFocus();
me.updateIndexes(index);
}
// Ensure layout system knows about new content size
me.refreshSizePending = true;
}
},
doRemove: function(record, index) {
this.all.removeElement(index, true);
},
eventLifecycleMap: {
refresh: 'onViewRefresh',
itemremove: 'onItemRemove',
itemadd: 'onItemAdd'
},
fireItemMutationEvent: function(eventName) {
var me = this,
ownerGrid = me.ownerGrid,
vm;
Ext.suspendLayouts();
// Inform the ownerGrid.
if (ownerGrid) {
if (eventName !== 'refresh') {
vm = me.lookupViewModel();
}
ownerGrid[me.eventLifecycleMap[eventName]].apply(
ownerGrid, Ext.Array.slice(arguments, 1)
);
}
me.fireEvent.apply(me, arguments);
// The content height MUST be measurable by the caller (the buffered renderer),
// so data must be flushed to it immediately.
if (vm) {
vm.notify();
}
Ext.resumeLayouts(true);
},
/**
* @private
* Called prior to an operation which mey remove focus from this view by some kind
* of DOM operation.
*
* If this view contains focus, this method returns a function which, when called after
* the disruptive DOM operation will restore focus to the same record, or, if the record has
* been removed to the same item index..
*
* @returns {Function} A function that will restore focus if focus was within this view,
* or a function which does nothing is focus is not in this view.
*/
saveFocusState: function() {
var me = this,
store = me.dataSource || me.store,
navModel = me.getNavigationModel(),
lastFocusedIndex = navModel.recordIndex,
lastFocusedRec = navModel.record,
containsFocus = me.el.contains(Ext.Element.getActiveElement());
// If there is a position to restore...
if (lastFocusedRec) {
// Check if we really have focus.
// Some NavigationModels record position with focus outside of the view.
// This happens in BoundLists when focus stays in the bound field.
// Blur the focused descendant, but do not trigger focusLeave.
if (containsFocus) {
me.el.dom.focus();
}
// The following function will attempt to refocus back to the same record
// if it is still there, or the same item index.
return function() {
// If we still have data, attempt to refocus at the same record,
// or the same item index..
if (store.getCount()) {
// Adjust expectations of where we are able to refocus according to
// what kind of destruction might have been wrought on this view's DOM
// during focus save.
lastFocusedIndex = Math.min(lastFocusedIndex, me.all.getCount() - 1);
navModel.setPosition(
store.contains(lastFocusedRec)
? lastFocusedRec
: lastFocusedIndex,
null, null, true, !containsFocus
);
}
};
}
return Ext.emptyFn;
},
/**
* Refreshes an individual node's data from the store.
* @param {Ext.data.Model/Number} record The record or index of the record to update.
* @since 2.3.0
*/
refreshNode: function(record) {
if (Ext.isNumber(record)) {
record = this.store.getAt(record);
}
this.onUpdate(this.dataSource, record);
},
updateIndexes: function(startIndex, endIndex) {
var me = this,
nodes = me.all.elements,
records = me.getViewRange(),
selModel = me.getSelectionModel(),
myId = me.id,
node, record, i;
startIndex = startIndex || 0;
endIndex = endIndex || ((endIndex === 0) ? 0 : (nodes.length - 1));
for (i = startIndex; i <= endIndex; i++) {
node = nodes[i];
record = records[i];
node.setAttribute('data-recordIndex', i);
node.setAttribute('data-recordId', record.internalId);
node.setAttribute('data-boundView', myId);
if (selModel.getLastSelected()) {
me[selModel.isSelected(record) ? 'onItemSelect' : 'onItemDeselect'](record);
}
}
},
/**
* Changes the data store bound to this view and refreshes it.
* @param {Ext.data.Store} store The store to bind to this view
* @param {Object} initial
* @since 3.4.0
*/
bindStore: function(store, initial) {
var me = this,
selModel = me.getSelectionModel(),
navModel = me.getNavigationModel();
// Can be already destroyed if we're called from doDestroy()
if (selModel && !selModel.destroyed) {
selModel.bindStore(store, initial);
selModel.bindComponent(store ? me : null);
}
me.mixins.storeholder.bindStore.apply(me, arguments);
// Navigation model must bind to new store
if (navModel && !navModel.destroyed) {
navModel.setStore(store);
}
// If we have already achieved our first layout, refresh immediately.
// If we bind to the Store before the first layout, then beforeLayout will
// call doFirstRefresh
if (store && me.componentLayoutCounter) {
// If not the initial bind, we enforce noDefer.
if (me.blockRefresh) {
me.refreshNeeded = true;
}
else {
me.doFirstRefresh(store, !initial);
}
}
},
/**
* @private
* Perform the first refresh of the View from a newly bound store.
*
* This is called when this View has been sized for the first time.
*/
doFirstRefresh: function(store, noDefer) {
var me = this;
// If we are configured to defer, and *NOT* called from the defer call below
if (me.deferInitialRefresh && !noDefer) {
Ext.defer(me.doFirstRefresh, 1, me, [store, true]);
}
else {
// 4.1.0: If we have a store, and the Store is *NOT* already loading
// (a refresh is on the way), then on first layout, refresh regardless of record count.
// Template may contain boilerplate HTML outside of record iteration loop.
// Also, emptyText is appended by the refresh method.
if (store && !me.deferRefreshForLoad(store)) {
me.refresh();
}
}
},
onUnbindStore: function(store) {
this.setMaskBind(null);
if (this.dataSource === store) {
this.dataSource = null;
}
},
onBindStore: function(store, oldStore) {
var me = this;
// A BufferedStore has to know to reload the most recent visible zone if its View
// is preserveScrollOnReload
if (me.store.isBufferedStore) {
me.store.preserveScrollOnReload = me.preserveScrollOnReload;
}
if (oldStore && oldStore.isBufferedStore) {
delete oldStore.preserveScrollOnReload;
}
me.setMaskBind(store);
// When unbinding the data store, the dataSource will be nulled out
// if it's the same as the data store. Restore it here.
if (!me.dataSource) {
me.dataSource = store;
}
},
setMaskBind: function(store) {
var mask = this.loadMask;
if (this.rendered && mask && store && !mask.bindStore) {
mask = this.createMask(mask);
}
if (mask && mask.bindStore) {
mask.bindStore(store);
}
},
getStoreListeners: function() {
var me = this;
return {
refresh: me.onDataRefresh,
replace: me.onReplace,
add: me.onAdd,
remove: me.onRemove,
update: me.onUpdate,
clear: me.onDataRefresh,
beginupdate: me.onBeginUpdate,
endupdate: me.onEndUpdate
};
},
onBeginUpdate: function() {
++this.updateSuspendCounter;
Ext.suspendLayouts();
},
onEndUpdate: function() {
var me = this;
if (me.updateSuspendCounter) {
--me.updateSuspendCounter;
}
Ext.resumeLayouts(true);
if (me.refreshSizePending) {
me.refreshSize(true);
me.refreshSizePending = false;
}
},
/**
* @private
* Calls this.refresh if this.blockRefresh is not true
* @since 3.4.0
*/
onDataRefresh: function(store) {
var me = this,
preserveScrollOnRefresh = me.preserveScrollOnRefresh;
// If this refresh event is fire from a store load, then use the
// preserveScrollOnReload setting to decide whether to preserve scroll position
if (store.loadCount >= (me.lastRefreshLoadCount || 0)) {
me.preserveScrollOnRefresh = me.preserveScrollOnReload;
}
me.refreshView();
me.preserveScrollOnRefresh = preserveScrollOnRefresh;
me.lastRefreshLoadCount = store.loadCount;
},
refreshView: function(startIndex) {
var me = this,
// If we have an ancestor in a non-boxready state (collapsed or about to collapse,
// or hidden), then block the refresh because the next layout will trigger the refresh
blocked = me.blockRefresh || !me.rendered ||
me.up('[collapsed],[isCollapsingOrExpanding=1],[hidden]'),
bufferedRenderer = me.bufferedRenderer;
// If we are blocked in any way due to either a setting, or hidden or collapsed,
// or animating ancestor, then the next refresh attempt at the upcoming layout
// must not defer.
if (blocked) {
me.refreshNeeded = true;
}
else {
if (bufferedRenderer) {
bufferedRenderer.refreshView(startIndex);
}
else {
me.refresh();
}
}
},
/**
* Returns the template node the passed child belongs to, or null if it doesn't belong to one.
* @param {HTMLElement} node
* @return {HTMLElement} The template node
*/
findItemByChild: function(node) {
return Ext.fly(node).findParent(this.getItemSelector(), this.getTargetEl());
},
/**
* Returns the template node by the Ext.event.Event or null if it is not found.
* @param {Ext.event.Event} e
*/
findTargetByEvent: function(e) {
return e.getTarget(this.getItemSelector(), this.getTargetEl());
},
/**
* Gets the currently selected nodes.
* @return {HTMLElement[]} An array of HTMLElements
* @since 2.3.0
*/
getSelectedNodes: function() {
var nodes = [],
records = this.getSelectionModel().getSelection(),
ln = records.length,
i = 0;
for (; i < ln; i++) {
nodes.push(this.getNode(records[i]));
}
return nodes;
},
/**
* Gets an array of the records from an array of nodes
* @param {HTMLElement[]} nodes The nodes to evaluate
* @return {Ext.data.Model[]} records The {@link Ext.data.Model} objects
* @since 2.3.0
*/
getRecords: function(nodes) {
var me = this,
records = [],
i;
for (i = 0; i < nodes.length; i++) {
records.push(me.getRecord(nodes[i]));
}
return records;
},
/**
* Gets a record from a node
* @param {Ext.dom.Element/HTMLElement} node The node to evaluate
*
* @return {Ext.data.Model} record The {@link Ext.data.Model} object
* @since 2.3.0
*/
getRecord: function(node) {
var dom = Ext.getDom(node),
id = dom.getAttribute('data-recordId');
return this.dataSource.getByInternalId(id);
},
/**
* Returns true if the passed node is selected, else false.
* @param {HTMLElement/Number/Ext.data.Model} node The node, node index or record to check
* @return {Boolean} True if selected, else false
* @since 2.3.0
*/
isSelected: function(node) {
var r = this.getRecord(node);
return this.getSelectionModel().isSelected(r);
},
/**
* Selects a record instance by record instance or index.
* @param {Ext.data.Model[]/Number} records An array of records or an index
* @param {Boolean} keepExisting
* @param {Boolean} suppressEvent Set to false to not fire a select event
* @deprecated 4.0 Use {@link Ext.selection.Model#select} instead.
* @since 2.3.0
*/
select: function(records, keepExisting, suppressEvent) {
this.getSelectionModel().select(records, keepExisting, suppressEvent);
},
/**
* Deselects a record instance by record instance or index.
* @param {Ext.data.Model[]/Number} records An array of records or an index
* @param {Boolean} suppressEvent Set to false to not fire a deselect event
* @since 2.3.0
*/
deselect: function(records, suppressEvent) {
this.getSelectionModel().deselect(records, suppressEvent);
},
/**
* Gets a template node.
* @param {HTMLElement/String/Number/Ext.data.Model} nodeInfo An HTMLElement template node,
* index of a template node, the id of a template node or the record associated with the node.
* @return {HTMLElement} The node or null if it wasn't found
* @since 2.3.0
*/
getNode: function(nodeInfo) {
var me = this,
out;
if (me.rendered && (nodeInfo || nodeInfo === 0)) {
if (Ext.isString(nodeInfo)) {
// Id
out = document.getElementById(nodeInfo);
}
else if (nodeInfo.isModel) {
// Record
out = me.getNodeByRecord(nodeInfo);
}
else if (Ext.isNumber(nodeInfo)) {
// Index
out = me.all.elements[nodeInfo];
}
else {
if (nodeInfo.target && nodeInfo.target.nodeType) {
// An event. Check that target is a node: <a target="_blank">
// must pass unchanged
nodeInfo = nodeInfo.target;
}
// already an HTMLElement
out = Ext.fly(nodeInfo).findParent(me.itemSelector, me.getTargetEl());
}
}
return out || null;
},
/**
* @private
*/
getNodeByRecord: function(record) {
var index = this.store.indexOf(record);
return this.all.elements[index] || null;
},
/**
* Gets a range nodes.
* @param {Number} start (optional) The index of the first node in the range
* @param {Number} end (optional) The index of the last node in the range
* @return {HTMLElement[]} An array of nodes
* @since 2.3.0
*/
getNodes: function(start, end) {
var all = this.all;
if (end !== undefined) {
end++;
}
return all.slice(start, end);
},
/**
* Finds the index of the passed node.
* @param {HTMLElement/String/Number/Ext.data.Model} node An HTMLElement template node,
* index of a template node, the id of a template node or a record associated with a node.
* @return {Number} The index of the node or -1
* @since 2.3.0
*/
indexOf: function(node) {
node = this.getNode(node);
if (!node && node !== 0) {
return -1;
}
if (node.getAttribute('data-recordIndex')) {
return Number(node.getAttribute('data-recordIndex'));
}
return this.all.indexOf(node);
},
doDestroy: function() {
var me = this,
count = me.updateSuspendCounter,
tabGuardEl = me.tabGuardEl;
if (me.viewScrollListeners) {
me.viewScrollListeners.destroy();
}
// Can be already destroyed in Table view
if (me.all && !me.all.destroyed) {
me.all.clear();
}
if (tabGuardEl) {
if (tabGuardEl.parentNode) {
tabGuardEl.parentNode.removeChild(tabGuardEl);
}
}
me.emptyEl = null;
me.setItemsDraggable(false);
me.bindStore(null);
if (me.selModelRelayer) {
me.selModelRelayer.destroy();
}
Ext.destroy(me.navigationModel, me.selectionModel, me.loadMask);
// We have been destroyed during a begin/end update, which means we're
// suspending layouts, must forcibly do it here.
while (count--) {
Ext.resumeLayouts(true);
}
me.callParent();
},
// invoked by the selection model to maintain visual UI cues
onItemSelect: function(record) {
var node = this.getNode(record);
if (node) {
Ext.fly(node).addCls(this.selectedItemCls);
node.setAttribute('aria-selected', 'true');
}
return node;
},
// invoked by the selection model to maintain visual UI cues
onItemDeselect: function(record) {
var node = this.getNode(record);
if (node) {
Ext.fly(node).removeCls(this.selectedItemCls);
node.setAttribute('aria-selected', 'false');
}
return node;
},
getItemSelector: function() {
return this.itemSelector;
},
/**
* Adds a CSS Class to a specific item.
* @param {HTMLElement/String/Number/Ext.data.Model} itemInfo An HTMLElement,
* index or instance of a model representing this item
* @param {String} cls
*/
addItemCls: function(itemInfo, cls) {
var item = this.getNode(itemInfo);
if (item) {
Ext.fly(item).addCls(cls);
}
},
/**
* Removes a CSS Class from a specific item.
* @param {HTMLElement/String/Number/Ext.data.Model} itemInfo An HTMLElement,
* index or instance of a model representing this item
* @param {String} cls
*/
removeItemCls: function(itemInfo, cls) {
var item = this.getNode(itemInfo);
if (item) {
Ext.fly(item).removeCls(cls);
}
},
setStore: function(newStore) {
// Here we want to override the config system setter because setting the store
// is a special case that the config system wasn't able to handle.
//
// For instance, because `bindStore` is the only API for both binding and unbinding a store,
// we couldn't unbind the old store using the config system because it would simply unbind
// the new store that the setter had just poked onto the instance:
//
// setStore -> intance.store = newStore
// updateStore -> view.unbind(null) (unbinds the newStore)
//
var me = this;
if (me.store !== newStore) {
if (me.isConfiguring) {
me.store = newStore;
}
else {
me.bindStore(newStore, /* initial */ false);
}
}
},
privates: {
deferRefreshForLoad: function(store) {
return store.isLoading();
},
toggleChildrenTabbability: function(enableTabbing) {
var focusEl = this.getTargetEl();
if (enableTabbing) {
focusEl.restoreTabbableState({ skipSelf: true });
}
else {
// Do NOT includeSaved
// Once an item has had tabbability saved, do not increment its save level
focusEl.saveTabbableState({
skipSelf: true,
includeSaved: false
});
}
},
/**
* @private
* Called by refresh to collect the view item nodes.
*/
collectNodes: function(targetEl) {
var all = this.all,
options = {
role: this.itemAriaRole
};
all.fill(Ext.fly(targetEl).query(this.getItemSelector()), all.startIndex || 0);
// Subclasses may set focusable to false (BoundList is not focusable)
if (this.focusable) {
options.tabindex = '-1';
}
all.set(options);
},
createMask: function(mask) {
var me = this,
maskStore = me.getStore(),
cfg;
if (maskStore && !maskStore.isEmptyStore && !maskStore.loadsSynchronously()) {
cfg = {
target: me,
msg: me.loadingText,
useMsg: me.loadingUseMsg,
// The store gets bound in initComponent, so while
// rendering let's push on the store
store: maskStore
};
// Do not overwrite default msgCls if we do not have a loadingCls
if (me.loadingCls) {
cfg.msgCls = me.loadingCls;
}
// either a config object
if (Ext.isObject(mask)) {
cfg = Ext.apply(cfg, mask);
}
// Attach the LoadMask to a *Component* so that it can be sensitive to resizing
// during long loads. If this DataView is floating, then mask this DataView.
// Otherwise, mask its owning Container (or this, if there *is* no owning Container)
// LoadMask captures the element upon render.
me.loadMask = new Ext.LoadMask(cfg);
me.loadMask.on({
scope: me,
beforeshow: me.onMaskBeforeShow,
hide: me.onMaskHide
});
}
return me.loadMask;
},
/**
* @private
* This method returns the inner node containing element. This is useful
* for the bufferedRenderer or for when the view contains extra elements
* and we need to point the exact element that will contain the view nodes.
*/
getNodeContainer: function() {
var target = this.getTargetEl(),
selector = this.nodeContainerSelector;
return selector ? target.down(selector, true) : target;
},
getOverflowEl: function() {
// The desired behavior here is just to inherit from the superclass. However,
// the superclass method calls this.getTargetEl, which sends us into an infinte
// loop because our getTargetEl may call getScrollerEl(), which calls getOverflowEl()
return Ext.Component.prototype.getTargetEl.call(this);
}
}
}, function() {
// all of this information is available directly
// from the SelectionModel itself, the only added methods
// to DataView regarding selection will perform some transformation/lookup
// between HTMLElement/Nodes to records and vice versa.
Ext.deprecate('extjs', '4.0', function() {
Ext.view.AbstractView.override({
/**
* @cfg {Boolean} [multiSelect=false]
* True to allow selection of more than one item at a time, false to allow selection
* of only a single item at a time or no selection at all, depending on the value of
* {@link #singleSelect}.
* @deprecated 4.0 Use {@link Ext.selection.Model#cfg-mode} 'MULTI' instead.
* @since 2.3.0
*/
/**
* @cfg {Boolean} [singleSelect]
* Allows selection of exactly one item at a time. As this is the default selection mode
* anyway, this config is completely ignored.
* @removed 4.0 Use {@link Ext.selection.Model#cfg-mode} 'SINGLE' instead.
* @since 2.3.0
*/
/**
* @cfg {Boolean} [simpleSelect=false]
* True to enable multiselection by clicking on multiple items without requiring
* the user to hold Shift or Ctrl, false to force the user to hold Ctrl or Shift
* to select more than on item.
* @deprecated 4.0 Use {@link Ext.selection.Model#cfg-mode} 'SIMPLE' instead.
* @since 2.3.0
*/
/**
* Gets the number of selected nodes.
* @return {Number} The node count
* @deprecated 4.0 Use {@link Ext.selection.Model#getCount} instead.
* @since 2.3.0
*/
getSelectionCount: function() {
if (Ext.global.console) {
Ext.global.console.warn(
"DataView: getSelectionCount will be removed, please interact " +
"with the Ext.selection.DataViewModel"
);
}
return this.selModel.getSelection().length;
},
/**
* Gets an array of the selected records
* @return {Ext.data.Model[]} An array of {@link Ext.data.Model} objects
* @deprecated 4.0 Use {@link Ext.selection.Model#getSelection} instead.
* @since 2.3.0
*/
getSelectedRecords: function() {
if (Ext.global.console) {
Ext.global.console.warn(
"DataView: getSelectedRecords will be removed, please interact " +
"with the Ext.selection.DataViewModel"
);
}
return this.selModel.getSelection();
},
// documented above
// @ignore
select: function(records, keepExisting, supressEvents) {
if (Ext.global.console) {
Ext.global.console.warn(
"DataView: select will be removed, please access select through " +
"a DataView's SelectionModel, ie: view.getSelectionModel().select()"
);
}
// eslint-disable-next-line vars-on-top
var sm = this.getSelectionModel();
return sm.select.apply(sm, arguments);
},
/**
* Deselects all selected records.
* @deprecated 4.0 Use {@link Ext.selection.Model#deselectAll} instead.
* @since 2.3.0
*/
clearSelections: function() {
if (Ext.global.console) {
Ext.global.console.warn(
"DataView: clearSelections will be removed, please access " +
"deselectAll through DataView's SelectionModel, ie: " +
"view.getSelectionModel().deselectAll()"
);
}
// eslint-disable-next-line vars-on-top
var sm = this.getSelectionModel();
return sm.deselectAll();
}
});
});
});