How do I change the color of every green side header and how do I add more containers in the grey and blue right panel? (JavaScript)

Color can be anything you want:

Code:

Ext.application({ name: 'Boning Room', launch: function () { Ext.Viewport.add({ xtype: 'maincontainer' }); const primalCutContainer = Ext.ComponentQuery.query('#primalCutContainer')[0]; for (sc = 0; sc <6; sc++){ const view = primalCutContainer.add({xtype: 'primalcutrow'}); view.setHtml('sideHeaders'); view.setStyle({backgroundColor:'#6AAF3F', 'font-size': '300%', 'color': 'white'}); } } }); Ext.define('ProductionDisplayUI.MainContainer', { // Page Body extend: 'Ext.Container', xtype: 'maincontainer', height: '100%', width: '100%', layout: 'vbox', items: [ { //Header xtype: 'container', flex: 1, style: { background: 'limegreen' }, layout: 'hbox', items: [ { //Right header two xtype: 'container', flex: 1, html: 'header 1', style: { background: '#6AAF3F', color: 'white', 'font-size': '300%' }, layout: 'hbox', }, { //Right header two xtype: 'container', flex: 2, html: 'header 2', style: { background: '#6AAF3F', color: 'white', 'font-size': '300%' } } ] }, { //Panels xtype: 'container', flex: 7, layout: 'hbox', style: { background: 'lightgrey' }, items: [ { //Primal Cuts Container xtype: 'container', flex: 1, itemId: 'primalCutContainer', layout: 'vbox', style: { background: 'orange' }, }, { //Primal Cut Details Container xtype: 'container', layout: 'vbox', itemId: 'primalCutDetailsContainer', flex: 2, style: { background: 'darkblue' }, layout: 'vbox', items: [ { //Cut Details Container 1 xtype: 'container', flex: 1, layout: 'hbox', style: { background: 'grey' }, }, { //Cut Details Container 2 xtype: 'container', flex: 1, layout: 'vbox', style: { background: 'deepskyblue' } } ] } ] } ] }); Ext.define('PrimalCutRow',{ extend: 'Ext.Container', xtype: 'primalcutrow', flex: 1, items:[ { xtype: 'label', }, { itemId: 'lbl', xtype: 'label', } ] });