Question

我希望在面板中显示类似的内容：

专家组的标题

TEST 地址：123 Land Dr，NY 12345 地址2：234 Some Dr，CA 34590

的Test2 地址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());
            }
        }
    }
});

Answer 2

你可以将它粘贴在sencha小提琴中并检查。

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

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

2 个答案: