Book Image

Ext JS 3.0 Cookbook

Book Image

Ext JS 3.0 Cookbook

Overview of this book

Using Ext JS you can easily build desktop-style interfaces in your web applications. Over 400,000 developers are working smarter with Ext JS and yet most of them fail to exercise all of the features that this powerful JavaScript library has to offer. Get to grips with all of the features that you would expect with this quick and easy-to-follow Ext JS Cookbook. This book provides clear instructions for getting the most out of Ext JS with and offers many exercises to build impressive rich internet applications. This cookbook shows techniques and "patterns" for building particular interface styles and features in Ext JS. Pick what you want and move ahead. It teaches you how to use all of the Ext JS widgets and components smartly, through practical examples and exercises. Native and custom layouts, forms, grids, listviews, treeviews, charts, tab panels, menus, toolbars, and many more components are covered in a multitude of examples.The book also looks at best practices on data storage, application architecture, code organization, presenting recipes for improving themóour cookbook provides expert information for people working with Ext JS.
Table of Contents (15 chapters)
Ext JS 3.0 Cookbook
About the Author
About the Reviewer

Preventing naming conflicts and scoping non-global variables

Naming conflicts and scoping problems increase as applications gain size, and you start to work with multiple code files and modules. In Ext JS, you can resolve these issues by creating namespaces where you can logically organize your code.

How to do it…

The following steps will show how to create a namespace and "hide" local variables in it. These variables will not collide with similarly-named variables that are stored in other namespaces or have global scope:

  1. 1. Define a namespace for the variables that are not global:

  2. 2. Create a local variable and a global variable with the same name:

    Ext JSCookbook.Samples.var1 = 'var1 (local)';
    // ExtJSCookbook.Samples.var1 is limited to the ExtJSCookbook.Samples namespace
    var var1 = 'var1 (global)';
    // var1 is a global variable
  3. 3. Prevent name collisions by putting any custom types inside the namespace you created:

    // A custom type inside the Ext JSCookbook.Samples namespace
    ExtJSCookbook.Samples.Person = function() {
    return {
    firstName: '',
    lastName: '',
    show: function() {
    alert(this.firstName + ' ' + this.lastName);
    var person1 = new Ext JSCookbook.Samples.Person();
    person1.firstName = 'Jorge';
    person1.lastName = 'Ramon';;

How it works…

Ext.namespace(namespace1, namespace2, namespace3,…) and its shorthand Ext.ns(…) allow you to create an arbitrary number of namespaces that you can use to scope variables and classes that are not global. For example, have a look at the following piece of code:

Ext.namespace('MyApplication', 'MyApplication.UI', 'MyApplication.Data', 'MyApplication.Services');

This namespace's definition above is equivalent to the following statements:

MyApplication = {};
MyApplication.UI = {};
MyApplication.Data = {};
MyApplication.Services = {};