Exploring the Ext JS library.

Intro

Exploring the Ext JS library, an open source Javascript library for making web apps using AJAX, DHTML, and the DOM. Ext is essentially a Javascript library that you include on the client-side. You can use it to do "tricks" with the DHTML and the DOM, but I think its main attraction is in how you can create cross-browser forms with very powerful features (including AJAX pulls and saves, grids, tabs, trees, and layout control) fairly simply. Basic Ext usage involves configuring their classes with a lot of JavaScript Object Notation (JSON) and functions for event handling. However, as with many things, there are many ways to do the same thing.

  • The name is actually "Ext" but "Javascript" or "JS" is so frequently appended to it that Ext is often referred to as "ExtJS", "Ext JS", "ExtJS" or some similar variation. I suspect that the "JS" is in there not only for "JavaScript" but also for "Jack Slocum", the guy who originally made Ext JS. I've talked with Ext folks and they say "E.X.T." as opposed to "Ext".
  • 2007-10 I started using Ext JS when Ext 2.0 beta came out. I chose Ext JS after evaluating it and other web app frameworks such as jQuery. Ext JS is very nice in execution and design, but the documentation is weak: The API documentation is minimalist; The manual and tutorials are community-generated wiki pages; The forum is chancey; The demos are good.
  • 2010-06-15 Ext JS joined with JQTouch (now Sencha Touch) and Raphael to form Sencha. Ext JS is now Sencha Ext JS. Since then Sencha has other products besides Ext JS such as Ext GWT, Ext Designer, Ext Core, Sencha Touch and Sencha Animator. I may write about Sencha products beyond Ext JS, but I will keep this page named Ext JS for now.
  • 20011-04 Ext JS 4 released. Heavily re-architected by Ed Spencer.

Ext JS 2

Structure of the top 175 classes in Ext v 2.0 as of 2007-12 according to package:

56 classes are direct extensions of the generic Javascript Object class. 20 classes are direct extensions of the Ext.util.Observable class (an "abstract base class that provides a common interface for publishing events", i.e. it provides a consistent way to provide events for its subclasses.).

Ext JS 3

Structure of the top 259 classes in Ext v 3.3 as of 2010-10 according to package:

Rough class hierarchy chart for some of the more important Ext classes:

Ext JS 4

Ext JS 4 was released 2011-04-26. The major changes include the following:

Ext Packages

As of 2011-10. Roughly 330 classes. Some classes such as private ones are note listed.

Base
    Class System
        Ext
        Ext.Base
        Ext.Class
        Ext.ClassManager
        Ext.Loader
        Ext.AbstractPlugin
        Ext.PluginManager
    Support
        Ext.is
        Ext.env.Browser
        Ext.env.FeatureDetector
        Ext.env.OS
        Ext.supports
        Ext.Version
    Application Architecture
        Ext.app.Application
        Ext.app.Controller
        Ext.ModelManager
        Ext.state.CookieProvider
        Ext.state.Manager
        Ext.state.Provider
        Ext.state.LocalStorageProvider
        Ext.state.Stateful
        Ext.util.History
    DOM and Browser
        Ext.DomHelper
        Ext.DomQuery
        Ext.Element
        Ext.CompositeElement
        Ext.CompositeElementLite
        Ext.fx.Anim
        Ext.fx.Animator
        Ext.fx.Easing
        Ext.fx.target.Component
        Ext.fx.target.CompositeElement
        Ext.fx.target.CompositeElementCSS
        Ext.fx.target.CompositeSprite
        Ext.fx.target.Element
        Ext.fx.target.ElementCSS
        Ext.fx.target.Sprite
        Ext.fx.target.Target
        Ext.Img
        Ext.util.Animate
        Ext.util.Cookies
        Ext.util.CSS
        Ext.Ajax
        Ext.data.JsonP
        Ext.ElementLoader
