如何在Ext JS控制的页面中实现非Ext功能?

时间:2016-08-11 00:48:37

标签: javascript jquery html extjs

我正在为使用Ext 3.2的现有Rails 4应用添加几项功能。

我想有一个页面的一部分,我可以可靠地使用jQuery,jQuery UI和我自己的手写JS,而不受Ext的干扰。

尝试1:<script>标记

我将JavaScript代码直接放在<script>标记内的HTML中。

这是一个代表性示例,与我尝试实现的代码类似。

<script>
  (function () {

    /*
     * We bind the event handlers in a separate function so we can call it
     * when the DOM updates.
     * */
    var bindHandlers = function () {

      $('.action_button').click(function (event) {

        var obj_id = $(event.target).closest('.whatever').attr('data-obj-id');
        var url = '/something/' + obj_id;

        $.post(url, function (data) {
          // [...]
        });

        // [...]

      });

      $('.form_f_submit_button').click(function(event){
        $('form.door_form').submit();
      });

    };

    $(document).ready(function () {
      bindHandlers();
    });

  }());
</script>

当我这样做时,它在我的本地开发机器上完美运行,但只是部分在生产中 - 一些功能起作用,另一些则什么都不做。例如.action_button可能有效,但不是.form_f_submit_button

我在开发工具控制台中没有看到任何错误。

尝试2:单独的JavaScript文件

如果我将我的JS移动到一个单独的文件并链接到它,那么在本地或生产中都没有任何作用。

如果我点击一个我已经绑定了一个函数的按钮,你可以在上面的代码中看到,绝对没有任何反应。没有发生AJAX请求,并且dev工具JS控制台中没有输出。没有错误。什么都没有。

页面的行为就像我的JavaScript代码不存在一样。

一般性意见

很明显Ext在页面加载后重写了DOM。

页面完全加载后,我会查看页面源,并且存在一些HTML元素,但页面源中看不到大约95%。

例如,我有一个手工编码的HTML <form>,在Ext面板中有几个字段。在View Source中没有任何迹象。

如果我在“元素”标签下检查开发工具中的页面结构,我会发现我的表单 IS ,以及其他所有内容。

基于此,我认为似乎正在发生的是Ext正在删除DOM或大部分DOM,并在页面加载后动态重新创建它。

如果我检查开发工具元素选项卡中的特定元素,例如我的<form>中的字段,我发现非常深深嵌套在这样的元素结构中:{ {1}}等等。

我没有用#ext-gen97 #ext-gen32 #ext-gen46之类的东西对我的HTML进行编码,但现在它们已存在。所以这是我认为Ext正在删除所有内容的另一个原因正在重建它。

我猜这可能是Ext工作原理的基本部分吗?

好吧,如果它正在这样做,并且如果我有一个#ext-gen42函数将一些处理程序绑定到元素,那么这可能暗示为什么我的处理程序突然不能像我上面描述的那样工作。可能是我的处理程序绑定JS在 Ext 重新创建DOM之前运行。

你看到我在说什么吗?

所以在那种情况下,他们没有任何效果。也许我的处理程序绑定的元素被Ext删除(然后,最终恢复,但之后显然没有任何东西会被绑定到它们。)

这只是基于我在此观察到的假设。

也许更了解Ext的人可以提供一些见解。

基本问题

除此之外我还在想:

  1. 在Ext中是否有某种方法我可以指定页面的一部分,比如说一个特定的$(document).ready( //... )或者<div>并说“嘿外线,就这么说吧不要擦除它,不要重写它,不要将它嵌入任何<iframe>个元素中。只需离开并让我处理它。“

  2. 或者,也许确保我的代码在 Ext完成它之后加载。如果我能以某种方式确保,那么这可以解决问题。

  3. https://fiddle.sencha.com/#fiddle/1f53

0 个答案:

没有答案