Dojo, создание составных виджетов

Я использую dojo 1.10 и отчаянно пытаюсь найти чистый способ создания составных виджетов.

У меня есть следующий код:

TabsWidget.js

require([......], function(.....template ....){

var Tabs = declare('...', [....], {

 templateString : template,
 region : 'center'

});

var o = new Tabs({}, 'container');

widget.startup();

});

TabsWidget.html


<div style="width: 100%; height: 100%;">
     <div-dojo-type="dijit/layout/TabContainer" style="..">
           ......Content pane........
     </div>
</div>

home.html

......
 <div data-dojo-type="TabsWidget"></div>

Вкладки отображаются нормально, они явно пустые вкладки, и цель здесь состоит в том, чтобы затем определить отдельный виджет, содержащий сетку и, возможно, форму поиска.

Затем я хочу объявить этот виджет в одной из своих панелей содержимого, но не знаю, как это сделать.

Может ли кто-нибудь объяснить, как это работает, или указать мне учебник/документ, в котором указано, как лучше всего это сделать?

Заранее спасибо.


person user1383163    schedule 31.07.2015    source источник


Ответы (2)


Ознакомьтесь с документацией Dojo по созданию виджетов на основе шаблонов.

Чтобы использовать TabsWidget в качестве стандартного виджета, его нужно организовать немного по-другому. Особенно:

  1. Используйте define для определения модуля виджета, а не require
  2. Верните объявленный класс из вашего модуля.

Так больше похоже:

define([ ... ], function ( ..., template, ...) {
   return declare([ ... ], {
       templateString: template,
       ...
   });
 });

Кроме того, вы обычно устанавливаете свойство «регион» при создании своего виджета, а не при его определении. Сам ваш виджет, вероятно, не использует «регион»; он предназначен для того, чтобы сообщить контейнеру, куда поместить виджет. Так:

<div data-dojo-type="TabsWidget" data-dojo-props="region:center"></div>
person jason0x43    schedule 01.08.2015
comment
Привет большое спасибо за указатели, я исправил. К сожалению, при попытке поместить виджет в одну из моих ContentPane я вижу div, к которому должен быть прикреплен виджет, но больше ничего. Я сделал этот виджет программно. Есть ли требование указать метод запуска, я указал myGrid.startup() в сообщении о создании, но я ничего не получаю, даже сообщение об ошибке. - person user1383163; 03.08.2015
comment
Предполагая, что ваша ContentPane доступна как переменная contentPane, и вы хотите, чтобы ее содержимое было widget, вы должны установить содержимое с помощью contentPane.set('content', widget);. - person jason0x43; 04.08.2015
comment
Я вижу, мне удалось получить contentPane, сделав это, я вижу, что один div добавляется с идентификатором моего виджета, но не похоже, что виджет запускается - person user1383163; 04.08.2015
comment
Виджет, добавленный в контейнер, такой как ContentPane, будет автоматически запущен при запуске контейнера. Виджет также будет запущен, если контейнер уже был запущен при добавлении виджета. Если у вас есть куча вложенных виджетов на странице, убедитесь, что запущен виджет верхнего уровня и, предполагая, что его потомки были добавлены с помощью методов виджета (например, set('content', ...)), все должно запускаться. - person jason0x43; 04.08.2015
comment
Спасибо, сетка теперь отображается в узле dom, как и должна быть, однако я получаю только серое поле там, где должен быть мой LazyGridTree, еще одна проблема, поэтому я приму ваши ответы на исходный вопрос. Весьма признателен. - person user1383163; 04.08.2015

чтобы легко добиться этого, вы можете создать виджет на основе родительского шаблона с одним родительским div в этом примере: <div data-dojo-attach-point="parentDiv"> </div>и поместить в него вкладку или панель содержимого, а затем отдельно создать другой виджет на основе шаблона, и вы можете создать экземпляр этого виджета (который содержит сетку или поле поиска) из родительского виджета и поместите этот виджет в тег div панели содержимого. Вы можете генерировать события из дочерних виджетов, чтобы любая функция могла запускаться по этому событию.

Репетитор по созданию виджета на основе шаблона в додзё: http://haritechtalk.blogspot.in/2015/09/how-to-create-template-based-widget-in.html

person Harish P    schedule 17.10.2015