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: