[Solved] Model CRUD multi-model page with header and grid

Since the Model CRUD framework doesn't inherently support multi-model pages (yet), you'll have to use it for Model1 and meet it halfway by implementing the extra functionality for Model2. Here's an outline of what needs to be done:

1. Create a single-level CRUD page for Model1 with a custom layout (see Showcase for an example of a page with a custom layout). In the custom layout you'll need to add an editable grid for Model2 which will send/retrieve its data with the rest of the page. The framework will handle most of the work here as long as you properly setup the grid.

   This is how to do it:

   {
     xtype: 'editorgrid'     // allows user to edit fields
     ,name: 'Model2'         // must provide a name which is used as the key for the model json
     ,isChildGrid: true      // must be provided for the framework to automatically handle your grid
     ,allowChildCreate: true // allows user to create new instances of Model2
     ,store: {
       xtype: 'jsonstore'
       ,idProperty: 'SysId'  // allows records to be uniquely identified by their surrogate id
       ,root: 'Model2'       // should be the same as the grid's name
       ,fields: [
         'SysId'
         ,{ type: 'boolean', name: '_isdeleted' }  // field used to tell whether an instance is marked for deletion
         ...
       ]
     }
     ,columns: [ ... ]
   
     // other properties for the grid
     ,autoHeight: true
     ,border: true
   }
   

   Other than those special properties, this is just the standard config for an Ext Grid configured with a JsonStore. Editable fields should be marked editable: true, required fields marked allowBlank: false, and each column's dataIndex should match with the corresponding field's name.

   Note: Because of implementation details in the Model CRUD framework, you will have to add this grid as one of the fields within the prepareFields function:

   prepareFields: function(fields) {
     fields.add({ xtype: 'editorgrid', ... });
   }
   

   Then you can reference it within your layout:

   buildLayout: function(fields) {
     ...
     fields.get('Model2')   // use the exact same string you supplied for the name property
     ...
   }
   

2. On the server-side, create a listener by extending BaseModelResourceListener. You'll need to override methods to write & fetch data for Model2:

   • onViewExecuted: If you have a detailViewName set, you'll need to implement this to add the data for Model2 in the JSON before it gets returned to the client.

   • onActionScreenExecuted: If you're going to be executing actions (other than create) on Model2 objects, you'll have to do the same in this method.

   • onActionExecuted: You'll have to implement this to write Model2's data. It should appear in the JSON from the client as an array of objects under whatever name you set for the grid.

   Some things to keep in mind:

   • You should use ModelDataService for reading/writing the instances of Model2 and JSONService for converting them to/from JSON.

   • If you want to support deleting instances, note that records that were marked for deletion will come back to the server with _isdeleted set to true.

   • This is the structure of the data passed between client and server:

     {
       fields: [ ... ]
       ,model: {
         'Model1Field1': 'val'
         ,'Model1Field2': 'val'
         ...
         // You're adding this data in onViewExecuted()/onActionScreenExecuted()
         // and reading it in onActionExecuted().
         ,'Model2GridName': [
           { 'Model2Field1': 'val', 'Model2Field2': 'val', '_isdeleted': false }
           ,{ 'Model2Field1': 'val', 'Model2Field2': 'val', '_isdeleted': true }  // this one is marked for deletion
         ]
       }
     }
     

That should cover pretty much everything. If you need clarification on anything, let me know.