Dojo: Floating Pane выдает ошибку при закрытии и повторном открытии

У меня есть приложение, разработанное в рамках Dojo. И в этом приложении я отображаю плавающую панель.

Я настроил этот floatingPane на closable.

Итак, проблема, с которой я столкнулся, заключается в том, что когда я закрываю floatingPane и пытаюсь снова открыть то же самое, он не отображается и начинает выдавать ошибки в консоли.

Кажется, это проблема самого Dojo Framework, потому что я могу столкнуться с той же проблемой в их документации.

В качестве примера вы можете обратиться к странице: https://dojotoolkit.org/reference-guide/1.10/dojox/layout/FloatingPane.html

в этом примере выполните следующие шаги, чтобы воспроизвести проблему:

  1. Нажмите кнопку «Выполнить» программного примера.
  2. Нажмите «Показать меня» (появится плавающая панель).
  3. В правом верхнем углу нажмите кнопку закрытия, чтобы закрыть
  4. Нажмите кнопку «Показать» еще раз. (Так не пойдет)

javascript dojo floating dijit.layout
person confusedDeveloper    schedule 27.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это не ошибка, она уже определена как таковая. Если вы увидите исходный код этой плавающей панели, вы заметите, что кнопка закрытия привязана к close: последняя функция скрывает виджет и после вызова this.destroyRecursive(), поэтому виджет полностью уничтожен, что выдает ошибку при попытке показать снова.

ТАК, вы можете обойти это, просто создав расширение виджета FloatingPane, который переопределяет функцию закрытия, как показано ниже (скрыть только плавающую панель)

var CustomFloatingPane = declare(FloatingPane, {
  close: function(e) {
    // overinding close function
    this.hide();
  }
});

см. ниже рабочий пример:

require(["dojo/_base/declare","dojox/layout/FloatingPane", "dojo/dom", "dojo/ready", "dijit/form/Button"], function(declare, FloatingPane, dom, ready, Button) {
  ready(function() {
  
    var CustomFloatingPane = declare(FloatingPane, {
      close: function(e) {
        this.hide();
      }
    });
    
  
    myCustomloatingPane = new CustomFloatingPane({
      title: "A floating pane",
      resizable: true,
      dockable: true,
      style: "position:absolute;top:0;left:0;width:100px;height:100px;visibility:hidden;",
      id: "myCustomloatingPane"
    }, dom.byId("customFloatingPane"));

    myCustomloatingPane.startup();
  });
});
<script type="text/javascript">
  dojoConfig = {
    isDebug: true,
    async: true,
    parseOnLoad: true
  }
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/layout/resources/ResizeHandle.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/layout/resources/FloatingPane.css" rel="stylesheet" />


<body class="claro">
<div id="customFloatingPane">Hi I'm custom floating pane , extended to hide istead of destroy and close :) </div>
</body>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){myCustomloatingPane.show();}"></div>
<br/><br/><br/><br/>

person Spring    schedule 27.08.2019
comment
Спасибо за решение. Но я думаю, это должен обрабатывать сам фреймворк. - person confusedDeveloper; 27.08.2019
comment
@confusedDeveloper, все dojox означают экспериментальный виджет, поэтому через некоторое время, если он будет проверен, он может попасть в dijit, а теперь версия 1.x устарела, поэтому я думаю, что остановите ее разработку ... - person Spring; 27.08.2019
comment
О, вот как это работает. Я новичок в Додзё. Начал пользоваться только со вчерашнего дня. - person confusedDeveloper; 27.08.2019