PDA

View Full Version : [2.x, 3.x] ext-basex/JIT 4.1 Adapter extensions



hendricd
4 Jun 2009, 12:29 PM
The ext-basex adapter has been re-adapted for use with Ext 3.0 and adds the following new features:

- Adds Browser 'capabilities' object reporting on presence of (SVG, Canvas, Flash, Cookies, XPath ) (eg:
if(Ext.capabilities.hasFlash){ ... }- Adds Ext.overload supported for parameter-based overloading of Functions and class methods.

- Adds Ext.clone functions for any datatype.

- Adds Array prototype features: first, last, clone, forEach, atRandom, include, flatten, compact, unique, filter, map.

- Connection/response object members : getAllResponseHeaders, getResponseHeader are now functions.

- Adds Array.slice shortcut support for other browsers (Gecko already supports it)
Array.slice( arguments, 2 ) - Adds Ext methods.

- Adds [I]Ext.isEventSupported('resize'[, forElement]) to determine if the browser supports a specific event.

- Adds cross-browser multiPart Response handling (via onpart callbacks and/or the new parts Array of response Object)
See online Multipart Demo here (http://demos.theactivegroup.com/?demo=basex&script=multipart).

- Adds parsed contentType to all response objects

- Adds Xdomain request support for modern browsers (IE8, etc) To make a cross-domain request simply add xdomain:true to any Ext.Ajax.request.
Note: servers must implement the header: 'Access-Control-Allow-Origin: [*|domain.com]' for a response to be processed. ext-basex has been repackaged to make it lighter-weight. The ux.ModuleManager class has been moved the $JIT package (included), so if you are using the ModuleManager you'll need to include both ext-basex.js and jit.js in your project.

I'll also announce that my official ux demonstration site is up, and based entirely on $JIT / Ext.3.0.

Demonstrations:

JSONP -> Flickr (http://demos.theactivegroup.com/?demo=basex&script=flickr) with ext-basex.
Multipart Reponses (http://demos.theactivegroup.com/?demo=basex&script=multipart) (lately dubbed MXHR) with ext-basex.

For more about $JIT, see the documentation link (http://uxdocs.theactivegroup.com/index.html?class=$JIT) and aquick Tutorial is also available here (http://extjs.com/forum/showthread.php?p=377251#post377251). More coming.. ;)

ZIP Download Note: the current vBulletin config gzips attachments which IE hates. Download this with Firefox (or other browser) instead of IE.

Trinodia
5 Jun 2009, 1:15 AM
Great news! Will try it out as soon as i can :)

DigitalSkyline
5 Jun 2009, 12:54 PM
Grats Doug! =D>

mystix
8 Jun 2009, 12:21 AM
found a tiny issue with the primary clone function -- it currently does an isFunction() check before an emptiness check. if the obj is null, the clone() method chokes, splutters sputters and dies.

a simple swap does the trick:


var clone = function(obj, deep) {
if (!obj) {return obj;}

if (Ext.isFunction(obj.clone)) {
return obj.clone(deep);
}

// if (!obj) {return obj;}

var o = {};
forEach(obj, function(val, name, objAll) {
o[name] = (val === objAll ? // reference to itself?
o : deep ? clone(val, true) : val);
});
return o;
};

hendricd
8 Jun 2009, 5:31 AM
@mystix -- Thanks. Fixed in SVN.

markpele
10 Jun 2009, 7:31 AM
I have a web-page page1 and I'm navigating to page2.
If I'm sending a synchronous call in unload event handler
will the synchronous call arrive the server before the request to page2?

How will asynchronous request behave?

Thank you.

hendricd
10 Jun 2009, 7:36 AM
I have a web-page page1 and I'm navigating to page2.
If I'm sending a synchronous call in unload event handler
will the synchronous call arrive the server before the request to page2?

How will asynchronous request behave?

Thank you.

The async response will definitely NOT survive the page transition, but the server will likely act on the request. The sync call [might] block the thread of execution until the response arrives, but on all browsers? Only your test will tell. ;)

markpele
10 Jun 2009, 9:01 AM
the sync request does get handled by the server. On my server log I can see that the sync request is received only after the next page request.

What I'm trying to do is to tell the server to change the session state before the iframe navigation occurs. With beforeunload on IE and FF it works great but apparently unload event won't help.

hendricd
10 Jun 2009, 9:07 AM
the sync request does get handled by the server. On my server log I can see that the sync request is received only after the next page request.

What I'm trying to do is to tell the server to change the session state before the iframe navigation occurs. With beforeunload on IE and FF it works great but apparently unload event won't help.

Are attempting the request from within the frame or the frame's parent page?

markpele
10 Jun 2009, 9:23 AM
The code is in the parent page.
I didn't try to send the sync ajax request from the child frame. I'll try it now.
I'm using standard js to simplify it before using ext and basex


<iframe id="childF" src="page1.html"></iframe>

var childF = document.getElementById('childF').contentWindow;
childF.addEventListener('unload', function(){
if (window.XMLHttpRequest) {
AJAX=new XMLHttpRequest();
} else {
AJAX=new ActiveXObject("Microsoft.XMLHTTP");
}
if (AJAX) {
AJAX.open("GET", '/test/', false);
AJAX.send(null);
//return AJAX.responseText;
//alert(AJAX.responseText);
} else {
//return false;
//alert('false');
}
}, false);

markpele
10 Jun 2009, 11:39 AM
I moved the unload event and handler inside the iframe.
Tried setting a cookie or sending a synchronous ajax request.
The cookie affect only later requests.
The synchronous ajax request is being sent after the request for the next page.

It looks like the beforeunload event is the only option and I need to wait few years
until webkit will implement it inside iframes.

hendricd
10 Jun 2009, 2:55 PM
@mark -- Perhaps from a different angle -- interception. If you're using ManagedIframe (http://extjs.com/forum/showthread.php?t=40961), you could handle the intercept a bit differently (from the parent page or apply similar technique from within -- if Ext is loaded in the child-page):




someContainer.add({
xtype: 'iframepanel',
defaultSrc : startUrl,
listeners : {
domready : function(frame){ //raised for same-origin frames only

//apply a delegation listener every time the frames url changes
frame.getDoc().on('click', function(e){
var url = e.getTarget().href;
e.stopEvent(); //prevent the browser from acting on the click

(function(){
//set your session cookies here

Ext.Ajax.request({
method: 'POST',
url : ???,
callback : function(options, success, response){
success && frame.setSrc(url);
}
});

}).defer(50);

return false; //let the event cancel
}, null , {delegate: 'a'});
}
}
});Then it wouldn't matter if the Ajax request was synchronous or not. ;)

Just not sure how your child pages handle navigation tho.... :-?

markpele
10 Jun 2009, 4:13 PM
@hendricd
That's interesting. I'll play with this idea.
Thanks

brookd
16 Jun 2009, 11:35 AM
I am using the older version (I actually do not see the version # in the code..), and I am essentially JUST using the moduleManager to load external JS and CSS ondemand.

It looks like there is a ton of functionality I am not using. Is this overkill for me? To simply use it to load external JS on demand?

hendricd
16 Jun 2009, 12:10 PM
@brookd: Although ModuleManager has been been moved to jit.js,

- some new Ext(global) features have been added
- and Ext.lib.Ajax has been modernized to support xdomain, and multipart requests

there is only an incremental increase in size relative to new features added.

Your call really. ;)

Curtis Fletcher
22 Jun 2009, 2:59 AM
@hendricid:

Thanks for your reply to the thread I started regarding ajax timeouts in ext. I've since found out that we will be targeting ie6 so I decided to give basex a try (current svn), but I'm really not getting very far.

I was under the impression that basex didn't require JIT to work? I tried to replicate your multi-part demo at my end without your demo harness or JIT and it failed to recognise the multipart regardless what I tried. I thought that the ajax parts of basex simply overrode Ext.lib.Ajax and thus provided additional abilities but otherwise didn't effect ext ajax use in the usual manner? Additionally the thread titles indicates [2.x,3.x] from that I'm assuming that basex shouldn't have any negative effects on an ext 2.2.1 application from just being included? (I'm getting forms failing to include some of their elements)

Are there any non-JIT standalone examples of multi-part ajax that I might be able to dissect? Because at the moment I can't get even get a basic test case running.

Sorry if these seem like simple questions but I'm finding it difficult to test even basic usage. and the javadoc don't really say much about how to use the new events, unless I've missed some documentation or a wiki?

hendricd
22 Jun 2009, 3:11 AM
@Curtis -- You do not need to incude jit.js to get any of the basic enhancements for lib.Ajax (including multipart parsing).

Could you describe more about what you are attempting and how, and what problems you are having with Form posting?

Curtis Fletcher
22 Jun 2009, 3:31 AM
@hendricid:
Sure, I didn't want to start posting code unless prompted :)
I was hoping to add ext.basex to an application we already have and I'd then start working on using the additional events to allow a long running cgi to periodically "check-in" with the ext-ui, however as soon as I added the ext-basex.js script tag, a number of forms started misbehaving. (firebug showed that some or all of the form controls were not getting their values sent) so I decided to simplify and get a single working test case.

So I tried to duplicate the test case here (http://demos.theactivegroup.com/?demo=basex&script=multipart)

<html>
<head>
<title>Multi-test</title>
<script type="text/javascript" src="/ext-3.0-rc2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-3.0-rc2/ext-all.js"></script>
<script type="text/javascript" src="/ext-3.0-rc2/ext-basex.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-2.2.1/resources/css/ext-all.css"/>
<script type="text/javascript">
var dw = Ext.extend( Ext.Window, {

title : 'Multipart Ajax with ext-basex',
width : 745,
height : 369,
maximizable : true,
initComponent: function(){

this.items = [{
xtype:'tabpanel',
id: this.getId() + '-center',
activeTab : 0,
region : 'center',

items: [{
title: "Response Output",
autoScroll : true,
responseTpl : new Ext.XTemplate(
'<tpl for="."><h3>Part #{partCt}</h3><span><hr>',
'Content-Type: {contentType}<br/>',
'<pre>{responseText:htmlEncode}</pre>',
'</span></tpl>'
).compile(),
partCt : 0,
id : 'demo-panel',
ref: '../output',
onPart: function(response){
response.partCt = ++this.partCt;
this.responseTpl.append(this.body, response );
},
onCompleted: function(response){
response.partCt = ' Full Response';
if(Ext.isArray(response.parts)){
forEach(response.parts, function(responsePart){ });
}
this.responseTpl.append(this.body, response );
},
onBooBoo: function(response){
response.partCt = ' Failure Response';
this.responseTpl.append(this.body, response );

},
tbar : [{
text :'Make Request',
iconCls:'demo-action',
scope : this,
handler : function(button){

var demo = Ext.getCmp('demo-panel');
demo.partCt = 0;
demo.body.update('');
Ext.Ajax.request({
url : 'cgi-tst.php',
method : 'POST',
onpart : demo.onPart,
failure : demo.onBooBoo,
success : demo.onCompleted,
scope : demo,
timeout : 15000

});
}
}]
}]
}];

dw.superclass.initComponent.apply(this,arguments);
},
sourceModule : 'multipart',
serverSource : 'demos/basex/multipart.php'
});

Ext.onReady(function(){
new dw ({id:'multipwin'}).show();
});
</script>
</head>
<body>
</body>
</html>
When using this firebug reports the output of the AJAX call as being:

--agile
Content-Type: text/html

Hello World at 12:06:58 PM
--agile
Content-Type: text/html

<b>Hello World from xx.xx.xx.xx</b>
--agile
Content-Type: application/json

{success:true, name:"yours"}
--agile--
And no part events fire. Using firebug on the demo on your site shows

({success: true, name: "yours"});
/* !eval(new String("("+json+');)) */as the response (which is what I'd expect, the last bit of the multipart)
The only thing I currently suspect is that the test cgi/php I'm using seems to be setting Transfer-Encoding: chunked whereas yours does not.

If I can just get basex multi-part working in a test case I'll investigate the application form issues further (stripping out the form panels from the application ends up with them working just fine)

Thanks for any help you can offer.

hendricd
22 Jun 2009, 3:39 AM
@Curtis --

'chunked' is not a multipart HTTP response. As shown in the PHP sample code online, your initial response header ( per the HTTP RFC) for Content-Type must be structured as: multipart/mixed; boundary="name"


Any more details about what Form elements are affected?

Curtis Fletcher
22 Jun 2009, 4:31 AM
@hendricid:
Oh indeed, sorry I wasn't clear, the Content-Type is indeed 'multipart/mixed; boundary="XXX"' in both cases its just that in my local case "Transfer-Encoding" is "chunked" and in the demo you have hosted it is not set (and I can see the chunked encoding if I wireshark the http conversation)

I'll post an example of a form that fails to submit properly in a moment (but as I said, I haven't been able to replicate it in isolation yet)

Here is my isolated example, it behaves as I'd expect:


<html>
<head>
<title>xxx</title>
<script type="text/javascript" src="/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="/ext-2.2/ext-basex.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-2.2/resources/css/ext-all.css"/>
<script type="text/javascript">
var lw = function() {
var passwordField = new Ext.form.TextField({
fieldLabel:'Password',
name:'password',
inputType:'password',
allowBlank:false
});

function submitData() {
login.getForm().submit({
waitTitle:'Connecting',
waitMsg:'Authorising...',
url: '/misc/cgi-tst.php',
success:function(){
var redirect = 'index2.html';
window.location = redirect;
},
failure:function(form, action) {
obj = Ext.util.JSON.decode(action.response.responseText);
if (obj) {
Ext.Msg.alert('Login Failed!', obj.status_detail);
} else {
Ext.Msg.alert('Login Failed!', 'No reason provided');
}
login.getForm().reset();
}
});
}

var login = new Ext.FormPanel({
labelWidth:80,
url: 'http://',
width:230,
padding:200,
defaultType:'textfield',
monitorValid:true,
frame:true,
items:[{
fieldLabel:'Username',
name:'username',
allowBlank:false
},
passwordField
],
buttons:[{
text:'Login',
formBind: true,
handler: function() {
submitData();
}
}]
});

var win = new Ext.Panel({
title:'Please Login',
width:300,
height:150,
plain: true,
layout:'fit',
items: [login]
});

return {
init: function(divId) {
win.render(divId);
},
};
};
Ext.onReady(function(){
lw().init("here");
});
</script>
</head>
<body>
<div id="here"></div>
</body>
</html>
That is firebug shows the post to contain:

password:xxx
username:xxxHowever, almost the same code in the application results in a post with no parameters if ext-basex.js is included and works fine without ext-basex.js

Still working on stripping down the app to isolate when it starts working.
EDIT:
Got it, its 2.1, the app in question is running on 2.1 and I was testing on 3rc2 2.2.1 and 2.2 so it would seem that 2.1 +current ext.basex results in odd form behavior.

So, back to getting a basic working multi-part submit. I'm tempted to scrape your entire multi-part demo and test it on a machine on my side, because if it misbehaves without any changes at all it must be the transfer-encoding that's messing it up, what do you think?

hendricd
29 Jun 2009, 4:14 AM
So, back to getting a basic working multi-part submit. I'm tempted to scrape your entire multi-part demo and test it on a machine on my side, because if it misbehaves without any changes at all it must be the transfer-encoding that's messing it up, what do you think?

@Curtis -- Would need to see a full dump of the actual response (headers and all) to even render a guess.

jfa
30 Jun 2009, 1:24 AM
Hello, a response (status code 200, content type app/json) returning nothing is treated like an error (due to syntax error thrown by Ext.decode to set responseJSON) and so failure callback is called.
Is it the expected behaviour ?

hendricd
30 Jun 2009, 3:33 AM
Hello, a response (status code 200, content type app/json) returning nothing is treated like an error (due to syntax error thrown by Ext.decode to set responseJSON) and so failure callback is called.
Is it the expected behaviour ?

@jfa -- Yes, the working assumption is:

'if the JSON returned by the server is poorly structured or otherwise cannot be properly decoded -- an exception event is raised and/or the failure callback is invoked'.

Why would you send back nothing with a Content-type header of application/json (which implies it should be treated as such)?

jfa
30 Jun 2009, 4:43 AM
Why would you send back nothing with a Content-type header of application/json (which implies it should be treated as such)?

Content-type is set by my REST framework, following the process, result can be only a confirmation, or an error report, ...
I thought an empty string is decoded as null, but strictly, you're right
Thanks

jnadler
13 Jul 2009, 10:09 PM
Ext 2.2.1, ext-basex 3.5

Hi,

Just trying basex for the first time. (pop!)

I'm using it (or hoping to) for cross domain calls; I built a JSONP method on my server and did a simple example to prove the concept.

My callback never gets called. Any suggestions for debugging this?



Ext.Ajax.request({
url: this.requestUrl,
method: this.requestMethod,
success: this.handleSuccess,
failure: this.handleFailure,
headers: headers,
params: loginTokenParams,

isJSON: true,
proxied: {
debug: true,
callbackParam: 'callback'
},
callback: function(options, success, response) {
alert('the callback was called');
},

scope: this
});When I watch it in firebug it seems to start OK. Basex passes parameter:

callback: basexCallback0And the server responds appropriately I think; it is using content type application/x-javascript which seems to be a limitation of Jersey (Java based REST framework):

basexCallback0({"partyId":"3"})But no callback ever occurs.

hendricd
13 Jul 2009, 10:19 PM
Ext 2.2.1, ext-basex 3.5

Hi,

Just trying basex for the first time. (pop!)

I'm using it (or hoping to) for cross domain calls; I built a JSONP method on my server and did a simple example to prove the concept.

My callback never gets called. Any suggestions for debugging this?



Ext.Ajax.request({
url: this.requestUrl,
method: this.requestMethod,
success: this.handleSuccess,
failure: this.handleFailure,
headers: headers,
params: loginTokenParams,

isJSON: true,
proxied: {
debug: true,
callbackParam: 'callback'
},
callback: function(options, success, response) {
alert('the callback was called');
},

scope: this
});When I watch it in firebug it seems to start OK. Basex passes parameter:

callback: basexCallback0And the server responds appropriately I think; it is using content type application/x-javascript which seems to be a limitation of Jersey (Java based REST framework):

basexCallback0({"partyId":"3"})But no callback ever occurs.

See the Flickr Ajax call on this demo page. (http://demos.theactivegroup.com/demodesk.html?demo=basex&script=flickr)
(And, download the latest zip again. it was updated just moments ago.)

mystix
14 Jul 2009, 12:36 AM
there's something funky with the Ext.clone() method from ext-basex SVN rev. 58.

try this:


a = Ext.clone({
myFn: function() {
return 'woohoo!';
}
}, true); // true to perform a deep clone


then log the contents of a in Firebug.
you'll see that myFn has been mysteriously transformed from a Function into an Object.


[edit]
workaround:
deep cloning starts to work correctly if Ext.clone() has been invoked at least once.
i.e.


Ext.clone(); // invoke Ext.clone() once

a = Ext.clone({
myFn: function() {
return 'woohoo!';
}
}, true); // true to perform a deep clone

jnadler
14 Jul 2009, 6:38 AM
I wasn't able to get it working with ext-basex 3.5, but 3.4 is working fine with the original code I posted.

I'm still in the dark ages of ExtJS 2.2.1 if that explains anything.

hendricd
14 Jul 2009, 6:43 AM
I wasn't able to get it working with ext-basex 3.5, but 3.4 is working fine with the original code I posted.

I'm still in the dark ages of ExtJS 2.2.1 if that explains anything.

Thanks, I'm tweaking Ext.clone as we speak, so I'll take a look at that too. ;)

jnadler
14 Jul 2009, 8:23 AM
One more issue: I pass an array of request headers, this was working as expected with plain Ext.lib.Ajax.

With ext-basex my headers are not included in the request. This one isn't a proxied request.

hendricd
14 Jul 2009, 8:41 AM
One more issue: I pass an array of request headers, this was working as expected with plain Ext.lib.Ajax.

With ext-basex my headers are not included in the request. This one isn't a proxied request.

@jnadler -- Request headers as documented, are designed for use as object hashes, not arrays.

You're likely mis-using the Array Object as a hash.
Should look like this:


// Basic request
Ext.Ajax.request (http://extjs.com/forum/../deploy/ext-3.0-rc2/docs/output/Ext.data.Connection.html#Ext.data.Connection-request)({
url: 'foo.php',
success: someFn,
failure: otherFn,
headers: {
'my-header': 'foo'
},
params: { foo: 'bar' }
});

hendricd
14 Jul 2009, 8:55 AM
@mystix -- SVN/zip-file is updated with the Ext.clone fix ! ;)

By design, Ext.clone(someInstance, true) will clone the instance AND any prototypes.

jnadler
14 Jul 2009, 9:38 AM
Thanks - changing to Object did indeed solve this problem, headers are going out as expected. I expected this to be 'plug compatible' with Ext.lib.Ajax but as you said I failed to read docs on this one.

I'm now seeing double callbacks (2x invocation of my 'success' handler) - ever seen this before?

canxss
14 Jul 2009, 1:08 PM
Today I've decided to check out Ext 3.0 in our on-going application but didn't make a good start :) Anyway after six hours I think I found the cause of my first problem.

Execute the following code in firebug console which is loaded ONLY with Ext JS 3.0:



var fields = [{
name: 'Name',
type: 'string'
}, {
name: 'FullName',
type: 'string'
}];
var proxy = new Ext.data.HttpProxy({
url: 'test.php'
//,method: 'POST'
});
var store = new Ext.data.JsonStore({
proxy: proxy,
root: 'Result',
fields: fields
});

store.baseParams['A'] = 1;
store.baseParams['B'] = 2;

store.load();
When I check the console I see that POST method is used and also params A and B are in the POST section.

But when I try execute the same code that is loaded with the same Ext JS 3.0 and ALSO latest version of ext-basex, console will show that GET method is used instead of POST. But although I force it to use POST, the result isn't successful because baseParams are NOT sent.

Can you check this out?

Thanks in advance

hendricd
14 Jul 2009, 5:43 PM
Today I've decided to check out Ext 3.0 in our on-going application but didn't make a good start :) Anyway after six hours I think I found the cause of my first problem.

Execute the following code in firebug console which is loaded ONLY with Ext JS 3.0:



var fields = [{
name: 'Name',
type: 'string'
}, {
name: 'FullName',
type: 'string'
}];
var proxy = new Ext.data.HttpProxy({
url: 'test.php'
//,method: 'POST'
});
var store = new Ext.data.JsonStore({
proxy: proxy,
root: 'Result',
fields: fields
});

store.baseParams['A'] = 1;
store.baseParams['B'] = 2;

store.load();
When I check the console I see that POST method is used and also params A and B are in the POST section.

But when I try execute the same code that is loaded with the same Ext JS 3.0 and ALSO latest version of ext-basex, console will show that GET method is used instead of POST. But although I force it to use POST, the result isn't successful because baseParams are NOT sent.

Can you check this out?

Thanks in advance


@canxss -- I've built a simple page using your sample, located here (http://demos.theactivegroup.com/basex.html), but I'm not seeing your results. POST is the default method, and the baseParams are sent as expected.

The demo site uses the latest Ext 3.0 and basex/JIT SVN builds and renders no UI components. (Check the FB net tab)
Make sure you are on the same builds too. ;)

