/** * @class Ext.dataview.DataView * @extend Ext.dataview.Abstract * @alternateClassName Ext.DataView * @xtype dataview * * DataView makes it easy to create lots of components dynamically, usually based off a {@link Ext.data.Store Store}. * It's great for rendering lots of data from your server backend or any other data source and is what powers * components like {@link Ext.List}. * * Use DataView whenever you want to show sets of the same component many times, for examples in apps like these: * * - List of messages in an email app * - Showing latest news/tweets * - Tiled set of albums in an HTML5 music player * * # Creating a Simple DataView * * At its simplest, a DataView is just a Store full of data and a simple template that we * use to render each item: * * @example packages=[reactor] * import React, { Component } from 'react' * import { DataView } from '@extjs/ext-react'; * * export default class MyExample extends Component { * * store = new Ext.data.Store({ * data: [ * {name: 'Peter', age: 26}, * {name: 'Ray', age: 21}, * {name: 'Egon', age: 29}, * {name: 'Winston', age: 24}, * ] * }); * * render() { * return ( * <DataView * itemTpl="{name} is {age} years old" * store={this.store} * /> * ) * } * } * * * Here we just defined everything inline so it's all local with nothing being loaded from a server. For each of the * data items defined in our Store, DataView will render a {@link Ext.Component Component} and pass in the name and age * data. The component will use the tpl we provided above, rendering the data in the curly bracket placeholders we * provided. * * Because DataView is integrated with Store, any changes to the Store are immediately reflected on the screen. For * example, if we add a new record to the Store it will be rendered into our DataView: * * this.store().add({ * name: 'Gozer', * age: 567 * }); * * We didn't have to manually update the DataView, it's just automatically updated. The same happens if we modify one * of the existing records in the Store: * * this.store.getAt(0).set('age', 42); * * This will get the first record in the Store (Peter), change the age to 42 and automatically update what's on the * screen. * * this.store.add({ * name: 'Gozer', * age: 21 * }); * * this.store.getAt(0).set('age', 42); * * # Loading data from a server * * We often want to load data from our server or some other web service so that we don't have to hard code it all * locally. Let's say we want to load some horror movies from Rotten Tomatoes into a DataView, and for each one * render the cover image and title. To do this all we have to do is grab an api key from * rotten tomatoes (http://developer.rottentomatoes.com/) and modify the {@link #store} * and {@link #itemTpl} a little: * * @example packages=[reactor] * import React, { Component } from 'react' * import { DataView } from '@extjs/ext-react'; * * export default class MyExample extends Component { * * store = new Ext.data.Store({ * autoLoad: true, * proxy: { * type: 'jsonp', * url: 'https://itunes.apple.com/search?term=Pink+Floyd&entity=album', * reader: { * type: 'json', * rootProperty: 'results' * } * } * }); * * render() { * return ( * <DataView * itemTpl="<h2>{collectionName}</h2><p><img src='{artworkUrl100}' /></p>" * store={this.store} * /> * ) * } * } * * The Store no longer has hard coded data, instead we've provided a {@link Ext.data.proxy.Proxy Proxy}, which fetches * the data for us. In this case we used a JSON-P proxy. */ /** * @method prepareData * 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} index 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'}`)) */ /** * @method onNavigate * This method is called by the {@link #cfg!navigationModel} when navigation events are * detected within this DataView. * * It may be overridden to control the linkage of navigation events such as * taps, clicks or keystrokes detected by the {@link #cfg!navigationModel} to * the {@link #cfg!selectionModel}. * * `callParent` if you wish selection to proceed from the passed event. * @param {Ext.event.Event} e The UI event which caused the navigation. */ /** * @method refresh * Refreshes the view by reloading the data from the store and re-rendering * the template. */ /** * @method getItemAt * Returns an item at the specified index. * @param {Number} index Index of the item. * @return {HTMLElement/Ext.dataview.component.DataItem} item Item at the specified index. */ /** * @method getItemIndex * Returns an index for the specified item. * @param {Ext.dom.Element/HTMLElement/Ext.dataview.component.DataItem} item The item to locate. * @return {Number} Index for the specified item. */ /** * @method getViewItems * Returns an array of the current items in the DataView. Depends on the {@link #cfg-useComponents} * configuration. * @return {HTMLElement[]/Ext.dataview.component.DataItem[]} The items. */ /** * @property {Boolean} [isDataView=true] * `true` in this class to identify an object as an instantiated DataView, or subclass thereof. */ /** * @event itemtouchstart * Fires whenever an item is touched * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item touched * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem touched * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event itemtouchmove * Fires whenever an item is moved * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item moved * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem moved * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event itemtouchend * Fires whenever an item is touched * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item touched * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem touched * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event itemtouchcancel * Fires whenever an item touch is cancelled * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item touched * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem touched * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event itemtap * Fires whenever an item is tapped * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item tapped * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem tapped * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event itemlongpress * Fires whenever an item's longpress event fires * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item touched * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem touched * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event itemtaphold * Fires whenever an item's taphold event fires * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item touched * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem touched * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event itemsingletap * Fires whenever an item is singletapped * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item singletapped * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem singletapped * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event itemdoubletap * Fires whenever an item is doubletapped * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item doubletapped * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem doubletapped * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event itemswipe * Fires whenever an item is swiped * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item swiped * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem swiped * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event itemmouseenter * Fires whenever the mouse pointer moves over an item * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event itemmouseleave * Fires whenever the mouse pointer leaves an item * @param {Ext.dataview.DataView} this * @param {Number} index The index of the item * @param {Ext.Element/Ext.dataview.component.DataItem} target The element or DataItem * @param {Ext.data.Model} record The record associated to the item * @param {Ext.event.Event} e The event object */ /** * @event select * Fires whenever an item is selected * @param {Ext.dataview.DataView} this * @param {Ext.data.Model[]} records The records being selected */ /** * @event deselect * Fires whenever an item is deselected * @param {Ext.dataview.DataView} this * @param {Ext.data.Model[]} records The records being deselected * @param {Boolean} supressed Flag to suppress the event */ /** * @event refresh * @preventable * Fires whenever the DataView is refreshed * @param {Ext.dataview.DataView} this */ /** * @hide * @event add */ /** * @hide * @event remove */ /** * @hide * @event move */