extjs 연구 노트(3) 가장 기본적인 Grid_extjs

jquery는 이 점에서 정반대입니다. UI는 플러그인 형태로 제공됩니다. 필요한 것은 무엇이든 참조할 수 있으므로 매우 작고 유연합니다. 그러나 플러그인은 종종 다른 사람이나 팀에서 제공됩니다. , 인터페이스와 인터페이스는 종종 일관성이 없습니다. 어쨌든 각각의 장점이 있습니다.
오늘은 extjs에서 그리드를 배우고 있습니다. 생각지도 못할 일만 있고 할 수 없는 일이 있을 정도로 강력하고 독보적이라고 할 수 있습니다. 하하, 좀 과장된 것 같습니다. . 좋아요, 더 이상 고민하지 말고 가장 간단한 그리드부터 시작하여 extjs가 제공하는 그리드가 어떤 기능을 제공하는지 단계별로 살펴보겠습니다.
그리드는 일부 행과 열을 포함합니다. extjs에서 열은 Ext.grid.ColumnModel에 의해 관리됩니다. ColumnModel 객체를 생성하는 방법을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var cm = new Ext.grid.ColumnModel([
{id:'company',header : "회사", 너비: 160, 정렬 가능: true, dataIndex: '회사'},
{header: "가격", 너비: 75, 정렬 가능: true, dataIndex: 'price'},
{header : "변경", 너비: 75, 정렬 가능: true, dataIndex: 'change'},
{header: "% 변경", 너비: 75, 정렬 가능: true, dataIndex: 'pctChange'},
{ header: "Last UPDATE", width: 85, sortable: true, dataIndex: 'lastChange'}
])

여기에는 5개의 열이 정의되어 있으며, 매개변수를 통해 열을 구성할 수 있습니다. : ID는 열을 식별하는 데 사용됩니다. CSS에서 이 ID를 사용하여 전체 열의 모든 셀에 대한 스타일을 설정합니다. 자동으로 확장 가능한 열도 이 ID에 따라 식별됩니다. 너비는 열의 너비입니다. sortable은 열을 정렬할 수 있는지 여부를 나타내는 데 사용됩니다(dataIndex). 지금은 무시하세요. 더 일반적으로 사용되는 매개변수에는 열이 편집 가능한지 여부를 나타내는 편집 가능, 열이 표시되는 방식을 나타내는 렌더러(나중에 자세히 소개됨)가 포함됩니다.
열을 포함하여 행을 채울 데이터가 여전히 필요합니다. 배열을 구성해 보겠습니다.

코드 복사 코드는 다음과 같습니다:

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'],
['미국식 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'],
['국제 비즈니스 기계',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']
];

이제 모든 것이 준비되었으며, 다음 단계는 이를 그리드로 조합하는 것입니다. 전체 코드를 살펴보세요:

코드 복사 코드는 다음과 같습니다.

///<참조 경로="vswd-ext_2.0.2.js" />
/**//*
*작성자: Daben
*날짜: 2009-10-13
*버전: 1.0
*/
Ext.onReady(function() {
//构造列
var cm = new Ext.grid.ColumnModel([
{ id: ' company', header: "회사", width: 160, sortable: true, dataIndex: 'company' },
{ header: "Price", width: 75, sortable: true, dataIndex: 'price' },
{ 헤더: "변경", 너비: 75, 정렬 가능: true, dataIndex: 'change' },
{ 헤더: "% 변경", 너비: 75, 정렬 가능: true, dataIndex: 'pctChange' },
{ 헤더: "마지막 업데이트", 너비: 85, 정렬 가능: true, dataIndex: 'lastChange' }
])
//构造数据
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'],
['화이자 주식회사', 27.96, 0.4, 1.45, '9/1 12:00am'],
['코카콜라 컴퍼니', 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']
];
//构造grid
var Grid = new Ext.grid.GridPanel({
renderTo: "grid",
store: new Ext.data.ArrayStore({
fields: [
{ 이름: '회사' },
{ 이름: '가격', 유형: 'float' },
{ 이름: '변경', 유형: 'float' },
{ 이름: 'pctChange', 유형: 'float' },
{ 이름: 'lastChange', 유형: 'date', dateFormat: 'n/j h:ia' }
],
data:myData
}),
cm: cm,
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid'
});
})