mystix
14 Jul 2009, 11:46 PM
@mystix -- SVN/zip-file is updated with the Ext.clone fix ! ;)

By design, Ext.clone(someInstance, true) will clone the instance AND any prototypes.

so far so good :)

p.s. quick question: didn't the old Ext.clone() clone the prototypes as well?

hendricd
15 Jul 2009, 4:21 AM
so far so good :)

p.s. quick question: didn't the old Ext.clone() clone the prototypes as well?

< 3.5 did not care about proto's for instances. But the enhanced forEach iteration does now.

canxss
15 Jul 2009, 7:36 AM
Sorry :">, my mistake! I've thought I've isolated the system well enough but I was wrong. Since it was a problem about sending baseParams and ajax, I've immediately put the blame on ext-basex. Again sorry! I hope I didn't take much of your time.

Any way the problem is, I was overriding Ext.urlEncode in order to fix a problem (Date params in a Connection.request were ignored because they were not Arrays) and this override caused the problem.

Thanks

zombeerose
16 Jul 2009, 9:38 AM
I'm missing my response headers in IE6. Specifically, the content type header is not set. Is this a known issue because It worked for Ext2?

I have posted a test case to drop into examples. Run it in FF vs IE6.

I'm using the latest basex from svn and Ext3.0

hendricd
18 Jul 2009, 5:37 AM
I'm missing my response headers in IE6. Specifically, the content type header is not set. Is this a known issue because It worked for Ext2?

