Javascript Sencha Touch转盘图像问题_Javascript_Html_Sencha Touch_Sencha Touch 2_Carousel

Javascript Sencha Touch转盘图像问题

javascript html sencha-touch sencha-touch-2

Javascript Sencha Touch转盘图像问题,javascript,html,sencha-touch,sencha-touch-2,carousel,Javascript,Html,Sencha Touch,Sencha Touch 2,Carousel,我创建了一个vbox布局视图，并在其中添加了旋转木马图像，如下所示： var imgSlider1 = Ext.create('Ext.carousel.Carousel',{ direction: 'horizontal', singleton: true, height:300, width:250, id: 'imgSlider', bufferSize: 2, defaults: { styleHtmlContent: true }, items: [ {

我创建了一个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>'


        }
    ]
}
});

var imgSlider1=Ext.create（'Ext.carousel.carousel'{
方向：'水平'，
辛格尔顿：没错，
身高：300，
宽度：250，
id:“imgSlider”，
缓冲区大小：2，
默认值：{
styleHtmlContent：true
},
项目：[
{
xtype:'图像'，
cls:“我的旋转木马项目img”，
src:'resources/images/training.jpg'
},
{
xtype:'图像'，
cls:“我的旋转木马项目img”，
src:'resources/images/uncoming_programms.jpg'
}
]
});
Ext.define（'rasoviapp.view.HomePage'{
扩展：“Ext.Container”，
全屏：对，
要求：[
imgSlider1
],
配置：{
可滚动：对，
布局：{
类型：“vbox”
},
项目：[
{
xtype:'容器'，
布局：{
身高：300，
类型：“hbox”
},
项目：[
{
xtype:'面板'，
身高：300，
宽度：50，
html:'+
''+
''+
''+
''+
''+
''
},
Ext.getCmp（'imgSlider'），
{
xtype:'面板'，
身高：300，
宽度：50，
html:'+
''+
''+
''+
''+
''+
''
}
]
},
{
xtype:'面板'，
html:'+
''+
''+
“家”+
“家”+
''+
''
},
{
xtype:'面板'，
html:'+
''+
''+
“无标题文件”+
''+
''+
“Raso Vai Ayurved是一家致力于将古代阿育吠陀科学引入现代人类服务的公司。我们的主要工作是提供培训、举办课程、研讨会、咨询、提供治疗和Panchakarma。”+
''+
''+
“
”+
''+
''
},
{
xtype:'面板'，
html:'+
''+
''+
“无标题文件”+
''+
''+
“拉索瓦伊，
”+
“Morjim Aswem路
”+
“马尔迪·瓦达、莫尔吉姆、北果阿，
”+
“印度
”+
“中心-+91-9623 556828
”+
“手机-+91-9850 973458
”+
'电子邮件：'+
''+
''+
“
”+
''+
''
}
]
}
});

我已将上述视图添加到app.js中的视口中，如下所示：添加（Ext.create（'rasoviapp.view.HomePage'）；问题是，当我运行上面的代码时，它在桌面浏览器上运行得非常好，但是当我构建应用程序并在桌面浏览器上运行它时，它只显示一个带两个单选按钮的旋转木马图像。当我为android移动设备打包相同的应用程序并在其上运行时，它不会显示任何图像，但会显示两个单选按钮，表示它正在传送带中加载两个项目

我认为问题在于var imgSlider1或carousel实例。有人能帮我吗？任何帮助都将是巨大的

谢谢

Ishan jain

好的，首先，您不能在HTML元素上使用

onClick

属性，而是应该在需要时将事件绑定到元素。因此，请查看我的代码，了解如何将

点击

事件绑定到图像

其次，我要求将旋转木马代码放入视图中，如下所示：

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>'


            }
        ]
    }
});

Ext.define（'rasoviapp.view.HomePage'{
扩展：“Ext.Container”，
全屏：对，
配置：{
可滚动：对，
布局：{
类型：“vbox”
},
项目：[
{
xtype:'容器'，
布局：{
身高：300，
类型：“hbox”
},
项目：[
{
xtype:'面板'，
身高：300，
宽度：50，
项目：[{
xtype:'image'，
src:'resources/images/arrow_left.png'，
身高：300，
宽度：50，
听众：{
tap：功能（me、evt）{
控制台日志（“点击左侧”）；
Ext.getCmp（“imgSlider”）.previous（）；
}
}
}]
},
{
xtype:'旋转木马'，
方向：'水平'，
辛格尔顿：没错，
身高：300，
宽度：250，
id:“imgSlider”，
缓冲区大小：2，
默认值：{
styleHtmlContent：true
},
项目：[
{
xtype:'图像'，
cls:“我的旋转木马项目img”，
src:'resources/images/training.jpg'
},
{
xtype:'图像'，
cls:“我的旋转木马项目img”，