I am having an issue trying to center checkboxes without modifying the structure on DataGridColumn, after the migration from flex 3 to 4 the checkboxes are not appearing centered, is there any trick to center the checkboxes using css?
<mx:DataGridColumn
headerRenderer="mx.controls.CheckBox"
itemRenderer="mx.controls.CheckBox"
textAlign="center"
editable="false" width="50"/>
PD: looks like textAlign="center" is just working for text labels now.
You can write an inline Headerrenderer and Itemrenderer for the datagridcolumn as below
<mx:DataGridColumn
textAlign="center"
editable="false" width="50">
<mx:headerRenderer>
<fx:Component>
<mx:Canvas width="100%" height="100%">
<mx:CheckBox horizontalCenter="0" />
</mx:Canvas>
</fx:Component>
</mx:headerRenderer>
<mx:itemRenderer>
<fx:Component>
<mx:Canvas width="100%" height="100%">
<mx:CheckBox horizontalCenter="0" />
</mx:Canvas>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Related
I want the TextArea under my second tab to update when the tab is clicked. However, it's only updating when I click on the TextArea or the container for that text area.
Flex:
<mx:Box paddingLeft="0" paddingRight="0" paddingBottom="0" paddingTop="0" width="100%" height="100%"
<mx:VBox id="vbxHTMLBody" width="100%" height="100%" horizontalScrollPolicy="off" horizontalAlign="center">
<mx:TabNavigator id = "tabNav" borderStyle="solid" width="100%" height="100%" creationPolicy="all">
<mx:VBox label="Tab1" width="100%" height="100%">
<mx:TextArea id="textArea1" paddingTop="25" paddingLeft="25" paddingRight="25" verticalScrollPolicy="on" focusThickness="0" borderThickness="0" borderStyle="none" editable="true" fontFamily="Arial" fontSize="14" width="100%" height="100%"/>
</mx:VBox>
<mx:VBox label="Tab2" width="100%" height="100%" click="updateTextArea2()">
<mx:TextArea id="textArea2" paddingTop="25" paddingLeft="25" paddingRight="25" verticalScrollPolicy="on" focusThickness="0" borderThickness="0" borderStyle="none" editable="true" fontFamily="Arial" fontSize="14" width="100%" height="100%"/>
</mx:VBox>
</mx:TabNavigator>
</mx:VBox>
</mx:Box>
ActionScript:
private function updateTextArea2(): void {
textArea2.htmlText = textArea1.text;
tabNav.validateNow();
textArea2.validateNow();
}
*I've also tried setting the click listener to the outer containers and that hasn't worked either.
I used change="updateTextArea2()" to listen for any changes made to the text area.
Call updateTextArea2()on change of the TabNavigator:
<mx:TabNavigator id="tabNav" change=updateTextArea2()">
instead from VBox change.
My Flex MX list has this itemRenderer
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" autoLayout="true" horizontalScrollPolicy="off">
<mx:Label y="0" right="0" text="{data.hour}" textAlign="right"/>
<mx:HBox left="0" right="0">
<mx:Label text="{data.username}" />
<mx:Text id="text1" text="{data.text}"/>
<mx:Image />
<mx:Button />
</mx:HBox>
</mx:Canvas>
My problem is : I want the MX Text id="text1" to be multi line if {data.text} grows.
Set width and height properties to mx:Text component
How to implement horizontal scrollbar for specific column of datagrid in flex? Say I have a column whose rows are showing particular rendered graphics component. If it exceeds column width then how can I set up scrollbar for that particular column? If I set horizontalScrollPolicy="on" then it sets horizontal scrollbar for whole datagrid. I want that for particular column.Can this be done?
You have not specified which version of the datagrid component you use (mx or spark). Here are examples for both of them. I have used a simple text as content of the scrolled column. One can use such approach whatever the content is.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]private var collection:ArrayCollection = new ArrayCollection([
{field01:"field01", content:"your content your content your content your content", field02:"field02"},
{field01:"field01", content:"your content your content your content your content", field02:"field02"},
{field01:"field01", content:"your content your content your content your content", field02:"field02"}
]);
]]>
</fx:Script>
<s:VGroup x="10" y="10">
<!-- the new Spark DataGrid -->
<s:DataGrid
width="300" height="180"
rowHeight="50"
dataProvider="{collection}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="field01" headerText="Field 1"/>
<s:GridColumn dataField="content" headerText="Content" width="100">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Scroller width="100%" height="100%">
<s:HGroup width="100%" height="100%" verticalAlign="middle">
<s:Label text="{data.content}" width="300"/>
</s:HGroup>
</s:Scroller>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="field02" headerText="Field 2" width="100"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<!-- the old MX DataGrid -->
<mx:DataGrid
width="300" height="180"
rowHeight="50"
dataProvider="{collection}">
<mx:columns>
<mx:DataGridColumn dataField="field01" headerText="Field 1" width="100"/>
<mx:DataGridColumn dataField="content" headerText="Content" width="100">
<mx:itemRenderer>
<fx:Component>
<mx:HBox width="100%" >
<mx:Label text="{data.content}"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="field02" headerText="Field 2" width="100"/>
</mx:columns>
</mx:DataGrid>
</s:VGroup>
</s:Application>
//EDIT
Here is what I meaned by "faked approach":
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]private var collection:ArrayCollection = new ArrayCollection([
{field01:"field01", content:"your content your content your content your content", field02:"field02"},
{field01:"field01", content:"your content your content your content your content", field02:"field02"},
{field01:"field01", content:"your content your content your content your content", field02:"field02"}
]);
[Bindable]public var currentScrollPosition:int = 0;
]]>
</fx:Script>
<s:VGroup x="10" y="10">
<mx:DataGrid
width="300" height="180"
rowHeight="50"
dataProvider="{collection}">
<mx:columns>
<mx:DataGridColumn dataField="field01" headerText="Field 1" width="100"/>
<mx:DataGridColumn dataField="content" headerText="Content" width="100">
<mx:itemRenderer>
<fx:Component>
<mx:HBox width="100%" horizontalScrollPolicy="off">
<mx:HBox id="hbMove" x="{-outerDocument.currentScrollPosition}" width="300">
<mx:Label text="{data.content}"/>
</mx:HBox>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="field02" headerText="Field 2" width="100"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox horizontalGap="0">
<s:Spacer width="100"/>
<mx:HScrollBar id="sbMover" width="100" minScrollPosition="0" maxScrollPosition="300" scroll="{currentScrollPosition = sbMover.scrollPosition}"/>
</mx:HBox>
</s:VGroup>
</s:Application>
How do I add a border to a Flex VBox? My VBox is the renderer of a List. I've tried the following without success (in particular VBox's borderVisible="true" borderStyle="solid" borderColor="0x888888"):
<mx:List id="myList" dataProvider="{myData}"
width="100%" height="100%"
variableRowHeight="true"
verticalScrollPolicy="auto" horizontalScrollPolicy="auto">
<mx:itemRenderer>
<mx:Component>
<mx:VBox
width="100%" height="100%"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
borderVisible="true" borderStyle="solid" borderColor="0x888888">
<mx:HBox width="100%">
<mx:Label id="firstNameLabel" text="{data.firstName}"/>
<mx:Label id="lastNameLabel" text="{data.lastName}"/>
</mx:HBox>
<mx:Text id="descriptionLabel" text="{data.description}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
There is no borderVisible style or property on the Flex Container classes.
To see a border you need to set the borderStyle, borderColor and borderThickness styles.
Try the following styles for your VBox:
<mx:VBox
borderThickness="1" borderStyle="solid" borderColor="0x888888" ...>
...
</mx:VBox>
And in actionscript 3:
private var _vbox:VBox;
...
this._vbox.setStyle("borderThickness", "1");
this._vbox.setStyle("borderStyle", "solid");
this._vbox.setStyle("borderColor", "0x888888");
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var myData:ArrayCollection = new ArrayCollection([
{label:'a11',url: '../dol/assets/images/lalign.png', side:'left'},
{label:'a323',url: '../dol/assets/images/calign.png', side:'center'},
{label:'asdf45',url: '../dol/assets/images/ralign.png', side:'right'}]);
]]>
</mx:Script>
<mx:List id="myList" dataProvider="{myData}"
width="100%" height="100%"
variableRowHeight="true"
verticalScrollPolicy="auto" horizontalScrollPolicy="auto">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="100%"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
borderStyle="solid" borderColor="0x888888" borderThickness="3">
<mx:HBox width="100%">
<mx:Label id="firstNameLabel" text="{data.label}"/>
<mx:Label id="lastNameLabel" text="{data.url}"/>
</mx:HBox>
<mx:Text id="descriptionLabel" text="{data.side}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
</mx:Application>
borderVisible is nothing in flex, use borderStyle=solid, borderThickness, and borderColor attributes to show border
I have multiple HBoxes inside a VBox inside a canvas like so:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Canvas width="600" height="500">
<mx:VBox height="100%" left="10" right="10">
<mx:HBox width="100%" >
<mx:VBox width="48%" height="100%" horizontalAlign="left">
<mx:Label text="Label" />
</mx:VBox>
<mx:VBox width="48%" height="100%" horizontalAlign="left">
<mx:Label text="Label" />
<mx:HBox width="100%">
<mx:VBox width="48%">
<mx:Label text="Label" />
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:HBox>
<mx:VBox>
<mx:HBox>
<mx:Label text="Label" />
<mx:Label text="Label" />
</mx:HBox>
</mx:VBox>
<mx:HBox>
<mx:Label text="Label" />
<mx:ComboBox/>
</mx:HBox>
<mx:HBox>
<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false" >
<mx:Label text="Label" />
</mx:VBox>
<mx:VBox>
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false"
>
<mx:VBox >
<mx:Label text="Text" />
<mx:ComboBox />
</mx:VBox>
<mx:VBox>
<mx:Label text="Label" />
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false"
>
<mx:VBox>
<mx:Label text="Label:"/>
<mx:ComboBox />
</mx:VBox>
<mx:VBox>
<mx:Label text="Label: "/>
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:HBox>
<mx:HBox >
<mx:Label text="Label:" />
<mx:CheckBox />
</mx:HBox>
</mx:VBox>
</mx:Canvas>
</mx:Application>
The last child in the VBox is overlapping with other components. How do you prevent children of a VBox in a Canvas from overlapping? How do you debug this situation?
I have tried the following:
Removing percent based sizing
IncludeInLayout = true
Sceenshot - Label and Checkbox Overlapping:
It's hard to say with the information provided, but the two questions that come to mind first are:
Is your VBox height greater than the sum of the heights of its children?
Have you set the verticalGap property on the VBox? verticalGap determines vertical spacing between children.
I just tried this (AIR app) and it looks alright to me.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Canvas height="100%" width="100%"
borderStyle="solid"
backgroundColor="0x0000ff">
<mx:VBox height="100%" width="100%">
<mx:VBox backgroundColor="0xff0000" height="50%" width="100%">
<mx:HBox backgroundColor="0x000000" height="50%" width="50%"/>
<mx:HBox backgroundColor="0xffffff" height="50%" width="50%"/>
<mx:HBox backgroundColor="0x00ffff" height="50%" width="50%"/>
</mx:VBox>
<mx:HBox height="50%" width="100%"
backgroundColor="0xff0000" backgroundAlpha="0.5"
borderColor="0x000000" borderStyle="solid" borderThickness="1"/>
</mx:VBox>
</mx:Canvas>
</mx:WindowedApplication>
I resolved this by making the includeInLayout property of some of these components the same conditional used by their visible property.
Not sure what caused the issue though.