In this article, I’m explaining how to display the dataview component in table format in sencha touch.
Step 1:
First we create a store and named it ArticleStore, it contains the Headline,Content and Author as fields using field configuration.
extend: 'Ext.data.Store',
alias: 'store.articlestore',
config: {
data: [
{
Headline: 'Panel',
Author: 'Sencha',
Content: 'Panels are most useful as Overlays - containers that float over your appl..'
},
{
Headline: 'FormPanel',
Author: 'Sencha',
Content: 'The Form panel presents a set of form fields and provides convenient ways..'
},
{
Headline: 'Component',
Author: 'Sencha',
Content: 'Most of the visual classes you interact with in Sencha Touch are Componen..'
},
{
Headline: 'Store',
Author: 'Sencha',
Content: 'he Store class encapsulates a client side cache of Model objects. Stores..'
},
{
Headline: 'Model',
Author: 'Sencha',
Content: 'A Model represents some object that your application manages. For example..'
},
{
Headline: 'Controller',
Author: 'Sencha',
Content: 'Controllers are responsible for responding to events that occur within yo..'
}
],
storeId: 'articlestore',
fields: [
{
name: 'Headline'
},
{
name: 'Author'
},
{
name: 'Content'
}
]
}
});
Through data configuration, we can add different values to the fields and add storeId, give value articlestore.
Step 2:
Now drag-n-drop the container to the canvas from the toolbar , container is the initial view of our project and holds the other components. Add the dataview component to the project with toolbar positioned top using docked property.
Assign the store to the dataview component using storeId configuration.
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: 'dataview',
height: '100%',
styleHtmlContent: true,
width: '100%',
inline: {
wrap: true
},
itemCls: 'dataview-item',
itemTpl: [
'<div class="arHeadline">{Headline}</div>',
'<div class="arbyline">{Author}</div>',
'<div class="arcontent">{Content}</div>'
],
store: 'articlestore'
},
{
xtype: 'toolbar',
docked: 'top',
title: 'Summary'
}
]
}
});Using itemTpl configuration, we are defining the HTML Template with variables wrapped inside curly braces{}. The values for these variables are already defined in store using data configuration.
Each data items from the Store will be looped and displayed as items in the DataView using the itemTpl configuration. In itemCls configuration, we are defining the CSS Class that needs to apply for each item in dataview.
Step 3:
Add a CSS class to the project that we have defined in the itemTpl configuration of dataview component.
.dataview-item{
width : 33.33%;
height : 50%;
border-right: 1px solid #000;
border-bottom: 5px solid #59535E;
float:left;
padding:2px;
}
.arHeadline{
font-size: 16px;
font-weight:bold;
overflow:hidden;
font-family: 'Museo Sans';
color: #66ab16;
}
.arbyline{
font-size:10px;
font-style:italic;
font-family: 'Museo Sans';
}
.arcontent{
font-size:12px;
font-family: 'Museo Sans';
margin: 2px;
overflow: hidden;
}Output
Leave Comment