From Learn About the Ext JavaScript Library

Contents 1 Getting started with Ext 1.1 What is Ext all about? 1.2 How is Ext licensed? 1.3 What server platforms are compatible with Ext? 1.4 What other libraries are required to run Ext? 1.5 What is the proper include order for my JavaScript files? 1.6 Are there known compatibility issues with any of the third-party adapters? 1.7 Where is the source code and how to access to SVN? 2 Best practices for troubleshooting errors 3 Resolving specific issues 3.1 Maintain GridPanel scroll position across Store reloads 3.2 How to access existing HTML components 3.3 I get "Permission denied to call method XMLHttpRequest.open" from Ajax requests 3.4 How do I refresh a tabPanel-item or panel contents each time it's clicked or becomes active again? 3.5 How can I hide form fields and their labels? 3.6 I want to reload my Grid from a different URL 3.7 How can I add click handlers to specific Grid cells? 3.8 How can I make Grid rows each look different? 3.9 More Grid related questions 3.10 After calling load() on my Store, it is empty 3.11 Scripts in my Ajax-loaded markup are not executed 3.12 Ext.get does not get my Component 3.13 My tree node icons appear as leaf icons when in my mind I know that they may at some time have children. 3.14 What does the error "Ext is undefined" mean? 3.15 I get the error message: "XX has no properties" 3.16 My component does not show up when i add it via add() on the container 3.17 My component does not show up in Tab Panel after the tab is changed 3.18 My code links to extjs.com/s.gif 3.19 My code does not work in Internet Explorer, but it works fine in Firefox 3.20 I'm using a feature from YUI like menu, menubars, autocomplete... and it's getting put under my Grid (or other Ext element) 3.21 How to find JavaScript, (X)HTML, CSS and other errors (debugging) 3.22 Security Warning in IE using SSL 3.23 Ext does not work over HTTP, but does work locally

Getting started with Ext

What is Ext all about?

Ext is a client-side, JavaScript framework for building web applications. In early 2006, Jack Slocum began working on a set of extension utilities for the Yahoo! User Interface (YUI) library. These extensions were quickly organized into an independent library of code and distributed under the name "yui-ext." In the fall of 2006, Jack released version .33 of yui-ext, which turned out to be the final version of the code under that name (and under the open source BSD license). By the end of the year, the library had gained so much in popularity that the name was changed simply to Ext, a reflection of its maturity and independence as a layout:'fit',framework. A company was formed in early 2007, and Ext is now dual-licensed under the GPL and a commercial license. The library officially hit version 1.0 on April 1, 2007.

How is Ext licensed?

Ext has a dual-license model. We offer an open source LGPL license along with a per-developer, royalty-free commercial license. Details can be found on our licensing page. Please note that our licensing does NOT provide any support or SVN access — for support options (including premium forum access, SVN access, email support and more) please take a look at our support page.

What server platforms are compatible with Ext?

As a client-side framework, Ext can run against any server platform that can process POST requests and return structured data. Common choices include PHP, Java, .NET and many more. There are server-side frameworks available for most popular platforms that will make your life much easier when programming under the AJAX application model that Ext uses.

What other libraries are required to run Ext?

Up until version 1.0.1a, Ext required one of the following base libraries to be included: YUI, jQuery or Prototype/Script.aculo.us. Ext contains adapters that provide some of the basic plumbing utilities from those libraries, including Ajax support, animation, DOM manipulation, event handling, etc. Beginning with version 1.1, Ext includes a native Ext adapter, so the external libraries are no longer required.

Your choice of base libraries/adapters will most likely be driven by whether or not you already use an external library for something that Ext does not provide. For example, YUI includes some components like a history manager that Ext does not provide. In that case, you may want to include the YUI adapter. Or if you have already invested in a library in an existing application, but want to add Ext to it, you might consider the adapter for that library to keep the code size smaller. If you do not have either of those needs, the Ext adapter will provide the smallest footprint and most compatible support. Note: since the non-Ext adapters rely on external libraries, not all functions are guaranteed to be supported or bug-free.

What is the proper include order for my JavaScript files?

