我创建了一个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实例上。谁能帮我？ 任何帮助都会很棒。
由于 Ishan jain
答案 0 :(得分：0)
好的，首先，您不能在HTML元素上使用onClick属性，而是应该在需要时将事件绑定到元素。因此，请检查我的代码，了解如何将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有Form组件你应该使用它。