View
    Containers and Panels
        Ext.container.Container
        Ext.container.ButtonGroup
        Ext.container.Viewport
        Ext.panel.Panel
        Ext.panel.Header
        Ext.panel.Table
        Ext.panel.Tool
        Ext.tab.Panel
        Ext.tree.Panel
        Ext.grid.View
        Ext.grid.Panel
        Ext.form.Panel
    Layouts
        Ext.layout.Layout
        Ext.layout.container.Accordion
        Ext.layout.container.Absolute
        Ext.layout.container.Anchor
        Ext.layout.container.Auto
        Ext.layout.container.Border
        Ext.layout.container.Box
        Ext.layout.container.Card
        Ext.layout.container.CheckboxGroup
        Ext.layout.container.Column
        Ext.layout.container.Container
        Ext.layout.container.Fit
        Ext.layout.container.HBox
        Ext.layout.container.Table
        Ext.layout.container.VBox
    Draw
        Ext.draw.Color
        Ext.draw.Component
        Ext.draw.CompositeSprite
        Ext.draw.Sprite
        Ext.draw.Surface
        Ext.draw.engine.Svg
        Ext.draw.engine.Vml
Components
    Components
        Ext.ComponentQuery
        Ext.Component
        Ext.LoadMask
        Ext.ProgressBar
        Ext.button.Button
        Ext.button.Cycle
        Ext.button.Split
        Ext.picker.Color
        Ext.flash.Component
        Ext.picker.Date
        Ext.picker.Time
        Ext.picker.Month
        Ext.slider.Multi
        Ext.slider.Single
        Ext.slider.Tip
        Ext.tab.Bar
        Ext.tab.Tab
        Ext.tip.QuickTip
        Ext.tip.QuickTipManager
        Ext.tip.Tip
        Ext.tip.ToolTip
        Ext.MessageBox
        Ext.window.MessageBox
        Ext.window.Window
    Tree
        Ext.tree.Panel
        Ext.data.Tree
        Ext.data.NodeInterface
        Ext.data.TreeStore
        Ext.tree.View
    Toolbar
        Ext.toolbar.Fill
        Ext.toolbar.Item
        Ext.toolbar.Paging
        Ext.toolbar.Separator
        Ext.toolbar.Spacer
        Ext.toolbar.TextItem
        Ext.toolbar.Toolbar
    Menu
        Ext.menu.CheckItem
        Ext.menu.ColorPicker
        Ext.menu.DatePicker
        Ext.menu.Item
        Ext.menu.Manager
        Ext.menu.Menu
        Ext.menu.Separator
    Form
        Ext.form.Basic
        Ext.form.CheckboxGroup
        Ext.form.field.Base
        Ext.form.field.Checkbox
        Ext.form.field.ComboBox
        Ext.form.field.Date
        Ext.form.field.Display
        Ext.form.FieldAncestor
        Ext.form.FieldContainer
        Ext.form.field.Field
        Ext.form.FieldSet
        Ext.form.field.File
        Ext.form.field.Hidden
        Ext.form.field.HtmlEditor
        Ext.form.Label
        Ext.form.Labelable
        Ext.form.field.Number
        Ext.form.field.Picker
        Ext.form.field.Radio
        Ext.form.RadioGroup
        Ext.form.field.Spinner
        Ext.form.field.Text
        Ext.form.field.TextArea
        Ext.form.field.Time
        Ext.form.field.Trigger
        Ext.form.field.VTypes
    Form Actions
        Ext.form.action.Action
        Ext.form.action.DirectLoad
        Ext.form.action.DirectSubmit
        Ext.form.action.Load
        Ext.form.action.StandardSubmit
        Ext.form.action.Submit
    Grid
        Ext.grid.Panel
        Ext.grid.column.Column
        Ext.grid.column.Action
        Ext.grid.column.Boolean
        Ext.grid.column.Date
        Ext.grid.column.Number
        Ext.grid.column.Template
        Ext.grid.feature.AbstractSummary
        Ext.grid.feature.Chunking
        Ext.grid.feature.RowBody
        Ext.grid.feature.Summary
        Ext.grid.feature.Feature
        Ext.grid.feature.Grouping
        Ext.grid.feature.GroupingSummary
        Ext.grid.header.Container
        Ext.grid.PagingScroller
        Ext.grid.property.Grid
        Ext.grid.property.HeaderContainer
        Ext.grid.property.Property
        Ext.grid.property.Store
        Ext.grid.plugin.CellEditing
        Ext.grid.plugin.DragDrop
        Ext.grid.plugin.Editing
        Ext.grid.plugin.HeaderResizer
        Ext.grid.plugin.RowEditing
        Ext.grid.RowNumberer
        Ext.grid.Scroller
        Ext.view.BoundList
        Ext.view.BoundListKeyNav
        Ext.view.TableChunker
        Ext.view.Table
        Ext.view.View
    Charts
        Ext.chart.Callout
        Ext.chart.Chart
        Ext.chart.Highlight
        Ext.chart.Legend
        Ext.chart.Label
        Ext.chart.LegendItem
        Ext.chart.Mask
        Ext.chart.Navigation
        Ext.chart.Tip
        Ext.chart.axis.Axis
        Ext.chart.axis.Category
        Ext.chart.axis.Gauge
        Ext.chart.axis.Numeric
        Ext.chart.axis.Time
        Ext.chart.series.Area
        Ext.chart.series.Bar
        Ext.chart.series.Cartesian
        Ext.chart.series.Column
        Ext.chart.series.Gauge
        Ext.chart.series.Line
        Ext.chart.series.Pie
        Ext.chart.series.Radar
        Ext.chart.series.Scatter
        Ext.chart.series.Series
        Ext.chart.theme.Theme
    Drag and Drop
        Ext.dd.DD
        Ext.dd.DDProxy
        Ext.dd.DDTarget
        Ext.dd.DragDrop
        Ext.dd.DragDropManager
        Ext.dd.DragSource
        Ext.dd.DragTracker
        Ext.dd.DragZone
        Ext.dd.DropTarget
        Ext.dd.DropZone
        Ext.dd.Registry
        Ext.dd.ScrollManager
        Ext.dd.StatusProxy
        Ext.tree.plugin.TreeViewDragDrop
        Ext.util.ComponentDragger
    Component Utilities
        Ext.Action
        Ext.ComponentLoader
        Ext.ComponentManager
        Ext.Editor
        Ext.FocusManager
        Ext.Layer
        Ext.resizer.Handle
        Ext.resizer.Resizer
        Ext.resizer.Splitter
        Ext.selection.Model
        Ext.selection.CellModel
        Ext.selection.CheckboxModel
        Ext.selection.RowModel
        Ext.Shadow
        Ext.util.Floating
        Ext.util.Memento
        Ext.WindowManager
        Ext.Template
        Ext.XTemplate
        Ext.ZIndexManager
Data
    Data Models
        Ext.data.Model
        Ext.data.Field
        Ext.data.Types
        Ext.data.SortTypes
        Ext.data.Association
        Ext.data.BelongsToAssociation
        Ext.data.HasManyAssociation
        Ext.data.validations
        Ext.data.Errors
        Ext.data.IdGenerator
        Ext.data.SequentialIdGenerator
        Ext.data.UuidGenerator
    Data Readers and Writers
        Ext.data.reader.Reader
        Ext.data.reader.Array
        Ext.data.reader.Json
        Ext.data.reader.Xml
        Ext.data.writer.Json
        Ext.data.writer.Writer
        Ext.data.writer.Xml
    Data Proxies
        Ext.data.proxy.Ajax
        Ext.data.proxy.Direct
        Ext.data.proxy.JsonP
        Ext.data.proxy.Memory
        Ext.data.proxy.Proxy
        Ext.data.proxy.Rest
        Ext.data.proxy.LocalStorage
        Ext.data.proxy.SessionStorage
        Ext.data.Connection
        Ext.data.Operation
        Ext.data.Batch
        Ext.data.Request
        Ext.data.ResultSet
    Data Stores
        Ext.data.AbstractStore
        Ext.data.StoreManager
        Ext.data.Store
        Ext.data.ArrayStore
        Ext.data.DirectStore
    Direct
        Ext.direct.Event
        Ext.direct.ExceptionEvent
        Ext.direct.JsonProvider
        Ext.direct.Manager
        Ext.direct.PollingProvider
        Ext.direct.Provider
        Ext.direct.RemotingEvent
        Ext.direct.RemotingProvider
        Ext.direct.Transaction
