1
이 성가신 빨간색 선은이 구성 요소의 분할 막대 (구성 요소의 위쪽 가장자리)를 사용하여이 구성 요소의 크기를 조정할 때 무작위로 표시됩니다.Sencha ExtJS 프레임 워크에서 CSS 클래스를 제거해야하는 구성 요소 이벤트는 무엇입니까? (성가신 빨간색 선)
CSS 클래스를 제거하여 빨간색 선을 영구히 제거하는 방법을 알아 냈지만 catch 22가 있습니다.이 Activity1 구성 요소의 Sencha ExtJS 프레임 워크에서 CSS 클래스를 제거하는 데 어려움을 겪고 있습니다. backgroundColor 스타일 속성이 해당 구성 요소 내에있는 컨테이너의 매우 구체적인 레이아웃에 대한 빨간색 선을 표시하는 스타일 문제가 있습니다. 붉은 색은 실제로 ".x-border-layout-ct"라는 이름의 클래스에서옵니다. 이 세 가지 구성 요소의 backgroundColor는 '# F1F1F1'(흰색 ㅡ)이므로이 세 가지 구성 요소가 Activity1 위에 있기 때문에 Activity1 backgroundColor를 덮어 야합니다. 사실, Activity1 패널 (뷰포트에서)의 크기를 특정 크기로 조정할 때만 가능합니다.
"this.removeCls ('. x-border-layout-ct')"로이 클래스를 제거하여 문제를 해결할 수 있었지만 "this.callParent (arguments)"를 적용하면 문제가 해결되지 않았습니다. 일하지 마라. 이 경우 CSS 클래스가 다시 나타납니다. 패널 헤더가 렌더링되지 않기 때문에 "this.callParent (arguments)"를 피하는 것은 좋지 않습니다. 이 CSS 클래스가 설정되는 경우
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);
}
}
});
<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>
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