0

I have a couple of grids, divided in an accordion layout. They basicly show the same kind of data so an grouped grid should do the trick, however it looks really good this way and so far it works good too.

Left of the grids there is a form panel which is used to edit grid records, when I click on a record in the grid the appropriate data shows up in the form. I can edit the data, but when I click the save button, which triggers an 'model'.save() action, the related grid row draws blank and a dirty flag appears. I checked the model and the 'data' attribute doesn't contain any data but the id, the data is present in the 'modified' attribute.

I read that the red dirty flag means that the data isn't persisted in the back-end, but in this case it is. The request returns with a 200 status code and success : true.

The onSave method from the controller:

onSave : function() {
    // Get reference to the form
    var stepForm = this.getStepForm();

    this.activeRecord.set( stepForm.getForm().getValues() );

    this.activeRecord.save();

    console.log( this.activeRecord );
}

The step store:

Ext.define( 'Bedrijfsplan.store.Steps', {
    extend : 'Ext.data.Store',

    require : 'Bedrijfsplan.model.Step',

    model : 'Bedrijfsplan.model.Step',

    autoSync : true,

    proxy : {
        type : 'rest',

        url : 'steps',

        reader : {
            type : 'json',

            root : 'steps'
        },

        writer : {
            type : 'json',

            writeAllFields : false,

            root : 'steps'
        }
    }
} );

Step model:

Ext.define( 'Bedrijfsplan.model.Step', {
    extend : 'Ext.data.Model',

    fields : [ 'id', 'section_id', 'title', 'information', 'content', 'feedback' ],

    proxy : {
        type : 'rest',

        url : 'steps',

        successProperty : 'success'
    }
} );

Step grid

Ext.define( 'Bedrijfsplan.view.step.Grid', {
    extend : 'Ext.grid.Panel',

    alias : 'widget.stepsgrid',

    hideHeaders : true,

    border : false,

    columns : [ {
        header : 'Titel',

        dataIndex : 'title',

        flex : 1
    } ]
 } );

I spend a couple of hours searching and trying, but I still haven't found the solution. Some help on this matter would be appreciated :)

2 Answers 2

0

Your model updating code: this.activeRecord.set( stepForm.getForm().getValues() );

Should work, but I might try splitting it into two lines and setting a breakpoint to verify that getValues() is returning what you're expecting.

Also ensure that you have the name attribute set for each field in your form and that it matches exactly to the names of fields in your model.

Finally, it's better to call .sync() on the store rather than .save() on the model when you're working with a model that belongs to a store. They option autoSync: true on the store will make this happen automatically each time you make a valid update to one of its models.

The BasicForm.loadRecord and BasicForm.updateRecord methods provide a nice wrapper around the functionality you're seeking that may work better:

onRowSelected: function(activeRecord) {
    stepForm.getForm().loadRecord(activeRecord);
}

onSaveClick: function() {
    var activeRecord = stepForm.getForm().getRecord();
    stepForm.getForm().updateRecord(activeRecord);
    activeRecord.store.sync();
}
4
  • Thanks, this pretty much solves my problem! One problem however, when the store sync's it creates an empty record which isn't saved to the back-end?
    – Jacob
    Commented Jan 5, 2012 at 13:25
  • Read up on model validation in the Data Package Guide, any model that does not pass validation will not be sent to the back-end when you call .sync(). Setup your model's validators so that the model doesn't get sent to the server until it is filled out enough to be saved. Commented Jan 5, 2012 at 18:49
  • I should've been a little clearer. The model is saved to the server, but when it is saved the store creates a NEW empty record out of nothing. For instance, the store has 2 records but after updating one to the server there suddenly are 3. Really strange behaviour. I didn't use validations so far.
    – Jacob
    Commented Jan 5, 2012 at 22:28
  • Well, I solved that last problem. I didn't realize that the step store I defined wasn't used at all but that a complete new store was defined because of a relation between two models. Within the storeConfig options I defined a proxy with a reader and everything works fine now :)
    – Jacob
    Commented Jan 5, 2012 at 23:08
0

The only oddity I see is with your: this.activeRecord.set( stepForm.getForm().getValues() );

I've always used .set() on the store never on the record. e.g.:

myDataStore.set( stepForm.getForm().getValues() );
1
  • A store doesn't have a method set()
    – Jacob
    Commented Jan 5, 2012 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.