I posted this post in the thread for the Sencha Touch 1 version. But it is more relevant here.
I am trying to place a grid inside a panel. This panel is used in a card layout which switches depending on user actions. This panel will be used to display customer information. The page is not showing correctly and a grid layout is not present. It looks more like a list. Also the items from the store are not displaying. Can anyone point me in the right direction, please?
Code:
Ext.define('GFD.view.CustDetails', {
extend: 'Ext.ux.touch.grid.View',
paths : {
'Ext.ux.touch.grid': './Ext.ux.touch.grid'
},
requires:[
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter',
],
xtype: 'custdetails',
id:'custdetailsPanel',
config: {
items: [
{
xtype: 'spacer',
height: '50px'
},
{
xtype: 'touchgridpanel',
title: 'Cust Details',
id: 'custGrid',
store: 'CustomerStore',
columns:[
{
header: 'Customer Number',
dataIndex: 'cust_no',
style: 'padding-left: 1em;',
width: '40%',
},
{
header: 'Order Date',
dataIndex: 'order_date',
style: 'padding-left: 1em;',
width: '40%',
},
{
header: 'Telephone.',
dataIndex: 'tel_no',
style: 'padding-left: 1em;',
width: '40%',
},
{
header: 'Contact',
dataIndex: 'contact_name',
style: 'padding-left: 1em;',
width: '40%',
},
],
}
],
}
});