Combobox setValue

In a combobox the selectionChangedEvent is called when a value is selected from the combobox and also when setValue method is used. There is always a requirement that the event should be called only when a value is selected from the list than when programmatically setting the value.

One idea i was given when going through Sencha forums is to disable all the events before setting the value and then enabling them back again (this is a little weird, as this requirement comes up most of the time. They should probably try to make it a little easier than that)..

But anyways it works for now.

  1: combobox.disableEvents(true);
  2: combobox.setValue();  //set a value
  3: combobox.enableEvents(true);

changing the color of the text in the combobox’s Textbox

Haa!! extjs has changed it named to sencha. Well I might be the last one mentioning it :).

Well coming back to what i was about to write in this post. I had this requirement of coloring the text in the combobox's text box. As i searched for it, i could not find a better solution than this one.

The list values in the combobox can be color coded using the template.

combobox.setSimpleTemplate("<font color='{color}'>{name}</font>");

Now if a particular item from the list is selected that has a different color, the color changes to black in the textBox. Inorder to maintain the color of the list item, I tried something like this.

  1: combobox.addSelectionChangedListener(new SelectionChangedListener<ModelData>() {
  2: 	@Override
  3: 	public void selectionChanged(SelectionChangedEvent<ModelData> se) {
  4: 		if(deptjob.getValue() != null ) {
  5:               		ModelData md = combobox.getValue();
  6: 			combobox.el().getChild(0).setStyleAttribute("color", md.get("color").toString());
  7: 		}
  8: 	}
  9: });

Any ideas on a better way in solving this problem is appreciated.

Changing combo box options dynamically with javascript

Most of you guys might already have known about this. I have a requirement where I have to change the options of a combo box when i choose either “Hourly” or “salaried” in another combo box.

A new Option can be created using

var newOption = new Option(“text”, “value”);

Options can be accessed using the select that created the combo box

document.getElementById('ExcludeHoliday').options[0]

Where this code will select “ExcludeHoliday” combo box and the first option. When we try to remove an option from the middle it is essential to reorganize the list starting for the removed option. To mention, removing an option is to set the value of that option to “null” :)

populating the combo box EXT-GWT

There are only a few samples on ext-gwt. The most recent version being 1.1 released in august. I recently have an issue of populating the combo box before the "down-arrow" in the combo box is clicked. Populating the combo box from the database using cold fusion can be done in the following way

• Firstly we need to define the ModelType of the data that is being extracted from the CFM file, with the root.
• Next the JSONReader has to be set to the ModelType which specifies the type of the data that has to be stored in the combo box Store.
• We then need to set up the HttpProxy for the connection to be established with the database. This proxy contains the requestbuilder which actually builds the request String with a "post" or a "get". The header for the request builder should be set which i am not pretty sure why we are doing it, but if doesnot display the output when it is not set.
• Then the loader for the combo box has to be set with the proxy which tells about the connections to the database and the JSONReader which talks about the format of the expected text.
• Finally the store is set with the loader, which is assigned to the combo box.

This is usually the process that is followed not only for the combo box but also for almost widget that gets data from a database. Combo box usually gets the data dynamically i.e, the load of the loader is called only when the "down arrow" of the combo box is clicked. To over ride that and have the data extracted well before the button is clicked then we can just include loader.load(); after setting the store, which will perform the load operation.