PDA

View Full Version : [FIXED][3.0] Javascript checkmated me :-(


frew
6 Apr 2009, 1:57 PM
Hello friends,

I am having a crazy issue here. I define a pagingtoolbar on instantiation of a grid and if I give it my grid's store I can no longer close the tab that contains the grid (it seems like it tries to close the store twice or something.) So I thought I'd be clever and instead of giving it the store I give it this.getStore(). Then I can close the tab, but I can no longer use the paging toolbar. Annoying city!

Here is my grid, simplified, but still with the issue:

Ext.ns('ACDRI.ui');

ACDRI.ui.Grid = Ext.extend(Ext.grid.GridPanel, {
generateUrl: function() {
return this.urlBuilder(this.controller, this.action);
},
urlBuilder: ACDRI.fn.generateUrl,
onRender: function(ct, position) {
ACDRI.ui.Grid.superclass.onRender.call(this, ct, position);
this.getStore().load();
},
initComponent: function() {
this.baseParams = this.baseParams || {};
var storeCfg = {
proxy: new Ext.data.HttpProxy({ url: this.generateUrl() }),
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'total'
}, this.record),
remoteSort: true,
baseParams: this.baseParams
};

if (this.sortInfo) {
Ext.apply(storeCfg, {sortInfo: this.sortInfo});
}
var store = new Ext.data.Store(storeCfg);
var sm = new Ext.grid.CheckboxSelectionModel();

this.columns = this.columns || [];
this.columns.unshift(sm);
this.tbar = this.tbar || [];

if (this.isPaginated) {
this.bbar = new Ext.PagingToolbar({
pageSize: 25,
//the bug is here apparently
store: store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No " + this.itemName + " to display"
})
}

var config = {
store: store,
loadMask: true,
sm: sm,
baseParams: this.baseParams
};
Ext.apply(this, Ext.apply(this.initialConfig, config ));
ACDRI.ui.Grid.superclass.initComponent.apply(this, arguments);
}
});

Any ideas?

Thanks!
jsakalos
6 Apr 2009, 2:03 PM
You need to add paging toolbar after parent call. See http://examples.extjs.eu/?ex=gridinbl for working example.
frew
6 Apr 2009, 2:25 PM
You need to add paging toolbar after parent call. See http://examples.extjs.eu/?ex=gridinbl for working example.


Ok, good news and bad news. The good news is that you're right (as always :)) saki. The bad news is that in Ext 3 the issue remains the same. I'll wait till it's officially release before I post anything about it being a bug.

Thanks saki!
jsakalos
6 Apr 2009, 2:31 PM
Toolbar is container in Ext 3.0 so maybe you need to wait until render.
jsakalos
6 Apr 2009, 2:34 PM
Disregard my previous post as I've right now tested the above example against 2 minutes old Ext 3.0 SVN and it works w/o any problems.
frew
6 Apr 2009, 2:37 PM
I just got the latest one from svn and I still have the issue... blehhh.
jsakalos
6 Apr 2009, 2:38 PM
There must be a difference. Only to find it....
frew
6 Apr 2009, 7:48 PM
Alrighty, I have the bare metal of my code (I think). Here it is, in one, 54 line file:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<script type="text/javascript" src="js/lib/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/lib/ext3/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="js/lib/ext3/resources/css/ext-all.css" />
<script type="text/javascript">
Ext.ns('ACDRI.ui');
ACDRI.ui.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: 'frew' }),
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'total'
}, this.record)
});

var config = { store: store };
Ext.apply(this, Ext.apply(this.initialConfig, config ));
this.bbar = new Ext.PagingToolbar({
pageSize: 25,
store: store
});
ACDRI.ui.Grid.superclass.initComponent.apply(this, arguments);
}});
ACDRI.ui.Customers = Ext.extend(ACDRI.ui.Grid, {
initComponent: function() {
this.record = Ext.data.Record.create([
{name: 'name', type: 'string'}
]);
var config = {
title: 'Customers',
columns: [{
header: 'Name',
dataIndex: 'name',
tooltip: 'The name of the customer',
sortable: true,
width: 250
}]};
Ext.apply(this, Ext.apply(this.initialConfig, config));
ACDRI.ui.Customers.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('customers', ACDRI.ui.Customers);
Ext.onReady(function() {
var foo = new Ext.Window({ xtype: 'panel',
items: {
xtype: 'customers',
height: 200, width: 200
}});
foo.show();
});
</script>
</head>
<body>
<div id='main'></div>
</body>
</html>


Anyone see what I'm doing here that breaks it in ext 3 and not ext 2?

Note: it renders fine, and even works fine *until* you close it. Note the error message given for ext 3.

Any thoughts?
jsakalos
7 Apr 2009, 1:35 AM
It is most likely bug. I think PagingToolbar::bindStore should read:


bindStore : function(store, initial){
if(!initial && this.store){
this.store.un("beforeload", this.beforeLoad, this);
this.store.un("load", this.onLoad, this);
this.store.un("loadexception", this.onLoadError, this);

if(store !== this.store && this.store.autoDestroy){
this.store.destroy();
}
}
if(store){
store = Ext.StoreMgr.lookup(store);
store.on("beforeload", this.beforeLoad, this);
store.on("load", this.onLoad, this);
store.on("loadexception", this.onLoadError, this);

this.paramNames.start = store.paramNames.start;
this.paramNames.limit = store.paramNames.limit;

if (store.getCount() > 0){
this.onLoad(store, null, {});
}
}
this.store = store;



Moving this thread to bugs.
evant
7 Apr 2009, 1:45 AM
Well spotted! Fixed in SVN.