Solved

Adobe Flex - Combobox - Disable Editing

Posted on 2014-11-26
15
911 Views
Last Modified: 2014-12-07
Hey,

I have a combo box and I am trying to disable from user typing.. Users can type to select an item but I do not want the combo box item to be modified.. this is what happening now.. :-)

<s:ComboBox id="combocity" width="17%" height="85%"
                                    change="combocity_changeHandler(event)"
                                    dataProvider="{cityListForcombo}" labelField="cityName"
                                    prompt="Select the one"
                                     />
0
Comment
Question by:listings_
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 4
15 Comments
 
LVL 37

Expert Comment

by:zzynx
ID: 40473191
Try adding
editable="false"

Open in new window

0
 

Author Comment

by:listings_
ID: 40473939
Thanks zzynx.

But editable is not part of the

<s:ComboBox id="newName" editable="false" width="13%" change="newName_changeHandler(event)" dataProvider="{employeeList}" labelField="empName" prompt="Select the one" textAlign="center" height="85%"/>

It is part of the MX dropdownlist...
0
 
LVL 37

Assisted Solution

by:zzynx
zzynx earned 100 total points
ID: 40473976
Does this article help?
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 29

Expert Comment

by:Pravin Asar
ID: 40475186
No Points

Here is a simple answer as recommended by zzynx

https://forums.adobe.com/thread/613475?tstart=0
0
 

Author Comment

by:listings_
ID: 40477488
Thanks Pravin and Zzynx. I read this article. You see, entire application is created using combobox and now, I need to disable editing - Comboboxes are every where. Do I have to change all the controls to DropDownList? No other way.. ?

Regards,
0
 
LVL 37

Expert Comment

by:zzynx
ID: 40477975
>> Do I have to change all the controls to DropDownList?
The ones that need to be uneditable

>> No other way.. ?
Sorry.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 40478903
If you insist, you can do this with some custom class .

Here is excerpts from Adobe forums:

 The ComboBox control is a child class of the DropDownListBase control. Like the DropDownListBase control, when the user selects an item from the drop-down list in the ComboBox control, the data item appears in the prompt area of the control.

One difference between the controls is that the prompt area of the ComboBox control is implemented by using the TextInput control, instead of the Label control for the DropDownList control. Therefore, a user can edit the prompt area of the control to enter a value that is not one of the predefined options.

For example, the DropDownList control only lets the user select from a list of predefined items in the control. The ComboBox control lets the user either select a predefined item, or enter a new item into the prompt area. Your application can recognize that a new item has been entered and, optionally, add it to the list of items in the control.

The ComboBox control also searches the item list as the user enters characters into the prompt area. As the user enters characters, the drop-down area of the control opens. It then and scrolls to and highlights the closest match in the item list.

So if you debug your control, you will find a textInput control  which permits you to enter/edit the text. You have to make that as non-ediable
0
 

Author Comment

by:listings_
ID: 40479921
Thank you very much both.

I started to convert one of the form and I am having one problem.

Selecting the item for the dropdownlist...  It is NOT setting the DropDownList... Do you know why?
var selectedRow:Object = event.currentTarget.selectedItem; // This is gridview...
delsName.selectedItem=selectedRow.empName;



Here is the declaration:
<s:DropDownList id="delsName" width="18%" height="85%"
change="modifyName_changeHandler(event)"
dataProvider="{empListForcombo}" labelField="empName"
prompt="Select the one"/>

empListForcombo is:

[Bindable] private var empListForcombo:ArrayCollection;

private function getEmpComboList():void
{                                    
        var dao:EmployeeDAO=new EmployeeDAO;
      empListForcombo=dao.getItems();      
}

public function getItems():ArrayCollection
{
      return getList("SELECT EMPLOYEE.*, CITY.Name as CITY " +
               "FROM EMPLOYEE LEFT JOIN CITY ON CITY.CITY_ID = EMPLOYEE.CITY_ID");
}
0
 
LVL 37

Expert Comment

by:zzynx
ID: 40480207
>> Selecting the item for the dropdownlist...  It is NOT setting the DropDownList...
What do you mean? Can you elaborate on that?
0
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 400 total points
ID: 40482107
Sorry for late response. But good news, is I created an working example  to demo, what is the difference between Combo Box and Drop Down List.