I have posted a test case to drop into examples. Run it in FF vs IE6.

I'm using the latest basex from svn and Ext3.0

@zombeerose - Effective Ext 3.0, the getResponseHeader[header] hash was replaced by the XHR-object standard getResponseHeader(header) function. Thus, basex now follows suite with that change (This change is noted on the first post of this thread).

zombeerose
20 Jul 2009, 9:05 AM
I realize that getResponseHeader is now a function but does that mean that the content-type header is not available?

hendricd
20 Jul 2009, 9:11 AM
I realize that getResponseHeader is now a function but does that mean that the content-type header is not available?
@zombeerose -- With ext-basex, you should be able to gather that value one of two ways:

1) response.contentType, and
2) response.getResponseHeader('Content-Type') [in upper or lower case]

Does your server response actually set that header?

zombeerose
20 Jul 2009, 9:24 AM
Based on the Net tab in Firebug, yes I am getting my content type header. But in IE, I get absolutely nothing from getAllResponseHeaders or contentType.

zombeerose
20 Jul 2009, 9:29 AM
I just verified that my server is returning a content type header.

Content-Type: text/html; charset=utf-8',

hendricd
20 Jul 2009, 9:36 AM
Based on the Net tab in Firebug, yes I am getting my content type header. But in IE, I get absolutely nothing from getAllResponseHeaders or contentType.

