Javascript 如何使用ExtJs在窗口中显示网格？

我的ExtJs应用程序有问题。
我想在窗口中显示网格。我说：

柱模型：

            var markCm = new Ext.grid.ColumnModel({
            columns:[{
                header: 'Аннотация',
                dataIndex: 'annotation',
                width: 230,
            },{
                header: 'Дата',
                dataIndex: 'mark_date',
                width: 30
            },{
                header: 'Статус',
                dataIndex: 'status',
                width: 30
            }],
            defaults: {
                flex: 1
            }
        });
        console.log("1");

网格：

窗口：

            console.log("2");
        var markWin = new Ext.Window({
            id: 'markWindow', 
            layout: 'fit',
            title:'Спискок маркеров',
            autoScroll:false,
            //width:600,
            items:[markGrid],
            listeners:{
            }
        });
        console.log("3");
        markWin.show();
        console.log("4");

在firebug中我看到：

1
2
3
TypeError: this.ds is undefined
...ng(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(h);k.params=l}e...

有什么不对劲

更新

我尝试像这样添加存储

和获取错误：

1
TypeError: d[a] is not a constructor
...ng(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(h);k.params=l}e...

---

你错过了一家商店。每个网格都需要一个存储。（this.ds未定义=>ds可能是数据存储）

我不知道你用的是什么版本。（通过在控制台中键入

Ext.versions.extjs.version

检查）

如果您使用的是最新的ExtJS版本（4.x），最好使用

Ext.define

和

Ext.create

，而不是使用“new”关键字：）

这是一个

更新

您使用的示例来自Ext 4.x=>

Ext.data.ArrayStore

无法通过Ext.create创建，但在Ext版本<4.x:）中使用新关键字

---

ExtJS是否已正确加载到您的网页中？更新了我的答案，您看到的是4.0.7示例<代码> Ext.Cube（‘Ext.Deal.AdaySt店’，{}），应该是代码>新Ext.DATa. ArrayStore（{}）< /C> > EXT版本<4.XI使用ExtJS 3.4。我添加存储。你们能看一下问题更新吗？是的，问题就在眼前。我只是认为网格可以显示柱状模型，而无需存储。

            var markGrid = new Ext.grid.GridPanel({
            store: Ext.create('Ext.data.ArrayStore', {}),
            cm: markCm, 
            selModel: new Ext.grid.RowSelectionModel(),
            stripeRows : true,
            //height: 400,
            //loadMask: true,
            id: 'markGrid',
            autoScroll: true,
        });

1
TypeError: d[a] is not a constructor
...ng(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(h);k.params=l}e...

Ext.onReady(function () {
    Ext.define('MyApp.model.Mark', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'id',
            type: 'int'
        }, {
            name: 'annotation',
            type: 'string'
        }, {
            name: 'mark_date',
            type: 'date'
        }, {
            name: 'status',
            type: 'string'
        }]
    });
    Ext.define('MyApp.store.Marks', {
        extend: 'Ext.data.Store',

        //best to require the model if you  put it in separate files
        requires: ['MyApp.model.Mark'],
        model: 'MyApp.model.Mark',
        storeId: 'markStore',
        data: {
            items: [{
                id: 1,
                annotation: "Test",
                mark_date: "2013-04-24 9:28:00",
                status: "Done"
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        itemId: 'markGrid',
        store: Ext.create('MyApp.store.Marks'),
        loadMask: true,
        width: 400,
        columns: [{
            header: 'Аннотация',
            dataIndex: 'annotation',
            width: 230,
            flex: 1
        }, {
            header: 'Дата',
            dataIndex: 'mark_date',
            width: 30,
            flex: 1
        }, {
            header: 'Статус',
            dataIndex: 'status',
            width: 30,
            flex: 1
        }]
    });

    var window = Ext.create('Ext.window.Window', {
        renderTo: Ext.getBody(),
        items: [grid]
    });

    window.show();
});

 Ext.onReady(function () {
     var markCm = new Ext.grid.ColumnModel({
         columns: [{
             header: 'Аннотация',
             dataIndex: 'annotation',
             width: 230,
         }, {
             header: 'Дата',
             dataIndex: 'mark_date',
             width: 30
         }, {
             header: 'Статус',
             dataIndex: 'status',
             width: 30
         }],
         defaults: {
             flex: 1
         }
     });
     var markGrid = new Ext.grid.GridPanel({
         store: new Ext.data.ArrayStore({}),
         cm: markCm,
         selModel: new Ext.grid.RowSelectionModel(),
         stripeRows: true,
         //height: 400,
         //loadMask: true,
         id: 'markGrid',
         autoScroll: true,
     });
     var markWin = new Ext.Window({
         id: 'markWindow',
         layout: 'fit',
         title: 'Спискок маркеров',
         autoScroll: false,
         //width:600,
         items: [markGrid],
         listeners: {}
     });

     markWin.show();
 });