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...
- 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 benew Ext.data.ArrayStore({})in Ext version < 4.x – VDP Commented Apr 24, 2013 at 8:04
1 Answer
Reset to default 2You 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();
});