[英]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那教
好的,首先,您不得在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組件,您應該使用它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.