Web UI Framework localization - example of localizing the structure of panel components

Outputs in a sentence-based localization panel can vary.

The following examples shows two different outputs from the following sentence-based localized panel:

Ext.panel instance 
      |
      |__scLocalizedSKey = "DiscountAmount"
      |
      |__scLocalizedLabelCss= "custom-css"
      |
      |__items (children)
           |
           |__Amount TextField
           |
           |__Discount comboField

Using this instance of Ext.panel, the panel could appear differently in two locales. The %sciId values refer to the controls (text field and combo field).

Locale A code:

DiscountAmount = " for Order amount greater than {%sciId0} , give {%sciId1} % discount."
Ext.panel instance
 
    |
    |__children
          |
          |__label "for Order amount greater than "
          |
          |__Amount TextField 
          | 
          |__label ", give "
          |
          |__Discount comboField
          |
          |__label " % discount. "
//all labels created with style 'custom-css' and 'sc-plat-localizedLbl'

Locale A output:

Locale B code:

DiscountAmount = "{%sciId1} {xtype:'label,text:'% discount, for Order 
amount greater than',cls:'custom-css'} {%sciId0} ."
Ext.panel instance 
      |
      |__children   
            |
            |__Discount comboField
            |
          |__string ``{xtype:'label,text:'% discount, for Order
amount greater than',cls:'custom-css'}`` will be passed to eval.
            |
            |__Amount TextField

Locale B output:

Display of locale B output with a percentage box and a dropdown menu for percentage discount