비정상 컴퍼넌트이거나, 아직 랜더링이 안된 경우입니다.
기초 모듈패턴에서도, return 이후에나 엘리먼트에 접근이 가능한데 전반부에 Ext.getCmp 등으로 컴퍼넌트를 가져올 수 는 있어도, 엘리먼트를 가져올 수 는 없습니다. 스토리는 이렇습니다.
- 스토리 -
버튼모양을 아래처럼 변경하기 위해, 직접 엘리먼트에 접근하기로 했습니다.
 |
참조소스가 ext2.X 대에서 제작된 것이긴 했는데, 아래와 같이 버튼을 재정의 하고 있었습니다.
this.fileList.on('render',function(){
this.fileList.getBottomToolbar().add(this.progressBar);
var tb = this.fileList.getTopToolbar();
tb.add({
text : '添加文件',
iconCls : 'db-icn-add'
});
var em = this.fileList.getTopToolbar().items.first().el.child('em');
//객체접근 방법이 중요한게 아니라, 위에서 el 이 undefind 가 발생합니다.
var placeHolderId = Ext.id();
em.setStyle({
position: 'relative',
display: 'block'
});
em.createChild({
tag: 'div',
id: placeHolderId
});
위와 같이 리스트에 render 리스너를 달아, 리스트 랜더링이 끝난후, 툴바의 버튼을 가져와 스타일과 태그를 조작하고 있습니다만, el 이 널이거나 undefind 가 발생하게 됩니다. 하지만 이 소스는 ext 하위 버젼에선 잘 돌아가는 소스였습니다. 문제는 lazy rendering (xtype) 등으로 인해, 상위 리스트 컴퍼넌트가 랜더링 되었다고, 반드시 하위에 붙어있는 툴바의 버튼들이 랜더링이 완료되었다는 보장이 없습니다. renddered 속성을 보면 리스트는 true 이나, 버튼은 false 임을 알 수 있었습니다. 그래서 해당 버튼을 초기화하고, 버튼에 직접 리스너를 걸어주었더니 잘 되는군요. this._btnAdd = new Ext.Button({
text: '파일추가',
iconCls: 'db-icn-add'
});
this._btnAdd.on('render', function(){
//랜더링은 언제하는거냐?
var em = this.fileList.getTopToolbar().items.first().el.child('em');
var placeHolderId = Ext.id();
em.setStyle({
position: 'relative',
display: 'block'
});
em.createChild({
tag: 'div',
id: placeHolderId,
html: '<HR><BR>메롱'
});
}, this);
이거 때문에 정말 삽질 많이 했습니다. 포럼에 물어보기도 애매하고, 역시 기초가 중요하군요. 잘 생각해보면 어쩌면 당연한걸수도 있었습니다. ㅜ.ㅜ
이올린에 북마크하기
