요구사항 : 고객은 현재 개발 된 시스템(Extjs기반)이 모바일에서도 작동되게 해달라고 한다.
그러나 PC버전이 모바일(갤탭)에서 잘 돌아가리란 보장이 없는 관계로 테스트를 해보던 중
결정적으로 스크롤 특히 그리드가 문제가 생겼다. PC에서는 우측 스크롤과 하단 스크롤이
보이지만 모바일로 넘어가면 스크롤이 없어지고 데이터가 묻혀버리는 현상이 발생한다.
이 부분을 해결하기 위해서 구글링을 한 결과 2가지 대안을 찾았다.
대안 1 : 모바일일 경우 Ext의 그리드를 override하여 터치모드로 작동되도록 변형할 수 있다.
아래 링크를 통해 확인 할 수 있다. 아래 링크를 갤탭에서 실행하면 터치기능이 작동된다.
http://www.rahulsingla.com/sites/default/files/content/blog/extjs-iscroll/scrolling-ext-containers-on-touch-devices.htm
소스를 잠깐 보면 Panel, Tree, Grid를 override하고 있다. 이렇게 되면 공통 js에 아래코드를 넣고 사용한다면
모든 프로그램에 아래 내용이 적용되어 모바일에서는 자동으로 좌우스크롤이 생성되고 터치 기능으로 작동이 가능하다.
직접 실행해보면 상당히 괜찮을 결과를 얻을 수 있다. 이는 모바일에서 사용되는 iScroll모듈을 Extjs에 적용한 것이다.
인도 친구 인것 같은데 아이디어가 좋은 것 같다. 그러나 문제가 한가지 있다. 우리 시스템은 ExtJs4기반이고 아래
소스는 Extjs3버전이다. 그래서 마이그레이션해서 버전을 올려보려 했으나 결정적으로 아래소스에서 보듣이
Extjs3버전에서는 스크롤의 아이디가 '.x-grid3-scroller'로 정해져 있으나 ExtJS4에서는 이부분이 AutoId로 되어 있어
스크롤 영역을 특정짓지 못하게 된다. 결국 삽질을 거듭하다 포기하고 다른 대안을 찾도록 했다.
Ext.isiPad = navigator.userAgent.match(/iPad/i) != null;
Ext.isiPhone = navigator.userAgent.match(/iPhone/i) != null;
//TODO: Add support for more devices like Android etc. here.
Ext.isMobileDevice = Ext.isiPad || Ext.isiPhone;
///////////////////////////////////////////////////////////
//iScroll Overrides
Ext.override(Ext.Panel, {
afterRender: Ext.Panel.prototype.afterRender.createSequence(function() {
if (this.getXType() == 'panel') {
this._getIScrollElement = function() {
return (this.el.child('.x-panel-body', true));
}
}
//Uncomment below to use iScroll only on mobile devices but use regular scrolling on PCs.
if (this.autoScroll /*&& Ext.isMobileDevice*/) {
if (this._getIScrollElement) {
this._updateIScroll();
this.on('afterlayout', this._updateIScroll);
}
}
}),
_ensureIScroll: function() {
if (!this.iScroll) {
var el = this._getIScrollElement();
if (el.children.length > 0) {
this.iScroll = new iScroll(el);
this.iScrollTask = new Ext.util.DelayedTask(this._refreshIScroll, this);
}
}
},
_updateIScroll: function() {
this._ensureIScroll();
if (this.iScroll) {
this.iScrollTask.delay(1000);
}
},
_refreshIScroll: function() {
this.iScroll.refresh();
//Refresh one more time.
this.iScrollTask.delay(1000);
}
});
Ext.override(Ext.tree.TreePanel, {
_getIScrollElement: function() {
return (this.el.child('.x-panel-body', true));
}
});
Ext.override(Ext.grid.GridPanel, {
_getIScrollElement: function() { // 아래 부분이 Extjs에서 그리드위에 생성되는 스크롤이다.
return (this.el.child('.x-grid3-scroller', true)); // 이부분이 스크롤 된다.
},
afterRender: Ext.grid.GridPanel.prototype.afterRender.createSequence(function() {
//TODO: need to hook into more events and to update iScroll.
this.view.on('refresh', this._updateIScroll, this);
})
});
대안 2 : 최초 고객은 두손가락 스크롤을 원했다. 즉 패드종류에서는 기존의 스크롤 대신 두 손가락으로 슬적 밀면 스크롤이 되도록
지원하고 있다. 개인적으로 절대 이 기능으로 실사용자들이 만족하지 못할 거라는 판단하에 이부분을 첨부터 알아보지
않고 대안1에 치중하였으나 대안1이 어려우니 이거라도 구현해주려고 한다.
일단 이 것이 가능하려면 약간 수정 해줘야 한다. 아래의 autoScroll부분이 true일 경우 모바일에서 두손가락 스크롤이
가능하다.
createGridPanel: function(){
this.gridPanel = Ext.create('widget.EmStock.gridPanel', {
region: 'center',
store : this.store,
pageSessionId : this.pageSessionId,
floatable: false,
defaults:{ autoScroll:Ext.isiPad || Ext.isiPhone }, // 이 부분이 꼭 필요하다. 패드나 폰일 경우 true를 리턴한다. 갤탭일 경우 그냥 true
padding: '10 0 0 0',
totalCount : this.totalCount,
split: true,
listeners: {
scope: this,
ongridselect: this.onGridSelect,
columnhide : this.onColumnHide,
refreshgrid : this.refreshGrid
}
});
return this.gridPanel;
},
