Ext JSThe JavaScript framework for the enterprise

The JavaScript framework for data-intensive apps.

Ext JS is a comprehensive JavaScript framework for cross-platform web and mobile apps. Start with 140+ high-performance UI components, from grids and pivot grids to charts and calendars.

Ext JS 8.0Modern & Classic toolkitsES2025-ready tooling

Start Free 30-Day TrialExplore Documentation

4.1/5 on G2

10,000+ enterprise customers, including 60% of the Fortune 100

ComponentsQuick start

140+UI components, built and tested together→

Data gridBuffered

ID	Company	Last	Change
1	Contoso Ltd	29.01	+0.42
2	Fabrikam Inc	83.81	-0.28
3	Tailspin Toys	52.55	+0.01
4	Northwind	71.72	+0.02
5	Adventure Works	64.13	-0.31

Rows 1–5 of 100,000Only visible rows are rendered

Charts

Calendar

MTWTFDemoSprint14

Pivot grid

Country	2024	2025
Total	1,940	2,315
US	820	965
Japan	410	495

QR CodeNew

Scan me · opens sencha.com

Signature PadNew

Export as JPG, PNG or SVG

4.1 / 5

Security & Compliance

20+

Years Of Excellence

Recognized By Leading Software Review Sites

60%

Of Fortune 100 Companies

500K

Active Forum Members

140+

UI Components

2M

Sencha Developers

7.2M

Product Downloads

10K

Customers Worldwide

Customer stories

Real companies, real results with Ext JS.

Teams at Morgan Stanley, Hitachi Energy, Blue Yonder, Citigroup, Motorola Solutions and BMW Group already build with Ext JS 8.0.

Software & IT consulting

Virtimo

Virtimo is a leading software manufacturer and IT consulting company headquartered in Berlin.

Read story

Consulting software

Scheuring AG

A Switzerland-based consulting practice service and solutions software developer.

Read story

Cloud accounting

Xero

Xero used Ext JS to develop an online, cloud-based accounting system for small and medium businesses.

Watch story

Investigations & analytics

Kaseware

A cloud-based investigative management and intelligence analytics solution built with Ext JS.

Read story

“The Ext JS component library is both extremely feature complete and extensible; the grid is unmatched by any other framework for large datasets. By leveraging Ext JS Charts, we enable our customers to build complex yet intuitive visualisations and dashboards of their data to gain valuable insights.”

Richard MiloneManaging Partner, CNX Corporation

“With the combination of an easy upgrade path and new features including MVVM architecture, touch events and charting enhancements, Ext JS is the best way for us to build desktop and tablet apps with a single codebase.”

Rob BoermanCo-founder and CTO, Governance.io

“We use Ext JS, Sencha Touch and Sencha Cmd to build rich, native-like apps with a superior user experience that solve business problems in an uncompromising way.”

Rouslan ZenetlDirector of Application Development, National Hockey League

See all customer stories

Is open-source costing your dev team more than you think?

Find Out

# Install ExtGen (trial packages are on public npm)
npm install -g @sencha/ext-gen

# Create a Modern toolkit app for desktop browsers
ext-gen app -a -t moderndesktop -n ModernApp

# Build it and start a local dev server
cd modern-app
npm start

# Log in to Sencha's private registry. Username: your support
# portal email with "@" replaced by "..", e.g. name..example.com
npm login --registry=https://npm.sencha.com/ --scope=@sencha

# Install ExtGen, then create and run your app
npm install -g @sencha/ext-gen
ext-gen app -a -t moderndesktop -n ModernApp
cd modern-app
npm start

# 1. Download the trial zip: https://www.sencha.com/products/extjs/evaluate/
#    Unzip it and run the Sencha Cmd installer inside
# 2. Generate an app (--ext downloads the trial SDK from Sencha's CDN)
sencha generate app --ext MyApp ./MyApp

# 3. Build it, watch for changes and serve it at http://localhost:1841/
cd MyApp
sencha app watch

# 1. Install Sencha Cmd: https://www.sencha.com/products/sencha-cmd/
#    Download the Ext JS SDK zip from https://support.sencha.com/
#    and unzip it
# 2. Generate a Modern toolkit app from the SDK
sencha -sdk /path/to/sdk generate app modern MyApp ./MyApp

# 3. Build it, watch for changes and serve it at http://localhost:1841/
cd MyApp
sencha app watch