Utilities
    Native Classes
        Array
        Boolean
        Date
        Function
        Number
        Object
        RegExp
        String
    Native Extensions
        Ext.Array
        Ext.Number
        Ext.Object
        Ext.String
        Ext.JSON
        Ext.Date
        Ext.Function
        Ext.Error
    Utility
        Ext.AbstractManager
        Ext.util.Filter
        Ext.util.Format
        Ext.util.Inflector
        Ext.util.KeyMap
        Ext.util.KeyNav
        Ext.util.Point
        Ext.util.Region
        Ext.util.TextMetrics
        Ext.util.MixedCollection
        Ext.util.Grouper
        Ext.util.HashMap
        Ext.util.Sorter
        Ext.util.Sortable
    Events
        Ext.TaskManager
        Ext.EventManager
        Ext.EventObject
        Ext.util.ClickRepeater
        Ext.util.DelayedTask
        Ext.util.Observable
        Ext.util.TaskRunner

MVC Architecture in Ext JS

The directory structure correspond to the class structure. EG: An app with a class NsLevelTop.nsLevel2.Class2 would have a directory and file structure like this:

appName
    app // corresponds to NsLevelTop
        Class1.js
        nsLevel2
            Class2.js
        controller
            Ack.js
        model
            Foo.js
            Bar.js
        store
            Foos.js
            Bars.js
        view
            foo
                Edit.js
                List.js
    data
    resources
        css
        img
    app.js
    index.html

The app.js file above would be something like this:

Ext.require([ // Ext classes you know you'll need ]);
Ext.application({
    name: 'NsLevelTop',
    appFolder: 'app',
    models: ['Foo', 'Bar'],
    stores: ['Foos', Bars'],
    // views: ['foo.List', 'foo.Edit'], // Usually listed in the controllers
    controllers: ['Ack'],
    // alternative that auto loads and instantiates NS.view.Viewport:
    // autoCreateViewport: true 
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                // Stuff
            ]
        });
        
    }, 
    // etc
});

The app covers models and controllers. The controllers could list their views. Events can be view-specific or app-wide. A controller's control() method adds "listeners to components selected via Ext.ComponentQuery.", i.e. instead of ye olde getCmp(). Note that a controller's init() runs BEFORE the Application's launch(), while the a controller's onLaunch() runs AFTER. EG:

Ext.define('NsLevelTop.controller.Ack', {
    extend: 'Ext.app.Controller',
    views: ['foo.List', 'foo.Edit'],
    ref: [{ref: 'list', selector: 'grid'}],
    init: function () {
        this.control({
            'someviewxtype': {someevent: this.onSomeEvent},
            // etc
        });
        this.application.on({
            appwideevent: this.onThatEvent,
            scope: this
        });
        // Stuff
    },
    onSomeEvent: function () {
        // This getList() was auto-defined by our ref above.
        this.getList().store.load();
        // Stuff
    }
    // Stuff
});

The views are the widgets. The alias sets the xtype.

Ext.define('NsLevelTop.view.foo.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.foolist', // xtype is 'foolist'
    // etc
});

The application launch function runs when the required scripts are loaded. If you are not using Ext.application() and MVC, then do it the old way and wrap your stuff in Ext.onReady(). EG:

Ext.require([ /* Ext classes you know you'll need */ ]);
Ext.onReady(function () {
    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
            // Stuff
        ]
    });
});

Ext.ClassManager

Ext.ClassManager "manages all classes and handles mapping from string class name to actual class objects". It's most common methods are accessed by alias.

