ExtJS如何在面板中显示存储数据

Question

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'
            })            
]           
},

Answer 1

Updated

Your model:

Ext.define('BuildingInfoModel', {
    extend : 'Ext.data.Model',

    fields : [
        {
            name : 'address',
            type : 'string'
        },
        {
            name : 'address2',
            type : 'string'
        },
        {
            name : 'address3',
            type : 'string'
        },
        {
            name : 'address4',
            type : 'string'
        }
    ]
});

Your store:

Ext.define('BuildingInfoStore', {
    extend: 'Ext.data.Store',
    requires: ['BuildingInfoModel'], 
    model: 'BuildingInfoModel',
    storeId: 'BuildingInfoStore',

  data : [
         [ 'Address3', 'Address4', 'Address5', 'Address6' ]        
     ]
});

Try this and if you like it mark as answered:

Ext.define('BuildingInfo', {
    extend: 'Ext.Panel',
    alias: 'widget.buildingInfo',
    xtype: 'buildingInfo',
    layout: 'form',
    resizable: true,
    border: 'fit',
    items: [{
        xtype: 'form',
        items: [{
            xtype: 'fieldset',
            title: 'TEST',
            items: [{
                xtype: 'displayfield',
                name: 'address4',
                fieldLabel: 'Address4'
            }, {
                xtype: 'displayfield',
                name: 'address3',
                fieldLabel: 'Address3'
            }]
        }, {
            xtype: 'fieldset',
            title: 'TEST2',
            width: 700,
            items: [{
                xtype: 'displayfield',
                name: 'address2',
                fieldLabel: 'Address2'
            }, {
                xtype: 'displayfield',
                name: 'address',
                fieldLabel: 'Address'
            }]
        }]
    }],
    listeners: {
        afterrender: function(component, eOpts){
            var store = Ext.getStore('BuildingInfoStore');
            if(!Ext.isEmpty(store)) {
                var form = component.down('form');
                form.loadRecord(store.last());
            }
        }
    }
});

Answer 2

You can paste this in sencha fiddle and check.

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.panel.Panel', {
            title: 'Hello',
            //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
            data:[{
                name: 'Test',
                address1: '123 Land Dr, NY 12345',
                address2: '234 Some Dr, CA 34590',
                address3: '123 Land Dr, NY 12345',
                address4: '234 Some Dr, CA 34590',
            },{
                name: 'Test123',
                address1: '123 Land Dr, NY 12345',
                address2: '234 Some Dr, CA 34590',
                address3: '123 Land Dr, NY 12345',
                address4: '234 Some Dr, CA 34590',
            }],
            tpl:new Ext.XTemplate(
                '<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>'
            ),
            renderTo: Ext.getBody()
        });
    }
});