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.

Bicephalous

You want a solution that doesn't involve CSS (the standard solution). Is this because you want the user to be able to set whether the dirty triangle is shown? What about a method that adjusts the CSS programmatically based on user interaction? ExtJS has methods to do this but it would involve CSS. – Raja

Thanks. I did a quick dive into the ExtJS source and confirmed that there's no programmatic way of "configuring" the grid to not display the red corners. You're right--CSS (in some form) is the only way to do this without bothering to commit models, sync stores, etc. – Bicephalous

Answer 1

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.

Bicephalous

Since Ext 4.1.0 betas you can now use viewConfig:{ markDirty:false } – Armington

I've been using the viewConfig since 4.0. Never detected issues with it...Another approach may be to add a listener for a record change and immediately trigger a record.commit().... ( or even store.commitChanges() if that can be applied to you...) – Yoheaveho

Answer 2

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

Horwitz

Worked fine for TreePanel too. – Bootery

I know this is an old post, but for ExtJS 4.2+, the GridView has a property markDirty which you can set to false. – Bach

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.

Crankcase

Thanks for the tips on the memory (vs. remote) proxy. In this particular case I'd prefer to have the store load itself, so your answer helps confirm that it's really going to need to be a CSS-based solution – Bicephalous

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;
}

Urata

Answer 5

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

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

Shastashastra

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.

Orren

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]

Phenomenal

Or record.commit() immediately after changing a record. But markDirty is the best way. – Yeeyegg

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)

Jabe

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

Overly

Thanks, but that's pretty much what I'm doing already (calling .commit() on each record). Was hoping to avoid that and just "flip a switch" on the GUI to not display the red corners. – Bicephalous