I have a Flex HorizontalList like so:
<mx:HorizontalList id="myList" width="1462" height="878" columnCount="3" rowHeight="475" columnWidth="350" dataProvider="{floorPlans}" itemRenderer="FloorplanItems">
</mx:HorizontalList>
I am trying to set 3 columns per a row, I thought columnCount would do it, but either its not working and or is not doing what I thought it would be doing.
How can I set 3 columns per a row?
mx:HorizontalList is meant to list items in one row. The columnCount property is used to define the number of columns appearing without a need to scroll.
I suggest that you use Spark List "s:List" instead and define tile layout inside it in addition to specifying item renderer width that fits your needs.
<s:List id="addressesList" width="100%" height="100%" itemRenderer="FloorplanItems">
<s:layout>
<s:TileLayout id="tileLayout" horizontalAlign="justify" columnAlign="justifyUsingWidth"/>
</s:layout>
</s:List>
Hope this helps,
goodluck.
Related
I have a grid view like so:
<GridView ItemsSource="{Binding Source={StaticResource GroupedMatches}}"
SelectionMode="None"
ItemClick="OnItemClicked"
IsItemClickEnabled="True"
Grid.Row="4"
Grid.Column="1">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
GroupedMatches is a CollectionViewSource in the page:
<CollectionViewSource x:Name="GroupedMatches"
Source="{Binding Matches}"
IsSourceGrouped="True"
ItemsPath="Matches" />
Its backing view model is a class with Name and Matches properties where Matches is an IEnumerable.
When the above is rendered with three items spanning two groups, only two of the items are rendered. If I remove the GridView.GroupStyle then all three items are rendered as expected. Does anyone know what might be causing the item to be culled when headers are present?
Edit: Following up I have discovered that the second group (in which items are not appearing as expected) seems to have its size match the first group. So if the first group has two items in it the second group will show two items. If the first group has three items the first group will show three, and so on. For now I have opted to change the layout to more closely reflect the default grid layout mentioned by Filip, but have not been able to determine why the two groups' sizes are linked.
Hi Alex (I believe we'd met before). In addition to what Jim said (does each of your Matches represent an object with a Name and another nested Matches property?) you might run into an issue where if you don't specify the GroupStyle.Panel - you will get a default StackPanel which might get some items in your grouped collection clipped. When you create a default "Grid App (XAML)"-template based application - you get the following definition of the group panel:
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid
Orientation="Vertical"
Margin="0,0,80,0" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
Now if you comment that out - your groups will change from this
to this
I have a spark TextInput control that I would like to automatically format as the user types into it. The format is something like XX-XX-XXX-XXX where each X is a digit.
I have create a custom Formatter that I am using to display these values in other locations, but I'm having trouble getting an elegant solution to provide this sort of automated formatting in the TextInput control itself.
Here is the code that I current have. It works, but when the formatter inserts one of the hyphen, the insertion point of the TextInput does not advance, so the next digit gets inserted in the next-to-last position.
<fx:Script>
protected function changeHandler(event:TextOperationEvent):void
{
itemID.text = formatter.format(itemID.text);
}
</fx:Script>
<fx:Declarations>
<formatters:MyFormatter id="formatter" separator="-" pattern="{[2,2,3,3]}" />
</fx:Declarations>
<s:Form>
<s:FormItem label="Item ID:">
<s:TextInput id="itemID" restrict="0-9" change="changeHandler(event)" prompt="ex. xx-xx-xxx-xxx" />
</s:FormItem>
</s:Form>
Here is the result of typing in the characters 1,2,3,4,5,6,7,8,9,0 in sequence. As you can see, the insertion point is three characters from the end which corresponds to the three inserted hyphens.
Any suggestions on creating a smooth UX here?
If you itemID is a TextField based class use this:
itemID.setSelection(itemID.length, itemID.length);
It will move the caret to the end of the TF.
How can I add an item to a Flex 4 <s:List> component that has an item renderer? Here is the code sample of the list that I would like to append data onto:
<s:List contentBackgroundAlpha="0" borderVisible="false" id="reviews"
itemRenderer="renderers.ReviewRenderer" dataProvider="{data}"
top="10" minHeight="1">
<s:layout>
<s:VerticalLayout useVirtualLayout="false" requestedMinRowCount="1" gap="35"/>
</s:layout>
</s:List>
The data variable that the <s:List> is bound to will have the exact same properties as the object that I would like to append on the list.
Please let me know if I can provide any more details.
Thank you for your time.
How can I add an item to a Flex 4 component that has an item
renderer?
You wouldn't. You would add an item to the List's dataProvider. Then the list decides how to display the elements in the dataProvider based on other factors, such as the layout and the itemRenderer. For visual purposes, one way to view the list is as a collection of itemRenderers. There is one itemRenderer for each displayed item in the list.
In most cases there will be fewer items displayed in the list than there are items in the dataProvider. itemRenderers are re-used as the list is scrolled through, and the data property on the itemRenderer instance is modified.
So, if you want to know how to add an item to a List's dataProvider, it depends on the dataProvider type. Assuming an ArrayCollection, you should do something like this:
this.data.addItem(myNewItem);
Hi I am using struts 2 UI. I would like to limit the number of characters in row to 16 and also I have to restrict the maxlength to 32. I tried row and column attirbute. But its not working.Also I have to restrict the resizing of textarea. Any possible solutions?
Perhaps you had a typo? The attributes are "rows" and "cols", not "row" and "column".
The following should work:
<s:textarea key="yourDataField" cols="32" rows="16" resizable="false"/>
Here is a nice explanation how to restrict the resizing of textareas
<s:textarea cssStyle="resize: none;"></s:textarea>
should do the job.
I have a black row separator and a grey column separator, but because the row separator gets rendered first, the column separator appears over the top of it, causing what appears to be breaks in the row separator.
Is there any way to change the order these are rendered to prevent this?
I cannot tell you a nice and clean way to do this, however there is a "patch/hack" for this :)
Inside your DataGridSkin, in the place where you redefine the default rowSeparator use can force a greater depth. This is definitely a patch since you hardcode the depth, but it will work.
<!--- #private -->
<fx:Component id="rowSeparator">
<s:Line depth="1000">
<s:stroke>
<s:SolidColorStroke color="0x0000FF" weight="5" caps="square"/>
</s:stroke>
</s:Line>
</fx:Component>