I have a datagrid column as follows:
<mx:DataGridColumn
headerText="Description"
dataField="description"
editable="true"
editorXOffset="2" editorYOffset="2"
editorHeightOffset="20" editorWidthOffset="60"
itemEditor="com.jono.controls.DgItemEditor"
wordWrap="true"
/>
And a very simple DgItemEditor:
<?xml version="1.0" encoding="utf-8"?>
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml"
wordWrap="true" backgroundColor="#FFFFFF" backgroundAlpha="1">
</mx:TextArea>
Basically, this allows for a small 'popup' when the user edits a cell in the datagrid, allowing for more space to type. The problem that I am having is that the datagrid gridlines show through the itemeditor - i.e. the itemeditor is transparent. Is there any way that I can force it to be opaque?
First try setting the value of backgroundColor="0xFFFFFF" ... it's expecting a uint there, not a string. This can be confusing, because when you use a CSS stylesheet, you have to use the hash format (#FFFFFF).
Failing that, you could try putting the TextArea inside a Canvas in your itemEditor. Set the backgroundColor="0xFFFFFF" on the Canvas and backgroundAlpha="1.0".
Related
I have a compoonent inside flex4.5 in 3 columns
When I add some elements, soemtimes these one of these elements just got invisible:
when I resize the browser, it appears again.
There is no rule: it happens randomly and element is always avaible: I tried with referesh, update but this do not help.
ANy idea on why this happens and how to solve that bug ?
<mx:DataGrid id="rowcolordatagrid1" left="10" right="10" top="49" variableRowHeight="true"
bottom="58" borderColor="#CCCCCC" color="#5A5A5A" dataProvider="{questions_dp}" symbolColor="#CCCCCC">
<mx:columns>
<mx:DataGridColumn dataField="data" headerText="{xml.questions}" itemRenderer="QuestionRenderer" sortable="false"/>
<mx:DataGridColumn width="150" headerText="{xml.action}" itemRenderer="ActionRenderer" sortable="false"/>
<mx:DataGridColumn dataField="priority" headerText="{xml.priority}" itemRenderer="PriorityRenderer" width="100" />
</mx:columns>
</mx:DataGrid>
of course I tried questions_dp.refresh();
But when I resize or minimize my browsers, these blank lines appear again !
These lines happens sometimes : I would say 20% of chance some rows are invisible.
reagrds
I think the reason is because your item render.
remove 'QuestionRenderer' and try again.
if it is OK for the first column, then check all your render class:
Did you forgot to call super.method(..) with in every override metod in you render class?
I have an item renderer tied to an mx:DataGrid column. The renderer used to be inline with the column, but I've moved it out to its own file so I can reuse it across multiple tables.
The problem is that now the renderer doesn't resize (grow/shrink) when the column is resized. So if the user makes the column very small, the contents displayed by the renderer just eat up space and show up over top other columns Any ideas how to make this work?
Code for Item Renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<mx:HBox verticalScrollPolicy="auto" horizontalScrollPolicy="off" width="100%">
<mx:Spacer top="0" bottom="0" width="4" />
<mx:Image id="typeIcon" buttonMode="false" source="{data.type}" />
</mx:HBox>
</s:MXDataGridItemRenderer>
Code for column using that renderer:
<mx:DataGridColumn headerText="Type" dataField="type" itemRenderer="com.myCompany.myProject.TypeRenderer" />
Edit
Adding width=100% to the MXDataGridItemRender didn't work.
I posted my question on Adobe's flex forum -- the solution was to remove the outer s:MXDataGridItemRenderer and to just let the mx:HBox be the root control (no other changes were necessary.)
Strange that he Flex Builder app doesn't give you the option of defining the outermost control, it just plops an s:MXDataGridItemRenderer on top...
I have a problem with inline components. I want to reach an inline component from another one.. From the first component, i want to change "enable" value of the linkbutton named "Add" which is in second component. Altough i gave "id" and "className" to second one, i could reach neither it nor its elements.. is there a way to do this?
*in first component there is a text input in "CodedDescriptionItemEditor" component. I want to validate it and according to validation enable the button that i mentioned above..
These all are in a datagrid by the way. In datagrid, there is always a row that you can enter data and via the "Add" button you can save it. After save it seems as text..
Thank you..
Here is my code:
<mx:columns>
<mx:DataGridColumn headerText="{Problem}" wordWrap="true" textAlign="left" sortable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:ViewStack selectedIndex="{outerDocument.index(data)}" >
<mx:HBox>
<mv:CodedDescriptionItemEditor id="editor" codePM="{outerDocument.problemListPanelPM.getProblemDescPM(data)}"
width="100%" styleName="phrFormItemInput"/>
</mx:HBox>
<mx:HBox>
<mv:CodedDescriptionItemRenderer id="renderer" codedDescPM="{outerDocument.problemListPanelPM.getProblemDescPM(data)}" />
</mx:HBox>
</mx:ViewStack>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="" textAlign="center" editable="false" width="50" resizable="false" sortable="false">
<mx:itemRenderer>
<mx:Component className="buttonColumn">
<mx:ViewStack selectedIndex="{outerDocument.index(data)}" >
<mx:HBox horizontalAlign="center" width="100%">
<mx:LinkButton id="Add" icon="#Embed('img/add.png')"
toolTip="{outerDocument.Add_Problem}"
click="outerDocument.addHandWritten()"
enabled="false" />
</mx:HBox>
<mx:HBox horizontalAlign="center" width="100%">
<mx:LinkButton id="Delete" icon="#Embed('img/delete.png')"
toolTip="{outerDocument.Remove_problem}"
click="outerDocument.removeProblem()"/>
</mx:HBox>
</mx:ViewStack>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
Inline components in MXML are not instances but classes. So that kind of "reaching" has no sense. To combine this knowledge together to operate them I recommend you the following simple rule (which I follow and haven't problems with understanding class/instances relations):
Do not use inline components in MXML excluding simple cases on a
prototyping stage.
So in your case I recommend you to extract inline components into separate MXML classes and throw all the outerDocument references (you can replace them with events with bubbling). After that I think it will be much easier to understand and improve your design and find appropriate solution.
Another advice is use data-driven way to operate with renderers. This way is about operating data items of data provider but not getting and setting data from outer document directly. Use data binding to bind changed data between different item renderers in different columns.
In this case, you might want to keep a boolean var isAddEnabled in your outerDocument and change your enabled as below:
enabled="{outerDocument.isAddEnabled}"
Change this isAddEnabled based on your validation criteria.
As you don't want it to be applied to all your items, either keep a property in your dataProvider(preferred) OR maintain another collection of same length as your dataProvider (not recommended).
I am trying to overlay a label onto an AdvancedDataGrid when there are no results returned from a call for the data.
Here is a mockup of what I am trying to accomplish http://i.stack.imgur.com/6Djga.png
I tried following this previous answer: Drawing an overlay in custom flex component, but this would not work for me because an AdvancedDataGrid is not a Container (and as such does not have a rawChildren property).
I would prefer not to need to mess with the data provider, because this table will be used in many location which will have different columns and labelFields.
Any suggestions welcome.
To give a quick example as to what Flextras mentioned:
<s:Group>
<mx:DataGrid dataProvider="{myDataProvider}">
<mx:columns>
<mx:DataGridColumn dataField="test1" />
<mx:DataGridColumn dataField="test2" />
<mx:DataGridColumn dataField="test3" />
<mx:DataGridColumn dataField="test4" />
</mx:columns>
</mx:DataGrid>
<s:Label text="Overlay text here" visible="{myDataProvider.length == 0}" x="10" y="35" />
</s:Group>
Put the AdvancedDataGrid in a container along with the label overlay. Position the label on top of the DataGrid; and change it's visibility based on the dataProvider's length.
I'm pretty new in Flex development. Now I'm learning layouts in Flex. I try to make the following layout.
alt text http://get2know.it/wp-content/uploads/2010/04/2010-04-23_232857.png
The red arrow means when enlarge the window, the red arrow widget will become large too. Can anyone implement this layout in Flex? Thanks in advance.
Here goes Yousui good luck:
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Label text="Name:" left="9.8" top="16.4" width="38" height="12"/>
<s:Label text="Description:" left="9.75" top="45.85"/>
<s:Label text="Pattern:" left="9.5" top="76"/>
<s:TextInput left="85" top="10" right="353"/>
<s:TextInput left="85.5" top="40" right="10.5"/>
<s:TextArea left="86" top="70" right="7" bottom="34"/>
<s:Button label="Insert Variable" bottom="6" left="86"/>
<s:Label text="Context:" width="45" top="16" right="300"/>
<s:ComboBox width="150" top="10" right="143"/>
<s:CheckBox label="Automatically insert" top="11" right="10.700012"/>
<s:Button label="Cancel" right="7" bottom="6.450012"/>
<s:Button label="OK" right="84.599976" bottom="6.799988"/>
If you are using Flash Builder Mac or Win version you have the Design view available (Linux Flash Builder doesn't have), this design would be easy to do.
But i guess that you probably aren't used to the way that Flash Builder handles control positioning, if thats the case:
Paste this code in the MXML file you have
Go to Design view and select one of these controls.
You will see in the Properties Panel in the Size and Position section, a sub section named Constrains, there is were you can lock (right, left, top and bottom) the corners of your control in a way that you would get the desired effect that you needed.
Case your Properties panel isn't visible. Go to Window > Show View > Properties.
Hope this helps.
EDIT:
If you have the MinWidth and MinHeight properties specified in your Application tag, beware that when shrinking your Flash App, the layout will adjust your layout to a minimum specified in those properties.
You could do something like this:
<VBox>
<HBox>
... // Name, context...
</HBox>
<HBox>
... // Description...
</HBox>
<HBox>
<Label text="Pattern: "/>
<VBox>
... // text and insert variable
</VBox>
</HBox>
</VBox>
For your scaling, just set your expanding controls to have width and/or heights of "100%" in the MXML.