---
title: "Dataview in Sencha Touch"
description: "In this example, I’m explaining the dataview in sencha touch and how to use it."
author: "Sumit Kesarwani"
published: 2013-06-11
updated: 2019-09-07
canonical: https://www.mindstick.com/articles/1322/dataview-in-sencha-touch
category: "sencha touch"
tags: ["sencha touch"]
reading_time: 6 minutes
---
# Dataview in Sencha Touch
In this example, I’m explaining the [dataview](https://www.mindstick.com/blog/151/dataview-in-ado-dot-net) in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme) and how to use it.\
DataView makes it easy to create lots of [components](https://www.mindstick.com/blog/74096/understanding-the-role-of-some-integral-ac-components) dynamically, usually based off a Store. It's great for rendering lots of data from your [server](https://www.mindstick.com/articles/43769/what-is-serverless-architecture-is-it-worth-switching-over) backend or any other [data source](https://www.mindstick.com/forum/160659/how-do-you-create-a-custom-filter-to-filter-any-text-in-the-data-source-in-angularjs) 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: [
'{firstname} {lastname}
'
]
}
]
}
});
```
In this example, I have used the [container](https://www.mindstick.com/forum/34127/extjs-how-to-set-border-for-the-container) to hold the [titlebar](https://www.mindstick.com/forum/1013/how-to-change-font-color-and-size-of-titlebar-in-sencha-touch) and dataview, titlebar used for [giving](https://yourviews.mindstick.com/view/81621/natural-disasters-in-2020-giving-us-alarm-warning) title to the dataview. Set the data through data [configuration](https://www.mindstick.com/articles/13112/setting-up-the-perfect-configuration-for-your-work-computer) 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: [
'{firstname} {lastname}
'
],
store: 'MyStore'
}
]
}
});
```
Set the store to the dataview through store property.
##### Output
---
Original Source: https://www.mindstick.com/articles/1322/dataview-in-sencha-touch
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.