Lesson 30: Combo Box Controls

	Combo Box Controls

The Windows Combo Box

Introduction

Like a radio button, a combo box allows the user to select one item from a group. Unlike radio buttons, a combo box saves space by using just as much room as an edit control. Like a list box, a combo box displays a list of items to the user. Unlike a list box, there is a version of a combo box that retracts once the user has made his selection; this is useful when space saving is particularly important.

To add a combo box to your application, from the Standard section of the Tool Palette, click the TComboBox button and click on the form. You can then resize or reposition the control to the desired location.

Characteristics of a Combo Box

Just like every control of your application, the name is the most important property of the control, for you and the compiler. This name allows you and the compiler to refer to the control. By default, the first combo box you add to your form at design time is called ComBox1, the second would be ComboBox2, etc. To change the name of the control, click the Name field, type a new name and press Enter (or click somewhere else).

Probably the first thing the user sees on a combo box is the text it displays. Although the text of an item is an AnsiString, the items are composed from the TStrings class. To create this list, when the control is selected on the form, on the Object Inspector, click the Items field to reveal an ellipsis button. Click the ellipsis button to display the String List Editor. Type each string and press Enter:

Once you click OK, the control would be filled with the new items. You can also fill out the control using the methods of the TStrings class. For example, to create a list of items, you could write:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnFillTheListClick(TObject *Sender)
{
	cbxColors->Items->Add("Old Blue");
	cbxColors->Items->Add("Light Blue");
	cbxColors->Items->Add("Salmon");
	cbxColors->Items->Add("Dark Violet");
}
//---------------------------------------------------------------------------

By default, the items you add to the combo box will appear in the order they are supplied. For example the TStrings::Add() method would add the new string at the end of the list. If you want the list of items to be sorted, you can change the value of the Sorted property in the Object Inspector from false (the default) to true. To sort a list programmatically, you can write:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnSortTheListClick(TObject *Sender)
{
	cbxColors->Sorted = True;
}
//---------------------------------------------------------------------------

You can un-sort the list by changing the value of the Sorted property. This property works exactly like its equivalent in the TListBox control

There are three styles of combo boxes, although all allow the user to make only one selection. These styles are controlled by the TComboBoxStyle enumerator and the Style property of the Object Inspector. A combo box can be configured to allow the user to add items to the list. In this case, if the user does not find the desired item in the list, he can type a new value. To provide this ability, set the Style to csDropDown. If you set the Style to csDropDownList, the user cannot enter a new item in the list but can still select one from the control. A combo box with the csSimple Style permanently displays a combination of an edit box and a list box. The user can scroll in the list box and select an item; after the selection, the control would still display the list. The other two styles, csOwnerDrawFixed and csOwnerDrawVariable, are typically used to display varying objects such as pictures or colors.

If the combo box has a style other than csSimple, there is typically a fixed number of items that display when the user clicks the control’s arrow. You can control the number of items that displays using the DropDownCount property. By default, this is set to 8. If the list contains a number of items less than the DropdownCount integer value, all of the items would display fine. If the list contains more than the DropDownCount number of items, when the user clicks the arrow, a scroll box would appear. The control would display DropDownCount number of items; to reveal more, the user would have to scroll in the list.

The text that displays on a non-drawn combo box is an AnsiString object. If you want the combo box to display a certain string, use the Text property. At design time, you can set this only if the control’s Style is csDropDown or csSimple. At run time, you can set the text that would display in the combo box at startup using the ItemIndex property. This property represents the ordinal integer item of the combo box. The items are counted from 0, then 1, and so on. The ItemIndex of each item is set depending on the value to the Sorted property. If the list is not sorted, the first item entered in the list has an ItemIndex value of 0. If the list gets sorted, the first item in ascending order has an ItemIndex property set at 0. You can therefore use this property to control what item to display in the list:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	cbxColors->ItemIndex = 0;
}
//---------------------------------------------------------------------------

You can also use the ItemIndex property to find out what item is selected at a given time.

Methods of Combo Box Management

The TComboBox as a class has only its constructor and its destructor as methods. Its other methods are derived from the the parent TCustomComboBox class. The TComboBox constructor is used to dynamically create an instance of the object. If you cannot add the control at design time, declare a pointer to TComboBox and use the new operator to assign the control’s owner for cleaning purposes:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnCreateComboBoxClick(TObject *Sender)
{
	TComboBox *CarMake = new TComboBox(this);
	CarMake->Parent = this;
}
//---------------------------------------------------------------------------

