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

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

Solution 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.

Comments

[pherris]

when you say a new Extjs page - you want to go to a different URL entirely, or you want to do something specific in Ext (like show a different panel). I doubt you really want to show the users the contents of abc.js, but maybe I'm wrong?

[sparsh610]

yeah it just read the file on the browser , how ever i want to load ui as per the code in file.

[sparsh610]

yeah it just read the file on the browser , how ever i want to load ui as per the code in file.

[sparsh610]

working great if all code exist in one file.... but if i keep abcPanel in other file .... it is givin error .... Cannot read property 'appendChild' of null

[pherris]

You don't have document.body?

[Ivaylo Marinovski]

For this you don't need "window.location". You can put the component in this file on top. One way is by putting it in a card layout and saying it will become the active item. See this: stackoverflow.com/questions/5383301/…