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

Question

I'm trying to create a panel like:

with the below code as a beginning, however I'm not sure how can I create a list/table inside a panel in a way like it looks below in the image. I also have to load the data dynamically inside the panel. also I'm using panel since I want it to be a collapsible one

$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?
  }

});

any ideas?

Answer 1

You can create custom rows with Ext.Panel. The example shows only show creating list. To add part where AND, OR you can change structure of data and create row with nested panel row.

Here is example of creating custom list with panel:

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

Working Fiddle Link: https://fiddle.sencha.com/#view/editor&fiddle/2l14