Search Flex Samples
Showing posts with label Flex with List Control. Show all posts
Showing posts with label Flex with List Control. Show all posts

Creating multi-line list rows with variable row heights

The following example shows how you can create multi-line rows with wrapping text and variable row heights with the Flex List control.






<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white"

creationComplete="init();">



<mx:Script>

<![CDATA[

import mx.rpc.events.FaultEvent;

import mx.rpc.events.ResultEvent;



private function init():void {

commentsXML.send();

}



private function commentsXML_result(evt:ResultEvent):void {

var resultXML:XML = evt.currentTarget.lastResult;

list.dataProvider = resultXML.channel.item;

}



private function commentsXML_fault(evt:FaultEvent):void {

mx.controls.Alert.show("Unable to load XML:n" + commentsXML.url, "ERROR");

}

]]>

</mx:Script>

<mx:HTTPService id="commentsXML"

url="http://blog.flexexamples.com/comments/feed/"

resultFormat="e4x"

showBusyCursor="true"

result="commentsXML_result(event);"

fault="commentsXML_fault(event);" />

<mx:List id="list"

variableRowHeight="true"

wordWrap="true"

labelField="title"

width="250" />

</mx:Application>

List control Samples

This is a little experiment to play with a different method of selecting items in a Flex List control. It allows you to re-create some of the multiple selection options you usually get by holding down the control or shift keys while you select items. But now you don’t need to hold down the control or shift keys. Just play with it to see what I mean, it’s hard to explain.

There was a question on flexcoders that was about something like this. I’m not sure if this little experiment solved the right problem for the original poster, but trying to figure out how to get some of the functionality of using the control and shift keys without using the actual keys was kind of interesting (what can I say… item renderers and list controls turn me on). So this is what I came up with. Another thing to note is that the checkbox acts as a visual indicator only, it is not actually a clickable control.

View the source here.

List control for the one-armed man - take two

Here’s my second attempt at making a List control for Flex that has the functionality of using the Control and Shift keys, but without making the user actually press the Control or Shift keys. For those poor programmers who have been crippled by RSI, now you can at least drag around list data with your one good hand.

This version is much better than the previous version. Now you click on an item and drag to select multiple items. You can still drag and drop items from one list to another. The only difference is that you must first select the items, then click and drag to move items to the other list. Control-click functionality is the default if you only click one item. If you drag to select items and try to select below the visible items it will scroll the list into view.

Here’s the source.

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples