我已創建在一個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:[email protected]">' +
'[email protected]</a></p>'+
'<form id="form1" name="form1" method="post" action="http://rasovai.com/index.html">'+
'<label></label>'+
'<br />'+
'</body>'+
'</html>'
}
]
}
});
我上述觀點已經添加到視在app.js爲: Ext.Viewport。添加(Ext.create( 'RasovaiApp.view.HomePage')); 事情是當我運行上面的代碼時,它在桌面瀏覽器上運行得非常好,但是當我構建應用程序並在桌面瀏覽器上運行它時,它只顯示帶有兩個單選按鈕的一個輪播圖像。而當我爲android移動設備打包相同的應用程序並運行它時,它不顯示任何圖像,但它顯示兩個單選按鈕,表明它正在加載傳送帶中的兩個項目。
我認爲問題出在var imgSlider1或carousel實例上。誰能幫我? 任何幫助將是偉大的。
感謝 依禪耆那教
代替'Ext.getCmp(「imgSlider」)的'在首頁你不能在主頁本身定義'imgSlider'組件?爲什麼你想要一個全局變量** imgSlider1 **? – ThinkFloyd 2013-05-14 07:05:27
我使用imgSlider1作爲全局變量,以便我可以使用onClick/prev按鈕調用next和previous方法。如何將旋轉木馬組件定義到JavaScript內的變量。它不會允許我構建應用程序,因爲在Sencha touch 2中不允許使用「var:imgSlider ='something'」語法。 – 2013-05-14 09:25:06