How to create a simple reusable grid that only differs in store and title?

Question

Alright, I've spent some time with the ExtJs documentation but this still isn't clear to me. I'm basically just setting up an internal job monitor with a grid for each environment (dev, qa, uat, prod) in a respective tab in a panel. I'd like to make one reusable grid object that I create 4 times and just feed in the title and url to load the store with, but I can't understand from the documentation how to set this up. I know I have to extend from Grid, but it's not clear how to configure it from there. Right now I just have a quick and dirty implementation with some copy pasta, looking for the proper way to set this up:

Ext.onReady(function() {
    Ext.QuickTips.init();

    // setup the state provider, all state information will be saved to a cookie
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

    Ext.define('Job',{
        extend: "Ext.data.Model",
        fields: [
            'JOB_GROUP',
            'JOB_NAME',
            'START_TIME',
            'END_TIME',
            'RUNTIME',
            'STATUS',
            'OUTPUT'
        ]
    });

    var colModel = [
        {
            header: 'Job Group',
            dataIndex: 'JOB_GROUP'
        },
        {
            header: 'Job Name',
            dataIndex: 'JOB_NAME',
            width: 300
        },
        {
            header: 'Start Time',
            dataIndex: 'START_TIME',
            width: 120
        },
        {
            header: 'End Time',
            dataIndex: 'END_TIME',
            width: 120
        },
        {
            header: 'Runtime',
            dataIndex: 'RUNTIME',
            width: 100
        },
        {
            header: 'Status',
            dataIndex: 'STATUS',
            width: 100,
            renderer: statusColor
        }
    ];

    // create the data store
    var devStore = Ext.create('Ext.data.Store', {
        model: "Job",
        proxy: {
            type: 'ajax',
            url: '/jobview/servlet?env=DEV',
            reader: {
                type: 'json',
                root: 'DEV'
            }
        }
    });

    var qaStore = Ext.create('Ext.data.Store', {
        model: "Job",
        proxy: {
            type: 'ajax',
            url: '/jobview/servlet?env=QA',
            reader: {
                type: 'json',
                root: 'QA'
            }
        }
    });

    var uatStore = Ext.create('Ext.data.Store', {
        model: "Job",
        proxy: {
            type: 'ajax',
            url: '/jobview/servlet?env=UAT',
            reader: {
                type: 'json',
                root: 'UAT'
            }
        }
    });

    var prdStore = Ext.create('Ext.data.Store', {
        model: "Job",
        proxy: {
            type: 'ajax',
            url: '/jobview/servlet?env=PRD',
            reader: {
                type: 'json',
                root: 'PRD'
            }
        }
    });

    devStore.load();
    qaStore.load();
    uatStore.load();
    prdStore.load()

    var devGrid = new Ext.grid.GridPanel({
        store: devStore,
        columns: colModel,
        width: 1000,
        autoHeight: true,
        title: 'DEV'
    });

     var qaGrid = new Ext.grid.GridPanel({
        store: qaStore,
        columns: colModel,
        width: 1000,
        autoHeight: true,
        title: 'QA'
    });

    var uatGrid = new Ext.grid.GridPanel({
        store: uatStore,
        columns: colModel,
        width: 1000,
        autoHeight: true,
        title: 'UAT'
    });

    var prdGrid = new Ext.grid.GridPanel({
        store: prdStore,
        columns: colModel,
        //renderTo: 'example-grid',
        width: 1000,
        autoHeight: true,
        title: 'PRD'
    });

    var tabs = Ext.createWidget('tabpanel', {
        renderTo: 'tabs',
        width: 1080,
        activeTab: 0,
        items: [
            devGrid,
            qaGrid,
            uatGrid,
            prdGrid
        ]
    });
});

Izhaki Izhaki · Accepted Answer · 2012-01-31T17:07:44

In ExtJS 4:

Ext.define('BS.view.MyGrid' ,
{
    extend: 'Ext.grid.Panel',
    alias: 'widget.my-grid',

    // None complex configs (booleans, integers, strings) go here
    width: 1000,
    autoHeight: true

    initComponent: function() {
        Ext.apply(this, {
            // complex configs (objects / arrays) go here
            columns: colModel,  
        });

        this.callParent(arguments);
    }
});

How to create a simple reusable grid that only differs in store and title?

1 Answers