Just copy, compile and run it.

This example has Combo Box text input editing disabled. But drawback is not you can not type-in text.
But with Drop Down List, you can key in text.
[You want this to quickly jump to option].


<?xml version="1.0" encoding="utf-8"?>
<s:Application
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:containers="org.flexlayouts.containers.*"
      xmlns:components="org.flexlayouts.components.*"
      xmlns:utils="org.flexlayouts.utils.*"
      backgroundColor="#eeeeee"
      width="100%" height="100%"
      xmlns:mx="library://ns.adobe.com/flex/mx">
      
      <fx:Style>
            @namespace s "library://ns.adobe.com/flex/spark";
            @namespace mx "library://ns.adobe.com/flex/mx";
            s|Label { color:#333333; fontSize:11; }
            s|ComboBox {  }
      </fx:Style>
      
      <fx:Script>
            <![CDATA[
            ]]>
      </fx:Script>
      
      <fx:Declarations>
            <s:ArrayList id="myList">
                  <fx:Object label="YHOO" hint="Goto Yahoo.com"  link="http://www.yahoo.com"/>
                  <fx:Object label="MSFT" hint="Goto Microsoft.com"  link="http://microsoft.com"/>
                  <fx:Object label="AAPL" hint="Goto Apple.com"  link="http://apple.com"/>
                  <fx:Object label="ORCL" hint="Goto Oracle.com" link="http://oracle.com"/>
                  <fx:Object label="ZEND" hint="Goto Zend.com"  link="http://zend.com"/>
                  <fx:Object label="FB" hint="Goto facebook.com"  link="http://facebook.com"/>
                  <fx:Object label="BT" hint="Goto bootstrap.com" link="http://getbootstrap.com/"/>
            </s:ArrayList>
      </fx:Declarations>
      <s:VGroup y="10">
      <s:Label text="This is DropDownList. By default I am selecting APPL"/>
      <s:HGroup >
            <s:DropDownList alternatingItemColors="[#ffffff,#fcfcfc]" id="dl1" width="140" creationComplete="dl1.selectedIndex=2" change="dropHint.text=dl1.selectedItem.hint" dataProvider="{myList}" prompt="Select Option">
            </s:DropDownList>
            <s:Label id="dropHint" creationComplete="dropHint.text=dl1.selectedItem.hint"/>
      </s:HGroup>
      </s:VGroup>
      <s:VGroup y="100">
      <s:Label text="This is ComboBox with textInput disabled."/>
      <s:HGroup>            
            <s:ComboBox alternatingItemColors="[#ffffff,#fcfcfc]" id="cb1" prompt="Select Option" change="comboHint.text=cb1.selectedItem.hint" creationComplete="cb1.textInput.editable=false;" dataProvider="{myList}">
            </s:ComboBox>
            <s:Label id="comboHint" text="Select option"/>
      </s:HGroup>
      </s:VGroup>
</s:Application>
0
 

Author Comment

by:listings_
ID: 40484845
Pravin Asar, did the trick. Thank you so much.

Cheers.
0
 

Author Comment

by:listings_
ID: 40484853
Pravin Asar,

I accepted this as a solution, then I realized your comment about user can not type... so, I am actually using the dropdownlist... Your solution is still a great one.

The problem is that you see, I have a datagrid and when I double click on it, I am display a form with it's data. I can not seem to select the data on the dropdownlist.

This is what I use to select an entry.
ModclientCombo.selectedItem = selectedRow.clientName;
It's is not selecting the client name
0
 

Author Comment

by:listings_
ID: 40484867
Pravin Azar, I figured it out. Thanks again.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 40486136
Glad to know, you figured the last hurdle.
0
 
LVL 37

Expert Comment

by:zzynx
ID: 40486268
Thanx 4 axxepting
0

Featured Post

Office 365 Training for Admins - 7 Day Trial

Learn how to provision tenants, synchronize on-premise Active Directory, implement Single Sign-On, customize Office deployment, and protect your organization with eDiscovery and DLP policies.  Only from Platform Scholar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Resolving an irritating Remote Desktop connection that stops your saved credentials from being used.
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question