Webinar Q&A: Sencha Architect – The Ultimate Visual App Builder

Last week, we conducted an in-depth demonstration on Sencha Architect, a visual app builder for Ext JS applications. The webinar was very well attended and we received many interesting questions during the course. This post provides answers to those questions.

If you missed the webinar, you can listen to the recording here.

How could I pass additional information, for example an API key or session id, in each REST request?

Additional headers can be appended to all REST requests by using the setDefaultHeaders method of the Ext.Ajax class:Ext.Ajax.setDefaultHeaders({
‘apiKey’: ‘abcd1234’
});

This code could be executed after a successful login to an application, and a token or API key has been retrieved from the remote server. These default headers will then be automatically added to any subsequent Ajax or REST request.

How can you render a button within the grid?

Ext JS Modern allows you to define a cellconfig on a column and add a Widget Cell. The Widget Cell accepts a custom widgetconfig that defines the type of component to be used within each cell in the column. This provides the ability to render a component like a Button, as shown in this Kitchen Sink example.

Adding a Widget Cell to the Column in Sencha Architect

 
This is how the code would look after adding the custom widgetconfig on the Widget Cell:

How can I make an Ext JS application responsive when the app is built using Sencha Architect?

Ext JS provides responsive capabilities by allowing the definition of a set of criteria or rules along with configs for each criteria/rule that will be applied to the component when that criteria is met. This is achieved through the component’s responsiveConfig config, for example:responsiveConfig: {
landscape: {
layout: ‘hbox’
},
portrait: {
layout: ‘vbox’
}
}

In the above example, the component’s layout will be dynamically changed whenever the screen orientation changes from landscape to portrait. The portrait criteria will also be met on a desktop environment when the browser viewport’s width is less than its height. You can also use JavaScript expressions as the criteria and there are various other named criteria that Ext JS provides, and these are covered in the documentation.

Sencha Architect doesn’t provide the responsiveConfigdirectly in the Config panel by default, but you can still add it as a custom property by typing “responsiveConfig” in to the search field within the Config panel, clicking the “Add” button, then setting its type to “Object” via the menu once it’s added:

You are then able to type the code for the responsiveConfigobject:

Ext JS also provides the ability to change the UI on initialization of the component by setting platform-specific criteria and configs via a platformConfig. This has the same structure as the responsiveConfig approach described above, where criteria or rules are defined along with configs for each criteria, but this is only applied on the initialization of the component rather than dynamically when the conditions change. Here is an example of defining a platformConfig:platformConfig: {
desktop: {
title: ‘A Much Longer Title’
},

‘!desktop’: {
title: ‘A Short Title’
}
}

You can find more details about platformConfig in the documentation here.

When using different development and deployment environments, is it possible to dynamically configure the Rest Proxy URLs rather than having to manually change them?

And can a base URL be set at the application level rather than setting a full URL on each proxy?

Normally within a Rest Proxy you would use a relative URL to reference the various data endpoints, e.g. “/customers/” or “../customers/”, rather than hardcoding a full URL like “http://myserver/customers/” or “https://myserver/customers/”. This assumes that the web application is running on the same server as the web services.

If you need to use a completely different domain or prefix then you may wish to set a base URL that all proxies in the application will incorporate when populating the full URL.

One way of accomplishing this is to set a baseUrl inside of app.json. You can also set this for the different build targets such as production, testing, and development, so that each build has its own URL. This can be useful if the application needs to point to a different web service for development or deployed versions of the app.“production”: {
“baseUrl”: “https://prod-server”,
…
},
“testing”: {
“baseUrl”: “https://test-server”,
…
},
“development”: {
“baseUrl”: “https://dev-server”,
…
}

You can then create an override for Ext.data.proxy.Rest, and incorporate this baseUrl in all of the Rest proxies by adding an override for buildUrl which obtains the baseUrl through Ext.manifest.baseUrl:Ext.define(‘Northwind.override.data.proxy.Rest’, {
override: ‘Ext.data.proxy.Rest’,

buildUrl: function(request) {
var me = this,
url = me.getUrl(request);

if (Ext.manifest.baseUrl !== undefined) {
url = Ext.manifest.baseUrl + url;

request.setUrl(url);
}

return me.callParent([request]);
}
});

You can easily create this override in Sencha Architect by searching for “Rest Proxy” in the Toolbox, right-clicking the entry in the Toolbox and selecting the “Create Override for this Class” option from the context menu.

Creating an override for the Rest Proxy in Sencha Architect

 
A new “Rest.js” file will be added under “Resources” in Project Inspector. You can then copy and paste the above code into that file:

Adding the custom code in to the override class

 
Each of your proxies can then be updated to remove the protocol/domain prefix, as this will be automatically prepended by the override above. So your proxy URL could look something like this:

/customers/

Which at runtime will be dynamically changed to the URL below for the development build:

https://dev-server/customers/

Try Ext JS

The free 30-day free trial includes the Ext JS framework along with 140+ UI components, Sencha Architect, Sencha Themer, IDE Plugins, Stencils, Inspector and more! Give it a try today.