Question

好吧，我花了一些时间使用ExtJs文档，但这对我来说仍然不清楚。我基本上只是在面板的相应选项卡中为每个环境（dev，qa，uat，prod）设置一个带有网格的内部作业监视器。我想制作一个可重复使用的网格对象，我创建了4次，只需输入标题和网址来加载商店，但我无法从文档中了解如何设置它。我知道我必须从Grid扩展，但目前尚不清楚如何从那里进行配置。现在我只是用一些复制意大利面快速而肮脏的实现，寻找正确的方法来设置它：

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
        ]
    });
});

Answer 1

在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);
    }
});

如何创建一个只有商店和标题不同的简单可重用网格？

1 个答案: