In this example, I’m explaining the dataview in sencha touch and how to use it.
DataView makes it easy to create lots of components dynamically, usually based off a Store. It's great for rendering lots of data from your server backend or any other data source and is what powers components like Ext.List.
Example-1:
To create a dataview in sencha touch, simply drag-n-drop the dataview from the toolbox to the canvas.
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
fullscreen: true,
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Users'
},
{
xtype: 'dataview',
data: [
{
firstname: 'Jamie',
lastname: 'Stinkins'
},
{
firstname: 'Jonty',
lastname: 'Rhodes'
},
{
firstname: 'Steve',
lastname: 'Waugh'
},
{
firstname: 'Joseph',
lastname: 'Henry'
},
{
firstname: 'Kevin',
lastname: 'Stewart'
}
],
height: 272,
itemTpl: [
'<div>{firstname} {lastname}</div>'
]
}
]
}
});In this example, I have used the container to hold the titlebar and dataview, titlebar used for giving title to the dataview. Set the data through data configuration of dataview and write the field name in the itemTpl to print the data.
Output
Example-2:
In this example, we populate the dataview through a store.
Step-1:
First create a store and named it UserStore.
Ext.define('MyApp.store.UserStore', {
extend: 'Ext.data.Store',
config: {
data: [
{
firstname: 'Joseph',
lastname: 'Henry'
},
{
firstname: 'Steve',
lastname: 'Walkins'
},
{
firstname: 'Hugh',
lastname: 'Jackman'
},
{
firstname: 'Orlondo',
lastname: 'Bloom'
},
{
firstname: 'Rafeal',
lastname: 'Montero'
}
],
storeId: 'MyStore',
fields: [
{
name: 'firstname'
},
{
name: 'lastname'
}
]
}
});
Declare two fields firstname and lastname and set the data through data configuration of store.
Step-2:
Now drag-n-drop a container named it UserContainer. This container will hold titlebar and dataview.
Titlebar used to set the title or give the title to the dataview.
Ext.define('MyApp.view.UserContainer', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Users'
},
{
xtype: 'dataview',
height: 272,
itemTpl: [
'<div>{firstname} {lastname}</div>'
],
store: 'MyStore'
}
]
}
});Set the store to the dataview through store property.
Output
Leave Comment