EXTJS 3,如何显示网格弹出?

时间:2012-07-03 14:25:14

标签: javascript extjs

在EXTJS 3中,如何在弹出窗口中显示网格?

我有这个编码,为什么它不起作用?

 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();

1 个答案:

答案 0 :(得分:2)

这段代码完全没有问题,但是如果你尝试使用JSFiddle,它就无法运行了,我也不知道为什么。我尝试使用我的本地Ext 3.4,它工作正常。这是我的代码。

<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>