ignar's log

Диалог подтверждения – dojoi.tools.confirm

Январь 21st, 2010 от admin Оставить свое мнение »

Добрый день!

GitHub

Спешу сообщить, что, как и обещал, все виджеты представленные в моих статья теперь содержаться на GitHub. github.com/ignar/dojoi где их можно найти и посмотреть.

dojoi.tools.confirm

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

Подбная вещь есть в ExtJS – официальный пример.

Статьи про Dojo Toolkit на DaddyFeed.com

Рабочий пример examples.ignar.name

Согласно названию файл будет располагаться в /dojoi/tools/confirm.js

dojo.provide('dojoi.tools.confirm');

dojo.require('dijit.Declaration');

// прежде всего, наследуем виджет простого диалога
dojo.declare('dojoi.tools.confirm', [dijit.Dialog], {
    // кешируем контент для многоразовых операций
    content: dojo.cache('dojoi.tools.templates', 'Confirm.html'),
    // указываем, что у нас будут виджеты в теле диалога
    widgetsInTemplate: true,
    postCreate: function(){
        this.inherited(arguments);
        // обходим область видимости переменной this
        var self = this;
        // прежде чем разбирать этот кусочек кода
        // я бы советовал взглянуть на файл шаблона ниже
        dojo.forEach(dijit.findWidgets(this.domNode), function(el){
            // находим все виджеты, которые содержит dijit.Dialog
            if (el.declaredClass == 'questionNode'){
                // если класс совпадаем, задаем содержание
                // элементу с шорткеем question (смотреть ниже)
                el.question.innerHTML = self.question || 'Подтвердите';
                // связываем события кнопок
                el.confirm.onClick = function(){
                    self.confirm();
                    self.hide();
                };
                el.cancel.onClick = function(){
                    self.hide();
                }
            }
        });
    },

    constructor: function(args){
        // при инициализации виджета проверяем на наличие
        // начальных опций
        if (args){
            this.question = args.question;
            this.confirm = args.confirm || function(){};
        }
    }
});

this.domNode – переменная, которая хранит верхний уровень html элемента виджета.
dijit.findWidgets – позволяем найти все виджеты по ниспадающей от определенного нода страницы.

Шаблон тела запроса в /dojoi/tools/templates/Confirm.html


    // подсветка стираем верный синтаксис
    // но атрибуты dojoType,widgetClass и dojoAttachPoint
    // должны быть в кемелкейсе

Если взглянуть на класс dijit._Templated, который лежит в основе шаблонов виджетов, можно увидеть атрибут dojoAttachPoint который позволяет ускорить
обращение к определенному ноду шаблона, без потребности задавать ему определенный ID или Class.

dijit.Declaration – класс позволяющий объявлять виджеты непосредственно в html
Что и происходит, widgetClass – класс название виджета, по которому его возможно инициализировать.

Помещаем слудующий код на страничку:

Статьи про Dojo Toolkit на DaddyFeed.com