After creating the object, you can manipulate its properties the change the defaults. If you create a local list, you will manipulate it in the same function or event:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnCreateComboBoxClick(TObject *Sender)
{
	TComboBox *CarMake = new TComboBox(this);
	CarMake->Parent = this;

	CarMake->Left = 32;
	CarMake->Top = 16;
	CarMake->Items->Add("Ford");
	CarMake->Items->Add("Renault");
	CarMake->Items->Add("Fiat");
	CarMake->Items->Add("Honda");
}
//---------------------------------------------------------------------------

Operations on Combo Box Using Events

There are two mains operations a user will perform on a ComboBox control: selecting an item from the list or changing the content of the list. Many of the events that occur during the use of a combo box are from other controls or actions that are not programmatically directly related to a combo box. It is usually possible to fill out the list of a combo box at design time; that is, if you know the list of items that will be used. Otherwise, you will use another event or function to provide the items of the list. For example, the OnCreate event of a form is a common place to fill out a list, especially if you want the list to owns its items the first time it appears to the user. If you create a combo box named cbxSports but do not provide its items at design time, you can use the OnCreate event of the hosting form to fill it up as follows:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	cbxMajor->Items->Add("Accounting");
	cbxMajor->Items->Add("Medical Assistant");
	cbxMajor->Items->Add("Fire Science");
	cbxMajor->Items->Add("Computer Sciences");
	cbxMajor->Items->Add("Business Administration");
	cbxMajor->Items->Add("Hospitality Management");
	cbxMajor->Items->Add("Criminal Justice");
	cbxMajor->Items->Add("Computer Technician");
	cbxMajor->Items->Add("Cartography");
	cbxMajor->Items->Add("Music");
	cbxMajor->ItemIndex = 3;
}
//---------------------------------------------------------------------------

The most regular operation a user performs on a combo box is to select an item from the list. This happens when the user clicks the arrow to expand the list and then clicks one item. Once the user clicks one of the items, the list disappears and the combo box becomes a regular edit box, unless the style of the combo box is csSimple. Using this event, you can find out what item the user would have selected and act accordingly. For example, you can transfer the selected item to another control such as an edit box. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::cbxMajorClick(TObject *Sender)
{
	edtMajor->Text = cbxMajor->Items->Strings[cbxMajor->ItemIndex].c_str();
}
//---------------------------------------------------------------------------

The OnChange event occurs when the user changes the event that was displaying in the edit box of the combo box. Also this event occurs also in response to the user making a selection, it is more appropriate if you allow the user to edit an item of the list or if you allow the user to add items to the list by typing directly in the edit box. Like the Edit control, the OnChange event occurs immediately as the user types anything in the edit box portion of the combo box. The OnClick event cannot respond to these events. You can use the OnChange event to deal with the user trying to modify the item on the edit box. You can also use it to respond to other actions associated with the user making a selection. For example, you can simply display the list the number of items in the list:

//---------------------------------------------------------------------------
void __fastcall TForm1::cbxMajorChange(TObject *Sender)
{
 edtCount->Text = IntToStr(cbxMajor->Items->Count);
}
//---------------------------------------------------------------------------

Practical Learning: Configuring Combo Boxes

Open the Editor2 application from the resources that accompany this book
2. Make sure the main form is displaying. From the Standard section of the Tool Palette, click ComboBox
3. On the form, click the bottom (Formatting) toolbar
4. As the new combo box is still selected, on the Object Inspector, change the following properties:
Text = Times New Roman
Name = cboFonts
Hint = Font|Changes the font of the selection
5. Add another combo box on the right side of the Font combo box with following properties:
Text = 10
Name = cboFontSize
Hint = Font Size|Changes the font size of the selection
Width = 50
6. Double-click (TStrings) from the Items property
7. Type 8 and press Enter
8. Complete the list with 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36, 48, 54, 72

9. Click OK
10. Drag the Font combo box to the left of the toolbar
11. Also drag the Font Size combo box to the right side of the Font combo box
12. Right-click the Formatting toolbar and click New Separator. Move the new separator to the right side of the Font Size combo box

