2012-10-17 55 views
2

我目前正在構建一個基於Sencha Touch 2的移動應用程序。 目前我只是嘗試一些實驗來了解Sencha的功能。JQuery庫不與sencha touch一起使用?

而今天我陷入了一件看起來很奇怪的事情 - 我只想嘗試一下,如果我可以爲我的應用程序使用jQuery庫並使用它的補充。

最奇怪的是我無法得到任何迴應,當我正在做一個jQuery的功能。

我已經在我的sencha目錄的index.html文件中包含了jquery庫和我的腳本,並且我只是做了一個簡單的愚蠢的測試腳本,看看它是否工作 - 但是我根本沒有得到任何反應即時通訊在瀏覽器中試用。我可以看到庫和腳本是通過螢火蟲包含的(正如你可以看到我的jQuery測試只是一個簡單的點擊事件,應該顯示一個div,但它不是)。

我是否很愚蠢 - 或者我錯過了什麼?

這是我的index.html文件

<!DOCTYPE HTML> 
<html manifest="" lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>scroller</title> 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#show_me").click(function() { 
      $('#magic').slideDown('slow'); 
     }); 

    }); 

</script> 


<link rel="stylesheet" href="resources/css/sencha-touch.css" type="text/css"> 
<style type="text/css"> 
    /** 
    * Example of an initial loading indicator. 
    * It is recommended to keep this as minimal as possible to provide instant feedback 
    * while other resources are still being loaded for the first time 
    */ 
    html, body { 
     height: 100%; 
     background-color: #1985D0 
    } 

    #appLoadingIndicator { 
     position: absolute; 
     top: 50%; 
     margin-top: -15px; 
     text-align: center; 
     width: 100%; 
     height: 30px; 
     -webkit-animation-name: appLoadingIndicator; 
     -webkit-animation-duration: 0.5s; 
     -webkit-animation-iteration-count: infinite; 
     -webkit-animation-direction: linear; 
    } 

    #appLoadingIndicator > * { 
     background-color: #FFFFFF; 
     display: inline-block; 
     height: 30px; 
     -webkit-border-radius: 15px; 
     margin: 0 5px; 
     width: 30px; 
     opacity: 0.8; 
    } 

    @-webkit-keyframes appLoadingIndicator{ 
     0% { 
      opacity: 0.8 
     } 
     50% { 
      opacity: 0 
     } 
     100% { 
      opacity: 0.8 
     } 
    } 
</style> 
<!-- The line below must be kept intact for Sencha Command to build your application --> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script> 
<!-- script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script---> 
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script> 
<!--<script type="text/javascript" src="app.js"></script>--> 
<script type="text/javascript" src="js/cordova-1.7.0.js"></script> 
<script type="text/javascript" src="js/phonegap_shortcuts.js"></script> 
<script type="text/javascript" src="js/maps.js"></script> 
<script type="text/javascript" src="js/zepto.min.js"></script> 
<script type="text/javascript" src="js/filters.js"></script> 
<script type="text/javascript" src="js/proxy.js"></script> 
<!--<script type="text/javascript" src="js/index.js"></script>--> 
<!-- 
<script type="text/javascript"> 
    document.addEventListener("deviceready", app.mainLaunch, false); 
</script> 
--> 
<script type="text/javascript"> 
    function onDeviceReady() { 
     pictureSource=navigator.camera.PictureSourceType; 
     destinationType=navigator.camera.DestinationType; 
    } 
    function PictureSourceType() {}; 
    PictureSourceType.PHOTO_LIBRARY = 0; 
    PictureSourceType.CAMERA = 1; 
    //var ja = phonegap.shortcuts.getLocation(); 
    //console.log('ja:'+ja); 
    document.addEventListener("deviceready", onDeviceReady, false); 
</script> 
    </head> 
    <body> 
    <div id="appLoadingIndicator"> 
    <div></div> 
    <div></div> 
    <div></div> 
    </div> 
    </body> 
    </html> 
+0

他們應該是兼容的,我認爲 - 我真的不明白爲什麼它是不是真正的工作,因爲我正在做這樣一個簡單的jQuery呼叫 – Fruxelot

+0

我想你最好要幫助你當'與Sencha卡住,而不是試圖使它與jQuery一起工作。這兩個框架都很重,並且做了幾乎相同的事情。 –

+0

也許 - 但有一些小的基本東西,我需要從jQuery庫來使這項工作。 – Fruxelot

回答

0

也許你會點擊該元素,沒有身份證「SHOWME」。這可能是因爲您創建的按鈕在Sencha中具有id'showme',但實際呈現的HTML包含另一個id。

如果這是真的(當然你可以使用FireBug檢查這個),你可能想聽按鈕上的'tap'事件,而不是使用jQuery綁定到'click'事件。有關文檔,請參閱http://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap

可以在Sencha中使用jQuery,但要記住Sencha中的組件不是DOM中元素的直接表示,Sencha中的某些組件在呈現時由幾個DOM元素組成。

希望這有助於