Extjs

작년에 Extjs 라는 자바스크립 프래임웍을 사용보았다.

처음 익숙해 지는데 시간이 꽤 걸린것 같다. 아직 자바스크립트 초보라 그런듯하다.

주로 JSON형식으로 object들을 생성하며 처음 익힐땐 꼭 예제를 보고 따라하기 바란다.

자신만만하게 API보고 해봤다가는 날밤까기 일수다. 아마 가장 많이 하는 실수가 configuration때

, (콤마) 를 마지막에 넣어서 일것이다. 화면에 아무것도 나오지 않는다. 하지만 파폭에서는 정상적으로 실행된다.

한글자료가 별로 없기때문에 사용하기 까다롭지만 API를 잘 보면 약간 부실해도 설명이 되어있다.(물론 영어로) 영어가 짧아서 더 힘들었던것 같다.

백문이 불여일견이라 혹시나 궁금한 분들은 예제들을 한번둘러보길 바란다.
http://extjs.com

처음 시작하는 분은 먼저 ext 관련 js 파일들을 웹페이지에 불러주고 예제처럼 자신의 js파일을 만들어 추가한다.
[code html]
<script type="text/javascript" src="extjs/ext-core.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<!-- 등등 ... 그리고, 자신의 js 파일 추가 -->
<script type="text/javascript" src="custom/myGrid.js"></script>
[/code]

myGrid.js 는
[code js]
Ext.onReady(function(){

   // create the example data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

   // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,});
        autoExpandColumn: 'company',
        height:350,
        width:600,
        title:'Array Grid'
    });     grid.render('grid-example');});
[/code]
이렇게 하면 환상적인 그리드가 만들어진다. 마지막 render는 id 가 grid-example인 div를 찾아서 그리드를 그려준다. 작성할때는 항상 brace와 comma를 조심하기 바란다.