0

我创建了一个 vbox 布局视图并在其中添加了轮播图像，如下所示：

var imgSlider1 =  Ext.create('Ext.carousel.Carousel',{
direction: 'horizontal',
singleton: true,
height:300,
width:250,
id: 'imgSlider',
bufferSize: 2,
defaults: {
    styleHtmlContent: true
},
items: [
    {
        xtype: 'image',
        cls: 'my-carousel-item-img',
        src: 'resources/images/training.jpg'
    },
    {
        xtype: 'image',
        cls: 'my-carousel-item-img',
        src: 'resources/images/upcoming_programms.jpg'
    }
]
});




Ext.define('RasovaiApp.view.HomePage',{
extend: 'Ext.Container',
fullscreen: true,
requires:[
imgSlider1
],
config:{
    scrollable: true,

    layout: {
        type: 'vbox'
    },


    items: [
        {
            xtype: 'container',
            layout: {
                height: 300,
                type: 'hbox'
            },
            items: [
                {
                    xtype: 'panel',
                    height:300,
                    width:50,
                    html: '<html xmlns="http://www.w3.org/1999/xhtml">'+
                        '<head>'+
                        '</head>'+
                        '<body>'+
                        '<img src="resources/images/arrow_left.png" alt="Previous"     width="30" height="60" align="left"   onclick="'+'Ext.getCmp(\'imgSlider\').previous();console.log(\'previous\')'+'"/>'+
                        '</body>'+
                        '</html>'
                },
                Ext.getCmp('imgSlider'),
                {
                    xtype: 'panel',
                    height:300,
                    width:50,
                    html: '<html xmlns="http://www.w3.org/1999/xhtml">'+
                        '<head>'+
                        '</head>'+
                        '<body>'+
                        '<img src="resources/images/arrow_right.png" alt="Next" width="30" height="60" align="right" onclick="'+'Ext.getCmp(\'imgSlider\').next();console.log(\'next\')'+'"/>'+
                        '</body>'+
                        '</html>'
                }
            ]
        },
        {
            xtype: 'panel',
            html: '<html xmlns="http://www.w3.org/1999/xhtml">'+
                '<head>'+
                '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'+
                '<title>Home</title>'+
                '<h1 align="center">Home</h1>'+
                '</head>'+
                '</html>'
        },
        {
            xtype: 'panel',
            html: '<html xmlns="http://www.w3.org/1999/xhtml">'+
                '<head>'+
                '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'+
                '<title>Untitled Document</title>'+
                '</head>'+
                '<body>'+
                '<p align="center">Raso Vai Ayurved is</a> an unique effort to bring ancient Ayurvedic science to the services of modern man. Our main work is providing Trainings, conducting Courses, Workshops, Consultation, offering Treatments and Panchakarma.</p>'+
                '<form id="form1" name="form1" method="post" action="http://rasovai.com/index.html">'+
                '<label></label>'+
                '<br />'+
                '</body>'+
                '</html>'

        },
        {
            xtype: 'panel',
            html: '<html xmlns="http://www.w3.org/1999/xhtml">'+
                '<head>'+
                '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'+
                '<title>Untitled Document</title>'+
                '</head>'+
                '<body>'+
                '<p align="center"><strong>Raso Vai,</strong><br />'+
                'Morjim-Aswem Road <br />'+
                'Mardi Wada, Morjim, North Goa, <br />'+
                'India<br />'+
                'Center- +91-9623 556828 <br />'+
                'Mobile- +91-9850 973458 <br />'+
                'Email: <a href="mailto:info@rasovai.com">' +
                'info@rasovai.com</a></p>'+
                '<form id="form1" name="form1" method="post" action="http://rasovai.com/index.html">'+
                '<label></label>'+
                '<br />'+
                '</body>'+
                '</html>'


        }
    ]
}
});

我已将上述视图添加到 app.js 中的视口中：Ext.Viewport.add(Ext.create('RasovaiApp.view.HomePage')); 问题是当我运行上面的代码时，它在桌面浏览器上运行得非常好，但是当我构建应用程序并在桌面浏览器上运行它时，它只显示一个带有两个单选按钮的轮播图像。当我为 android 移动设备打包相同的应用程序并在其上运行时，它不会显示任何图像，但会显示两个单选按钮，表示它正在加载轮播中的两个项目。

