Extjs : Redirecting to other page

Question

Here is my code :

Ext.onReady(function() {
    Ext.create('Ext.panel.Panel', {
        title: 'Results',
        width: 600,
        height: 400,
        renderTo: Ext.getBody(),
        items: [{
                xtype: 'container',
                layout: 'form',
                style: 'width : 200px;margin-top: 10px ',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    id: 'name',
                    style: 'width : 100px;'
                }]
            }, {
                xtype: 'container',
                layout: 'form',
                style: 'width : 200px;margin-top: 10px ',
                items: [{
                    xtype: 'datefield',
                    fieldLabel: 'Date',
                    id: 'date'

                }]
            }, {
                xtype: 'container',
                layout: 'form',
                style: 'width : 200px;margin-top: 10px ',
                items: [{
                    xtype: 'textfield',
                    vtype: 'email',
                    fieldLabel: 'EmailId',
                    id: 'email'

                }]
            }, {
                xtype: 'container',
                layout: 'form',
                style: 'margin-top: 10px ',
                items: [{
                    xtype: 'button',
                    text: 'signup',
                    float: 'right',
                    handler: function() {

                        Ext.Ajax.request({
                            method: 'GET',
                            url: 'rest/helloworld/',
                            disableCaching: false,
                            success: function() {
                                Ext.Msg.alert('', 'success');
                                Window.Location.assign('abc.js');

                            },
                            failure: function() {
                                Ext.Msg.alert('', 'failed');

                            },
                            params: {
                                name: Ext.getCmp('name').getValue(),
                                email: Ext.getCmp('email').getValue(),
                                date: Ext.getCmp('date').getValue()

                            }
                        });
                    }
                }]
            }

        ]

    });
});

Every thing is going great :

What I exactly need is to load another ExtJS page after success alert.

I tried Window.Location.assign('abc.js') but it is not working.

New to Extjs.

Please help

Answer 1

Problem 1 (Not Ext-JS related): It's not Window.Location , it's window.location

Problem 2 (Ext-JS problem): Ext.Msg.alert dialog is asynchronous. The line location.assign('www.google.com') will run immediately after the dialog is displayed, not after it is dismissed

To wait until after the button pressed, you have to pass it a callback.

 Ext.Msg.alert('','success', function() {
     // Note that window is not necessary here, just location.assign will do
     window.location.assign('abc.js');
 });

Answer 2

You can try:

window.location.assign("http://www.google.com");

or just:

location.assign("http://www.google.com");

or even:

location.href = "http://www.google.com";

However if you pass the name of a .js file as an argument it will just make the browser read and display it. Perhaps you need a card layout and put another view on top in your ExtJS application?

If you have a card layout your link will be "#" + itemId of the item(card) you want to display.

Answer 3

This seems like a misunderstanding of how the browser will executes JS. You don't want to redirect the browser to the new JS, but rather load the new JS on the current page. This can be accomplished by telling the browser to fetch the JS with a script tag:

var newJs = document.createElement('script');
newJs.type = "text/javascript";
newJs.src = 'abc.js';
document.body.appendChild(newJs);

More commonly you would have already loaded abc.js on your page and would have a method you need to invoke on it, or transition to a Ext Panel or something like that. For example:

Ext.application({
    name : 'Fiddle',

    launch : function() {
        //this panel might be the contents of abc.js
        var abcPanel = Ext.create('Ext.panel.Panel', {
            title : 'Results',
            width : 600,
            height : 400,
            renderTo : Ext.getBody(),
            hidden: true
        });

        Ext.create('Ext.panel.Panel', {
            title : 'Results',
            width : 600,
            height : 400,
            renderTo : Ext.getBody(),
            items : [ {
                xtype : 'container',
                layout : 'form',
                style : 'width : 200px;margin-top: 10px ',
                items : [ {
                    xtype : 'textfield',
                    fieldLabel : 'Name',
                    id : 'name',
                    style : 'width : 100px;'
                } ]
            }, {
                xtype : 'container',
                layout : 'form',
                style : 'width : 200px;margin-top: 10px ',
                items : [ {
                    xtype : 'datefield',
                    fieldLabel : 'Date',
                    id : 'date'

                } ]
            }, {
                xtype : 'container',
                layout : 'form',
                style : 'width : 200px;margin-top: 10px ',
                items : [ {
                    xtype : 'textfield',
                    vtype : 'email',
                    fieldLabel : 'EmailId',
                    id : 'email'

                } ]
            }, {
                xtype : 'container',
                layout : 'form',
                style : 'margin-top: 10px ',
                items : [ {
                    xtype : 'button',
                    text : 'signup',
                    float : 'right',
                    handler : function() {
                        Ext.Ajax.request({
                            method : 'GET',
                            url : 'rest/helloworld/',
                            disableCaching : false,
                             success: function(){
                                 abcPanel.show();

                             },
                            failure: function(){
                                Ext.Msg.alert('','failed');

                            },
                            params : {
                                name : Ext.getCmp('name').getValue(),
                                email : Ext.getCmp('email').getValue(),
                                date : Ext.getCmp('date').getValue()

                            }
                        });
                    }
                } ]
            }

            ]

        });
    }
});