@zombeerose --
Some help here pls. :-?

Is it getAllResponseHeaders or getResponseHeader you are having troubles with?
Is it IE only?
What is the typeof (response.getAllResponseHeaders())?
What is the typeof (response.getResponseHeader('content-type')) ?

zombeerose
20 Jul 2009, 9:50 AM
@zombeerose --
Some help here pls. :-?

Is it getAllResponseHeaders or getResponseHeader you are having troubles with?
Is it IE only?
What is the typeof (response.getAllResponseHeaders())?
What is the typeof (response.getResponseHeader('content-type')) ?

* Having problems with both get methods in IE only.
* IE6 specifically
* typeof getAllResponseHeaders: FF - string, IE - string
* typeof getResponseHeader: FF - string, IE - undefined

The zip example that I had already posted demonstrates my issue.

hendricd
20 Jul 2009, 10:38 AM
* Having problems with both get methods in IE only.
* IE6 specifically
* typeof getAllResponseHeaders: FF - string, IE - string
* typeof getResponseHeader: FF - string, IE - undefined

The zip example that I had already posted demonstrates my issue.

@zombeerose -- Using the attached (revised) zip, try again. I've added exception handling to the header processing. See if that barks about the problem.

zombeerose
20 Jul 2009, 10:58 AM
I had to make a couple other tweaks to your code to get it to work. Below are the revisions. Let me know if I mis-interpreted.



var handleTrouble = function(options, response, callback, isAbort, isTimeout, errObj) {
errObj = errObj || {};
var reason = ' (Status: ' + (errObj.description || errObj.message || 'unknown') + ')';
Ext.Msg.alert("Response Exception", reason);
return true;
};
//attach to standard ajax events
Ext.lib.Ajax.on({
'response': handleResponse,
'exception': handleTrouble
});
With that said, when I execute the code in IE6, I get "Object doesn't support this property or method." It still works fine in FF.

zombeerose
20 Jul 2009, 11:10 AM
I think the error is from line 899 in the makeRequest function

r.open(method.toUpperCase(), uri, options.async,options.userId, options.password);


The open method is not defined.

hendricd
20 Jul 2009, 11:22 AM
I think the error is from line 899 in the makeRequest function

r.open(method.toUpperCase(), uri, options.async,options.userId, options.password);
The open method is not defined.

If what I suspect is true, changing line ~901 from:


('onreadystatechange' in r) &&to


r.onreadystatechange &&should move the error to line ~904.

Can you give that a try?

zombeerose
20 Jul 2009, 11:47 AM
Well I made the change but thanks to all of the details provided by the M$ debugger (sarcasm), I am not sure what line is actually throwing the error.

All I know is that as I step back thru the call stack and inspect the response object, it does not contain an open method, which is where my hypothesis originated.

----
I was able to confirm that the error is now occurring on the r.onreadystatechange line

hendricd
20 Jul 2009, 11:57 AM
Well I made the change but thanks to all of the details provided by the M$ debugger (sarcasm), I am not sure what line is actually throwing the error.

All I know is that as I step back thru the call stack and inspect the response object, it does not contain an open method, which is where my hypothesis originated.

@zombeerose -- The open method is used by the Connection object (o.conn), not the response. What is the top-level function the error is raised in?

We need to determine what 'method' is unsupported on IE6. (Wish I still had IE6+debugger installed somewhere -- NOT!) ;)

zombeerose
20 Jul 2009, 12:14 PM
You are right - r !== response - my bad

My call stack:
basex-example.js - line 41 - handleTrouble() - I am forcing the IE debugger to break here.
ext-all - minified
ext-all - minified
ext-all - minified
ext-all - minified
ext-basex - line 521 - handleTransactionResponse()
ext-basex - line 938 - makeRequest()
ext-basex - line 778 - request()...more ext-all ... should I go on?

hendricd
20 Jul 2009, 12:24 PM
Try this attached version.

zombeerose
20 Jul 2009, 12:31 PM
What changed cause I don't see any differences?

hendricd
20 Jul 2009, 12:39 PM
What changed cause I don't see any differences?
Try that zip link again.

