PDA

View Full Version : [FIXED][3.x] Why won't my grid sort like I'd hoped and dreamed?


frew
7 Apr 2009, 7:11 AM
Hello friends!

So I just switched to the latest and greatest svn checkout of Ext 3 (my version was a week or so old because of the issue I am posting about now) because it fixed some other bug. This issue is probably mine though.

So I have a bunch of grids that inherit from one base grid. I would like to be able to predefine the sorting of the grids and this is how I am doing it:

// in the initComponent of my WorkOrders Grid
this.sortInfo = {
field: 'repair_order_date_received',
direction: 'desc'
};


// in the initComponent of my base grid
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);
The code seems fine to me, but it apparently isn't. When I try to instantiate a grid with the sortInfo defined I get this error:

getBrowser().fastFind.currentWindow is null
load()(Object)ext-all-debug.js (line 18932)
onRender()(Object dom=div#ext-gen41.x-panel-body id=ext-gen41, null)ACDRI.ui.Grid.js (line 36)
render()(Object dom=div#ext-gen41.x-panel-body id=ext-gen41, undefined)ext-all-debug.js (line 24203)
render()()ext-all-debug.js (line 26898)
onLayout()(Object initialConfig=Object xtype=workorder_filter_grid, Object dom=div#ext-gen41.x-panel-body id=ext-gen41)ext-all-debug.js (line 28101)
layout()()ext-all-debug.js (line 27393)
doLayout()(undefined)ext-all-debug.js (line 27172)
doLayout()(undefined)ext-all-debug.js (line 27179)
setActiveItem()(Object initialConfig=Object xtype=workorder_filter_grid)ext-all-debug.js (line 27668)
setActiveTab()(Object initialConfig=Object xtype=workorder_filter_grid)ext-all-debug.js (line 36299)
(?)()([Node workorder_filter_grid] childrenRendered=false rendered=true)ACDRI.ui...cation.js (line 25)
(?)()()ext-all-debug.js (line 2043)
each()([Object scope=Object options=Object, Object scope=Object options=Object 0=Object 1=Object], function(), undefined)ext-base.js (line 170)
fire()()ext-all-debug.js (line 2041)
fireEvent()()ext-all-debug.js (line 1728)
proxyNodeEvent()("click", [Node workorder_filter_grid] childrenRendered=false rendered=true, Object browserEvent=Event mouseout button=0 type=mouseout, undefined, undefined, undefined, undefined)ext-all-debug.js (line 41767)
fireEvent()("click")ext-all-debug.js (line 22787)
fireEvent()()ext-all-debug.js (line 43452)
onClick()(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all-debug.js (line 43536)
onNodeClick()(Object browserEvent=Event mouseout button=0 type=mouseout, [Node workorder_filter_grid] childrenRendered=false rendered=true)ext-all-debug.js (line 42334)
delegateClick()(Object browserEvent=Event mouseout button=0 type=mouseout, span)ext-all-debug.js (line 42317)
h()ext-all-debug.js (line 2386)

chrome://firebug/content/blank.gif options.params[pn["sort"]] = this.sortInfo.field;
ext-all-debug.js (line 18932)
options.params is undefined
chrome://firebug/content/blank.gif options.params[pn["sort"]] = this.sortInfo.field;
Interestingly, this only happens when I try to load the store on render. (by defining the onRender method, not with a listener.)

Any ideas of what I should try instead?

Thanks!
frew
7 Apr 2009, 7:13 AM
Oh, and just to be a little bit more clear, here is that onRender method:


onRender: function(ct, position) {
ACDRI.ui.Grid.superclass.onRender.call(this, ct, position);
this.getStore().load();
},
jsakalos
7 Apr 2009, 7:25 AM
Could you post a working showcase (http://extjs.com/forum/../learn/Ext_Forum_Help#Posting_a_working_showcase) please? The code looks good but who knows. You may also hit a bug.
frew
7 Apr 2009, 7:38 AM
Could you post a working showcase (http://extjs.com/forum/../learn/Ext_Forum_Help#Posting_a_working_showcase) please? The code looks good but who knows. You may also hit a bug.

Yessir:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Aircraft Ducting Repair, Inc.</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, {
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: 'frew' }),
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();

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);
}
});
</script>
<script type="text/javascript">
ACDRI.ui.WorkOrders = Ext.extend(ACDRI.ui.Grid, {
initComponent: function() {
this.sortInfo = {
field: 'repair_order_date_received',
direction: 'desc'
};
this.record = Ext.data.Record.create([
{name: 'id', type: 'string'}
]);
var config = {
title: 'Work Orders',
columns: [{
header: 'ID',
tooltip: 'ID used to identify the Work Order',
dataIndex: 'id',
hidden: true
}]};
Ext.apply(this, Ext.apply(this.initialConfig, config ));
ACDRI.ui.WorkOrders.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('workorders', ACDRI.ui.WorkOrders);
</script>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.Window({
items: {
xtype: 'workorders',
height: 400,
width: 400
}}).show();
});
</script>
</head>
<body>
<div id='main'></div>
</body>
</html>


Just toggle line 13 to see it work.
jsakalos
7 Apr 2009, 7:41 AM
Still missing JSON - just some file with static data.
jsakalos
7 Apr 2009, 7:47 AM
No need. It's a bug in Ext.data.Store. load method is defined twice, 2nd taking precedence:


// new load method by chris. Uses Store#execute instead of this.proxy.load
load : function(options) {
options = options || {};
this.storeOptions(options);
if(this.sortInfo && this.remoteSort){
var pn = this.paramNames;
options.params = options.params || {};
options.params[pn["sort"]] = this.sortInfo.field;
options.params[pn["dir"]] = this.sortInfo.direction;
}
return this.execute('load', null, options);
},
As a workaround call load({params:{}})

Moving this thread to bugs.
evant
7 Apr 2009, 7:53 AM
Thanks Saki, fixed in SVN.