Clear Up
SharpKit Reference

DataView Class

Namespace: Ext.dataview

Base Types




Name Description
addListItem(object, object)
doCreateItems(object, object)
doItemDeSelect(object, object)
doItemSelect(object, object)
getItemElementConfig(object, object)
moveItemsFromCache(object, object)
moveItemsToCache(object, object)
onItemDeselect(object, object)
onItemSelect(object, object)
onStoreAdd(object, object, object)
onStoreRemove(object, object, object)
onStoreUpdate(object, object)
refresh() Refreshes the view by reloading the data from the store and re-rendering the template.
updateListItem(object, object)
updateStore(object, object)


Name Description
extend DataView makes it easy to create lots of components dynamically, usually based off a {@link 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 miniphone preview var touchTeam = Ext.create('Ext.DataView', { fullscreen: true, store: { fields: ['name', 'age'], data: [ {name: 'Jamie', age: 100}, {name: 'Rob', age: 21}, {name: 'Tommy', age: 24}, {name: 'Jacky', age: 24}, {name: 'Ed', age: 26} ] }, * itemTpl: '
{name} is {age} years old
' }); * Here we just defined everything inline so it's all local with nothing being loaded from a server. For each of the 5 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: * touchTeam.getStore().add({ name: 'Abe Elias', age: 33 }); * 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: * touchTeam.getStore().getAt(0).set('age', 42); * This will get the first record in the Store (Jamie), change the age to 42 and automatically update what's on the screen. @example miniphone var touchTeam = Ext.create('Ext.DataView', { fullscreen: true, store: { fields: ['name', 'age'], data: [ {name: 'Jamie', age: 100}, {name: 'Rob', age: 21}, {name: 'Tommy', age: 24}, {name: 'Jacky', age: 24}, {name: 'Ed', age: 26} ] }, * itemTpl: '
{name} is {age} years old
' }); touchTeam.getStore().add({ name: 'Abe Elias', age: 33 }); touchTeam.getStore.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 all of the latest tweets about Sencha Touch into a DataView, and for each one render the user's profile picture, user name and tweet message. To do this all we have to do is modify the {@link #store} and {@link #itemTpl} a little: * @example portrait Ext.create('Ext.DataView', { fullscreen: true, cls: 'twitterView', store: { autoLoad: true, fields: ['from_user', 'text', 'profile_image_url'], * proxy: { type: 'jsonp', url: ' Touch', * reader: { type: 'json', root: 'results' } } }, * itemTpl: '



' }); * The Store no longer has hard coded data, instead we've provided a {@link Proxy}, which fetches the data for us. In this case we used a JSON-P proxy so that we can load from Twitter's JSON-P search API. We also specified the fields present for each tweet, and used Store's {@link autoLoad} configuration to load automatically. Finally, we configured a Reader to decode the response from Twitter, telling it to expect JSON and that the tweets can be found in the 'results' part of the JSON response. * The last thing we did is update our template to render the image, twitter username and message. All we need to do now is add a little CSS to style the list the way we want it and we end up with a very basic twitter viewer. Click the preview button on the example above to see it in action.
© Copyright 2005-2011 SharpKit. All rights reserved.