我想在Qooxdoo应用程序中有一些对话框,但我不知道如何在某些情况下定义它们。
在Qooxdoo演示(它是小部件 - 窗口示例,函数getModalWindow2)中,我看到窗口可以像简单的JS函数一样定义,返回它的小部件。 有没有更好的方法在Qooxdoo中制作对话框?
据我所知,我可以为对话框窗口定义类,并为该类设置一些类属性。那么,如何在应用程序中添加一些复杂形式的对话框?
例如,它可能是服务器上的用户目录树。在用户按“确定”按钮后,所选择的树元素必须存储在对象类的对象中,此对话框将被关闭。
答案 0 :(得分:1)
现在我找到了回答我自己的问题(在俄语blog关于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);
}
});