PDA

View Full Version : [ext-basex/$JIT 4.0 adapter extensions] Ajax enhancements and more.



Pages : 1 [2]

zombeerose
15 Jun 2009, 2:55 PM
The entire case uses a lot of custom components which would make it next to impossible to post any config. I could work on writing a simple example if needed.

Request - I'm not sure how I would copy an object for posting. Can you enlighten me?

Content-Type headers -
Request:
application/x-www-form-urlencoded; charset=UTF-8Response:
application/jsonthis at the beginning of the handleTransactionResponse method appears to the Ajax object but when examined thru firebug, the object does not have a createExceptionObject function.

I am running Ext 3.0 RC2

hendricd
15 Jun 2009, 2:59 PM
Doh! 8-|

in RC2 the createExceptionObject function is private. I must have missed that one. :>

Fix coming shortly.

zombeerose
15 Jun 2009, 3:00 PM
Hehe - glad it was an easy find :)

hendricd
15 Jun 2009, 6:31 PM
Latest build available in SVN. ;)

zombeerose
16 Jun 2009, 12:48 PM
Thanks for the quick fix.

zombeerose
9 Jul 2009, 1:59 PM
I was checking my project today for memory leaks using sIEve and have isolated some leaks when interacting with the basex extension. I have created this demo to help visualize. I am using your most recent svn code.

Basically, load the page in sIEve and after the message box appears, reload it. Everytime it reloads, the leaks accumulate. For every page reload in my project, I am getting 200-400 leaks according to sIEve.

Since you have a much more intimate knowledge of Ext, I was hoping you could help troubleshoot.

hendricd
10 Jul 2009, 6:33 AM
I was checking my project today for memory leaks using sIEve and have isolated some leaks when interacting with the basex extension. I have created this demo to help visualize. I am using your most recent svn code.

Basically, load the page in sIEve and after the message box appears, reload it. Everytime it reloads, the leaks accumulate. For every page reload in my project, I am getting 200-400 leaks according to sIEve.

Since you have a much more intimate knowledge of Ext, I was hoping you could help troubleshoot.

@zombeerose -- I've narrowed down the culprit. I'll have an update on the status shortly. ;)

hendricd
13 Jul 2009, 5:29 AM
@zombeerose -- I've narrowed down the culprit. I'll have an update on the status shortly. ;)

@zombeerose, et al -- The IE leak issues has been resolved with the latest release 3.5 of ext-basex/$JIT. Download from first post or SVN (http://code.google.com/p/ext-basex/downloads/list).

tomim
14 Jul 2009, 2:26 AM
Hi,

If anyone can help...

I am trying to call google translation service but I have an error "invalid label" when using AJAX and ext-basex.
See attached image.

I need this to call as synchronous call so I found that ext-basex is creating new script element on page with generated url for remote request. Response from server is json not enclosed in function so this is the cause of "invalid label" error.

When debugining in Firebug i found new element on page...

<script id="ext-gen3" type="text/javascript" src="http://ajax.googleapis.com/ajax/services/language/translate?q=hello&v=1.0&langpair=en%7Chr">
{"responseData": {"translatedText":"zdravo"}, "responseDetails": null, "responseStatus": 200}
</script>

Is there some workaround for this?!



Ext.Ajax.request( {
url : 'http://ajax.googleapis.com/ajax/services/language/translate',
async : false,
isJSON : true,

proxied : true,
params : {
q : 'hello',
v: '1.0',
langpair : 'en|hr'
},
method : 'GET',
callback : function(options,success,response){

alert(response.responseText);
}
});

tomim
14 Jul 2009, 7:40 AM
When debugining in Firebug i found new element on page...

<script id="ext-gen3" type="text/javascript" src="http://ajax.googleapis.com/ajax/services/language/translate?q=hello&v=1.0&langpair=en%7Chr">
{"responseData": {"translatedText":"zdravo"}, "responseDetails": null, "responseStatus": 200}
</script>

Is there some workaround for this?!



Ext.Ajax.request( {
url : 'http://ajax.googleapis.com/ajax/services/language/translate',
async : false,
isJSON : true,

proxied : true,
params : {
q : 'hello',
v: '1.0',
langpair : 'en|hr'
},
method : 'GET',
callback : function(options,success,response){

alert(response.responseText);
}
});

SOLVED!
Google translation service supports JSONP.


Ext.Ajax.request( {
url : 'http://ajax.googleapis.com/ajax/services/language/translate',
async : false,
isJSON : true,
proxied : {
debug :false ,
callbackParam: 'callback'
},
params : {
q : 'hello',
v: '1.0',
langpair : 'en|hr',
key : 'notsupplied'
},
callback : function(options,success,response){

alert(response.responseText);
}
});

hendricd
14 Jul 2009, 8:14 AM
SOLVED!
Google translation service supports JSONP.

Cool! ;)

Don't forget, with basex you get a response.responseJSON property (if isJSON request option is true, or an appropriate Content-Type is return eg [application|text]/json) too.


Ext.Ajax.request( {
url : 'http://ajax.googleapis.com/ajax/services/language/translate',
async : false,
isJSON : true,
proxied : {
debug :false ,
callbackParam: 'callback'
},
params : {
q : 'hello',
v: '1.0',
langpair : 'en|hr',
key : 'notsupplied'
},
callback : function(options,success,response){
var r = response.responseJSON || Ext.decode(response.responseText);
alert(response.responseText);
}
});

tomim
14 Jul 2009, 11:12 AM
Appreciate for that. Thank you for the info. :)

For now I have a problem of synchronous loading of translations before components are rendered.

I am working on small addon for dynamic translation http://extjs.com/forum/showthread.php?t=72978

My idea is to implement client only version(server version is working well) which will directly call google translation service. There wil be no need for server side support.

I have Ext.Component override which adds all text properties to the cutom cache object and then translate texts directly over google translation service. After translation is done, all properties will be updated before rendering. For this to work, calls must be synchronous, but the problem is in domain different than my server (Tomcat on localhost) so ext-basex.js override of Ext.Ajax creates temporary script elements that load responses but they are not loaded synchronously.

I am not sure is it possible to load proxied datas synchronously?!?!?

Is there any special options except async=false?!

Thanks for any help.

hendricd
14 Jul 2009, 6:59 PM
... My idea is to implement client only version(server version is working well) which will directly call google translation service. There wil be no need for server side support.


@tomim -- Lofty goal indeed. :-?

The issue is (because of the on-going need to support legacy browsers) synchronous x-domain Ajax is just not practical yet. It will be YEARS before we can safely leverage such a dream on public sites (assuming that's your use-case).

So, your best bet is still a server-side HTTP-Proxy to deliver translated content.

Until things change, why not maintain your 'locatlization' cache server-side to be used in serving up dynamic Component configs as needed.

tomim
15 Jul 2009, 3:03 AM
@tomim -- Lofty goal indeed. :-?

Thanks. :D




So, your best bet is still a server-side HTTP-Proxy to deliver translated content.

Until things change, why not maintain your 'locatlization' cache server-side to be used in serving up dynamic Component configs as needed.

I agree with that. I already have server-side HTTP-Proxy implemented. This feature for browser side proxy is just as a second option. It will be useful at least for me for some testing.

Some 6-7 months ago I have wrote script that is dynamically loading additional javascript or css files. Problem I had with loading dynamic scripts where when second one must be loaded after the first one was loaded completly. Finnaly I solved the problem. Scripts are loaded synchronously. Definitively works with IE, Firefox and Chrome.

Analyzing ext-basex.js... it is working in the very similar way for loading JSONP but for some reason after second request synchronous calls are broken. I could not find in wich point this occures. But I am sure this is possible with onReadystatechange event for "script" tag.

Anyway, for now I will leave this for some newer version.

mrkadakia
16 Jul 2009, 7:20 PM
Hi -
I am using Ext 2.2 and when I try to run the XmlTreeLoader example under "tree" directory, nothing gets displayed in the Reading List panel:

ext-2.2\examples\tree\xml-tree-loader.html

I am using Ext 2.2 for client side application, thus I am not using a web server.

mjlecomte directed me to this thread after realizing that I am not using a web server. My original thread is:

http://extjs.com/forum/showthread.php?t=74706

There are so many posts to this thread that I do not know which one to follow. I simply would like to run the XmlTreeLoader example from local file system.

Any inputs would be appreciated.

Thanks

Trinad
17 Jul 2009, 9:14 AM
Hi,

I have tried your ext-basex plugin to call cross domain url Synchronously but id didn't work.

I am using the below code.


var resp = Ext.Ajax.request( {
url : 'http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
async : false,
isJSON : true,
proxied :true

}).responseText;

Please help me.

Thanks,
Trinad.

hendricd
18 Jul 2009, 6:37 AM
Hi,

I have tried your ext-basex plugin to call cross domain url Synchronously but id didn't work.

I am using the below code.


var resp = Ext.Ajax.request( {
url : 'http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
async : false,
isJSON : true,
proxied :true

}).responseText;Please help me.

Thanks,
Trinad.
@Trinad -- As JSONP must use a <SCRIPT> tag to satisfy an x-domain request, it will always be an asynchronous request. You must handle the response in a callback.


Also, note: By specifying isJSON:true in your request options, response.responseJSON will be available to you.

Trinad
20 Jul 2009, 5:42 AM
Thanks Doug.

mrkadakia
21 Jul 2009, 5:46 AM
What do I need to do in order to run XML examples locally with ExtJS?

Do I just need to include the path to the extension?

hendricd
21 Jul 2009, 6:13 AM
What do I need to do in order to run XML examples locally with ExtJS?

Do I just need to include the path to the extension?

@mrkadakia -- There are a couple of rules you need to follow.

1) In order to access file-system content, your host page must ALSO be loaded from the same file-system (same-origin policy still applies).

2) For IE > 6, you must set:

Ext.lib.Ajax.forceActiveX = true;as the native (non-ActiveX) XHR object does not permit local file system access.

3) For FireFox (and others), your Ajax content must be located in the same (or child) directory relative to the host page.

Add:
And, of course, load the ext-basex.js adapter extension in your <head> section after ext-all[-debug].js.

hendricd
21 Jul 2009, 6:19 AM
@All -

Release 3.5.1 includes an important fix for IE6 header processing.

Available on first post, or SVN.

Get it soon!

mrkadakia
21 Jul 2009, 10:07 AM
Hi hendricd,
Thank you for so much for listing down the steps. Yes, I was able to get it working.

I am really grateful for your time and effort.

Great stuff...

ZooKeeper
22 Jul 2009, 5:42 AM
Hey Doug!

Doesn't look like you sleep at all. That's a technique i'd love to master! What's your secret?
~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o) - somewhat works for me

Anyway. Was wondering why ext-basex is not taking care of file Uploads?
I'd love to be able to catch Ext.lib.Ajax response, request and exception events you kindly provide with basex.

For now I have to do this via hacky override of Ext.data.Connection.doFormUpload, which.. pretty much sucks :)

hendricd
22 Jul 2009, 6:00 AM
Hey Doug!

Doesn't look like you sleep at all. That's a technique i'd love to master! What's your secret?
~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o)~o) - somewhat works for me

Anyway. Was wondering why ext-basex is not taking care of file Uploads?
I'd love to be able to catch Ext.lib.Ajax response, request and exception events you kindly provide with basex.

For now I have to do this via hacky override of Ext.data.Connection.doFormUpload, which.. pretty much sucks :)

@Zoo -- I've thought about it, but Uploaders are a dime a dozen these days. I'm thinking about one (a component) that takes advantage of the newer onprogress callbacks (yet degrades down to IE6), but later.... ;)

baumschule
21 Aug 2009, 3:56 AM
is somewhere a documentation for JIT and ModulManager available?

a more bulky version than on http://uxdocs.theactivegroup.com/ or http://code.google.comp/ext-basex/?

