Sencha Touch轮播图像问题
Posted
技术标签:
【中文标题】Sencha Touch轮播图像问题【英文标题】：Sencha Touch carousel Image issue 【发布时间】：2013-05-13 20:09:19 【问题描述】：我创建了一个 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" 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" 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 实例上。谁能帮我？ 任何帮助都会非常有用。
谢谢 伊山耆那教
【问题讨论】：
你不能在主页中定义imgSlider而不是主页中的imgSlider组件吗？为什么要全局变量 ** imgSlider1**？
我使用 imgSlider1 作为全局变量，这样我就可以使用上一个/下一个按钮的 onClick 调用下一个和上一个方法。如何将轮播组件定义为 javascript 中的变量。它不允许我构建应用程序，因为 Sencha touch 2 中不允许使用“var: imgSlider = 'something'”语法。
【参考方案1】：
好的，首先，您不能在 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 组件，您应该使用它。
【讨论】：
非常感谢您的帮助。 我是 sencha、javascript、php 的新手。我发布了一个新问题，任何帮助都会非常有用。 ***.com/questions/16657005/…。谢谢伊山耆那教以上是关于Sencha Touch轮播图像问题的主要内容，如果未能解决你的问题，请参考以下文章