如何在面板-EXTJS内的列表/表中加载动态数据

Posted 2021-05-06

我正在尝试创建一个类似的面板：

以下代码作为开头，但是我不知道如何在面板中创建一个列表/表格，就像它在图像中看到的那样。我还必须在面板内动态加载数据。我也在使用面板，因为我希望它是一个可折叠的面板

$cls.superclass.constructor.call(this, Ext.apply({
  items: [
    this.section({
      items: [
        this.panel = new Ext.Panel({
          items: [
            this.section({
              items: []
            })
          ],

          collapsible: true,
        })
      ]
    })
  ]
}, cfg));

Ext.extend($cls, Panel, {

  getData: function(data) {
    //here I have the entire data I want to show in the list. just not sure how?
  }

});

有任何想法吗？

答案

您可以使用Ext.Panel创建自定义行。该示例仅显示show creation列表。要在AND和OR处添加部件，您可以更改数据结构并使用嵌套面板行创建行。

以下是使用面板创建自定义列表的示例：

Ext.onReady(function () {
    Ext.create({
        xtype: 'panel',
        renderTo: Ext.getBody(),
        title: 'ExtJS Master Panel',
        items: [
            collapsibleList = new Ext.Panel({
                title: 'Collapsible List',
                collapsible: true,
                hideBorders: true,
                padding: '10px',
                height: 400
            })
        ],
        getData: function () {
            return new Promise(function (resolve) {
                setTimeout(function () {
                    resolve([{
                        name: 'Last VM Scan',
                        decider: 'LESS THAN',
                        period: '30 days'
                    }, {
                        name: 'Last CERTVIEW Scan',
                        decider: 'LESS THAN',
                        period: '14 day'
                    }, {
                        name: 'Last checked In',
                        decider: 'LESS THAN',
                        period: '10 days'
                    }]);
                }, 1000);
            });
        },
        listeners: {
            afterrender: function () {
                console.log(collapsibleList);
                Promise.resolve(this.getData()).then(function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var pan = new Ext.Panel({
                            xtype: 'panel',
                            layout: 'hbox',
                            hideBorders: true,
                            items: [{
                                xtype: 'panel',
                                padding: '10px',
                                width: 200,
                                items: [{
                                    xtype: 'label',
                                    text: data[i].name
                                }]
                            }, {
                                xtype: 'panel',
                                padding: '10px',
                                width: 300,
                                items: [{
                                    xtype: 'label',
                                    text: data[i].decider
                                }]
                            }, {
                                xtype: 'panel',
                                padding: '10px',
                                items: [{
                                    xtype: 'label',
                                    text: data[i].period
                                }]
                            }]
                        });

                        collapsibleList.add(pan);
                    }

                    collapsibleList.doLayout();
                });
            }
        }
    });
});

工作小提琴链接：https://fiddle.sencha.com/#view/editor&fiddle/2l14