3

senchatouchを使ってモバイルアプリを作っています。ユーザーがログインすると、このアプリが何をするのか、ホームビューが表示されます。これhome viewには2つのボタンがあります。これらの2つのボタンは、ユーザーをそれぞれのビュー、つまりAppointmentsとに移動しMessagesます。これらの2つのビューには、下部に3つのタブボタンがありますHome, Appointments, Messages。home viewホームボタンは、2つのボタンで構成されるにユーザーを戻します。一方Appointments、Messagesボタンは彼を自分の見方に導きます。

これが私のhome view

ここに画像の説明を入力してください

ご覧のとおり、このビューにはタブがありません。以下は、このビューのコードです

config: {
    layout: {
        type: 'vbox'
    },
    items: [
        {
            xtype: 'titlebar',
            title: 'Home',
            docked: 'top'
        },
        {
            xtype: 'button',
            cls: 'messagesBtn',
            itemId: 'msg'
        },
        {
            xtype: 'button',
            cls: 'appointmentsBtn',
            itemId: 'appoint'
        }
    ],

    listeners: [
        {
            delegate: '#appoint',
            event: 'tap',
            fn: 'launchAppointmentView'
        }
    ]
},
launchAppointmentView: function () {
    this.fireEvent('launchAppointments');
}

ユーザーがクリックしたら、どちらに移動するかButton 2を言いましょうAppointments View。次に、ビューが彼に表示されます

ここに画像の説明を入力してください

以下のこのビューのコード

config: {
    tabBarPosition: 'bottom',

    items: [
        {
            title: 'Appointments',
            iconCls: 'home',

            styleHtmlContent: true,
            scrollable: true,

            items: {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Appointments'
            },

            html: ["Appointments View"].join("")
        }
    ]
}

このビューが読み込まれると、表示できるのは[予定]のタブが1つだけです。この3つのビューすべてに3つのタブが表示されます。他のタブを表示するにはどうすればよいですか？

以下は私のメッセージビューです

ここに画像の説明を入力してください

これがそのコードです

config: {
    tabBarPosition: 'bottom',

    items: [
        {
            title: 'Messages',
            iconCls: 'home',

            styleHtmlContent: true,
            scrollable: true,

            items: {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Messages'
            },

            html: ["Messages View"].join("")
        }
    ]
}

タブにメッセージボタンがないため、このビューが表示されず、このビューにまったくアクセスできません。繰り返しますが、これらのビューのすべてのタブボタンを追加するにはどうすればよいですか。また、各ビューをクリックすると、そのビューに移動します。

4

1 に答える 1

0

タブパネルの例を次に示します。

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});

問題は、アイテムリストに追加アイテムを追加していないことです。タブ、ホーム、連絡先を追加する必要があります。画面ごとに3つのタブが必要なので、ファイルごとに3つのアイテムがあります。

イベントについては、コントローラーを作成し、イベントをリッスンする必要のある各アイテムの参照を作成し、それぞれのコントロールを設定するのが好きです。その方法についてサポートが必要な場合はお知らせください。始めるために、以下に簡単な例を示します。

Ext.define('Analytics.controller.events.InstType', {
    extend: 'Ext.app.Controller',   

    config: { 
        refs: {
            instType: {
            selector: '#instType'
        }
    }
},

init: function() {
    // Start listening for toggle events on the 3 segmented button panels   
    this.control({   
        'instType': { 'toggle': function(container, button, pressed) {
                this.onGraphType(container, button, pressed);
            }
        }
    }); 
},

// note: these functions are called on both the buttons selected and the one that became unselected
// the 'pressed' param inidicates whether this is the selected button or not.
onGraphType: function (container, button, pressed) {
    if (pressed) { ..do stuff.. }
});
于 2013-03-13T16:35:03.070 に答える