13. Double-click the Font combo box and implement its OnChange event as follows:
//---------------------------------------------------------------------------
void __fastcall TfrmMain::cboFontsChange(TObject *Sender)
{
rchEditor->SelAttributes->Name = cboFonts->Text;
rchEditor->SetFocus();
}
//---------------------------------------------------------------------------
14. On the form, double-click the Font Size combo box and implement its OnChange event as follows:
//---------------------------------------------------------------------------
void __fastcall TfrmMain::cboFontSizeChange(TObject *Sender)
{
rchEditor->SelAttributes->Size = StrToInt(cboFontSize->Text);
rchEditor->SetFocus();
}
15. While you are in the Code Editor, on the top combo box of the Object Inspector, select frmMain and click the Events tab
16. Double-click FormCreate to access its event. At the end of the event, before the closing bracket, fill the Font combo box with the computer's fonts as follows:
//---------------------------------------------------------------------------
void __fastcall TfrmMain::FormCreate(TObject *Sender)
{
Application->OnHint = ShowHints;
int i;

for(i = 0; i < Screen->Fonts->Count; i++)
{
// Get a pointer of the menu we want to change
TMenuItem *FontItem;
FontItem = new TMenuItem(ListOfFonts);
// Get a font from the system and store it as a caption of the menu
FontItem->Caption = Screen->Fonts->Strings[i];
// Add the font to the menu item to create a list of fonts
ListOfFonts->Add(FontItem);
// Eventually, if the user selects a font here,
// we will call a function, called Applyfont, to apply that font
FontItem->OnClick = ApplyFont;
}

for(i = 0; i < Screen->Fonts->Count; i++)
cboFonts->Items->Add(Screen->Fonts->Strings[i]);
}
//---------------------------------------------------------------------------
17. We also need to make sure that when the user clicks anywhere in the text, both combo boxes can display the font name and its size.
18. Click the RichEdit control (the big wide area on the main form). On the Object Inspector, double-click the box on the right side of OnSelectionChange
19. Implement the event as follows:
//---------------------------------------------------------------------------
void __fastcall TfrmMain::rchEditorSelectionChange(TObject *Sender)
{
cboFonts->Text = rchEditor->SelAttributes->Name;
cboFontSize->Text = IntToStr(rchEditor->SelAttributes->Size);
}
//---------------------------------------------------------------------------
20. Finally, after the user has used the Font dialog box, if he clicks OK, since we took care of giving focus to the RichEdit control already, we need to make sure the combo boxes display the font and the font size that were selected
21. On the form, double-click ActionList1
22. On the left frame of the ActionList Editor, click Dialog. On the right frame, click FontEdit1
23. In the Object Inspector, click the Event tab if necessary and double-click the right section of OnAccept
24. Add the following two lines to the end of the event:
//---------------------------------------------------------------------------
void __fastcall TfrmMain::FontEdit1Accept(TObject *Sender)
{
// Do the inverse of the BeforeExecute event
// If the user clicks OK, get the characteristics of the font
// Apply them to the selected text of the Rich Edit control
rchEditor->SelAttributes->Name = FontEdit1->Dialog->Font->Name;
rchEditor->SelAttributes->Style = FontEdit1->Dialog->Font->Style;
rchEditor->SelAttributes->Size = FontEdit1->Dialog->Font->Size;
rchEditor->SelAttributes->Color = FontEdit1->Dialog->Font->Color;

cboFonts->Text = FontEdit1->Dialog->Font->Name;
cboFontSize->Text = StrToInt(FontEdit1->Dialog->Font->Size);
}
//---------------------------------------------------------------------------
25. Test your project. After using it, click the application
Save and close the project

The Database Combo Box

Introduction

As reviewed with the Windows combo box control, list-based controls make it easy for a user to select an item instead of typing to provide a needed value. In a database also, you can create a list of values that the user would select for a particular field. To support this, the VCL provides two types of combo boxes, one of them is called DBComboBox.

The DBComboBox is primarily a regular combo box that can be connected to a data source and can receive its data from, or provide values to, a column of a database table through its DataField property. This means that a DBComboBox is created like a regular combo box, only when you configure it would be need to specify its source of values.

Practical Learning: Introducing Database Combo Boxes

To start a database application, on the main menu, click Tools -> Database Desktop
On the main menu of the Database Desktop, click File -> New -> Table...
Accept the Paradox 7 option and click OK

Create the fields as follows:

Field Name	Type	Size	Key	Default Value
CleaningOrderID	+		*
CustomerName	A	40
CustomerPhone	A	12
DateLeft	A	40
TimeLeft	A	20
DateExpected	A	40
TimeExpected	A	20
ShirtsUnitPrice	A	10
ShirtsQuantity	A	4		0
ShirtsSubTotal	A	10		0.00
PantsUnitPrice	A	10		0.00
PantsQuantity	A	4		0
PantsSubTotal	A	10		0.00
Item1Name	A	40		None
Item1UnitPrice	A	10		0.00
Item1Quantity	A	4		0
Item1SubTotal	A	10		0.00
Item2Name	A	40		None
Item2UnitPrice	A	10		0.00
Item2Quantity	A	4		0
Item2SubTotal	A	10		0.00
Item3Name	A	40		None
Item3UnitPrice	A	10		0.00
Item3Quantity	A	4		0
Item3SubTotal	A	10		0.00
Item4Name	A	40		None
Item4UnitPrice	A	10		0.00
Item4Quantity	A	4		0
Item4SubTotal	A	10		0.00
CleaningTotal	A	10		0.00
TaxRate	A	10		5.75
TaxAmount	A	10		0.00
OrderTotal	A	10		0.00

Save the table as CleaningOrders in the BCDEMOS alias
Close the Database Desktop
In Borland C++ Builder, create a new Application
Set the form's Caption to Georgetown Cleaning Orders - Customers Cleaning Orders
Change its Name to frmMain
Save the application in a new folder named GCS1
Save the unit as Exercise and the project as GCS1
In the BDE section of the Tool Palette, click Table and click the form
In the Object Inspector, set its properties as follows:
DatabaseName: BCDEMOS
Name: tblCleaningOrders
TableName: CleaningOrders
In the Data Access section of the Tool Palette, click DataSource and click the form
In the Object Inspector, set its properties as follows:
DataSet: tblCleaningOrders
Name: dsCleaningOrders
On the form, double-click the tblCleaningOrders icon to access the frmMain->tblCleaningOrders window
Right-click the empty window and click Add All Fields
In the frmMain->tblCleaningOrders window, click DateLeft. Press and hold Ctrl. Click DateExpected, and release Ctrl
In the Object Inspector, click EditMask and type !99/99/0000;1;_
In the frmMain->tblCleaningOrders window, click TimeLeft. Press and hold Ctrl. Click TimeExpected, and release Ctrl
In the Object Inspector, click EditMask and type !90:00 >LL;1;_
Close the frmMain->tblCleaningOrders window

Design of the form as follows:

Control	Name	Caption	Other Properties
Form	frmMain		BorderIcons: [biSystemMenu,biMinimize] Position: poScreenCenter ShowHint: true
GroupBox		Order Identification
Label		Cleaning Order ID:
DBEdit	dbeCleaningOrderID		DataSource: dsCleaningOrders DataField: CleaningOrderID
Label		Customer Name:
DBEdit	dbeCustomerName		DataSource: dsCleaningOrders DataField: CustomerName
Label		Customer Phone:
DBEdit	dbeCustomerPhone		DataSource: dsCleaningOrders DataField: CustomerPhone
Label		Date Left:
DBEdit	dbeDateLeft		DataSource: dsCleaningOrders DataField: DateLeft
Label		Time Left:
DBEdit	dbeTimeLeft		DataSource: dsCleaningOrders DataField: TimeLeft
Label		Date Expected:
DBEdit	dbeDateExpected		DataSource: dsCleaningOrders DataField: DateExpected
Label		Time Expected:
DBEdit	dbeTimeExpected		DataSource: dsCleaningOrders DataField: TimeExpected
GroupBox		Order Processing
Label		Item	Font -> Style: [fsBold]
Label		Unit Price	Font -> Style: [fsBold]
Label		Qty	Font -> Style: [fsBold]
Label		Sub-Total	Font -> Style: [fsBold]
Bevel			Shape: bsTopLine
Label		Shirts
DBEdit	dbeShirtsUnitPrice		DataSource: dsCleaningOrders DataField: ShirtsUnitPrice
DBEdit	dbeShirtsQuantity		DataSource: dsCleaningOrders DataField: ShirtsQuantity
DBEdit	dbeShirtsSubTotal		DataSource: dsCleaningOrders DataField: ShirtsSubTotal
DBEdit	dbePantsUnitPrice		DataSource: dsCleaningOrders DataField: PantsUnitPrice
DBEdit	dbePantsQuantity		DataSource: dsCleaningOrders DataField: PantsQuantity
DBEdit	dbePantsSubTotal		DataSource: dsCleaningOrders DataField: PantsSubTotal
DBComboBox	cboItem1Name		DataSource: dsCleaningOrders DataField: Item1Name
DBEdit	dbeItem1UnitPrice		DataSource: dsCleaningOrders DataField: Item1UnitPrice
DBEdit	dbeItem1Quantity		DataSource: dsCleaningOrders DataField: Item1Quantity
DBEdit	dbeItem1SubTotal		DataSource: dsCleaningOrders DataField: Item1SubTotal
DBComboBox	cboItem2Name		DataSource: dsCleaningOrders DataField: Item2Name
DBEdit	dbeItem2UnitPrice		DataSource: dsCleaningOrders DataField: Item2UnitPrice
DBEdit	dbeItem2Quantity		DataSource: dsCleaningOrders DataField: Item2Quantity
DBEdit	dbeItem2SubTotal		DataSource: dsCleaningOrders DataField: Item2SubTotal
DBComboBox	cboItem3Name		DataSource: dsCleaningOrders DataField: Item3Name
DBEdit	dbeItem3UnitPrice		DataSource: dsCleaningOrders DataField: Item3UnitPrice
DBEdit	dbeItem3Quantity		DataSource: dsCleaningOrders DataField: Item3Quantity
DBEdit	dbeItem3SubTotal		DataSource: dsCleaningOrders DataField: Item3SubTotal
DBComboBox	cboItem4Name		DataSource: dsCleaningOrders DataField: Item4Name
DBEdit	dbeItem4UnitPrice		DataSource: dsCleaningOrders DataField: Item4UnitPrice
DBEdit	dbeItem4Quantity		DataSource: dsCleaningOrders DataField: Item4Quantity
DBEdit	dbeItem4SubTotal		DataSource: dsCleaningOrders DataField: Item4SubTotal
BitBtn	btnCalculate	Calculate
DBEdit	dbeCleaningTotal		DataSource: dsCleaningOrders DataField: CleaningTotal
DBEdit	dbeTaxRate		DataSource: dsCleaningOrders DataField: TaxRate
DBEdit	dbeTaxAmount		DataSource: dsCleaningOrders DataField: TaxAmount
DBEdit	dbeOrderTotal		DataSource: dsCleaningOrders DataField: OrderTotal
DBNavigator			DataSource: dsCleaningOrders
BitBtn			Kind: bkClose

