Ext JS Introduction — Enterprise-Class JavaScript Framework

In this tutorial, you will learn about Ext JS Introduction. We cover key concepts, practical examples, and best practices to help you master this topic.

Ext JS is a comprehensive JavaScript framework for building enterprise-grade web applications with a rich set of pre-built UI components, a robust data package, and a class-based architecture.

What You'll Learn

• Ext JS architecture and class system
• Component hierarchy and lifecycles
• The data package (Store, Model, Proxy)
• Layout management and container patterns
• When to choose Ext JS for your project

Why It Matters

Building complex data-intensive applications (admin panels, dashboards, CRM systems) from scratch with HTML/CSS/JS alone is impractical. Ext JS provides a complete widget set, data layer, and theming system out of the box.

Real-World Use

A financial trading dashboard with real-time grid updates, drill-down charts, complex filter forms, and role-based access — all built with Ext JS components that communicate through a shared data store.

Architecture Overview

flowchart TD
    A[Application] --> B[View Layer]
    A --> C[Controller Layer]
    A --> D[Model Layer]
    B --> E[Components]
    B --> F[Containers]
    B --> G[Layouts]
    D --> H[Stores]
    D --> I[Models]
    D --> J[Proxies]
    style A fill:#e6f3ff,stroke:#4a90d9,stroke-width:2px

Class System

Ext JS uses its own class system with inheritance, mixins, and configuration:

Ext.define('MyApp.model.User', {
  extend: 'Ext.data.Model',
  fields: [
    { name: 'id', type: 'int' },
    { name: 'name', type: 'string' },
    { name: 'email', type: 'string' },
    { name: 'age', type: 'int' }
  ],
  validators: {
    name: { type: 'presence', message: 'Name is required' },
    email: { type: 'email' }
  }
});

// Instantiate
var user = Ext.create('MyApp.model.User', {
  id: 1,
  name: 'Alice Johnson',
  email: 'alice@example.com',
  age: 30
});

console.log(user.get('name')); // Output: Alice Johnson

Expected output: The model defines fields with types and validators. Instances use .get() and .set() methods to access data.

Component Hierarchy

Ext.create('Ext.container.Viewport', {
  layout: 'border',
  items: [{
    region: 'north',
    height: 50,
    html: '<h1>My Application</h1>'
  }, {
    region: 'west',
    width: 200,
    title: 'Navigation',
    items: [{
      xtype: 'treepanel',
      root: {
        text: 'Root',
        expanded: true,
        children: [
          { text: 'Dashboard', leaf: true },
          { text: 'Users', leaf: true },
          { text: 'Settings', leaf: true }
        ]
      }
    }]
  }, {
    region: 'center',
    xtype: 'tabpanel',
    items: [{
      title: 'Welcome',
      html: '<p>Welcome to the application</p>'
    }]
  }]
});

Expected output: A border layout with a header, sidebar tree, and center tab panel renders. Each region manages its own content and layout.

The Data Package

// Define a Store
Ext.define('MyApp.store.Users', {
  extend: 'Ext.data.Store',
  model: 'MyApp.model.User',
  proxy: {
    type: 'ajax',
    url: '/api/users',
    reader: {
      type: 'json',
      rootProperty: 'data'
    }
  },
  autoLoad: true,
  sorters: [{ property: 'name', direction: 'ASC' }]
});

// Use in a Grid
Ext.create('Ext.grid.Panel', {
  title: 'Users',
  store: 'Users',
  columns: [
    { text: 'ID', dataIndex: 'id', width: 50 },
    { text: 'Name', dataIndex: 'name', flex: 1 },
    { text: 'Email', dataIndex: 'email', flex: 2 },
    { text: 'Age', dataIndex: 'age', width: 80 }
  ],
  height: 400,
  renderTo: Ext.getBody()
});

Expected output: The grid loads data from the server, displays it in sortable columns, and syncs automatically with the store.

Layout Management

Ext.create('Ext.panel.Panel', {
  title: 'Layout Demo',
  width: 600,
  height: 400,
  layout: 'vbox',
  items: [{
    xtype: 'panel',
    title: 'Top Panel',
    flex: 1,
    margin: 5,
    html: 'Top content'
  }, {
    xtype: 'panel',
    title: 'Bottom Panel',
    flex: 2,
    margin: 5,
    layout: 'hbox',
    items: [{
      xtype: 'panel',
      title: 'Left',
      flex: 1,
      margin: 5
    }, {
      xtype: 'panel',
      title: 'Right',
      flex: 1,
      margin: 5
    }]
  }]
}).renderTo(Ext.getBody());

Common Mistakes

1. Not using Ext.onReady - Component creation must wait for the DOM. Wrap all initialization in Ext.onReady(function() { ... }).

2. Over-nesting containers - Each container adds rendering overhead. Use the minimum nesting needed for your layout.

3. Direct DOM manipulation - Always use Ext JS component methods instead of jQuery or native DOM manipulation to maintain component state.

4. Forgetting to destroy components - Always call .destroy() on components when removing them to prevent memory leaks.

5. Ignoring the MVC/MVVM pattern - Large apps without architecture become unmaintainable. Use Ext JS's built-in MVC/MVVM from the start.

Practice Questions

1. What is the purpose of the Ext.define method?
2. How does the data package connect to UI components?
3. What are the three main layers in Ext JS MVC?
4. How do you read a value from a Model instance?
5. What is the role of the proxy in a Store?

Challenge: Build a simple application with a grid panel that loads data from a Store with Ajax proxy, a form panel that creates new records, and a border layout to arrange them.

FAQ

Mini Project

Build a user management dashboard with a grid (users list), a form (add/edit user), a tree (department navigation), and a tab panel (detail views). Use a shared Store and the border layout.

What's Next

Components are the building blocks. Learn about Ext JS components in depth: configuration, lifecycle, and customization.