Проблема в настройке разделителя в combo ext js 4.2 - PullRequest
0 голосов
/ 03 декабря 2018

Я устанавливаю косую черту (/) в качестве разделителя в комбинации ext js xtype.На вкладке разделитель снова меняется на запятую (,).Это происходит только тогда, когда я выбираю значения из списка.Когда я вставляю значения, разделитель остается косой чертой.

Я использую комбо в сетке ext js.

Любая конкретная причина для такого поведения?

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:'DESTINATIONOFFERCOMBO',
      typeAhead: true,
      triggerAction: 'all',
      allowBlank: true,
      selectOnTab: true,
      displayField: 'promotion',
      valueField: 'promotionID',
      queryMode: 'local',
      autoRenderer:true,
      forceSelection:false,
      store: 'DestinationOfferStore',
      scope: this,
      multiSelect: true,
      delimiter: '/'
    },
    filter:
    {
      type: 'string',
    }

  }
  ],
  selModel : {
    selType : 'checkboxmodel',
    ignoreRightMouseSelection: true,
    checkOnly: true // IMP: Getting cell model issue if flag set to true
  },
  plugins: [
  {
    ptype: 'cellediting',
    clicksToEdit: 1
  },{
      ptype: 'rowexpander',
      rowBodyTpl : [
        '<div class="subGrid"></div>'
      ],
      selectRowOnExpand: false,
      expandOnEnter : false,
      expandOnDblClick : false
  }
  ],

  bbar: [{xtype:'paging'}]
    edit: function(editor, context, eOpts) {

        var errorMsg = Ext.getCmp('promoStatusMessage').html;
        if(errorMsg != null && errorMsg.indexOf("Some offers") != -1) {
            return;
        }

        var gridRow = Ext.getCmp('massCopyGrid').store.getAt(context.rowIdx);
        var sourceOffer = gridRow.data['SOURCEOFFER'];
        var destinationOffers = gridRow.data['DESTINATIONOFFER'];
        destinationOffers = destinationOffers != null ? destinationOffers.toString() : null;
        PromoMassCopy.app.getController('MassCopyController').updateDestinationOffer(sourceOffer, destinationOffers);

        // Re-create the DMDUnit grid
        var subGridDiv = Ext.DomQuery.select('div.subGrid')[context.rowIdx];
        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: sourceOffer
        };
        dmdUnitStore.load();

        var tgrid = Ext.create('Ext.grid.Panel', {
            store: 'DmdUnitStore' + i,
            id: 'tGrid' + i,
            stateful: true,
            stateId: 'dmdStateGrid',
            disableSelection: true,
            submitValue: false,
            xtype: 'array-grid',
            viewConfig: {
                enableTextSelection: false
            },
            loadMask: true,
            multiSelect: false,
            columns: [
            {
                header: PROMOLABELS["PromoMassCopy.Label.DmdUnits"],
                flex: 1,
                dataIndex: 'demandUnits',
                hideable: false
            },
            {
                header: PROMOLABELS["PromoMassCopy.Label.Description"],
                flex: 1,
                dataIndex: 'description',
                hideable: false
            },
            {
                header: PROMOLABELS["PromoMassCopy.Label.RetailPrice"],
                flex: 1,
                dataIndex: 'retailPrice',
                hideable: false
            },
            {
                header: PROMOLABELS["PromoMassCopy.Label.EffectivePrice"],
                flex: 1,
                dataIndex: 'effectivePrice',
                hideable: false
            }
          ],
          height: 100,
          renderTo: subGridDiv
        });
        i++;
        // Issue: Cannot read property 'isGroupHeader' of null
        tgrid.getEl().swallowEvent([
            'mousedown', 'mouseup', 'click',
            'contextmenu', 'mouseover', 'mouseout',
            'dblclick', 'mousemove'
        ]);
    },
    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>'
      this.callParent();
      var i = 0;
      this.view.on('expandbody', function(rowNode, record, body) {
        var subGridDiv = Ext.DomQuery.select('div.subGrid',body)[0];
        subGridDiv.innerText = '';
        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) {
//                    Ext.getCmp('tGrid' + (i-1)).bindStore(store);
                    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,
          stateful: true,
          stateId: 'dmdStateGrid',
          disableSelection: true,
          submitValue: false,
          xtype: 'array-grid',
          viewConfig: {
            enableTextSelection: false
          },
          loadMask: true,
          multiSelect: false,
          columns: [
            {
              header: PROMOLABELS["PromoMassCopy.Label.DmdUnits"],
              flex: 1,
              dataIndex: 'demandUnits',
              hideable: false
            },
            {
              header: PROMOLABELS["PromoMassCopy.Label.Description"],
              flex: 1,
              dataIndex: 'description',
              hideable: false
            },
            {
              header: PROMOLABELS["PromoMassCopy.Label.RetailPrice"],
              flex: 1,
              dataIndex: 'retailPrice',
              hideable: false
            },
            {
              header: PROMOLABELS["PromoMassCopy.Label.EffectivePrice"],
              flex: 1,
              dataIndex: 'effectivePrice',
              hideable: false
            }
          ],
          height: 100,
          renderTo: subGridDiv
        });
        i++;
        // Issue: Cannot read property 'isGroupHeader' of null
        tgrid.getEl().swallowEvent([
            'mousedown', 'mouseup', 'click',
            'contextmenu', 'mouseover', 'mouseout',
            'dblclick', 'mousemove'
        ]);
      });
    }
});
...