In this article, I’m explaining nested list in sencha touch.
Nested list means one list inside of another list. Nested List provides a miller column interface to navigate between nested sets of data with a clean and easy to use interface.
To create a nested list in sencha touch, you have to follow some steps:
Step 1:
First create a model and named it ListModel and add one field ‘text’ through field configuration.
Ext.define('MyApp.model.ListModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'text'
}
]
}
});Step 2:
Next add a store which is Json Tree Store type and named it ListTreeStore add ListModel to it through model configuration and define a structure in the root configuration.
Ext.define('MyApp.store.ListTreeStore', {
extend: 'Ext.data.TreeStore',
requires: [
'MyApp.model.ListModel'
],
config: {
model: 'MyApp.model.ListModel',
storeId: 'MyJsonTreeStore',
defaultRootProperty: 'items',
root: {
text: 'Groceries',
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{
text: 'Sparkling',
leaf: true
},
{
text: 'Still',
leaf: true
}
]
},
{
text: 'Coffee',
leaf: true
},
{
text: 'Espresso',
leaf: true
},
{
text: 'Redbull',
leaf: true
},
{
text: 'Coke',
leaf: true
},
{
text: 'Diet Coke',
leaf: true
}
]
},
{
text: 'Fruit',
items: [
{
text: 'Bananas',
leaf: true
},
{
text: 'Lemon',
leaf: true
}
]
},
{
text: 'Snacks',
items: [
{
text: 'Nuts',
leaf: true
},
{
text: 'Pretzels',
leaf: true
},
{
text: 'Wasabi Peas',
leaf: true
}
]
}
]
},
proxy: {
type: 'ajax',
reader: {
type: 'json'
}
}
}
});We have used the ListTreeStore to populate our nested list though root configuration of the store.
Step 3:
Next drag-n-drop the nested list from the toolbox and named it GroceryNestedList. Add the store to the nested list through store configuration.
Ext.define('MyApp.view.GoceryNestedList', {
extend: 'Ext.dataview.NestedList',
config: {
fullscreen: true,
detailCard: {
xclass: 'MyApp.view.ListLabel'
},
store: 'MyJsonTreeStore',
title: 'Groceries',
layout: {
animation: 'flip',
type: 'card'
}
}
});.You can add animation to the nested list through animation configuration, we have also used a label to display a message at the detail card screen (when you tap on leaf node of nested list), add the label to the list using detailCard congifuration.
Step 4:
Add the label to the project to display a message at the detail card screen.
Ext.define('MyApp.view.ListLabel', {
extend: 'Ext.Label',
config: {
html: 'Detail Card Screen',
styleHtmlContent: true
}
});Output
When you tap on the Snacks item, you will get the below screen:
And when you tap on the Wasabi Peas, you will get a message coz that will be detail card screen:
Leave a Comment
3 Comments