Qooxdoo диалоги - PullRequest
Новая
       18

Qooxdoo диалоги

2 голосов
/ 13 сентября 2011

Я хочу иметь некоторые диалоги в приложениях Qooxdoo, но я не знаю, как определить их для некоторых ситуаций.

В демонстрационных программах Qooxdoo (это был виджет - пример окна, функция getModalWindow2), я виделэто окно может быть определено как простая функция JS, возвращающая свой виджет.Есть ли лучший способ создавать диалоги в Qooxdoo?

Как я понял, я могу определить класс для диалогового окна и установить некоторые свойства класса для этого класса.Итак, как добавить в приложение несколько диалогов со сложными формами?

Например, это может быть дерево пользовательских каталогов на сервере.И выбранный элемент дерева должен быть сохранен где-то в объекте для класса диалога после того, как пользователь нажмет кнопку «Ок», и этот диалог будет закрыт.

1 Ответ

1 голос
/ 15 сентября 2011

Теперь я нашел ответ на свой вопрос (в русском блоге о Qooxdoo, здесь я переведу ответ).

Итак, для основныхприложение и диалоговое окно.

В диалоговом окне мы добавляем qx.event.type.Data для вывода результатов через это событие.

Так, например, мыимея приложение Qooxdoo, которое называется «custom», как в документации.

В Application.js мы помещаем этот код для работы с классом: 

    // Adding dialog window
    this.__uiWindow = new custom.UserDialog();
    this.__uiWindow.moveTo(320, 30);
    this.__uiWindow.open();

    // Adding the listener for pressing "Ok"
    this.__uiWindow.addListener("changeUserData", function (e) {
        this.debug(e.getData());
    });

e.getData () предоставляет полученную информацию.

Затем мы должны создать файл с именем UserDialog.js для класса, содержащий событие и форму: 

    qx.Class.define("custom.UserDialog", {
        extend: qx.ui.window.Window,
        events: {
            "changeUserData": "qx.event.type.Data"
        },
        construct: function () {
            this.base(arguments, this.tr("User info"));

            // Layout
            var layout = new qx.ui.layout.Basic();
            this.setLayout(layout);
            this.setModal(true);

            this.__form = new qx.ui.form.Form();

            // User id field
            var usrId = new qx.ui.form.TextField();
            this.__form.add(usrId, this.tr("ID"), null, "Id");

            // User password field
            var usrPassword = new qx.ui.form.PasswordField();
            usrPassword.setRequired(true);
            this.__form.add(usrPassword, this.tr("Password"), null, "Password");

            // Adding form controller and model
            var controller = new qx.data.controller.Form(null, this.__form);
            this.__model = controller.createModel();

            // Save button
            var okbutton = new qx.ui.form.Button(this.tr("Ok"));
            this.__form.addButton(okbutton);
            okbutton.addListener("execute", function () {
                if (this.__form.validate()) {
                    var usrData = qx.util.Serializer.toJson(this.__model);
                    this.fireDataEvent("changeUserData", usrData);
                    this.close();
                };
            }, this);

            // Cancel button
            var cancelbutton = new qx.ui.form.Button(this.tr("Cancel"));
            this.__form.addButton(cancelbutton);
            cancelbutton.addListener("execute", function () {
                this.close();
            }, this);

            var renderer = new qx.ui.form.renderer.Single(this.__form);
            this.add(renderer);
        }
    });
...