[Solved]Ext.Ajax.on('beforerequest' does not work when request created in object

[Buthrakaur]

I'm just trying to refactor my Ext-js code in more OO way. I use Ajax.beforerequest event successfully until now. Since I wrapped my page code into a class, the event is not being called any more.

My current code looks like this:

function PageUI(config){
  this.config = config;
}

PageUI.prototype = {
  init: function(){
    this.setupDataSource();
    this.setupGrid();
    this.loadData(); //invokes load() on Ext.data.Store instance with JsonReader = Ext.Ajax request
  }
  ...
}

var gui = new PageUI({loaderURL: 'xx'});
Ext.onReady(function(){ 
  Ext.Ajax.on('beforerequest', function(){ alert('request'); });
  gui.init(); 
}, gui, true);

I tried to move the beforerequest event registration around - into the PageUI.init method etc, but nothing worked - the alert is never shown. I use exactly the same approach in my pages which are not OO-refactored yet and it works there without any problems..

anybody has an idea what am I doing wrong?

[hendricd]

Can't tell from your lean example but, are you sure store.load has a Url to work with ?

function PageUI(config){
  this.config = config||{};
  Ext.apply(this,this.config); ??
}

[Buthrakaur]

the page itself is working without any poblems - the data is loaded into the Store (and grid) properly, only the beforerequest event isn't fired. everything else is working great. I could paste complete code, but it's quite long and does not relate to these Ajax events...

[hendricd]

Can you post your loadData() and setupGrid() members?

[Buthrakaur]

this is my complete js code for this page:

[CODE]
var viewConfig = {
siteRoot: '/PromoSystem',
urlDsLoader: '/promosystem/Preforecasts/GetPreforecastListJX.rails',
urlNewPreForecast: '/promosystem/Preforecasts/NewPreForecast.rails',
urlEditPreForecast: '/promosystem/Preforecasts/EditPreForecast.rails' + '?pfcId=',
urlEditPreForecastBrands: '/promosystem/Preforecasts/EditPreForecastBrands.rails' + '?pfcId='
};


var ajaxRequestCount = 0;
Ext.Ajax.on({
'beforerequest': function(){
ajaxRequestCount++;
Ext.get('loading').show();
},

'requestcomplete': function(){
ajaxRequestCount--;
if (ajaxRequestCount <= 0){
Ext.get('loading').fadeOut({duration: 0.3});
ajaxRequestCount = 0;
}
},

'requestexception': function(){
ajaxRequestCount--;
if (ajaxRequestCount <= 0){
Ext.get('loading').fadeOut({duration: 0.3});
ajaxRequestCount = 0;
}
}
});

function GridUI(config) {
this.config = config;

//this dtFrom, dtTo;
this.dtFromDefault = new Date().add(Date.MONTH, -1);
this.dtToDefault = new Date().add(Date.MONTH, 1);
}

GridUI.prototype = {
init: function(){
this.setupDataSource();
this.setupGrid();
},

setupDataSource: function(){
this.ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy(new Ext.data.Connection({url: this.config.urlDsLoader})),
reader: new Ext.data.JsonReader(
{root: 'rows', id: 'id', totalProperty: 'rowCount'},
[
{name: 'id'},
{name: 'name'},
{name: 'description'},
{name: 'month'},
{name: 'year'}
]
),
remoteSort: true
});

this.ds.setDefaultSort('month', 'asc');

this.ds.on('beforeload', function(store, options) {
this.ds.baseParams = {
dateFrom: this.dtFrom ? this.dtFrom.getValue().getTime() : this.dtFromDefault.getTime(),
dateTo: this.dtTo ? this.dtTo.getValue().getTime() : this.dtToDefault.getTime()
};
}, this);

this.ds.on('loadexception', function(o, response, responseStr){
var respJson = Ext.util.JSON.decode(responseStr.responseText);
if (respJson.errMessage){
Ext.Msg.alert('Chyba', respJson.errMessage.substr(0,200));
}
else{
Ext.Msg.alert('Chyba', response);
}
}, this);

this.reloadDS();
},

reloadDS: function(){
this.ds.load({params:{start:0, limit:20}});
},

getColumnModel: function(){
return new Ext.grid.ColumnModel(
[
{
header: 'N

[hendricd]

Try moving Ext.Ajax.on(...) into the onReady block. the EventManager may not be quite ready for you at the stage your setting listeners.

[Buthrakaur]

I already tried this and moved the Ext.Ajax.on block on the beginnig of Ext.onReady handler function, but it doesn't help - the events are never called. Unfortunately I have no other idea what else should i try to make it work ;( in my non-OO-refactored pages, this Ajax handling is working without any problems (even when I assign the handlers before and out of the Ext.onReady event). Could this be some scope-related issue? Because this is the only thing that changes when I refactor my spagetti-code into a class...

[tryanDLS]

When you add listeners to the Ext.Ajax object, you're adding them to the global singleton object. When you setup your Store, you passed a Connection object to the proxy. This cause s the proxy to create it's own Ajax instance to do the the request. Try just passing the
{url:'...'} config to your proxy, which should cause it to use the singleton Ajax instance and fire your handlers.

[Buthrakaur]

thanks a lot, Tim. this was the real reason - now the ajax-events are working again...

[Cisco Kid]

Try just passing the {url:'...'} config to your proxy, which should cause it to use the singleton Ajax instance and fire your handlers.

While I am glad you answered his question - seeing the code changes you're recommending would be more helpful to those of us who did not understand your answer...