PDA

Volledige versie bekijken : Tekstveld van combobox verbergen


FredericCox
%Europe/Berlin %830 %2008, 20:55
Hoi,

Ik heb een eigen variatie (uit noodzaak) gemaakt van de combobox. Een deel bestaat er uit dat er een Text over het originele tekstgedeelte van de combobox staat. Hoe verberg ik nu de originele tekst? (die moet namelijk wel behouden worden omdat ik de .text property gebruik)

Maw hoe spreek ik dat tekstveld (in ComboBase) aan?

Ik heb al gezocht in de ComboBox en ComboBox source maar ik raak er nog niet echt wijs uit.

Dit is de component die ik gemaakt heb om de gebruiker te laten typen en zo automatisch hints te krijgen (een soort autoComplete zonder complete ;)) en die toch de gewone functionaliteit van de ComboBox behoudt.



<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.core.mx_internal;
use namespace mx_internal;
import mx.collections.ArrayCollection;

[Bindable] public var _data:ArrayCollection;
public var _changeFunction:Function;
[Bindable] public var prompt:String;

public function reset(dataProvider:ArrayCollection):void{
_data = dataProvider;
_data.filterFunction = null;
_data.refresh();

dropdown.dataProvider = _data;
}

private function onTextInput(ev:Event):void{
_data.filterFunction = filterInput;
_data.refresh();

dropdown.dataProvider = _data;
dropdown.open();
}
private function filterInput(item:Object):Boolean{
var itemText:String = item[dropdown.labelField].toLowerCase();

if(itemText.substr(0, comboText.text.length) == comboText.text.toLowerCase()){
return true;
}else{
return false;
}
}
private function onTextFocus(ev:Event):void{
comboText.text = "";
_data.filterFunction = null;
_data.refresh();
}
private var inited:Boolean = false;
private function onComboClose(ev:Event):void{
if(dropdown.selectedIndex > -1){
if(dropdown.selectedItem[dropdown.labelField] != comboText.text){
selectItem(dropdown.selectedItem);
}
}
}
private function init():void{
comboText.mx_internal::getTextField().multiline = false;
dropdown.mx_internal::textInput.getTextField().alp ha = 0;

comboText.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
}
private function onKeyDown(ev:KeyboardEvent):void{
if(ev.keyCode == 13){
dropdown.selectedIndex = 0;
selectItem(dropdown.selectedItem);
dropdown.close();
}
}
private function selectItem(item:Object):void{
comboText.text = dropdown.text;
_changeFunction(dropdown);
//selectedOutput.text = dropdown.text;
}
]]>
</mx:Script>
<mx:ComboBox id="dropdown" buttonMode="true" editable="false" close="onComboClose(event)" dataProvider="{_data}" x="0" y="0" width="148"></mx:ComboBox>
<mx:TextArea id="comboText" styleName="FilterBackground" borderSkin="CfBorderLeft" focusAlpha="0" cornerRadius="3" borderThickness="1" maxChars="10" text="{prompt}" height="20" width="{dropdown.width - 22}" creationComplete="init()" change="onTextInput(event)" click="onTextFocus(event)" left="2" top="1"/>
</mx:Canvas>




dropdown.mx_internal::textInput.getTextField().alp ha = 0;

geeft

ReferenceError: Error #1069: Property http://www.adobe.com/2006/flex/mx/internal::textInput not found on mx.controls.ComboBox and there is no default value.

TheDutch
%Europe/Berlin %198 %2008, 05:45
Het property "textInput" zit niet in de mx_internal namespace dus die kan je zo niet benaderen. Hij zit in de protected namespace wat betekend dat je die alleen kunt benaderen door overerving. Je moet dus ComboBox overerven en de functionaliteit aanpassen ipv. in een Canvas wrappen met nog een TextArea erbij.

De ComboBox heeft van zichzelf al een TextInput veld voor het geselecteerde item omdat je de ComboBox ook editable kunt maken zodat mensen werkelijk zelf iets kunnen intikken zonder dat zich dat in de data provider bevindt. Dat is natuurlijk niet geheel de functionaliteit zoals jij dat wilt maar je kunt het als startpunt gebruiken. Er is een flag bij ComboBox "editable", jij kunt een flag erbij maken "hintsEnabled" of iets dergelijks. Wanneer jouw flag op TRUE staat dat wordt de TextInput ook editable net als bij "editable". De rest van de functionaliteit moet je zelf erbij schrijven maar dat lijkt me niet zo'n probleem want je hebt nu al het invoerveld wat je wilt en je kunt de waarde van dat invoerveld veranderen omdat je hem nu wel kunt benaderen.

Laat maar weten of het duidelijk is en hoe het gaat :).

FredericCox
%Europe/Berlin %394 %2008, 10:27
Dat is zeer duidelijk bedankt, zit momenteel krap met tijd maar na de deadline is dit het eerste wat ik ga doen dus ga nu nog snel voor een dirty oplossing moeten gaan, moet echt een gewente beginnen maken van overerven ipv custom mxml components :)

Ik hou je op de hoogte bedankt voor de tip