0

我正在 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"
        }

        ],
}
});`

好的野兔是我的 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 代码

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:"tap me" 查看容器 我想在该容器的选项卡上显示卡片布局

4

1 回答 1

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!")
                    }
                })
            }
        }
    }]

}
于 2013-05-01T12:25:28.317 回答