the few code snippets i found are not enough and the examples are to complex for me.

i want to see a simple example
- how to create / define a module
- how to use / call this module with jit
- and so on ...

one little simple projekt with jit and modulmanager from beginning to the end.
with using and explaining as much as possible methods and options.

i know its perhabs a tall order but is somesthing like this available somewhere?

hendricd
21 Aug 2009, 4:20 AM
@baumschule -- You're right. A tutorial is certainly warranted for JIT. I'm currently planning one -- just trying to limit the scope to two or three popular use-cases (whatever those actually are) and deciding where to host it.

Was there a specific problem-space you were contemplating?

baumschule
21 Aug 2009, 5:02 AM
my main problems at the moment are first steps.
its irreproducible for me how to define a modul and how to call it after.

i have managed to load an external js script with $JIT.script() or $JIT.onAvailable()
but i cant get lazy loading to work.
and where i have to define the dependencies?
and so on ...

so many questions!
i just need a point to start from - so i can learn the rest for my self.

a little simple example wich explains the basics from JIT and ModulManager - thats what im searching for.

hendricd
21 Aug 2009, 8:22 AM
OK, some first steps (ending with a lazy-layout-config request).

Backgrounder:

$JIT is a client-side (browser-based) dynamic resource loader. No server-side scripts are required (unless you wish to package logical $JIT responses by appending multiple source files together). What (and how) you package things is entirely up to your needs.

Setup assumptions:

On our sample site heirarchy, the App modules you wish to load are all located in the same place (relative addresses): appModules/ (In reality these resources could be located on a CDN or other location)

and, in appModules/, you have some custom classes defined (a grid class perhaps: productsGrid.js)

and, let's say productsGrid depends on the RowEditor UX located in your site's extux path.

So, early in your page's life, describe these facts to $JIT:



$JIT.setModulePath('appModules/'); //default location of dyna-loaded scripts

/* Define our dependency table for ux module names */
var extux = 'extux/';

Ext.apply($JIT.depends, {
'RowEditor' : { path : extux }, //has priority over the default path
'productsGrid' : { depends: [ '@RowEditor', .... others ] }
});
Now, since you're a good programmer-doobie, and you need to debug things, tell $JIT to use <SCRIPT> tags to satisfy all requests:



$JIT.setTimeout(30000);
$JIT.setMethod('DOM'); //or XHR verbs: GET, PUT, POST, etc....
Ext.Loader.debug = true; //leave the script tags in place after loading anything
Note: By default $JIT removes all <SCRIPT> tags once the content is loaded and executed. Ext.Loader.debug controls this behavior. All other methods net the same result since they are ext-basex Ajax requests. No easily-visible source code is left to look at. ;)

Now, let's $JIT the entire resource chain (if they haven't previously been loaded already) during addition to a tabPanel layout:



var newTab = myTabs.add({
require : ['@productsGrid'],
xtype : 'productsgrid' //the xtype you may have defined for the custom grid class
});
myTabs.doLayout();
myTabs.setActiveTab(newTab);
Other Dynamic Patterns

Let's assume for the moment, that the defaultPath (defined above) is still in effect, but we'd like to load several modules from another location (asynchronously). Perhaps some cool third-party plugin or other Component(s). Since, $JIT-loaded modules can themselves make use of $JIT, compound Component structures can be created that behave asynchronously.

When all are available (loaded previously or not), we'll do something with them:

productsWin.js


$JIT(
{modulePath : '', method : 'GET'}, //reset the path for this request chain
'appModules/productsGrid',
'ux/miframe' , //load the ux.ManagedIframe Component as needed ;)
'css/custom.css,

function(ok){ //the callback
if(ok){
var win = Ext.getCmp('productsWin') ||
new Ext.Window({
title : 'Product Sites Preview',
layout : 'border'
id : 'productsWin',
closeAction: 'hide',
height : 700,
width : 800,
items: [
{xtype: 'iframepanel',
region : 'south',
height : 300
},
{ xtype : 'productsgrid',
region : 'center'
}
]
});

win.show();
}

}
);
//Apply a styleSheet whenever it becomes available
$JIT.onAvailable('custom.css', function(success){
success && $JIT.applyStyle('custom.css');
});

/* For debugging purposes, this script may be loaded via a <script> tag YOU placed directly in the
<head> section of your page, so tell ModuleManager that it's already loaded:
*/

Ext.provide && Ext.provide('productsWin');
Then, whenever you need the 'products Window' package, $JIT it:

$JIT('productsWin');

baumschule
21 Aug 2009, 12:34 PM
WOW! thats great!

i have only skimed through the text for the moment but i think this wil help a lot!

THANKS!

now i will start to test it for my self and if i have any further questions i will report here.

jfa
26 Aug 2009, 2:13 AM
Hello, i have an unexpected behavior when ajax request timeout is reached.
With the code below, the callback is executed twice with these status data :

status = 0, error = true, timeout = false
status = 0, error = true, timeout = true




Ext.Ajax.request({
url: "http://foo/bar",
timeout: 1000,
failure: function() {
console.log("cb fto failure")
}
})

After a little investigation, it seems first call is done by onStateChange
Can you help me to avoid this first callback ?

bt_bruno
26 Aug 2009, 3:59 AM
I'm was having some throubles about loading dinamic JS on IE. In latest version function domNode looks like this


var domNode = function(tag, attributes, callback, context, deferred)
{
....

if (callback && node) {
var cb = (callback.success || callback).createDelegate(callback.scope || null, [callback], 0);

Ext.capabilities.isEventSupported('load', node) ?
node.on("load", cb, null, {single:true}) :
cb.defer(50);
}
!deferred && head.appendChild(ndom);
}

If browser doesn't support load event on node, $jit will do a simple defer. An older version look like this:


var domNode = function(tag, attributes, callback, context, deferred) {

...

if (callback) {
var cb = (callback.success || callback).createDelegate(
callback.scope || null, [callback], 0);
if (Ext.isIE) {

node.onreadystatechange = node.onload = function() {
if (/loaded|complete|4/i.test(String(this.readyState))) {
cb();
}
}.createDelegate(node);
} else if (Ext.isSafari3 && tag == 'script') {
// has DOM2 support
node.addEventListener("load", cb);
} else if (Ext.isSafari) {
cb.defer(50);
} else {
/*
* Gecko/Safari has no event support for link tag so just
* defer the callback 50ms (optimistic)
*/
tag !== 'link' || Ext.isOpera ? Ext.get(node)
.on('load', cb) : cb.defer(50);
}

}
if (!deferred) {
head.appendChild(node);
}
}

}

Why IE onreadystatechange and others workarounds were removed?

hendricd
26 Aug 2009, 5:17 AM
@bt_bruno --Make sure you are using the latest versions of BOTH jit.js and ext-basex.js (available in SVN and Forum Zip). jit.js was modified to match changes addressed in ext-basex.

hendricd
26 Aug 2009, 5:20 AM
Hello, i have an unexpected behavior when ajax request timeout is reached.
With the code below, the callback is executed twice with these status data :

status = 0, error = true, timeout = false

status = 0, error = true, timeout = true





Ext.Ajax.request({
url: "http://foo/bar",
timeout: 1000,
failure: function() {
console.log("cb fto failure")
}
})After a little investigation, it seems first call is done by onStateChange
Can you help me to avoid this first callback ?

@jfa - Thanks for report. ;)
Fixed in SVN/ latest Zip.

jfa
26 Aug 2009, 5:57 AM
@jfa - Thanks for report. ;)
Fixed in SVN/ latest Zip.
Very good! Thanks to you for this great extension=D>

yuanqixun
2 Sep 2009, 6:05 PM
How to use the JIT util tool?
Now I want do load the js class just in time, for example:
// MyPanel.js
MyPanel = Ext.extend(Ext.Panel,{
title:'mypanel'
});
Ext.reg('mypanel',MyPanel);

I use your example as bellow:
new Ext.Panel({
layout:'fit',
items:{
require : ['MyPanel'],
xtype : 'tabpanel',
items : {title:'Grid', xtype:'mypanel'}
}
});
But it can't work. What wrong fot it?

hendricd
3 Sep 2009, 3:46 AM
But it can't work. What wrong fot it?

