In the same way that we designed our application by looking at the data layer first, we'll write the Ext JS model and store code first. Here's the model, which we'll build bit-by-bit to explain the thought process behind the code:

Ext.define('ArchitectureCms.model.Page', {
   extend: 'Ext.data.TreeModel',
fields: [
        { name: 'body' },
        { name: 'stub' },
        { name: 'text' },
        { name: 'published' }
    ]
});

Let's look back at our design for this class. We're defining the same fields we laid out there with the exception of the children field, which is a special case as we're using Ext.data.TreeModel.

Of course, this isn't enough to drive a real-world Ext JS model. This is where the design now differs from the implementation. Let's connect the model to the client's API:

Ext.define('ArchitectureCms.model.Page', {
    extend: 'Ext.data.TreeModel',
 
    fields: [
        { name: 'body' },
        { name: 'stub' },
        { name: 'text' },
        { name...