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

[frew]

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)

[IMG]chrome://firebug/content/blank.gif[/IMG]            options.params[pn["sort"]] = this.sortInfo.field;
ext-all-debug.js (line 18932)
options.params is undefined
[IMG]chrome://firebug/content/blank.gif[/IMG]            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]

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]

Could you post a working showcase please? The code looks good but who knows. You may also hit a bug.

[frew]

Could you post 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]

Still missing JSON - just some file with static data.

[jsakalos]

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]

Thanks Saki, fixed in SVN.