In the form, click dbeTimeLeft
In the Object Inspector, click Events and double-click the right side of OnExit

Implement the event as follows:

//---------------------------------------------------------------------------
void __fastcall TfrmMain::dbeTimeLeftExit(TObject *Sender)
{
    TDateTime dteLeft = StrToDate(this->dbeDateLeft->Text);
    TDateTime tmeLeft = StrToTime(this->dbeTimeLeft->Text);
    TDateTime tme9AM  = TDateTime(9, 0, 0, 0);

    // If the customer leaves clothes before 9AM...
    if( tmeLeft <= tme9AM )
    {
        // ... then they should be ready the same day after 9 AM
        this->dbeDateExpected->Text = this->dbeDateLeft->Text;
        this->dbeTimeExpected->Text = TDateTime(17, 0, 0, 0);
    }
    else
    {
        // If the clothes were left after 9AM, then they will
        // be ready the following day by 8AM
        TDateTime Tomorrow = dteLeft + 1;
        this->dbeDateExpected->Text = Tomorrow;
        this->dbeTimeExpected->Text = TDateTime(8, 0, 0, 0);
    }
}
//---------------------------------------------------------------------------

Save all

Characteristics of a Database Combo Box

Based on its functionality, a DBComboBox is a text-based control that mainly displays text to the user. After adding it to your application, you can (and should) first create the list of values that you expect the user to select items from. To create this list, you use the same approach as the regular combo box: you use the Items property from the Object Inspector that allows you to access the String List Editor. This also means that the strings of the DBComboBox are stored in the Items property and each item is of type AnsiString. After creating the list and clicking OK, you would also need to specify the table's column that holds the values of this control. This is simply done using the DataField property of the control.

When the DBComboBox displays, the user can select a value from the list or type a new value. If you want, you can allow the user to only select from the list but not create a new item. These scenarios are handled by the Style property that is the same as the Windows combo box we reviewed already.

Practical Learning: Configuring a Database Combo Box

In the form, click the cboItem1Name control and, in the Object Inspector, click the ellipsis button of its Items field

Complete the list with:

None

Women Suit

Dress

Regular Skirt

Skirt With Hook

Men 's Suit 2Pc

Men 's Suit 3Pc

Sweaters

Silk Shirt

