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

How to show grid in window with ExtJs?

提问by Kliver Max

Thare is problem in my ExtJs app.
I want to show grid in window. I says:

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

Column Model:

立柱型号：

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

Grid:

网格：

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

Window:

窗户：

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

And in firebug i see:

在萤火虫中，我看到：

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

Whats can be wrong?

什么可能是错的？

UPDATE

更新

I try add store like in this 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,
        });

and get error:

并得到错误：

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

回答by VDP

You are missing a store. Every grid needs a store. (this.ds is undefined => ds is probably dataStore)

你缺少一家商店。每个网格都需要一个商店。（this.ds 未定义 => ds 可能是 dataStore）

I don't know what version you are working with. (check that by typing Ext.versions.extjs.versionin the console)

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

In case you are working with latest ExtJS version (4.x) it is preferred to use Ext.defineand Ext.createinstead of using the 'new' keyword :)

如果您使用的是最新的 ExtJS 版本 (4.x)，则最好使用Ext.defineandExt.create而不是使用“new”关键字:)

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

UPDATE

更新

You are using an example from Ext 4.x => Ext.data.ArrayStorecan't be created via Ext.create but use the new keyword in Ext versions < 4.x :)

您正在使用 Ext 4.x 中的示例 =>Ext.data.ArrayStore无法通过 Ext.create 创建，但在 Ext 版本 < 4.x 中使用 new 关键字 :)

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

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