How to URL-encode HTTP query parameters in Sencha ExtJS or Touch app with Ext.urlEncode

This example shows how to URL-encode HTTP query parameters using Ext.urlEncode in a Sencha ExtJS (or Touch) application:

onRecordedStreamsPanelItemClick: function(grid, record, item, index, e, eOpts) {
    var filename = record.data.filename;

    // url-encode the filename before sending it
    var encodedFilename = Ext.urlEncode({ recordingFilename: filename });

    Ext.Ajax.request({
        url: '/server/playRecording?' + encodedFilename,
        method: 'GET',
        success: function(conn, response, options, eOpts) {
            var result = VP.util.Util.decodeJSON(conn.responseText);
            if (result.success) {
                // ignore
            } else {
                VP.util.Util.showErrorMsg(result.msg);
            }
        },
        failure: function(conn, response, options, eOpts) {
            // TODO get the 'msg' from the json and display it
            VP.util.Util.showErrorMsg(conn.responseText);
        }
    });
}

That’s a simple example with one parameter, but you should just be able to add more parameters to the dictionary to encode them, like this:

Ext.urlEncode({ 
    foo: 'foo',
    bar: 'bar',
    baz: 'baz'
})