Sencha Touch carousel Image issue
Question
I have create a vbox layout view and added carousel images in that as follows:
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>'
}
]
}
});
I have added above view to the viewport in app.js as: Ext.Viewport.add(Ext.create('RasovaiApp.view.HomePage')); The thing is when I run the above code it runs perfectly fine with on the desktop browser, but when i build the application and run it on desktop browser, it only shows one carousel image with two radio button. And when i package the same application for android mobile device and runs on it, then it doesnot show an any of the image, but it shows two radio buttons which indicates it is loading two items in the carousel.
I think the problem is with the var imgSlider1 or carousel instance. Can any one help me? Any help would be greatful.
Thanks Ishan jain
1 answers
solution1
0 ACCPTED 2013-05-14 10:46:44
Okay, first thing first, you must not use onClick attribute on HTML element, instead you should bind events to element when required. So check my code to see how to bind tap event to an image.
Secondly I was asking to put carousel code inside view like this:
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>'
}
]
}
});
You can use id attribute of carousel to fetch and invoke method on it. I can see you are putting whole forms in panel as HTML, that is also not right approach, Sencha has Form component you should use it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.