This same list is also included with the Ext download in the root folder in a file called INCLUDE_ORDER.txt. All Ext adapter files (and ext-base.js) can be found in the \adapters folder in the release. The libraries are listed in order of recommendation. Note: At the present time, Prototype/Scriptaculous support should still be considered experimental as there are several known bugs and unsupported functions that can cause problems with Ext.

Base Library	Include Order	Get Library
Ext Standalone	ext-base.js ext-all.js (or your choice of files)	http://www.extjs.com/download
Yahoo! UI (.12+)	yui-utilities.js (or your choice of YUI base files) ext-yui-adapter.js ext-all.js (or your choice of files)	http://developer.yahoo.com/yui/
jQuery (1.1+)	jquery.js jquery-plugins.js // required jQuery plugins ext-jquery-adapter.js ext-all.js (or your choice of files)	http://jquery.com/ http://docs.jquery.com/Plugins
Prototype (1.5+) / Scriptaculous (1.7+)	prototype.js scriptaculous.js?load=effects (or whatever you want to load) ext-prototype-adapter.js ext-all.js (or your choice of files)	http://www.prototypejs.org/ http://script.aculo.us/

Note for YUI users: Ext already includes yui-utilities.js, which is a convenience file containing the base YUI utilities (YAHOO, Event, Dom, Animation and Connection). If you do not otherwise use YUI, this should be sufficient for your needs — it is not guaranteed to be up-to-date with the most current release of YUI, but it is guaranteed to work correctly with Ext. If you need something in the most current release of YUI, you may need to supply your own copy of the utility files that you need.

Are there known compatibility issues with any of the third-party adapters?

• Certain animation effects (like highlight in particular) are known not to run properly under the jQuery or Prototype adapters as of Ext 1.1. This currently appears to be a bug in the Ext adapter implementation for these effects related to ignoring the from parameter. References: 1, 2
• DatePicker month navigation links stop working after a few clicks under jQuery. This is a jQuery bug that is being addressed by them for their next release. References: 1, 2
• Script tags can get incorrectly stripped when doing Ajax updates using the Prototype adapter. This is a known Prototype issue. References: 1

Where is the source code and how to access to SVN?

As specified here: Regarding SVN. Access to the Ext SVN (Subversion) repository is available to support subscribers only. The only source code that you can download is the latest code officialy released by the ExtJS team and is accessible from here.

Best practices for troubleshooting errors

Whether you're a seasoned JavaScript programmer or just starting out, the cause of problems can often be hard to track down. Here is a checklist you can work through when your code is not working as you expect it to work:

• If you're using released code, read the API documentation. This covers all the Ext classes, methods, config options etc. and includes interactive examples that you can learn from.
• If you're using pre-release code (beta or alpha code) the functionality that you were used to in a previous version may have changed and the new documentation for that code may not yet be complete. In that case, you may need to jump into the Ext code and see what it's doing firsthand. Using a debugger will make understanding the Ext library code much easier (see below).
• Double-check the simple things. Are all the proper script files included AND in the correct order? Did you misspell your object / method name?
• Make sure that you don't have any extra whitespace (like carriage returns or line feeds) between the return statement and the first opening curly brace ( { ) or it will always return null. For example, the wrong way:

var myExample = function()
    {
      return
      {
        foo: 'bar',
        boo: 'far'
      }
    };

Be sure the opening curly brace is on the same line:

var myExample = function()
    {
      return {
        foo: 'bar',
        boo: 'far'
      }
    };

If not, it'll be a pain to debug as trying to reference 'myExample.foo' or 'myExample.boo' will result in an error that they're undefined even though it seems they clearly are.

• Use a proper browser / plugin combination that will allow you to easily see where the error is occurring (Firefox + Firebug is a great choice).
• Include uncompressed source files during development when possible. While including ext-all.js is the preferred method for final deployment, you should stick to ext-all-debug.js during development so that variable names will be meaningful and you can step through the code on errors. (Note: to obtain the equivalent of an uncompressed ext-base.js, simply include the file /source/core/Ext.js followed by /source/adapter/ext-base.js found in the official download)
• Use a debugger. There are many options for this, including Firebug, Venkman, Visual Studio, MS Script Debugger, etc. See How-to: using Firebug to debug your script which is stickied in the Help forum. If you can simply set a break point and see what your values and objects are at runtime, you may figure out the issue much faster than making trial and error changes to your code (or adding alerts!).
• Add some error-handling. If you are getting a generic or vague error message, the actual error may be getting swallowed at a lower level -- this can happen frequently in ajax callbacks as YUI's ConnectionManager purposefully swallows errors if you don't use the debug version, so any error even in your callback, gets lost. If you know generally where the error is happening, try adding a try...catch block around it and see if that helps identify the issue.
• Break on All Errors. Sometimes an error will bubble up to the top of your application and it's almost impossible to figure out where it's originating from. When the Script tab in Firebug is active, the Options dropdown contains the choice "Break on All Errors." If you check this option, then Firebug will pause on the exact line where the error occurred as soon as it happens so that you can inspect the code and the current stack trace. This can really make debugging certain errors a lot quicker.
• Still haven't figured it out? Then please feel free to post to the Ext Help forum. If at all possible, you should post a link to a live page that shows the simplest working example of your problem. You should provide enough information so that others can see the problem. If you do that, you can be assured of the speediest response from the forum support team and others in the Ext community.

Resolving specific issues

Maintain GridPanel scroll position across Store reloads

Configure your GridView with the following options:

onLoad: Ext.emptyFn,
listeners: {
    beforerefresh: function(v) {
       v.scrollTop = v.scroller.dom.scrollTop;
       v.scrollHeight = v.scroller.dom.scrollHeight;
    },
    refresh: function(v) {
       v.scroller.dom.scrollTop = v.scrollTop + (v.scrollTop == 0 ? 0 : v.scroller.dom.scrollHeight - v.scrollHeight);
    }
}

How to access existing HTML components

Thanks to dj [1]

Your HTML code, for example here a button

<input type="submit" id="btnLaunch" value="Lancer" name="btnLaunch"/>

is NOT an Ext.Button.

An Ext.Button looks quite differently in HTML e.g. this is a button of one of my ExtJS applications

<table cellspacing="0" cellpadding="0" border="0" class="x-btn-wrap x-btn x-btn-text-icon" id="ext-comp-1169" style="width: auto;"><tbody><tr><td class="x-btn-left"><i> </i></td><td class="x-btn-center"><em unselectable="on"><button type="button" class="x-btn-text" id="ext-gen138" style="background-image: url(/img/settings.gif);">Profile</button></em></td><td class="x-btn-right"><i> </i></td></tr></tbody></table>

Ext.Button needs all those extra HTML to do it's work. Your normal HTML submit input element (not even a HTML button element ) can only be accessed as Ext.Element:

Ext.get('btnLaunch').dom.value = 'a test';

Ext.getCmp() can only get you the button object if you created that somewhere else.

E.g. I create the button mentioned above with

new Ext.Button({ 
                id:'settings-button', 
                text: 'Profile', 
                cls: "x-btn-text-icon", 
                icon: MMEPR.baseUrl + "img/settings.gif", 
                handler: this.showSettings, 
                scope: this, 
                renderTo: container 
            });

and can later get a reference to it with

var button = Ext.getCmp('settings-button');

I get "Permission denied to call method XMLHttpRequest.open" from Ajax requests

Ajax requests using the regular XMLHttpRequest mechanism can only be sent to a server in the same domain as the page was served from.

This is known as the Same Origin Policy

How do I refresh a tabPanel-item or panel contents each time it's clicked or becomes active again?

This behavior can be achieved one of two ways. The first method uses TabPanels' tabchange event to force a fresh of any newly selected tab item:

new Ext.TabPanel({
                    region:'center',
                    deferredRender:false,
                    activeTab:0,
                    defaults:{autoScroll:true},
                    listeners: {
                          tabchange: function(tp,newTab){
                                 var um = newTab.getUpdater();
                                 if(um) um.refresh();
                             }
                    },
                    items:[{
                        title: 'Refreshed Panel',
                        autoLoad:{url:'dynamicContent.php'},
 
                      }]
                  });

