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

Question

我的 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");

网格:

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

窗口:

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

有什么问题吗？

更新

我尝试像这样添加商店 example

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

Answer 1

您错过了一家商店。每个网格都需要一个商店。 (this.ds 未定义 => ds 可能是 dataStore)

我不知道你用的是什么版本。 (通过在控制台中输入 Ext.versions.extjs.version 来检查)

如果您使用的是最新的 ExtJS 版本 (4.x)，最好使用 Ext.define 和 Ext.create 而不是使用 'new'关键词:)

这是一个working fiddle

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 4.x 中的示例 => Ext.data.ArrayStore不能通过 Ext.create 创建，但在 Ext 版本 < 4.x :) 中使用 new 关键字

http://jsfiddle.net/Vandeplas/BZUxa/

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