Ext.require([
    'Ext.Panel',
    'Ext.Button',
    'Ext.Toolbar',
    'Ext.util.JSONP',
    'Ext.Ajax'
]);

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,

    onReady: function() {
        var tpl = new Ext.XTemplate(
            '<tpl for=".">' +
                '<tpl for="card"><div class="day">{n} - {r}</div></tpl>' +
                '</tpl>'
        );

        var makeAjaxRequest = function() {
            Ext.getBody().mask('Loading...', 'x-mask-loading', false);
            Ext.Ajax.request({
                url: 'test.json',
                success: function(response, opts) {
                    Ext.getCmp('content').update(response.responseText);
                    Ext.getCmp('status').setTitle('Static test.json file loaded');
                    Ext.getBody().unmask();
                }
            });
        };

        var makeJSONPRequest = function() {
            Ext.getBody().mask('Loading...', 'x-mask-loading', false);
            Ext.util.JSONP.request({
                url: 'http://www.usename.ru:7001/bank/products/6',
								//url: 'cards.json',									
                callbackKey: 'callback',
                params: {
                    key: '23f6a0ab24185952101705',
                    // palo alto
                    q: '94301',
                    format: 'json',
                    num_of_days: 5
                },
                callback: function(result) {
                    var cards = result.cards;
                    if (cards) {
                        var html = tpl.apply(cards);
                        Ext.getCmp('content').update(html);
                    }
                    else {
                        alert('AAAAAAAa!!!');
                    }
                    Ext.getCmp('status').setTitle('Yes!!!');
                    Ext.getBody().unmask();
                }
            });
        };

        Ext.create('Ext.Panel', {
            fullscreen: true,
            id: 'content',
            scroll: 'vertical',
            html: 'This example can use either JSONP or AJAX to retrieve data.',
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                items: [{
                    text: 'JSONP1',
                    handler: makeJSONPRequest
                }, {
                    xtype: 'spacer'
                }, {
                    text: 'XMLHTTP',
                    handler: makeAjaxRequest
                }]
            }, {
                id: 'status',
                xtype: 'toolbar',
                docked: 'bottom',
                title: 'Tap a button above.'
            }]
        });
    }
});