2013-05-13 111 views
0

我已創建在一個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實例上。誰能幫我? 任何幫助將是偉大的。

感謝 依禪耆那教

+0

代替'Ext.getCmp(「imgSlider」)的'在首頁你不能在主頁本身定義'imgSlider'組件?爲什麼你想要一個全局變量** imgSlider1 **? – ThinkFloyd 2013-05-14 07:05:27

+0

我使用imgSlider1作爲全局變量,以便我可以使用onClick/prev按鈕調用next和previous方法。如何將旋轉木馬組件定義到JavaScript內的變量。它不會允許我構建應用程序,因爲在Sencha touch 2中不允許使用「var:imgSlider ='something'」語法。 – 2013-05-14 09:25:06

回答

0

好了,第一件事首先,你不能使用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:[email protected]">' + 
        '[email protected]</a></p>'+ 
        '<form id="form1" name="form1" method="post" action="http://rasovai.com/index.html">'+ 
        '<label></label>'+ 
        '<br />'+ 
        '</body>'+ 
        '</html>' 


      } 
     ] 
    } 
}); 

可以使用轉盤的id屬性來獲取並在其上調用方法。我可以看到你把整個表格作爲HTML放在面板中,這也是不正確的做法,Sencha有你應該使用它的Form組件。

+0

非常感謝您的幫助。 – 2013-05-20 19:35:25

+0

我是新來的sencha,javascript,php。我發佈了一個新問題,任何幫助都會很棒。 http://stackoverflow.com/questions/16657005/email-form-detail-in-sencha-touch。謝謝伊山賈恩 – 2013-05-20 19:37:52