我认为问题出在 var imgSlider1 或 carousel 实例上。谁能帮我？任何帮助都会非常有用。

谢谢伊山耆那教

4

1 回答 1

0

好的，首先，您不能onClick在 HTML 元素上使用属性，而是应该在需要时将事件绑定到元素。因此，请检查我的代码以了解如何将tap事件绑定到图像。

其次，我要求将轮播代码放在这样的视图中：

Ext.define('RasovaiApp.view.HomePage',{
    extend: 'Ext.Container',
    fullscreen: true,
    config:{
        scrollable: true,
        layout: {
            type: 'vbox'
        },
        items: [
            {
                xtype: 'container',
                layout: {
                    height: 300,
                    type: 'hbox'
                },
                items: [
                    {
                        xtype: 'panel',
                        height:300,
                        width:50,
                        items: [{
                            xtype:'image',
                            src: 'resources/images/arrow_left.png',
                            height:300,
                            width:50,
                            listeners: {
                                tap : function(me, evt){
                                    console.log("Tap on left");
                                    Ext.getCmp("imgSlider").previous();
                                }
                            }
                        }]
                    },
                    {
                        xtype : 'carousel',
                        direction: 'horizontal',
                        singleton: true,
                        height:300,
                        width:250,
                        id: 'imgSlider',
                        bufferSize: 2,
                        defaults: {
                            styleHtmlContent: true
                        },
                        items: [
                            {
                                xtype: 'image',
                                cls: 'my-carousel-item-img',
                                src: 'resources/images/training.jpg'
                            },
                            {
                                xtype: 'image',
                                cls: 'my-carousel-item-img',
                                src: 'resources/images/upcoming_programms.jpg'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        height:300,
                        width:50,
                        items: [{
                            xtype:'image',
                            src: 'resources/images/arrow_right.png',
                            height:300,
                            width:50,
                            listeners: {
                                tap : function(me, evt){
                                    console.log("Tap on right");
                                    Ext.getCmp("imgSlider").next();
                                }
                            }
                        }]
                    }
                ]
            },
            {
                xtype: 'panel',
                html: '<html xmlns="http://www.w3.org/1999/xhtml">'+
                    '<head>'+
                    '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'+
                    '<title>Home</title>'+
                    '<h1 align="center">Home</h1>'+
                    '</head>'+
                    '</html>'
            },
            {
                xtype: 'panel',
                html: '<html xmlns="http://www.w3.org/1999/xhtml">'+
                    '<head>'+
                    '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'+
                    '<title>Untitled Document</title>'+
                    '</head>'+
                    '<body>'+
                    '<p align="center">Raso Vai Ayurved is</a> an unique effort to bring ancient Ayurvedic science to the services of modern man. Our main work is providing Trainings, conducting Courses, Workshops, Consultation, offering Treatments and Panchakarma.</p>'+
                    '<form id="form1" name="form1" method="post" action="http://rasovai.com/index.html">'+
                    '<label></label>'+
                    '<br />'+
                    '</body>'+
                    '</html>'

            },
            {
                xtype: 'panel',
                html: '<html xmlns="http://www.w3.org/1999/xhtml">'+
                    '<head>'+
                    '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'+
                    '<title>Untitled Document</title>'+
                    '</head>'+
                    '<body>'+
                    '<p align="center"><strong>Raso Vai,</strong><br />'+
                    'Morjim-Aswem Road <br />'+
                    'Mardi Wada, Morjim, North Goa, <br />'+
                    'India<br />'+
                    'Center- +91-9623 556828 <br />'+
                    'Mobile- +91-9850 973458 <br />'+
                    'Email: <a href="mailto:info@rasovai.com">' +
                    'info@rasovai.com</a></p>'+
                    '<form id="form1" name="form1" method="post" action="http://rasovai.com/index.html">'+
                    '<label></label>'+
                    '<br />'+
                    '</body>'+
                    '</html>'


            }
        ]
    }
});

你可以使用 carousel 的 id 属性来获取和调用它的方法。我可以看到您将整个表单作为 HTML 放在面板中，这也是不正确的方法，Sencha 有表单组件，您应该使用它。

于 2013-05-14T10:46:44.590 回答