@yuanqixun -- Explain. ( Review this Tutuorial POST (http://extjs.com/forum/showthread.php?p=377251#post377251), for more. )

jphillips
15 Sep 2009, 8:07 AM
Doug, we are in the process of upgrade to ExtJS 3 from version 2. We were using the synchronous AJax capability, and it quit working. I see that you have been fixing several errors along these lines. I have the 352 version of the file, but my synchronous AJax calls are no longer working.

var response = Ext.Ajax.request({
async: false,
url: this.myURL,
method: 'GET'
});
this.properties = Ext.decode(response.responseText);

The response object no longer has the response in it. When I use firebug, I can see the response coming back successfully from the server on the console and it has data. But if I put a break point to look at the responseText, it is undefined. Are you aware of this? Is there a fix out there?

Additional info: If we go back to version 3.4, I can find the responseText buried in the response.conn object, but in 3.5.1 and 3.5.2, conn is undefined. Ideally, response.responseText should still be available.

Thanks!
Jeff

hendricd
15 Sep 2009, 8:29 AM
Doug, we are in the process of upgrade to ExtJS 3 from version 2. We were using the synchronous AJax capability, and it quit working. I see that you have been fixing several errors along these lines. I have the 352 version of the file, but my synchronous AJax calls are no longer working.

var response = Ext.Ajax.request({
async: false,
url: this.myURL,
method: 'GET'
});
this.properties = Ext.decode(response.responseText);

The response object no longer has the response in it. When I use firebug, I can see the response coming back successfully from the server on the console and it has data. But if I put a break point to look at the responseText, it is undefined. Are you aware of this? Is there a fix out there? Thanks for your help!

Jeff

@Jeff -- basex hasn't changed in that respect. Ext 3.0 does not return the same thing that Ext 2 used to. ;)

It now returns the transaction block associated with the request (for proper abort treatment).

The request is made synchronously but, you should be handling the response in the success callback any way:


var request = Ext.Ajax.request({
async: false,
url: this.myURL,
method: 'GET',
success : function(response, options){
this.properties = Ext.decode(response.responseText);
},
scope: this
});
alert(Ext.encode(this.properties)); //should be the response

jphillips
15 Sep 2009, 10:24 AM
Thanks Doug. That worked. Most places we do use a success call back, but the synchronous ones we were not. We felt it made it look more like a synchronous call than an asynchronous when you get the response inline. Thanks again. On to what ever the next hurdle in the upgrade is. :)

wki01
16 Sep 2009, 1:01 AM
loadForm : function(config) {
this.getForm().load({
async : false,
url : this.urlServlet + "?action=load",
scope : this,
failure : function(form, action) {
},
success : function(form, action) {
}
});
},

commitForm : function(config) {
if (this.getForm().isValid()) {
this.getForm().submit({
async : false,
url : this.urlServlet + "?action=update",
scope : this,
failure : function(form, action) {
},
success : function(form, action) {
}
});
I would like to ensure that the submit and load is synchronous only for a specific form.
This seems not to work



Ext.lib.Ajax.async = false;
Applying this works, but all forms are synchronous

How can I write the code to be synchronous load and submit only one form and not for all?
Thanks

hendricd
16 Sep 2009, 1:35 AM
@wki01 -- What Ext version is this query about?

wki01
16 Sep 2009, 1:38 AM
@wki01 -- What Ext version is this query about?

I forgot to specify ...
Ext 3.0

thanks

hendricd
16 Sep 2009, 1:55 AM
@wki01 -- This override should pass the async option for all default and Custom form Actions (including Direct):



Ext.override(Ext.form.Action, {
// private
createCallback : function(opts){
var opts = opts || {};
return {
success: this.success,
failure: this.failure,
scope: this,
timeout: (opts.timeout*1000) || (this.form.timeout*1000),
upload: this.form.fileUpload ? this.success : undefined,
async : (!!(opts.async || this.form.async) !== false)
};
}
});
With this in place, you can set the async option on the Action (submit or load) or set it on the BasicForm itself:

myForm.getForm().async = false;
myForm.getForm().load ( ....);

!! BUT: Keep in mind !!
Ext.form.BasicForm::doAction may not provide the synchronous behavior you might expect because of this:


doAction : function(action, options){
if(Ext.isString(action)){
action = new Ext.form.Action.ACTION_TYPES[action](this, options);
}
if(this.fireEvent('beforeaction', this, action) !== false){
this.beforeAction(action);
action.run.defer(100, action);
}
return this;
},As you can see, there is 100ms worth of code executed before the Action is actually performed. You may need to override that as well. :-?

yuanqixun
28 Sep 2009, 11:54 PM
!! BUT: Keep in mind !!
Ext.form.BasicForm::doAction may not provide the synchronous behavior you might expect because of this:


doAction : function(action, options){
if(Ext.isString(action)){
action = new Ext.form.Action.ACTION_TYPES[action](this, options);
}
if(this.fireEvent('beforeaction', this, action) !== false){
this.beforeAction(action);
action.run.defer(100, action);
}
return this;
},As you can see, there is 100ms worth of code executed before the Action is actually performed. You may need to override that as well. :-?

how can we override the method? modify the time longger?
please give me guideline and now I sure need the sync submit.
thanks.

hendricd
29 Sep 2009, 1:58 AM
how can we override the method? modify the time longger?
please give me guideline and now I sure need the sync submit.
thanks.

@yuanqixun -- Is there a problem? Have you tried it yet?

Note:
this.beforeAction(action);displays the waitMsg mask (if defined) which is why the action is deferred slightly:

action.run.defer(100, action);so the mask has time to render.

If you want to ensure that code execution stops (possibly -- sacrificing the waitMsg mask) until the synchronous request is complete:


Ext.override( Ext.form.BasicForm , {
doAction : function(action, options){
if(Ext.isString(action)){
action = new Ext.form.Action.ACTION_TYPES[action](this, options);
}
if(this.fireEvent('beforeaction', this, action) !== false){
this.beforeAction(action);
action.run();
}
return this;
}
});

zombeerose
30 Sep 2009, 10:26 AM
@hendricd
In IE6, if you run the following code via the Ext debug console (and disable the trap errors check), you get the error "object doesn't support this property or method" on line 955 of basex.js. Can this be fixed?


var tid = Ext.Ajax.request({ url: '/yoururl' });
Ext.Ajax.abort(tid);

zombeerose
30 Sep 2009, 11:28 AM
I'm also curious why the exception event is fired twice for an abort.

hendricd
30 Sep 2009, 11:50 AM
@hendricd
In IE6, if you run the following code via the Ext debug console (and disable the trap errors check), you get the error "object doesn't support this property or method" on line 955 of basex.js. Can this be fixed?


var tid = Ext.Ajax.request({ url: '/yoururl' });
Ext.Ajax.abort(tid);

What browser is involved? Are you using the latest basex build?


I'm also curious why the exception event is fired twice for an abort.

This was fixed a few weeks ago. Again, try the latest SVN build.

zombeerose
30 Sep 2009, 11:53 AM
Basex version 3.5.2 - is this the latest?

IE6 for the object error

Eric24
9 Oct 2009, 7:36 AM
Doug,

I'm trying to figure out if this is possible, either with basex or in some other way: I have an application that regularly makes two independent Ajax calls that request and return the same information. If the two requests were made sequentially, the second one would be cached (saving a second server round-trip which is good). But in this case, the two requests are made by two asynchronous processes at roughly the same time, so both end up going to the server. The way the application works, these two separate requests come from entirely different parts of the code and are essentially completely unrelated to each other, so I can't easily (or elegantly) have one request wait for the other to finish at the application level.

I'm using basex queues, so I thought that might be the common thread between the two requests. But even associating both requests with the same queue still results in two separate transactions (more or less in parallel), which is expected. One thought I had was a "queue mode" that would essentially serialize requests within a queue, rather than firing off as many requests as the "max requests" limit allows.

Any ideas would be most appreciated.

Regards,
Eric

hendricd
9 Oct 2009, 7:53 AM
@Eric --

$JIT is ideally suited for resource management like that. But, what is the content?

Eric24
9 Oct 2009, 7:58 AM
Hmmm. I don't think it's a JIT thing. The content is JSON data that's displayed on the screen (there are two different displays of the same information in two different presentation styles, thus the two almost-simultaneous Ajax requests). However, the backend data set is very large (i.e., there are millions of records, retrieved as needed to display a few at a time), so I don't think JIT is applicable here.

hendricd
9 Oct 2009, 8:28 AM
Hmmm. I don't think it's a JIT thing. The content is JSON data that's displayed on the screen (there are two different displays of the same information in two different presentation styles, thus the two almost-simultaneous Ajax requests). However, the backend data set is very large (i.e., there are millions of records, retrieved as needed to display a few at a time), so I don't think JIT is applicable here.

@Eric
Ah, contrare!

$JIT knows that two pending requests have been made of the same resource (notifying both when the first is completed -- if not already available). :-?

Eric24
9 Oct 2009, 8:50 AM
Are you saying I can use JIT to load 'data' (and this dispose of it when it's no longer needed)? I thought JIT was really for code and/or data that was more-or-less permanent in a session?

hendricd
9 Oct 2009, 8:59 AM
Are you saying I can use JIT to load 'data' (and this dispose of it when it's no longer needed)? I thought JIT was really for code and/or data that was more-or-less permanent in a session?

$JIT is not just for loading code. It has many (perhaps too many ;) ) configuration options for managing resources besides executable code and CSS.

Eric24
9 Oct 2009, 9:06 AM
OK. Do you have any examples of using it to manage "transient" data?

hendricd
9 Oct 2009, 9:33 AM
OK. Do you have any examples of using it to manage "transient" data?

That could look something like this:




var cfg = {
method: 'POST',
params : { a:1, b:2 }
};
$JIT(cfg, 'assets/getSomeList.php' [, 'otherAsset' ], function(loaded){
if(loaded){
var C = $JIT.getModule('getSomeList.php').content;
C.JSON || (C.JSON = Ext.decode(C.text)); //decode for the next consumer
console.log(C.text);
}
});
If the 'getSomeList.php' module was already loaded/loading when another $JIT request for the same resource was performed, it would be accessed the same way when it arrived (or was already loaded).

Likewise, since all $JIT operations are asynchronous (synchronous is available too) you could use a more intuitive syntax as well to wait for a list of dependencies to arrive:


$JIT.onAvailable([ 'getSomeList.php' , 'someOtherPackage'], callback);or, in a layout:


new Ext.Panel({
layout : fit,
......,
require: [cfg, 'assets/getSomeList.php', '@gridPack' ], //this one is ALWAYS synchronous
items : [
new someListCOnsumerClass()
]
}).show()

Note: (@gridPack above would be a virtual name for another list of resources )

Eric24
9 Oct 2009, 10:17 AM
Very interesting. I'll play around with it. Tnx!

fermo111
19 Oct 2009, 1:22 AM
I found a problem regarding the use of the 'forEach' method.

forEach as implemented in ext-basex has a different semantics from FF's:
1) callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values
2) requires a 'scope' argument, while the forEach in FF does not

Porting my FF targeted code to IE resulted in errors on this call.

Thanks

Luca

hendricd
19 Oct 2009, 4:07 AM
@Luca -- Good eye!. Confirmed.

The fix: (ext-basex.js -- lines ~1503-1531)



var slice = Array.prototype.slice;
var filter = Array.prototype.filter;
Ext.applyIf(Array,{
// Permits: Array.slice(arguments, 1); // mozilla already supports this
slice: function(obj) {
return slice.apply(obj, slice.call(arguments, 1));
},
//String filter iteration
filter: function(obj, fn){
var t = obj && typeof obj == 'string' ? obj.split('') : [];
return filter.call(t, fn);
},
/*
* Array forEach Iteration based on previous work by: Dean Edwards
* (http://dean.edwards.name/weblog/2006/07/enum/) Gecko already
* supports forEach for Arrays : see
* https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Array/forEach
*/
forEach : function( collection, block, scope) {

if (typeof block != "function") {
throw new TypeError();
}
for (var i = 0, l = collection.length >>> 0; i < l; i++) {
(i in collection) && block.call(scope || null, collection[i], i, collection);
}
}
});


2) requires a 'scope' argument, while the forEach in FF does notI'm not understanding this one however. It is not required. Do you have an example the contrary? :-?

fermo111
19 Oct 2009, 4:30 AM
I'm not understanding this one however. It is not required. Do you have an example the contrary? :-?

Sorry, I wasn't very clear :">.

The for loop that I have in my ext-basex version looks like this:

for (var i = 0, l = collection.length; i < l; i++) {
block.call(scope, collection[i], i, collection);
}I was simply puzzled by the fact that the first argument (scope) had no alternative value in case that was undefined. I see that now it reads like this:

scope || null.

I wonder if the effect of passing a null does what the mozilla javascript manual says:
"If a thisObject parameter is provided to forEach, it will be used as the this for each invocation of the callback. If it is not provided, or is null, the global object associated with callback is used instead."

hendricd
19 Oct 2009, 4:58 AM
... I wonder if the effect of passing a null does what the mozilla javascript manual says:
"If a thisObject parameter is provided to forEach, it will be used as the this for each invocation of the callback. If it is not provided, or is null, the global object associated with callback is used instead."

Yes, a scope of null or undefined would default to the global (window) scope. I just added

scope || null to add clarity. That maintains compat with the ECMA spec for Array.forEach.

However, if using:

window.forEach([1,2,3], fn)the scope defaults to that of the iterable passed to the function. This provides a default scope for Objects, Arrays, Functions, and strings.

fermo111
20 Oct 2009, 12:40 AM
Hi Doug

thanks for the clarification ;)

gzlizp
30 Oct 2009, 1:06 AM
Hi,

I trying to use the ajax request with file upload,but it seems that the request still keep asynchronous.can anyone know how to fix it?
Any help will be deeply appreciated.

below is my code.


Ext.Ajax.request({
method: 'post',
async: false,
url: 'cr/createCr.do?msg=submitBasicInfo',
timeout: 60000,
form: _frmBasicInfo.getEl().dom,
isUpload: true,
headers: {
'Content-type': 'multipart/form-data'
},
callback: function(options, success, response){
}
});



Thanks.

hendricd
30 Oct 2009, 5:11 AM
Hi,

I trying to use the ajax request with file upload,but it seems that the request still keep asynchronous.can anyone know how to fix it?
Any help will be deeply appreciated.


@gzlizp -- File uploads (Form submits) are always async and cannot be changed as the browser is doing all the work, not the Ajax stack.

Spirit
2 Nov 2009, 5:18 AM
Hi!

I have some problems to understand a behavior of JIT:

The follwoing code should be a sync script request:


var cb =function(loaded, modules){
if(loaded){
var test = new Ext.Test.User();
}
};

$JIT( {
module:['system/modules/test/test'],
callback: cb,
scope: this, //callback scope
modulePath : '', //(optional) root for request chain
disableCaching : true, //prevent browser caching of modules
cacheResponses : false, //true to cache the text content of the module
async : false, // synchronous request
method:'DOM' //others: 'GET', 'POST', 'DOM' writes to script tags for debugging
//proxied : false, //if true or config, uses the JSONP transport
//xdomain : false, //(optional) for modern browsers supporting cross-domain requests
//queue:{name:'fast', priority: 2} //(optional) Queuing support
});


It does the request and the "loaded" function gets called. The class which is loaded cant be called. I get a Ext.Test is undefined.

