카테고리 보관물: Extjs

[ExtJs] Grid load 후 CheckBox Grid Select

Checkbox가 있는 Grid에서 특정 row를 선택하여 삭제, 추가, 변경 등의 작업을 한 후 일괄 저장을 한다면 상관이 없지만, 일괄 저장이 아니라 그때 그때 변화를 바로 Server측에 전송하여 저장하면 Data를 다시 load 해야 할 필요가 있게된다.

이 때 Grid의 Data를 load ( ExtCmp(‘Grid1’).getStore().load() 등을 이용)하는 경우 grid에서 선택된 row (record)가 reset된다. 특히 checkbox를 가진 grid의 경우 check box가 reset되어 버린다. 이 때, grid를 load하기 전에 선택되어 있던 record (또는 record들)을 다시 선택해 주는 trick이 필요하다.

    var f_idx = Ext.getCmp('Grid1').getSelectionModel().getSelection()[0].index;

또는

    for ( i=0; i< Ext.getCmp('Grid1').getSelectionModel().getSelection().length; i++ ) 
    {
        arr[i] = Ext.getCmp('Grid1').getSelectionModel().getSelection()[i].index;
    }

등으로 선택 record의 index를 저장을 한 후

    Ext.getCmp('Grid1').getStore().load();
    Ext.getCmp('Grid1').getSelectionModel().select(f_idx, true, true); 

으로 다시 선택해 준다. 그런데, grid를 다시 load 하면 load함수는 비동기식이므로 data를 loading하는 시간과 select() 명령에 의해 record가 선택되는 시간의 선 후가 바뀔 수가 있다. 즉, grid가 다시 load하는 동안 select() 명령에 의해 선택되어 진 후 data가 다시 reset되어 버려 select한 row(record)가 선택 해제(reset)되어버릴 수 있다.
그래서,

    Ext.getCmp('Grid1').getStore().load({
         scope:this,
         callback:function(records, operation, success){
                 Ext.getCmp('Grid1').getSelectionModel().select(f_idx, true, true); 
          }
    });

과 같이 callback 함수를 사용하여 data load가 끝난 후 select가 되도록 한다.

 

 

[ExtJs] grid store “POST” 방식으로 load하기

grid store를 load하기 위한 일반적인 방법은 button 등의 action에 grid.store의 속성을 지정하여 grid.store.load()를 실행시킨다.
grid.store의 속성으로는 store.proxy.url을 지정하고 load()함수를 호출하면 proxy가 url을 호출 할 때 GET 방식을 사용한다.

Ext.define('GridList_Model',{
      extend: 'Ext.data.Model',
      proxy: {
            type: 'ajax',
            reader: 'json'
      },
      fields: [ 'field1','field2','field3','field4','field5','field6','field7','field8' ]
});

// create the Data Store
var GridList_store = Ext.create('Ext.data.Store', {
      model: 'GridList_Model',
      autoLoad: false,
      proxy: {
            type: 'ajax',
            url: '/query/JSON_GRID1.jsp',
            reader: {
                  type: 'json'
            }
      }
});

GriList_store.on('load', function(){ AfterGrid(); });

