The listbox element was described in an "listsearlier section. It has a number of additional features that are described below.

Multi-Column List Boxes

The ref_listboxlistbox element is used to create a list of items from which the user can select one or more items from. It is internally created in using a grid. It simply uses a set of custom tags and adds code to handle selection automatically. You might use it when you need a grid with selectable rows.

Because it is a grid, it supports multiple columns. Each cell may have arbitrary content within it, although usually only text is used. In a listbox, the content always goes in the rows, unlike a grid where the content may be placed either in the rows or the columns. The syntax is similar but different tags are used. The following table lists the equivalent tags in a listbox:

List boxes have no equivalent of the grid's ref_rowsrows element. Actually, there is an equivalent, but it is created automatically and placed in the list box for you. It is also hidden so you don't even need to know it is there.

The ref_listcelllistcell element may be used for each cell in the grid. To specify the text content of a cell, place a label attribute on a ref_listcelllistcell. For the simple case where there is only one column, you may also place the label attributes directly on the ref_listitemlistitem elements and leave the ref_listcelllistcell elements out entirely.

When the user selects an item, the entire row is selected. You cannot have a single cell selected.

The following example is of a listbox with two columns and three rows:

This list box has two columns, the second one being twice as flexible as the first one. If you shrink the size horizontally, the labels on the cells will crop themselves automatically. As with other elements, you can use the crop attribute on the cells or items to control the cropping.

Header Rows

List boxes also allow a special header row to be used. This is much like a regular row except that it is displayed differently. You would use this to create column headers. Two new elements are used.

/morelists1.jpgALIGN=RIGHT ALT= =216 =103> The ref_listheadlisthead element is used for the header rows, just as the ref_listitemlistitem element is used for regular rows. The header row is not a normal row however, so using a script to get the first row in the list box will skip the header row.

The ref_listheaderlistheader element is used for each cell in the header row. Use the label to set the label for the header cell.

Here is the earlier example with a header row:

"trees(Next) Next, we'll look at how to create trees.

Examples: /ex_6_2_1.xul.txt'>6.2.1 /ex_6_2_2.xul.txt'>6.2.2