Changed isDirty/trackResetOnLoad behavior in 3.0-rc2 froim from 2.2.1

**cormip** · 27 Jun 2009 2:00 PM

I have a simple form (in a tab) that loads data via AJAX. I have it set up that the "Save" button only appears if the form is edited. I use the clientvalidation event to check if the form isDirty and display the "Save" button if true. This worked perfectly in v2.2.1 (FF3, IE7, IE8, etc.).

Now, trying to migrate to v3.0-rc2, the form comes up isDirty true from the loading of data. Monitoring the clientvalidation event in Firebug indicates form.isDirty becomes true after I intiate the loading of data and before the actioncomplete event fires. This did not occur before. So I think, OK, no problem, I'll just use startMonitoring() in the actioncomplete "load" event. Well, when I do this the clientvalidation event never fires, ever. So I can't check isDirty. It seems like the startMonitoring() method doesn't work.

Has anyone been able to make something like this work in 3.0-rc2?

Code:

frmSettingsExternalTools = new Ext.FormPanel({
    trackResetOnLoad: true,
    items:{
        xtype:"fieldset", 
        etc...


frmSettingsExternalTools.on({
    actioncomplete: function(f, action){
        switch(action.type){
            case "load":{f.startMonitoring();break;}
            case "submit":{Ext.Msg.show({title:'Save Settings', msg: 'Your settings have been successfully saved.', buttons: Ext.Msg.OK, icon: Ext.MessageBox.INFO}); break;}
        }
    },
    actionfailed: function(f, action){
        switch(action.type) {
            case "load": {Ext.Msg.show({title:'Save Settings', msg: 'An error has occurred while retrieving your settings from the server. Please try reloading this tab.', buttons: Ext.Msg.OK, icon: Ext.MessageBox.WARNING});break;}
            case "submit": {Ext.Msg.show({title:'Save Settings', msg: 'The submitted form contains invalid entries. Please correct before resubmitting.', buttons: Ext.Msg.OK, icon: Ext.MessageBox.WARNING});}
        }
    },
    clientvalidation: function(f, v){
       if(f.form.isDirty()){
              Ext.getCmp('btnSaveExternalToolsSettings').show();
       }
    }
});

Paul Cormier
WinCorp Software, Inc.

**mohaaron** · 29 Jun 2009 8:17 AM

I don't have an answer to I am also having a problem with IsDirty. I started a thread about it here http://extjs.com/forum/showthread.php?t=72621. I wanted to add to your thread to keep myself informed and try and help solve this problem.

**mjlecomte** · 29 Jun 2009 9:42 AM

I'd post a working test case so someone could help you test:

http://extjs.com/learn/Ext_Forum_Hel...rking_showcase

**cormip** · 29 Jun 2009 8:21 PM

OK, I built a working case (below) that works exactly how I expect it to. I based it on the AJAX Load Form example. It works exactly like I want it to. Now to find out why my actual code doesn't. There are no apparent differences other than my actual form is more complicated?!? I'll post again when I figure it out.

Example below: Save button only appears when form is edited

Code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>Title</title>
        <link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/ext-3.0-rc2/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://extjs.com/deploy/ext-3.0-rc2/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.com/deploy/ext-3.0-rc2/ext-all-debug.js"></script>
        <script type="text/javascript">
        Ext.BLANK_IMAGE_URL = 'http://extjs.com/deploy/ext-3.0-rc2/resources/images/default/s.gif';
 
Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var fs = new Ext.FormPanel({
        frame: true,
        title:'XML Form',
        labelAlign: 'right',
        labelWidth: 85,
        width:340,
        waitMsgTarget: true,
        monitorValid:true,
        trackResetOnLoad: true,

        // configure how to read the XML Data
        reader : new Ext.data.XmlReader({
            record : 'contact',
            success: '@success'
        }, [
            {name: 'first', mapping:'name/first'}, // custom mapping
            {name: 'last', mapping:'name/last'},
            'company', 'email', 'state',
            {name: 'dob', type:'date', dateFormat:'m/d/Y'} // custom data types
        ]),

        // reusable eror reader class defined at the end of this file
        errorReader: new Ext.form.XmlErrorReader(),

        items: [
            new Ext.form.FieldSet({
                title: 'Contact Information',
                autoHeight: true,
                defaultType: 'textfield',
                items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        width:190
                    }, {
                        fieldLabel: 'Last Name',
                        name: 'last',
                        width:190
                    }, {
                        fieldLabel: 'Company',
                        name: 'company',
                        width:190
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        width:190
                    }

                ]
            })
        ]
    });

    // simple button add
    fs.addButton('Load', function(){
        fs.getForm().load({url:'xml-form.xml', method:'GET', waitMsg:'Loading'});
    });

    // explicit add
    var submit = fs.addButton({
        text: 'Save',
        id:'btnSave',
        hidden:true,
        handler: function(){
            fs.getForm().submit({url:'xml-errors.xml', method:'GET', waitMsg:'Saving Data...'});
        }
    });

    fs.render('form-ct');

    fs.on({
        actioncomplete: function(form, action){
            if(action.type == 'load'){
                submit.enable();
            }
        },
        clientvalidation: function(f, v){
           if(f.form.isDirty()){
                  Ext.getCmp('btnSave').show();
           }
        }
    });

});

// A reusable error reader class for XML forms
Ext.form.XmlErrorReader = function(){
    Ext.form.XmlErrorReader.superclass.constructor.call(this, {
            record : 'field',
            success: '@success'
        }, [
            'id', 'msg'
        ]
    );
};
Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);
        </script>
 
    </head>
    <body>
        <div id="form-ct"></div>
    </body>
</html>

P.S. I also tried a stripped-down version that used the default JSON form data loader and it worked fine as well.

**mjlecomte** · 29 Jun 2009 8:25 PM

I am confused, do you have a problem or not? Or once you made the working showcase you found that it works ok now?

**mohaaron** · 30 Jun 2009 10:35 AM

I haven't been able to put my own test case together yet but I did just find that when I have trackResetOnLoad: true then it almost works except that it shows some DisplayField's as being dirty when I change a grid row and refetch the form data. I thought that DisplayFields would not affect isDirty.

The 3.0-rc2 docs say: "A display-only text field which is not validated and not submitted".

So why is this happening?

**cormip** · 30 Jun 2009 3:07 PM

What I found the difference to be was the event used to load the form. Here is what has changed from v2.2.1 to v3.0-RC2:

Firstly, my form is embedded in a TabPanel tab. I was using the tabchange event to trigger loading the form data. isDirty would only become true in v2.2.1 when that form was then subsequently edited.

In v3.0-RC2, isDirty becomes true when the form data first loads. (not good)

The Solution:

I changed the form load to occur from the form's "render" event instead of the parent TabPanel's "tabchange" event, and it solved my problem. isDirty once again is only true once the form is edited after it has been initially loaded.

Hopefully, this can help others with similar isDirty issues.

Paul Cormier
WinCorp Software, Inc.

Changed isDirty/trackResetOnLoad behavior in 3.0-rc2 froim from 2.2.1

Thread Tools

Search Thread

Display

Changed isDirty/trackResetOnLoad behavior in 3.0-rc2 froim from 2.2.1

Changed isDirty/trackResetOnLoad behavior in 3.0-rc2 froim from 2.2.1

Working Case Works?!?

Working Case Works?!?

IsDirty issue resolved

IsDirty issue resolved