We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 39627
    • 4 Posts
    Here's my code, it's the basic modx tabs for the CP and it renders correctly. At the bottom are 2 ajax requests that are supposed to update the content in each tab and the first tab updates, but it seems like the ajax calls are made before the second tab exists, so it can't find that element to update.

    Is there a way to add a callback on the Ext.apply or something along those lines so that it waits until the tabs are created before it does the ajax calls?
    
    FoxyOrders.panel.Home = function(config) {
        config = config || {};
    	
    	Ext.apply(config,{
            border: false
            ,baseCls: 'modx-formpanel'
            ,cls: 'container'
            ,items: [{
                html: '<h2>Foxy Orders</h2>'
                ,border: false
                ,cls: 'modx-page-header'
            },{
                xtype: 'modx-tabs'
                ,defaults: { border: false ,autoHeight: true }
                ,border: true
                ,items: [{
                    title: 'Pending Orders'
                    ,defaults: { autoHeight: true }
                    ,items: [{
                        html: '<div id="pending_orders"><p>Loading Orders...</p></div>'
                        ,border: false
                        ,bodyCssClass: 'panel-desc'
                    }]
                },{
                    title: 'Completed Orders'
                    ,defaults: { autoHeight: true }
                    ,items: [{
                        html: '<div id="completed_orders"><p>Loading Orders...</p></div>'
                        ,border: false
                        ,bodyCssClass: 'panel-desc'
                    }]
    			}]
            }]
        });
        FoxyOrders.panel.Home.superclass.constructor.call(this,config);
    	
    	
    	
    };
    Ext.extend(FoxyOrders.panel.Home,MODx.Panel);
    Ext.reg('foxyorders-panel-home',FoxyOrders.panel.Home);
    
    	
    var pending_orders = function (response) {
    	pending_message = Ext.get('pending_orders');
    	pending_message.update(response.responseText);
    }
    
    var completed_orders = function (response) {
    	completed_message = Ext.get('completed_orders');
    	completed_message.update(response.responseText);
    }
    
    Ext.Ajax.request({
       url: '/assets/components/foxyorders/pending.php',
       success: pending_orders,
       failure: function () { console.log('failure');}
    });
    
    Ext.Ajax.request({
       url: '/assets/components/foxyorders/completed.php',
       success: completed_orders,
       failure: function () { console.log('failure');}
    });
    
      • 28215
      • 4,149 Posts
      deferredRender: true on the tabs definition might work.

      Otherwise, you'll have to add a listener to the "tabchange" event on the tabpanel.
        shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com
        • 39627
        • 4 Posts
        I ended up adding a listener and just loading that second tab when they click it.
          • 33968
          • 863 Posts
          I'm having a similar issue with updating a tab panel based on data pulled from a grid ajax request, using the following listener attached to a grid:

          ,listeners: {
                      render: function(grid) {   
                         var mask = new Ext.LoadMask(this.getEl(),{msg:_('loading')});
                         mask.show();                   
                         var store = grid.getStore();
                         store.on('load', function() {
                             var summary = store.reader.jsonData.summary;
                             Ext.get('evo-booking-total-bkgs').update(summary.totalBkgs);
                             Ext.get('evo-booking-total-cost').update(summary.totalCost);
                             Ext.get('evo-booking-total-due').update(summary.totalDue);
                             mask.hide();
                         }, grid);
                      }
                  }
          


          If I click the tab containing a grid 'before' it has fully loaded, this works fine. But if I let the whole page load up and then click the tab, the data has not been updated and the loading indicator remains spinning.

          The grid is in a second tab.

          Is 'render' correct, or is there a better event I should be attaching this listener to?
            • 18373 ☆ A M B ☆
            • 3,141 Posts
            Did you set deferredRender: false on the tabpanel config?
              Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

              Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.
              • 33968
              • 863 Posts
              Hi Mark - yes I've tried that and it hasn't made a difference here. It's fine if I leave off the loading indicator but if someone clicks through to that tab quickly they may see an empty grid until it loads.

              Will see if I can find something on the Sencha forums.