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

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

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

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

• javascript
• extjs

Share Improve this question Follow edited Apr 24, 2013 at 7:45 Kliver Max asked Apr 24, 2013 at 7:12 Kliver MaxKliver Max 5,3192424 gold badges101101 silver badges157157 bronze badges 2

• Has ExtJS loaded properly in your webpage ? – dreamweiver Commented Apr 24, 2013 at 7:18
• updated my answer you were looking at a 4.0.7 example. Ext.create('Ext.data.ArrayStore', {}), should be new Ext.data.ArrayStore({}) in Ext version < 4.x – VDP Commented Apr 24, 2013 at 8:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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

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

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

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.ArrayStore can't be created via Ext.create but use the new keyword in Ext versions < 4.x :)

http://jsfiddle/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();
 });