Sencha Touch 2 - переключение просмотров - PullRequest
Новая
       10

Sencha Touch 2 - переключение просмотров

1 голос
/ 31 марта 2012

Я начал использовать Sencha Touch 2 MVC, но не могу решить проблему ниже. У меня есть код Ext.application: 

Ext.application({
    name: 'ProjectName',
    appFolder: APP_URL + "app",
    enableQuickTips: true,
    extend: 'Ext.app.Controller',
    phoneStartupScreen: 'LOGO.png',

    controllers: ['Site'],

    views: ['Viewport_login', 'Viewport_reg'],
    layout: 'vbox',



    launch: function() {
        //bootstrap

        Ext.create("Ext.Container", {
            requires: [

            ],
            items: [
                Ext.create("ProjectName.view.Viewport_login", {}),
                Ext.create("ProjectName.view.Viewport_reg", {})

            ]
        });


       return true;

    }

});

просмотр кода 'Viewport_login': 

Ext.define('ProjectName.view.Viewport_login', {
    extend: 'Ext.Panel',

    requires: [
        'ProjectName.view.Login',
        'ProjectName.view.Header'
    ],


    fullscreen: true,

    initialize: function() {
        console.log("init viewpor_login");
        Ext.create("Ext.Container", {
            //fullscreen: true,
            style: 'background-color: white;',
            layout: 'vbox',
            fullscreen: true,
            scrollable: true,


            items: [
                {
                    xtype: 'Bheader'
                },              
                Ext.create("widget.login")
            ]
        });

        this.callParent();
    }

});

Просмотр кода 'Viewpoer_reg': 

Ext.define('ProjectName.view.Viewport_reg', {
extend: 'Ext.Panel',

requires: [
    'ProjectName.view.Reg',
    'ProjectName.view.Header'
],


fullscreen: true,

initialize: function() {
    console.log("init viewpor_reg");
    Ext.create("Ext.Container", {
        //fullscreen: true,
        style: 'background-color: white;',
        layout: 'vbox',
        fullscreen: true,
        scrollable: true,


        items: [
            {
                xtype: 'Bheader'
            },  
            Ext.create("widget.reg")
        ]
    });

    this.callParent();
}

});

просмотр кода 'Header': 

Ext.define('ProjectName.view.Header', {
extend: 'Ext.Panel',
alias: 'Bheader',
xtype: 'Bheader',

requires: [
    'Ext.Img'
],

initialize: function() {
    console.log("header inited");
},

config: {
    cls: 'bg-holder',
    items: [
        Ext.create("Ext.Img", {
            src: BASE_URL + 'assets/images/header3.png',
            height: 35,
            width: "100%",
            style: "background-position: center 0px; "
        })
    ]
}
});

И, наконец, код контроллера 'Site': 

Ext.define('ProjectName.controller.Site', {
extend: 'Ext.app.Controller',   


config: {
    views: ['Viewport_login', 'Viewport_reg']

},


init: function() {
    console.log('Init site controller');
    // Start listening for events on views


    this.control({
        // example of listening to *all* button taps
        '#login_button': {          
            tap: function () {

                // HOW CAN I SWITCH TO 'VIEWPORT_REG' VIEW?
            } 
        }           
    });

},

renderRegFOrm: function() {

},

onLaunch: function() {
    console.log('onLaunch site controller');
},
});

Во-первых, у меня сейчас проблема: «Заголовок» не появляется, если я загружаю оба представления («Viewport_login», «Viewport_reg») в контейнер, созданный в функции запуска Ext.application. Кто-нибудь может мне помочь, почему?

Во-вторых, в коде контроллера вы можете увидеть раздел this.control (.... Как я могу переключиться на другое представление здесь?

1 Ответ

1 голос
/ 01 апреля 2012

При просмотре вашего кода выясняется, что вы хотите, чтобы только один из логина и регистрации появлялся одновременно. Я бы порекомендовал посмотреть на метод setActiveItem для контейнеров и переключить представления таким образом.

Я не поняла ваш первый вопрос. Кроме того, не понял, почему у вас есть классы widget.login и widget.reg, когда у вас уже есть представления с именами login и reg (вы не можете просто использовать их?)

...