javascript - ExtJS 如何在面板中显示商店数据

Question

我想要在面板中显示类似这样的内容:

面板标题

测试地址:123 Land Dr, NY 12345地址2:234 Some Dr, CA 34590

测试2地址 3:123 Land Dr, NY 12345地址4: 234 Some Dr, CA 34590

我已经创建了一个模型和一个商店，它们将相应地返回数据。我如何显示这些数据？我按如下方式创建了一个面板，但没有要填充的记录。使用 XTemplate 更容易吗？如果是，我该如何使用它？

商店:

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

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

面板:

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();
}
});

如果使用模板，我正在尝试这样的事情(在 Deepak P 的帮助下从下面的答案中得到帮助)

{
            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

已更新

您的模型:

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

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

您的商店:

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

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

试试这个，如果你喜欢它，标记为已回答:

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());
            }
        }
    }
});