Question

我正在使用sencha touch创建一个应用程序，我想为我的视图main.js创建一个卡片布局看起来像这样

Ext.define('ov_app.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
css:[{
            "path": "default-theme.css",
    }],
    config: {
    layout:{
        type: 'card'
    },
    items: [
        {
            layout:'vbox',
            items:[
                {
                    xtype: 'HeaderBar',
                },{
                    xtype: 'home_button',
                    flex:1
                },{
                    xtype: 'main_navigation',
                    flex:1
                },{
                    xtype:'FooterBar',
                }
            ]
        },
        {
            html: "Second Item"
        },
        {
            html: "Third Item"
        },
        {
            html: "Fourth Item"
        }

        ],
}
});`

ok hare是我的app.js代码

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

Ext.application({
name: 'ov_app',

requires: [
    'Ext.MessageBox'
],
profiles: ['Phone', 'Tablet', 'Desktop'],
views: ['Main', 'Eligibelity', 'HeaderBar', 'ListNavigation', 'FooterBar',    'home_button', 'main_navigation'],
stores: ['NavigationItems'],
models: ['Items'],

controllers: ['MainController'],
icon: {
    '57': 'resources/icons/Icon.png',
    '72': 'resources/icons/Icon~ipad.png',
    '114': 'resources/icons/Icon@2x.png',
    '144': 'resources/icons/Icon~ipad@2x.png'
},

isIconPrecomposed: true,

startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
},

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

    // Initialize the main view
    ov_app.container = Ext.Viewport.add(Ext.create('ov_app.view.Main'));
},
onUpdated: function() {
    /*
       'onUpdated' is triggered after the following cases happen:
        - Your application's HTML 5 manifest file (cache.manifest) changes. 
        - You have changes in any of your JavaScript or CSS assets listed in
        the "js" and "css" config inside app.json. 
    */
    Ext.Msg.confirm(
        "Update",
        "Reload now?",
        function() {
            window.location.reload();
        }
    );
}
});`

现在好了，当我在我的控制台中输入ov_app.container.setActiveItem（1）时，它会显示所需的卡片布局，但是如何点击组件呢？我是否必须在该组件的处理程序中声明某些内容并为该选项卡事件声明一个控制器。

编辑1

main_navigation.js代码whare我想应用点击事件

Ext.define('ov_app.view.main_navigation', {
xtype:'main_navigation',
extend:'Ext.Container',
requires:[
    'Ext.Img',
],
config:{
    layout:'vbox',
    defaults:{
    cls:"main_navigation",                          
            margin: '0 10 8 10',
            border: 0,
            flex:1,
    },
    items:[
        {
            xtype:'container',
            items:[{
                xtype:'container',
                html: 'tab me',
                centered: true,
                cls: 'main_navigation_heading',
               listeners:[{
                           tap:function(){
                               tap event listner function defination }
                         }]
            },{
                xtype: 'image',
                src: 'resources/images/visa.png'
            }]
        }
    ]
}
});

`

用html检查容器：“点击我”我想在该容器的标签上显示卡片布局

Answer 1

你可以这样做：

{
    xtype:'container',
    items:[{
        xtype:'container',
        html: 'tab me',
        centered: true,
        cls: 'main_navigation_heading',
        listeners: {
            initialize: function(c) {
                this.element.on({
                    tap: function(e, node, options) {
                        alert("Working!")
                    }
                })
            }
        }
    }]

}

sencha触摸如何在点击组件时显示不同的卡布局？

编辑1

1 个答案: