PDA

View Full Version : Ext.extend not working



rstuart
28 Feb 2011, 12:59 AM
Hi All,

I have a feeling this is going to be a really dumb question but I can't seem to solve it. I have two pieces of code that are almost identical - all they do is create JsonStore and a Grid to display the data in the store. Eventually, this page will have a tab panel with a grid in each tab plus its associated store. Here is the piece of code that works:


Ext.onReady(function() {
var store = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: '{% url rules:foci codebook_id %}',
}),
autoDestroy: true,
root: 'foci',
idProperty: 'id',
remoteSort: true,
sortInfo: {
field: 'code',
direction: 'ASC'
},
fields: ['id', 'code', 'description'],
restful: true
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id: 'code',
header: 'Focus',
width: 150,
sortable: true,
dataIndex: 'code'
}, {
id: 'description',
width: 150,
header: 'Description',
sortable: true,
dataIndex: 'description'
}
],
autoExpandColumn: 'description',
height: 350,
width: 600,
title: 'Foci',
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying foci {0} - {1} of {2}',
emptyMsg: "No foci to display",
})
});
grid.render('facet-grid');
store.load({'params': {'start': 0, 'limit': 25}, callback: function(a, b, c) {
console.log(a, b, c);
}
});
});

And here is the piece that doesn't:


Ext.ns('Ilib', 'Ilib.data', 'Ilib.ui');
Ilib.data.FociStore = Ext.extend(Ext.data.JsonStore, {
autoDestroy: true,
root: 'foci',
idProperty: 'id',
remoteSort: true,
sortInfo: {
field: 'code',
direction: 'ASC'
},
fields: ['id', 'code', 'description'],
restful: true
});
Ext.onReady(function() {
var store = new Ilib.data.FociStore({
proxy: new Ext.data.HttpProxy({
url: '{% url rules:foci codebook_id %}',
})

});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id: 'code',
header: 'Focus',
width: 150,
sortable: true,
dataIndex: 'code'
}, {
id: 'description',
width: 150,
header: 'Description',
sortable: true,
dataIndex: 'description'
}
],
autoExpandColumn: 'description',
height: 350,
width: 600,
title: 'Foci',
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying foci {0} - {1} of {2}',
emptyMsg: "No foci to display",
})
});
grid.render('facet-grid');
store.load({'params': {'start': 0, 'limit': 25}, callback: function(a, b, c) {
console.log(a, b, c);
}
});

All I have done is extracted the fixed values for the store out into its own class using Ext.extend. It is really basic but the second version of the code passes a success flag of False to the callback. It looks like it isn't subclassing properly but I can't figure out why. A similar type of bizarre failure happens when I try to do the same to the grid but as far as I know I am doing the simplest type of subclassing possible, just creating a pre-configured class!!? Any ideas?

fay
28 Feb 2011, 1:20 AM
Give this a go - I haven't tested it but it looks like what it should be based on the Extend (http://dev.sencha.com/deploy/dev/docs/?class=Ext&member=Extend) example in the docs.



Ilib.data.FociStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(config) {
config = Ext.apply({
autoDestroy: true,
root: 'foci',
idProperty: 'id',
remoteSort: true,
sortInfo: {
field: 'code',
direction: 'ASC'
},
fields: ['id', 'code', 'description'],
restful: true
}, config);

Ilib.data.FociStore.superclass.constructor.call(this, config);
}
});

rstuart
28 Feb 2011, 1:37 AM
This fixes it but I don't know why. I thought this line in the extends function:


sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};

existed so you specifically didn't have to override the constructor. Obviously not. Thanks for your help.