Top Support Tips

ExtraParams in Ext JS 5

by Greg Barry

Ext JS 4 allowed users to append extraParams directly to a connection like so:
Ext.Ajax.extraParams = { foo: “bar” };

Due to changes in the Ext JS 5 data package, this is no longer a viable solution. You should now use the setExtraParams() and getExtraParams() methods provided by Ext.data.Connection.

For instance:
Ext.Ajax.setExtraParams({
foo: “bar”
});

For more information about these methods, please review the following resources:
Ext.data.Connection

You can see this functioning in a real world situation by viewing this Fiddle’s headers for “List” in the Network Tab.

Dynamic Fields and Grid Columns in Ext JS 4

by Seth Lemmons

Changes to the Ext JS 5 data package have made flexible data much easier to work with. However, if you’re using Ext JS 4, you can use a couple lesser-known pieces of the framework to accomplish similar elasticity.

Developers don’t always have control over what dataset fields are returned to their application from the server. If you work in an environment where data is collected from multiple sources, this may very well be a recurring challenge. The data signature may change frequently and without notice from the data owner. Users often statically set fields on the model/store config (or columns on a grid). However, you can take advantage of the metachange event along with the returned metaData key to make your data more flexible.

Note: the metachange event is only fired for JSON readers at this time.

If the server response contains the key “metaData”, configurable using the reader’s metaProperty config, a number of items will be utilized from the metaData response. The root for any passed data records can be defined here as well as the fields used for the records in the store. If the records object is passed in the metaData object, the fields will be applied to the store/model using the reader automatically.

Additional information relevant to the response may also be passed back in the response as well. For example, an array of column configs for an associated store could be passed in and dynamically applied by using the store’s metachange event.

When metaData is passed back in the response, the metachange event will be fired, so its handler can fetch any data passed back and incorporate it.
var store = Ext.create(‘Ext.data.Store’, {
// …
listeners: {
‘metachange’: function(store, meta) {
myGrid.reconfigure(store, meta.columns);
}
}
});

Ideally, you don’t want to reconfigure your grid on every load unless a reconfigure of the fields/columns is needed. That said, it’s best to only pass back the metaData in the response when there is a change in the fields or columns.

For more information about the metachange event and the metaData config, please see the following resources:

• metachange
• metaData