class - What component event should CSS classes be removed in Sencha ExtJS framework? (annoying red line) -

class - What component event should CSS classes be removed in Sencha ExtJS framework? (annoying red line) -

this annoying reddish line shows randomly when resizing component using it's split bar (top border of component).

i did figure out how remove reddish line permanently removing css class, there's grab 22. i'm having hard time removing css class in sencha extjs framework activity1 component. have styling issue backgroundcolor style attribute shows reddish line specific layout of containers within component. reddish color coming class named ".x-border-layout-ct". since backgroundcolor of these 3 components '#f1f1f1' (white-ish), , since these 3 components on top of activity1, should cover activity1 backgroundcolor. in fact, when resize activity1 panel (in viewport) sizes.

i able right issue removing class "this.removecls('.x-border-layout-ct')", if apply "this.callparent(arguments)", doesn't work. css class comes in case. it's not avoid "this.callparent(arguments)" because panel header doesn't 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 remove reddish line between top_component , 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); } } });

in rendered html, can see css class set. @ 2nd "div" tag, in 2nd level of "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;"> <div id="view-module1-activity1-1046_header-body" class="x-header-body x-panel-header-body x-panel-header-body-default x-panel-header-body-horizontal x-panel-header-body-default-horizontal x-panel-header-body-top x-panel-header-body-default-top x-panel-header-body-docked-top x-panel-header-body-default-docked-top x-box-layout-ct x-panel-header-body-default-horizontal x-panel-header-body-default-top x-panel-header-body-default-docked-top" style="width: 791px;"> <div id="view-module1-activity1-1046_header-innerct" class="x-box-inner " role="presentation" style="width: 791px; height: 16px;"> <div id="view-module1-activity1-1046_header-targetel" class="x-box-target" style="width: 791px;"> <div class="x-component x-header-text-container x-panel-header-text-container x-panel-header-text-container-default x-box-item x-component-default" unselectable="on" id="view-module1-activity1-1046_header_hd" style="right: auto; left: 0px; top: 0px; margin: 0px; width: 791px;"><span id="view-module1-activity1-1046_header_hd-textel" class="x-header-text x-panel-header-text x-panel-header-text-default" unselectable="on">test</span> </div> </div> </div> </div> </div> <div id="view-module1-activity1-1046-body" class="x-panel-body x-panel-body-default x-border-layout-ct x-panel-body-default" style="width: 803px; height: 273px; left: 0px; top: 25px;"> <div class="x-panel x-autowidth-table x-grid-no-row-lines x-grid-header-hidden x-border-item x-box-item x-panel-default x-tree-panel x-tree-lines x-grid" id="top_component" style="right: auto; left: 0px; top: 0px; margin: 0px; width: 801px; height: 124px;"> <div class="x-grid-header-ct x-grid-header-ct-hidden x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct" style="border-width: 1px; height: 0px; right: auto; left: 0px; top: 0px; width: 801px;" id="headercontainer-1047"> <div id="headercontainer-1047-innerct" class="x-box-inner " role="presentation" style="width: 10017px; height: 0px;"> <div id="headercontainer-1047-targetel" class="x-box-target" style="width: 10017px;"> <div class="x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-column-header-first x-column-header-last" style="border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; width: 10000px; right: auto; left: 0px; top: 0px; margin: 0px; height: 0px;" id="treecolumn-1048"> <div id="treecolumn-1048-titleel" class="x-column-header-inner"><span id="treecolumn-1048-textel" class="x-column-header-text">name</span> <div id="treecolumn-1048-triggerel" class="x-column-header-trigger"></div> </div> </div> </div> </div> </div> <div id="top_component-body" class="x-panel-body x-grid-body x-panel-body-default x-layout-fit x-panel-body-default" style="width: 801px; height: 124px; left: 0px; top: 0px;"> <div class="x-tree-view x-fit-item x-tree-view-default x-unselectable" id="treeview-1049" tabindex="-1" style="overflow: auto; margin: 0px; width: 799px; height: 122px;"> <table role="presentation" id="treeview-1049-table" class="x-treeview-1049-table x-grid-table" border="0" cellspacing="0" cellpadding="0" style="width: 10000px;" tabindex="-1"> <colgroup> <col class="x-grid-cell-treecolumn-1048" style="width: 10000px;"> </colgroup> <tbody id="treeview-1049-body"></tbody> </table> </div> </div> </div> <div class="x-component x-border-item x-box-item x-component-default" style="color: rgb(183, 1, 1); text-align: center; font-size: large; height: 23px; right: auto; left: 0px; top: 124px; margin: 0px; width: 801px; background-color: rgb(241, 241, 241);" id="middle_component"><i>middle component</i> </div> <div class="x-panel x-autowidth-table x-grid-no-row-lines x-grid-header-hidden x-border-item x-box-item x-panel-default x-tree-panel x-tree-lines x-grid" id="bottom_component" style="right: auto; left: 0px; top: 147px; margin: 0px; width: 801px; height: 124px;"> <div class="x-grid-header-ct x-grid-header-ct-hidden x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct" style="border-width: 1px; height: 0px; right: auto; left: 0px; top: 0px; width: 801px;" id="headercontainer-1050"> <div id="headercontainer-1050-innerct" class="x-box-inner " role="presentation" style="width: 10017px; height: 0px;"> <div id="headercontainer-1050-targetel" class="x-box-target" style="width: 10017px;"> <div class="x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-column-header-first x-column-header-last" style="border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; width: 10000px; right: auto; left: 0px; top: 0px; margin: 0px; height: 0px;" id="treecolumn-1051"> <div id="treecolumn-1051-titleel" class="x-column-header-inner"><span id="treecolumn-1051-textel" class="x-column-header-text">name</span> <div id="treecolumn-1051-triggerel" class="x-column-header-trigger"></div> </div> </div> </div> </div> </div> <div id="bottom_component-body" class="x-panel-body x-grid-body x-panel-body-default x-layout-fit x-panel-body-default" style="width: 801px; left: 0px; top: 0px; height: 124px;"> <div class="x-tree-view x-fit-item x-tree-view-default x-unselectable" id="treeview-1052" tabindex="-1" style="overflow: auto; margin: 0px; width: 799px; height: 122px;"> <table role="presentation" id="treeview-1052-table" class="x-treeview-1052-table x-grid-table" border="0" cellspacing="0" cellpadding="0" style="width: 10000px;" tabindex="-1"> <colgroup> <col class="x-grid-cell-treecolumn-1051" style="width: 10000px;"> </colgroup> <tbody id="treeview-1052-body"></tbody> </table> </div> </div> </div> </div> </div>

