css - 在 Sencha ExtJS 框架中应该删除什么 CSS 类的组件事件？ (烦人的红线)

Question

当使用它的拆分条(组件的顶部边缘)调整此组件的大小时，这条恼人的红线随机出现。

我确实弄清楚了如何通过删除它的 CSS 类来永久删除红线，但是有一个问题 22。我很难删除此 Activity1 组件的 Sencha ExtJS 框架中的 CSS 类。我有一个样式问题，其中 backgroundColor 样式属性针对该组件内非常具体的容器布局显示一条红线。红色实际上来自名为“.x-border-layout-ct”的类。由于这三个组件的 backgroundColor 是“#F1F1F1”(白色)，并且由于这三个组件位于 Activity1 之上，因此它应该覆盖 Activity1 backgroundColor。事实上，它确实如此，但只有当我将 Activity1 面板(在视口(viewport)中)调整为特定大小时。

我能够通过使用“this.removeCls('.x-border-layout-ct')”删除此类来纠正问题，但是如果我应用“this.callParent(arguments)”，它不会工作。在这种情况下，CSS 类会返回。避免使用“this.callParent(arguments)”是不好的，因为这样面板标题就不会被渲染。

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);
        }
    }

});

在呈现的 HTML 中，您可以看到设置此 CSS 类的位置。查看第二个“div”标签，在“div”标签的第二层。

<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>

我找到了这个关于组件生命周期的演示文稿，但我无法弄清楚如果您有多个级别的容器，需要从什么事件中调用“removeCls”。再次注意，通过 itslef 全部使用“removeCls”(作为“beforeRender”事件中的唯一函数，该类消失，因此 Activity1 backgroundColor 中恼人的红线不可见。但是如果我有“this.callParent( arguments)”，它不会从 Activity1 中删除实际的 CSS 类。应该调用什么事件来删除 CSS 类？

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

组件生命周期:

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

Answer 1

我通过做一些不同的事情来修复它。问题来自中间组件的边缘。当我将上边距应用为中间组件的 -1px 时，红线永远不会出现。但有时边距太小一个像素，具体取决于我移动了多少。但有时我宁愿将其顶部缩小 1px，也不愿有时使用红线。

    }, {
        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!
        }
    }, {