Как определить класс Widget для панели инструментов с кнопками в Dojo Toolkit?

Question

Как определить класс Widget для панели инструментов с кнопками в Dojo Toolkit?

1

Я создам новую панель инструментов со стандартными кнопками действий (Add, Edit, Remove, Refresh). Я написал для этого простой класс:

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/Toolbar",
    // Template for new widget
    "dojo/text!/ui/widgets/StandardToolbar.html",
    // Load dijit/form/Button widget as dependency for parsing template
    "dijit/form/Button"
], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Toolbar, templateString){
    return declare("app.StandardToolbar", [
        _WidgetBase,
        _TemplatedMixin,
        _WidgetsInTemplateMixin,
        Toolbar
    ], {
        templateString: templateString
    });
});

Шаблон расширен с основной панели инструментов:

<div class="dijit" role="toolbar" tabIndex="${tabIndex}" data-dojo-attach-point="containerNode">
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="addButton">Add</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="editButton">Edit</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="removeButton">Remove</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="refreshButton">Refresh</button>
</div>

И это не работает. Кнопки на панели инструментов отображают как стандартные HTML-кнопки, а не виджеты Dojo. Что я делаю неправильно?

Dunaevsky Maxim 27 апр. 2018, в 15:24

Источник

0

Вы не создадите свою собственную панель инструментов?
Springer F 27 апр. 2018, в 13:24
0

Не могли бы вы показать нам, как вы создаете свой виджет!? также есть ошибка в консоли
Springer F 27 апр. 2018, в 13:32

Теги:

javascript

widget

dojo

dijit.form

1 ответ

Ещё вопросы

Вы не создадите свою собственную панель инструментов?
Не могли бы вы показать нам, как вы создаете свой виджет!? также есть ошибка в консоли

Boo Berr'ita · Accepted Answer · 2018-04-27T11-10-00.000Z

Я думаю, вы просто пропустили установку data-dojo-type='dijit/Toolbar' типа dojo data-dojo-type='dijit/Toolbar' в вашем шаблоне containerNode div.

Вы должны установить:

<div data-dojo-type='dijit/Toolbar' class="dijit" role="toolbar" tabIndex="${tabIndex}" data-dojo-attach-point="containerNode">

require(["dijit/Toolbar", "dijit/form/Button","dojo/parser", "dojo/domReady!"], function(Toolbar, Button, Parser) {
  Parser.parse();
});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div class="dijit" data-dojo-type='dijit/Toolbar' role="toolbar" tabIndex="${tabIndex}" data-dojo-attach-point="containerNode">
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="addButton">Add</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="editButton">Edit</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="removeButton">Remove</button>
  <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="refreshButton">Refresh</button>
</div>
</div>