One of the little known features of Ext JS is renderSelectors. It is used mostly internally but can come handy from time to time on the application side, too. The main purpose of the renderSelectors is to support compound Component templates: when you create a Component that consists of several DOM elements, grabbing the references […]
In a big application, Controllers often need to communicate between each other in both directions; i.e. requesting some information and acting upon receiving it. Direct method calls are usually used for this: Ext.define('My.controller.Foo', { extend: 'Ext.app.Controller', onPanelButtonClick: function(button) { // Before dispatching a message to Bar, we need to ask Baz // if it has […]
This is a kind of follow up to the last year’s “Improving Ext JS MVC Implementation” post. Since then I have joined Sencha and have been working on Ext JS team for several months. Bringing MVC improvements into Ext JS core made all kinds of sense, so here goes. In any application that has more […]
In a typical real world application there might be quite a number of Views and Controllers similar to each other but doing different things, e.g., operating on different data sets. It is inefficient to repeat the same code over and over in different classes, and some code sharing technique is required. For Views, we can […]
Oftentimes we need to control multiple instances of the same View class, and in majority of such cases we can share the same Controller instance between all of these Views. The key here is to make use of `xtype` and properly configured component selectors. Suppose that we have a form; in that form we need […]
Sometimes you need to work with DOM elements in your custom Components, or stock Ext JS Components do not fire events in certain conditions that you would like to react to in your Controllers. What do you do in such case? You can refire DOM event as Component event. Suppose you want Panel’s `mouseover` events […]
UPDATE: The ideas and code described in this article have been incorporated into the Ext JS MVC subsystem; the solution has been released as part of Ext JS 4.2. The Ext.ux.Application is still relevant for Ext JS 4.1 applications though. Anybody who has been working with Ext JS 4.x probably tried to use what […]
A gem I’ve just found in Ext.ux.statusbar.StatusBar code: every setText() you call, it’s forcing full page reflow. Try this: setStatus : function(o) { var me = this; o = o || {}; // Ext.suspendLayouts(); if (Ext.isString(o)) { o = {text:o}; } if (o.text !== undefined) { me.setText(o.text); } if (o.iconCls !== undefined) { me.setIcon(o.iconCls); } […]