Ext 테이블 컨트롤
19682 단어 ext
1. 정의 표: 하나의 표를 정의하는 것은 비교적 간단하다. new 몇 개의 열만 있으면 된다. 위의 열의 이름과 귀속할 데이터를 가지고 정의 열 코드는 다음과 같다.
var
cm
=
new
Ext.grid.ColumnModel([ { header:
'
번호
'
, dataIndex:
'
id
'
}, { header:
'
성별
'
, dataIndex:
'
sex
'
}, { header:
'
이름
'
, dataIndex:
'
name
'
}, { header:
'
묘사
'
, dataIndex:
'
desc
'
} ]);
헤더로 열 이름을 지정하고 dataIndex로 데이터 원본, 즉 필드 이름을 지정합니다.이렇게 기본적인 표를 정의하면 된다.
2. 데이터 소스 만들기:
일반적인 데이터 원본은 모두 집합의 형식으로 존재하는데 여기서 2차원 그룹을 사용하여 실현한다.
var
data
=
[ [
'
일
'
,
'
남자
'
,
'
장삼풍
'
,
'
작가예요.
'
], [
'
이
'
,
'
남자
'
,
'
석만디
'
,
'
무술을 익히다
'
], [
'
삼
'
,
'
남자
'
,
'
생강치아
'
,
'
귀신을 잡을 수 있다
'
], [
'
사
'
,
'
여자
'
,
'
목계영
'
,
'
황제인 것 같아요.
'
], [
'
오
'
,
'
남자
'
,
'
손오공
'
,
'
고급 프로그래머
'
] ];
JS나 PHP에 익숙해지면 이 코드가 낯설지 않게 하나의 그룹을 정의하고 이 그룹의 모든 위치에 하나의 그룹을 저장합니다.그를 정적 데이터 원천으로 삼다.
3. 데이터 소스 분석:
테이블이 만들어지고 데이터 원본도 정의됩니다. 그 다음에 그들 사이의 관계를 만들어야 합니다. 즉, 그룹 데이터 집합을 설정하고 Ext.data를 만드는 데 사용합니다.스토어 대상, 이를 통해 우리는 모든 형식의 데이터를grid가 사용할 수 있는 형식으로 바꿀 수 있습니다.그 중에서 그에게 알려야 할 매개 변수가 비교적 많다. 먼저 코드를 보고 다음에 설명한다.
var
ds
=
new
Ext.data.Store({ proxy:
new
Ext.data.MemoryProxy(data), reader:
new
Ext.data.ArrayReader({}, [ { name:
'
id
'
}, { name:
'
sex
'
}, { name:
'
name
'
}, { name:
'
desc
'
} ]) }); ds.load();
proxy: 표에서 데이터를 어디서 찾는지 알려주는 의미입니다. 선택할 수 있는 방법은 HttpProxy, DataProxy, MemoryProxy 또는 ScriptTagProxy입니다.이 예에서 우리는 그에게 메모리에서 데이터를 찾으라고 말했는데, 데이터는 데이터라는 이름의 그룹에서 나왔다.
reader:reader는 우리에게 이 데이터를 어떻게 해석하는지 알려 줍니다. 그가 선택할 수 있는 방법은 Ext.data가 있습니다.ArrayReader,Ext.data.JsonReader.이 예에서는 Ext.data를 사용합니다.Array Reader, 첫 번째 매개 변수는 id (선택 가능) 아래의 행수 그룹에서 이 기록된 id (무슨 뜻인지 모르겠지만 시험은 똑같음) 를 제공합니다. 뒤에 있는 매개 변수의 의미는 명확합니다. 바로 방금 표를 만들 때 정의한 필드 이름입니다. 그의 특징은 데이터를 읽는 것이 비교적 간단하지만 페이지를 나누지 않는 단점이 있습니다.
마지막으로 데이터 초기화 작업이 스토어 대상을 호출하는load 방법을 잊지 마세요.
4, 어셈블 테이블
표의 열 모델이 정의되었고 원시 데이터와 데이터의 변환이 모두 끝났으며 나머지는 함께 조립하기만 하면 우리의grid가 나온다. 먼저 코드를 올리고 연구한다.
var
grid
=
new
Ext.grid.GridPanel({ el:
'
grid
'
, ds: ds, cm: cm, height:
200
, width:
500
}); grid.render();
사실은 표를 설치하는 데 사용되는 표 패널 컨트롤러를 실례화하는 것이다.첫 번째 매개 변수는 어디에 표시하는지 지정하는 것이다. 이 물건은 항상 페이지의 어느 부분이나 위치에 표시해야 한다. Ext는 div를 제어하는 방법을 제공했다. div가 매우 유연하기 때문에 현재 웹 페이지의 레이아웃은 그를 많이 사용하기 때문에 어디에 표시해야 하는지는 상응하는 div의 id를 그에게 지정하면 된다.다음 두 개의 매개 변수는 내가 불러올 데이터 원본의 이름이 무엇인지, 내가 어디로 불러올지 등등이다.마지막으로grid를 호출하는 것을 잊지 마세요.render () 방법은grid를 렌더링하기 시작하도록 합니다. 바로 인터페이스를 그리는 등입니다. 이렇게 해야만 표시할 수 있습니다.
자, 이제 간단한 표 컨트롤이 완성되었습니다. 전체 코드를 살펴보겠습니다.
<HTML>
<HEAD>
<TITLE> </TITLE>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="Ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>
</HEAD>
<script type="text/javascript">
function GridBasic() {
//1.
var cm = new Ext.grid.ColumnModel([
{ header: ' ', dataIndex: 'id', sortable: true },
{ header: ' ', dataIndex: 'sex' },
{ header: ' ', dataIndex: 'name' },
{ header: ' ', dataIndex: 'desc' }
]);
//2.
var data = [
['1', ' ', ' ', ' '],
['2', ' ', ' ', ' '],
['3', ' ', ' ', ' '],
['4', ' ', ' ', ' '],
['5', ' ', ' ', ' ']
];
//3.
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: 'id' }, { name: 'sex' }, { name: 'name' }, { name: 'desc' }
])
});
ds.load();
//4.
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm,
height:200,
width:500
});
grid.render();
}
Ext.onReady(GridBasic); //
</script>
<BODY>
<div id="grid"></div>
</BODY>
</HTML>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJS 3.2 학습 노트(3) 사용자 정의 이벤트Extjs에서 모든 상속은 Ext.util에서 합니다.Observable 클래스의 컨트롤은 이벤트를 지원할 수 있습니다. 클래스에 대해 이벤트를 사용자 정의하려면 다음 절차를 따르십시오. 1, 먼저 클래스를 정의합니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
