split 설정이 true된 패널의 경우 collapsible 옵션을 true로 주어서 화면에 보여주는 것을 토글(toggle)시킬 수 있다.
그런데 이 패널을 collpased 시키면 기존 설정된 타이틀이 없어지게 된다. 아래 그림을 보자.
위 그림에서 ②번 그림과 같이 collpased된 패널의 타이틀이 없어졌다.
③번 그림이 이를 해결한 그림인데 아래 코드를 해당 스크립트 파일에 정의해주면 된다.
경우에 따라 이 타이틀을 이미지로 바꾸어도 될 것 같다.
var helpPanel = new Ext.Panel({
id : 'help-panel',
title : '도움말',
region : 'south',
height : 250,
autoScroll : true,
collapsible : true,
collapsed : true,
split : true
});
id : 'help-panel',
title : '도움말',
region : 'south',
height : 250,
autoScroll : true,
collapsible : true,
collapsed : true,
split : true
});
그런데 이 패널을 collpased 시키면 기존 설정된 타이틀이 없어지게 된다. 아래 그림을 보자.
위 그림에서 ②번 그림과 같이 collpased된 패널의 타이틀이 없어졌다.
③번 그림이 이를 해결한 그림인데 아래 코드를 해당 스크립트 파일에 정의해주면 된다.
Ext.layout.BorderLayout.Region.prototype.getCollapsedEl =
Ext.layout.BorderLayout.Region.prototype.getCollapsedEl.createSequence(function() {
if ((this.position == 'north' || this.position == 'south') && !this.collapsedEl.titleEl) {
this.collapsedEl.titleEl = this.collapsedEl.createChild(
{
style : 'color:#15428b; font:12px; padding:2px 5px;',
cn : this.panel.title
}
);
}
});
Ext.layout.BorderLayout.Region.prototype.getCollapsedEl.createSequence(function() {
if ((this.position == 'north' || this.position == 'south') && !this.collapsedEl.titleEl) {
this.collapsedEl.titleEl = this.collapsedEl.createChild(
{
style : 'color:#15428b; font:12px; padding:2px 5px;',
cn : this.panel.title
}
);
}
});
경우에 따라 이 타이틀을 이미지로 바꾸어도 될 것 같다.
'자바스크립트 > ExtJS' 카테고리의 다른 글
| ExtJS 실무 적용기 (1) | 2009.06.16 |
|---|---|
| ExtJS - IE에서의 radiogroup 표시 오류 (0) | 2009.05.19 |
| ExtJS - IE에서의 EditorGridPanel 오류 (0) | 2009.05.19 |
| ExtJS - ComboBox에서 Key값 submit이 안될경우 (0) | 2009.05.19 |
| IE Javascript debugger (0) | 2009.05.18 |