什么组件事件应的CSS类在煎茶ExtJS的框架被删除？ （烦人红线）(What componen

2019-10-21 04:05发布

站内文章 / 后端开发
39 0 0

这个恼人红线随机显示出来使用调整该组件时，它的拆分条（组分的顶边）。

我也没搞清楚，如何通过删除其CSS类永久删除红线，但有一个问题22.我有困难的时候，在这个活动1组件煎茶ExtJS的框架移除CSS类。 我有一个风格问题，即backgroundColor样式属性显示该组件在容器内的一个非常具体的布局的红线。 红颜色实际上是从一个名为“.X-边界布局克拉”级的到来。 由于这三个组件的backgroundColor是“＃F1F1F1”（白ISH），由于这三个组件在活动1的顶部，它应该掩饰活动1的backgroundColor。 它实际是，但只有当我调整活动1面板（视）一定的大小。

我能够通过删除此类的带有“this.removeCls（‘X-边界布局-CT’）”来纠正问题，但如果我申请‘this.callParent（参数）’，这是行不通的。 CSS类回来在这种情况下。 这不是很好的避免“this.callParent（参数）”，因为这样的面板接头没有得到呈现。 

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 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”。 再次注意，由具有“removeCls”全部由itslef（如“beforeRender”事件的唯一功能，类消失，因此从活动1的backgroundColor恼人的红线是不可见的。但是，如果我有“this.callParent（参数）”即线下，它不会删除从活动1实际的CSS类。如果这是什么事件‘removeCls’函数调用，所以它删除的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!
        }
    }, {


文章来源: What component event should CSS classes be removed in Sencha ExtJS framework? (annoying red line)
标签： css class events extjs4 removeclass
举报

收藏的人(0)

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