Dynamically Creating a grid EXTJS

Question

I was wondering if it is possible to dynamically create a grid view. I'll do my best to explain...

I have currently have a database table that have different regions, I have created a grid around this and you can add new entries into this grid, which in turn adds it to the table..

I also have a database table for contact people that contain the names, phone numbers, and uses the all the regions as a drop down. Again you can add new entries in this table via the grid.

Finally I have a third grid that shows all the contact people, broken down to their regions. The problem I am having is how do I make it dynamic? Currently I have hard coded the region titles and populate a grid which filters properly, however what if someone adds a new region completely? How can I create a title and grid with the proper filter for the newly added region?

Third grid code:

Ext.define('myproject.example', {
    extend: 'Ext.form.Panel',
    alias: 'widget.********',

    requires: [
        'store.exampleStore'
    ],
    modal: true,
    draggable: true,
    header: {
        title: 'Technical Advisors Contact Information',
        height: 55,
        items: [{
            xtype: 'button',
            text: 'X',
            listeners: { click: 'onModalX' }
        }]
    },
    scrollable: true,
    align: 'center',
    floating: true,
    width: 1500,
    height: 800,

    items: [{
        xtype: 'grid',
        title: 'Region: ME',
        scrollable: true,
        collapsible: true,
        store: { type: 'exampleStore', filters: [{ property: 'Region', value: 'ME' }, { property: 'Active', value: 'true' }] },
        columns: [{
            text: 'Contact',
            dataIndex: 'ContactName',
            sortable: true,
            flex: 2
        }, {
            text: 'Office #',
            dataIndex: 'Office',
            sortable: true,
            flex: 1
        }, {
            text: 'Home #',
            dataIndex: 'Home',
            sortable: true,
            flex: 1
        }, {
            text: 'Pager #',
            dataIndex: 'Pager',
            sortable: true,
            flex: 1
        }, {
            text: 'Cellular #',
            dataIndex: 'Cellular',
            sortable: true,
            flex: 1
        }, {
            text: 'Area',
            dataIndex: 'Region',
            sortable: true,
            flex: 3
        }] //continues...

user3516761 user3516761 · Accepted Answer · 2017-10-24T06:07:46

For the first, you need to get data on the client-side (in the browser). This can be done via an ajax request (jsonp, ext.direct, rest, etc..).

Then you can load data into your store:

grid.store.loadData(result.data);

You can do this manually, or read about proxies in extjs. The easiest way to start is rest-proxy.

Dynamically Creating a grid EXTJS

1 Answers