/** * @private */Ext.define('Ext.dataview.element.Container', { extend: 'Ext.Component', /** * @event itemtouchstart * Fires whenever an item is touched * @param {Ext.dataview.element.Container} this * @param {Ext.dom.Element} item The item touched * @param {Number} index The index of the item touched * @param {Ext.event.Event} e The event object */ /** * @event itemtouchmove * Fires whenever an item is moved * @param {Ext.dataview.element.Container} this * @param {Ext.dom.Element} item The item moved * @param {Number} index The index of the item moved * @param {Ext.event.Event} e The event object */ /** * @event itemtouchend * Fires whenever an item is touched * @param {Ext.dataview.element.Container} this * @param {Ext.dom.Element} item The item touched * @param {Number} index The index of the item touched * @param {Ext.event.Event} e The event object */ /** * @event itemtap * Fires whenever an item is tapped * @param {Ext.dataview.element.Container} this * @param {Ext.dom.Element} item The item tapped * @param {Number} index The index of the item tapped * @param {Ext.event.Event} e The event object */ /** * @event itemtaphold * Fires whenever an item is tapped * @param {Ext.dataview.element.Container} this * @param {Ext.dom.Element} item The item tapped * @param {Number} index The index of the item tapped * @param {Ext.event.Event} e The event object */ /** * @event itemsingletap * Fires whenever an item is singletapped * @param {Ext.dataview.element.Container} this * @param {Ext.dom.Element} item The item singletapped * @param {Number} index The index of the item singletapped * @param {Ext.event.Event} e The event object */ /** * @event itemdoubletap * Fires whenever an item is doubletapped * @param {Ext.dataview.element.Container} this * @param {Ext.dom.Element} item The item doubletapped * @param {Number} index The index of the item doubletapped * @param {Ext.event.Event} e The event object */ /** * @event itemswipe * Fires whenever an item is swiped * @param {Ext.dataview.element.Container} this * @param {Ext.dom.Element} item The item swiped * @param {Number} index The index of the item swiped * @param {Ext.event.Event} e The event object */ /** * @event mouseover * Fires whenever the a mouseover event is received on an item * @param {Ext.dataview.element.Container} this * @param {Ext.dom.Element} item The item * @param {Number} index The index of the item * @param {Ext.event.Event} e The event object */ /** * @event mouseout * Fires whenever a mouseout event is received on an item * @param {Ext.dataview.element.Container} this * @param {Ext.dom.Element} item The item * @param {Number} index The index of the item * @param {Ext.event.Event} e The event object */ classCls: Ext.baseCSSPrefix + 'dataview-container', itemSelector: '.' + Ext.baseCSSPrefix + 'dataview-container > div', doInitialize: function() { this.element.on({ touchstart: 'onItemTouchStart', touchend: 'onItemTouchEnd', tap: 'onItemTap', taphold: 'onItemTapHold', touchmove: 'onItemTouchMove', singletap: 'onItemSingleTap', doubletap: 'onItemDoubleTap', swipe: 'onItemSwipe', mouseover: 'onItemMouseOver', mouseout: 'onItemMouseOut', delegate: '> div', scope: this }); }, /** * @private */ initialize: function() { this.callParent(); this.doInitialize(); }, onItemTouchStart: function(e) { var me = this, target = e.currentTarget, index = me.getViewItems().indexOf(target); Ext.get(target).on({ touchmove: 'onItemTouchMove', scope : me, single: true }); me.fireEvent('itemtouchstart', me, Ext.get(target), index, e); }, onItemTouchEnd: function(e) { var me = this, target = e.currentTarget, index = me.getViewItems().indexOf(target); Ext.get(target).un({ touchmove: 'onItemTouchMove', scope : me }); me.fireEvent('itemtouchend', me, Ext.get(target), index, e); }, onItemTouchMove: function(e) { var me = this, target = e.currentTarget, index = me.getViewItems().indexOf(target); me.fireEvent('itemtouchmove', me, Ext.get(target), index, e); }, onItemTap: function(e) { var me = this, target = e.currentTarget, index = me.getViewItems().indexOf(target); me.fireEvent('itemtap', me, Ext.get(target), index, e); }, onItemTapHold: function(e) { var me = this, target = e.currentTarget, index = me.getViewItems().indexOf(target); me.fireEvent('itemtaphold', me, Ext.get(target), index, e); }, onItemDoubleTap: function(e) { var me = this, target = e.currentTarget, index = me.getViewItems().indexOf(target); me.fireEvent('itemdoubletap', me, Ext.get(target), index, e); }, onItemSingleTap: function(e) { var me = this, target = e.currentTarget, index = me.getViewItems().indexOf(target); me.fireEvent('itemsingletap', me, Ext.get(target), index, e); }, onItemSwipe: function(e) { var me = this, target = e.currentTarget, index = me.getViewItems().indexOf(target); me.fireEvent('itemswipe', me, Ext.get(target), index, e); }, onItemMouseOver: function(e) { var me = this, target = e.currentTarget, index = me.getViewItems().indexOf(target); me.fireEvent('itemmouseover', me, Ext.get(target), index, e); }, onItemMouseOut: function(e) { var me = this, target = e.currentTarget, index = me.getViewItems().indexOf(target); me.fireEvent('itemmouseout', me, Ext.get(target), index, e); }, updateListItem: function(record, item) { var me = this, dataview = me.dataview, store = dataview.getStore(), index = store.indexOf(record), data = dataview.prepareData(record.getData(true), index, record); item.innerHTML = this.renderItemTpl(index, data, store); }, addListItem: function(index, record) { var me = this, dataview = me.dataview, store = dataview.getStore(), data = dataview.prepareData(record.getData(true), index, record), element = me.element, childNodes = element.dom.childNodes, ln = childNodes.length, wrapElement; wrapElement = Ext.Element.create(this.getItemElementConfig(index, data, store)); if (!ln || index == ln) { wrapElement.appendTo(element); } else { wrapElement.insertBefore(childNodes[index]); } }, getItemElementConfig: function (index, data, store) { var dataview = this.dataview, itemCls = dataview.getItemCls(), cls = dataview.getBaseCls() + '-item'; if (itemCls) { cls += ' ' + itemCls; } return { cls: cls, html: this.renderItemTpl(index, data, store) }; }, renderItemTpl: function (index, data, store) { var dataview = this.dataview, itemTpl = dataview.getItemTpl(), parent; store = store || dataview.getStore(); parent = store.getData().items; data.xcount = typeof data.xcount === 'number' ? data.xcount : store.getCount(); data.xindex = typeof data.xindex === 'number' ? data.xindex : index; return itemTpl.apply(data, parent, index+1, parent.length); }, doRemoveItemCls: function(cls) { var elements = this.getViewItems(), ln = elements.length, i = 0; for (; i < ln; i++) { Ext.fly(elements[i]).removeCls(cls); } }, doAddItemCls: function(cls) { var elements = this.getViewItems(), ln = elements.length, i = 0; for (; i < ln; i++) { Ext.fly(elements[i]).addCls(cls); } }, // Remove moveItemsToCache: function(from, to) { var me = this, items = me.getViewItems(), i = to - from, item; for (; i >= 0; i--) { item = items[from + i]; Ext.get(item).destroy(); } if (me.getViewItems().length == 0) { this.dataview.showEmptyText(); } }, // Add moveItemsFromCache: function(records) { var me = this, dataview = me.dataview, store = dataview.getStore(), ln = records.length, i, record; if (ln) { dataview.hideEmptyText(); } for (i = 0; i < ln; i++) { records[i]._tmpIndex = store.indexOf(records[i]); } Ext.Array.sort(records, function(record1, record2) { return record1._tmpIndex > record2._tmpIndex ? 1 : -1; }); for (i = 0; i < ln; i++) { record = records[i]; me.addListItem(record._tmpIndex, record); delete record._tmpIndex; } }, // Transform ChildNodes into a proper Array so we can do indexOf... getViewItems: function() { return Array.prototype.slice.call(this.element.dom.childNodes); }, updateAtNewIndex: function(oldIndex, newIndex, record) { this.moveItemsToCache(oldIndex, oldIndex); this.moveItemsFromCache([record]); }, doDestroy: function() { var elements = this.getViewItems(), ln = elements.length, i = 0; for (; i < ln; i++) { Ext.get(elements[i]).destroy(); } this.callParent(); }});