1 가장 쉬운 그리드 패널
그리드 패널은 ExtJS의 핵심 부분 중 하나이며 그리드 패널을 통해 데이터를 표시, 정렬, 그룹화 및 편집 할 수 있습니다. 모델 및 스토어는 그리드 패널 처리 데이터의 핵심이며 각 그리드 패널은 모델과 저장을 설정해야합니다. 그리드 패널을 만들려면 먼저 모델을 정의해야합니다. 이 모델에는 그리드 패널이 표시 해야하는 모든 필드가 포함되어 있으며 데이터베이스의 테이블 필드 모음과 동일합니다. 이 매장은 일련의 데이터 모음 또는 모델 인스턴스 모음으로 간주 될 수 있습니다. 각 스토어에는 하나 이상의 모델 인스턴스가 포함되어 있으며 그리드 패널에 표시되는 데이터는 매장에 저장됩니다. 그리드 패널은 상점을 통해 데이터를 얻고이를 표시하는 반면 Store는 프록시를 통해 데이터를 읽고 저장합니다.
아래는 사용자 이름, 이메일, 휴대폰 번호 (이름, 이메일, 전화)를 포함하여 사용자의 기본 정보를 표시하고 먼저 사용자 모델 (사용자 모델)을 작성하는 그리드 패널입니다.
ext.define ( 'user', {extend : 'ext.data.model', 필드 : [ 'name', 'email', 'phone']});다음으로 여러 사용자 인스턴스를 포함하여 사용자 모음 인 상점을 만듭니다.
var userstore = ext.create ( 'ext.data.store', {model : 'user', // 사용자 모델 데이터 : [{name : 'lisa', 이메일 : '[email protected]', 전화 : '555-111-1224'}, {name : 'bart', '[email protected] {이름 : '호머', 이메일 : '[email protected]', 전화 : '555-222-1244'}, {이름 : 'marge', 이메일 : '[email protected]', 전화 : '555-222-1254'}});모델과 상점이 모두 생성 된 후 그리드 패널을 만들 수 있습니다.
ext.create ( 'ext.grid.panel', {renderto : ext.getbody (), Store : Userstore, // 매장 너비 : 400, 높이 : 200, 제목 : '응용 프로그램 사용자', 열 : [{텍스트 : '이름', '이름', 거짓, 거짓, dataindex : '이름'// Model}, {text : '이메일 주소', 너비 : 150, DatainDex : 'email', hidden : true}, {text : '전화 번호', flex : 1, dataindex : 'phone'}});마지막 사용자 그리드 패널이 그림에 나와 있습니다.
2 그리드 패널 데이터 그룹화 (그룹화)
Groupfield 속성이 매장에 설정된 한 그리드 패널에 표시되는 데이터를 그룹화 할 수 있습니다. 회사에 직원이 많고 그리드 패널의 부서별로 회사 직원을 그룹화해야한다고 가정합니다. 먼저 Groupfield 속성을 상점의 부서로 설정하십시오.
ext.create ( 'ext.data.store', {model : 'Employee', Data : ..., Groupfield : 'Department'// 부서별로 그룹화 된 데이터 세트});그런 다음 그룹화 기능을 그리드 패널에 추가하여 그룹화 디스플레이 효과를 달성하십시오.
ext.create ( 'ext.grid.panel', {... 특징 : [{ftype : 'Grouping'}]});그룹 디스플레이 효과는 아래 그림에 나와 있습니다. 공식 그룹 디스플레이 코드를 보려면 여기를 클릭하십시오.
3 그리드 패널 페이지 매김 디스플레이
더 많은 데이터와 더 많은 페이지가 표시되면 데이터를 표시해야합니다. 그리드 패널은 페이징 도구 모음과 페이징 스크롤러의 두 가지 방법을 통해 Pagination 디스플레이를 실현할 수 있습니다. 페이징 도구 모음에는 이전 페이지/다음 페이지 버튼이 있습니다. 페이징 스크롤러는 그리드 패널이 바닥에 스크롤 할 때 데이터를 동적으로로드합니다.
Pagination 디스플레이를 구현하려면 먼저 Pagination을 지원하기 위해 매장을 설정해야합니다. 상점에서 페이지를 설정하십시오. 기본 Pagesize는 25입니다. Pagesize 및 TotalProperty에 따라 Reader TotalProperty에서 총 데이터 수와 페이징 플러그인 페이지를 설정하십시오. 다음 코드는 4로 설정되며 TotalProperty는 반환 된 JSON 데이터에서 얻습니다.
ext.create ( 'ext.data.store', {model : 'user', autoload : true, pagesize : 4, // page per proxy proxy : {type : 'ajax', url : 'data/users.json', Reader : {json의 속성을 얻지 못하도록 specifity. 속성 : '총'// 총 데이터 수량}});JSON 데이터 형식이 다음과 같다고 가정하십시오
{ "success": true ","total ": 12,"users ": [{"name ":"lisa ","email ":"[email protected] ","전화 ":"555-111-1224 "}, {"name ":"bart ","email ":"[email protected] ":"555-2222222-1234 "} "home", "이메일": "[email protected]", "전화": "555-222-1244"}, { "name": "marge", "email": "[email protected]", "전화": "555-222-1254"}}상점의 페이징이 설치되었습니다. 페이징 도구 모음 페이징 기능은 그리드 패널에서 구현됩니다.
ext.create ( 'ext.grid.panel', {Store : Userstore, Columns : ..., DockedItems : [{xtype : 'pagingToolbar', // Paging Toolbar Store 추가 : Userstrore, // Grid 패널의 매장과 동일하게 Paging Toolbar 스토어를 설정 ', True});페이징 도구 모음의 페이징 효과는 아래 그림에 나와 있습니다. 공식 페이징 도구 모음 페이징 기능 코드를 보려면 여기를 클릭하십시오.
페이징 스크롤러의 페이징 구현은 비교적 간단합니다. 그리드 패널에서 다음 코드를 설정하십시오. 공식 페이징 스크롤러 페이징 기능 코드를 보려면 여기를 클릭하십시오.
ext.create ( 'ext.grid.panel', {// 페이징 스크롤러 페이징 플러그인 수직 스크롤러 사용 : 'PagingGridScroller', // vidalidatescrolleronRefresh를 새로 고침 할 때 스크롤 바를 재설정하지 마십시오.4 그리드 패널 확인란을 추가합니다
그리드 패널의 Selmodel 속성을 Ext.Selection.CheckBoxModel로 설정하면 여기를 클릭하여 공식 코드 예제를보십시오.
ext.create ( 'ext.grid.panel', {selmodel : ext.create ( 'ext.Selection.checkboxModel'), // 그리드 패널의 선택 모드를 확인란 스토어로 설정 : Userstrore, 열 : ...});5 가지 포괄적 인 예
var grid = new ext.grid.gridpanel ({Store // 데이터 소스 CM //ext.grid.columnModel 열 // 함수는 cm AutowIdth를 가진 CM과 동일합니다. true width 제목 테두리 : False ColumnLines : true, renderto // div tag의 ID를 표시합니다. 애니메이션 효과 (Class Ext.fx를 사용할 수있는 경우 기본값은 true : // true, true, true, true gridded border loadmask : true // 대기 인터페이스 스트리퍼가 있습니다 : true, dual color table plugins : // 듀얼 컬러 테이블 플러그인 : // dual {pagingtools). displayInfo : true, // depication source displayInfo : true, // docut 핸들러 : function () {win.show ();}}}) //********************************************* //PagingToolbar paging//Passing to server data start querying location, limit how many items to query //Sorting//Server sort,dir //************************************************ var com = new Ext.grid.ColumnModel([ new ext.grid.rownumberer (), {헤더 : "고객 ID", 너비 : 50, 정렬 가능 : true, dataindex : 'memid'}, {헤더 : "고객 이름", 너비 : 75, 정렬 가능 : true, dataindex : 'memname'}, {header : 'secret : 50, dataindex :'sex elign ', sort' renderer : function (v) {return (v == '1')? '<img src = "images/user_suit.png">': '<img src = "images/user_female.png">';}} {header : '추적 번호', width : 150, dataindex : 'code'} 'kd_time'}]); /******************************************************************************************/ EditorGridPanel chickToEdit:1 //Number of clicks ColumnModel editor:new Ext.form.TextField({ }) //Get modified data var storeEdit = grid.getStore(); // var modified = storeedit.modified.slice (0); // ext.each (modified, function (m) {alert (m.data.id); // 데이터는 M.Data이고 ID는 필드 이름입니다}) // 그리드 데이터 가져 오기 var selmodel = grid.getSelectionModel (); 선택 모드 var 레코드를 얻으십시오. if (! selmodel.hasselection ()) {ext.msg.alert ( '경고', '수정 될 행을 선택하십시오!'); 반품; } selmodel.getSelections (). 길이; // 선택한 행 수 레코드 = selmodel.getSelected (); // 선택한 행의 데이터를 가져옵니다(1) 데이터 얻기 :
한 줄
id = record.get ( 'id');
또는
id = record.data.id;
여러 줄
레코드 [i] .get ( 'ddd')
(2) 데이터 삭제 :
var obj = grid.getSelectionModel (). getSelected (); Store.remove (obj); grid.getView (). 새로 고침 ();
(3) 쿼리
store.baseparams [ 'memid'] = fb.form.findfield ( 'memid'). getValue (); store.baseparams [ 'start'] = 0; store.load ();
(4) 행 추가 :
Ext는 플러그인을 가져옵니다
파일 RowExpander.js가 필요합니다
var extand = new ext.ux.grid.rowexpander ({tpl : new ext.template ( '<p> {address} </p>'));그리드 열에 확장을 추가하고
플러그인 추가 : 그리드 속성으로 확장하십시오