데꾸벅의 생각들

Extjs Grid panel 및 데이타 축출하기

Scripter/EXTJS / 2008. 2. 22. 13:45

들어가며

본 포스팅은 사내(넥스트리소프트) 솔루션 개발시 가이드작성했던 문서를 다시 정리하여 올린것입니다.

기본개념

기본적인 Grid 사용법및 DataStore 및 RowSelectionModel에 대해 알아본다.
GridPanel을 이용하여 데이타스토어에 저장된 데이타를 가져오는 법과 기본적인 그리드 렌더링 방법, 각각의 Row에 대한 Model에서 Data를 축출하는 법에 대해서 기술한다.

아래소스다운로드

invalid-file

Step 1. Basic Array Grid

basicGrid.html

<html>
<head>
<title>Basic Grid</title>
<link rel="stylesheet" type="text/css" href="http://techbug.tistory.com/resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="basicGrid.js"></script>
</head>
<body id="basicGridBody">
	<div id="DIV_GRID_HERE"></div>   <!-- Grid를 렌더링 할 위치 -->
</body>
</html>

basicGrid.js

BasicGridClass = function(){
return {
init: function(){
//데이타스토어에 사용할 데이타
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

this.store = new Ext.data.SimpleStore({
fields: [{
name: 'company'
}, //1번째 컬럼을 'company'로 정의
{
name: 'price',
type: 'float'
},//2번째 컬럼을 'price'로 정의하며 데이타 타입은 float으로 정의
{
name: 'change',
type: 'float'
}, {
name: 'pctChange',
type: 'float'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'n/j h:ia'
}]
});
//데이타 스토어 로드하기
this.store.loadData(myData);

//그리드 그리기
this.grid = new Ext.grid.GridPanel({
store: this.store, //그리드에 사용될 데이타 스토어 정의
columns: [ //그리드 헤드 및 데이타 정제(ColumnModel 정의)
{
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,
dataIndex: 'change'
}, {
header: "% Change",
width: 75,
sortable: true,
dataIndex: 'pctChange'
}, {
header: "Last Updated",
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
stripeRows: true, //Row마다 CSS class를 적용하고 싶을때 처리
autoExpandColumn: 'company', //정의된 ColumnModel에서 자동으로 늘리고 싶은 컬럼
loadMask: {
msg: '데이타 로드중'
}, //그리드 로드시 화면로딩 indicator설정
//그리드 선택모델(selectionModel)정의 : RowSelectionMode -> Row별로 처리하겠다.
      sm: new Ext.grid.RowSelectionModel({
singleSelect: true //Row 하나만 선택가능하게 하기
}),
viewConfig: { //그리드의 Dataview 설정
forceFit: true //가로에 그리드의 크기를 맞춘다.
},
height: 350,
width: 800,
title: '기본기리드'
});
//그리드를 DIV_GRID_HERE 라는 ID값을 가진 객체에 렌더링한다.
this.grid.render('DIV_GRID_HERE');
      //그리드 로드시 첫번째 Row를 자동으로 선택되게 한다.
this.grid.getSelectionModel().selectFirstRow();
}
}
}
();
Ext.EventManager.onDocumentReady(BasicGridClass.init, BasicGridClass, true);

Step 2. How to use HttpProxy & ScriptTagProxy

Step1에서 배열데이타를 사용할때(Ext.data.SimpleStore)와 직접 통신하여 사용할때(Ext.data.Store)를 비교하면서 아래 소스를 보기 바란다.
Simplestore 는 기본적으로 네트웍을 사용하지 않으므로 Proxy를 사용하지 않는다. 그러나 Store, JsonStore, GroupingStore의 경우 Proxy를 사용하여 데이타의 위치를 지정할수 있다.

SimpleStore vs. (Json, Grouping) Store

	SimpleStore	(Json, Grouping) Store
Proxy	없음(없을시 HttpProxy사용)	HttpProxy, ScriptTagProxy, MemoryProxy
Reader	ArrayReader	JsonReader, XmlReader, ArrayReader
Load Method	store.loadData(data);	store.load()
Extend	Ext.data.Store	Ext.data.Store

basicGrid.js

BasicGridClass = function(){
return {
init: function(){
////DataStore를 정의한다. Ext.data.Store
this.store = new Ext.data.Store({
// Data를 가져올 Proxy설정
proxy: new Ext.data.HttpProxy({
url: 'basicGrid.json',
method: 'POST'
}),
// Client쪽에서 Sort할 경우 소트할 항목
sortInfo: {
field: 'price',
direction: "DESC"
},
reader: new Ext.data.JsonReader({
root: 'testData'
},
[{
name: 'company'
}, {
name: 'price',
type: 'float'
}, {
name: 'change',
type: 'float'
}, {
name: 'pctChange',
type: 'float'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'n/j h:ia'
}])
});
this.grid = new Ext.grid.GridPanel({
store: this.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,
dataIndex: 'change'
}, {
header: "% Change",
width: 75,
sortable: true,
dataIndex: 'pctChange'
}, {
header: "Last Updated",
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
stripeRows: true,
autoExpandColumn: 'company',
loadMask: {
msg: '데이타 로드중'
},
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
viewConfig: {
forceFit: true
},
height: 350,
width: 800,
title: '기본 그리드'
});

this.grid.render('DIV_GRID_HERE');
this.grid.getSelectionModel().selectFirstRow();
this.store.load(); //데이타를 로드한다.
}
}
}
();
Ext.EventManager.onDocumentReady(BasicGridClass.init, BasicGridClass, true);

HttpProxy나 ScriptTagProxy로 서버 통신을 한다. ScriptTagProxy에 대한 고찰(?) 을 참조하라.

HttpProxy : 같은 도에인일 경우
ScriptTagProxy: 다른 도메인일 경우
MemoryProxy: 메모리에 있는 데이타

basicGrid.json
{
testData: [{
'company': '3m Co',
'price': 71.72,
'change': 0.02,
'pctChange': 0.03,
'lastChange': '9/1 12:00am'
}, {
'company': 'Alcoa Inc',
'price': 29.01,
'change': 0.42,
'pctChange': 1.47,
'lastChange': '9/1 12:00am'
}, {
'company': 'Altria Group Inc',
'price': 83.81,
'change': 0.28,
'pctChange': 0.34,
'lastChange': '9/1 12:00am'
}, {
'company': 'American Express Company',
'price': 52.55,
'change': 0.01,
'pctChange': 0.02,
'lastChange': '9/1 12:00am'
}, {
'company': 'American International Group, Inc.',
'price': 64.13,
'change': 0.31,
'pctChange': 0.49,
'lastChange': '9/1 12:00am'
}, {
'company': 'AT&T Inc.',
'price': 31.61,
'change': -0.48,
'pctChange': -1.54,
'lastChange': '9/1 12:00am'
}, {
'company': 'Boeing Co.',
'price': 75.43,
'change': 0.53,
'pctChange': 0.71,
'lastChange': '9/1 12:00am'
}, {
'company': 'Caterpillar Inc.',
'price': 67.27,
'change': 0.92,
'pctChange': 1.39,
'lastChange': '9/1 12:00am'
}, {
'company': 'Citigroup,Inc.',
'price': 49.37,
'change': 0.02,
'pctChange': 0.04,
'lastChange': '9/1 12:00am'
}, {
'company': 'E.I. du Pont de Nemours and Company',
'price': 40.48,
'change': 0.51,
'pctChange': 1.28,
'lastChange': '9/1 12:00am'
}, {
'company': 'Exxon Mobil Corp',
'price': 68.1,
'change': -0.43,
'pctChange': -0.64,
'lastChange': '9/1 12:00am'
}, {
'company': 'General Electric Company',
'price': 34.14,
'change': -0.08,
'pctChange': -0.23,
'lastChange': '9/1 12:00am'
}, {
'company': 'General Motors Corporation',
'price': 30.27,
'change': 1.09,
'pctChange': 3.74,
'lastChange': '9/1 12:00am'
}, {
'company': 'Hewlett-Packard Co.',
'price': 36.53,
'change': -0.03,
'pctChange': -0.08,
'lastChange': '9/1 12:00am'
}, {
'company': 'Honeywell Intl Inc',
'price': 38.77,
'change': 0.05,
'pctChange': 0.13,
'lastChange': '9/1 12:00am'
}, {
'company': 'Intel Corporation',
'price': 19.88,
'change': 0.31,
'pctChange': 1.58,
'lastChange': '9/1 12:00am'
}, {
'company': 'International Business Machines',
'price': 81.41,
'change': 0.44,
'pctChange': 0.54,
'lastChange': '9/1 12:00am'
}, {
'company': 'Johnson & Johnson',
'price': 64.72,
'change': 0.06,
'pctChange': 0.09,
'lastChange': '9/1 12:00am'
}, {
'company': 'JP Morgan & Chase & Co',
'price': 45.73,
'change': 0.07,
'pctChange': 0.15,
'lastChange': '9/1 12:00am'
}, {
'company': 'McDonald\'s Corporation',
'price': 36.76,
'change': 0.86,
'pctChange': 2.40,
'lastChange': '9/1 12:00am'
}, {
'company': 'Merck & Co., Inc.',
'price': 40.96,
'change': 0.41,
'pctChange': 1.01,
'lastChange': '9/1 12:00am'
}, {
'company': 'Microsoft Corporation',
'price': 25.84,
'change': 0.14,
'pctChange': 0.54,
'lastChange': '9/1 12:00am'
}, {
'company': 'Pfizer Inc',
'price': 27.96,
'change': 0.4,
'pctChange': 1.45,
'lastChange': '9/1 12:00am'
}, {
'company': 'The Coca-Cola Company',
'price': 45.07,
'change': 0.26,
'pctChange': 0.58,
'lastChange': '9/1 12:00am'
}, {
'company': 'The Home Depot,Inc.',
'price': 34.64,
'change': 0.35,
'pctChange': 1.02,
'lastChange': '9/1 12:00am'
}, {
'company': 'The Procter & Gamble Company',
'price': 61.91,
'change': 0.01,
'pctChange': 0.02,
'lastChange': '9/1 12:00am'
}, {
'company': 'United Technologies Corporation',
'price': 63.26,
'change': 0.55,
'pctChange': 0.88,
'lastChange': '9/1 12:00am'
}, {
'company': 'Verizon Communications',
'price': 35.57,
'change': 0.39,
'pctChange': 1.11,
'lastChange': '9/1 12:00am'
}, {
'company': 'Wal-Mart Stores, Inc.',
'price': 45.45,
'change': 0.73,
'pctChange': 1.63,
'lastChange': '9/1 12:00am'
}]
}

Step 3. Data-Mapping and Renderer

BasicGridClass = function(){
return {
init: function(){
//데이타 스토어 정의
this.store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'basicGrid.json',
method: 'POST'
}),
sortInfo: {
field: 'price',
direction: "DESC"
},
reader: new Ext.data.JsonReader({
root: 'testData'
}, [{
name: 'company',
type: 'string',
mapping: 'company',
convert: this.convertCompany
}, //응답받은 JSON의 company와 맵핑된다. 맵핑정보 변경을 converting한다.
{
name: 'price',
type: 'float',
mapping: 'price'
}, {
name: 'change',
type: 'float',
mapping: 'change'
}, {
name: 'pctChange',
type: 'float',
mapping: 'pctChange'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'n/j h:ia',
mapping: 'lastChange'
}])
});
this.grid = new Ext.grid.GridPanel({
store: this.store,
columns: [{
id: 'company',
header: "Company",
width: 160,
sortable: true,
dataIndex: 'company'
}, // 맵핑된 company의 name을 dataIndex로 잡는다.
{
header: "Price",
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
}, {
header: "Change",
width: 75,
sortable: true,
dataIndex: 'change'
}, {
header: "% Change",
width: 75,
sortable: true,
renderer: this.pctChange,
dataIndex: 'pctChange'
}, // 화면에 렌더링할때 renderer를 이용해 칼라를 바꿔준다.
{
header: "Last Updated",
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
stripeRows: true,
autoExpandColumn: 'company',
loadMask: {
msg: '데이타 로드중'
},
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
viewConfig: {
forceFit: true
},
height: 350,
width: 800,
title: '기본 그리드'
});

this.grid.render('DIV_GRID_HERE');
this.grid.getSelectionModel().selectFirstRow();
this.store.load();

},
//화면에 렌더링할때 renderer에 의해서 칼라를 바꿔주느 메쏘드
pctChange: function(val){
if (val > 0) {
return '<span>' + val + '%</span>';
}
else
if (val < 0) {
return '<span>' + val + '%</span>';
}
return val;
},
// 데이타 맵핑할때 자식노드가 있을 경우 해당 자식노드로 변환하여 반환한다.
convertCompany: function(value, p, record){
return (value.name != undefined) ? value.name : value;
}

}
}
();
Ext.EventManager.onDocumentReady(BasicGridClass.init, BasicGridClass, true);

