3

Sencha Touchでビューを切り替えるにはどうすればよいですか？現在、新しいビューが表示されていますが、既存のビューに重なっているように見えます。私は前のものを隠すか、それを破壊する必要があると思います。使用することを考えてExt.getCmp("noteslist")いましたが、現在のコンテナを取得しようとすると「undefined」が返されます。これは、ビュー間を移動するための推奨される方法ですか、それともより良い方法がありますか？

アプリ

Ext.application({
    name: "NotesApp",
    controllers: ["NotesController", "TestController"],
    views: ["NotesListContainer"],

    launch: function () {

        var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
        Ext.Viewport.add(notesListContainer);
    }
});

コントローラ：

Ext.define("NotesApp.controller.NotesController", {
    extend: "Ext.app.Controller",
    views: [        
        "TestListContainer"
    ],
    config: {
        refs: {
            newNoteBtn: "#new-note-btn",
            saveNoteBtn: "#save-note-btn",
        },
        control: {
            newNoteBtn: {
                tap: "onNewNote"
            },          
            saveNoteBtn: {
                tap: "onSaveNote"
            }
        }
    },
    onNewNote: function () {
        console.log("onNewNote");
    },
    onSaveNote: function () {
        console.log("onSaveNote");      
        Ext.Viewport.add({xtype:'testlist'}).show();    
            // How do I remove the current one?....         
    },
    launch: function () {
        this.callParent();
        console.log("launch");
    },
    init: function () {
        this.callParent();
        console.log("init");
    }
});

意見

Ext.define("NotesApp.view.NotesListContainer", {
    extend: "Ext.Container",   
    config: {
        items: [{
            xtype: "toolbar",
            docked: "top",
            title: "My Notes",
            items: [{
                xtype: "spacer"
            }, {
                xtype: "button",
                text: "New",
                ui: "action",
                id:"new-note-btn"
            }, {
                xtype: "button",
                text: "Save",
                ui: "action",
                id:"save-note-btn"
            }]
        }]
    }
4

2 に答える 2

6

Ext.Viewport.addを使用すると、コンポーネントをビューポートに追加するだけで、アクティブなアイテムとして設定することはできません。Ext.Viewport.setActiveItemを使用してコンポーネントを追加し、1回の呼び出しでアクティブアイテムとして設定できます。

例：

//1
Ext.Viewport.setActiveItem({xtype:'testlist'});

//or 2
//Create and add to viewport
Ext.Viewport.add({xtype:'testlist'});
//set active item by index
Ext.Viewport.setActiveItem(1);

//or 3
var list = Ext.create('NotesApp.view.NotesListContainer', {id : 'noteList'});
Ext.Viewport.add(list);
 .....
//In place where you need to show list
Ext.Viewport.setActiveItem(list);

ビュー間の切り替えをアニメーション化する場合は、setActiveItemの代わりにanimateActiveItem（list、{type：'slide'、direction：'right'}）を使用します。

これが、Ext.Viewportやカードレイアウトのコンテナを操作する方法です。実際のアプリケーションビューでは、アプリの一部（コントローラー内、アプリ内、ビュー内）で作成し、他の部分でアクティブとして設定できます。この場合、何らかの方法でリストへのリンクを取得し、それをsetActiveItemで使用する必要があります。

于 2012-11-27T19:47:20.160 に答える
1

setActiveItemを使用するテクニックとナビゲーションビューを使用するテクニックの2つのテクニックがあります。

ナビゲーションビュー

アクティブアイテムメソッドの設定：

var view=Ext.Viewport.add({xtype: 'testlist'});
Ext.Viewport.setActiveItem(view);
view.show(); //This is additionally done to fire showAnimation
于 2012-11-28T05:32:44.423 に答える