Ext provides some support for this. You can send the model configuration by adding the metaData property to the server metaData . You can customize the property name using the metaProperty parameter.
The documentation does not make it obvious, but you can reconfigure the model fields this way. Here is an answer that will do this:
{ data: [...] ,metaData: { // This will be recognized and processed automatically // by the proxy fields: [ {name: "id", type: "int"}, {name: "myField", type: "string"}, ... ] // This one is for our own usage, see bellow ,columns: [ {dataIndex: "id", text: "ID}, {dataIndex: "myField", text: "My field"}, ... ] } }
As noted in the document, when the data model changes, you will also want to update your components. Sencha provided metachange for this. Please note that, being registered in the proxy server, this event will be transmitted by the store.
Finally, to update the grid column model, you use the reconfigure method. For example, you can change the grid class as follows so that it automatically reconfigures itself from the server response:
Ext.define('Base.GridPanel', { extend: 'Ext.grid.Panel' // ... // You can add your listener in initComponent, if you're // reluctant to extend a method docuemented as private... ,bindStore: function(store) { // unbind previously bind store, if any var previous = this.getStore(); if (previous) { previous.un('metachange', this.onMetaChange, this); } // bind to the meta change event this.getStore().on('metachange', this.onMetaChange, this); this.callParent(arguments); } ,onMetaChange: function(store, meta) { var columns = meta.columns; if (columns) { this.reconfigure(null, columns); } } });
Update
The onMetaChange method onMetaChange called on the metachange event, because I registered it as a listener with this line:
this.getStore().on('metachange', this.onMetaChange, this);
The event itself is fired when the proxy server detects some metadata in the server response. Specifically, this happens when the metaData property exists in the server response (or any other name that you could configure as a metaProperty proxy).
The listener is effectively passed the original metaData object, which is present in the response as its second argument (named meta in my example). Thus, your server can put any information you need (for example, new field labels, tooltips, etc.).
bindStore is a method that is already present in the GridPanel . Here I redefine it because I need a place to register an event listener in the store. As the name implies, this method is called to bind the repository to the component. This may be an initial store or a new one. I preferred to override this method instead of initComponent . If the repository will be changed later in the component resource, my user listener will be disconnected from the old repository and tied to the new one.
arguments keyword is Javascript idiosyncrasy. It represents all the arguments passed to the function. callParent is the sweety provided by Ext to invoke the parent method; it takes an array as arguments to be passed to the parent element. Thus, this.callParent(arguments) calls the parent method, not knowing which arguments of the overridden method. It is simpler, and it is also more resistant to future changes if the method arguments were to change ...
I would be happy to point you to an exhaustive guide to overriding Ext ... Unfortunately, I could not find it with a quick search: - /