Qooxdoo框架BooleanRenderer：能否为布尔单元格渲染器设置宽高样式？

Absolutely! You can absolutely tweak the width, height, and other styling properties for a qx.ui.table.cellrenderer.Boolean in Qooxdoo. There are a couple of straightforward ways to do this, depending on your needs:

1. Use Custom CSS Classes #

Qooxdoo works seamlessly with custom CSS, so you can target the boolean renderer's elements directly. First, define your desired styles in your application's CSS file (or inject them inline):

/* Style the entire boolean cell */
.custom-boolean-cell {
  width: 50px !important;
  height: 30px !important;
  padding: 4px;
  background-color: #f5f5f5;
}

/* Target the inner checkbox/label element for finer control */
.custom-boolean-cell .qx-table-cell-label {
  width: 22px;
  height: 22px;
  margin: 0 auto;
}

Then assign this custom class to your renderer instance:

var booleanRenderer = new qx.ui.table.cellrenderer.Boolean();
booleanRenderer.setCssClass("custom-boolean-cell");

2. Extend the Renderer for Dynamic/Advanced Styling #

If you need dynamic styles (like adjusting size based on the cell's boolean value), you can extend the BooleanRenderer class and override key methods:

class CustomBooleanRenderer extends qx.ui.table.cellrenderer.Boolean {
  _getContentHtml(cellInfo) {
    // Grab the default HTML output from the parent class
    const baseHtml = super._getContentHtml(cellInfo);
    // Wrap it in a div with inline styles for consistent sizing
    return `<div style="width: 45px; height: 28px; display: flex; align-items: center; justify-content: center;">${baseHtml}</div>`;
  }

  // Optional: Add dynamic classes based on cell value
  getCellClass(cellInfo) {
    const baseClass = super.getCellClass(cellInfo);
    // Add a class that changes style when the value is true
    return cellInfo.value ? `${baseClass} boolean-active` : baseClass;
  }
}

// Initialize your custom renderer
var booleanRenderer = new CustomBooleanRenderer();

You can then pair this with additional CSS for the dynamic class:

.boolean-active {
  background-color: #e8f4e8;
}

Important Note #

Don’t forget that the table column’s width will also impact how your cell renderer displays. If you set a specific width on the cell, make sure the corresponding table column has a width that accommodates it. For example:

// Assuming you have a table column instance
tableColumn.setWidth(60);

内容的提问来源于stack exchange，提问作者Benayed Mohamed