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)
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',
}
]
});
Step by step
Solved in 2 steps
