Sencha touch 2.0無法在視口上設置activeitem

Question

我正在玩sencha touch 2.0，我遇到以下問題。

我想在我的視口上設置activeitem，但根據我的調試控制檯該功能沒有被識別。是的，我的佈局=卡。

有人可以告訴我如何改變我的看法！

這裏是我的代碼

這是它GOED錯誤：

//這是哪裏出了問題

    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不存在：

如果需要210

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() {    


    } 
}); 

視窗

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) 
    { 

    } 



}); 

Answer 1

根據這個帖子在論壇煎茶你http://www.sencha.com/forum/showthread.php?150668-ExtJS4-to-ST2不應該撥打內線。視口直接在煎茶觸摸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'}] 
} 
}); 

控制器/ 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]); 
       } 
      } 
    }); 
} 
}); 

這個控制器基本上會尋找任何按鈕與 「走出去」 的參數和setActiveItem（），以該值，所以你只要必須告訴按鈕去您的視圖的xtype，如下所示：

{ 
    xtype: 'button', 
    text: 'detail view!', 
    go: 'my-detail', 
    width: '20%' 
} 

Answer 2

您不能通過類名來引用面板，它不會引用它的實例。用你的控制器選擇或Ext.ComponentQuery.query(selector)（返回數組）

你可以（應該我做？）做這樣的事情：

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