// create the grid
var GridMasterList = Ext.create('Ext.grid.Panel', {
                        id: 'GridList',
                        // data of this grid comes from 'GridList_store' store
                        store: GridList_store,
                        columnLines: true,
                        ...
} // end of grid definition

Ext.create('Ext.form.FormPanel', {
      width: 1024,
      id: 'SearchForm',
      margin: '0 0 10 0',
      xtype: 'fieldset',
      layout: 'column',
      border: 1,
      items: [{
            xtype: 'datefield',
            fieldLabel: '기준날짜',
            format: 'Y-m-d',
            id: 'BaseDate1',
            maxLength:10,
            width:300 ,
            ...



 

GET 방식은 URL에 parameter를 붙여 전송하는 방식이다.

// form submit button definition....
xtype: 'button',
id: 'OkButton',
width: '120',
height: '30',
margin: '10px 10px 10px 10px',
handler: function() {
       var date1 = Ext.getCmp('BaseDate1');
       var baseday = date1.getSubmitValue().replace("/g", "-");
       baseday = baseday.replace(/-/g, "");

       var name = Ext.getCmp('Name').value();
       var addr = Ext.getCmp('Address').value();

       Ext.getCmp('GridList').show();

       // store : store of grid. store is data part of 'GridList' grid...
       var store = Ext.getCmp('GridList').getStore();
       // add parameter to url with '?' and '&' parameter...
       // : url = 'http://www.xxx.com/query.jsp?data1=Hi&data2=Hello&data3=world
       store.proxy.url = "/query/JSON_GRID1.jsp?DATE="+baseday+'&NAME=' + name + '&ADD=' + addr;;
       store.load();
},
text: '검색'

 

Form의 Field가 많은 경우 field를 모두 parameter를 모두 url로 지정해야 한다. 그런데 ajax로 서버에 request를 보내는 경우 꼭 GET 방식만 보낼 수 있는 것이 아니다. POST 방식도 가능하다. ExtJs API에는 나와있지 않지만 POST 방식으로 데이터를 보내면 URL이 간단하고 여러개의 parameter를 실수 없이 보낼 수 있다.

xtype: 'button',
id: 'OkButton',
width: '120',
height: '30',
margin: '10px 10px 10px 10px',
handler: function() {
     var frm = this.up('form').getForm();
     var values = frm.getValues();
     // values is object ( 'values' is record type )
     // parameters are object's record

     Ext.getCmp('GridList').show();

     var store = Ext.getCmp('GridrList').getStore();
     store.proxy.url = "/query/JSON_GRID1.jsp";
     // change actionMethod.read as POST
     store.proxy.actionMethods.read = "POST";
     // ajax parameters are form field values...(Object)
     store.proxy.extraParams = values;
     store.load();
},
text: '검색'

POST 방식으로 보내면 당연히 각 parameter를 일일이 지정하지 않아도 form에 있는 모든 field 가 전달되므로 쉽고 편리하다.store.proxy.extraParams에 ‘values’ Object를 지정하고 actionMethods.read를 POST로 지정하여 store.load()를 실행하면 Server측에는 data가 POST 방식으로 전달된다. 이 때 Server측에 전달되는 변수 명은 각 field의 id 이다.

 

ExtJs Chart Axis Title style 지정

extjs 4.2.1 버전을 이용하여 chart를 구현하던 중 축(Axis)의 제목(Title)이 너무 어이없어(크기와 폰트가 황당한 수준이다. 아마 Arial Bold 18 Font인 듯 하다.) 어떻게 조정할 수 없을까 이리 저리 알아보았지만 뾰족한 방법은 없었다.

Current Chart                                                          Desire

chart_ugly  chart_good

google을 며칠째 뒤졌으나 해결책이라고 나와 있는 것은 1. theme를 새로 지정해서 적용하는 방법과 2. style을 지정해서 해결하는 방법 정도가 나와 있었다.

1. theme를 새로 지정해서 사용하는 방법은 새로운 chart theme를 지정하여 새로운 chart component를 만들어서 하는 방법이므로 여러가지를 손대야 한다.

http://www.sencha.com/forum/showthread.php?220309-How-to-change-the-font-size-of-the-titles-of-axes-in-EXTJS-charts
 http://docs.sencha.com/extjs/4.1.3/#!/guide/drawing_and_charting
 http://docs.sencha.com/extjs/4.0.7/#/guide/drawing_and_charting

2. style을 지정하는 방법
style을 지정하는 방법을 권장하거나 추측하는 문서들이 많이 있었으나 모두 실패…
나와 있는 방법은 css style 파일을 손대거나, hthml 문서안에서 선언하는 방법 등이 있었으나 다 작동되지 않았다.

style을 지정해서 성공한다고 하더라도 server side에서 php extjs 라이브러리를 만들어서 사용하는 구조로 만들었으므로 화면에 따라 그때 그때 style을 지정해서 사용해야 한다면 아무래도 확장성과 완성도가 떨어진다는 판단에 소스를 직접 헤집고 디버깅하여 찾은 결과 적절한 속성을 찾아냈다. ( sencha api에는 나와있지 않는 방법이다 )

xtype : 'chart'
 animate: true,
 shadow: false,
 store: chart_store,
 axes: [ {
 type: 'Numeric',
 position: 'left',                   <= 좌측 축(left axes)이다.
 fields:['field0'],
 axisTitleLeftStyle: {          <=  속성이 axisTitleLeftStyle이다
  font: 'bold 13px Arial',
        rotate: { x: 0,
              y: 0,
              degrees: 270 <= left axis는 270도 회전하여 세로로 title을 표시(bottom에서는 필요없다)
             }
      },
 title: 'Growth',
 grid: true
 }, {
 ...

당연히 아랫 축 (bottom axes)의 속성은 axisTitleBottomStyle이다.

axisTitleBottomStyle: { 
  font: 'bold 13px Verdana',
  fill: '#333'
  },

결과는 아래와 같이 성공적이다.

chart_good

 

 

 

ExtJs – Window Size변경/Layout 변경에 따른 Grid크기 조정

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의 크기를 조절할 때는 반응 속도가 약간 느리다는 단점이 있으니 깔끔한 해결책이라고 할 수는 없다.

 

 

 

자바스크립트 라이브러리

Dojo Toolkit
http://www.dojotoolkit.org/
GUI와 자바스크립트 헬퍼 모두 갖춘 통합형 라이브러리.

jQuery
http://jquery.com/
더 이상 말이 필요없을 정도로 잘 알려진 자바스크립트 라이브러리

Prototype
http://www.prototypejs.org/
많이 쓰이고 안정적.

script.aculo.us
http://script.aculo.us/
prototype 등과 맞물려 돌아가는 UI 라이브러리.

Yahoo UI (YUI)
http://developer.yahoo.com/yui/
많은 javascript 프로젝트의 모델 또는 표준이 됨.

qooxdoo
http://qooxdoo.org/
전체적으로 깔끔하고 심플해 보이나 기본은 다 갖추고 있는 UI. (LGPL, EPL License)

mooTools
http://mootools.net/
Compact, modular, Object-oriented javascript framework.

ExtJs
http://www.sencha.com
처음에는 ui기반이었으나 현재는 통합 framework 제공. 유무료.

Google Web Toolkit
http://code.google.com/webtoolkit/
자바기반의 라이브러리

Interface Element for jQuery
http://interface.eyecon.ro/
jQuery 기반의 UI 라이브러리.

xajax
http://www.xajax-project.org/
php와 통합이 잘 되어 있음.

MochiKit
http://mochi.github.io/mochikit/
기본적인 기능을 제공하는 ui 라이브러리. 현재 개발은 중단된 상태.

Rico
http://openrico.org/
http://sourceforge.net/projects/openrico/
UI 위주였으나 다른 프로젝트들이 gui를 강화하면서 더이상 큰 특징은 없음