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);