Ext JS - 在面板中动态添加面板

Question

我有点陷入其中一项要求。

从我的Ajax请求中，我得到了关注XML：

<?xml version="1.0" encoding="utf-8"?>
<Rowsets Version="15.0 SP4 Patch 4 (Jun 3, 2015)" StartDate="2015-08-28T22:19:43" EndDate="2015-08-28T23:19:43" DateCreated="2015-08-28T23:19:43" CachedTime="">
    <Rowset>
        <Row>
            <ID_PART>23</ID_PART>
            <DS_PART>23 - MAIN</DS_PART>
            <DS_MATERIAL>Lubricant (100-1111)</DS_MATERIAL>
            <DS_STATUS>Not-Running</DS_STATUS>
            <ID_MACHINE>1</ID_MACHINE>
            <DS_MACHINE>A - TOP</DS_MACHINE>
        </Row>
        <Row>
            <ID_PART>24</ID_PART>
            <DS_PART>24 - MAIN</DS_PART>
            <DS_MATERIAL>OLOA 5702-2222</DS_MATERIAL>
            <DS_STATUS>Not-Running</DS_STATUS>
            <ID_MACHINE>1</ID_MACHINE>
            <DS_MACHINE>A - TOP</DS_MACHINE>
        </Row>
        <Row>
            <ID_PART>25</ID_PART>
            <DS_PART>25 - OVER</DS_PART>
            <DS_MATERIAL>GX CART (311-6911)</DS_MATERIAL>
            <DS_STATUS>Producing</DS_STATUS>
            <ID_MACHINE>1</ID_MACHINE>
            <DS_MACHINE>A - TOP</DS_MACHINE>
        </Row>
        <Row>
            <ID_PART>29</ID_PART>
            <DS_PART>29 - MAIN</DS_PART>
            <DS_MATERIAL>CARTRIDGE (300-6)</DS_MATERIAL>
            <DS_STATUS>Producing</DS_STATUS>
            <ID_MACHINE>2</ID_MACHINE>
            <DS_MACHINE>B - TOP</DS_MACHINE>
        </Row>
        <Row>
            <ID_PART>30</ID_PART>
            <DS_PART>30 - MAIN</DS_PART>
            <DS_MATERIAL>BODY GX (300-1)</DS_MATERIAL>
            <DS_STATUS>Producing</DS_STATUS>
            <ID_MACHINE>2</ID_MACHINE>
            <DS_MACHINE>B - TOP</DS_MACHINE>
        </Row>
        <Row>
            <ID_PART>37</ID_PART>
            <DS_PART>37 - VALVE</DS_PART>
            <DS_MATERIAL>LAB 100-111</DS_MATERIAL>
            <DS_STATUS>Not-Running</DS_STATUS>
            <ID_MACHINE>3</ID_MACHINE>
            <DS_MACHINE>E - TOP</DS_MACHINE>
        </Row>
        <Row>
            <ID_PART>39</ID_PART>
            <DS_PART>39 - CAP</DS_PART>
            <DS_MATERIAL>LAB 222-111</DS_MATERIAL>
            <DS_STATUS>Not-Running</DS_STATUS>
            <ID_MACHINE>3</ID_MACHINE>
            <DS_MACHINE>E - TOP</DS_MACHINE>
        </Row>
        <Row>
            <ID_PART>45</ID_PART>
            <DS_PART>45 - CAP</DS_PART>
            <DS_MATERIAL>CHemical (111-2222)</DS_MATERIAL>
            <DS_STATUS>Not-Running</DS_STATUS>
            <ID_MACHINE>5</ID_MACHINE>
            <DS_MACHINE>A - BOTTOM</DS_MACHINE>
        </Row>
        <Row>
            <ID_PART>40</ID_PART>
            <DS_PART>40 - CAP</DS_PART>
            <DS_MATERIAL>OLOA Bulk (222-3333)</DS_MATERIAL>
            <DS_STATUS>Not-Running</DS_STATUS>
            <ID_MACHINE>5</ID_MACHINE>
            <DS_MACHINE>A - BOTTOM</DS_MACHINE>
        </Row>
    </Rowset>
</Rowsets>

现在，对于每个ID_MACHINE，我想要一个标题为DS_MACHINE的面板。在该面板中，我需要添加与该ID_MACHINE相关联的所有ID_PART - 主要显示DS_PART作为内部面板的主标题，并在DS_MATERIAL内显示为显示字段，DS_STATUS显示为显示字段。

简而言之，

| A - TOP | --> Main Machine Panel
      |23 - MAIN| --> Part Panel
          Not-Running   Lubricant (100-1111)
      |24 - MAIN| ---> PArt Panel
          Not-Running  OLOA 5702-222
      |25 - OVER| ---> PArt Panel
          Producing  GX CART (311-6911)

| B - TOP | --> Main MAchine Panel
      || --> part panel
      || ---> part panel
so on ...

我的控制器如下所示：

loadMachinePanel : function(panel) {
Ext.Ajax.request({
    url: '/XMII/Illuminator',
    method: 'GET',

    success: function(response) {

        var rows = response.responseXML.getElementsByTagName('Row');

        for(i = 0; i < rows.length; i++) {

        var machineid= rows[i].childNodes[4].childNodes[0].nodeValue;
        var machinename= rows[i].childNodes[5].childNodes[0].nodeValue;
        var partid = rows[i].childNodes[0].childNodes[0].nodeValue;
        var partname = rows[i].childNodes[1].childNodes[0].nodeValue;
        var statusname = rows[i].childNodes[3].childNodes[0].nodeValue;
        var matname= rows[i].childNodes[2].childNodes[0].nodeValue;


            panel.add({
                xtype: 'panel',
                title: machinename,
                border: true,
                height: 350,
                padding: '3 0 3 0',
                bodyPadding: 3,
                margin:15,
                titleAlign:'center',
                id: 'MainPanel' + machineid,
                style: 'cursor: pointer;',

                items: [
                {

                xtype: 'panel',
                title: partname,
                titleAlign:'center',
                height: 108,
                padding: '3 0 3 0',
                bodyPadding: 3,
                margin:10,
                layout: 'hbox',
                id: 'PartPanel' + partid,
                border: true,
                style: 'cursor:pointer;',


                            items: [

                              {
                                xtype: 'panel',
                                flex: 1,
                                items: [{
                                    xtype: 'displayfield',
                                    value: 'STATUS'
                                        },{
                                    xtype: 'displayfield',
                                    value: statusname
                                            }]
                                }

                {
                                xtype: 'panel',
                                flex: 1,
                                items: [{
                                    xtype: 'displayfield',
                                    value: 'Product Running'
                                        },{
                                    xtype: 'displayfield',
                                    value: matname
                                            }]
                                }

                               ]
            }]
        });


        }
        panel.doLayout();
    },

    params: {
        'QueryTemplate': 'FOlderName/Dashboard/ManagementMachineInfoSelect',
        'Content-Type': 'text/xml'
    }
});
}

不知何故，这段代码会创建重复的面板并使页面混乱。不确定这是正确的方法。

任何人都可以纠正它或提供更好的解决方案吗？

谢谢！