Components

"An Ext JS application's UI is made up of one or many widgets called Components. All Components are subclasses of the Ext.Component class which allows them to participate in automated lifecycle management including instantiation, rendering, sizing and positioning, and destruction."

Ext Data

Here are the Ext JS 4 Data classes as of 2011-10. *"private utility class for internal use by the framework. Don't rely on its existence."

"The Store class encapsulates a client side cache of Model objects. Stores load data via a Proxy, and also provide functions for sorting, filtering and querying the model instances contained within it."

"Proxies are used by Stores to handle the loading and saving of Model data. Usually developers will not need to create or interact with proxies directly." ... "There are two types of Proxy: Client and Server. Examples of client proxies include Memory for storing data in the browser's memory and Local Storage which uses the HTML 5 local storage feature when available. Server proxies handle the marshaling of data to some remote server and examples include Ajax, JsonP and Rest." Instead of a proxy, data could be loaded inline too. Proxies implement the CRUD methods. "Although the local Proxies like LocalStorageProxy and MemoryProxy are self-contained, the remote Proxies like AjaxProxy and ScriptTagProxy make use of Readers and Writers to encode and decode their data when communicating with the server."

"Models are defined as a set of fields and any arbitrary methods and properties relevant to the model." An Ext JS 4 model is similar to a set of Ext JS records, but the model can specify proxy, associations, and validations. Either a model or store can configure the proxy: Prefer in the model but with the option to change for indivdual stores. Nested data can be consumed for multiple related models. Models and proxies can be configured to facilitate CRUD. Multiple stores can use the same model. By conventions stores are plural (EG: Songs) and models are singular (EG: Song).

// Create a model with a proxy:
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ],
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: {type: 'json', root: 'results'}
    },
    validations: [
        {type: 'presence', name: 'name'},
        {type: 'length',   name: 'name', min: 5},
        {type: 'format',   name: 'age', matcher: /\d+/},
        {type: 'inclusion', name: 'gender', list: ['male', 'female']},
        {type: 'exclusion', name: 'name', list: ['admin']}
    ]    
});

// Use the model with a store:
Ext.create('Ext.data.Store', {
    model: 'User', // Alterntively requires: 'MyNS.model.User', model: 'MyNS.model.User'
    autoLoad: true,
    // Optionally set proxy here if different from model:
    // proxy: { /* config */ }

    // Stores can sort, filter, and group locally or remotely:
    sorters: ['name', 'id'],
    filters: {
        property: 'name',
        value   : 'Ed'
    },
    groupField: 'age',
    groupDir: 'DESC'
});

Ext Drawings and Charts

Here are the Chart classes as of 2011-10. *"private utility class for internal use by the framework. Don't rely on its existence."

The Draw package includes a Surface class (Ext.draw.Surface) " that abstracts the underlying graphics implementation [in SVG and VML] and enables the developer to create arbitrarily shaped Sprites [Ext.draw.Sprite] or SpriteGroups [Ext.draw.CompositeSprite] that respond to interactions like mouse events and also provide rich animations on all attributes like shape, color, size, etc.". A Draw Component [Ext.draw.Component] manages and holds a Surface instance.

var drawComponent = Ext.create('Ext.draw.Component', {
    viewBox: false,
    items: [{
        type: 'circle',
        fill: '#FF9900',
        radius: 50,
        x: 150,
        y: 150
    }]
});

Ext.create('Ext.Window', {
    width: 250,
    height: 250,
    layout: 'fit',
    items: [drawComponent]
}).show();

drawComponent.surface.add({
    type: 'rect',
    fill: '#999',
    height: 50,
    width: 50,
    x: 50,
    y: 50
}).show(true);

