Question

My Class extends gxt button and I would like to add a checkBox in the button
but there is no method for the addition of a component in button.

import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.CheckBox;

public class ButtonCheckBox extends Button {

    private CheckBox checkBox;

    public ButtonCheckBox() {
        checkBox = new CheckBox();
        checkBox.setBoxLabel("CheckBox");

        setWidth(200);
    }
}

How can I, if possible, add a chckbox in my button?

Answer 1

It doesn’t seem to be possible using the GXT 2.x standard API, but may be achieved using an HTML Template.

Assuming the purpose of the checkbox is to serve as an indicator for the button state, i suggest you use a ToggleButton instead and modify its appearance. You can assign a CSS classname to it and apply differing background images according to its varying states:

.my-toggle-button .x-btn-mc {
    background-image: url('images/toggle-button/checkbox-off.png');
}

.my-toggle-button.x-btn-pressed .x-btn-mc {
    background-image: url('images/toggle-button/checkbox-on.png');
}

References (on the GXT 2.2.5 API)

• Template
• ToggleButton