In this article, I’m explaining the list in sencha touch and how it works.
List is a custom styled DataView which allows Grouping, Indexing, Icons, and a Disclosure.
Example-1:
To create a simple list in sencha touch, simply drag-n-drop the list from the toolbox to the canvas.
Ext.define('MyApp.view.CountryList', {
extend: 'Ext.dataview.List',
config: {
data: [
{
country: 'India'
},
{
country: 'Australia'
},
{
country: 'South Africa'
},
{
country: 'Srilanka'
},
{
country: 'Bangladesh'
}
],
itemTpl: [
'<div>{country}</div>'
]
}
});To populate the list we can use the store but in this example we are using the data configuration of list to populate it. After writing the code in data configuration, write the country in itemTpl.
Output
Example-2:
In this example, we will populate the list from a store.
Step-1:
First create a store and named it CountryStore.
Ext.define('MyApp.store.CountryStore', {
extend: 'Ext.data.Store',
config: {
data: [
{
country: 'India',
capital: 'New Delhi'
},
{
country: 'Australia',
capital: 'Sydney'
},
{
country: 'England',
capital: 'London'
},
{
country: 'Bangladesh',
capital: 'Dhaka'
},
{
country: 'USA',
capital: 'New York'
}
],
storeId: 'MyStore',
fields: [
{
name: 'country'
},
{
name: 'capital'
}
]
}
});Create two fields country and capital and put the data through data configuration of store.
Step-2:
Now create a list and named it Country.
Ext.define('MyApp.view.Country', {
extend: 'Ext.dataview.List',
config: {
fullscreen: true,
ui: 'round',
store: 'MyStore',
itemTpl: [
'<div>{country} - {capital}</div>'
]
}
});Set the store to the list through store configuration and write code in the itemTpl.
Output
Leave Comment