Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member frew's Avatar
    Join Date
    Aug 2008
    Posts
    451
    Vote Rating
    0
    frew is on a distinguished road

      0  

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

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


    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:
    Code:
             // in the initComponent of my WorkOrders Grid
             this.sortInfo = {
                field: 'repair_order_date_received',
                direction: 'desc'
             };
    Code:
             // 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:
    Code:
    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

  2. #2
    Ext JS Premium Member frew's Avatar
    Join Date
    Aug 2008
    Posts
    451
    Vote Rating
    0
    frew is on a distinguished road

      0  

    Default


    Oh, and just to be a little bit more clear, here is that onRender method:

    Code:
          onRender: function(ct, position) {
             ACDRI.ui.Grid.superclass.onRender.call(this, ct, position);
             this.getStore().load();
          },
    -fREW

  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


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

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  4. #4
    Ext JS Premium Member frew's Avatar
    Join Date
    Aug 2008
    Posts
    451
    Vote Rating
    0
    frew is on a distinguished road

      0  

    Default


    Quote Originally Posted by jsakalos View Post
    Could you post a working showcase please? The code looks good but who knows. You may also hit a bug.
    Yessir:

    Code:
    <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.
    -fREW

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Still missing JSON - just some file with static data.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    No need. It's a bug in Ext.data.Store. load method is defined twice, 2nd taking precedence:
    Code:
        // 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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,017
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Thanks Saki, fixed in SVN.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 2