html config property not showing the bullet points and their indentation

[Hviezdoslav]

Greetings,

For the first time I am using for a Ext.forrm.Label the html config property. The bullet point tags in the html that I am entering into the html config property are not showing the indentation and bullet points in the browser when I preview the Sencha app.

At the URL http://www.quackit.com/html_5/tags/html_pre_tag.cfm, the same html that I am entering into the html config property is working and there is indentation for the bullet points and the symbols for the bullet points show.

Here is all of my present code:

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',
 
    autoScroll: true,
 
    initComponent: function() {
        var me = this;
 
        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'form',
                    id: 'theComboForm',
                    itemId: 'theComboForm',
                    autoScroll: false,
                    bodyPadding: 10,
                    title: '',
                    listeners: {
                        afterrender: {
                            fn: me.onFormAfterRender,
                            scope: me
                        }
                    },
                    items: [
                        {
                            xtype: 'container',
                            id: 'containerFirstLabel',
                            layout: {
                                align: 'stretch',
                                type: 'hbox'
                            },
                            items: [
                                {
                                    xtype: 'label',
                                    cls: 'myLabelAtTopOfPage ',
                                    style: 'font: normal 14px arial color="#000066"',
                                    text: 'Enter the data for a combo box.'
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            id: 'containerFootnoteAboutComboTemp',
                            margin: '20 0 0 0 ',
                            layout: {
                                align: 'stretch',
                                type: 'hbox'
                            },
                            items: [
                                {
                                    xtype: 'label',
                                    flex: 1,
                                    cls: 'For_Footnote_Labels',
                                    id: 'instructionComboTemp',
                                    text: 'Notify QA to determine disposition if any combo is not below 40 degrees.'
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            id: 'containerFootnoteAboutSlaughterAndBoneDate',
                            margin: '10 0 0 0',
                            layout: {
                                align: 'stretch',
                                type: 'hbox'
                            },
                            items: [
                                {
                                    xtype: 'label',
                                    cls: 'For_Footnote_Labels',
                                    id: 'instructionSlaughterAndBoneDate',
                                    text: 'Poultry is Slaughter Date and Red Meat is Bone Date.'
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            id: 'containerFootnoteAboutFatPercent',
                            margin: '10 0 0 0',
                            layout: {
                                align: 'stretch',
                                type: 'vbox'
                            },
                            items: [
                                {
                                    xtype: 'label',
                                    flex: 1,
                                    cls: 'For_Footnote_Labels',
                                    html: 'Maximum Fat %:<ul><br /><li>Beef 90s = 11%</li> <li>Beef 85s = 17%</li> <li>Beef 50s = 52%</li> <li>MST = 22%</li> <li>Pork 80s or Picnic = 30%</li> <li>Pork 50s = 60%</li> </ul><br />(Notify Supervisor, Process Control Manager, or QA if Fat % is above “Maximum Fat %”)  ',
                                    id: 'instructionFatPercent',
                                    text: ''
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            id: 'containerDataInputControls',
                            margin: '20 0 0 0',
                            layout: {
                                align: 'stretch',
                                type: 'hbox'
                            },
                            items: [
                                {
                                    xtype: 'numberfield',
                                    id: 'paramBilledWeight',
                                    width: 160,
                                    name: 'paramBilledWeight',
                                    fieldLabel: 'Billed Weight',
                                    labelClsExtra: 'Labels_for_controls',
                                    labelWidth: 80,
                                    allowBlank: false,
                                    enforceMaxLength: true,
                                    maxLength: 10,
                                    minLength: 1,
                                    hideTrigger: true,
                                    allowDecimals: false,
                                    autoStripChars: true,
                                    maxValue: 2147483647,
                                    minValue: 1
                                },
                                {
                                    xtype: 'numberfield',
                                    margin: '0 0 0 20',
                                    width: 160,
                                    name: 'paramGrossWeight',
                                    fieldLabel: 'Gross Weight',
                                    labelClsExtra: 'Labels_for_controls',
                                    labelWidth: 80,
                                    allowBlank: false,
                                    enforceMaxLength: true,
                                    maxLength: 10,
                                    minLength: 1,
                                    hideTrigger: true,
                                    allowDecimals: false,
                                    autoStripChars: true,
                                    maxValue: 2147483647,
                                    minValue: 1
                                },
                                {
                                    xtype: 'numberfield',
                                    flex: 1,
                                    id: 'paramTare',
                                    margin: '0 0 0 20',
                                    maxWidth: 110,
                                    name: 'paramTare',
                                    fieldLabel: 'Tare',
                                    labelClsExtra: 'Labels_for_controls',
                                    labelWidth: 30,
                                    allowBlank: false,
                                    enforceMaxLength: true,
                                    maxLength: 10,
                                    minLength: 1,
                                    hideTrigger: true,
                                    allowDecimals: false,
                                    autoStripChars: true,
                                    maxValue: 2147483647,
                                    minValue: 1
                                },
                                {
                                    xtype: 'combobox',
                                    flex: 1,
                                    margin: '0 0 0 20',
                                    maxWidth: 240,
                                    fieldLabel: 'Material (check each combo)',
                                    labelClsExtra: 'Labels_for_controls',
                                    labelWidth: 165,
                                    allowBlank: false,
                                    matchFieldWidth: false,
                                    autoSelect: false,
                                    displayField: 'materialAbbreviation',
                                    forceSelection: true,
                                    queryMode: 'local',
                                    store: 'comboMaterialStore',
                                    typeAhead: true,
                                    valueField: 'materialPK'
                                },
                                {
                                    xtype: 'numberfield',
                                    margin: '0 0 0 30',
                                    width: 100,
                                    name: 'paramFatPercent',
                                    fieldLabel: 'Fat %',
                                    labelClsExtra: 'Labels_for_controls',
                                    labelWidth: 40,
                                    allowBlank: false,
                                    selectOnFocus: true,
                                    hideTrigger: true,
                                    autoStripChars: true,
                                    maxValue: 100,
                                    minValue: 0
                                }
                            ]
                        }
                    ]
                }
            ]
        });
 
        me.callParent(arguments);
    },
 
    onFormAfterRender: function(abstractcomponent, options) {
        Ext.getCmp('paramBilledWeight').focus('', 10);
        //Ext.getCmp('paramSlaughterOrBoneDate').setMaxValue(Ext.util.Format.date(new Date(), 'm/d/Y'));
    }
 
});

So when I enter the following html code into the html config property of the label named instructionFatPercent, the indentation and bullet points do not show in the browser when I preview the Sencha app:

Maximum Fat %:<ul><br /><li>Beef 90s = 11%</li> <li>Beef 85s = 17%</li> <li>Beef 50s = 52%</li> <li>MST = 22%</li> <li>Pork 80s or Picnic = 30%</li> <li>Pork 50s = 60%</li> </ul><br />(Notify Supervisor, Process Control Manager, or QA if Fat % is above “Maximum Fat %”)

Yet if I enter that same html code in the Source Code textbox at the URL http://www.quackit.com/html_5/tags/html_pre_tag.cfm, the indentation and bullet points do show in this web page’s Result textbox.

Does anybody have any suggestions? Am I doing something wrong? The break tags in the html code that I am entering seem to work in the browser when I preview the Sencha app. The <ul><li></li></ul> tags though do not seem to work in the browser.

I am using Sencha Architect 2.

Thanks in advance for your consideration of my question. I am trying to get the bullet point symbols and the indentation of the bullet points to show in this label in the browser when I preview the Sencha app.

Hviezdoslav Wed., 30-JAN-2013