1. #1
    Sencha User
    Join Date
    Mar 2009
    Posts
    12
    Vote Rating
    0
    cormip is on a distinguished road

      0  

    Default 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


    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.

  2. #2
    Ext User
    Join Date
    Nov 2008
    Location
    Oakland, CA
    Posts
    155
    Vote Rating
    0
    mohaaron is on a distinguished road

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


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

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

  4. #4
    Sencha User
    Join Date
    Mar 2009
    Posts
    12
    Vote Rating
    0
    cormip is on a distinguished road

      0  

    Default Working Case Works?!?

    Working Case Works?!?


    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.

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


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

  6. #6
    Ext User
    Join Date
    Nov 2008
    Location
    Oakland, CA
    Posts
    155
    Vote Rating
    0
    mohaaron is on a distinguished road

      0  

    Default


    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?

  7. #7
    Sencha User
    Join Date
    Mar 2009
    Posts
    12
    Vote Rating
    0
    cormip is on a distinguished road

      0  

    Default IsDirty issue resolved

    IsDirty issue resolved


    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.

Thread Participants: 2