Wie man von einer Ansicht zu einer anderen Ansicht mit viewport in sencha?

In meiner Anwendung habe ich ein eine Ansicht mit topbar und einige Felder. In diese Taste, wenn ich auf den login button will ich verschieben auf eine andere Ansicht (Dashboard), die einen tabview. Also dafür bin ich mit viewport. Aber ich bin nicht in der Lage sich zu bewegen von einer Ansicht zu einer anderen. Hier ist mein code:

app.js

Ext.Loader.setConfig({
    enabled : true
});

Ext.application({
    views : ['TitlePanel', 'dashboardpanel'],
    models : [ 'MyModel', 'wishlistmodel' ],
    stores : [ 'name', 'wishlistsummarystore' ],
    name : 'MyApp',
    controllers : [ 'MyController' ],

    launch : function() {

        var Login = {
                xtype: 'login'
        }
        var Dashboard = {
                xtype: 'dashboard'
        }
        Ext.Viewport.add([Login, Dashboard]);
    }

});

Titlepanel.js

   Ext.define('MyApp.view.TitlePanel', {
extend: 'Ext.Panel',
alias: 'widget.login',
    config: {
        ui: 'light',
        items: [
            {
                xtype: 'panel',
                id: 'LoginScreen',
                items: [
                    {
                        xtype: 'image',
                        docked: 'left',
                        height: 130,
                        id: 'Logoimage',
                        ui: '',
                        width: 170,
                        src: 'app/images/logo.png'
                    },
                    {
                        xtype: 'titlebar',
                        cls: 'mytitlebar',
                        docked: 'top',
                        height: 100,
                        ui: 'blue',
                        items: [
                            {
                                xtype: 'label',
                                height: 36,
                                html: 'Teritree Business Portal',
                                id: 'title',
                                margin: 20,
                                style: 'font: normal Bold 20px droid sans; color:#AB3951',
                                width: 396
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        id: 'LoginPanel',
                        layout: {
                            align: 'center',
                            type: 'vbox'
                        },
                        items: [
                            {
                                xtype: 'label',
                                html: 'Login with Teritree Business Credentials',
                                id: 'Loginlabel',
                                margin: 20,
                                style: 'font: normal Bold 30px droid sans',
                                ui: 'dark'
                            },
                            {
                                xtype: 'fieldset',
                                height: 84,
                                itemId: 'LoginField',
                                margin: '40 0 0 0',
                                width: 500,
                                items: [
                                    {
                                        xtype: 'textfield',
                                        id: 'user',
                                        style: 'font: Droid Sans',
                                        label: 'Login User id',
                                        labelWidth: '40%'
                                    },
                                    {
                                        xtype: 'textfield',
                                        height: 35,
                                        id: 'password',
                                        label: 'Password',
                                        labelWidth: '40%'
                                    }
                                ]
                            },
                            {
                                xtype: 'button',
                                height: 40,
                                id: 'LoginBtn',
                                margin: 20,
                                ui: 'orange',
                                width: 180,
                                text: 'Login'
                            },
                            {
                                xtype: 'label',
                                html: 'If you don\'t have an account yet: Signup at <a href="url">business.teritree.com</a> ',
                                id: 'signup',
                                margin: 20,
                                style: 'font: normal 24px droid sans'
                            }
                        ]
                    }
                ]
            }
          ]
        }
    });

dashboardpanel.js

    Ext.define('MyApp.view.dashboardpanel', {
extend: 'Ext.Panel',
alias: 'widget.dashboard',
    id:'dashboardpanel',
    fullscreen: true,
    tabBarDock: 'bottom',
    items: [
            mainWindow   
           ]
});
    var mainWindow = new Ext.Panel({
    title:'main',
    iconCls:'home',
    layout:'fit',
    scroll: 'vertical',
    dockedItems: [toolbar,bigButton]
});

var bigButton = new Ext.Button({
    dock: 'bottom',
    text: 'I should be at the bottom'
});

var toolbar = new Ext.Toolbar({
    dock: 'top',
    title: 'Main',
    items: [
        {
            text: 'Reload',
        }
    ]
});

MyContrller.js

    Ext.define('MyApp.controller.MyController', {
    extend : 'Ext.app.Controller',
    config : {
        refs : {
            LoginScreen : '#Login',
            dashboardscreen : '#dashboardpanel'
        },

        control : {
            "#LoginBtn" : {
                tap : 'onLoginButtonTap'
            }
        }
    },

    slideLeftTransition: { type: 'slide', direction: 'left' },

    onLoginButtonTap : function(button, e, options) {
           Ext.Viewport.animateActiveItem(Dashboard, this.slideLeftTransition);
    }

});

btw : Wenn Sie mit ST2 (welche weiß ich nicht, denn Sie hat die Frage mit ST und ST2) es ist gute Praxis, erstellen Sie eine Komponente (z.B. ein panel) mit Ext.create('Ext.Panel',{...}); und nicht mit neuen Ext.Panel({...});

InformationsquelleAutor Arindam Mukherjee | 2012-07-13

Hey ich bin in der Lage, dieses problem zu lösen, schließlich. Weil iwas falsche Referenzen in den controller..hier ist der controller-code:

Ext.define('MyApp.controller.MyController', {
extend : 'Ext.app.Controller',
config : {
    refs : {
        TitlePanel : 'login',
        dashboardpanel : 'dashboard'
    },

    views : [
             'TitlePanel',
             'dashboardpanel'
         ],

    control : {
        "#LoginBtn" : {
            tap : 'onLoginButtonTap'
        }
    }
},

slideLeftTransition: { type: 'slide', direction: 'left' },

onLoginButtonTap : function(button, e, options) {

    Ext.Viewport.setActiveItem(this.getDashboardpanel(), this.slideLeftTransition);
}

});

InformationsquelleAutor Arindam Mukherjee

1
```
Ext.Viewport.setActiveItem(1);
```
PS: Bitte beachten Sie die viewport Fall.

Ich bearbeitet meine Frage. nun bin ich nicht immer alle Fehler. Ich fügte hinzu, eine viewport.js Klasse. Und versuchen zu zeigen, die Bildschirme auf. Aber es ist mir weißer Bildschirm. Wo bin ich falsch??

InformationsquelleAutor Andrea Cammarata
1

Hey @Arindam einfach in Ihre MyController-Datei wie diese,
```
Ext.define('myapp.controller.MyController', {
    extend : 'Ext.app.Controller',

    config : {
       refs : {
           LoginScreen: '#Login',
           dashboardscreen : '#Dashboard'
       },

       control : {
            "#LoginBtn": {
                tap : 'onLoginButtonTap'
            }
       }
    },

    onLoginButtonTap: function(button, e, options) {
         Ext.getCmp('dashboardpanel').show('slide', true)
         Ext.getCmp('loginpanel').hide()
    }
});
```
Und Sie haben einige Fehler in dashboardpanel.js Datei.

Ich hoffe, das hilft 🙂

Aber für meinen Fall login-screen kommt weiß..
Was ??????????
Ich habe die app.js..nun es kommt. Aber in app.js muss ich schreiben den Namen der alle Ansichten Recht???? Und nun, wie kann ich bewegen auf dashboard-Bildschirm..Ihren code verwenden, ist es möglich.
Nun habe ich Ihnen gezeigt, wo Sie haben, um die änderungen an den Controller. Bitte. Anschauen MyController. Nur, dass Ihr dashboardpanel.js - Datei ist es falsch. Bitte. Oder, was wollen Sie?. Ich verstehe dich nicht. Bitte.
Bitte versuchen Sie, diese Ext.getCmp(idPanelMain).setActiveItem(Ext.getCmp(idPanelShow), {type: 'slide', direction: 'right'}). Bitte.

InformationsquelleAutor hekomobile
0

Ich würde vorschlagen, Sie verwenden Ext.navigation.View.
Sie können einfach im viewport app.js dann im viewport hinzufügen navigation-Ansicht, auf, dass die navigation anzuzeigen, drücken Sie können Sie TitlePanel, und dann klicken Sie auf die Schaltfläche Formular in der TitlePanel, drücken Sie einfach Ihre dashboardpanel.

Kann man einfach den code ändern, und geben Sie mir..da ich versucht habe mit der navigation anzeigen, aber nicht in der Lage, das zu tun.

InformationsquelleAutor Zaraki

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.