在Sencha ExtJS框架中应该删除哪些组件事件? (恼人的红线)

当使用它的分割条(组件的上边缘)调整此组件的大小时,这条恼人的红线会随机出现。

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

我能够通过使用“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: 'Middle Component', 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”标签。

 
Middle Component

我发现这个演示文稿讨论了组件生命周期,但我无法弄清楚如果你有多个级别的容器,需要调用哪个事件“removeCls”。 再次注意,通过itslef使“removeCls”全部(作为“beforeRender”事件中的唯一函数),类消失,因此来自Activity1 backgroundColor的恼人的红线不可见。但是如果我有“this.callParent”(参数)“在该行之下,它不会从Activity1中删除实际的CSS类。这个”removeCls“函数应该调用什么事件才能删除CSS类?

Ext JS 4.0 components and layouts from Patrick Sheridan

组件生命周期:

 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 

我通过做一些不同的事来修复它。 问题来自中间部分的边缘。 当我将上边距应用为中间组件的-1px时,红线永远不会存在。 但有时边距太小了一个像素,这取决于我移动它的程度。 但有时候,我宁愿把它放在顶部1px以上,而不是有时候用红线。

  }, { id: 'middle_component', region: 'center', xtype: 'component', html: 'Middle Component', height: 50, style: { backgroundColor: '#F1F1F1', color: '#b70101', textAlign: 'center', fontSize: 'large', margin: '-1px 0px 0px 0px' // added this line! } }, {