I'm writing a sencha touch app using sencha architect. Because my app do lot of ajax request, most of it need to send 'token' in request header for authentication. So I think of create child class base on Ext.Ajax which always has 'token' in request header. Then I can use this child class without care of the header.
MyApp.override.Ajax.request({ ... })
I try define this in app/override/Ajax.js
Ext.define('Myapp.override.Ajax', {
override: 'Ext.Ajax',
headers: {
'token': 'test'
}
});
I also set this as 'requires' in Application. But get error when try to call
Myapp.override.Ajax.request({ ... })
Seem Myapp can not locate .override package (MyApp.override is undifined)
How to let MyApp know override package or what is the correct/best way to do this.
A quick example is very appreciated. Thank you very much.
Update info:
override file location: app\override\Ajax.js
html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
var Ext = Ext || {};
Ext.theme = {
name: "Default"
};
</script>
<script src="sencha-touch-all-debug.js"></script>
<link rel="stylesheet" href="resources/css/sencha-touch.css">
<script src="app/override/Ajax.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
app.js file
Ext.Loader.setConfig({
});
Ext.application({
requires: [
'MyApp.override.Ajax'
],
views: [
'ContactDetailView'
],
name: 'MyApp'
...
App can start without error, but when call MyApp.override.Ajax.request : Cannot read property 'Ajax' of undefined , mean MyApp.override is undefined
Update
Here something news, it better but not working yet.
Ext.define('MyApp.Ajax', {
extend: 'Ext.data.Connection',
singleton: true,
request: function( options ) {
this.constructor(options, options.url);
console.log(options);
options.header = {'Token':'mytoken'};
this.callParent( options );
}
});
and error when try MyApp.Ajax.request() . I'm sure that options.url is exist in options by check the log
[ERROR][Ext.data.Connection#request] No URL specified
I add extend from constructor function
constructor : function (config, url)
{
config = config || {};
//config.url = 'google.com';
this.initConfig(config);
this.callParent(config);
},
Error just disappear when I remove comment from config.url = 'google.com'; but it comes that the config.url there is ajax request url but local file url ??? I see from chrome console and network ?
GET file:///C:/MyApp/assets/www/google.com?_dc=1370855149720
Please help. thanks.
Finally, this is work with me
Ext.define('MyApp.Ajax', {
extend: 'Ext.data.Connection',
singleton: true,
request: function( options ) {
options.headers = {
Token: 'mytoken',
};
this.callParent( [options] );
}
});
And this simple do what i want too, great.
Ext.Ajax.on('beforerequest', (function(conn, options, eOpts) {
options.headers = {
Token: 'mytoken',
};
}), this);
You don't seem to agree with yourself about the name of your override class:
- Myapp.override.Ajax
- Lunex.override.Ajax
- Myapp.override.data.proxy.Ajax
Which one is it? Pay attention to this, the Loader won't go easy about it...
Anyway, you seem a bit confused about override and extend.
extend does create a new class from the parent class, with the modifications you've specified. Then you can use the class you defined, like you're trying to do.
override, on the other hand, applies the modification to the existing class. In this case, the class name is only used for the require statement, and by the loader. No actual class is created. So, in your example, the namespace MyApp.override is not defined, hence the error. Nevertheless, whenever you use Ext.Ajax, your custom header should be sent. Provided you're manager to load your file, that is ;p
Now, your case is a bit special because Ext.Ajax is a singleton instance of Ext.data.Connection. See its code, there's not much in there. And while overriding a singleton can make sense, extending from it would be disturbing.
So, what you were probably trying to do is that:
Ext.define('Myapp.Ajax', {
extend: 'Ext.data.Connection',
headers: {
'token': 'test'
}
});
So that you can do:
Myapp.Ajax.request({ ... });
Whether the best choice here is to override or to extend is a tough question. I'm glad you didn't ask it!
Why not using the config 'defaultHeaders' in your extended class? In that way it's always added to your headers.
http://docs-origin.sencha.com/touch/2.4.0/apidocs/#!/api/Ext.data.Connection-cfg-defaultHeaders
From the source of Ext.data.Connection
setupHeaders: function(xhr, options, data, params) {
var me = this,
headers = Ext.apply({}, options.headers || {}, me.getDefaultHeaders() || {}),
contentType = me.getDefaultPostHeader(),
jsonData = options.jsonData,
xmlData = options.xmlData,
key,
header;
来源：https://stackoverflow.com/questions/16971028/sencha-touch-override-ext-ajax