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?
Thanks Eliran Malka and i done this using below code
import com.dips.pei.client.view.resources.Icons;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.widget.button.ToggleButton;
import com.google.gwt.user.client.ui.AbstractImagePrototype;
public class CheckBoxButton extends ToggleButton {
public CheckBoxButton() {
setIcon(AbstractImagePrototype.create(Icons.INSTANCE.notcheckedIcon()));
setId("checkBoxButton");
}
#Override
protected void onClick(ComponentEvent ce) {
super.onClick(ce);
if(isPressed()){
setIcon(AbstractImagePrototype.create(Icons.INSTANCE.checkedIcon()));
}else{
setIcon(AbstractImagePrototype.create(Icons.INSTANCE.notcheckedIcon()));
}
}
}
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
Related
I want to write a ComboBox with a custom Node object inside its Popup (rather than the common ListView). ColorPicker and DatePicker are good examples, which are the other two implementations of ComboBoxBase. I had thought I could easily extend ComboBoxBase, too, but since there is no popupProperty or popupFactory I don't know how to set the content. How else is it meant to be done? Or how ColorPicker and DatePicker do this?
ComboBoxPopupControl which extends ComboBoxBaseSkin contains getPopupContent(). That's the method you are looking for. In your own skin implementation, which extends one of the ComboBoxSkins, you can return the popup content you like (although it's not recommended to use private API)
public class CustomComboBox<T> extends ComboBox<T> {
#Override
protected Skin<?> createDefaultSkin() {
return new CustomComboBoxSkin<>(this);
}
}
public class CustomComboBoxSkin<T> extends ComboBoxPopupControl<T> {
public CustomComboBoxSkin(ComboBox<T> comboBox) {
super(comboBox, new CustomComboBoxBehaviour<>(comboBox));
}
#Override
public Node getPopupContent() {
return new Rectangle(150, 200);
}
// inherited methods ...
}
I used ComtextMenu to replace the commbox's popup like this:
ContextMenu menu = new ContextMenu();
MenuItem item = new MenuItem();
item.setGraphic(new Lable("test"));
menu.getItems.add(item);
commbox.setContextMenu(null);
commbox.setContextMenu(menu );
commbox.getContextMenu().show(comboBox, Side.BOTTOM, 0, 0);
It works fine.
I have created a custom widget, basically an Image and a text label.
What must I do so that I can now set the position of the text ( top/left/bottom of the image for example ) using nothing only CSS? I mean what methods would my class need so that the CSS styling can be applied to it?
ie Can I have a css class like so
.ImageAndLabel
{
imagePosition: top;
}
Heres my gwt class
public class ImageAndLabel extends Composite
{
private Label label = new Label();
private Image img = new Image("/images/pinkBackground.png");
protected final FlexTable contentTable;
public ImageAndLabel()
{
contentTable = new FlexTable();
initWidget(contentTable);
label.getElement().getStyle().setFontSize(40, Unit.PX);
contentTable.setWidget(0,0,img);
img.setHeight("200px");
contentTable.setWidget(0,1,label);
label.getElement().getStyle().setLeft(0, Unit.PX);
img.getElement().setId("popupImg");
label.getElement().setId("popupLabel");
}
public void setText(String text)
{
label.setText(text);
}
}
I guess what I'm after is can I create my own Custom CSS codes?
You can use flextable method for alignment.
example :
flexTable.getFlexCellFormatter().setAlignment(0, 0,
HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);
FlashBuilder/Spark mobile project view action bar.
Currently if you set the chromeColor of a button in the actionbar it only shows up when on the press state of the button. It does not change the color of the button default state. I could not find any way to style it.
After some digging I found that TransparentActionButtonSkin.as was overriding the drawBrackground function and specifically removing chromeColor and only allowing it to show on a the button down state.
I overrode that "little gem" with my own class.
package view_components
{
import mx.core.mx_internal;
import spark.skins.mobile.TransparentActionButtonSkin;
use namespace mx_internal;
public class ActionbarColoredButton extends TransparentActionButtonSkin
{
public function ActionbarColoredButton()
{
super();
}
override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
{
// omit super.drawBackground() to drawRect instead
// only draw chromeColor in down state (transparent hit zone otherwise)
//NO, I want colored action buttons
var chromeColor:uint = getStyle(fillColorStyleName);
var chromeAlpha:Number = 1;
graphics.beginFill(chromeColor, chromeAlpha);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
}
}
I was wondering if anyone had any luck with the following senario in flex.
I'd like to be able to have a custom item renderer which delegates to another renderer inside.
The reason for this would be in a datagrid for instance displaying a checkbox if the dataprovider for the row had a boolean value. Using the default item renderer when the value was a non boolean.
Basically I was hoping to use a proxy object (though not necessarily the proxy class) so that I could a renderer which delegated all of its responsibilties to a sub renderer.
Hard to explain.
Edit 1
I think the following gives a clearer idea of what I had in mind. This is only knocked up quickly for the purpose of showing the idea.
SwitchingRenderer.as
package com.example
{
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridItemRenderer;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.core.IDataRenderer;
import mx.core.UIComponent;
public class SwitchingRenderer extends UIComponent implements IDataRenderer, IDropInListItemRenderer
{
private var checkboxRenderer:CheckBox;
private var defaultRenderer:DataGridItemRenderer;
private var currentRenderer:IDataRenderer;
public function SwitchingRenderer()
{
this.checkboxRenderer = new CheckBox();
this.defaultRenderer = new DataGridItemRenderer();
this.currentRenderer = defaultRenderer();
super();
}
public function get data():Object
{
//If the data for this cell is a boolean
// currentRender = checkBoxRenderer
// otherwise
// currentRenderer = defaultRenderer
}
public function set data(value:Object):void
{
currentRenderer.data = value;
}
public function get listData():BaseListData
{
return currentRenderer.listData;
}
public function set listData(value:BaseListData):void
{
currentRenderer.listData = value;
}
}
}
If you're using Flex 4 spark components look into the itemRendererFunction,
Here is a good sample from the interwebs.
Unfortunately, Flex 3 components, such as the DataGrid do not support that.
You're a bit vague on what you'd be displaying if the data sent into the itemRenderer was not a Boolean value. But, you can easily modify the visual appearance of a component based on the data change event, including swapping visible properties of a component's children, changing states or change the selectedIndex of a ViewStack. All these things can be done within an itemRenderer w/o issues.
Edit:
Based on the user's additional posting, I'd add that what he is after can be done like this:
public function get data():Object
{
if(this.data is Boolean){
checkBoxRenderer.visible = true;
defaultRenderer.visible = false;
} else {
checkBoxRenderer.visible = false;
defaultRenderer.visible = true;
}
}
I want to remove the highlight that occurs when mouse over occurs on the headers of a DataGrid.
If you don't need sorting on that column, just set sortable to false, and it won't get highlighted on mouse over.
Maybe the following hack will help someone.
I simply wanted to remove the rollover and selection from datagrid header (flex 3).
What I made:
1) Create a new subclass of DataGridHeader and override drawHeaderIndicator and drawSelectionIndicator
package
{
import flash.display.Sprite;
import mx.controls.dataGridClasses.DataGridHeader;
import mx.controls.listClasses.IListItemRenderer;
public class MyDataGridHeader extends DataGridHeader
{
public function MyDataGridHeader()
{
super();
}
override protected function drawHeaderIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
{
}
override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
{
}
}
}
2) Create a new subclass of DataGrid - lets say MyDataGrid and in constructor do the following:
public function MyDataGrid()
{
super();
this.mx_internal::headerClass = MyDataGridHeader;
....
}
This will force DataGrid to use your DataGridHeader.
This might help you:
http://jcraane.blogspot.com/2009/10/flex-how-to-create-different-rollover.html
Basically what I've found is that you can't just change it. It requires extending the header class and a whole bunch of other stuff I don't know how to do yet.
dont forget to add this import at MyDataGrid file
import mx.core.mx_internal;
works perfectly thanks.