A Sprite can be configured with various properties including: type ('circle', 'path', 'rect', 'text', 'square', 'image'), width, height, size, radius, x, y, path (see https://developer.mozilla.org/en/SVG/Tutorial/Paths), opacity, fill, stroke, stroke-width, font, and text. "Additionally there are three transform objects that can be set with setAttributes which are translate (relative to current rotation), rotate, and scale." Color gradients can be set for sprites and charts.

The Sencha Chart class (Ext.chart.Chart) extends the Ext.draw.Component. "Every Chart has three key parts - a Store that contains the data, an array of Axes which define the boundaries of the Chart, and one or more Series to handle the visual rendering of the data points." Other key parts include legends, labels, callouts, tips, coordinates, and themes.

var chart = Ext.create('Ext.chart.Chart', {
    width: 200,
    height: 200,
    legend: {position: 'left'},
    axes: [/*set an axis configuration*/],
    series: [/*set series configuration*/]
});

"Each series object needs to have the showInLegend parameter set to true in order to be in the legend list."

The kind of chart axis used depends on the series visualization. EG: Category and Time.

A chart series is the kind of visualization. EG: Line and Scatter.

A chart theme can apply different stylings by named theme or by seeding a theme with a base color.

Ext Tree

The Ext Tree classes and related classes from Ext.data as of 2011-10. *"private utility class for internal use by the framework. Don't rely on its existence."

The Ext Tree Panel is great for displaying hierarchical data. For the tree node config options (like text, leaf, expanded), see the Ext.data.NodeInterface config options. "A Store in Ext JS manages a collection of Model instances. Tree nodes are simply Model instances that are decorated with a NodeInterface. Decorating a Model with a NodeInterface gives the Model the fields, methods and properties that are required for it to be used in a tree." NodeInterface has various methods for modifying the tree nodes such as appendChild(), insertBefore(), and insertChild(), as well as various properties such as childNodes, firstChild, lastChild, nextSibling, parentNode, and previousSibling.

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        text: 'myRoot' // Default text for root is 'Root'
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "alegrbra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false, // true default
    useArrows: true, // false default
    lines: true, // true default
    renderTo: Ext.getBody()
});

It is possible to have a tree also display a grid, but there are some particulars.

var tree = Ext.create('Ext.tree.Panel', {
    renderTo: Ext.getBody(),
    title: 'TreeGrid',
    width: 300,
    height: 150,
    fields: ['name', 'description'],
    columns: [{
        xtype: 'treecolumn', // At least 1 col of this xtype for a tree
        text: 'Name',
        dataIndex: 'name',
        width: 150,
        sortable: true
    }, {
        text: 'Description',
        dataIndex: 'description',
        flex: 1,
        sortable: true
    }],
    root: {
        name: 'Root',
        description: 'Root description',
        expanded: true,
        children: [{
            name: 'Child 1',
            description: 'Description 1',
            leaf: true
        }, {
            name: 'Child 2',
            description: 'Description 2',
            leaf: true
        }]
    }
});

Ext JS Tree with Grid

Ext JS Architecture Notes

Note from doing tutorials on Ext JS Architecture.

"The scalability, maintainability and flexibility of an application is mostly determined by the quality of the application's architecture. Unfortunately, it's often treated as an afterthought. Proofs of concept and prototypes turn into massive applications, and example code is copied and pasted into the foundations of many applications. You may be tempted to do this because of the quick progress that you see at the start of a project. However, the time saved will be relatively low compared to the time spent on having to maintain, scale and often refactor your application later in the project. One way to better prepare for writing a solid architecture is to follow certain conventions and define application views, models, stores and controllers before actually implementing them."

"In Ext JS 4, we have defined conventions that you should consider following when building your applications -- most notably a unified directory structure. This simple structure places all classes into the app folder, which in turn contains sub-folders to namespace your models, views, controllers and stores."

"Splitting up the application's UI into views is a good place to start." ... Then make models, stores, and controllers.

"When we looked at which views we needed for our UI, we were very focused on the individual parts. The Viewport of an application acts as the glue for these individual parts. It loads the required views and defines the configuration needed to achieve your app's overall layout. We have found that progressively defining your views and adding them to the viewport is the fastest way to create the base structure of your UI. It is important during this process to focus on scaffolding your views and not on the individual views themselves. It's almost like sculpting. We start by creating the very rough shapes of our views and add more detail to them later."

