Extjs 4 Dynamic Model

Load dependencies and create model

Code:

---

(function(){
    Ext.Loader.setConfig({
        enabled:true
    });
   
    Ext.Loader.setPath('App', '/assets/app');

    Ext.syncRequire([
        'App.model.EquipmentType',       
        'App.store.EquipmentTypes'
        ]);


   
    var eqStore = Ext.create('App.store.EquipmentTypes');
       
    eqStore.on('load', function(store, records) {
        var fields= [
        'id',
        'plan_type',
        "equipment_requested",
        "equipment_approved",
        'network_id',
        'network_name'
        ];

        Ext.each(records, function(eqType) {
            var eqId = eqType.get('id');
               
            fields.push({
                name: 'equipment_requested_' + eqId,
                mapping: 'equipment_requested[' + eqId + ']',
                defaultValue: 0
            });
               
            fields.push({
                name: 'equipment_approved_' + eqId,
                mapping: 'equipment_approved[' + eqId + ']',
                defaultValue: 0
            });
        });

        Ext.define('App.model.Planning', {
            extend:'Ext.data.Model',

            fields: fields,


            proxy:{
                url:'/planning.json',

                type:'rest',
                simpleSortMode:true,
                reader:{
                    type:'json',
                    root:'items'
                },
                writer:{
                    type:'json',
                    root:"items",
                    encode:true,
                    writeAllFields:false
                }
            }

        });   

    });
       
    eqStore.load();
   
   
   
})();

---

My MVC solution is to have an afterrender event on a grid to load dynamic columns, dynamic fields, and dynamic data/store.

Code:

---

onGridAfterRender: function(abstractcomponent, options) {
  var grid = this;
  if (grid != null && grid.store.data.items != null && grid.store.data.items[0] != null) {
      var rawData = grid.store.data.items[0].raw;
      var dynamicStore = new Ext.data.JsonStore({
          fields: rawData.fields,
          data : rawData.crossHoldingList
      });
      grid.reconfigure(dynamicStore, rawData.columns);
  }
}

---

The store on the grid was previously loaded with raw data. Here is the JSON

Code:

---

{
"columns": [
  {"id":"ticker","header": "Ticker", "width": 160, "dataIndex": "ticker"},
  {"header": "Company", "width": 75, "dataIndex": "company"},
  {"header": "Dynamic Col 1", "dataIndex": "dynamicCol1"},           
  {"header": "Dynamic Col 2", "dataIndex": "dynamicCol2"}
  ],
"fields": ["ticker","company","dynamicCol1","dynamicCol2"],
"dataList": [
{
  "company": "Red Hat",
  "ticker": "RHT",
    "dynamicCol1": "Some Data 1",
    "dynamicCol2": "Some Data 2"
 },
 {
    "company": "Intel",
    "ticker": "INTL",
    "dynamicCol1": "Other Data 1",
    "dynamicCol2": "Other Data 2"
  }
  ]
}

---

Hi,
Interesting thread and I was able to do this in Ext 3.x. Are there any new paradigms in Ext 4.x to facilitate doing this?

I agree a lot of short-lived model class definitions is silly. I also agree that losing models entirely and putting the dynamic fields only on the store isn't the best option.

A model that can be redefined on the fly (at the instance level) and a store that automatically changes with it is best.

Any news?