Question

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

在萤火虫中，我看到了：

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未定义=＆gt; 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 =＆gt;中的示例Ext.data.ArrayStore 无法通过Ext.create创建，但在Ext版本中使用new关键字＆lt; 4.x：）

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

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

1 个答案: