Question

我有一个主视图，我在其中创建三个选项卡，在单击登录选项卡上打开登录表单登录成功后，我需要在相同的登录tabpanel中加载另一个视图（登陆）..我使用以下代码行加载视图，但它不会在相同的tabpanel中打开它，而是作为独立视图加载。如何在同一个tabpanel中打开它。

主要应用视图

Ext.define("SenchaTest.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar',


    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                    title: 'Home',
                    iconCls: 'home',
                    html: [
                        '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch (2.0.0)</h2>'
                    ].join("")
                },



                {
                title: 'Log In',
                    iconCls: 'user',
                    xtype: 'formpanel',
                    url: 'contact.php',
                    layout: 'card',
            id:"loginForm",
                items: [
                    {
                        xtype: 'fieldset', 
            title: 'Log In',    
            id:"submitForm",                        
                        instructions: 'Enter username and password to login.',
                        defaults: {
                        required: true,
                        labelAlign: 'left',
                        labelWidth: '45%'
                    },
            items: [
                    {
                        xtype: 'textfield',
                        name : 'username',
                        label: 'User Name',
            allowBlank:false, 
                        useClearIcon: true              
                    }, {
                        xtype: 'passwordfield',
                        name : 'password',
                        label: 'Password',
            allowBlank:false, 
                        useClearIcon: false

                    },{
                            xtype: 'button',
                            text: 'Submit',
                            ui: 'confirm',
                        id: 'btnSubmitLogin'
                            //  this.up('formpanel').submit();
                            }]

                    }  

                ]
            }

        ]
    }
});

控制器代码

Ext.define("SenchaTest.controller.LoginForm", {
    extend : "Ext.app.Controller",
    config : {
        refs : {
            btnSubmitLogin : "#btnSubmitLogin",
            LoginForm : '#loginForm'
        },
        control : {
            btnSubmitLogin : {
                tap : "onSubmitLogin"
            }
        }
    },
    onSubmitLogin : function(btn) {
    alert("onSubmitLogin");
        console.log("onSubmitLogin");
        var values = this.getLoginForm().getValues();
        //alert(values.username);
        //alert(values.password);

         Ext.util.JSONP.request({ 

    url:'http://localhost:8092/returnjson.ashx',
                params:{                    callback:'callback',uname:values.username,password:values.password}, 
                callbackKey: 'callback', 
                success: function (result,request) 
                {     
                    if(result.status==true)
                    {
                     alert("Welcome " + result.UserName);

                                                          Ext.Viewport.setActiveItem(Ext.create('SenchaTest.view.Landing'));



                    }
                    else
                    {
                    alert("Username or Password is incorrect"); 
                    return;
                    }
                    console.log(result.UserName);

                    console.log(result);
                    alert(result); 

                    // Handle error logic 
                    if (result.error) { 
                        alert(response.error); 
                        return; 
                    } 
                } 
            }); 
    },
    launch : function() {
        this.callParent();
        console.log("LoginForm launch");
        Ext.Viewport.add(Ext.create('SenchaTest.view.Landing'));

    },
    init : function() {
        this.callParent();
        console.log("LoginForm init");
    }
});

登录登陆后加载视图

Ext.define("SenchaTest.view.Landing", {
    extend: "Ext.Container",
    xtype: 'landingScreen',
    requires: [
        "SenchaTest.view.Main"       
    ],
    config: {
        html: "Welcome to my app"  
    }
});

我用过......

Ext.Viewport.setActiveItem(Ext.create('SenchaTest.view.Landing'));

加载着陆视图，但它不会在同一个标签中加载，而是作为独立页面加载。请帮忙。

Answer 1

以下代码允许您使用“替换”功能扩展Sencha Touch，该功能允许您在同一个面板中动态交换两个视图组件（我相信您正在尝试这样做）： http://www.sencha.com/forum/showthread.php?134909-Replace-component-function&langid=4

另一种解决方案（不推荐）是创建第三个但隐藏的选项卡面板（“登陆”），然后在成功登录时创建并显示它，同时隐藏登录选项卡面板。

在第一个面板中单击按钮后，在同一个选项卡面板中打开另一个视图

1 个答案: