Introducing React ReExt – Sencha Ext JS Components in React! LEARN MORE

Top Support Tips: August 2014

August 13, 2014 116 Views

New Framework, New Doctype

by Greg Barry

In Ext JS 5, we support IE 8+, so we no longer encourage users to use the strict HTML 4 doctype. We now recommend using an HTML5 doctype. We also recommend the X-UA-Compatible meta tag to ensure Internet Explorer does not activate “Compatibility Mode” because this mode is not supported by Ext JS.

The following code snippet shows the ideal doctype and head for Ext JS 5.


You can find more information about recent changes in Ext JS in our What’s New in Ext JS 5 guide.

Overhaul your Overrides

by Greg Barry

Overrides can be a very helpful tool to expand or change functionality on core classes without having to modify the framework’s source code. Ext JS 4.1 brought about a new way to create these overrides for the framework. This new declarative-based override works well within the foundational principles of Ext JS 4 and Ext JS 5. These overrides can then be placed in your Sencha Cmd generated overrides folder. The overrides folder allows Cmd to automatically include the overrides. For instance, if you use Ext.grid.Panel, you can create a file at overrides/grid/Panel.js. This should be automatically included after bootstrap is refreshed via sencha app build, sencha app watch, or sencha app refresh.

This method of overriding can be seen throughout the framework within our own internal code style. Examples of internal overrides in action include: theming, localization, RTL, and much more.

That said, we still see old overrides from Ext JS 3 being incorporated into applications using newer frameworks. This creates the potential for timing issues when applying them to your new application architecture.

The preferred method of generating an override is as follows:
Ext.define(‘MyApp.overrides.panel.Panel’, {
override: ‘Ext.panel.Panel’,
close: function() {
console.log(‘My Change to Close’);
this.callParent(); // call the original method
helloWorld: function(){
console.log(‘Hello World’);

Let’s go over the syntax:

  1. First, define your override with an appropriate namespace for your application’s overrides folder.
  2. Add the override config and give it a value equivalent to the class you want to override. In this example, we’re overriding Ext.panel.Panel.
  3. Add the function you want to override. You’ll need to make sure you keep all of the relevant pieces. In this case, I’ve only changed the close function by adding a console log. If you were to create a panel and then do panel.close(), you will receive a console message saying, “My Change to Close”.

    Note: In your overridden method, you should execute this.callParent() if you need the overridden method to be called including the methods of any base classes.

  4. Add a new function altogether. As you may imagine, Ext.panel.Panel does not contain a “helloWorld” method. However, I’ve just added it via this override. Now, creating a panel and issuing panel.helloWorld() will result in logging the message “Hello World”.

As you can see, overrides are a powerful utility for customizing the framework for your application. If your overrides are still formatted in the Ext JS 3 manner, it may be time for an overhaul.

You can read more about the define mechanism here.

callParent(), a Little Bit Less

by Don Griffin

callParent is a method provided by the Sencha Class System (common to Ext JS and Sencha Touch) that is used to call methods in your base class. This is commonly done when you derive from a framework class and override a method it provides such as onRender. When you invoke callParent from a method that has parameters, you have two ways you can pass along those parameters to the base class method. You could use the shorthand arguments keyword like so:
Ext.define(‘App.view.MyPanel’, {
extend: ‘Ext.panel.Panel’,
onRender: function (parentNode, index) {

Or, you could explicitly pass these arguments in an array literal:
onRender: function (parentNode, index) {
this.callParent([ parentNode, index ]);

The differences may seem minor, but when you use the Sencha Cmd 5 new optimizations for callParent, performance improvements can be profound. With the optimizer enabled, these two methods are optimized as follows:
onRender: function (parentNode, index) {
Ext.panel.Panel.prototype.onRender.apply(this, arguments);

onRender: function (parentNode, index) {, parentNode, index);

In the second case, the optimizer is able to use the call method on the JavaScript Function instead of apply. We also avoid using arguments. Both of which are well-known high performance no-no’s. It turns out that we even avoid creating the array literal. Obviously, just enabling the optimization is helpful, but in code where performance is most critical, it is worth replacing arguments with the explicit array.

If you have questions, visit the forum.

Start building with Ext JS today

Build 10x web apps faster with 140+ pre-build components and tools.

Latest Content
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s…

JavaScript Design Patterns: A Hands-On Guide with Real-world Examples
JavaScript Design Patterns: A Hands-On Guide with Real-world Examples

As a web developer, you know how popular JavaScript is in the web app development…

Virtual JS Days 2024のハイライト
Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript…

See More