I have a flex datagrid (an advancedDatagrid precisely) due different columns.
The fourth and fifth columns have an editor which display a maskedtextinput for enabling the field editing.
The adjacent column (6th) is clickable (rendered though a linkbutton).
the issue is that if the fifth column shows the textinput after user interaction (after clicking/selecting text/typing) moving the mouse over the linkbutton doesn0't shows the hand cursor, and clicking is not working.
Enlarging the column size makes this issue disappear and the hand cursor is correctly displayed, so I guess it's something related to default width of the textinput used in the fifth column.
Those 2 imageds shows the issue before and after enlarging the column:
This is the editor code for the textinput column, I tried to reduce the width manually costraining it to the real size of the column.
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
xmlns:components="it.sabacom.generale.view.components.*"
focusIn="mxadvanceddatagriditemrenderer1_focusInHandler(event)"
focusEnabled="true">
<mx:VBox width="50" horizontalAlign="center">
<controls:MaskedTextInput id="smOraFine" inputMask="##:##" change="error10=true;"
width="50" text="{data.hhFine} "/>
</mx:VBox>
I even tried to set mouseChildren="false" useHandCursor="true" buttonMode="true" on the clickable column, with no result.
Related
I'm trying to make a button in Flash Builder 4.5 that is multi-lined (specific line break, both are left justified), with the second line being italicized. I can do this by making a button, and throwing a label on top of it, but it wrecks the button functionality where that label sits.
Is there an easy functionality to do this, or is it starting to step into custom skins? (I've looked at it, but I'm pretty new to FB, and it looks like a steep learning curve)
Yeah, you definitely want skinning. It's fairly easy since it generates all the code for you. You just need to find the label for the button and modify it to your will.
Sorry to say, but this is the only way to do it properly. If what you're trying to do is just hack it together, I don't think you should be touching code...
Minor clarification/addition:
While having multiple lines in the button label is as easy as setting the 'maxDisplayedLines' attribute of the 'labelDisplay' in the skin to anything larger than '1', s:Label does NOT support multiple styles; i.e. you can't have one line regular and the second line italic.
FTQuest
To create a multi-lined Label of a Button:
Skin your Button (Simplest way: Create Skin from the Design view)
In the Skin, scroll to where you see the Label with the id="labelDisplay"
Set a Fixed Width to that Label in the Skin & you're Done!
Once you populate the label property of the Button, it'll auto multi-line for you
There was nothing I've found to do what I wanted to do (I did find Flexlib and canvasButton, but it didn't seem to work for me)
What I ended up doing is making my own "simulated" buttons. A container with 2 lines of labels (one normal, one italic, like I wanted) with another container over it. mouseOver and mouseOut and click were all bound to the top container to make it seem like one large button. (I also used some alpha transparency to simulate highlighting.
For the curious (or other beginners with similar issue) -this is what I've done
<s:BorderContainer id="bottomContainer" x="129" y="99" width="200" height="44" backgroundColor="#EEEEEE"
borderVisible="false" cornerRadius="6">
<s:Label id="encLabel1" x="48" y="8" color="#000000" fontFamily="Arial"
text="Create a new encounter"/>
<s:Label id="encLabel2" x="48" y="24" color="#000000" fontStyle="italic"
text="Single encounter"/>
<s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>
<s:BorderContainer id="coverContainer" x="129" y="99" width="200" height="44" backgroundColor="#000000"
borderVisible="false" cornerRadius="6" alpha=".1" mouseOver="alphaOver(event)" mouseOut="alphaOver(event)" click="trace('working')">
</s:BorderContainer>
I am using the following code to insert a DataGrid object into a basic Panel:
<mx:DataGrid borderThickness="0"
height="120" dataProvider="{collection}"
rowHeight="12" fontSize="9"
showHeaders="false" verticalGridLines="false">
<mx:columns>
<mx:DataGridColumn dataField="field1" headerText="Field 1"/>
<mx:DataGridColumn dataField="field2" headerText="Field 2"/>
</mx:columns>
</mx:DataGrid>
My point for setting both rowHeight and fontSize properties is that I need the DataGrid to be compact, with very little space between each row. But with this code I end up with most of the text "truncated": only the upper part of the symbols appears on each row, and the rest is cut by some empty space.
This I guess is due to the default margins inside DataGrid cells, that take priority over the text itself when displaying.
Is there a way to fix this problem? And is there any reason why Adobe did not let the margin property be set?
Thanks for your help.
I would suggest you make a custom item renderer based on mx:label ( if the case for you is text only ) and then set the styles you need. Eg. paddingTop/ left/right/bottom.
You can read about ItemRenderers here: Using an item renderer with an MX DataGrid control
I am using Advanced DataGrid of Flex 3 with hierarchical data
and also i added tile list as a item renderer in another column
in that tile list i added radiobutton as item renderer
if i change the radio selected value the hierarchical tree sould expand
if the scroll bar will come the radio button value is changing
<mx:AdvancedDataGrid contextMenu="{cm}" backgroundAlpha="0" styleName="TreeUser" dataProvider="{modelInstance._treeUserXml}"
id="treeAdg" width="100%" height="100%" showHeaders="false" doubleClick="treeDoubleClick(event)" doubleClickEnabled="true"
displayItemsExpanded="false" click="onItemClick(event)" borderStyle="none" rowHeight="25">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name"/>
<mx:AdvancedDataGridColumn id="treeItem" itemRenderer="com.Frontend.views.TreeUser.TreeStructureTileList"/>
</mx:columns>
this is advanced data grid adding hierarchical data as a data provider
<containers:TileListEx id="tileList" width="100%" height="100%" textAlign="left"
horizontalScrollPolicy="off" verticalScrollPolicy="off" direction="horizontal"
dataProvider="{data.driver}" itemClick="tileItemClick(event)"
backgroundAlpha="0" borderStyle="none" paddingLeft="0" paddingTop="0"
useRollOver="false" rowHeight="25" itemRenderer="com.Frontend.views.TreeUser.tieListRenderer">
</containers:TileListEx>
and this is the tile list where i added data.driver as a dataprovider<mx:RadioButton id="radio" label="{data.name}" click="checkClick(event)" width="100%"/>
if i click the radio button value its changing but if scroll will come the value will changing randomly because of itemrenderer help me to resolve this problem
The problem you're facing is simply that the components created as instances of itemRenderer are reusable across your TileList. So if let's say you click RadioButton that is itemRenderer of first item of the List and then you scroll down, the clicked RadioButton (that dissapeared due to scrolling) will be used as itemRenderer of one of the items that appeared. What you have to do is make your itemRenderer somehow dependent on 'data' property, like adding 'selected' property to it for example and displaying RadioButton as checked if data.selected==true. You also need to set selected to appropriate value in your RadioButton click handler.
I have a datagrid contained in a vbox, this datagrid acts as a spreadsheet it contains 70 columns, initially 10 are visible and the rest are hidden and the user selects which other colums to show dynamically.
I need this datagrid to use the maximum screen width available, so I have set the application's width to 100% as well as the vbox and the datagrid, I also set the horizontalscrollpolicy of the datagrid to "auto" so as that the more the columns the user selects he can use the grid's horizontal scroll bar to view the rest of the added columns. This ofcourse will vary according to the size of the monitor if the user has a huge one he won't have a very long scroll bar like users with small or medium sized monitors.
The problem is the more the columns I show, the datagrid reszies itself causing the application's horizontal scroll bar to appear leaving me with 2 adjacent horizonal scroll bars the one of the datagrid and below it the one of the application. This is both confusing and irritating for the user, now I have to use both scrollbars to see the new columns added plus other controls above the datagrid are not completely visible, I have to scroll the application's bar to the right to see them.
I don't understand, why does the datagrid stretches itself after a certain number of columns. Testing it at a resoluion of 1280x800 initially when the datagrid is with 10 columns and I start showing the other columns the datagrid's horizontal scroll bar automatically show's and it keeps getting longer while am adding more columns once i reach the column number 50 the datagrid stretches itself and the application's horizontal scroll bar appears (the number 50 will be different ofcourse with another resolution).
How can I stop this behavior? I only want the datagrid to fill the maximum screen width available and when there are more columns then there will only be the datagrid's horizontal scroll bar to use for scrolling left & right through the grid only and not the whole application.
Thanks in advance
I found 2 solutions either set the datagrid's property minColumnWidth to a small value like 5 for example and this will fix the width of the datagrid and prevent the application's scrollbar from showing or you can use this solution found here
I think you may want to change your approach. Turn the Horizontal scroll policy of the dataGrid off, and use the scrollbar for the container object. Then as each column is shown you can add to the width of the datagrid. In my experience this is going to give you a much more consistent result than trying to force the scrollbar on the datagrid.
According to me I don't think VBox is necessary; maybe you have to manage the scrollPolicy and the max/min height/width values.
Try this example, changing the VALUE AAAA/BBBB with your values.
Hope to be useful
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
minWidth="VALUE AAAA"
minHeight="VALUE BBBB" verticalScrollPolicy="off"
horizontalScrollPolicy="off"
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:DataGrid resizableColumns="false"
horizontalScrollPolicy="on"
verticalScrollPolicy="on"
width="VALUE AAAA"
height="VALUE BBBB">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:WindowedApplication>
I have list for which I require some space between the items and the list margin. The items inside the list are rendered from some other file. But when I add padding I cannot see any difference.
Something like this:
<mx:List id="List" selectionColor="red" itemRenderer="renderers.List"
doubleClick="Handler()" width="500" cornerRadius="4"
textAlign="center" height="335">
Also when mouse is rolled over only the item has to be highlighted excluding the padding.
Any suggestions? A sample code will be very useful.
Thanks
You are looking for useRollOver for, well, adding roll overs.
<mx:List useRollOver="true" />
As for the padding, you will need to do that in a custom item renderer.
Here is a good article to help you get started on making a custom item renderer:
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
The below already has space between the left and right edges of the list and the items in the list, with them being laid out in the centre of the list. This is using the default itemRenderer.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:List id="List" selectionColor="red" width="500" cornerRadius="4"
textAlign="center" height="335">
<mx:Array >
[1,2,3,4]
</mx:Array>
</mx:List>
</mx:WindowedApplication>
Are you rendering text or images?
As for the selection of only the item and not the extra space, I'm not too sure about that one.