The second method registers the activate event on individual tab panels:

new Ext.TabPanel({
                    region:'center',
                    deferredRender:false,
                    activeTab:0,
                    defaults:{autoScroll:true},
                    items:[{
                        title: 'Refreshed Panel',
                        autoLoad:{url:'dynamicContent.php'},
                        listeners:{
                            activate : function(panel){
                                  panel.getUpdater().refresh();
                             }
                        }
                      }]
                });

How can I hide form fields and their labels?

See http://extjs.com/forum/showthread.php?t=11698#2 or http://extjs.com/forum/showthread.php?t=6710#2

I want to reload my Grid from a different URL

Usually, this question means that different parameters need to be passed to the same server script. The answer is Do not embed parameters in the DataProxy's URL

To add parameters to a Grid's server requests add a listener for its Proxy's beforeload event:

var proxy = new Ext.data.HttpProxy({
        url: '/DoSearch.php'
    });
 
//  Add the HTTP parameter searchTerm to the request
    proxy.on('beforeload', function(p, params) {
        params.searchTerm = searchValue;
    });

How can I add click handlers to specific Grid cells?

Add a listener for the Grid's cellclick event.

The listener is passed the row and column indexed clicked on. The column index may be used to determine which field was clicked on (Columns may be reordered by the user so using the column index as the field index is unsafe)

A cellclick event handler must find the relevant information like this:

function(grid, rowIndex, columnIndex, e) {
        var record = grid.getStore().getAt(rowIndex);  // Get the Record for the row
        var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name for the column
        var data = record.get(fieldName);
    }

How can I make Grid rows each look different?

You can use a function of your own to add a CSS class name of your own choosing to a Grid row depending upon the data in the underlying Record object.

Override the getRowClass function in the Grid's View with your function and return a class name string.

More Grid related questions

See this forum post.

After calling load() on my Store, it is empty

When using remote data (through an HttpProxy, or a ScriptTagProxy) Store.load() is asynchronous. It returns immediately after the request is sent to the server without blocking.

To perform postprocessing of returned data, use a callback to the load call, or add listeners to the Store's "load" and "loadexception"(most problems will be indicated here) events.

Scripts in my Ajax-loaded markup are not executed

Script execution in Ajax-loaded markup is not enabled by default for performance reasons. Script elements are extracted and executed optionally based upon either the global configuration option Ext.Updater.defaults.loadScripts, or options passed into the Updater.update method and the Element.update method.

Ext.get does not get my Component

Ext.get returns an Ext.Element object which is an abstraction of an HTML element object containing utility methods to perform DOM manipulation. It does not retrieve Components (e.g. Panels, Grids, form Fields, etc) by their id. To retrieve Components use Ext.getCmp.

My tree node icons appear as leaf icons when in my mind I know that they may at some time have children.

A Tree Node with no children is a leaf node. If you want a node to always have a certain icon, use the iconCls attribute to give it a class name eg:

