除非更改值，否则避免网格单元变脏

Question

除非更改值，否则如何避免网格单元格变成脏单元格，当我刚触摸时间单元时，它变成了一个脏单元，我如何避免弄脏，这是 Fiddle

这是我的网格，

Ext.application({
    name: 'Fiddle',

launch: function () {

var myStore = Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['busname', 'time', 'typebus',],
    data: [{
        busname: 'ABCD',
        time: '15:30:00',
        typebus: 'AC Volvo',

    }, {
        busname: 'aaa',
        time: '13:30:00',
        typebus: 'Seater',

    }, {
        busname: 'AAAA',
        time: '18:30:00',
        typebus: 'Sleeper',

    }, {
        busname: 'ABCD',
        time: '19:30:00',
        typebus: 'AC Volvo',

    },]
});

var typebusStore = Ext.create('Ext.data.Store', {
    storeId: 'typeBusStore',
    fields: ['id', 'name'],
    data: [{
        id: 1,
        name: 'AC Volvo'
    }, {
        id: 2,
        name: 'Seater'
    }, {
        id: 3,
        name: 'Sleeper'
    }]
})

Ext.create('Ext.grid.Panel', {
    xtype: 'gridpanel',
    itemId: 'busTimegrid',
    pageSize: 1,
    title: 'BUS DEATILS',
    mapperId: 'getBusTime',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        header: 'Bus Name',
        dataIndex: 'busname',
        editor: 'textfield'
    }, {
        text: 'Bus Time',
        dataIndex: 'time',
        xtype: 'gridcolumn',
        renderer: function (value) {
            if (value instanceof Date)
                return Ext.util.Format.date(value, 'H:i:s');
            else
                return value;
        },
        flex: 1,
        editor: {
            xtype: 'timefield',
            format: 'H:i:s',
            allowBlank: true,
            maskRe: /[0-9,:]/,
            listeners: {
                beforeselect: function (timefield, record) {
                    var grid = timefield.up('grid');
                    if (grid.store.find('time', record.data.disp) != -1) {
                        Ext.Msg.alert("Bus time already exist.");
                        return false;
                    }
                }
            }
        }
    }, {
        header: 'Bus TYpe',
        dataIndex: 'typebus',
        editable: true,
        renderer: function (value) {
                if (value !== null && value.length == 1) {
                    var store = this.getEditor().getStore();
                    return store.findRecord('id', value).get('name');
                }
                return value;
            },
        editor: {
            xtype: 'combo',
            displayField: 'name',
            valueField: 'id',
            editable: true,
        }
    }],
    selModel: 'cellmodel',
    plugins: {
        ptype: 'cellediting',
        clicksToEdit: 1,
    },
    height: 200,
    width: 400,
    dockedItems: [{
            xtype: 'toolbar',
            docked: 'bottom',
            items: [{
                xtype: 'button',
                flex: 1,
                text: 'Download to Excel',
                handler: function(b, e) {
                    b.up('grid').downloadExcelXml();
                }
            }]
        }

        ],
    renderTo: Ext.getBody()

});

}

});

Answer 1

试试这个方法 - Fiddle

Ext.application({
  name: 'Fiddle',
  launch: function() {
    run();
    window.show();
  }
});

function run() {
  var myStore = Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: [{
      name: 'busname',
      type: 'string'
    }, {
      name: 'time',
      type: 'date'
    }, {
      name: 'typebus',
      type: 'string'
    }],
    pageSize: 2,
    proxy: {
      type: 'memory',
      enablePaging: true
    },
    data: [{
      busname: 'ABCD',
      time: '2016-03-03 15:30:00',
      typebus: 'AC Volvo',

    }, {
      busname: 'aaa',
      time: '2016-03-03 13:30:00',
      typebus: 'Seater',

    }, {
      busname: 'AAAA',
      time: '2016-03-03 18:30:00',
      typebus: 'Sleeper',

    }, {
      busname: 'ABCD',
      time: '2016-03-03 19:30:00',
      typebus: 'AC Volvo',

    }, ]
  });

  var typebusStore = Ext.create('Ext.data.Store', {
    storeId: 'typeBusStore',
    fields: ['id', 'name'],
    data: [{
      id: 1,
      name: 'AC Volvo'
    }, {
      id: 2,
      name: 'Seater'
    }, {
      id: 3,
      name: 'Sleeper'
    }]
  })

  Ext.create('Ext.grid.Panel', {
    xtype: 'gridpanel',
    itemId: 'busTimegrid',
    pageSize: 1,
    title: 'BUS DEATILS',
    mapperId: 'getBusTime',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
      header: 'Bus Name',
      dataIndex: 'busname',
      editor: 'textfield'
    }, {
      xtype: 'datecolumn',
      text: 'Bus Time',
      dataIndex: 'time',
      format: 'H:i:s',
      flex: 1,
      renderer: function(value) {
        return Ext.util.Format.date(value, 'H:i:s');
      },
      editor: {
        xtype: 'timefield',
        format: 'H:i:s',
        allowBlank: true,
        maskRe: /[0-9,:]/
      }
    }, {
      header: 'Bus TYpe',
      dataIndex: 'typebus',
      editable: true,
      renderer: function(value, md, record) {
        var retValue = Array();
        if (Ext.isArray(value)) {
          Ext.each(value, function(id) {
            var ename = Ext.data.StoreManager.lookup('typeBusStore').findRecord('id', id).get('name');
            retValue.push(ename);
            console.log(retValue);
          });
        }
        if (retValue.length > 0) {
          return retValue.join(", ");
        }
        return value;
      },
      editor: {
        xtype: 'combo',
        displayField: 'name',
        valueField: 'id',
        editable: true,
        forceSelection: true,
        multiSelect: true,
        displayTpl: '<tpl for=".">' +
          '{name}' +
          '<tpl if="xindex < xcount">, </tpl>' +
          '</tpl>',
        store: typebusStore
      }
    }],
    selModel: 'cellmodel',
    plugins: {
      ptype: 'cellediting',
      clicksToEdit: 1,
    },
    height: 200,
    width: 400,
    dockedItems: [{
      xtype: 'pagingtoolbar',
      store: myStore, // same store GridPanel is using
      dock: 'bottom',
      displayInfo: true
    }],
    renderTo: Ext.getBody()
  });
}

除非更改值，否则避免网格单元变脏

Avoid the grid cell to get dirty unless the values is changed

grid

extjs

dirty-data