如何在按钮上添加两个图标

Question

我想创建一个带有两个图标的按钮。一个在左边和右边。我该怎么做？

示例：https://archive.qooxdoo.org/current/playground/#Hello%20World-ria

Answer 1

这个想法是重新定义_createChildControlImpl方法，并在那里创建第二个图标：

qx.Class.define("myapp.Button", {
extend : qx.ui.form.Button,
construct(name, path){
this.base(arguments, name, path);
this._createChildControl("secondicon");
},
members: {
_createChildControlImpl(id, hash){
let control;
switch(id) {
case "secondicon":
control = new qx.ui.basic.Image(this.getIcon());
this._add(control);
break;
}
return control || super._createChildControlImpl(id);
}
}
});

Answer 2

或者，您可以利用每个小部件本质上都是一个容器的事实。您可以调用按钮的_add方法，如下所示：

var button1 = 
new qx.ui.form.Button("First Button", "icon/22/apps/internet-web-browser.png");
// Add another icon. It'll be added after whatever has already been
// added to the button, which is the original icon and the button text.
button1._add(new qx.ui.basic.Image("icon/22/apps/internet-web-browser.png"));