Sencha touch 2.0 не может установить активный элемент в окне просмотра - PullRequest
0 голосов
/ 09 ноября 2011

Я сейчас играю с Sencha Touch 2.0, и у меня возникла следующая проблема.

Я пытаюсь установить activeitem в моем окне просмотра, но в соответствии с моей консолью отладки функция не распознается. Да, мой макет = карта.

Может кто-нибудь сказать мне, как я могу изменить свой взгляд!

Вот мой код

здесь все пошло не так:

// ЭТО ГДЕ НЕПРАВИЛЬНО

                    App.view.Viewport.setActiveItem("App.view.user.Index",{
                        type: "slide",
                        direction: "left"
                    });

я тоже пробовал

this.App.view.Viewport.setActiveItem("App.view.user.Index",{
                        type: "slide",
                        direction: "left"
                    });

но это выдает ту же ошибку: setActiveItem не существует:

Uncaught TypeError: Object function () {
                    return this.constructor.apply(this, arguments);
                } has no method 'setActiveItem'

Остальной код при необходимости: App.js

Ext.Loader.setConfig(
{ 
    enabled: true ,
    paths:{
        //set application path 
        App: 'app'
    }

});

// Main application entry point
Ext.application({
    name: 'App',  
        //Define all models and controllers in the application
        //Views do not have to be defined these are defined in the controllers

        //Models 

        //Controllers
        controllers: ['User'],
        //automatically create a viewport(template) instance/object  app/Viewport.js
        autoCreateViewport: true,
    launch: function() {              


    }
});

Viewport

Ext.define('App.view.Viewport', {
    extend: 'Ext.viewport.Default',
    xtype: "Viewport",


    config: {


        fullscreen:true,
        layout:     "card",
        items:[
            {
                xtype: "panel",
                scrollable:true,
                items: [
                    {
                        xtype:"toolbar",
                        title:"Test app"
                    },
                    {
                        xtype:"UserLoginView",
                        id: "LoginForm"
                    }
                ]
            }
        ]
    }

});

Контроллер, где все происходит

//Define controller name 
Ext.define('App.controller.User', {
    //Extend the controller class
    extend: 'Ext.app.Controller',
    views: ['user.Login','user.Index'],
    refs: [
        {
            selector:"#userLogin",
            ref: 'LoginUserLogin'
        },
        {
            selector:"#userPassword",
            ref: "LoginUserPassword"
        },
        {
            selector: "Viewport",
            ref: "Viewport"
        },
        {
            selector: "UserIndex",
            ref: "UserIndex"
        }
    ],
    //define associated views with this controller


    init: function()
    {
        //do something and setup listeners

        //setup listeners 
        this.control({
            '#UserLoginButon' : {
                tap : this.login

            }
        });
    },

    //handle
    login : function  (object)
    {
        //iniate loading screen for user
        var loadingScreen = new Ext.LoadMask(Ext.getBody(),{msg: ""});
        loadingScreen.show();


        //get form values 
        var username = this.getLoginUserLogin().getValue();
        var password = this.getLoginUserPassword().getValue();

        //check for empty fields
        if(username == "" || password == "")
        {
            loadingScreen.hide();
            Ext.Msg.alert("Foutmelding","Je dient alle velden in te vullen.");
        }
        else
        {
            Ext.Ajax.request(
            {
                url: '../backend/users/login/'+username+'/'+password,
                method: 'post',
                failure : function(response)
                {
                    loadingScreen.hide();
                    data = Ext.decode(response.responseText);
                    Ext.Msg.alert('Login Error', data.errorMessage, Ext.emptyFn);
                },
                success: function(response, opts) 
                {
                    data = Ext.decode(response.responseText);

                    if (data == true)
                    {
                        loadingScreen.hide();
                        Ext.Msg.alert("ingelogd!","welkom");

                        //THIS IS WHERE IT GOES WRONG 
                        App.view.Viewport.setActiveItem("App.view.user.Index",{
                            type: "slide",
                            direction: "left"
                        });




                    } else 
                    {
                        loadingScreen.hide();
                        Ext.Msg.alert("Foutmelding","Gebruikersnaam of wachtwoord klopt niet.");
                    }
                }
            });




        }
         console.log(App);









    },
    loginRequest : function (username, password)
    {

    }



});

Ответы [ 2 ]

2 голосов
/ 11 ноября 2011

Согласно этому сообщению на форуме Sencha http://www.sencha.com/forum/showthread.php?150668-ExtJS4-to-ST2 вы не должны вызывать Ext.Viewport напрямую в Sencha Touch 2, поэтому я попытался создать свой собственный класс Viewport, и это сработало, вот что я сделал:

app.js

Ext.Loader.setConfig({enabled:true});
Ext.application({
        name: 'MyApp',
        controllers: ['MyController'],
        autoCreateViewport: true,
        launch: function() {
            console.log('launch!');
        }
    });

вид / Viewport.js

Ext.define('MyApp.view.Viewport', {
extend: 'Ext.Container',
xtype: 'my-viewport',
config: {
    layout: {
        type: 'card',
        animation: {
            type: 'slide',
            direction: 'left'
        }
    },
    fullscreen: true,
    items: [{xtype: 'my-list'}, {xtype: 'my-detail'}]
}
});

controller / MyController.js

Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
views: ['Navbar', 'List', 'Detail'],
init: function() {
    console.log('MyController init');

    this.control({
        'button[go]': {
                tap: function(btn) {
                    viewport = Ext.ComponentQuery.query('my-viewport');
                    target = Ext.ComponentQuery.query(btn.go);
                    viewport[0].setActiveItem(target[0]);
                }
            }
    });
}
});

Этот контроллер будет в основном искать любую кнопку с параметром "go" и установить значение ActiveAtem () в это значение, поэтому вам просто нужно указать кнопке перейти к типу x вашего вида, например:

{
    xtype: 'button',
    text: 'detail view!',
    go: 'my-detail',
    width: '20%'
}
1 голос
/ 09 ноября 2011

Нельзя ссылаться на панель по имени класса, она не ссылается на ее экземпляр.Используйте селекторы вашего контроллера или Ext.ComponentQuery.query(selector) (возвращает массив)

Вы могли бы (должен? Я сделал) сделать что-то вроде этого:

var indexPanel = Ext.create('App.view.user.Index');
Ext.Viewport.add(indexPanel)
Ext.Viewport.setActiveItem(indexPanel)
...