위의 convert 와 renderer 옵션을 이용하여 여러가지 다양한 형태의 grid 생성이 가능하다. 또한 JsonReader의 root 노드또한 Json 표기 형식의 . (dot) 연산자로 해당 자식 노드를 가져올수 있다.

추가적으로 extjs의 API Doc에는 rederer에 대해서 다음과 같이 기술하고 있다.

rederer의 파라미터값들
* value : Object - 셀에 들어가는 데이타
* metadata : Object - 정의한 객체 메타데이타
* css : String : 테이블테그에서 td에 먹이는 css
* attr : String : HTML 애트리뷰트 정의
* record : Ext.data.record : 데이타가 압축된 레코드
* rowIndex : Number
* colIndex : Number
* store : Ext.data.Store

Step 4. DataStore Load & Loadexception Handling

데이타스토어가 모두 로드가 완료됐을 경우 혹은 서버이상으로 로드가 되지 않았을 경우를 예를 들어 설명한다.

BasicGridClass = function(){
    return {
        init: function(){
            //데이타 스토어 정의
            this.store = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({
                    url: 'basicGrid.json'
                }),
                sortInfo: {
                    field: 'price',
                    direction: "DESC"
                },
                reader: new Ext.data.JsonReader({
                    root: 'testData'
                }, [{
                    name: 'company',
                    type: 'string',
                    mapping: 'company'
                }, {
                    name: 'price',
                    type: 'float',
                    mapping: 'price'
                }, {
                    name: 'change',
                    type: 'float',
                    mapping: 'change'
                }, {
                    name: 'pctChange',
                    type: 'float',
                    mapping: 'pctChange'
                }, {
                    name: 'lastChange',
                    type: 'date',
                    dateFormat: 'n/j h:ia',
                    mapping: 'lastChange'
                }])
            });
            this.grid = new Ext.grid.GridPanel({
                store: this.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,
                    dataIndex: 'change'
                }, {
                    header: "% Change",
                    width: 75,
                    sortable: true,
                    dataIndex: 'pctChange'
                }, {
                    header: "Last Updated",
                    width: 85,
                    sortable: true,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                }],
                stripeRows: true,
                autoExpandColumn: 'company',
                loadMask: {
                    msg: '데이타 로드중'
                },
                sm: new Ext.grid.RowSelectionModel({
                    singleSelect: true
                }),
                view: new Ext.grid.GridView({
                    forceFit: true,
                    enableRowBody: true,
                    ignoreAdd: true,
                    emptyText: 'No Record found'
                }),
                height: 350,
                width: 800,
                title: '기본 그리드'
            });
            
            this.grid.render('DIV_GRID_HERE');
            //this.grid.getSelectionModel().selectFirstRow();
            this.store.load();
            
            
            this.grid.on('rowcontextmenu', function(grid, index, e){
                alert('오른쪽 버튼 클릭');
            }, this);
            
            // Row에서 마우스 오른쪽 클릭시
            this.grid.on('rowclick', function(grid, index, e){
                alert('클릭');
            }, this);
            
            // Row 클릭시
            this.grid.on('rowdblclick', function(grid, index, e){
                alert('더블클릭');
            }, this);
            
            // Row 더블클릭시
            this.gsm = this.grid.getSelectionModel();
            
            // 데이타 스토어에서 데이타 로드 완료시 첫번째 Row 선택되게하기
            this.store.on('load', this.gsm.selectFirstRow, this.gsm);
            this.store.on('load', function(store, records, options){
                alert('데이타로드완료')
            }, this);
            
            // 데이타 스토어에서 데이타 로드실패시 exception throw
            this.store.on('loadexception', function(a, conn, resp){
                //alert(resp.status.toString() +'\n'+ resp.statusText);
                this.grid.emptyText = 'data load error';
            }, this);
            
            // Ext.data.Dataproxy 통신 에러시
            this.store.proxy.on('loadexception', function(proxy, dataObj, callbackArgs, e){
                if (Ext.gecko) 
                    console.log(e);
            });
            
        }
    }
}
();
Ext.EventManager.onDocumentReady(BasicGridClass.init, BasicGridClass, true);

