I want a display something like this in a panel:
Title of the Panel
TEST Address: 123 Land Dr, NY 12345 Address2: 234 Some Dr, CA 34590
Test2 Address3: 123 Land Dr, NY 12345 Address4: 234 Some Dr, CA 34590
I have created a model and a store which will return the data accordingly. How do I display this data? I created a panel as follows but I do not have a record to populate. Is using XTemplate any easier? If yes, how can I use it?
Store:
Ext.define('BuildingInfoStore', {
extend: 'Ext.data.Store',
requires: ['BuildingInfoModel'],
model: 'BuildingInfoModel',
storeId: 'BuildingInfoStore',
data : [
[ 'Address3', 'Address4', 'Address5', 'Address6' ]
]
});
Panel:
Ext.define('BuildingInfo', {
extend: 'Ext.panel.Panel',
autoScroll: true,
initComponent: function () {
items = [
{
xtype: 'fieldset',
title: 'TEST',
items :[
{
xtype: 'displayfield',
fieldLabel: 'Address6'
},
{
xtype: 'displayfield',
fieldLabel: 'Address5'
}
]
},
{
xtype: 'fieldset',
title: 'TEST2',
width: 700,
items :[{
xtype: 'displayfield',
fieldLabel: 'Address4'
},
{
xtype: 'displayfield',
fieldLabel: 'Address3'
}
]
}
this.items = items;
this.callParent();
}
});
If using with a template, I am trying something like this (with Deepak P help from below answer)
{
title: 'Building Details',
id: 'westContainer',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 550,
split: true,
collapsible: true,
layout: 'fit',
items: [
new Ext.DataView({
store : 'ExtjsView.store.BuildingInfoStore',
tpl:new Ext.XTemplate(
'<div class="wrap">',
'<tpl for=".">', // process the data.kids node
'<p>{#}. {name}, Address1: {address1},Address2: {address2}</p>', // use current array index to autonumber
'<p>Address3: {address3},Address4: {address4}</p></br>',
'</tpl></div>'
),
renderTo: Ext.getBody(),
itemSelector: 'div.wrap',
autoHeight : true,
emptyText : 'No Data'
})
]
},
Updated
Your model:
Your store:
Try this and if you like it mark as answered: