CODEWITHSUNDEEP
javascriptextjs
user595234
user595234

Reputation: 6259

EXTJS 3, how to display a grid to popup?

In the EXTJS 3, how to display a grid to a popup ?

I have this coding, why it doesn't work ?

 var myData = [['ddd', '1111'], ['eee', '2222']];

            var store = new Ext.data.ArrayStore({
                fields: [
                   { name: 'FLD' },
                   { name: 'VAL' }
                ]
            });
            store.loadData(myData);

            var grid = new Ext.grid.GridPanel({
                store: store,
                loadMask: true,
                colModel: new Ext.grid.ColumnModel({
                    defaults: {
                        width: 120,
                        sortable: true
                    },
                    columns: [
                        { header: 'FLD', dataIndex: 'FLD' },
                        { header: 'VAL', dataIndex: 'VAL' }
                    ]
                }),
                viewConfig: {
                    forceFit: true
                }
            });

            var myWin = Ext.create("Ext.Window", {
                layout: 'fit',
                title: 'Exception Detail',
                width: 400,
                height: 300,
                closable: false,
                buttonAlign: 'center',
                items: [grid],
                modal: true
            });
            myWin.show();

Upvotes: 0

Views: 5539

Answers (1)

scusyxx
scusyxx

Reputation: 1244

This code has no problem at all but if you tried on JSFiddle, it is not working and I dont know why. I tried with my local Ext 3.4 and it is working fine. Here is my code.

<html>
<head>
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type='text/javascript' src='ext-3.4.0/ext-all.js'></script>
</head>
<body>
</body>
<script>
Ext.onReady(function() {

var myData = [['ddd', '1111'], ['eee', '2222']];

    var store = new Ext.data.ArrayStore({
        fields: [
            { name: 'FLD', type: 'string' },
            { name: 'VAL', type: 'string' }
        ]
    });

    store.loadData(myData);

    var grid = new Ext.grid.GridPanel({
        store: store,
        loadMask: true,
        columns: [
            { header: 'FLD', dataIndex: 'FLD' },
            { header: 'VAL', dataIndex: 'VAL' }
        ],
        viewConfig: {
            forceFit: true
        }
    });

    var myWin = new Ext.Window({
        layout: 'fit',
        title: 'Exception Detail',
        width: 400,
        height: 300,
        closable: false,
        buttonAlign: 'center',
        items: [grid],
        modal: true
    });
    myWin.show();});
</script>

Upvotes: 2

Related Questions