2

私のアプリケーションでは、トップバーといくつかのフィールドを持つ 1 つのビューがあります。このボタンで、ログインボタンをクリックすると、タブビューである別のビュー (ダッシュボード) に移動します。したがって、このためにビューポートを使用しています。しかし、あるビューから別のビューに移動することはできません。これが私のコードです：

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

ダッシュボードパネル.​​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',
        }
    ]
});

MyController.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);
    }

});
4

4 に答える 4

3

ねえ、私は最終的にこの問題を解決することができます. コントローラーで間違った参照を与えているため、コントローラーのコードは次のとおりです。

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

});

于 2012-07-16T11:37:34.853 に答える
1 
Ext.Viewport.setActiveItem(1);

PS: ビューポートのケースに注意してください。

于 2012-07-13T14:13:49.357 に答える
1

ちょっと@Arindamは、このようにMyControllerファイルに入れてください。

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

また、dashboardpanel.js ファイルにいくつかのバグがあります。

これが役立つことを願っています:)

ここに画像の説明を入力

ここに画像の説明を入力

于 2012-07-14T06:44:33.047 に答える
0

これに使用することをお勧めしますExt.navigation.View。app.js にビューポートを追加してから、ビューポートにナビゲーション ビューを追加し、そのナビゲーション ビューで TitlePanel をプッシュしてから、TitlePanel のフォーム ボタンをクリックして、dashboardpanel をプッシュするだけです。

于 2012-07-13T10:25:51.843 に答える