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

Question

How to avoid the grid cell from become a dirty cell unless the value is changed, when I just touch the time cell , it becomes a dirty cell, how do I avoid that being getting dirty, here's the Fiddle

Here is my grid ,

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

});

}

});

Specify the time field in the model to be of type date. The value is different because it's converting a string to a date in the editor. — Evan Trimboli, Mar 24 '17 at 10:28
Apologies Evan, But Dint get you.. Can you be more specific. @EvanTrimboli — , Mar 24 '17 at 11:15
@EvanTrimboli updated the fiddle, Now I gues you should be able to see my issue, when you click the Bus Time Column and come out of it, the red dirty flag occurs, So I don't want that to come unless I change the value??? — , Mar 24 '17 at 11:49
The `typebus` field in the model should be of `type: 'date'`. — Evan Trimboli, Mar 24 '17 at 12:05

score 0 · Accepted Answer · answered Mar 24 '17 at 12:17

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

Hai, Gilsha, I'm creating the store remotely using the mapper ID from the databse, how do i declare the field there?? I directly takes the mapper ID, creates a store based on the database tables?? — , Mar 24 '17 at 13:53
Okay. So are you saying that you are getting an array of strings as the fields config? If yes, you can turn it into an array of objects at client side using map function and update in the store `store.model.setFields(newFieldsArray);` — Gilsha, Mar 24 '17 at 14:08
Hai, Gilsha In this Fiddle https://fiddle.sencha.com/#view/editor&fiddle/1sr2 , the Last Column Even I dont Change the value , Just Clicking makes it a dirty cell, How to avoid it, ?? — , Mar 27 '17 at 12:37
The problem here is, you have set the valueField of column editor as ID. Set it to name, so that it would match with the `dept` attribute value in the record. — Gilsha, Mar 27 '17 at 13:01
When I change valueField to name, I will not able to change the value then, tried in the fiddle — , Mar 27 '17 at 13:07
Okay John. But the fiddle seems to work fine at my end. Able to change the values. — Gilsha, Mar 27 '17 at 13:15
Yeah, But in practical, when you send those values to backend ou are passing null, since the valueField is description , You won't be able to save it in the database with that name, It has to be saved with the ID of that element itself, So that creates an issue.. Did you get it?? Gilsha — , Mar 27 '17 at 13:18
Yes Got it. Then you will have to fetch department IDs also in the `simpsonsStore`. You can't use ID only in the editor. So what you should do is, set the dataIndex as dept ID in the column and display name using the renderer. Then using valueField as ID in the editor will work. — Gilsha, Mar 27 '17 at 13:22
Try this way - http://jsfiddle.net/gilsha/kvtgfd7a/3/ Added field `dept_id` to the grid store. — Gilsha, Mar 27 '17 at 13:30
Gilsha, But That Doesn't seem to be correct.. Every Record can have Different Id, Moreover that's a Combobox right. and the ID you have added is on the record store. — , Mar 27 '17 at 13:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139160/discussion-between-john-humanyun-and-gilsha). — , Mar 27 '17 at 13:51
I didn't get the problem. Each record will be having a department and it will have its department id. In the editor, you will be using the unique list of departments as the store. — Gilsha, Mar 27 '17 at 13:51

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

1 Answers1