hendricd
20 Jul 2009, 12:51 PM
Try installing this (http://www.my-debugbar.com/wiki/CompanionJS/HomePage).

zombeerose
20 Jul 2009, 12:54 PM
After some caching issues, it still is giving me the same error.

---
I didn't see your link post until now - will try.

zombeerose
20 Jul 2009, 1:01 PM
I commented out the try/catch then ran the code - line 904 Object doesn't support this property or method.

hendricd
20 Jul 2009, 1:10 PM
I commented out the try/catch then ran the code - line 904 Object doesn't support this property or method.

Which syntax:


'onreadystatechange' in r &&
or

defined(r.onreadystatechange) &&

zombeerose
20 Jul 2009, 1:11 PM
defined(r.onreadystatechange) &&

hendricd
20 Jul 2009, 1:24 PM
Try modify line 1018 to read:


var C = o.conn, readyState = C.readyState || 0;

zombeerose
20 Jul 2009, 1:27 PM
Same

hendricd
20 Jul 2009, 1:33 PM
I'll need to build another IE6 machine and get back to you on that. (:|

zombeerose
20 Jul 2009, 1:34 PM
Instead of that, I just talked to my boss and he is ok if I give you temp access to my machine. He suggested using a trial from webex.com. Interested?

hendricd
20 Jul 2009, 1:39 PM
No, depending on the severity, I'll need one of three MS debuggers (and other goodies) I have to straighten it out.

I'll be back with ya soon.

Long live ActiveX and IE6 !

zombeerose
20 Jul 2009, 1:41 PM
Ok - sorry for being a PITA. I wish IE would fall off the edge of the universe and die.

Thanks for all the help thus far.

hendricd
21 Jul 2009, 6:05 AM
Ok - sorry for being a PITA. I wish IE would fall off the edge of the universe and die.

Thanks for all the help thus far.

@zombeerose ,et al -- OK. Found it.

Was missing an ActiveX-style assertion on getAllResponseHeaders. Fixed now.

All IE6 developers are highly encouraged to download the latest build (3.5.1).

zombeerose
21 Jul 2009, 6:18 AM
THANK YOU THANK YOU THANK YOU!!! Works great :D

zombeerose
21 Jul 2009, 7:15 AM
Have you seen this error at all?

Permission denied for <http://---www---> to create wrapper for object of class UnnamedClassstack:
handleEvent([object Event])@:0
XPC_SJOW_CallWrapper(handleEvent,[object Event])@:0
(XPC_SJOW_CallWrapper,handleEvent,[object Event])@XPCSafeJSObjectWrapper.cpp:450
@:0
I am using FF3.5 with Firebug 1.4.0

It doesn't appear to "break" anything but is quite frequent.

hendricd
21 Jul 2009, 7:17 AM
Have you seen this error at all?

Permission denied for <http://---www---> to create wrapper for object of class UnnamedClassstack:
handleEvent([object Event])@:0
XPC_SJOW_CallWrapper(handleEvent,[object Event])@:0
(XPC_SJOW_CallWrapper,handleEvent,[object Event])@XPCSafeJSObjectWrapper.cpp:450
@:0
I am using FF3.5 with Firebug 1.4.0

It doesn't appear to "break" anything but is quite frequent.

FB 1.4 is still flaky. Hard to say where that's coming from.

dra8k
19 Aug 2009, 3:21 PM
I'm doing a quick eval on the JIT but I'm obviously missing something...

$JIT.depends['MessageView'] = {path: 'js/ivy/utility/'};
$JIT({module: 'MessageView',async:false,method:'GET'});
ivy.utility.MessageView.msg('Success!');

Should the $JIT call (line 2) block until the 'MessageView.js' is available?
I did have success using the Ext.ux.ModuleManager (async:false) directly under
the same scenario but I'd also would like to use dependency feature of the JIT.

extjs/3_0_0
basex-jit/3_5_1

Thanks!

hendricd
19 Aug 2009, 3:40 PM
I'm doing a quick eval on the JIT but I'm obviously missing something...

$JIT.depends['MessageView'] = {path: 'js/ivy/utility/'};
$JIT({module: 'MessageView',async:false,method:'GET'});
ivy.utility.MessageView.msg('Success!');

Should the $JIT call (line 2) block until the 'MessageView.js' is available?
I did have success using the Ext.ux.ModuleManager (async:false) directly under
the same scenario but I'd also would like to use dependency feature of the JIT.

extjs/3_0_0
basex-jit/3_5_1

Thanks!

Always use the inline callback(s), but the following are equivalent:



$JIT.depends['MessageView'] = {path: 'js/ivy/utility/'};

$JIT({async:false,method:'GET'}, 'MessageView', function(ok){
if(ok) ivy.utility.MessageView.msg('Success!');
});
and


$JIT({modulePath: 'js/ivy/utility/', async:false, method:'GET'}, 'MessageView');

//... Later on
$JIT.onAvailable('MessageView',
function(ok){
if(ok) ivy.utility.MessageView.msg('Success!');
else ivy.utility.MessageView.msg('Woops!');
});
and, finally (via ComponentMgr)


tabPanel.add({
title : 'Test Tab',
require : [{async:false,method:'GET'}, 'js/ivy/utility/MessageView'], //always synchronous (blocking)!
xtype : 'msgview'
});

tabPanel.doLayout();
and, get 3.5.2 from SVN. ;)

tigger2
24 Aug 2009, 6:25 PM
I just tracked down an obscure problem which I think I should share.

When using IE and the window.showModalDialog() function I started to get annoying dialogs stating:

"This page has an unspecified potential security risk. Would you like to continue?"

By trial and error I eventually tracked the issue down to the hasCookies property of the Ext.capabilities object in ext-baseex. The line is...


hasCookies : !!navigator.cookieEnabled ,It seems IE has an issue with this check if it is done within a dialog window

Commenting it out fixed the problem

hendricd
25 Aug 2009, 5:17 AM
I just tracked down an obscure problem which I think I should share.

When using IE and the window.showModalDialog() function I started to get annoying dialogs stating:

"This page has an unspecified potential security risk. Would you like to continue?"

By trial and error I eventually tracked the issue down to the hasCookies property of the Ext.capabilities object in ext-baseex. The line is...


hasCookies : !!navigator.cookieEnabled ,It seems IE has an issue with this check if it is done within a dialog window

Commenting it out fixed the problem

@tigger2 -- Thanks for the reports. Fixed in SVN/ZIP.

BlueCamel
9 Dec 2009, 8:14 PM
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();
}
}

BlueCamel
11 Dec 2009, 7:50 AM
I'm having an problem managing the created queue. I've tested on 3.0.3 and 3.1pre with the same results. I'm using the ext-basex v4.1 from SVN. $JIT is not loaded or in use.

If I call q.clear() or qm.removeQueue('parseQueue') the queue continues to fire. It looks like the q.requests[] array through firebug it is always empty no matter how many requests have been placed into the queue.

I suspect either requests are not getting put into the queue object correctly or I'm completely using this wrong. :)

Any hints? Am I using this correctly in my test case?



Ext.lib.Ajax.maxConcurrentRequests = (Ext.isIE) ? 1 : 2;
var qm = new Ext.lib.Ajax.QueueManager();
var q = qm.createQueue('parseQueue');

Ext.lib.Ajax.on('beforesend', function(){
console.info('beforesend: ', q);
});

for (var i=0; i<4; i++) {

// new request to be queued
var request = {
url: '/site/testqueue',
queue: 'parseQueue',
params: {request: i},
callback: function(request, success, result){
if (!Ext.lib.Ajax.activeRequests && !Ext.lib.Ajax.pendingRequests) {
console.warn('all requests complete!');
}
}
};

// issue the request
Ext.Ajax.request(request);
}

hendricd
11 Dec 2009, 1:21 PM
@BlueCamel,

Ext.lib.Ajax.queueManager is a singleton instance of the class Ext.lib.Ajax.QueueManager.

Your new instance of it, has no effect on the singleton used by Ext.lib.Ajax (also a singleton). :-?

BlueCamel
12 Dec 2009, 12:17 AM
@BlueCamel,

Ext.lib.Ajax.queueManager is a singleton instance of the class Ext.lib.Ajax.QueueManager.

Your new instance of it, has no effect on the singleton used by Ext.lib.Ajax (also a singleton). :-?

I'm completely lost on where you saw Ext.lib.Ajax.queueManager in my example. :) Did you mean Ext.lib.Ajax.Queue is a singleton instance of the class Ext.lib.Ajax.QueueManager?



Ext.lib.Ajax.maxConcurrentRequests = (Ext.isIE) ? 1 : 2;
var qm = new Ext.lib.Ajax.QueueManager();
qm.createQueue('parseQueue');

Ext.lib.Ajax.on('beforesend', function(){
console.info('beforesend: ', qm);
});

for (var i=0; i<4; i++) {

// new request to be queued
var request = {
url: '/site/testqueue',
queue: 'parseQueue',
params: {request: i},
callback: function(request, success, result){
if (!Ext.lib.Ajax.activeRequests && !Ext.lib.Ajax.pendingRequests) {
console.warn('all requests complete!');
}
}
};

// issue the request
Ext.Ajax.request(request);
}With this change I don't see what I expect either? I expect to see the qm object show the parseQueue with all the requests stacked in it.

I must be missing something basic here.... ? I'm trying for a simple pattern that will allow me to create a named queue, put things in the queue, and abort all pending requests in the queue.

I looked at doing something like qm.getQueue('parseQueue').add(request) instead of Ext.Ajax.request(request) but using the add() method just locks up the browser. I assumed that meant I was doing it really wrong instead of mostly wrong. :)

