2

コンテナ内にいくつかのカスタムボタンを作成した sencha touch 2 でインデックスページを作成しました

Ext.define('ov_app.view.Main', {
extend: 'Ext.Container',
requires:[
    'ov_app.view.Eligibelity',
],
xtype: 'main',
css:[{
            "path": "default-theme.css",
    }],
config:{
    scrollable: true,
    items: [
        {           xtype: 'panel',
                    margin:10,
                    items:[
                        {
                            xtype:'button',
                            margin: '0 0 8 0',
                            cls:"main_navigation",
                            style:'background-color:#000',
                            action: 'push-view',
                        },{
                            xtype:'button',
                            margin: '0 0 8 0',
                            cls:"main_navigation",
                        },{
                            xtype:'button',
                            cls:"main_navigation",
                        }
                    ]
           }]
    }
});

これらのボタンは次のようになります

ここに画像の説明を入力

オレンジ色のボタンをクリックすると、新しいビューが表示されます。

私は ext.Navigation ビューを試しましたが、それは私が望むものではありません。ボタンにイベントリスナーを追加する必要がありますか、それとも何か他のことをしなければなりませんか

コントローラーフォルダー main.js に新しいコントローラーを作成しました

Ext.define('ov_app.controller.Main', {
extend: 'Ext.app.Controller',
    config:{
        control: {
            'button[action=push-view]': {
                tap: 'pushViewFunction'
            }
        },
    },

pushViewFunction: function() {
    Ext.Viewport.add({
        xtype: 'Eligibelity' 
    });
}
});

と私の新しいビューEigibelity.jsコード

`
Ext.define('ov_app.view.Eligibelity', {
    xtype : 'Eligibelity',

    config: {
        layout: 'vbox',
        cls: 'big',

        items: [
            {
                xtype: 'title',
                title: 'Twitter Search'
            }
        ]
    }
    });

` また、私の app.js コード

` Ext.Loader.setPath({ 'Ext': 'touch/src', 'ov_app': 'app' });

    Ext.application({
        name: 'ov_app',

        requires: [
        'Ext.MessageBox'
    ],

views: ['Main', 'Eligibelity'],
controllers: ['Main'],

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('ov_app.view.Main'));
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version.     Reload now?",
        function(buttonId) {
            if (buttonId === 'yes') {
                window.location.reload();
            }
        }
    );
}
});

`

4

2 に答える 2

2

参照用にボタンにを追加できactionます。

{
    xtype: 'button',
    action: 'push-view'
}

次に、コントローラーで、ユーザーが次のようにボタンをタップすると、新しいビューをプッシュできます。

control: {
   'button[action=push-view]': {
        tap: 'pushViewFunction'
    }
},

pushViewFunction: function() {
     Ext.Viewport.add({
         xtype: 'newView' // This is the xtype of new view you want to push 
     });
}

編集

control内部configブロックを配置する必要があります。

config: {    
    control: {
       'button[action=push-view]': {
            tap: 'pushViewFunction'
        }
    }
},

pushViewFunction: function() {
     Ext.Viewport.add({
         xtype: 'newView' // This is the xtype of new view you want to push 
     });
}

編集2：

setActiveItemまたはを使用できますanimateActiveItem：

 pushViewFunction: function() {
    Ext.Viewport.animateActiveItem({xtype: 'Eligibelity'}, {type:'slide', direction: 'left'});
}

これは、Working Demo投稿されたすべてのコードに基づいています。

于 2013-04-23T06:05:59.110 に答える