But if i add the following code:


$JIT.onAvailable (['system/modules/test/test'], function(loaded){
if(loaded){
var test = new Ext.Test.User();
}
});

Now it works and the second one can be executed. But now it isnt a syncronous call anymore. That would be like an async call if i understand it right.

Is my loaded file to big and cannot be handled fast enough ?
Do i have to wait a few seconds after loaded is called ?

Thanks for advice :)

hendricd
2 Nov 2009, 5:33 AM
@Spirit --

method: 'DOM' implies a <script> tag to load your script (which is always asynchronous). The callback would fire when the script is loaded by the browser, not necessarily when the code is executed.

For fine grain control over a synch request, use the 'GET' method instead. It's callback is not raised until script execution is complete, or:

use the new (svn/trunk/source/jit.js) $JIT.onClassAvailable method in conjunction with method: 'DOM' :



$JIT( {method: 'DOM'}, 'system/modules/test/test');
$JIT.onClassAvailable( 'Ext.Test.User', function(loaded){
if(loaded){
var test = new Ext.Test.User();
}
});

Spirit
2 Nov 2009, 6:01 AM
Didnt thought about script tags.
Works like a charm now ;)

Thx

Spirit
3 Nov 2009, 1:35 AM
I´m still playin around with JIT and i cant get the CSS applied.



$JIT( {
method: 'GET',
async:false
}, 'system/modules/test/test', 'system/modules/test/test.css');