Tie

Coat

Jacket

Swede

Click OK
Create the same list for each of the other combo boxes
In the Class Explorer, right-click TfrmMain and click New Method...
Set the Method Name to CalculateOrder
Set the Function Result to void
Click the __fastcall check box and click OK

Implement the method as follows:

//---------------------------------------------------------------------------
void __fastcall TfrmMain::CalculateOrder()
{
    //TODO: Add your source code here
    double ShirtsUnitPrice, ShirtsSubTotal, PantsUnitPrice, PantsSubTotal,
           Item1UnitPrice, Item1SubTotal, Item2UnitPrice, Item2SubTotal,
           Item3UnitPrice, Item3SubTotal, Item4UnitPrice, Item4SubTotal,
           CleaningTotal, TaxRate, TaxAmount, OrderTotal;
    int ShirtsQuantity, PantsQuantity, Item1Quantity,
        Item2Quantity, Item3Quantity, Item4Quantity;

    ShirtsUnitPrice = this->dbeShirtsUnitPrice->Text.ToDouble();
    ShirtsQuantity  = this->dbeShirtsQuantity->Text.ToInt();
    ShirtsSubTotal  = ShirtsUnitPrice * ShirtsQuantity;
    this->dbeShirtsSubTotal->Text = FloatToStrF(ShirtsSubTotal, ffFixed, 6, 2);

    PantsUnitPrice  = this->dbePantsUnitPrice->Text.ToDouble();
    PantsQuantity   = this->dbePantsQuantity->Text.ToInt();
    PantsSubTotal   = PantsUnitPrice * PantsQuantity; 
    this->dbePantsSubTotal->Text = FloatToStrF(PantsSubTotal, ffFixed, 6, 2);

    Item1UnitPrice  = this->dbeItem1UnitPrice->Text.ToDouble();
    Item1Quantity   = this->dbeItem1Quantity->Text.ToInt();
    Item1SubTotal   = Item1UnitPrice * Item1Quantity;
    this->dbeItem1SubTotal->Text = FloatToStrF(Item1SubTotal, ffFixed, 6, 2);

    Item2UnitPrice  = this->dbeItem2UnitPrice->Text.ToDouble();
    Item2Quantity   = this->dbeItem2Quantity->Text.ToInt();
    Item2SubTotal   = Item2UnitPrice * Item2Quantity; 
    this->dbeItem2SubTotal->Text = FloatToStrF(Item2SubTotal, ffFixed, 6, 2);
    
    Item3UnitPrice  = this->dbeItem3UnitPrice->Text.ToDouble();
    Item3Quantity   = this->dbeItem3Quantity->Text.ToInt();
    Item3SubTotal   = Item3UnitPrice * Item3Quantity; 
    this->dbeItem3SubTotal->Text = FloatToStrF(Item3SubTotal, ffFixed, 6, 2);
                              
    Item4UnitPrice  = this->dbeItem4UnitPrice->Text.ToDouble();
    Item4Quantity   = this->dbeItem4Quantity->Text.ToInt();
    Item4SubTotal   = Item4UnitPrice * Item4Quantity;
    this->dbeItem4SubTotal->Text = FloatToStrF(Item4SubTotal, ffFixed, 6, 2);

    CleaningTotal = ShirtsSubTotal + PantsSubTotal + Item1SubTotal +
                    Item2SubTotal + Item3SubTotal + Item4SubTotal;
    this->dbeCleaningTotal->Text = FloatToStrF(Item4SubTotal, ffFixed, 6, 2);

    TaxRate = this->dbeTaxRate->Text.ToDouble();
    TaxAmount = CleaningTotal * TaxRate / 100;
    OrderTotal = CleaningTotal + TaxAmount;

    this->dbeCleaningTotal->Text = FloatToStrF(CleaningTotal, ffFixed, 6, 2);
    this->dbeTaxAmount->Text = FloatToStrF(TaxAmount, ffFixed, 6, 2);
    this->dbeOrderTotal->Text = FloatToStrF(OrderTotal, ffFixed, 6, 2);
}
//---------------------------------------------------------------------------

Return to the form and click the first edit box under Qty
In the Object Inspector, click Events and double-click the right field to OnExit

Implement it as follows:

//---------------------------------------------------------------------------
void __fastcall TfrmMain::dbeShirtsQuantityExit(TObject *Sender)
{
    CalculateOrder();    
}
//---------------------------------------------------------------------------

Return to the form and click the second edit box under Qty