Web 화면을 설계 하는 경우 보통 Layout을 이용한다. Absolute를 이용하는 것이 가장 깔끔하고 Design이 잘 나오지만 정보 조회를 하기 위해 ExtJs를 사용한 Form이나 Grid 등을 이용할 경우에는 생뚱맞은 Component가 화면 한 가운데 덩그러니 떨어져 있지 않으려면 Layout을 이용하여 적절한 배치를 하는 것이 필요하다.
이 때, Grid는 <table> 태그 내에 존재하는 경우 table DOM의 크기 변화에 반응하지 않는다. 즉, Layout에 직접적인 영향을 받는 경우 ( Layout이 이정된 Component, Container 등에 직접 배치된 경우)에는 화면 레이아웃 변경에 반응하지만 <table> 태그 내에 존재하는 경우(화면 배치를 위해 table을 이용하는 경우, 또는 <div>로 위치 조정한 경우) 아무리 width:100%를 지정해도 처음 배치된 그 크기 이상으로 늘어나거나 줄어들지 않는다. Column은 말할것도 없고.
여러 자료를 찾아봤더니 다음과 같은 해결책이 제시되었다.
1. viewConfig: { forceFit: true, … 추가 ( Container에 있는 경우만 반응)
2. width : 100%, autoSize : true, … (Container에 있는 경우만 반응)
3. viewConfig : {
listeners: {
refresh: function(dataview) { … 적용 안됨
결론은 모두 실패였다.
이런 경우 EventManger를 통해 grid의 크기 조정을 직접 지정할 수 있다.
Ext.EventManager.onWindowResize(function(w, h){
Ext.getCmp(‘grid1’).setWidth( w – 20);
});
onWindowResize 이벤트에 반응하는 EventManger는 grid의 크기 외에 grid의 column 크기 조정과 같은 다른 다양한 layout 관련 작업을 할 수 있다. 다만, grid의 크기를 조절할 때는 반응 속도가 약간 느리다는 단점이 있으니 깔끔한 해결책이라고 할 수는 없다.