Step 5. 선택된 Row에서 값 추출하기

BasicGridClass = function(){
    return {
        init: function(){
            //데이타 스토어 정의
            this.store = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({
                    url: 'basicGrid.json'
                }),
                sortInfo: {
                    field: 'price',
                    direction: "DESC"
                },
                reader: new Ext.data.JsonReader({
                    root: 'testData'
                }, [{
                    name: 'company',
                    type: 'string',
                    mapping: 'company'
                }, {
                    name: 'price',
                    type: 'float',
                    mapping: 'price'
                }, {
                    name: 'change',
                    type: 'float',
                    mapping: 'change'
                }, {
                    name: 'pctChange',
                    type: 'float',
                    mapping: 'pctChange'
                }, {
                    name: 'lastChange',
                    type: 'date',
                    dateFormat: 'n/j h:ia',
                    mapping: 'lastChange'
                }])
            });
            this.grid = new Ext.grid.GridPanel({
                store: this.store,
                columns: [{
                    id: 'company',
                    header: "Company",
                    width: 160,
                    sortable: true,
                    dataIndex: 'company'
                }, // DataIndex정의
                {
                    header: "Price",
                    width: 75,
                    sortable: true,
                    renderer: 'usMoney',
                    dataIndex: 'price'
                }, {
                    header: "Change",
                    width: 75,
                    sortable: true,
                    dataIndex: 'change'
                }, {
                    header: "% Change",
                    width: 75,
                    sortable: true,
                    dataIndex: 'pctChange'
                }, {
                    header: "Last Updated",
                    width: 85,
                    sortable: true,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                }],
                stripeRows: true,
                autoExpandColumn: 'company',
                loadMask: {
                    msg: '데이타 로드중'
                },
                //RowSelectionModel 이거나 CellSelectionModel일 경우만 데이타 가져오기
                sm: new Ext.grid.RowSelectionModel({
                    singleSelect: true
                }),
                view: new Ext.grid.GridView({
                    forceFit: true,
                    enableRowBody: true,
                    emptyText: 'No Record found'
                }),
                height: 350,
                width: 800,
                title: '기본 그리드'
            });
            
            this.grid.render('DIV_GRID_HERE');
            this.store.load();
            this.gsm = this.grid.getSelectionModel();
            this.store.on('load', this.gsm.selectFirstRow, this.gsm);
            
            // ① Row에서 오른쪽 마우스 클릭했을 경우  
            this.grid.on('rowcontextmenu', this.getRowData, this);
            // ① Row 클릭했을 경우
            this.grid.on('rowclick', this.getRowData, this);
            // ① Row 더블클랙했을 경우
            this.grid.on('rowdblclick', this.getRowData, this);
            // ① Row가 선택됐을 경우
            this.gsm.on('rowselect', this.rowSelect, this);
        },
        
        getRowData: function(thisGrid, rowIndex, eventObject){
            // ② 클릭,컨텍스트,더블클릭시 해당 이벤트가 일어난 Row의 Record가져오기
            var record = this.store.getAt(rowIndex) || this.gsm.getSelected();
            // ③ 선택된 레코드에서 데이타 가져오기
            alert(record.data.company + '\n' + record.get('company'));
        },
        // ④ rowSelectionModel에서 선택된  Row의 데이타 가져오기
        rowSelect: function(selectionModel, index, record){
            alert(record.data.company + '\n' + record.get('company'));
        }
        
    }
}
();
Ext.EventManager.onDocumentReady(BasicGridClass.init, BasicGridClass, true);

