Occasionally, an aggravating red line will appear unpredictably when adjusting the size of this component using its split bar located at the top edge of the component.
I managed to find a way to permanently eliminate the red line by removing its CSS class. However, here lies the dilemma. I am encountering challenges in removing a CSS class within the Sencha ExtJS framework for the Activity1 component. The issue pertains to styling where the backgroundColor attribute displays a red line for a very specific layout of containers within the component. This red color is actually originating from a class named ".x-border-layout-ct". Since the backgroundColor of these three components is '#F1F1F1' (white-ish) and they are positioned on top of Activity1, they should cover up the Activity1 backgroundColor. It does work as expected, but only when I resize the Activity1 panel within the viewport to certain dimensions.
To rectify this problem, I resorted to removing this class with "this.removeCls('.x-border-layout-ct')". However, applying "this.callParent(arguments)" did not yield the desired outcome. The CSS class reappeared in that scenario. Avoiding "this.callParent(arguments)" is not an ideal solution either because it prevents the panel header from being rendered.
Ext.define('App.view.module1.Activity1', {
extend: 'Ext.form.Panel',
xtype: 'view-module1-activity1',
title: 'test',
layout: {
type: 'border'
},
items: [{
id: 'top_component',
region: 'north',
xtype: 'component',
html: 'top panel',
style: {
backgroundColor: '#F1F1F1'
}
}, {
id: 'middle_component',
region: 'center',
xtype: 'component',
html: '<i>Middle Component</i>',
height: 50,
style: {
backgroundColor: '#F1F1F1',
color: '#b70101',
textAlign: 'center',
fontSize: 'large'
}
}, {
id: 'bottom_component',
region: 'south',
xtype: 'component',
html: 'bottom panel',
style: {
backgroundColor: '#F1F1F1'
}
}],
beforeRender: function() {
this.removeCls('.x-border-layout-ct'); // hack to remove red line between top_component and middle_component
this.callParent(arguments);
},
listeners: {
resize: function(view, width, height, oldWidth, oldHeight, eOpts) {
Ext.getCmp('top_component').setHeight((height-50)/2);
Ext.getCmp('bottom_component').setHeight((height-50)/2);
}
}
});
Upon inspecting the rendered HTML, you can identify where this CSS class is defined. Take note of the 2nd "div" tag among the 2nd level of nested "div" tags.
<div class="x-panel x-border-item x-box-item x-panel-default" style="height: 298px; right: auto; left: 0px; top: 303px; margin: 0px; width: 803px;" id="view-module1-activity1-1046">
<div class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top" id="view-module1-activity1-1046_header" style="right: auto; left: 0px; top: 0px; width: 803px;"&...
While referencing a presentation regarding the Component Life Cycle, I struggled to determine which event "removeCls" should be called from when dealing with multiple levels of containers. Notably, solely having the "removeCls" function in the "beforeRender" event successfully eradicated the class, thereby eliminating the vexatious red line from the Activity1 backgroundColor. However, including "this.callParent(arguments)" after that line failed to remove the actual CSS class from Activity1. Which event would enable the "removeCls" function to effectively eliminate the CSS class?
Component Life Cycle:
1. Initialization - Bootstrap the Component (Create ID, register with ComponentMgr, etc.)
a. configuration object is applied
b. base events are added
i. before activate, beforeshow, show, render
c. ID is assigned or auto generated
d. plugins are constructed (think ptypes or aliases)
e. initComponent is executed
...