extjs에서 Ext.grid.GridPanel은 구성을 위한 매개변수로 json 객체가 필요한 그리드를 나타냅니다.
renderTo: 그리드가 렌더링된 후 렌더링될 위치를 나타냅니다. 요소의 ID, Dom 노드 또는 Element 객체일 수 있습니다. 해당 매개변수가 없으면 Ext.grid.GridPanel의 render 메서드를 호출하여 그리드를 렌더링해야 합니다.
stroe: 통일된 인터페이스로 그리드에 데이터를 제공하는 ds로 축약될 수 있습니다. 우리는 데이터가 우리가 사용하는 배열 외에도 json, xml 등의 형식을 가질 수 있다는 것을 알고 있습니다. 그리드가 책임이 있는 경우 각 데이터 형식을 식별하는 것은 분명히 좋은 디자인 아이디어가 아니므로 extjs에 데이터 형식 변환을 담당하는 특수 클래스인 ArrayStore가 있습니다. 이름에서 알 수 있듯이 배열로의 변환에 특화된 것입니다. 우리는 Ext.data 네임스페이스 아래의 일부 클래스를 논의하기 위한 전용 시리즈를 갖고 Store 클래스에 대해 심층적으로 이해할 것입니다. 이제 우리는 Ext.data.Field 클래스의 컬렉션인 필드만 살펴봅니다. 이 클래스에는 name 속성이 있습니다. 이전에 ColumnModel에서 무시한 dataIndex는 해당 열과 해당 속성의 값을 인용했습니다. 필드. type 간의 관계는 유형을 나타내는 데 사용되며 기본값은 문자열 형식이며 dateFormat은 날짜 형식을 나타냅니다.
cm: colModel의 약어로 앞서 생성한 ColumnModel 객체를 여기에 넣으면 됩니다.
stripeRows: 줄무늬를 표시할지 여부입니다.
autoExpandColumn: 그리드의 빈 공간을 자동으로 채우는 자동 확장 열입니다.
높이 및 너비: 그리드의 높이와 너비입니다.
title: 그리드의 제목입니다.
이제 실행해 보면 이 그리드가 꽤 아름답다고 할 수 있습니다. 열 이름을 클릭하면 열의 너비도 자유롭게 드래그할 수 있고 위치도 변경할 수 있습니다. Ctrl 키를 누르면 여러 행을 선택할 수 있습니다. 컬럼 이름 위로 마우스를 가져가면 작은 역삼각형이 나타나는 것을 볼 수 있으며, 클릭하면 메뉴가 나타나며, 컬럼을 정렬하고 숨길 수 있는 것을 볼 수 있습니다. 그러나 날짜 표시가 만족스럽지 않고 백분율이 여전히 부동 소수점 숫자이며 일반적으로 손실을 나타내기 위해 적자를 사용하거나 그리드에 있는 경우 마이너스 성장이 발생할 수 있음을 확인했습니다. 또한 적자로 표현되면 효과가 더 좋아질 것입니다. extjs는 우리의 아이디어를 실현하는 데 매우 편리한 렌더러를 제공합니다. ColumnModel에서는 원하는 효과를 얻기 위해 필요한 열에 렌더러를 추가할 수 있습니다. 수정된 ColumnModel은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

// 열 구성
var cm = new Ext.grid.ColumnModel([
{ id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' },
{ 헤더: "가격", 너비: 75, 정렬 가능: true, dataIndex: 'price' },
{ 헤더: "변경", 너비: 75, 정렬 가능: true, dataIndex: '변경', 렌더러: 변경 } ,
{ 헤더: "% 변경", 너비: 75, 정렬 가능: true, dataIndex: 'pctChange', 렌더러: pctChange },
{ 헤더: "마지막 업데이트", 너비: 120, 정렬 가능: true, dataIndex: ' lastChange',renderer:Ext.util.Format.dateRenderer("Y-m-d h:i") }
])
// 열 렌더러 변경 함수
functionchange(val) {
if (val > 0) {
return '' val ''
} else if (val < 0) {
return '' val ''
}
return val;
}
// % 변경 렌더러 함수
function pctChange(val) {
if (val > 0) {
return '' val '%' ;
} else if (val < 0) {
'' val '%'
값 반환
}


렌더러는 데이터를 표시하기 전에 데이터를 변환하는 데 사용되는 "인터프리터" 방법으로 이해될 수 있습니다. 렌더러를 구현하는 방법에는 세 가지가 있습니다.
HTML 마크업을 반환하는 렌더러 함수 사용
렌더러 함수를 제공하는 Ext.util.Format 클래스의 속성
렌더러 함수와 범위를 포함하는 객체
이 예에서는 처음 두 가지 방법을 사용합니다. 렌더러 함수는 6개의 매개변수를 전달하고 셀의 모든 정보를 저장합니다. 여기서는 첫 번째 매개변수만 사용되며, 이는 셀의 값을 저장합니다. 다른 매개변수의 의미는 도움말 문서를 참조할 수 있습니다.
이제 프로그램을 실행하면 원하는 효과를 볼 수 있습니다. 마이너스 성장은 적자로 표시되고, 플러스 성장은 녹색으로 표시되며 시간도 원하는 형식으로 표시됩니다.
때때로 각 행에 번호를 매기고 싶을 때도 있습니다. 이는 구현하기 쉽습니다. ColumnModel의 생성자에 new Ext.grid.RowNumberer()만 추가하면 됩니다.

코드 복사 코드는 다음과 같습니다.

var cm = new Ext.grid.ColumnModel([
new Ext.grid .RowNumberer( ), //자동 번호 매기기 구현
{ id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' },
{ header: "Price" , width: 75, 정렬 가능: true, dataIndex: 'price' },
{ 헤더: "변경", 너비: 75, 정렬 가능: true, dataIndex: '변경', 렌더러: 변경 },
{ 헤더: "% 변경", 너비: 75, 정렬 가능: true, dataIndex: 'pctChange', 렌더러: pctChange },
{ 헤더: "마지막 업데이트", 너비: 120, 정렬 가능: true, dataIndex: 'lastChange', 렌더러:Ext .util.Format.dateRenderer("Y-m-d h:i") }
]);

Ext.grid.GridPanel 구성에는 일반적으로 사용되는 두 가지 매개 변수가 있습니다.
viewConfig : 이 매개변수를 사용하여 그리드 인터페이스에 대한 일부 설정을 지정할 수 있습니다. 자세한 내용은 도움말 문서를 참조하세요.
selModel : sm으로 줄여서 쓸 수 있으며, 셀 선택, 행 전체 선택 등 모델을 선택하는 것이 기본값입니다.