"Often, it is useful to start with static json files containing mock data to act as our server side. Later, we can use these static files as a reference when we actually implement a dynamic server side." These mock JSON files are usually like:

{
    success: true, 
    'results': [
        {'id': 1, name: 'foo', .... },
        {'id': 2, name: 'foo', .... },
        ...
    ]
}

"Now that we have our views, models and stores, it's time to glue them together. You start by adding the views one by one to your viewport. This will make it easier to debug any wrong view configurations." i.e. glue into the MyNS/view/Viewport.js.

"We set up all the view dependencies in our viewport. This will allow us to use their xtypes, previously configured in our views using the alias property." EG: xtype: 'stationlist'.

"Since Viewport extends Container, and Containers can't have docked items (yet), we have added a Panel as the single item of our viewport. We make this panel the same size as our viewport by defining a layout of fit. In terms of architecture, one of the most important things to note here is the fact that we have not defined a layout-specific configuration in the actual views. By not defining properties like flex, width, height in the views, we can easily adjust the application's overall layout in one single place, adding to the maintainability and flexibility of our architecture."

"In Ext JS 3, we often added our application's logic to the views themselves using handlers on buttons, binding listeners to subcomponents, and overriding methods on the views when extending them. However, just like you shouldn't inline CSS styles in your HTML markup, it's preferable to separate the application's logic from the view definitions. In Ext JS 4, we provide controlleres in the MVC package. They are responsible for listening to events fired by the views and other controllers, and for implementing application logic to act on those events. There are several benefits to this design. One benefit is that your application logic is not bound to instances of views which means we can destroy and instantiate our views, as needed, while the application logic continues processing other things, like synchronizing data. Additionally in Ext JS 3, you might have had many nested views, each adding layers of application logic. By moving the application logic to controllers, it is centralized, making it easier to maintain and change. Finally, the Controller base class provides you with lots of functionality, making it easier to implement your application logic."

When you do something like:

Ext.application({
    models: ['Station', 'Song']
    ...
});

Then the app expects to find the model as NS/models/Station.js, and automatically create getters like getStationModel() and getStationStore().

"In Ext JS 3, a very common approach to getting a reference to an existing component instance on the page was the Ext.getCmp method. While this method continues to work, it's not the recommended method in Ext JS 4. Using Ext.getCmp requires you to give every component a unique ID in order to reference it in your application. In the new MVC package, we can put a reference to a view instance (component) inside of a controller by leveraging a new feature in Ext JS 4: ComponentQuery."

"When the application starts, we want to load the user's existing stations. While you could put this logic inside of the application's onReadymethod, the MVC architecture provides you with an onLaunch method which fires on each controller as soon as all the controllers, models and stores are instantiated, and your initial views are rendered. This provides you with a clean separation between global application logic and logic specific to a controller."

"Application events are extremely useful when you have many controllers in your application that are interested in an event. Instead of listening for the same view event in each of these controllers, only one controller will listen for the view event and fire an application-wide event that the others can listen for. This also allows controllers to communicate to one another without knowing about or depending on each other's existence."

Here are some random notes on getters:

var FooView = Ext.getCmp('Foo');

var FooView = Ext.ComponentQuery.query('Foo')[0];

views: ['Foo']
refs: [{ref: 'foo', selector: 'foo'}
var FooView1 = this.getFoo();
var FooView2 = this.getFooView();

var FooStore = Ext.data.StoreManager.lookup('Foo');

stores: ['Foo']
var FooStore = this.getFooStore();

Miscellany

Links

Links that lead to off-site pages about Ext JS.

Official site

Sencha [sencha.com] (was Ext JS [extjs.com]). The official site.

Articles by date

Hmm. Perhaps I should've been making blog posts about these.

Miscellany

Page Modified: (Hand noted: 2008-08-14 16:52:02Z) (Auto noted: 2012-06-27 19:47:30Z)