Geek asks and answers

Sencha touch override ext.ajax

I am writing a sencha touch application using the sencha architect. Since my application executes many ajax requests, most of them need to send a “token” to the request header for authentication. Therefore, I am thinking of creating a base of child classes on Ext.Ajax, which always has a “token” in the request header. Then I can use this child class without worrying about the header.

MyApp.override.Ajax.request({ ... })

I am trying to define this in app / override / Ajax.js

Ext.define('Myapp.override.Ajax', {
  override: 'Ext.Ajax',
  headers: {
      'token': 'test'
  }
});

I also set this as “required” in the application. But get an error when you try to call

MyApp.override.Ajax.request({ ... })

Seem Myapp cannot find .override package (MyApp.override unifined)

How to let MyApp know the override package or what is the right / best way to do it.

A quick example is much appreciated. Thank you very much.

Update info:

: app\override\Ajax.js

html :

<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

Ext.Loader.setConfig({

});

Ext.application({

requires: [
    'MyApp.override.Ajax'
],
views: [
    'ContactDetailView'
],
name: 'MyApp'
...

, MyApp.override.Ajax.request: Ajax undefined, MyApp.override - undefined

- , , .

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

MyApp.Ajax.request(). , options.url ,

[ERROR][Ext.data.Connection#request] No URL specified 


constructor : function (config, url)
{
    config = config || {};
//config.url = 'google.com';
    this.initConfig(config);
    this.callParent(config);
},

, config.url = 'google.com'; config.url ajax url url ??? ?

GET file:///C:/MyApp/assets/www/google.com?_dc=1370855149720

, . .

+1
3

,

Ext.define('MyApp.Ajax', {    
    extend: 'Ext.data.Connection',

    singleton: true,

    request: function( options ) {
        options.headers = {
            Token: 'mytoken',
        };
        this.callParent( [options] );
    }
});

, , .

Ext.Ajax.on('beforerequest', (function(conn, options, eOpts) {  
    options.headers = {
        Token: 'mytoken',
    };
}), this);
+1

, , :

  • Myapp.override.Ajax
  • Lunex.override.Ajax
  • Myapp.override.data.proxy.Ajax

? , ...

, override extend.

extend . , , , .

override, , . require . . , MyApp.override , , . , , Ext.Ajax, . , : p

, Ext.Ajax singleton Ext.data.Connection. , . , .

, , , , , :

Ext.define('Myapp.Ajax', {
    extend: 'Ext.data.Connection',
    headers: {
        'token': 'test'
    }
});

:

Myapp.Ajax.request({ ... });

, - . , !

+1

Why not use the 'defaultHeaders' configuration in the extended class? Thus, it is always added to your headlines.

http://docs-origin.sencha.com/touch/2.4.0/apidocs/#!/api/Ext.data.Connection-cfg-defaultHeaders

From source 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;
0
source

More articles:


All Articles