Ext.application({
    name: 'MyApp',
    launch: function () {
        Ext.Viewport.add({
            xtype: 'grid',
            title: 'Simpsons',
            store: {
                fields: ['name', 'email', 'phone'],
                data: [
                    { name: 'Lisa',  email: '[email protected]',  phone: '555-111-1224' },
                    { name: 'Bart',  email: '[email protected]',  phone: '555-222-1234' }
                ]
            },
            columns: [
                { text: 'Name',  dataIndex: 'name',  width: 200 },
                { text: 'Email', dataIndex: 'email', width: 250 },
                { text: 'Phone', dataIndex: 'phone', width: 120 }
            ]
        });
    }
});

Ext.create('Ext.grid.Grid', {
    title: 'Simpsons',
    fullscreen: true,
    bufferedColumns: true,          // 8.0: render only the visible columns
    plugins: [{ type: 'lockable' }], // 8.0: lock columns in the Modern grid
    store: {
        fields: ['id', 'name', 'email', 'phone'],
        data: [
            { id: 1, name: 'Lisa',  email: '[email protected]',  phone: '555-111-1224' },
            { id: 2, name: 'Bart',  email: '[email protected]',  phone: '555-222-1234' },
            { id: 3, name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
            { id: 4, name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
        ]
    },
    columns: [
        { text: 'ID',    dataIndex: 'id',    width: 60, locked: true },
        { text: 'Name',  dataIndex: 'name',  width: 200 },
        { text: 'Email', dataIndex: 'email', width: 250 },
        { text: 'Phone', dataIndex: 'phone', width: 120 }
    ]
});

Ext.create({
    xtype: 'pivotgrid',
    title: 'Sales by country',
    fullscreen: true,
    matrix: {
        type: 'local',
        store: 'sales',
        rowGrandTotalsPosition: 'first',
        leftAxis: [{
            dataIndex: 'country',
            direction: 'DESC',
            header: 'Countries',
            width: 150
        }],
        topAxis: [{
            dataIndex: 'year',
            direction: 'ASC'
        }],
        aggregate: [{
            dataIndex: 'value',
            header: 'Total',
            aggregator: 'sum',
            width: 120
        }]
    }
});

Ext.create({
    xtype: 'cartesian',
    renderTo: document.body,
    width: 400,
    height: 400,
    store: {
        fields: ['name', 'value'],
        data: [
            { name: 'one',   value: 10 },
            { name: 'two',   value: 16 },
            { name: 'three', value: 13 },
            { name: 'four',  value: 19 },
            { name: 'five',  value: 7 }
        ]
    },
    axes: [{
        type: 'numeric',
        position: 'left',
        fields: 'value'
    }, {
        type: 'category',
        position: 'bottom',
        fields: 'name'
    }],
    series: {
        type: 'bar',
        xField: 'name',
        yField: 'value'
    }
});

Ext.define('MyApp.view.TestViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.test',
    data: {
        firstName: 'John',
        lastName: 'Doe'
    },
    formulas: {
        // Recalculates whenever firstName or lastName changes
        name: function (get) {
            var fn = get('firstName'), ln = get('lastName');
            return (fn && ln) ? (fn + ' ' + ln) : (fn || ln || '');
        }
    }
});

Ext.create({
    xtype: 'formpanel',
    fullscreen: true,
    viewModel: { type: 'test' },
    bind: { title: 'Hello {name}' },
    items: [
        { xtype: 'textfield', label: 'First Name', bind: '{firstName}' },
        { xtype: 'textfield', label: 'Last Name',  bind: '{lastName}' }
    ]
});

Ext.create('Ext.Panel', {
    renderTo: Ext.getBody(),
    title: 'Sign here',
    width: '100%',
    height: '100%',
    layout: 'fit',
    items: [{
        xtype: 'signature',
        penColor: '#000',
        penStrokeWidth: 2,
        minStrokeRatio: 0.7,
        listeners: {
            beginStroke: function (cmp) {
                console.log('Signature beginStroke:', cmp);
            },
            endStroke: function (cmp) {
                console.log('Signature endStroke:', cmp);
            }
        }
    }]
});

Ext.create({
    xtype: 'qrcode',
    renderTo: Ext.getBody(),
    width: 300,
    height: 300,
    padding: 20,
    // Plain text or a URL. Set "type" for email, vCard, MeCard,
    // calendar events, locations, phone, SMS, Wi-Fi and payments.
    data: 'https://www.sencha.com/products/extjs/',
    listeners: {
        qrgenerated: function (qrcode, data) {
            console.log('QR Code Generated');
        }
    }
});

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',
    launch: function () {
        // Needs "material": { "toolbar": { "dynamic": true } } in app.json
        Ext.theme.Material.setColors({
            base: 'indigo',
            accent: 'pink',
            darkMode: true
        });
    }
});