Question: How do I make certain panels have different colors and texts? (JavaScript) view.setHtml('left header'); view.setStyle({ backgroundColor: '#6AAF3F', 'font-size': '300%', 'color': 'white' }); (Full code if

How do I make certain panels have different colors and texts? (JavaScript)

view.setHtml('left header'); view.setStyle({ backgroundColor: '#6AAF3F', 'font-size': '300%', 'color': 'white' });

(Full code if needed, runs on Sencha Fiddle (ExtJS) )

Ext.application({ name: 'Boning Room', launch: function () { Ext.Viewport.add({ xtype: 'maincontainer' }); const primalCutContainer = Ext.ComponentQuery.query('#primalCutContainer')[0]; for (sc = 0; sc < 7; sc++) {

const view = primalCutContainer.add({ xtype: 'primalcutrow' });

view.setHtml('left header'); 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': '400%' }, layout: 'hbox', }, { //Right header two xtype: 'container', flex: 2, html: 'HEADER 2', style: { background: '#6AAF3F', color: 'white', 'font-size': '400%' }, }] }, { //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: 'DetailsContainer', flex: 2, style: { background: 'darkblue' }, layout: 'vbox', items: [{ //Cut Details Container 1 xtype: 'container', flex: 1, html: 'container details', layout: 'hbox', style: { background: '#58585A' }, }, { //Cut Details Container 2 xtype: 'container', flex: 1, html: 'container details 2', layout: 'vbox', style: { background: '#FFFF00' } }] }] }] }); Ext.define('PrimalCutRow', { extend: 'Ext.Container', xtype: 'primalcutrow', flex: 1, items: [{ xtype: 'label', }, { itemId: 'lbl', xtype: 'label', }] });

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!