当失去对外部网格组件ext js 4.2的关注时，内部网格隐藏

Question

我有一个要求，其中extjs 4.2中的网格将具有内部网格。为此，我使用插件“ rowexpander”和“ expandbody”事件，渲染内部网格。

扩展行时，网格可以很好地处理所有数据。

在主网格中，最后一列是组合框。每当对组合框失去关注时，网格内部就会被破坏。

下面是我的代码：

Ext.require([
  'Ext.grid.*',
  'Ext.data.*',
  'Ext.util.*',
  'Ext.Action'
]);
Ext.define('PromoMassCopy.view.masscopy.MassCopyGrid', {
  extend: 'Ext.grid.Panel',
  xtype: 'array-grid',
  alias: 'widget.massCopyGrid',
  store: 'MassCopyStore',
  id: 'massCopyGrid',
  width: 500,
  height: 350,
  multiSelect: true,
  autoScroll: true,
  stateful: true,
  stateId: 'stateGrid',
  headerBorders: false,
  viewConfig: {
    enableTextSelection: true
  },
  columns: [
  {
    header: PROMOLABELS["PromoMassCopy.Label.SourceOffer"],
    width: 300,
    dataIndex: 'SOURCEOFFER',
    id: 'SOURCEOFFER'
  },
  {
    header: PROMOLABELS["PromoMassCopy.Label.AdWeek"],
    width: 95,
    dataIndex: 'ADWEEK',
    id: 'ADWEEK'
  }, {
    header: PROMOLABELS["PromoMassCopy.Label.Vehicle"],
    width: 300,
    dataIndex: 'VEHICLE',
    id: 'VEHICLE'
  }, {
    header: PROMOLABELS["PromoMassCopy.Label.DestinationOffer"],
    dataIndex: 'DESTINATIONOFFER',
    flex: 1,
    sortable: false,
    editor:
    {
      xtype : 'combo',
      id:'DESTINATIONOFFER',
      typeAhead: true,
      triggerAction: 'all',
      allowBlank: true,
      selectOnTab: true,
      displayField: 'promotion',
      valueField: 'promotionID',
      queryMode: 'local',
      autoRenderer:true,
      forceSelection:true,
      store: 'DestinationOfferStore',
      scope: this,
      multiSelect: true,
      listeners: {
        blur(comboBox, e, eOpts) {
            var pos = this.up('array-grid').getSelectionModel().getCurrentPosition();
            var sourceOffer = comboBox.up('array-grid').store.getAt(pos.row).data['SOURCEOFFER'];
            var destinationOffer = comboBox.getDisplayValue();
            PromoMassCopy.app.getController('MassCopyController').updateDestinationOffer(sourceOffer, destinationOffer);
        }
      }
    },
    filter:
    {
      type: 'string',
    }
  }
  ],
  selModel : {
    selType : 'checkboxmodel',
    ignoreRightMouseSelection: true,
    checkOnly: true
  },
  plugins: [
  {
    ptype: 'cellediting',
    clicksToEdit: 1
  },
  {
    ptype: 'rowexpander',
    rowBodyTpl : [
    '<div class="subGrid"></div>'
    ]
    ,
    selectRowOnExpand: false,
    expandOnEnter : false,
    expandOnDblClick : false
  }
  ],
  bbar: [{xtype:'paging'}],
  listeners: {
    cellclick : function(selectionModel, tdElement, cellIndex, record, trElement, rowIndex, e, eOpts) {
      var win = Ext.getCmp('demandUnitWindow');
      if(win) {
        var dmdGrid = Ext.getCmp('demandUnitGrid');
        dmdGrid.store.proxy.extraParams = {
          promoOffer: record.data["SOURCEOFFER"]
        };
        dmdGrid.getStore().load();
        win.show();
      }
    },
    select : function(selectionModel, record, index, eOpts) {
      PromoMassCopy.app.getController('MassCopyController').updatePromoSelection(record.data, true);
    },
    deselect : function(selectionModel, record, index, eOpts) {
      PromoMassCopy.app.getController('MassCopyController').updatePromoSelection(record.data, false);
    }
  },
  signTpl: '<span style="' +
  'color:{value:sign(\'"#cf4c35"\',\'"#73b51e"\')}"' +
  '>{text}</span>',
  initComponent: function () {
      this.callParent();
      var i = 0;
      this.view.on('expandbody', function(rowNode, record, body) {
        var subGridDiv = Ext.DomQuery.select('div.subGrid',body)[0];
        if( subGridDiv.children.length > 0 ) {
          return;
        }
        var dmdUnitStore = Ext.create('Ext.data.Store',
        {
            storeId:'DmdUnitStore' + i,
            fields:['demandUnits', 'description', 'retailPrice', 'effectivePrice'],
                autoLoad: false,
            proxy:{
                type:'ajax',
                url: URIMAP.get('LOADDMDUNITS')
            },
            listeners: {
                load: function(store, records, success) {
                    var grid = Ext.getCmp('tGrid' + (i-1));
                    Ext.each(records, function(item, index) {
                        var row = grid.getView().getNode(index);
                        Ext.fly(row).highlight('#000000', {
                            attr: 'color',
                            duration:9000000
                        });
                    });
                }
            }
        });
        dmdUnitStore.proxy.extraParams = {
         promoOffer: record.data["SOURCEOFFER"]
        };
        dmdUnitStore.load();

        var tgrid = Ext.create('Ext.grid.Panel', {
          store: 'DmdUnitStore' + i,
           id: 'tGrid' + i,
          disableSelection: true,
          xtype: 'array-grid',
          viewConfig: {
            enableTextSelection: false
          },
          loadMask: true,
          multiSelect: false,
          columns: [
            {
              header: 'DmdUnits',
              flex: 1,
              dataIndex: 'demandUnits',
              hideable: false
            },
            {
              header: 'Description',
              flex: 1,
              dataIndex: 'description',
              hideable: false
            },
            {
              header: 'Retail Price',
              flex: 1,
              dataIndex: 'retailPrice',
              hideable: false
            },
            {
              header: 'Effective Price',
              flex: 1,
              dataIndex: 'effectivePrice',
              hideable: false
            }
          ],
          height: 100,
          renderTo: subGridDiv
        });
        i++;
        tgrid.getEl().swallowEvent([
            'mousedown', 'mouseup', 'click',
            'contextmenu', 'mouseover', 'mouseout',
            'dblclick', 'mousemove'
        ]);
      });
    }
});