myNode.appendChild(new AsyncTreeNode({
        text: "A folder",
        iconCls: "folder"
    });

Then specify appropriate CSS rules, eg:

.x-tree-node img.folder, .x-tree-node-collapsed img.folder{
    background: url("../images/default/tree/folder.gif");
}
 
.x-tree-node-expanded img.folder {
    background: url("../images/default/tree/folder-open.gif");
}

What does the error "Ext is undefined" mean?

This almost always means that you are missing one of your include files (or a path is invalid), or the include files are not in the proper order. Each include file depends on the previous one, and if anything in the chain is missing, an error will occur. This message simply means that Ext was never properly loaded, and the first piece of application code that calls into Ext will get this error.

This could also mean that the type attribute on one or more of your script tags is incorrectly set. For example:

<script type="text/javasscript" src="/somepath.js"></script>

<script type="text/javascript" src="/somepath.js"></script>

The first tag will not correctly load the javascript even if "somepath.js" is the correct location of your script file. (Notice the mis-spelling of javascript in the type attribute). The second tag will work just fine.

I get the error message: "XX has no properties"

It means that XX is not a valid object reference. This error is commonly caused by a reference to a non-existent (or non-available) element for which the specified id does not exist in the DOM. There are many cases in which you can specify an element by id. For example:

// constructors:
var tb = new Ext.Toolbar('toolbar');
 
// creating Element references:
var saveBtn = Ext.get('save-button');

The string passed must be the id attribute of a valid HTML element, e.g.

<div id="toolbar"></div>
<input id="save-button" type="button" value="Save" />

If an element with such an id does not exist in your document, has not yet been created, or if the code is executed before the DOM has been fully loaded (tip: always use Ext.onReady when your code depends on the availability of any DOM elements), then you will end up with an undefined variable that will throw this error message the first time you attempt to access it as an object.

My component does not show up when i add it via add() on the container

Call doLayout() on the container after you add any component to it.

My component does not show up in Tab Panel after the tab is changed

Set layoutOnTabChange: true in your Tab Panel config.

My code links to extjs.com/s.gif

Somewhere at the top of your code you should place a line like the following one, that tells Ext where to find the empty image it needs for some widgets (preferably from your own server/domain). Modify the URL as needed:

This cannot be preset to a value that exists on your server. We cannot predict where you will place your image directory!

Ext.BLANK_IMAGE_URL = '/images/ext/resources/images/default/s.gif';  // Ext 2.0
Ext.BLANK_IMAGE_URL = '/images/ext/resources/images/aero/s.gif';  // Ext 1.1

You can also read about it in the documentation.

My code does not work in Internet Explorer, but it works fine in Firefox

You might have an extra comma somewhere in your code that causes Internet Explorer to stop parsing the code correctly. The most common symptom is that your code works without any errors in other browsers, but not in IE. You can read more discussion about this issue in the forums. Here is an example of what to watch out for:

testFunc = function() {
    return {
        titlebar: true,                            
        collapsible: true,  // <--- BOOM goes the comma! :D
    }
}

or:

configOption: [
        arrayEl1,
        ArrayEl2,  // <-- Will NOT blow up here, but creates an extra element
    ]

This adds an extra element of value undefined to the end of the Array, and some Components which process Arrays may be adversely affected by this.

A helpful tool to use is JSLint, which parses and verifies the validity of your code. It's very handy in general, and will catch this problem easily.

Another way is to run the page in Opera with the Error Console set to display Javascript errors. This often pinpoints problem areas of code much better than IE.

If you have a minified version of your code, you can search their for ",]" or ",}", this way you can find some of the "extra commas". You can also search in your "not minified" code with regular expressions like ,[\s ]*\] .

I'm using a feature from YUI like menu, menubars, autocomplete... and it's getting put under my Grid (or other Ext element)

It's likely that the z-index of the menu or other element needs to be higher in the YUI CSS — YAHOO! sets them very low by default (e.g. 1). Also, you might try rendering your YUI component to the body element if appropriate. Z-index can only override other elements within the same container. Rendering to the body guarantees that a given element's z-index will always be respected.

How to find JavaScript, (X)HTML, CSS and other errors (debugging)

Probably one of the best tool combinations for debugging your application is to use the Mozilla Firefox browser with the Firebug addon and optionally the Web Developer addon. Another very useful tool is Venkman - the JS debugger.

If you're using Microsoft Internet Explorer you can try out the Microsoft Developer Toolbar plugin. There is also the DebugBar which is free for personal use.

For the Opera browser you can use the Opera Developer Tools or the alternative Web Developer Toolbar & Menu for Opera.

Safari users can use the Web Inspector to get an overview of the page or enable Debug menu in the browser.

Security Warning in IE using SSL

If you're getting that annoying security warning that asks you if you want to download insecure items in IE over SSL, don't fret. You just have to remember to set your BLANK_IMG_URL to the local version of s.gif. See above section 3.3 My code links to extjs.com/s.gif .

Ext does not work over HTTP, but does work locally

Rarely, there is an issue with Apache cutting off lengthy files — ext-all.js can get cut off mid-stream, which can lead to strange errors over HTTP while things work just fine served locally. There are various potential causes. See this forum thread for additional discussion and potential solutions.