richgoldmd
5 Jan 2010, 4:15 AM
Doug,

Thanks for some excellent modules. I expect to license them shortly.

Do you have any comments on the efficiency of $JIT vs. concatenated/compressed (e.g. jsb2) files for medium-large apps?

For example, an app with multiple nested tabbed views, compressed code (exclusive of Ext) exceeding 500K, would you recommend a single compressed js over JIT? A user may not use every module every session, and some may be seldom used. In such a case do you recommend a hybrid approach?

I would appreciate your thoughts.

Again, thanks for some excellent work.

Rich

hendricd
6 Jan 2010, 5:07 AM
Doug,

Thanks for some excellent modules. I expect to license them shortly.

Do you have any comments on the efficiency of $JIT vs. concatenated/compressed (e.g. jsb2) files for medium-large apps?

For example, an app with multiple nested tabbed views, compressed code (exclusive of Ext) exceeding 500K, would you recommend a single compressed js over JIT? A user may not use every module every session, and some may be seldom used. In such a case do you recommend a hybrid approach?

I would appreciate your thoughts.

Again, thanks for some excellent work.

Rich

@Rich --

$JIT is designed to compliment alternate packaging strategies. Once you've decided what your packages will contain (and any dependencies) it's a simple matter to tell $JIT what they are. You can be as 'granular' as you wish.

As an example, this is the dependency matrix for the Demo (http://demos.theactivegroup.com)site:



/* Define our dependency table for ux module names */

(function(){

var ux= 'ux/', extux = 'lib/ext-3.1+/examples/ux/';

Ext.apply(
$JIT.depends , {
// JS source file | source location | Dependencies (in required load order)
'uxvismode' : {path: ux }
,'multidom' : {path: ux }
,'uxmedia' : {path: ux , depends: [ '@uxvismode']}
,'uxaudio' : {path: ux , depends: [ '@uxmedia']}
,'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: ['@multidom' , '@uxvismode'] }
,'mifmsg' : {path: ux , depends: [ '@miframe'] }
,'mifdd' : {path: ux , depends: [ '@miframe'] }
,'miframe' : {virtual : true, depends: [ '@mif'] }
});


$JIT.setMethod('DOM'); //<script> tags for debugging/viewing

//load the demo site startup scripts
$JIT(
{debug: true},
extux + 'ux-all',
ux + 'codelife',
ux + 'toolstips',
ux + 'shortcuts',
//'demos/workers/gears_init',
ux+'uxworkers',
'@uxflash',
'classes/demowin',
'startup'
);

})();

It is very granular in that modules can be swapped in/out as needed during development/testing, and reorganized later for deployment.

Packaged properly, your assets could be progressively loaded as needed, even from within Ext layouts:



tabs.setActiveTab(
tabs.add({
xtype: 'customgrid'
require : ['assets/customgrid', 'uxaudio', .... ],
title : 'To Do...'
})
);

richgoldmd
9 Jan 2010, 7:56 AM
Doug,

Allow me to suggest the following overrides to allow Ext-style form processing using JSONP:


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,
proxied: opts.proxied,
isJSON: opts.isJSON
};
}

,processResponse : function(response){
this.response = response;
if (Ext.isObject(response.responseJSON)) response.responseText = Ext.encode(response.responseJSON);

if(!response.responseText && !response.responseXML){
return true;
}
this.result = this.handleResponse(response);
return this.result;
}

});
This will allow form processing to work over a proxied request.

Converting responseJSON back to responseTEXT may be inefficient, but it works.

Thanks again for excellent add-ons.

Rich

Stju
10 Jan 2010, 7:35 PM
Hi!
Using basex for cross domain solution.
Sessions doesn't work anymore - e.g. session cookies headers are not applied anymore.
Secondly success method gets never called, despite server returns content and header with 200 response code..
basic example


Ext.Ajax.request({
url: 'http://mydomain/myscript',
method: 'POST',
success:mySuccessFunction,
disableCaching : true
});
Also setting Ajax parameters globally are ignored.. ?? So I should pass this configuration in every call..


Ext.Ajax.disableCaching = true;
Include order for basex is correct, and using latest available sources.

Secondly how this can be utilized for Ext.Direct calls?
I am missing something?

hendricd
11 Jan 2010, 7:43 AM
Hi!
Using basex for cross domain solution.
Sessions doesn't work anymore - e.g. session cookies headers are not applied anymore.
Secondly success method gets never called, despite server returns content and header with 200 response code..
...
Secondly how this can be utilized for Ext.Direct calls?
I am missing something?

Yes, details. ;)

Can you post an example of the request your actually trying to make?
Ext version?
Browser(s)?

Stju
11 Jan 2010, 8:13 AM
Hi, Doug!
Versions - Extjs - 3.1.0 , basex 4.1.
Browsers tested Firefox 3.5.7, Safari 4.0.4 , Local filesystem. Platform MAC.
Example as posted before:


Ext.Ajax.request({
url: 'http://xxxxxx.xxxxxxxxx.eu/scripts/generate.php',
method: 'POST',
success:mySuccessFunction,
disableCaching : true
});


Call is correctly processed as POST, and here are
Request Headers:


Host xxxxxx.xxxxxxxxx.eu
User-Agent Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 300
Connection keep-alive
X-Requested-With Ext.basex
Referer http://orchid/
Origin http://orchid


Response Headers:


Date Mon, 11 Jan 2010 15:45:45 GMT
Server Apache/2.2.8 (Ubuntu) PHP/5.2.4-2ubuntu5.7 with Suhosin-Patch
X-Powered-By PHP/5.2.4-2ubuntu5.7
Access-Control-Allow-Origin *
Access-Control-Allow-Methods POST, GET, OPTIONS
Access-Control-Allow-Headers x-requested-with
Access-Control-Max-Age 1728000
Set-Cookie lily=c7884eb8357b1beeb9297f26785783ea; path=/
Expires Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma no-cache
Content-Length 104
Keep-Alive timeout=15, max=97
Connection Keep-Alive
Content-Type text/javascript


What I am trying to do is porting my application to work locally and communicate with server where the database reside. Application works excellent when it is running from the same domain on the same web server, but cutting client side out and moving it to the client machine starts to make me some trouble ..

Includes: (added basex and JIT)


<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>
<script type="text/javascript" src="ext.ux2/basex/ext-basex-debug.js"></script>
<script type="text/javascript" src="ext.ux2/basex/jitx-debug.js"></script>


Remote script is executed, and data returned to client side.
No errors are thrown it just fails silently to call 'success'..

Next, when performing other calls to the same server all the calls should include data received in header Set-Cookie, as user is already authenticated.. This is also missing so resulting lost session data and inability to perform any tasks involved session management on server side , e.g login, privileges..

Since my last post I got a hard solution around Ext.Direct calls. As I am in development stage just directly changed the line in ext-basex-debug.js 779 from xdomain:false to xdomain:true because there is no way to pass such an information on runtime for Ext.direct ... At least this part is working now :)

hendricd
11 Jan 2010, 8:29 AM
@Stju -- Some things to keep in mind.

Microsoft's x-domain implementation (IE8 only) does not support ANY header access.

So if cross-browser support is an issue for you, you don't have a solution (with headers involved)

your xdomain:true hack should really be implemented as:


xdomain: Ext.isIE8Also, one or the other -- not both:



<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>
<script type="text/javascript" src="ext.ux2/basex/ext-basex-debug.js"></script>
<script type="text/javascript" src="ext.ux2/basex/jitx-debug.js"></script>

Stju
11 Jan 2010, 8:37 AM
No cross browser issue wont matter in my case, as Ie is damn slow for Javascript anyway, app is intended to be run only in WebKit based browser.
I removed suggested line, still same effect.. anything else to look for?

hendricd
11 Jan 2010, 8:45 AM
No cross browser issue wont matter in my case, as Ie is damn slow for Javascript anyway, app is intended to be run only in WebKit based browser.
I removed suggested line, still same effect.. anything else to look for?

