Archive for April, 2007

Icons in ComboBox

Somebody recently asked on FlexCoders about how to get icons to show up in the ComboBox. Here’s how I’d do it.
Download Source
Run Demo

DataGrid Footers

Ever notice that the DataGrid has headers but no footers? That’s because footers have to be computed if they are totals or averages or whatever and we wanted to leave that for advanced datagrids in a future release.
Lately, due to some other work we’re doing for 3.0, I’ve been wondering whether footers, headers and locked columns and rows should be part of the chrome instead of the main set of cells. If so, it is possible to create footers in 2.0.1 today by subclassing DataGrid and making a special Border that can put renderers in the border.
Here’s an example that computes the average of the price column. Usual caveats apply.
Download source
Run demo
You can see how one could do column headers that way, or add headers to Tree for a TreeDataGrid.
Now, if the renderers are in the chrome, they are not part of the selection model, and they should probably not renderer data from the dataprovider per-se. So I’d be interested in knowing:
1) If you have used lockedColumns or lockedRows today, what have you used them for?
2) Did you want the lockedColumns or lockedRows to be selectable? Editable?
3) Did you do this to get more header rows/columns or to display data from the dataprovider?

Multiline Buttons

Someone recently asked about having the label of a radiobutton wrap onto more than one line. Maybe it just got lost in FlexCoders traffic because I’m sure others have already solved this, but I put together this version out of my own curiosity. The pattern can be re-used for Button and CheckBox as well. The usual caveats apply.
Download file
You’ll notice that I used “undocumented” methods to accomplish this, so it might break in some future release of Flex. However, this is really intended to be another example of subclassing and illustrate that by knowing the underlying base class you can usually tweak things the way you want them.
Now you may ask, why doesn’t this functionality come built-in with Flex? The answer is that text-flow is slow and doesn’t really work well with the Flex layout system. That’s because there really is no way to determine the size of a block of text unless it is only one line or has line-breaks in it or you know its width. In fact, to use this example, you need to specify the width of the radiobuttons, so it defines a width so we can calculate the height.
Here is a Flex 3 version:
Download Source
Run Example

More Thinking About Item Renderers

Well, the last post definitely got people thinking. Since then I’ve seen a few of you struggle with images, centering, etc. Again, if you’re in a hurry, take a container and center an Image in it, but just be aware that that is kind of heavy.
This example shows how I would do it in order to optimize on performance. Most drop-in renderers like Image and CheckBox are comprised of child components that actually display the content, text and icons. By overriding the updateDisplayList methods, you can center the content without the cost of wrapping the renderer in a container.
Download Source Code
Run Demo
This example also shows how to use labelFunction to map fields in your data to external or embedded images. The usual caveats and disclaimers apply.