① : Ext.grid.GridPanel에 등록된 Event 사용법에 유의할것
this.grid.on('rowclick',this.getRowData(), this );
잘못된표현 - argument가 없이 ()로만 사용하였을 경우 closure로 인식하여 바로 실행된다.

this.grid.on('rowclick',this.getRowData(grid,rowIdex,eventObject), this);
정확한 표현 - argument가 있을시는 closure로 인식하지 않음

this.grid.on('rowclick',this.getRowData, this);
정확한 표현

this.grid.on('rowclick',function(grid,rowIndex,eventObject){this.getRowData(grid,rowIndex,evnetObjt);},this);
정확한 표현

② 선택된 Row에서 Record를 가져오는 방법에는 위오 같이 두가지 방법이 있다.

데이터스토어.getAt(Row의 Index Number) - 데이타 스토어의 인덱스에서 가져오는 방법
셀렉션 모델.getSelected() - RowSelectionModel이나 CellSelectionModel에서 가져오는 방법

③ Record에서 해당 데이타셋 가져오기 : 아래의 가져올DataIndex는 Columns에서 정의한 DataIndex를 가져온다.
```
레코드.data.가져올DataIndex텍스트 
레코드.get('가져올DataIndex텍스트)
```
④ rowSelectionModel일 경우 rowselect 이벤트를 이용하여 선택된 Row의 값을 가져올수 있다. 클릭이나 더블클릭, 컨텍스트 메뉴와 달리 사용자로 부터 이벤트를 받는것이 아니라 데이터 스토어가 최초 로드 되거나 하였을 경우 해당 이벤트를 바로 자아 처리해줄 로직이 있을 경우에는 상당히 유용하다. 만약 예를 들어 초기 데이타 로드시 첫번째 Row가 선택된지 선택된 Row의 상세정보를 오른쪽 패널에 보여줄 경우 선택된 Row의 정보를 사용자의 어떠한 액션 없이 해당 레코드의 값을 받아 올수 있다. 데이타 스토어의 'load'이벤트를 사용할때 첫번째 Row를 선택하여 해당 선택된 row의 데이타를 뽑아내는 방법으로도 가능하다.

'Scripter > EXTJS' 카테고리의 다른 글

Extjs 기본레이아웃에 grid panel 붙이기 (0)	2008.02.25
Extjs Apatana ext2.0 plugin (0)	2008.02.25
Extjs 레이아웃에서 center region 숨기기 꽁수 (0)	2008.02.22
Extjs 그리드안에서 프로세스바 구현하기 (3)	2008.02.21
Extjs 프로세스바 구현하기 (0)	2008.02.21

Post by 넥스트리소프트 데꾸벅(techbug)

, |

카테고리

최근에 올라온 글

최근에 달린 댓글

링크

Extjs Grid panel 및 데이타 축출하기

Step 1. Basic Array Grid

basicGrid.html

basicGrid.js

Step 2. How to use HttpProxy & ScriptTagProxy

SimpleStore vs. (Json, Grouping) Store

basicGrid.js

Step 3. Data-Mapping and Renderer

Step 4. DataStore Load & Loadexception Handling

Step 5. 선택된 Row에서 값 추출하기

'Scripter > EXTJS' 카테고리의 다른 글

티스토리툴바