projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | /**\r |
| 2 | * @private\r | |
| 3 | */\r | |
| 4 | Ext.define('Ext.dataview.element.Container', {\r | |
| 5 | extend: 'Ext.Component',\r | |
| 6 | \r | |
| 7 | /**\r | |
| 8 | * @event itemtouchstart\r | |
| 9 | * Fires whenever an item is touched\r | |
| 10 | * @param {Ext.dataview.element.Container} this\r | |
| 11 | * @param {Ext.dom.Element} item The item touched\r | |
| 12 | * @param {Number} index The index of the item touched\r | |
| 13 | * @param {Ext.event.Event} e The event object\r | |
| 14 | */\r | |
| 15 | \r | |
| 16 | /**\r | |
| 17 | * @event itemtouchmove\r | |
| 18 | * Fires whenever an item is moved\r | |
| 19 | * @param {Ext.dataview.element.Container} this\r | |
| 20 | * @param {Ext.dom.Element} item The item moved\r | |
| 21 | * @param {Number} index The index of the item moved\r | |
| 22 | * @param {Ext.event.Event} e The event object\r | |
| 23 | */\r | |
| 24 | \r | |
| 25 | /**\r | |
| 26 | * @event itemtouchend\r | |
| 27 | * Fires whenever an item is touched\r | |
| 28 | * @param {Ext.dataview.element.Container} this\r | |
| 29 | * @param {Ext.dom.Element} item The item touched\r | |
| 30 | * @param {Number} index The index of the item touched\r | |
| 31 | * @param {Ext.event.Event} e The event object\r | |
| 32 | */\r | |
| 33 | \r | |
| 34 | /**\r | |
| 35 | * @event itemtap\r | |
| 36 | * Fires whenever an item is tapped\r | |
| 37 | * @param {Ext.dataview.element.Container} this\r | |
| 38 | * @param {Ext.dom.Element} item The item tapped\r | |
| 39 | * @param {Number} index The index of the item tapped\r | |
| 40 | * @param {Ext.event.Event} e The event object\r | |
| 41 | */\r | |
| 42 | \r | |
| 43 | /**\r | |
| 44 | * @event itemtaphold\r | |
| 45 | * Fires whenever an item is tapped\r | |
| 46 | * @param {Ext.dataview.element.Container} this\r | |
| 47 | * @param {Ext.dom.Element} item The item tapped\r | |
| 48 | * @param {Number} index The index of the item tapped\r | |
| 49 | * @param {Ext.event.Event} e The event object\r | |
| 50 | */\r | |
| 51 | \r | |
| 52 | /**\r | |
| 53 | * @event itemsingletap\r | |
| 54 | * Fires whenever an item is singletapped\r | |
| 55 | * @param {Ext.dataview.element.Container} this\r | |
| 56 | * @param {Ext.dom.Element} item The item singletapped\r | |
| 57 | * @param {Number} index The index of the item singletapped\r | |
| 58 | * @param {Ext.event.Event} e The event object\r | |
| 59 | */\r | |
| 60 | \r | |
| 61 | /**\r | |
| 62 | * @event itemdoubletap\r | |
| 63 | * Fires whenever an item is doubletapped\r | |
| 64 | * @param {Ext.dataview.element.Container} this\r | |
| 65 | * @param {Ext.dom.Element} item The item doubletapped\r | |
| 66 | * @param {Number} index The index of the item doubletapped\r | |
| 67 | * @param {Ext.event.Event} e The event object\r | |
| 68 | */\r | |
| 69 | \r | |
| 70 | /**\r | |
| 71 | * @event itemswipe\r | |
| 72 | * Fires whenever an item is swiped\r | |
| 73 | * @param {Ext.dataview.element.Container} this\r | |
| 74 | * @param {Ext.dom.Element} item The item swiped\r | |
| 75 | * @param {Number} index The index of the item swiped\r | |
| 76 | * @param {Ext.event.Event} e The event object\r | |
| 77 | */\r | |
| 78 | \r | |
| 79 | doInitialize: function() {\r | |
| 80 | this.element.on({\r | |
| 81 | touchstart: 'onItemTouchStart',\r | |
| 82 | touchend: 'onItemTouchEnd',\r | |
| 83 | tap: 'onItemTap',\r | |
| 84 | taphold: 'onItemTapHold',\r | |
| 85 | touchmove: 'onItemTouchMove',\r | |
| 86 | singletap: 'onItemSingleTap',\r | |
| 87 | doubletap: 'onItemDoubleTap',\r | |
| 88 | swipe: 'onItemSwipe',\r | |
| 89 | delegate: '> div',\r | |
| 90 | scope: this\r | |
| 91 | });\r | |
| 92 | },\r | |
| 93 | \r | |
| 94 | /**\r | |
| 95 | * @private\r | |
| 96 | */\r | |
| 97 | initialize: function() {\r | |
| 98 | this.callParent();\r | |
| 99 | this.doInitialize();\r | |
| 100 | },\r | |
| 101 | \r | |
| 102 | updateBaseCls: function(newBaseCls, oldBaseCls) {\r | |
| 103 | var me = this;\r | |
| 104 | \r | |
| 105 | me.callParent([newBaseCls + '-container', oldBaseCls]);\r | |
| 106 | },\r | |
| 107 | \r | |
| 108 | onItemTouchStart: function(e) {\r | |
| 109 | var me = this,\r | |
| 110 | target = e.currentTarget,\r | |
| 111 | index = me.getViewItems().indexOf(target);\r | |
| 112 | \r | |
| 113 | Ext.get(target).on({\r | |
| 114 | touchmove: 'onItemTouchMove',\r | |
| 115 | scope : me,\r | |
| 116 | single: true\r | |
| 117 | });\r | |
| 118 | \r | |
| 119 | me.fireEvent('itemtouchstart', me, Ext.get(target), index, e);\r | |
| 120 | },\r | |
| 121 | \r | |
| 122 | onItemTouchEnd: function(e) {\r | |
| 123 | var me = this,\r | |
| 124 | target = e.currentTarget,\r | |
| 125 | index = me.getViewItems().indexOf(target);\r | |
| 126 | \r | |
| 127 | Ext.get(target).un({\r | |
| 128 | touchmove: 'onItemTouchMove',\r | |
| 129 | scope : me\r | |
| 130 | });\r | |
| 131 | \r | |
| 132 | me.fireEvent('itemtouchend', me, Ext.get(target), index, e);\r | |
| 133 | },\r | |
| 134 | \r | |
| 135 | onItemTouchMove: function(e) {\r | |
| 136 | var me = this,\r | |
| 137 | target = e.currentTarget,\r | |
| 138 | index = me.getViewItems().indexOf(target);\r | |
| 139 | \r | |
| 140 | me.fireEvent('itemtouchmove', me, Ext.get(target), index, e);\r | |
| 141 | },\r | |
| 142 | \r | |
| 143 | onItemTap: function(e) {\r | |
| 144 | var me = this,\r | |
| 145 | target = e.currentTarget,\r | |
| 146 | index = me.getViewItems().indexOf(target);\r | |
| 147 | \r | |
| 148 | me.fireEvent('itemtap', me, Ext.get(target), index, e);\r | |
| 149 | },\r | |
| 150 | \r | |
| 151 | onItemTapHold: function(e) {\r | |
| 152 | var me = this,\r | |
| 153 | target = e.currentTarget,\r | |
| 154 | index = me.getViewItems().indexOf(target);\r | |
| 155 | \r | |
| 156 | me.fireEvent('itemtaphold', me, Ext.get(target), index, e);\r | |
| 157 | },\r | |
| 158 | \r | |
| 159 | onItemDoubleTap: function(e) {\r | |
| 160 | var me = this,\r | |
| 161 | target = e.currentTarget,\r | |
| 162 | index = me.getViewItems().indexOf(target);\r | |
| 163 | \r | |
| 164 | me.fireEvent('itemdoubletap', me, Ext.get(target), index, e);\r | |
| 165 | },\r | |
| 166 | \r | |
| 167 | onItemSingleTap: function(e) {\r | |
| 168 | var me = this,\r | |
| 169 | target = e.currentTarget,\r | |
| 170 | index = me.getViewItems().indexOf(target);\r | |
| 171 | \r | |
| 172 | me.fireEvent('itemsingletap', me, Ext.get(target), index, e);\r | |
| 173 | },\r | |
| 174 | \r | |
| 175 | onItemSwipe: function(e) {\r | |
| 176 | var me = this,\r | |
| 177 | target = e.currentTarget,\r | |
| 178 | index = me.getViewItems().indexOf(target);\r | |
| 179 | \r | |
| 180 | me.fireEvent('itemswipe', me, Ext.get(target), index, e);\r | |
| 181 | },\r | |
| 182 | \r | |
| 183 | updateListItem: function(record, item) {\r | |
| 184 | var me = this,\r | |
| 185 | dataview = me.dataview,\r | |
| 186 | store = dataview.getStore(),\r | |
| 187 | index = store.indexOf(record),\r | |
| 188 | data = dataview.prepareData(record.getData(true), index, record);\r | |
| 189 | \r | |
| 190 | item.innerHTML = this.renderItemTpl(index, data, store);\r | |
| 191 | },\r | |
| 192 | \r | |
| 193 | addListItem: function(index, record) {\r | |
| 194 | var me = this,\r | |
| 195 | dataview = me.dataview,\r | |
| 196 | store = dataview.getStore(),\r | |
| 197 | data = dataview.prepareData(record.getData(true), index, record),\r | |
| 198 | element = me.element,\r | |
| 199 | childNodes = element.dom.childNodes,\r | |
| 200 | ln = childNodes.length,\r | |
| 201 | wrapElement;\r | |
| 202 | \r | |
| 203 | wrapElement = Ext.Element.create(this.getItemElementConfig(index, data, store));\r | |
| 204 | \r | |
| 205 | if (!ln || index == ln) {\r | |
| 206 | wrapElement.appendTo(element);\r | |
| 207 | } else {\r | |
| 208 | wrapElement.insertBefore(childNodes[index]);\r | |
| 209 | }\r | |
| 210 | },\r | |
| 211 | \r | |
| 212 | getItemElementConfig: function (index, data, store) {\r | |
| 213 | var dataview = this.dataview,\r | |
| 214 | itemCls = dataview.getItemCls(),\r | |
| 215 | cls = dataview.getBaseCls() + '-item';\r | |
| 216 | \r | |
| 217 | if (itemCls) {\r | |
| 218 | cls += ' ' + itemCls;\r | |
| 219 | }\r | |
| 220 | \r | |
| 221 | return {\r | |
| 222 | cls: cls,\r | |
| 223 | html: this.renderItemTpl(index, data, store)\r | |
| 224 | };\r | |
| 225 | },\r | |
| 226 | \r | |
| 227 | renderItemTpl: function (index, data, store) {\r | |
| 228 | var dataview = this.dataview,\r | |
| 229 | itemTpl = dataview.getItemTpl(),\r | |
| 230 | parent;\r | |
| 231 | \r | |
| 232 | store = store || dataview.getStore();\r | |
| 233 | parent = store.getData().items;\r | |
| 234 | \r | |
| 235 | data.xcount = typeof data.xcount === 'number' ? data.xcount : store.getCount();\r | |
| 236 | data.xindex = typeof data.xindex === 'number' ? data.xindex : index;\r | |
| 237 | \r | |
| 238 | return itemTpl.apply(data, parent, index+1, parent.length);\r | |
| 239 | },\r | |
| 240 | \r | |
| 241 | doRemoveItemCls: function(cls) {\r | |
| 242 | var elements = this.getViewItems(),\r | |
| 243 | ln = elements.length,\r | |
| 244 | i = 0;\r | |
| 245 | \r | |
| 246 | for (; i < ln; i++) {\r | |
| 247 | Ext.fly(elements[i]).removeCls(cls);\r | |
| 248 | }\r | |
| 249 | },\r | |
| 250 | \r | |
| 251 | doAddItemCls: function(cls) {\r | |
| 252 | var elements = this.getViewItems(),\r | |
| 253 | ln = elements.length,\r | |
| 254 | i = 0;\r | |
| 255 | \r | |
| 256 | for (; i < ln; i++) {\r | |
| 257 | Ext.fly(elements[i]).addCls(cls);\r | |
| 258 | }\r | |
| 259 | },\r | |
| 260 | \r | |
| 261 | // Remove\r | |
| 262 | moveItemsToCache: function(from, to) {\r | |
| 263 | var me = this,\r | |
| 264 | items = me.getViewItems(),\r | |
| 265 | i = to - from,\r | |
| 266 | item;\r | |
| 267 | \r | |
| 268 | for (; i >= 0; i--) {\r | |
| 269 | item = items[from + i];\r | |
| 270 | Ext.get(item).destroy();\r | |
| 271 | }\r | |
| 272 | if (me.getViewItems().length == 0) {\r | |
| 273 | this.dataview.showEmptyText();\r | |
| 274 | }\r | |
| 275 | },\r | |
| 276 | \r | |
| 277 | // Add\r | |
| 278 | moveItemsFromCache: function(records) {\r | |
| 279 | var me = this,\r | |
| 280 | dataview = me.dataview,\r | |
| 281 | store = dataview.getStore(),\r | |
| 282 | ln = records.length,\r | |
| 283 | i, record;\r | |
| 284 | \r | |
| 285 | if (ln) {\r | |
| 286 | dataview.hideEmptyText();\r | |
| 287 | }\r | |
| 288 | \r | |
| 289 | for (i = 0; i < ln; i++) {\r | |
| 290 | records[i]._tmpIndex = store.indexOf(records[i]);\r | |
| 291 | }\r | |
| 292 | \r | |
| 293 | Ext.Array.sort(records, function(record1, record2) {\r | |
| 294 | return record1._tmpIndex > record2._tmpIndex ? 1 : -1;\r | |
| 295 | });\r | |
| 296 | \r | |
| 297 | for (i = 0; i < ln; i++) {\r | |
| 298 | record = records[i];\r | |
| 299 | me.addListItem(record._tmpIndex, record);\r | |
| 300 | delete record._tmpIndex;\r | |
| 301 | }\r | |
| 302 | },\r | |
| 303 | \r | |
| 304 | // Transform ChildNodes into a proper Array so we can do indexOf...\r | |
| 305 | getViewItems: function() {\r | |
| 306 | return Array.prototype.slice.call(this.element.dom.childNodes);\r | |
| 307 | },\r | |
| 308 | \r | |
| 309 | updateAtNewIndex: function(oldIndex, newIndex, record) {\r | |
| 310 | this.moveItemsToCache(oldIndex, oldIndex);\r | |
| 311 | this.moveItemsFromCache([record]);\r | |
| 312 | },\r | |
| 313 | \r | |
| 314 | destroy: function() {\r | |
| 315 | var elements = this.getViewItems(),\r | |
| 316 | ln = elements.length,\r | |
| 317 | i = 0;\r | |
| 318 | \r | |
| 319 | for (; i < ln; i++) {\r | |
| 320 | Ext.get(elements[i]).destroy();\r | |
| 321 | }\r | |
| 322 | this.callParent();\r | |
| 323 | }\r | |
| 324 | });\r |