@Stju --
Nothing else comes to mind. It should be automatic.

What about a including failure callback? Or are you always optimistic? :-?

Is your service publicly accessible for a test? (That's only way I could possibly examine your case.)

richgoldmd
11 Jan 2010, 8:51 AM
Doug,

Ext 3.1, basex/Jit 4.1 -

Using $JIT - If I specify a .css resource as a dependency:


Ext.apply($JIT.depends, {
'test1.css' : { path: css_path},
'test : { path: ext_ux, depends: [ '@test1.css' ] },
...
});

When the @test resource is loaded, the css is loaded, but not applied. Any way to make the css apply automatically when it is a required resource? Am I coding this correctly?

Also, the path option seems to be relative to the path specified in setModulePath. How do you handle code outside of that tree?

Rich

richgoldmd
11 Jan 2010, 9:43 AM
Another question about $JIT:

It seems that in order to cache requests for js, they are loaded via the DOM, and therefore asynchronously. (e.g. when Ext.loader.disableCaching=false; )

Is there a way to take advantage of caching but still maintain synchronous loading?

Otherwise, code needs to be changed to act upon onAvailable or similar mechanisms...

hendricd
11 Jan 2010, 9:50 AM
Doug,

Ext 3.1, basex/Jit 4.1 -

Using $JIT - If I specify a .css resource as a dependency:


Ext.apply($JIT.depends, {
'test1.css' : { path: css_path},
'test : { path: ext_ux, depends: [ '@test1.css' ] },
...
});When the @test resource is loaded, the css is loaded, but not applied. Any way to make the css apply automatically when it is a required resource? Am I coding this correctly?

Also, the path option seems to be relative to the path specified in setModulePath. How do you handle code outside of that tree?

Rich

@Rich --
Where you've got a mixed bag of resource urls, you should not setModulePath at all, and specify them in the depends.paths directly.

I have pondered the auto-loading strategy for css, but many will want to load (cache) several CSS themes and apply them "on their own terms":

I just uploaded to SVN a change to jit.js that permits inline callback definitions right in the depends array (you could use that for all sorts of things):




var applyStyle = function(success){

//apply the newly loaded style sheet once automatically
var module = 'test1.css';
success && $JIT.onAvailable(module , function(ok){

if(ok && !$JIT.getModule(module).element){ //already in the document?
$JIT.applyStyle(module);
}

});

};

Ext.apply($JIT.depends, {
'test1.css' : { path: css_path},
'test' : { path: ext_ux, depends: [ '@test1.css' , applyStyle] }, //inline callback
...
});

hendricd
11 Jan 2010, 9:59 AM
Another question about $JIT:

It seems that in order to cache requests for js, they are loaded via the DOM, and therefore asynchronously. (e.g. when Ext.loader.disableCaching=false; )

Is there a way to take advantage of caching but still maintain synchronous loading?

Otherwise, code needs to be changed to act upon onAvailable or similar mechanisms...

@Rich --

$JIT manages all requests for you -- that is, asynch (default) requests are managed synchronously(sequentially) in the proper dependency order, since it would be difficult for you to do that on your own.

If you really wanted to block your browser during that process:


$JIT.setMethod('GET');
or
$JIT({method:'GET', async : false}, 'moduleA', .... , callbackFn);


But, as I said, there is really no need to do that. The callbacks are not fired until the resource is loaded anyway (synchronous behaviour using asynch requests). ;)

Stju
11 Jan 2010, 10:00 AM
I made local testing example and discovered that:
This WORKS as intended:


Ext.onReady(function(){

Ext.USE_NATIVE_JSON = true;
Ext.Ajax.request({
url: 'http://xxxxx.xxxx.eu/scripts/test.php',
success: function ( result, request ) {
Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', result.responseText);
}
});

});


This way, NOT:


Ext.onReady(function(){

Ext.USE_NATIVE_JSON = true;
Ext.Ajax.request({
url: 'http://xxxxx.xxxx.eu/scripts/test.php',
success: processData,
failure: processFailure
});

function processData (result, request) {
console.log('Success:'+response.responseText);
}

function processFailure (result, request) {
console.log('Failure:'+response.responseText);
}

});


Regarding Ext.Ajax.disableCaching - by default, this is set only for GET requests, not for POST. So I mark this as resolved :)

Now still need to solve a session and cookie mystery..
Have anice Day!

richgoldmd
11 Jan 2010, 10:08 AM
How about adding an parameter to the options for css, e.g. autoApply: true to automatically apply css if it is loaded?

My other question about async requests has to do with NOT using callbacks, however, that seems to be the best way to be agnostic with regards to loading mechanisms.

hendricd
11 Jan 2010, 11:38 AM
How about adding an parameter to the options for css, e.g. autoApply: true to automatically apply css if it is loaded?

My other question about async requests has to do with NOT using callbacks, however, that seems to be the best way to be agnostic with regards to loading mechanisms.

@Rich --
Thanks, i'll jot that (autoApply) down for the next cycle. ;) (But understand that autoApply would be evaluated every time that dependency was. Have to be careful that a new <link> is not created every time that occurs. IOW: It's likely only beneficial during page startup. Behaving that way in a theme-switching scenario would likely create a mess.)

I would again, advise against a synch request in that fashion, because it literally freezes your browser (think spinning logos that come to a halt).

richgoldmd
11 Jan 2010, 3:34 PM
Doug,

I have found that with the default DOM method, if a .css is in the dependency chain, the loading stops with the .css and the callback or onClassAvailable is never called.


Ext.apply($JIT.depends, {
'test1.css' : { path: ext_ux },
'test.js': { path: ext_ux, depends: [ '@test1.css' ] },
});

$JIT('@test.js', function(ok) {
alert("test.js loaded: " + ok); // never called, and test.js is never loaded
});


-Rich

hendricd
11 Jan 2010, 7:18 PM
Doug,

I have found that with the default DOM method, if a .css is in the dependency chain, the loading stops with the .css and the callback or onClassAvailable is never called.


Ext.apply($JIT.depends, {
'test1.css' : { path: ext_ux },
'test.js': { path: ext_ux, depends: [ '@test1.css' ] }, // never called, and test.js is never loaded
});

$JIT('@test.js', function(ok) {
alert("test.js loaded: " + ok);
});
-Rich

@Rich --
The @ designation is only really used within the depends Array to denote another series of dependent modules. You should stick with :


$JIT('test', function(ok) {
alert("test.js loaded: " + ok);
}); .. in your scripts.

richgoldmd
11 Jan 2010, 7:35 PM
@Rich --
The @ designation is only really used within the depends Array to denote another series of dependent modules. You should stick with :


$JIT('test', function(ok) {
alert("test.js loaded: " + ok);
}); .. in your scripts.

Yes I see what you mean. Even with the change, the chain stops when it hits a css resource. I am using extensions in my dependencies because some of my files have multiple '.' in the filename, and your code only adds the extension if there is no '.' in the filename. So for consistency, they all get the extension.

In any case, the callback never fires if there is a css file in the dependency chain.

hendricd
13 Jan 2010, 4:55 AM
@Rich -- I'll run a couple tests here and get back to you. ;)

larryaubstore
5 Feb 2010, 6:54 AM
Doug,

I have found that with the default DOM method, if a .css is in the dependency chain, the loading stops with the .css and the callback or onClassAvailable is never called.

-Rich

I have the same problem. I'm oblige to use "GET" method.

I've another question: I'm not able to use Firebug with $JIt. They are not catched by Firebug. Is there a way to intercept errors with $JIT ?

hendricd
6 Feb 2010, 7:53 AM
@Rich, @Larry --

Can either or both post a sample of the your request chain?

I'm be adding some new CSS loading options that should address that, but I'd like to see your edge cases.

larryaubstore
8 Feb 2010, 11:43 AM
I'm not sure to understand. Could you clarify a bit ?
Do you want the content of a variable ? or ajax request chain (NET console in Firebug) ?

