View Full Version : [NOREPRO] [4.0.2a] TreeStore doesn't clear dirty flag on updated record

20 Jul 2011, 8:05 PM

Ext version tested:

Ext 4.0.2a

Browser versions tested against:

FF 6


Modifying a record and performing a sync doesn't clear the dirty status.

Steps to reproduce the problem:
Run code
Click change button
Click Manual sync button

The result that was expected:

After calling the 'update' web service method (which should just return { success : true }, the record is still showing as dirty in the treegrid.

The result that occurs instead:


Test Case:


This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact: http://www.sencha.com/contact

GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.


Ext.onReady(function() {
//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', mapping :'task', type: 'string'},
{name: 'id', mapping :'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}

var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
autoSync : true,
proxy: {
type: 'ajax',
//the store will get the content from the .json file
api:{ read : 'treegrid.json', update : 'update', create : 'create' }
folderSort: true

//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
tbar : [
text : 'Change item',
handler : function() {
store.getRootNode().childNodes[0].set('task', 'foo');
text : 'Add item',
handler : function() {
store.getRootNode().appendChild(new store.model({'task' : 'foo', leaf : true}));
text : 'Manual sync',
handler : function() {
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'task'
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'Duration',
flex: 1,
sortable: true,
dataIndex: 'duration',
align: 'center',
//add in the custom tpl for the rows
tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
formatHours: function(v) {
if (v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true


Screenshot or Video:


See this URL for live test case: http://

Debugging already done:


Possible fix:

not provided

Additional CSS used:

only default ext-all.css
custom css (include details)

Operating System:

WinXP Pro

26 Jul 2011, 2:53 PM
I think I've run into the same issue. In my case it's a childNode within the TreeStore that is still marked as dirty after sync runs.

Haven't found a work-around yet, if anyone has one please share.

26 Jul 2011, 3:33 PM
Verified, thanks

27 Sep 2011, 1:02 AM
The fix is same as with other stores(problem is not only on treestore):

put this function in your store

onUpdateRecords: function (records, operation, success) {
records = operation.records;
if (success) {
Ext.each(records, function(record){
if (record.dirty) {