i found presentation talks component life cycle, not figure out event "removecls" needs called if have multiple levels of containers. note again, having "removecls" itslef (as function in "beforerender" event, class disappears, , annoying reddish line activity1 backgroundcolor not visible. if have "this.callparent(arguments)" below line, not remove actual css class activity1. event should "removecls" function called removes css class?

http://www.slideshare.net/moduscreate/ext-js-40-components-and-layouts

component life cycle:

1. initialization - bootstrap component (create id, register componentmgr, etc.) a. configuration object applied b. base of operations events added i. before activate, beforeshow, show, render c. id assigned or auto generated d. plugins constructed (think ptypes or aliases) e. initcomponent executed i. custom listeners applied ii. bubbleevents initialized f. component registered componentmanager g. base of operations mixin constructors executed i. observable's constructor called ii. state's constructor called h. plugins initialized i. component loader initialized j. if configured, component rendered (renderto, applyto) k. if configured, component shown 2. render - paint component on screen, hook element based events, utilize layouts organize components a. beforerender event fired b. component's element cached 'el' reference c. if floating component, floating enabled , registered windowmanager d. component's container element initialized e. onrender executed i. component's element injected dom ii. scoped reset css applied if configured iii. base of operations css classes , styles applied iv. 'ui' applied v. 'frame' initialized vi. rendertpl initialized vii. renderdata initialized viii. rendertpl applied component's element using renderdata ix. render selectors applied x. 'ui' styles applied f. element's visibility mode set via hidemode attribute g. if overcls set, mouseover/out events hooked h. render event fired i. component's contents initialized (html, contentel, tpl/data) j. afterrender executed i. container layout initialized (abstractcontainer) ii. componentlayout initialized (abstractcomponent) iii. component's size set iv. if floating, component moved in xy coordinate space k. afterrender event fired l. afterrender events hooked cmp's elements m. component hidden if configured n. component disabled if configured 3. destruction - wipe component screen, purge event listeners a. beforedestroy event fired b. if floating, component deregistered floating manager c. component removed parent container d. element removed dom i. element listeners purged e. ondestroy called f. plugins destroyed g. component deregistered componentmanager h. destroy event fired i. state mixin destroyed j. component listeners purged

i fixed doing different. issue coming margin of middle component. when apply top margin -1px of middle component, reddish line never there. margin little 1 pixel depending on how much move it. i'd rather have smaller on top 1px on top sometimes, having reddish line sometimes.

}, { id: 'middle_component', region: 'center', xtype: 'component', html: '<i>middle component</i>', height: 50, style: { backgroundcolor: '#f1f1f1', color: '#b70101', textalign: 'center', fontsize: 'large', margin: '-1px 0px 0px 0px' // added line! } }, {

css class events extjs4 removeclass