This is my tree of dependencies (not working with DOM method. Have to put GET ):
,'Test' : {path: JS + Views + Design, depends:['@TestView.css'] }
,'TestView.css' : {path: CSS }



***********************************

To make it work, I've to do something like this: (working with DOM and GET )

,'Test' : {path: JS + Views + Design }
,'TestView.css' : {path: CSS }
and after to apply the style somewhere else in the code:

$JIT( '@TestView.css' );
$JIT.onAvailable(['@TestView.css'], function() {
$JIT.applyStyle('TestView.css');
});

richgoldmd
8 Feb 2010, 12:06 PM
Mine looks like this:


Ext.apply($JIT.depends, {
'Ext.ux.grid.CellActions.css' : { path: ux }
,'Ext.ux.grid.CellActions.js' : { path: ux, depends: [ '@Ext.ux.grid.CellActions.css' ] }
,'schedule.js': { depends: [ '@controls.js', '@Ext.ux.grid.CellActions.js', '@util.selectors.js' ] }
The load chain seems to be aborted without calling the the function if I do something like:


$JIT('schedule.js', function(ok) {
... // do something
});

Ideally, I would like there to be a way to include the css in the resource chain that causes it to be automatically applied. The $JIT(file)... call should really be agnostic to the needs of the dependencies, IMHO. If I need schedule.js, and it needs a CSS applied because of a dependency, it seems that it should occur automatically, without hard coding the $JIT call or using some conditional to do so. So in my example, the 'Ext.ux.grid.CellActions.js' resource could indicate that the CSS application is required.

How about something like:

,'Ext.ux.grid.CellActions.js':{ path: ux, depends: [ '@Ext.ux.grid.CellActions.css' ], autoApplyCSS: ['Ext.ux.grid.CellActions.css'] }

hendricd
8 Feb 2010, 4:37 PM
Mine looks like this:


Ext.apply($JIT.depends, {
'Ext.ux.grid.CellActions.css' : { path: ux }
,'Ext.ux.grid.CellActions.js' : { path: ux, depends: [ '@Ext.ux.grid.CellActions.css' ] }
,'schedule.js': { depends: [ '@controls.js', '@Ext.ux.grid.CellActions.js', '@util.selectors.js' ] }
The load chain seems to be aborted without calling the the function if I do something like:


$JIT('schedule.js', function(ok) {
... // do something
});

Ideally, I would like there to be a way to include the css in the resource chain that causes it to be automatically applied. The $JIT(file)... call should really be agnostic to the needs of the dependencies, IMHO. If I need schedule.js, and it needs a CSS applied because of a dependency, it seems that it should occur automatically, without hard coding the $JIT call or using some conditional to do so. So in my example, the 'Ext.ux.grid.CellActions.js' resource could indicate that the CSS application is required.

How about something like:

,'Ext.ux.grid.CellActions.js':{ path: ux, depends: [ '@Ext.ux.grid.CellActions.css' ], autoApplyCSS: ['Ext.ux.grid.CellActions.css'] }


@rich, @larry -- I'm working on an enhancement to JIT to permit this:


Ext.apply($JIT.depends, {
'Ext.ux.grid.CellActions.css' : { path: ux, method : 'DOM' }
,'Ext.ux.grid.CellActions.js' : { path: ux, depends: [ '@Ext.ux.grid.CellActions.css' ] }
,'schedule.js': { depends: [ '@controls.js', '@Ext.ux.grid.CellActions.js', '@util.selectors.js' ] }

..which would permit the implied CSS resource to be loaded immediately via the 'method:"DOM"' (in contrast, a method:'GET' would load and cache the CSS, but not apply it immediately). It would also allow definition of load options on a 'per-depends' basis.

For the moment, you'll have to manage CSS in the currently advertised method -- separately.

Stay tuned... ;)

richgoldmd
8 Feb 2010, 5:01 PM
Thanks Doug -

The proposed change looks great.

Rich

TigersWay
10 Feb 2010, 7:11 PM
Hi,
I'm trying to send cross-domain a big chunk of data (could reach 300Ko), and I only hope to get an "OK" answer from the receiving domain.
I am coding on both side, extjs on sending server, PHP on receiving one.

I've tried different ways, but still looking for the "good" one.... Any idea?



...
<link rel="stylesheet" type="text/css" href="/ExtJS/resources/css/ext-all.css" />
<script type="text/javascript" src="/ExtJS/ext-base.js"></script>
<script type="text/javascript" src="/ExtJS/ext-all.js"></script>
<script type="text/javascript" src="/ExtJS/ext-basex.js"></script>
<script type="text/javascript">
Ext.onReady(function(){

Ext.Ajax.request({
url: 'http://xxx.com/tryBengal/',
//url: 'http://localhost/tryBengal/',
//isJSON: true,
//proxied:{debug:true, callbackParam: 'callback'},
method:'POST',
params:{
foo:'bar',
data:'0xffd8ffe000104a4649...........77198cc662ffa9bf43fffd9'
},
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
console.dir(obj);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});

});
</script>
</head>...

The "method:'POST'" is working in local mode, but turns to "OPTIONS" in remote.
Did I forget something?


Thanks for any help or some way to go!
Ben

hendricd
13 Feb 2010, 9:53 AM
@Ben -- Your upload attempt likely violates the browser's "same-origin (http://en.wikipedia.org/wiki/Same_origin_policy)" policy. Firefox will send the "OPTIONS" action first, to see if your upload-target supports it.




Ext.Ajax.request({
url: 'http://xxx.com/tryBengal/',
//url: 'http://localhost/tryBengal/',

TigersWay
13 Feb 2010, 6:10 PM
@Ben -- Your upload attempt likely violates the browser's "same-origin (http://en.wikipedia.org/wiki/Same_origin_policy)" policy. Firefox will send the "OPTIONS" action first, to see if your upload-target supports it.


I was aware of that, but could not find anywhere around here a good example on how to deal with that :(
Anyway, I built my own simple php/curl proxy and it's now working fine! I can "POST" my 300ko without any trouble.

Hope I'll find time later to come back to try to understand how I am supposed to take advantage of ext-basex.

Thanks

wki01
18 Feb 2010, 1:39 AM
Hello

I'm trying to run Multipart Ajax with Lotus Domino.
But the event OnPart does not receive properly the response .

I can not understand where is the problem ...

Here is a small testcase:
http://partnerzone2.pragma.it/works/test.nsf/test?OpenPage

Can you give me a hand?

Thanks

wki01
18 Feb 2010, 5:19 AM
Now works:
The code for the lotus domino agent is:



Option Public
Option Declare

Sub Initialize()
Print |Access-Control-Allow-Origin: *|
Print |Content-Type: multipart/mixed; boundary="agile"|
Print "--agile";
Print |Content-Type: text/html|
Print ""
Print "111111111111111111111111111111111"
Print "--agile";
Print |Content-Type: text/html|
Print ""
Print "222222222222222222222222222222222"
Print "--agile";
Print |Content-Type: text/html|
Print ""
Print "333333333333333333333333333333333"
Print "--agile--";
End Sub

Wilmar
4 Mar 2010, 2:46 AM
I'm showing 30 root items per page on the grid, with a total of 149 pages. But when I click on an item, the PagingToolbar seems to zoom in on the tree starting from that item. That is, the pager shows there's only 1 or 2 pages, depending on the number of child items of the item I clicked on.

The same happens with the Adjacency List example. I set the items per grid page to 5, so that 2 pages are needed to show all root items. But when I click on an item, the pager shows there's only 1 page available.

The TreeGrid is a wonderful piece of equipment, but this shouldn't happen. I'll go dive in the TreeGrid.js file to see if I can tinker with it.

Cheers,
Wilmar.

Wilmar
4 Mar 2010, 4:17 AM
Well, I can see now what's happening. If I deselect the item, the paging toolbar's scope reverts to the entire set of root items instead of the children of the selected item.

Can I somehow disable this automatic selection or the change of the paging toolbar when an item is selected?

faith wins
9 Sep 2010, 1:14 PM
I have posted this same question on another thread, but I think this is a better thread for the question. So, here I go again: 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