Jquery 库不能与 sencha touch 一起使用？答案

【问题标题】：Jquery library not working with sencha touch?Jquery 库不能与 sencha touch 一起使用？
【发布时间】：2012-10-17 09:39:55
【问题描述】：

我目前正在构建一个基于 Sencha Touch 2 的移动应用程序。目前我只是在尝试一些实验，看看 Sencha 也有什么能力。

今天我遇到了一件看起来很奇怪的事情——我只是想试试是否可以将 jQuery 库用于我的应用程序并使用它的附加功能。

最奇怪的是，我在制作 jquery 函数时无法得到任何响应。

我已将 jquery 库和我的脚本包含在我的 sencha 目录中的 index.html 文件中，并且我只是制作了一个简单的愚蠢测试脚本，看看它是否有效 - 但当我这样做时我根本没有任何反应在浏览器中试用。我可以看到该库和脚本是通过 firebug 包含的。（如您所见，我的 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>

【问题讨论】：

我认为它们应该是兼容的 - 我真的不明白为什么它不能真正工作，因为我正在做一个如此简单的 jquery 调用
我认为当你被 Sencha 困住时最好寻求帮助，而不是试图让它与 jQuery 一起工作。这两个框架都很重，而且做的事情几乎一样。
也许——但我需要从 jquery 库中获取一些基本的小东西来完成这项工作。

标签： jquery extjs sencha-touch

【解决方案1】：

也许您正在点击的元素没有 id 'showme'。发生这种情况是因为您创建的按钮在 Sencha 中具有 id 'showme'，但实际呈现的 HTML 包含另一个 id。

如果这是真的（当然，你可以使用 FireBug 来检查），你可能想监听按钮上的 'tap' 事件，而不是使用 jQuery 绑定到 'click' 事件。有关文档，请参阅 http://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap。

可以将 jQuery 与 Sencha 一起使用，但重要的是要记住，Sencha 中的组件并不是 DOM 中元素的直接表示，Sencha 中的某些组件在渲染时由多个 DOM 元素组成。

希望对你有帮助

【讨论】：