What component event should CSS classes be removed

2019-08-05 06:04发布

站内文章 / HTML/CSS
40 0 0

问题:

This annoying red line shows up randomly when resizing this component using it's split bar (top edge of component).

I did figure out how to remove the red line permanently by removing its CSS class, but there's a catch 22. I'm having a difficult time removing a CSS class in the Sencha ExtJS framework for this Activity1 component. I have a styling issue where the backgroundColor style attribute shows a red line for a very specific layout of containers within that component. The red color is actually coming from a class named ".x-border-layout-ct". Since the backgroundColor of these three components is '#F1F1F1' (white-ish), and since these three components are on top of Activity1, it should cover up Activity1 backgroundColor. It does in fact, but only when I resize Activity1 panel (in the viewport) to certain sizes.

I was able to correct the issue by removing this class with "this.removeCls('.x-border-layout-ct')", but if I apply "this.callParent(arguments)", it doesn't work. The CSS class comes back in that case. It's not good to avoid "this.callParent(arguments)" because then the panel header doesn't get 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);
        }
    }

});

In the rendered HTML, you can see where this CSS class is set. Look at the 2nd "div" tag, in the 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 this presentation that talks about the Component Life Cycle, but I could not figure out what event "removeCls" needs to be called from if you have multiple levels of containers. Note again, by having the "removeCls" all by itslef (as the only function in "beforeRender" event, the class disappears, and thus the annoying red line from the Activity1 backgroundColor is not visible. But if I have "this.callParent(arguments)" below that line, it does not remove the actual CSS class from Activity1. What event should this "removeCls" function be called so it removes the CSS class?

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

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
        i. custom listeners are applied
        ii. bubbleEvents are initialized
    f. component is registered with ComponentManager
    g. base mixin constructors are executed
        i. observable's constructor is called
        ii. state's constructor is called
    h. plugins are initialized
    i. component loader is initialized
    j. if configured, component is rendered (renderTo, applyTo)
    k. if configured, component is shown
2. Render - Paint the Component on screen, hook element based events, use layouts to organize components
    a. beforerender event is fired
    b. component's element is cached as the 'el' reference
    c. if a floating component, floating is enabled and registered with WindowManager
    d. the component's container element is initialized
    e. onrender is executed
        i. component's element is injected into the DOM
        ii. scoped reset CSS is applied if configured to do so
        iii. base CSS classes and styles are applied
        iv. 'ui' is applied
        v. 'frame' initialized
        vi. renderTpl is initialized
        vii. renderData is initialized
        viii. renderTpl is applied to component's element using renderData
        ix. Render selectors are applied
        x. 'ui' styles are applied
    f. element's visibility mode is set via the hideMode attribute
    g. if overCls is set, mouseover/out events are hooked
    h. render event is fired
    i. component's contents is initialized (html, contentEl, tpl/data)
    j. afterRender is executed
        i. container layout is initialized (AbstractContainer)
        ii. ComponentLayout is initialized (AbstractComponent)
        iii. Component's size is set
        iv. if floating, component is moved in the XY Coordinate space
    k. afterrender event is fired
    l. afterRender events are hooked into the cmp's Elements
    m. Component is hidden if configured
    n. component is disabled if configured
3. Destruction - wipe the Component from the screen, purge event listeners
    a. beforedestroy event is fired
    b. if floating, the component is deregistered from floating manager
    c. component is removed from its parent container
    d. element is removed from the DOM
        i. element listeners are purged
    e. onDestroy is called
    f. plugins are destroyed
    g. component is deregistered from ComponentManager
    h. destroy event is fired
    i. state mixin is destroyed
    j. component listeners are purged

回答1:

I fixed it by doing something different. The issue was coming from the margin of the middle component. When I apply the top margin as -1px of the middle component, the red line is NEVER there. But sometimes the margin is too small by one pixel depending on how much I move it. But I'd rather have it smaller on top by 1px on top sometimes, than having the red 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 this line!
        }
    }, {


标签： css class events extjs4 removeclass
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~