extjs - 尝试为商店中的每个项目创建一个字段集

Question

我对 ExtJS 很陌生，而且很迷茫。我创建了一个数据存储 -

var sections = Ext.create('Ext.data.Store', {
    data: [
        {"section" : "One"},
        {"section" : "Two"},
        {"section" : "Three"}
    ]
});

我现在想做的是为每个部分创建一个面板，使用部分名称（一、二三）作为标题。

我尝试了几种方法，所有这些方法都非常不成功。我该如何解决这个问题？

编辑 - 我试过的东西的例子

var sectionStore = Ext.getStore(sections);
var allRecords = sectionStore || sectionStore.data("section");

allRecords.each(function(record) {
    Ext.define('Ext.panel.Panel', {
        xtype: 'panel',
        title: record,
        text: record
    })
    console.log(record)
});

Answer 1

当您使用Ext.define('Ext.panel.Panel'时，您只需定义一个panel. 而不是定义你需要使用Ext.create().

小提琴

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var sections = Ext.create('Ext.data.Store', {
                data: [{
                    "section": "One"
                }, {
                    "section": "Two"
                }, {
                    "section": "Three"
                }]
            }),
            fieldSetItems = [];

        sections.each(rec => {
            fieldSetItems.push({
                xtype: 'fieldset',
                title: rec.get('section')
            });
        });

        Ext.create({
            xtype: 'panel',
            title: 'Create Items by store',
            items: fieldSetItems,
            renderTo: Ext.getBody()
        });
    }
});

Answer 2

Ext.define定义类，但您想创建panel该类的新实例并将它们添加到组件层次结构中。

所以这就是你必须做的（你可以将它们添加到任何现有的和已经渲染的容器组件中）：

var parentContainer = ... 
var sectionStore = Ext.getStore(sections);
var allRecords = sectionStore || sectionStore.data("section");

allRecords.each(function(record) {
    parentContainer.add({
        xtype: 'panel',
        title: record,
        text: record
    });
});