ExtJS 4.x: How to disable "dirty record" red corner in Ext.grid.Panel cells?

Question

I have an Ext.grid.Panel (aka gridpanel) with a store, used only for client-side visual effects (i.e., nothing gets saved to the server). When I create new model instances and add them to the store they are shown in the grid with a red corner (presumably indicating that store changes haven't been saved).

At the moment I'm calling the .commit() method on each record/model before it is added to the store to prevent the dirty record red corner in the grid.

Is there a more generic way of simply configuring a grid panel to not display any visual indicators regarding the "dirty" status of a record?

Note: The solutions in this similar question either involve CSS or only work for ExtJS 3. I'm hoping to find a programmatic "setting" that works for ExtJS 4.

Answer 1

Its working again in ExtJS 4.1.1. Use the markDirty configurationProperty in the gridview.

When you have a GridPanel, use it like this:

viewConfig:{
    markDirty:false
}

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.View-cfg-markDirty

Answer 2

Based on the responses here and on the Sencha forums, and after looking at the ExtJS source, the answer is basically:

No, there isn't a simple way (at least in 4.0.7) to configure a grid to not show the red corners without using CSS.

Thanks for all the brainstorming and additional info from everyone. I'm throwing this up so anyone who comes across this in the future can see a clear "answer" to my question.

Answer 3

One option would be to avoid using a remote proxy, and instead use a memory proxy with autoSync: true, then load the data into it manually with an Ext.Ajax.request call.

The remote proxies are pretty hard-coded to keep track of whether changes have been saved to the server or not.

If you want to keep track of whether they're saved to the server or not but just remove the visual indication with the corners, use CSS to change what "dirty" rows look like. If you want to completely remove that tracking, don't use a remote proxy.

Answer 4

I have a form with a checkbox that just represents transient data. Checking the box would mark the column dirty which didn't make sense for my cell. The other columns probably needed the dirty marks if they were not in sync. My solution which is inspired by @Roman's answer, but with more control over which columns get the treatment.

In the column config:

{
    xtype: 'checkcolumn',
    tdCls: 'no-dirty',
    dataIndex: 'selected',
    width: 50,
    text: 'Check'
},

In my CSS

.no-dirty.x-grid-dirty-cell
{
    background-image: none;
}

Answer 5

It works! But it's dirty as for me. Just for fast solution.

.x-grid-dirty-cell {
    background-image: none;
}

Answer 6

I have a similar setup, with a store that is backed by a localStorage proxy. When I get a dirty record in a grid using this store, I use commitChanges()(here from ExtJS 4.2.1) to sync the store with the grid and thereby removing the "dirty" marker.

Answer 7

Actually, there's another way to programatically fix this (a non-CSS hack) verified in ExtJS 4.2

record.modified = {};

or, more specifically,

delete record.modified[fieldName]

Answer 8

Well, I have got the solution for the dirty record,

steps to do:

• set modified property of record to blank object;

  e.g. record.modified = {};

• This should be done before calling the loadRecords() of ext, may be in model or store (you can overload onProxyLoad() method of Ext.data.Store )

fixes:

• dirty record red mark will be removed from grid
• update flow: it will pass only the modified fields in PUT call (in dirty loading, it passes all fields)

Answer 9

Try the write listener on store from the example in the answer for this question: EXT JS Store's Proxy: readers and writers