$JIT.onClassAvailable( 'Ext.Test.User', function(loaded){

$JIT.onAvailable('test.css', function(success){
success && $JIT.applyStyle('test.css');
});

if(loaded){

// Sample desktop configuration
Desk = new Ext.app.App({
init :function(){
Ext.QuickTips.init();
},

getModules : function(){
return [
new Ext.Test.User(),
];
},

...



The test.css will be available and success will be true, but the appeareance of the Test module wont change.
If i add the same css in the head tag of my index.html file all looks ok.

Seems to me i m not thinking the right way again.
Any hints ?

hendricd
3 Nov 2009, 4:21 AM
@Spirit -- Some tweakage:



$JIT.setModulePath('system/modules/test/');
$JIT( {method: 'GET',async:false}, 'test');
// or, $JIT.get( {async:false}, 'test');
$JIT.css('test.css'); //has the necessary module caching features for swapping CSS later

....

wupeng
6 Nov 2009, 3:54 AM
hello everyone,
today,I want to use ext-basex.js.but when I load the page,all data in grid could not show.
It's seam that ext.data.httpproxy could not work.
---------------------------------------------------------
var jsonString;
Ext.Ajax.request({
url: './server/stock_order.php?action=config',
async: false,
success: function(response, opts) {
jsonString = response.responseText;
}
});
var json = new Ext.util.JSON.decode(jsonString);
var record = Ext.data.Record.create(json.fieldsNames);
var reader = new Ext.data.JsonReader({totalProperty:"total",root:"dataroot"},record);
var proxy = new Ext.data.HttpProxy({url:"./server/stock_order.php"});
var ds = new Ext.data.Store({
reader: reader,
proxy: proxy
});

ds.load({params:{start:0, limit:5,action:'getdata'}});
...
-------------------------------------------------------

I am chinese,wish you help me.Thank you,everyone.


email:wupeng0113@gmail.com

hendricd
6 Nov 2009, 4:26 AM
@wupeng--

Welcome to Ext and the basex extension thread.

While I am confident basex can do a synchronous request, I'm not sure you understand when it's appropriate to use it.


var jsonString;
Ext.Ajax.request({
url: './server/stock_order.php?action=config',
async: false,
success: function(response, opts) {
jsonString = response.responseText;
}
}); This is the real problem:


var json = new Ext.util.JSON.decode(jsonString);
var record = Ext.data.Record.create(json.fieldsNames);
var reader = new Ext.data.JsonReader({totalProperty:"total",root:"dataroot"},record);
var proxy = new Ext.data.HttpProxy({url:"./server/stock_order.php"});
var ds = new Ext.data.Store({
reader: reader,
proxy: proxy
});

ds.load({params:{start:0, limit:5,action:'getdata'}});
...
Decoded JSON text already IS an object.

Study some of the /examples/grid closely before continuing further.

wupeng
6 Nov 2009, 4:57 AM
hendricd (http://www.extjs.com/forum/member.php?u=8730),thanks for you replay.

I want to know that whether Ext.data.HttpProxy and ext-basex.js is not work in the same time?

hendricd
6 Nov 2009, 6:24 AM
hendricd (http://www.extjs.com/forum/member.php?u=8730),thanks for you replay.

I want to know that whether Ext.data.HttpProxy and ext-basex.js is not work in the same time?

You would use one OR the other approach but not both:


var jsonString;
Ext.Ajax.request({
url: './server/stock_order.php?action=config',
async: false,
success: function(response, opts) {
jsonString = response.responseText;
}
});

var proxy = new Ext.data.HttpProxy({url:"./server/stock_order.php", async:false}); But, why do you feel the need to make a synchronous request for the store?
The browser UI will grind to a halt while you load that store!

walker_cn
22 Nov 2009, 7:33 PM
I have a simple problem. is bug??

I addd ext-basex.js(4.0 or 4.1) in Ext3 docs/index.html

<script type="text/javascript" src="../ext-basex.js"></script>

When i open "file:///D:/Develop/web/ext3/docs/index.html" in Firefox 3.5.5, it's OK!

But when i open "file:///D:/Develop/web/ext3/docs/index.html" in safari 4.0.3 for windows, it's not OK.

And, ext-basex.js version 3.5.2 is OK, but 4.0 and 4.1 is not OK. so , is a BUG??:-/

ext-basex 3.5.2:
XHR finished loading: "file:///D:/Develop/web/ext3/docs/welcome.html (file:///D:/Develop/npswpartner/web/ext3/docs/welcome.html)".

but ext-basex 4.0 :
TypeError: Result of expression 'Audio' [undefined] is not a constructor.
TypeError: Result of expression 'resolve.forEach' [undefined] is not a function.

Sorry for my english,:D

hendricd
22 Nov 2009, 8:44 PM
I have a simple problem. is bug??

I addd ext-basex.js(4.0 or 4.1) in Ext3 docs/index.html

<script type="text/javascript" src="../ext-basex.js"></script>

When i open "file:///D:/Develop/web/ext3/docs/index.html" in Firefox 3.5.5, it's OK!

But when i open "file:///D:/Develop/web/ext3/docs/index.html" in safari 4.0.3 for windows, it's not OK.

And, ext-basex.js version 3.5.2 is OK, but 4.0 and 4.1 is not OK. so , is a BUG??:-/

ext-basex 3.5.2:
XHR finished loading: "file:///D:/Develop/web/ext3/docs/welcome.html (file:///D:/Develop/npswpartner/web/ext3/docs/welcome.html)".

but ext-basex 4.0 :
TypeError: Result of expression 'Audio' [undefined] is not a constructor.
TypeError: Result of expression 'resolve.forEach' [undefined] is not a function.

Sorry for my english,:D
@walker_cn --
Can you switch to ext-basex-debug.js and report the line # ? I know a lot more once we now that.

walker_cn
22 Nov 2009, 9:56 PM
I test again, Ext 3.0.3, ext-basex-debug.js(4.1), safari 4.0.3(531.9.1):

When i open "file:///D:/ext-3.0.3/docs/index.html", the error console print:

TypeError: Result of expression 'Audio' [undefined] is not a constructor. file:///D:/ext-3.0.3/ext-basex-debug.js:1852
TypeError: Result of expression 'resolve.forEach' [undefined] is not a function. file:///D:/ext-3.0.3/ext-basex-debug.js:1490

I debug, and trace into request() in ext-basex-debug.js:767,
I found when run to ext-basex-debug.js:829, call forEach():
O.headers && forEach(O.headers,
function(value, key) { this.initHeader(key, value, false); },this);

will occur exception: TypeError: Result of expression 'resolve.forEach' [undefined] is not a function.

hendricd
23 Nov 2009, 6:46 AM
@walker_cn -- what OS is this running on?

(Running Ext docs with basex on Win/4.0.4 (531.21.10) here without trouble).

Can you tell what the value (and typeof) of O.headers or O is?

walker_cn
23 Nov 2009, 5:49 PM
OS is Windows XP SP3, i upgrade my safari to 4.0.4(531.21.10) for windows,
but it's not OK too.

I trace again, set break point in ext-basex-debug.js:829, when run to there, i found:
typeof O==object
typeof O.headers==object
typeof forEach=function

set break point in ext-basex-debug.js:1490
when run to there, i found:
typeof resolve==function
typeof resolve.forEach==undifined

so, the question is why resolve.forEach is undifined??
i modify ext-basex-debug.js:1852,
from: aAudio = ('Audio' in window) ? new Audio('') : {},
to : aAudio = {}, //('Audio' in window) ? new Audio('') : {},

and test again, all is OK, the welcome.html success loaded.

so need modify ext-basex-debug.js:1852, the bug in there.

i found : 'Audio' in window is TRUE
but typeof Audio is undifined
typeof window.Audio is undifined

so i modify ext-basex-debug.js:1852 to :
aAudio = ('Audio' in window && typeof Audio !== 'undefined') ? new Audio('') : {},

hendricd
23 Nov 2009, 6:13 PM
@walker -- Nice report!

Now, I just need to figure out why Safari defines Audio/Video objects but does not bind an interface for them when expected (perhaps when the DOM is ready?).

I'll revise shortly.

Thanks again. ;)

TomChiverton
9 Dec 2009, 2:34 AM
Given the following to invoke a JSON-returning page (Ext 3):

var response = Ext.Ajax.request({
url:'/extDirect/isTimeBetween.cfm',
method:'GET',
async: false,
params: {clientCode: cli.getValue(),matterCode: mat.getValue(),
startDate:start.getValue(),endDate:end.getValue()
} ,
disableCaching : true //Just to be explicit
});I get an error with basex v2.3 (about this.headers being undefined), and neither v3.52 or 4 seem to but the response text into the result.

Edit: The fix is here: http://www.extjs.com/forum/showthread.php?p=386937#post386937 maybe the start of this thread needs updating along with http://www.extjs.com/forum/showthread.php?p=192313#post192313 ?

BlueCamel
9 Dec 2009, 7:59 PM
DOH! this should have been posted to the 3.0.x extensions thread. Will repost where it belongs. :(

I'm testing the latest ext-basex from SVN trunk against extjs 3.1pre.

I noticed that if I specified Ext.lib.Ajax.maxConcurrentRequests = 2 that I would actually see three outstanding requests run at once in firebug. Looking at the dispatch function it seems like the comparison should be >= instead of just > ?



dispatch : function(){
var qm = this, qmq = qm.queues;
var quit=(A.activeRequests > A.maxConcurrentRequests);
while(A.pendingRequests && !quit){

var disp = function(qName) {
var q = qmq[qName], AR;

while (q && !q.suspended && q.pending && q.requestNext()) {

quit || (quit = A.activeRequests > A.maxConcurrentRequests);
if(quit)break;

// progressive, take the first one off each queue only
if (q.progressive || qm.progressive) { break;}

}
// keep going?
if(quit)return false;
};

forEach(this.priorityQueues, function(pqueue) {
// pqueue == array of queue names
!!pqueue.length && forEach(pqueue , disp, this);
quit || (quit = A.activeRequests > A.maxConcurrentRequests);
if(quit)return false;
}, this);

}

if(A.pendingRequests || quit){
this.dispatch.defer(this.quantas, this);
} else{
this.stop();
}
}

sksoft
13 Jan 2010, 2:25 AM
Problem:
toolbars in grids are disappeared

Steps to reproduce the problem:
include basex adapter in standart Ext 3.0 example (...ext-3/examples/grid/edit-grid.html)

Workaround:
comment out definition of Ext.isObject in basex.

P.S.
Why you redefine the following methods of Ext 3.0?
Array.indexOf,
Ext.isArray isObject isNumber isBoolean isFunction isString isPrimitive isDefined
If you do it for compatibility with Ext 2.0 you can check Ext.version before.

hendricd
13 Jan 2010, 4:59 AM
@sksoft --

Line 1661 of ext-basex.js should read:


Ext.applyIf(Ext, {

It was modified for a test just a couple weeks ago, and I forgot to put it back in. (:|

All Array, String, etc prototypes are extended in this fashion.

I'll update basex-SVN for this shortly.

Sorry for the snafu.

sksoft
20 Jan 2010, 9:50 AM
shortly?

larryaubstore
28 Jan 2010, 6:43 AM
Problem:
$JIT does not take reference that contains a .

Steps to reproduce the problem:
$JIT.depends , {
,'jquery.blockUI' : {path: root + ui }
,'jquery.progressbar' : {path: root + ui }
,'jquery.autocomplete' : {path: root + ui }
,'jquery.scrollTo-min' : {path: root + ui }


Workaround:
Rename the .js files.
$JIT.depends , {
,'jqueryblockUI' : {path: root + ui }
,'jqueryprogressbar' : {path: root + ui }
,'jqueryautocomplete' : {path: root + ui }
,'jqueryscrollTo-min' : {path: root + ui }

jdurante
28 Jan 2010, 2:19 PM
Forgive me if this has been answered, as I have not read through this whole thread.

I am trying to find a way to trap prevent client side timeouts. In searching the forum, I found http://www.extjs.com/forum/showthread.php?t=69742

hendricd posted code that makes a timeout reset.



Ext.lib.Ajax.on('timeout', //global
function(request, callback) {

if(request.tId == this.transactionId){
alert(++this.timeouts + ' timeout(s) occurred.');
return this.timeouts > 3; //false=='reset the timer' until it exceeds 3
}

}, this);

I have used this (changing it a little) in my project and it works to make the timeouts reset. However, once the Ajax call has completed, the callback function that I have defined does not get called.

How can I make sure it gets called when complete?

Thanks!!

hendricd
28 Jan 2010, 3:33 PM
@larryaubstore--

Some recommendations:
If you must use periods in filenames, just add the extension implicitly:


$JIT.depends , {
,'jquery.blockUI.js' : {path: root + ui }
,'jquery.progressbar.js' : {path: root + ui }
,'jquery.autocomplete.js' : {path: root + ui }
,'jquery.scrollTo-min.js' : {path: root + ui }
or, No need to rename anything:

var jqueryPath = root + ui + 'jquery.';
$JIT.depends , {
,'blockUI' : {path: jqueryPath }
,'progressbar' : {path: jqueryPath }
,'autocomplete' : {path: jqueryPath }
,'scrollTo-min' : {path: jqueryPath }

hendricd
28 Jan 2010, 3:51 PM
Forgive me if this has been answered, as I have not read through this whole thread.

I am trying to find a way to trap prevent client side timeouts. In searching the forum, I found http://www.extjs.com/forum/showthread.php?t=69742

hendricd posted code that makes a timeout reset.



Ext.lib.Ajax.on('timeout', //global
function(request, callback) {

if(request.tId == this.transactionId){
alert(++this.timeouts + ' timeout(s) occurred.');
return this.timeouts > 3; //false=='reset the timer' until it exceeds 3
}

}, this);I have used this (changing it a little) in my project and it works to make the timeouts reset. However, once the Ajax call has completed, the callback function that I have defined does not get called.

How can I make sure it gets called when complete?

Thanks!!
@jdurante -- could you clarify a bit, You mean a retry does finally succeed, but the callback YOU defined is not called, or no success/failure callback is called?

larryaubstore
3 Feb 2010, 11:23 AM
$JIT is not just for loading code. It has many (perhaps too many ;) ) configuration options for managing resources besides executable code and CSS.


I'm trying to load .css files:

Ext.apply( $JIT.depends , {
// JS source file | source location | Dependencies (in required load order)
'uxvismode' : {path: ux }
,'uxmedia' : {path: ux , depends: [ '@uxvismode']}
,'uxflash' : {path: ux , depends: [ '@uxmedia'] }
,'uxchart' : {path: ux , depends: [ '@uxflash'] }
,'uxfusion' : {path: ux , depends: [ '@uxchart'] }
,'uxofc' : {path: ux , depends: [ '@uxchart'] }
,'uxamchart' : {path: ux , depends: [ '@uxchart'] }
,'uxflex' : {path: ux , depends: [ '@uxflash'] }
,'mif' : {path: ux , depends: [ '@uxvismode' ] }
,'mifmsg' : {path: ux , depends: [ '@mif'] }
,'mifdd' : {path: ux , depends: [ '@mif', '@TEST.CSS'] }
,'TEST.css' : {path: CSS }
});

I look into the firebug NET console and the CSS seems to load. However, the javascript execution is stopped.

Can I do something like this ?

I know you can apply style with this:

$JIT.css('themes/brightblue.css', 'lightgreen.css' );
$JIT.onAvailable('brightblue.css', function(loaded){
loaded && $JIT.applyStyle('brightblue.css');
});
//Stylesheet removal:
$JIT.removeStyle('brightblue.css');

However, it losses a little bit the just-in-time loading. I just want to have the dependencies in one place in the code.

Eric24
12 Mar 2010, 10:12 AM
This may be an obvious question, but I'm not finding an obvious answer...

Is there a good place to hook into basex (an event even) that will allow me to see every Ajax transaction performed by the app, before it starts and after it completes. I know I can do this by adding listeners on every Ajax instance I create, but I was hoping to find a way to do this at a global level. My objective is to add "telemetry" to an application, monitoring the performance and payload size of every transaction.

Any thoughts on the "hook" method or ideas on Ajax telemetry in general would be greatly appreciated.

--Eric

mystix
12 Mar 2010, 11:14 AM
This may be an obvious question, but I'm not finding an obvious answer...

Is there a good place to hook into basex (an event even) that will allow me to see every Ajax transaction performed by the app, before it starts and after it completes. I know I can do this by adding listeners on every Ajax instance I create, but I was hoping to find a way to do this at a global level. My objective is to add "telemetry" to an application, monitoring the performance and payload size of every transaction.

Any thoughts on the "hook" method or ideas on Ajax telemetry in general would be greatly appreciated.

--Eric
try the Observable#observeClass() static method:
http://www.extjs.com/deploy/dev/docs/?class=Ext.util.Observable&member=Observable.observeClass

hendricd
13 Mar 2010, 11:31 AM
This may be an obvious question, but I'm not finding an obvious answer...

Is there a good place to hook into basex (an event even) that will allow me to see every Ajax transaction performed by the app, before it starts and after it completes. I know I can do this by adding listeners on every Ajax instance I create, but I was hoping to find a way to do this at a global level. My objective is to add "telemetry" to an application, monitoring the performance and payload size of every transaction.

Any thoughts on the "hook" method or ideas on Ajax telemetry in general would be greatly appreciated.

--Eric

@Eric -- Mystix provides likely the simplest solution, but if you wanted to catch ALL low-level requests/status-transitions with basex loaded, you could do so with any combination of these:



var A = Ext.lib.Ajax;
A.on({
request : function( method, uri, cb, data, options){
//return false; //cancelable
},
response : function(requestObject, responseObject, callback, isAbort, isTimeout){
//return false; //cancelable
},

abort : function(requestObject, callback){
//return false; //cancelable
},
timeout : function(requestObject, callback){
//return false; //cancelable, retry?
},
exception : function(requestObject, responseObject, callback, isAbort, isTimeout, error){

},
readystatechange : function(o, callback, mode){


}
});

This would trap all relevant events (regardless of what higher-level class generated them).

Eric24
13 Mar 2010, 9:02 PM
Seems like they are essentially identical, since I assume I'd pass Ext.lib.Ajax to observeClass. Mystix's solution is "Ext generic" and yours is "BaseX specific", but both will do exactly what I need. Thanks for the help!
--Eric

mg2468
31 Mar 2010, 2:13 PM
I have started using ext-basex as i need synchronous ajax calls to servers as there is lot of data loading in the application.

If i set Ext.lib.Ajax.async = false; at the global level, i am having issues with combo box using JSON data on IE. The drop down does not show the options.

Do we have a way of setting the async = false in loading trees using treeloader or any other loader.

I am not able to make an ajax call from treeloader. I tried to find solutions in many different ways but unsuccessful.

Please help.

hendricd
1 Apr 2010, 1:56 PM
I have started using ext-basex as i need synchronous ajax calls to servers as there is lot of data loading in the application.

If i set Ext.lib.Ajax.async = false; at the global level, i am having issues with combo box using JSON data on IE. The drop down does not show the options.

Do we have a way of setting the async = false in loading trees using treeloader or any other loader.

I am not able to make an ajax call from treeloader. I tried to find solutions in many different ways but unsuccessful.

Please help.

@mg2468--
I would reconsider your approach. Converting your entire App into a synchronous experience will make it an unfortunate experience.

Why lock up the browser for every Ajax request?

mg2468
1 Apr 2010, 1:59 PM
@ hendricd

Thank you for responding.

I am using columntree in my application. So i have treeloader. I am not sure how can i make the call of treeloader as synchronous.

Actually i wanted to go with synchronous ajax because the application deals with lot of server side operations and ext js should not timeout when it is working at the backend and my columntree is not loading if i do not use synchronous ajax. As i am not sure of how to my treeloader call synchronous i have opted for global synchronous setting.

Can you please help.

hendricd
1 Apr 2010, 2:08 PM
@ hendricd

Thank you for responding.

I am using columntree in my application. So i have treeloader. I am not sure how can i make the call of treeloader as synchronous.

Actually i wanted to go with synchronous ajax because the application deals with lot of server side operations and ext js should not timeout when it is working at the backend and my columntree is not loading if i do not use synchronous ajax. As i am not sure of how to my treeloader call synchronous i have opted for global synchronous setting.

Can you please help.

@mg --
Switching to synch just because your server is taking too long means one of two things:

1) Your server is underpowered (for what you are asking of it).
2) You are trying to load TOO MANY nodes at once.

Consider switching to the AsynchTreeNode and only load nodes at various levels when they are required rather than all at once... There are several examples of this implementation here on the forums AND in your /examples folder.

mg2468
1 Apr 2010, 3:13 PM
Even if either of the two is the case i still should be able to perform my task, correct.

Right now i am using asynctreenode but complete json is loaded at the same time.
Lots of DB operations going on behind to load the data. I use Spring + Hibernate.
I know i am still have performance issues with the DB which i am working on right now but i am also looking for any other options from front end also.

How can i make the tree load children when '+' sign is clicked.
Where can i find some samples.

scaddenp
8 Apr 2010, 7:39 PM
Using ext 3.1.1, with ext-basex as well in an application hosted entire on a USB stick.
Loading an image into OpenLayers, I want to read an associated image descriptor file living in same directory as my top html file.

Code looks like:

function readFile(filename) {
Ext.Ajax.request({
url: filename,
success: parseFile,
failure: parseError,
async:false
});
}

function parseFile(response) {
var lines = response.responseText.split("\r\n");
var xleft = parseFloat(lines[4]) + parseFloat(lines[0]);
var xright = parseFloat(lines[4]) + img.width * parseFloat(lines[0]);
var ytop = parseFloat(lines[5]) + parseFloat(lines[3]);
var ybot = parseFloat(lines[5]) + img.height * parseFloat(lines[3]);
bounds = new OpenLayers.Bounds(xleft,ybot,xright,ytop);
}

function parseError(response) {
alert('fail:' + response.responseText);
}

function addImageLayer(filename,title){
img.src = filename;
var pos = filename.lastIndexOf('.');
if (pos != -1) {
readFile(filename.substring(0,pos+2) + filename.charAt(filename.length-1) + 'w');
}
....
so the filename passed into readFile is just "myimage.pgw" and lives in same directory as the code above.
FF works fine, reads the file as a response which parseFile handles. However Chrome just
fails with 404. Chrome is usually easier to deal with for local files than FF. Anyone got any ideas???

Eric24
12 Apr 2010, 9:03 AM
How to abort an Ajax transaction from a Store, when using basex? I have added the following code to create a "private" Connection for the Store, in order to set autoAbort:true:


proxy : new Ext.data.HttpProxy(new Ext.data.Connection({
url : 'messages/messages-search.php',
queue : 'userNorm',
autoAbort : true
})),
This works, in that it functions, but when I start a new query (and thus abort the existing one), I get the following error from basex 4.0:


o.status is undefined
isError : !!isTimeout || !!o.status.isError
line 1049
Is there a different way to autoAbort a Store Ajax call when using basex? Or is this a bug?

PS - I am also using basex request queues (my primary purpose for using basex).

hendricd
12 Apr 2010, 2:13 PM
How to abort an Ajax transaction from a Store, when using basex? I have added the following code to create a "private" Connection for the Store, in order to set autoAbort:true:


proxy : new Ext.data.HttpProxy(new Ext.data.Connection({
url : 'messages/messages-search.php',
queue : 'userNorm',
autoAbort : true
})),
This works, in that it functions, but when I start a new query (and thus abort the existing one), I get the following error from basex 4.0:


o.status is undefined
isError : !!isTimeout || !!o.status.isError
line 1049
Is there a different way to autoAbort a Store Ajax call when using basex? Or is this a bug?

PS - I am also using basex request queues (my primary purpose for using basex).

@Eric--
thanks for the report, I'll post an update to SVN shortly...

Eric24
15 Apr 2010, 6:05 AM
@Doug--Any update on the update?

Also, I found this when navigating away from an Ext application using basex (only in IE):


User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.21022; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Timestamp: Thu, 15 Apr 2010 14:02:05 UTC

Message: 'Ext.Element.uncache' is null or not an object
Line: 321
Char: 12
Code: 0
URI: http://.../ux/ext-basex.js

Eric24
25 Apr 2010, 9:39 AM
@Eric--
thanks for the report, I'll post an update to SVN shortly...

@Doug: Any ETA on an update (two reported issues)?

hendricd
25 Apr 2010, 9:56 AM
@Eric --
Your first issue was resolved in SVN (http://code.google.com/p/ext-basex/source/browse/#svn/trunk/source)last week, but your latest report indicates that you are not using a current release of basex.

Eric24
26 Apr 2010, 9:16 AM
@Eric --
Your first issue was resolved in SVN (http://code.google.com/p/ext-basex/source/browse/#svn/trunk/source)last week, but your latest report indicates that you are not using a current release of basex.

@Doug: Both issues have been resolved with the SVN version. Thanks a bunch!

walker_cn
26 Jul 2010, 2:21 AM
I have a simple problem. is bug??

I addd ext-basex.js(4.1 or 4.2) in Ext3.1.0 docs/index.html
(ext-basex.js 4.2 is download today, from http://ext-basex.googlecode.com/svn/trunk/source/build/ext-basex-debug.js)

<script type="text/javascript" src="../ext-basex-debug.js"></script>

When i open "file:///D:/ext-3.1.0/docs/index.html" in Firefox for windows 3.6.8, it's OK!
When i open "file:///D:/ext-3.1.0/docs/index.html" in Safari for windows 5.0(7533.16), it's OK!

But,
when i open "file:///D:/ext-3.1.0/docs/index.html" in Google Chrome for windows 5.0.375.99, it's not OK.when i open "file:///D:/ext-3.1.0/docs/index.html" in IE 8.0.7600.16385, it's not OK.
Why? is a BUG??http://www.sencha.com/images/smilies/6.gif

I found, in Chrome and IE, ext-basex can't load local file (welcome.html), the status is 404.

how to fix it?
Sorry for my english.http://www.sencha.com/images/smilies/4.gif

aratcliffe
19 Aug 2010, 12:10 AM
Hi,

I've tried adding $JIT into my Ext 3.2.1 project using both the 4.0 and 4.2 beta releases and have yet to be able to successfully load a module using it.

Using 4.0 I struck this issue here: http://code.google.com/p/ext-basex/issues/detail?id=5

Using 4.2 the modulePath setting seems to be ignored when using the DOM method and when using XHR GET $JIT fails silently.

At this point I'm wondering if either of these releases are compatible with 3.2.1 as most posts to this thread seem to concern Ext 3.1 or earlier.

Cheers
Adam

aratcliffe
19 Aug 2010, 5:41 PM
Just as a follow up to my post above the 'path' option also appears to be being ignored when I set up module dependencies e.g.


Ext.apply($JIT.depends, {
'AppPreferences': {path: '/modules/GeoSmart/view/'}
});

$JIT(
{
disableCaching: false,
callback: callback,
scope: this
},
'AppPreferences'
);

Results in this URL being produced:
http://localhost/projects/ol-wfs/AppPreferences.js

I have also tested with svn $JIT and am getting the same result.

Cheers
Adam

aratcliffe
19 Aug 2010, 9:05 PM
I've tracked down the source of the problem. My application includes the GeoExt library which is modifying the Ext.Ajax class, after ext-basex has modified it, to proxy Ajax.request() calls through the OpenLayers.Request class.

Cheers
Adam

hendricd
20 Aug 2010, 11:44 AM
I have a simple problem. is bug??

I addd ext-basex.js(4.1 or 4.2) in Ext3.1.0 docs/index.html
(ext-basex.js 4.2 is download today, from http://ext-basex.googlecode.com/svn/trunk/source/build/ext-basex-debug.js)

<script type="text/javascript" src="../ext-basex-debug.js"></script>

When i open "file:///D:/ext-3.1.0/docs/index.html" in Firefox for windows 3.6.8, it's OK!
When i open "file:///D:/ext-3.1.0/docs/index.html" in Safari for windows 5.0(7533.16), it's OK!

But,
when i open "file:///D:/ext-3.1.0/docs/index.html" in Google Chrome for windows 5.0.375.99, it's not OK.when i open "file:///D:/ext-3.1.0/docs/index.html" in IE 8.0.7600.16385, it's not OK.
Why? is a BUG??http://www.sencha.com/images/smilies/6.gif

I found, in Chrome and IE, ext-basex can't load local file (welcome.html), the status is 404.

how to fix it?
Sorry for my english.http://www.sencha.com/images/smilies/4.gif

@walker -

For IE, you'll need to add this somewhere in your scripts:

Ext.lib.Ajax.forceActiveX = true;

For Google Chrome 5+, local file system access is NO LONGER permitted by the browser.

Riemi
21 Aug 2010, 8:56 AM
Is there a way to set the XhrHeader from Ext.basex to original XMLHttpRequest.
I tried
Ext.lib.Ajax.setDefaultXhrHeader (true);
befor i make a request but it seams not working

hendricd
21 Aug 2010, 9:02 AM
Is there a way to set the XhrHeader from Ext.basex to original XMLHttpRequest.
I tried
Ext.lib.Ajax.setDefaultXhrHeader (true);
befor i make a request but it seams not working

Sure, just set it directly:

Ext.lib.Ajax.defaultXhrHeader = 'anything-you-want';

Riemi
31 Aug 2010, 9:46 AM
first, thank you for your last answer it works fine.

Jet i play with your JITX Extention and i have troble with following code:


myapp.CodeLoader = new Ext.ux.ModuleManager({
modulePath: '/res/'
});
myapp.CodeLoader.on({
'beforeload': function(manager, module, response){
//return false to prevent the script from being executed. return
module.extension == 'js';
},
scope: myapp.CodeLoader
});
//Create a useful 'syntax' for your App.
myapp.needs = myapp.CodeLoader.load.createDelegate(myapp.CodeLoader);
myapp.provide = myapp.CodeLoader.provides.createDelegate(myapp.CodeLoader);

myapp

.needs('ux/StatusBar','ux/miframe');


// create application
myapp.app =function(){ ....

this code comes first bevor i start my Application and is from your jitx file.

The Problem ist when i call this page the fist time the call for Statusbar.js needs 97ms and i geht an error in firebug
b[d.xtype || e] is not a constructor

when i reload this page the call need 7ms and all works fine. I think my Application runs bevor the call for Statusbar is finished so the xtype is not present, is there a way that first all scripts in myapp.needs are called an then start the application?

I googled around and dont find much informations, so it would be nice to have one page where more informations and examples of this extension are

faith wins
9 Sep 2010, 1:09 PM
I am new to JIT, in fact 'am relatively new to ext-js as well. I have a number of javascript objects/files that I need to dynamically load. I couldn't find a step by step, simple, clear and from ground up kind of tutorial on JIT. Can anybody point me to one?
Thanks

aratcliffe
9 Sep 2010, 1:14 PM
Although not free this issue of jsmag: http://www.jsmag.com/main.issues.description/id=31/ has a good tutorial on using $JIT.

faith wins
10 Sep 2010, 4:45 AM
Thanks aratcliffe! But, 'am kind of looking for a free one. I will save this as a last option.

faith wins
10 Sep 2010, 5:26 AM
I am looking for a way to make multiple ajax requests at the same time. How would ext help me with that? I hope ext has an easy way out for this as it does for other things. Thanks in advance for any help!

Riemi
10 Sep 2010, 6:39 AM
I use Jitx in this way:

In the head:
<script type="text/javascript" src="res/ux/jitx-debug.js">


in your script you cann use JIT:[] to load the component that you need
{

JIT: ['path/mypanel'],
xtype: mypanel,
...
}

hendricd
10 Sep 2010, 2:44 PM
@Riemi--

You'll need to wait for it! Consider the callback mechanism built in:



// create application
myapp.render=function(success){

if(success){
myapp.app = function(){ ... }();

....
}
};


myapp.needs('ux/StatusBar','ux/miframe', myapp.render);
or, simpler (for Ext 3.1.1+):



new Ext.Viewport({
require : ['ux/StatusBar','ux/miframe'],
layout : 'border',
items : [
{xtype : 'iframepanel',
defaultSrc : someUrl,
region : 'center',
bbar : Ext.create({xtype : 'uxstatusbar', .... })
},
.....
]
}).show();

Riemi
11 Sep 2010, 1:04 AM
thank you, is require the same as JIT: ['ux/StatusBar'] or where are the difference?

zombeerose
4 Oct 2010, 10:45 AM
@hendricd
I have been studying your JIT library and trying to integrate it with our current project. We use a MVC pattern whereby js components are lazy constructed using xtypes within the View. Since you intercept the ComponentMgr, it was easy to integrate JIT into the views by adding a "require" property.

The problem I am encountering is that JIT loads via an ajax call and therefore the script is not available to Firebug. That would be ideal for our production release but is severely impeding during development. We must utilize JIT during development because our current code base is currently larger than sencha and still growing. (Yes - we are late to implement JIT).

Is it possible to use the "script" option in JIT with the "require" property? I experimented but it appears to be async and the process tried to create the component before the file was loaded.

Any feedback is appreciated. Thanks!

blueram
11 Nov 2010, 6:22 PM
I also encounter this problem, thanks

hendricd
12 Nov 2010, 8:33 AM
I also encounter this problem, thanks


@hendricd
I have been studying your JIT library and trying to integrate it with our current project. We use a MVC pattern whereby js components are lazy constructed using xtypes within the View. Since you intercept the ComponentMgr, it was easy to integrate JIT into the views by adding a "require" property.

The problem I am encountering is that JIT loads via an ajax call and therefore the script is not available to Firebug. That would be ideal for our production release but is severely impeding during development. We must utilize JIT during development because our current code base is currently larger than sencha and still growing. (Yes - we are late to implement JIT).

Is it possible to use the "script" option in JIT with the "require" property? I experimented but it appears to be async and the process tried to create the component before the file was loaded.

Any feedback is appreciated. Thanks!

@bluram, zomberose --

the inline require config option on Components can only function as a synchronous Ajax request. If you need to debug such scripts, load the script before that layout initializes -- either using your own conventional <script> tag or:

$JIT({method:'DOM'}, 'yourScript.js');

and, remove it when you're done.

aratcliffe
15 Nov 2010, 2:15 PM
Hi,

Does the $JIT API provide a way of doing this already or should I be testing for the existence of the object/function that was loaded before making the $JIT call?

The way I'm using $JIT looks like this:


$JIT({
callback: function(loaded) {
if(loaded) {
var instance = new MyClass();
}
},
listeners: {
loadexception: function() {
console.log('Unable to load MyClass');
}
},
scope: this
}, url);

Cheers
Adam

Eric24
29 Dec 2010, 4:12 PM
@Doug (or anyone who's familiar with basex): Is there an example of how to use the request and beforesend events? I tried adding listeners to Ext.Ajax, but got no events.

Never mind, I figured it out (add the listener to Ext.lib.Ajax), but that now brings up a question: Why do I get to 'request' events per Ajax transaction on additional Connection objects I create (i.e. the Ajax singleton fires on request event per transaction, but additional Connection proxys fire two)?

hendricd
30 Dec 2010, 7:49 AM
@Doug (or anyone who's familiar with basex): Is there an example of how to use the request and beforesend events? I tried adding listeners to Ext.Ajax, but got no events.

Never mind, I figured it out (add the listener to Ext.lib.Ajax), but that now brings up a question: Why do I get to 'request' events per Ajax transaction on additional Connection objects I create (i.e. the Ajax singleton fires on request event per transaction, but additional Connection proxys fire two)?

@Eric--

basex provides the additional events when its desirable to capture ALL (global) Ajax requests (regardless of how/where they called).
What (and under what conditions) are you trying to capture?

hendricd
30 Dec 2010, 8:01 AM
Hi,

Does the $JIT API provide a way of doing this already or should I be testing for the existence of the object/function that was loaded before making the $JIT call?

The way I'm using $JIT looks like this:


$JIT({
callback: function(loaded) {
if(loaded) {
var instance = new MyClass();
}
},
listeners: {
loadexception: function() {
console.log('Unable to load MyClass');
}
},
scope: this
}, url);Cheers
Adam

@Adam--

By default, $JIT uses a named module hash (derived from the url you deliver your class with), but it also supports alternate patterns.
If the module is already loaded, your callback gets called immediately (w/loaded=true).

An alternate (inline) practice might look something like this:


$JIT.on('loadexception', globalFailureFn);

$JIT( url, function(loaded){
if(loaded){
var instance = new MyClass();
}
});
or, using a completely async pattern:


$JIT( url ).onClassAvailable ( [ 'MyClass', 'HerClass', 'HisClass' ] , function(loaded){
if(loaded){
var instance = new MyClass();
} else {


}
}, scope, 10000); //wait 10 seconds

t00bs
23 Mar 2011, 6:54 PM
@Doug

Hey Doug I noticed that the HTTP_X_REQUESTED_WITH header is forcibly set to 'Ext.basex', even though I'm explicitly setting it to 'XMLHttpRequest' in my request (which is the default when using XHR without basex anyway). Is there anyway to set this header's value.

Thanks.

hendricd
23 Mar 2011, 7:16 PM
@Doug

Hey Doug I noticed that the HTTP_X_REQUESTED_WITH header is forcibly set to 'Ext.basex', even though I'm explicitly setting it to 'XMLHttpRequest' in my request (which is the default when using XHR without basex anyway). Is there anyway to set this header's value?

Thanks.

Sure,
Anywhere after ext-basex.js script is loaded, add this statement :


Ext.lib.Ajax.defaultXhrHeader = 'whatEverYouWant';

t00bs
23 Mar 2011, 7:56 PM
Thanks Doug, cheers.

hyponym
10 May 2011, 4:49 AM
I am doing some testing from a local file to remote server and getting a statusText = 'communication failure' (fullStatus.isTimeout = true) in my callback.

but I can see a successful response in firebug (and charles for that matter).



function testPost(){
var postobj = Ext.Ajax.request({
xdomain : true,
async : true,
isJSON : true,
proxied : true,
url : 'http://blah',
params : {
json : 1,
key : 'somekeyval'
},
callback : testPostResult
});
}

function testPostResult(options,success,response){
console.log(success);
console.log(response);
}



One thing I've noticed is that the response comes back very quickly (<100MS) but the callback is called much much later.

hendricd
10 May 2011, 5:47 PM
I am doing some testing from a local file to remote server and getting a statusText = 'communication failure' (fullStatus.isTimeout = true) in my callback.

but I can see a successful response in firebug (and charles for that matter).



function testPost(){
var postobj = Ext.Ajax.request({
xdomain : true,
async : true,
isJSON : true,
proxied : true,
url : 'http://blah',
params : {
json : 1,
key : 'somekeyval'
},
callback : testPostResult
});
}

function testPostResult(options,success,response){
console.log(success);
console.log(response);
}



One thing I've noticed is that the response comes back very quickly (<100MS) but the callback is called much much later.

@hyponym -- What is your goal here? A JSONP request (proxied : true) or xdomain:true? Use one or the other, not both.

'xdomain' is reserved as an IE indicator, intended for a CORS AJax request (not a Script Tag JSONP request)

hyponym
11 May 2011, 2:31 AM
Thank for the reply Doug.

It's a filesystem script (file:/// protocol) which is calling php (codeigniter) on a remote server.

Because I am running off the filesystem, I am getting a 404 error with xdomain as Origin is always null.

I removed the xdomain property and the call is sent but I am obviously doing something incorrectly:

I changed the php echo to a function call in my js ( echo 'testPostResult(0,1,"ok")'; ) and that gets eval'd correctly . I still receive the timeout failure in the callback though.




var testPost = function(){
var postobj = Ext.Ajax.request({
async : true,
isJSON : true,
proxied : {callbackParam: 'jsoncallback'},
url : 'http://x.com/blah',
params : {json: 1, key : "somekey", clientName : "someclient"},
callback : function(options,success,response){
console.log(success);
console.log(response);
}
});
}

var testPostResult = function(options,success,response){
console.log(success);
console.log(response);
}




and my php



public function blah(){
echo 'testPostResult(0,1,'. $returnValue.');';
}

krause
18 May 2011, 6:31 AM
Does this extension work for Sencha Touch?

zombeerose
23 May 2011, 11:00 AM
Will the basex extension be updated for ExtJS 4? Our project utilized your enhancements extensively.

Thanks!

sumit.madan
27 May 2011, 12:18 AM
@Doug,

Does the basex extension work with ExtJS 4? I'm using your Ajax enhancements (onStatus) and considering moving our application to ExtJS 4.

ritchrs
27 Jun 2011, 8:29 PM
var seridStore = new Ext.data.Store({
baseParams:{code:'QYBZ'},
proxy:new Ext.data.HttpProxy({url:_contextPath_ + '/codeSelect.action',async:false}),
reader: new Ext.data.JsonReader({}, [
{name: "code"},
{name: "codedesc"}
]),
remoteStore:false
});
seridStore.load();

Ext.data.HttpProxy and ext-basex.js is not work in IE6

ext3.31 ext-basex.js 4.2

hendricd
28 Jun 2011, 4:03 AM
var seridStore = new Ext.data.Store({
baseParams:{code:'QYBZ'},
proxy:new Ext.data.HttpProxy({url:_contextPath_ + '/codeSelect.action',async:false}),
reader: new Ext.data.JsonReader({}, [
{name: "code"},
{name: "codedesc"}
]),
remoteStore:false
});
seridStore.load();

Ext.data.HttpProxy and ext-basex.js is not work in IE6

ext3.31 ext-basex.js 4.2

@ritchrs --

That's not much to go on. Add a load callback or event listeners to the store to see what IS going on.
Is that a same-origin request?

ritchrs
3 Jul 2011, 6:51 PM
@ritchrs --

That's not much to go on. Add a load callback or event listeners to the store to see what IS going on.
Is that a same-origin request?


@hendricd

i mean that
seridStore.getCount() is 6 in Chrome but is 0 in IE

hyponym
12 Jul 2011, 4:26 AM
I am getting serious problems in IE9 (Ext 3.4.0) when calling a function repeatedly.

I set up a test that makes a total of 150 requests at 20 second intervals
using unique ids in the postData obj.

The jsonp responses work fine in ie7/8 but fall over every time in IE9 around the 11th request



function xdmRequest(aUrl, postData) {
Ext.Ajax.request({
url: aUrl,
method: 'POST',
params : postData,
timeout : 15000,
isJSON : true,
proxied : true
});
}

function xdmResult(options,success,response){
console.log('received response from server: ' + response);
}


I can see all the requests coming back from the server (using Fiddler2 to log the traffic) so it seems to be failing to execute the return function somewhere.

hendricd
13 Jul 2011, 2:43 PM
I am getting serious problems in IE9 (Ext 3.4.0) when calling a function repeatedly.

I set up a test that makes a total of 150 requests at 20 second intervals
using unique ids in the postData obj.

The jsonp responses work fine in ie7/8 but fall over every time in IE9 around the 11th request



function xdmRequest(aUrl, postData) {
Ext.Ajax.request({
url: aUrl,
method: 'POST',
params : postData,
timeout : 15000,
isJSON : true,
proxied : true
});
}

function xdmResult(options,success,response){
console.log('received response from server: ' + response);
}


I can see all the requests coming back from the server (using Fiddler2 to log the traffic) so it seems to be failing to execute the return function somewhere.

@hyponym --

Can you post your request 'loop' used for the test case?

hyponym
14 Jul 2011, 1:02 AM
Sure, pm me if you want to use my actual url



var postcount = 0;
var globalInterval;

function loopedPost(){
testPost();
var f = function () {testPost(); };
globalInterval = setInterval(f,2000);
}

function testPost(){
postcount += 1;
if (postcount > 150){
postcount = 0;
clearInterval(globalInterval);
return;
}

var postobj = {
url : '',
params : {json: 1, key : "keyvalue", id : postcount }
};
xdmRequest(postobj);
}


On the server (not the entire function):


function testReturn(){
$id = $_REQUEST['id'];
$returnArray = array('dummyval'=>'999', 'id'=>$id);
$retval = json_encode($returnArray);
echo 'xdmResult(0, 1, ' . $retval . ');';
}

aratcliffe
4 Aug 2011, 5:55 PM
I'd like to be able to setup global beforeload and complete listeners so that I can notify the user that the UI is loading. Is this possible?

Cheers
Adam

hendricd
5 Aug 2011, 4:22 AM
I'd like to be able to setup global beforeload and complete listeners so that I can notify the user that the UI is loading. Is this possible?

Cheers
Adam

@Adam,

First the first part -- no.
The framework must be loaded first in order to use any events.

For Ext 2, the Ext libs must be loaded in the <head> section. Create the necessary markup (your spinner, etc) in the <body> tag, and remove it when Ext.onReady callback is raised.

jaufgang
5 Aug 2011, 6:19 AM
In ext-basex, in the declaration for ext.capabilities.hasAudio, the line



aAudio = ('Audio' in window) ? new Audio('') : {},

can in some cases cause the browser to execute an http request. In a web page that has a <base href="http://something"> tag in its head, the call to
new Audio('') will try to initialize the audio object by loading from the base url.

I noticed this while working on a web app of mine, the Net panel in firebug was showing an extra, unnecessary http request during each page load that didn't seem to be caused by anything I put in my page. It was only a minor annoyance, not a major bug, but it was irritating me that I couldn't figure out where it was coming from. Eventually, through elimination and stepwise debugging I eventually tracked the problem down to this line of code.

Fortunately, it seems to be possible to fix this problem by simply calling
new Audio() without an empty string parameter.

Cheers!

aratcliffe
6 Aug 2011, 9:11 PM
@Doug,

Thanks for the reply. What I'm referring to by UI is a UI component loaded by $JIT - so Ext and $JIT will be loaded at the point at which I load the module. An example of this in my application is a preferences dialog that is lazily loaded as a $JIT module.

hendricd
9 Aug 2011, 3:35 AM
..
I noticed this while working on a web app of mine, the Net panel in firebug was showing an extra, unnecessary http request during each page load that didn't seem to be caused by anything I put in my page. It was only a minor annoyance, not a major bug, but it was irritating me that I couldn't figure out where it was coming from. Eventually, through elimination and stepwise debugging I eventually tracked the problem down to this line of code.

Fortunately, it seems to be possible to fix this problem by simply calling
new Audio() without an empty string parameter.

Cheers!

@jaufgang -- Nice digging on that one! ;)

We've noticed similar behavior in Ext 4.x feature detection as well. We'll be looking at this one a bit closer.

Thanks Again.

hendricd
9 Aug 2011, 3:41 AM
@Doug,

Thanks for the reply. What I'm referring to by UI is a UI component loaded by $JIT - so Ext and $JIT will be loaded at the point at which I load the module. An example of this in my application is a preferences dialog that is lazily loaded as a $JIT module.

@Adam,

$JIT supports multiple inline callbacks in the request chain(s). You could simply inject them to create 'progress bars' or other visual aids to indicate such activity as each module is loaded:



$JIT(
function(){ showMessage('Loading..); },
'assets/cls/preferences.js',
function(ok){
if(ok) {
showMessage('Initalizing');
new ns.cls.Preferences().show();
}
},
....
);

Henrik Rutzou
11 Aug 2011, 2:33 AM
Hi,

I have 3 remote combo's with initial field values where the value in combo 1 must be passed as a parameter for the combo 2 etc.

I'm on Ext JS 3.3.0

I'm trying to delay the AJAX call with baseX but async : false dosn't seem to have any effect.

In the same page I also uses Ext.Ajax.request and here the async : false is working fine.

Is that correct ?



,store : new Ext.data.JsonStore({
url : "/pextrpcali/XAREG_CR.pgm"
,async : false
,baseParams:{
ses : "21054531730886540020111111271173"
,req : "14629009920882312020111140191292"
,func : "getRows"
,valueField : "EHXAID"
,displayField : "select"
,filterId1 : ""
,filterId2 : ""
,filterId3 : ""
,filterId4 : ""
,filterId5 : ""
,filterId6 : ""
,filterId7 : ""
,filterId8 : ""
,filterId9 : ""
}
,listeners: {
beforeload: {
fn:function(store, options) {
options.params.filterId1 = pxGetExtValueDelayed(panelId + "EHXXID", 1000);
options.params.filterId2 = pxGetExtValueDelayed(panelId + "EHXJID", 1000);


}
}
}
})
,valueParam : "value"
,mode : "remote"
,editable : true
,forceSelection : true
,hiddenName : "EHXAID"
,valueField : "EHXAID"
,displayField : "select"
,triggerAction : "all"




PS. pxGetExtValueDelayed is a "dirty workaround" to make the beforelistener to wait:



Regards,
Henrik

hendricd
11 Aug 2011, 4:49 AM
@Henrik:

Try setting it here where it should get passed on thru your proxy:



,listeners: {
beforeload: {
fn:function(store, options) {

options.params.filterId1 = pxGetExtValueDelayed(panelId + "EHXXID", 1000);
options.params.filterId2 = pxGetExtValueDelayed(panelId + "EHXJID", 1000);
options.async = false;

}
}

Henrik Rutzou
12 Aug 2011, 3:31 AM
@hendricd

I have tried both you solution and also to add a queue, but I think that the problem is in this extension because of the statement "this.store.load()". I have also tried to add a this.store.async = false; but that had no effect.



/**
* When combo box is used on a form with dynamic store (remote mode)
* then sometimes the combobox store would load after the form data.
* And in that case the setValue method of combobox will not
* set the combobox value properly. This override makes sure that the
* combobox store is completely loaded before calling the setValue method.
*/
Ext.override(Ext.form.ComboBox, {
setValue : function(v){
var text = v;
if(this.valueField){
if(!Ext.isDefined(this.store.totalLength)){
this.store.on('load', this.setValue.createDelegate(this, arguments), null, {single: true});
if(this.store.lastOptions === null){
var params;
if(this.valueParam){
params = {};
params[this.valueParam] = v;
}else{
var q = this.allQuery;
this.lastQuery = q;
this.store.setBaseParam(this.queryParam, q);
params = this.getParams(q);
}
this.store.load({params: params});
}
return;
}
var r = this.findRecord(this.valueField, v);
if(r){
text = r.data[this.displayField];
}else if(this.valueNotFoundText !== undefined){
text = this.valueNotFoundText;
}
}
this.lastSelectionText = text;
if(this.hiddenField){
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
}
});

hendricd
12 Aug 2011, 4:45 AM
@Henrik-

The base-x extensions are Adapter extensions for Ext.lib.Ajax.

It does NOT (WILL NEVER) provide all the necessary overrides to the various data.Readers, data.Proxies, and data.Stores to support synchronous requests because Synchronous Ajax requests degrade the user experience - blocking the ONLY (single) thread of execution available to your page until the request either succeeds, fails, or worse : times-out.

Rethink your approach to the problem a bit more. Use the various events available to you throughout the framework to solve problems like these. There are only one or two scenarios where I would EVER justify a synchronous request.

Henrik Rutzou
12 Aug 2011, 10:29 AM
@Doug

Thank you for your help and advice, unfortunately this is one of the cases where it is necessary to have the process done procedural. I have 3 combos where the value in the first has to go into the second and third, and the value in the second has to go into the third.

When the form is initial rendered the controller renders a generic form view object that are passed by the server and ask a service on the server for the initial values of the fields that are pass back as a JSON object. On the server a number of REST services resides that either passes a single JSON row object or a selection of rows to the remote combo boxes in the UI. All works fine besides the initial load.

You may ask why I just don’t pass the whole table to the UI but table 1 may be 1,000 rows, table 2 may be 10,000 rows and table 3 may be 200,000 rows. First it would be extremely time consuming in server time, in transfer time and in selection time in the Ext JS to handle the amount of data secondly the selection has to be done based on tables that may be very dynamic because the tables may be part of a ERP solution with very large database tables that may constantly changes.

There may of course be a way to access the values from the JSON row object that is associated with the form (that by the way also is loaded with a server call with async : false) but that goes beyond my expertise mainly because the form controller is a generic controller that hasn’t got a clue of neither design (view) of the form it handles nor the JSON row objects it receives that is all done on the server side to avoid monolithic controllers (and the same goes for grids).

IMHO there is many areas in a ERP UI where the user has to wait on the answer from the server that even in a MVC/SOA environment hasn’t to be long … if you sell shoes and also accessories entering an item number may require a quantity, but if it is a shoe it also requires a size and maybe a color. And in a high volume data entry app, you will be caught between the efficiency of a character based interactive UI, that are able to change the form / dialog in a MS, against the more “nice looking” but more inefficient “Windows Like” UI.

Making the decision if and when the UI requires a “wait” before the user proceeds (async: false/true is a standard feature of AJAX) is to me up to the system designer and leaving the feature out in any framework is crippling the system designers possibility to create UI that may be beyond the frameworks developers imagination – and to be frank, it doesn’t give any meaning to me to make a AJAX implementation that basically runs on either W3C or ActiveX without the upper layers inherited and supports the basic functionality in AJAX – it is basically only one parameter that has to be passed with many others – not a big dice – the functionality should be there as standard – we can the take a technical discussion when or when not it should be used.

And in fact, what you see in my last posting is a Sencha UX that really is a work around (originally made by animal and condor I think) about the problem that when rendering text in a remote combo you are not able to do or controle the underlying AJAX call (or it is never made) – the store isn’t just loaded before the rendering of the select value is done – apparently nobody at Sencha has thought that maybe a remote combo would have an initial value and should ask the server for the appropriate selection value.

Regards,
Henrik

aratcliffe
13 Aug 2011, 2:27 PM
Thanks Doug, that's very cool!!

sumit.madan
19 Aug 2011, 2:43 PM
@Doug

Any plans to port the ext-basex extension to ExtJS 4?

hendricd
22 Aug 2011, 4:49 AM
Yes,

ManagedIframe 4 alpha2 for Ext 4 is available here (http://www.sencha.com/forum/showthread.php?137233-Ext.ux.ManagedIframe-4.0-alpha2-for-Ext-4.x).

ZooKeeper
25 Apr 2012, 4:25 AM
Hi, Doug!

Looks like Firefox 12 has broken async: false Ajax request option.
The request doesn't even gets initialized.

I'd really appreciate any feedback on the issue.
I use 4.1.1 + Extjs 2

Thanks!

jhashe
25 Apr 2012, 6:45 AM
I have exactly the same problem with Firefox 12: broken if async=false :(
Any help would be precious.

Jhashe

jhashe
26 Apr 2012, 12:11 AM
I founded a work around for FF12, but I don't know which consequences it could have.

In ext-basex.js, function makeRequest, there is a code :


//IE8/other? evolving timeout callback support
if(callback && callback.timeout){
('timeout' in r) && (r.timeout = callback.timeout);
('ontimeout' in r) &&
(r.ontimeout = this.abort.createDelegate(this, [o, callback, true], 0));
('ontimeout' in r) ||
// Timers for syncro calls won't work here, as it's a blocking call
(options.async && (this.timeout[o.tId] = window.setInterval(
function() {A.abort(o, callback, true);
}, callback.timeout)));
}

If I comment the line
('timeout' in r) && (r.timeout = callback.timeout); in this bloc (line 1010 in v4.0), requests run fine on FF12. But be carreful, I don't know what I "desactive" in the library

jhashe
26 Apr 2012, 12:31 AM
On Mozilla MDM, about XmlHTTPRequest, you can read:
Note: You may not use a timeout for synchronous requests with an owning window.

So a better work around could probably be to change the line (1009 in v4.0)

if(callback && callback.timeout){
to

if(callback && callback.timeout && options.async){

hairinwind
26 Apr 2012, 12:37 AM
in ext-basex.js 4.1 about line 1011
('timeout' in r) && (r.timeout = callback.timeout);
modified to :
(options.async) && ('timeout' in r) && (r.timeout = callback.timeout);

hendricd
4 May 2012, 6:10 AM
in ext-basex.js 4.1 about line 1011
('timeout' in r) && (r.timeout = callback.timeout);
modified to :
(options.async) && ('timeout' in r) && (r.timeout = callback.timeout);

Nice digging guys! ;)

I'll include this on the next build.

ronivcp
10 Aug 2012, 2:30 PM
I'm working on a desktop app with extjs 3.2 (using basex for local file system access) and I'm having problems in IE9: when I reload repeatedly the page it crashes, this wasn't happening with IE8 and I haven't change my code. So, I believe that I have some sort of compatibility problem going on, I already tried to migrate to 3.4 (I would like to go foward with 4.x but I don't have the plugin to run my app locally yet... hope it will be soon). The problem is that with 3.4 I started to have issues with basex, when reloading the app doesn't crash but there's a lot of error messages from basex.
So the thing is, there's going to be another version of ext-basex adding compatibility with ie9? There's going to be/is something on extjs4.x to prevent from using this plugin and be able to run an app locally, without a webserver?

Thanks in advanced.