Extjs:重定向到其他页面

时间:2015-04-08 18:30:57

标签: javascript extjs extjs4

这是我的代码:

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()

                            }
                        });
                    }
                }]
            }

        ]

    });
});

每件事情都很棒:

我真正需要的是在成功提醒后加载另一个ExtJS页面。

我尝试了Window.Location.assign('abc.js'),但它无效。

Extjs的新手。

请帮忙

3 个答案:

答案 0 :(得分:3)

问题1 (不与Ext-JS相关):它不是Window.Location,它是window.location

问题2 (Ext-JS问题):Ext.Msg.alert对话框是异步的。第location.assign('www.google.com')行将在显示对话框后立即运行,而不是在解除对话后

要等到按下按钮后,你必须传递一个回调。

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

答案 1 :(得分:1)

您可以尝试:

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

或只是:

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

甚至:

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

但是,如果您将.js文件的名称作为参数传递,它将使浏览器读取并显示它。也许你需要一个卡片布局并在ExtJS应用程序中放置另一个视图?

如果您有卡片布局,您的链接将是您要显示的项目(卡片)的“#”+ itemId。

答案 2 :(得分:0)

这似乎是对浏览器如何执行JS的误解。您不想将浏览器重定向到新的JS,而是在当前页面上加载新的JS。这可以通过告诉浏览器使用脚本标记获取JS来实现:

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

更常见的是,您已经在页面上加载了abc.js,并且需要在其上调用方法,或者转换到Ext Panel或类似的东西。例如:

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()

                            }
                        });
                    }
                } ]
            }

            ]

        });
    }
});