qx.ui.form.Button()如何实现标签对齐

Question

enter image description here

var button1 = new qx.ui.form.Button("Button", "http://www.qooxdoo.org/current/widgetbrowser/resource/qx/icon/Tango/48/devices/camera-photo.png");
button1.setIconPosition("bottom");
button1.setWidth(200);

this.getRoot().add(button1,{ top: 20, left: 20 });

游乐场：tinyurl.com/y9rlxpxt

如何实现如图效果，标签左对齐，图标居中？

Answer 1

标签和图标的定位由 qx.ui.layout.Atom class 负责，虽然它允许自定义图标的位置，但文本会自动定位.

目前，Qooxdoo 中没有内置简单的方法来实现您正在寻找的东西 - 但是，解决问题的方法是查看 qx.ui.layout.Atom 并编写您自己的版本 - 即将使您完全控制图像和图标的定位方式。

编写自定义布局后，只需 button1.setLayout(new mypackage.MyCustomAtomLayout());

即可将其应用于每个按钮

Answer 2

您可以使用原子的子控件。您的问题的解决方案是：

button1.getChildControl("label").setAllowGrowX(true);
button1.getChildControl("label").setTextAlign("left");

qx.ui.form.Button()如何实现标签对齐

qx.ui.form.Button () How to implement label alignment

qooxdoo