Sencha Touch轮播图像问题
[英]Sencha Touch carousel Image issue
问题描述
我创建了一个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或轮播实例。 谁能帮我？ 任何帮助将是巨大的。
谢谢伊桑ja那教
1 个解决方案
解决方案1
0 已采纳 2013-05-14 10:46:44
好的，首先，您不得在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>'
}
]
}
});
您可以使用轮播的id属性来获取并调用其上的方法。 我可以看到您将整个表单作为HTML放置在面板中，这也不是正确的方法，Sencha具有Form组件，您应该使用它。
Google Chrome版本43.0.2357.125（64位）中的Sencha Touch应用程序滚动和Ext.carousel.Carousel问题
[英]Sencha Touch Application Scrolling & Ext.carousel.Carousel issue in Google Chrome Version 43.0.2357.125 (64-bit)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Sencha触摸轮播不可见
Sencha Touch Carousel中的项目消失
Sencha Touch 2 - 标签面板中的旋转木马
Sencha Touch 2-将轮播添加到面板
Google Chrome版本43.0.2357.125（64位）中的Sencha Touch应用程序滚动和Ext.carousel.Carousel问题
Sencha Touch SelectField问题
如何在Sencha Touch中将自定义容器添加到轮播中？
Sencha Touch 2轮播指示器点击事件
Sencha touch Xtemplate中的Javascript问题
PhoneGap 和 Sencha touch 的范围问题
相关标签