javascript - Sencha Touch carousel Image issue -
i have create vbox layout view , added carousel images in 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> unique effort bring ancient ayurvedic science services of modern man. our main work providing trainings, conducting courses, workshops, consultation, offering treatments , 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 viewport in app.js as: ext.viewport.add(ext.create('rasovaiapp.view.homepage')); thing when run above code runs fine on desktop browser, when build application , run on desktop browser, shows 1 carousel image 2 radio button. , when package same application android mobile device , runs on it, doesnot show of image, shows 2 radio buttons indicates loading 2 items in carousel.
i think problem var imgslider1 or carousel instance. can 1 me? greatful.
thanks ishan jain
okay, first thing first, must not use onclick attribute on html element, instead should bind events element when required. check code see how bind tap event image.
secondly asking put carousel code inside view 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> unique effort bring ancient ayurvedic science services of modern man. our main work providing trainings, conducting courses, workshops, consultation, offering treatments , 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 fetch , invoke method on it. can see putting whole forms in panel html, not right approach, sencha has form component should use it.
Comments
Post a Comment