Multiline combobox with AS3?

[Petteri_Paananen]

Hi

Is there a way to define AS3 combobox to wrap long lines?

[kglad]

if cb is your combobox, import the textinput class and use:

TextInput(cb.getChildAt(1)).textField.multiline=true
TextInput(cb.getChildAt(1)).textField.wordWrap=true

[Petteri_Paananen]

I tried to put those two line inside magLoaded function, but I got following error:

ReferenceError: Error #1065: Variable TextInput is not defined.

I use combobox component from library (CBtoc)... I populate it with following code, data comes from XML-file:

function magLoaded(e:Event) {
    CBtoc.prompt = magXML.tocHeader[currentMagId];

    CBtoc.visible = true;
    CBtoc.dropdown.rowHeight = 30;
     var tocNumero = CB.selectedIndex;
    var tocXML:XML;
    var tocLoader:URLLoader = new URLLoader();
    tocLoader.load(new URLRequest(magXML.Book.toc[tocNumero]));
    tocLoader.addEventListener(Event.COMPLETE, captureData2);

}

function captureData2(e:Event):void {
    CBtoc.removeAll();
    var tocXML:XML = new XML(e.target.data);
    var il:XMLList = tocXML.article;
   
    if (il.length()==1){
        CBtoc.visible = false;
        }
    for (var i:uint=0; i<il.length(); i++)
    {
        CBtoc.addItem({data:il.spread.text(),    label:il.name.text()});
       
    }
   
}

[Petteri_Paananen]

ok, I forgot to import textinput class, now it doesnt give me any warnings but combobox doesn´t wrap long lines either.... do I have those lines in wrong place?

[kglad]

where's the code i suggested?

[Petteri_Paananen]

I took it away before I pasted... sorry

It´s inside magLoaded fuction

function magLoaded(e:Event) {
    CBtoc.prompt = magXML.tocHeader[currentMagId];

    CBtoc.visible = true;
    CBtoc.dropdown.rowHeight = 30;

TextInput(CBtoc.getChildAt(1)).textField.multiline=true;
TextInput(CBtoc.getChildAt(1)).textField.wordWrap=true;

     var tocNumero = CB.selectedIndex;
    var tocXML:XML;
    var tocLoader:URLLoader = new URLLoader();
    tocLoader.load(new URLRequest(magXML.Book.toc[tocNumero]));
    tocLoader.addEventListener(Event.COMPLETE, captureData2);

}

[kglad]

is that rowHeight sufficient to display 2 rows of text?  increase it.

[Petteri_Paananen]

it should be…

[kglad]

double it and retest.

[Petteri_Paananen]

didn´t work... actually I couldn´t use a value higher that 48.

With value 49 or higher, my drop-down menu turns to drop-up menu.... and because it´s on the top of the screen, opening list goes over the edge ...

[kglad]

i don't think you have enough room to show the 2nd line.  take a screen shot after using this code:

function magLoaded(e:Event) {
    CBtoc.prompt =  magXML.tocHeader[currentMagId];

    CBtoc.visible = true;
     CBtoc.dropdown.rowHeight = 30;

TextInput(CBtoc.getChildAt(1)).textField.multiline=true;
TextInput(CBtoc.getChildAt(1)).textField.wordWrap=true;

TextInput(CBtoc.getChildAt(1)).textField.border=true;

      var tocNumero = CB.selectedIndex;
    var tocXML:XML;
    var  tocLoader:URLLoader = new URLLoader();
    tocLoader.load(new  URLRequest(magXML.Book.toc[tocNumero]));
     tocLoader.addEventListener(Event.COMPLETE, captureData2);

}

[Petteri_Paananen]

border appeared around first line only:

[kglad]

there's no room for a 2nd line to display.

[Petteri_Paananen]

can i make it bigger somehow? (it actually shows text in two lines if I make linebreak to xml where those labels are loaded)

[kglad]

(it actually shows text in two lines if I make linebreak to xml where  those labels are loaded)

without increasing the row height?

[Petteri_Paananen]

yep

[kglad]

and you're NOT using this code to achieve multiline support:

TextInput(CBtoc.getChildAt(1)).textField.multiline=true;
TextInput(CBtoc.getChildAt(1)).textField.wordWrap=true;

[Petteri_Paananen]

Actually I was using that code when I took a screenshot, but it works also without... but my problem is that in real usage XML will be generated automatically without line breaks, so it´s not a solution...

[kglad]

i don't understand what you're doing.

the combobox labels will not display multiline content unless you code for that.  there are a number of ways to do that and i gave one.  if you claim you're doing that another way, you haven't explained and if you're not doing anything to make your combobox multiline you're mis-reporting.

[Petteri_Paananen]

Im loading labels from XML. I cant influence to that xml, it comes automatically from other system. Normally labels are quite short and they are always in one line without linebreaks in that xml. I can put some linebreaks to that xml manually for testing it, but thats not a solution for real system.

I´m trying to find a solution to put into that combobox. So that if label is more than, let´s say 30 characters, combobox would split that line into 2 or even 3 lines...

[Petteri_Paananen]

Heres a simplified version of my project, I have stripped everything else off, just a combobox is left there, + of course XML that holds all those labels....

http://dl.dropbox.com/u/133381/cb_test.zip

[Vikash_Srivastava]

The smaple provided as download does not work.

Can you please upload a revised sample.

Best

Harry

[Petteri_Paananen]

hmmm...strange, I just tried it and it worked for me... do you get some alert?

[jfweber]

You should use a custom CellRenderer like this:

=============================

import fl.controls.ComboBox;

ComboBox(dropDown).dropdown.setStyle("cellRenderer", MyCellRenderer);

=============================

Class MyCellRenderer
=============================

package views

{

    import flash.text.TextFormat;

    import fl.controls.listClasses.CellRenderer;

    public class MyCellRenderer extends CellRenderer

    {

        public function MyCellRenderer()

        {

            super();

        }

/*

/ This is another class of the CellRenderer class, which we need

/ to override to set new properties. We change the textField properties.

/ The textField is derived from the LabelButton, which is used for the

/ DataGrid and List components rows and headers. We set wordWrap to true if the

/ text is very long and give html properties to the textField. The string

/ for the textField has the name 'label'.

*/

        override protected function drawLayout():void

        {

            textField.wordWrap = true;

            textField.htmlText = this.label;

            super.drawLayout();

        }

    }

}

[elder_soares]

I tried your solution. It works partially. The problem is that rowCount is fixed for all rows. Is there any solution for this?