1-n Relationship, correct approach

[amanfredi]

Hi, I'm quite a noob in ExtJs development and I'm facing a problem handling 1-n relationships in domain entity edit. I've an entity with six 1-n children (like order - detail), I've a view with normal form fields (entity properties) and six grid panels with childrens. Each grid panel is attached to a local store wich is loaded when entity is loaded. When submit button is pressed, the entire entity (with children) is rebuilt and sent to the server (.NET WCF backend).

Is it the proper way to handle 1-n relationships or exists a better approach? Every time I must load stores and retrive from them modified data, is there a better way?

I use form with loadRecord and getRecord, can i load/retrive data from/to stores/grids with them directly?

Thank you in advance

[tobiu]

take a look at:
http://docs.sencha.com/ext-js/4-0/#!...ta.Association

-> hasMany

[amanfredi]

Hi, thank you for the suggestion, my model has the 1-n relationship defined on it with has many. With it how can i bind the user interface?

[amanfredi]

I've a controller like this. This is a full controller which has the same problem. I'v a document (Documento in italian) that has a set of attachments (Allegato) that i show in a grid. Now the binding is done by hand (i don't use a store for it, i've a search list and then a ws call get the item detail and wrap it into a model instance in succeededLoad) and then the item is bound to UI. The problem now is the 1-n attachment list. At the moment i fill the grid's store and retrive data from it at post (not a good solution i think) in executeSave.

My problem is related to this:

http://www.sencha.com/forum/showthread.php?144756-Why-doesn-t-Ext.create(-Model-...)-load-associated-model-data&highlight=model+associations

I modified the reader according to this post and now i can read associated data. Now i set the grid store like this:

allegatiGrid.getStore().loadRecords(modelInstance.Allegati().getRange(), { addRecords: false });

I've only one problem, i must write the modified model to the server, how can i get JSON from model?

Ext.define('GestioneDocumenti.Web.controller.controllerDocumentoCartaIdentita', {    extend: 'Ext.app.Controller',
    views: [
     'find.findViewDocumentoCartaIdentita',
     'edit.editViewDocumentoCartaIdentita'
   ],
    models: [
     'DocumentoCartaIdentita',
     'Allegato'
   ],
    init: function () {
        this.control({
            'editViewDocumentoCartaIdentita': {
                render: this.onPanelRendered
            },
            'editViewDocumentoCartaIdentita button[action=save]': {
                click: this.executeSave
            },
            'editViewDocumentoCartaIdentita button[action=undo]': {
                click: this.executeUndo
            },
            'editViewDocumentoCartaIdentita button[action=delete]': {
                click: this.executeDelete
            },
            'findViewDocumentoCartaIdentita button[action=search]': {
                click: this.executeSearch
            },
            'findViewDocumentoCartaIdentita  button[action=undosearch]': {
                click: this.executeUndoSearch
            },
            'findViewDocumentoCartaIdentita  grid': {
                itemdblclick: this.load
            }
        });
    },
    onPanelRendered: function () {


    },
    executeSave: function (button, event, eOpts) {
        try {
            var form = button.up('panel').up('panel').down('form').getForm();
            var record = form.getRecord();
            var fields = form.getValues();


            record.set(fields);


            var storeAllegati = button.up('panel').up('panel').down('grid').getStore();


            record.data.Allegati = [];
            for (var index in storeAllegati.getRange()) {
                var allegato = storeAllegati.getRange()[index];


                record.data.Allegati[index] = allegato.data;
            }


            if (!form.isValid()) {
                Ext.Msg.alert("", "La form contiene campi non validi");


                return;
            }
            if (!modelValidatorHelper.validate(record, form))
                return;


            GestioneDocumenti.Service.IDocumentoCartaIdentitaService.SaveDocumentoCartaIdentita(securityHelper.getLoginToken(), record.data, serviceHelper.successSaveStandard, serviceHelper.failureStandard, applicationInstance.getController('controllerDocumentoCartaIdentita'));
        }
        catch (e) {
            logHelper.log(e);
        }
    },
    executeUndo: function (button, event, eOpts) {
        try {
            var form = button.up('panel').up('panel').down('form').getForm();
            form.reset();


            var workspace = button.up('tabpanel');


            if (workspace != undefined)
                workspace.remove(workspace.getActiveTab());
        }
        catch (e) {
            logHelper.log(e);
        }
    },
    executeDelete: function (button, event, eOpts) {
        try {
            var form = button.up('panel').up('panel').down('form').getForm();
            var record = form.getRecord();
            var fields = form.getValues();


            GestioneDocumenti.Service.IDocumentoCartaIdentitaService.DeleteDocumentoCartaIdentita(securityHelper.getLoginToken(), record.data.Id, serviceHelper.successDeleteStandard, serviceHelper.failureStandard, button);
        }
        catch (e) {
            logHelper.log(e);
        }
    },
    executeSearch: function (button, event, eOpts) {
        try {
            var form = button.up('form').getForm();
            var model = Ext.ModelMgr.getModel('GestioneDocumenti.Web.model.DocumentoCartaIdentita');
            var modelInstance = new model(form.getValues());


            var resultList = button.up('panel').up('panel').down('grid');


            resultList.store.getProxy().extraParams['filter'] = Ext.JSON.encode(modelInstance.data);
            resultList.store.load();
        }
        catch (e) {
            logHelper.log(e);
        }
    },
    executeUndoSearch: function (button, event, eOpts) {
        try {
            var form = button.up('form').getForm();
            form.reset();
        }
        catch (e) {
            logHelper.log(e);
        }
    },
    load: function (grid, record, item, index, e, eOpts) {
        try {


            GestioneDocumenti.Service.IDocumentoCartaIdentitaService.GetDocumentoCartaIdentita(securityHelper.getLoginToken(), record.data.Id, this.succeededLoad, serviceHelper.failureStandard, null);


        }
        catch (e) {
            logHelper.log(e);
        }
    },
    succeededLoad: function (data) {
        try {


            var model = Ext.ModelManager.getModel('GestioneDocumenti.Web.model.DocumentoCartaIdentita');
            var modelInstance = new model(data);
            var name = "CI: " + modelInstance.data.Nome + " " + modelInstance.data.Cognome;


            var control = Ext.create('GestioneDocumenti.Web.view.edit.editViewDocumentoCartaIdentita');
            control.down('form').loadRecord(modelInstance);


            var allegatiGrid = control.down('grid');
            var modelAllegato = Ext.ModelMgr.getModel('GestioneDocumenti.Web.model.Allegato');


            for (var index in modelInstance.data.Allegati) {
                var allegato = new modelAllegato(modelInstance.data.Allegati[index]);


                allegato.data.AllegatoKind = "gniria";


                allegatiGrid.getStore().add(allegato);
            }


            applicationInstance.getController('app').addWorkspace(control, name);
        }
        catch (e) {
            logHelper.log(e);
        }
    },
    succeededReload: function (data) {
        try {


            var workspace = Ext.getCmp("tabWorkspace");


            if (workspace != undefined)
                workspace.remove(workspace.getActiveTab());


            this.succeededLoad(data);


        }
        catch (e) {
            logHelper.log(e);
        }
    }
});

Thank you.