extjs에서 매장 그룹화 기능을 사용하는 방법에 대한 심층 분석

프로젝트 실무 과정에서 그리드의 데이터가 특정 필드에 따라 그룹화되어야한다는 요구 사항에 직면합니다. 물론이 기능은 API에서 사용할 수 있으며 모든 사람이 찾을 수 있도록 여기에 나열되어 있습니다.

주목 할 두 가지 :

1. 매장을 만들 때 그룹 필드 속성, 즉 그룹화 해야하는 값을 설정해야합니다.

예를 들어:

자바 스크립트 코드

 ext.define ( 'person', {extend : 'ext.data.model', 필드 : [ 'name', 'sex']});

이 데이터 모델에서는 성별 (섹스)별로 그룹화해야하므로 아래의 상점을 참조하십시오.

자바 스크립트 코드

 var personstore = ext.create ( 'ext.data.store', {storeid : 'personstore', model : 'person', 'sex', data : [{name : 'hongmei li', 섹스 : '여성'}, {이름 : 'san jhang', 'male'}, 'jim green', 'male', 'sex :'} '여성'}, {이름 : 'Lucy', 섹스 : '여성'}]});

다음으로 그룹에 표시된 TPL을 정의해야합니다.

자바 스크립트 코드

 var groupingFeature = ext.create ( 'ext.grid.feature.grouping', {groupheadertpl : 'sex :'sex : {rows.length} item {[vales.rows.length> 1? "s": "]}) '}); //

GridPanel에서 코드는 다음과 같습니다.

자바 스크립트 코드

 var grid = ext.create ( 'ext.grid.panel', {renderto : ext.getbody (), Store : Spore, Width : 600, Height : 400, 제목 : 'person', 특징 : [GroupingFeature], 열 : [{text : 'name', flex : 1, dataindex : 'name'}, {text : 'sex', 'sex'}] });

렌더링은 다음과 같습니다.

물론 그룹화를 구현 한 후 그리드 파넬의 성관계를 표시 할 필요가 없습니다.

스토어의 데이터가 변경되면 그룹화가 정상적으로 표시 될 수 있습니까?

이제 Grid에 ItemClick 이벤트를 추가하면 코드는 다음과 같습니다.

자바 스크립트 코드

 리스너 : {itemclick : function (thisview, record) {personstore. <span style = "color :#ff0000;"> add </span> ([{name : "li", sex : "male"}, {이름 : "zhang", "femal"}]; }}

효과는 다음과 같습니다

인터페이스가 우리가 원하는 것이 아니라는 것을 알 수 있습니다. 그래서 그것을 해결하는 방법은 무엇입니까? (처음에 어리석은 해결책은이 그리드 파넬을 제거하고 파괴했다는 것이 었습니다.

자바 스크립트 코드

 청취자 : {itemclick : function (thisview, record) {personstore.loadData ([{name : "li", 섹스 : "male"}, {이름 : "zhang", 섹스 : "여자"}, true); }}

효과를 다시보십시오.

이것이 우리가 원하는 효과입니다. 스토어의 데이터를 동적으로 변경할 때는 그리드 파넬 끝에 데이터를 추가하기보다는 그룹화를 구현해야합니다. 이 두 코드의 차이점에 해당하는 것은 가장 중요한 것은 매장에 데이터를 추가하는 방법입니다. 전자는 추가 (레코드)이고 후자는 loadData (레코드, [부록])입니다.

처음에는 상점이 왜 데이터를 추가했는지 이해할 수 없었지만 그 효과는 달랐습니다. 공식 문서 인 Add ()에 대한 설명을 읽었으며 기존 컬렉션의 끝에 새 모델 인스턴스가 추가됩니다. (컬렉션 끝에 데이터 추가) 하역 규칙에 따라 LoadData가 데이터를로드한다는 것을 갑자기 깨달았습니다.

또한 그룹에서 가장 오래된 줄을 제거하는 방법을 직접 확인했으며 문서가 구현되었습니다. 여기에서 공유하겠습니다.

// 이전 리스너 청취 이벤트를 다음과 같이 수정합니다.

첫 번째 ([부울 그룹]) 메소드는 매개 변수가 전달되지 않으면 스토어의 첫 번째 데이터가 얻어집니다. 매개 변수가 true 인 경우, 리턴은 그룹 이름 키가있는 상점 그룹이고 그룹의 첫 번째 데이터는 값입니다. personstore.first (true). 기민은 여성 그룹에서 첫 번째 데이터를 가져옵니다. 남성을 얻으려면 personstore.first (true) .male을 사용할 수 있습니다.

자바 스크립트 코드

 청취자 : {itemclick : function (thisview, record) {personstore.loadData ([{name : "li", 섹스 : "male"}, {이름 : "zhang", 섹스 : "여자"}, true); Alert (personstore.first (true) .female.get ( 'name')); console.log (personstore.first (true) .female); personstore.remove (personstore.first (true) .female); // console.log (personstore.getat (0));}}

제거 된 레코드의 메모리 점유를 피하기 위해 추가 처리가 수행되었습니다. 함수는 구현 될 수 있지만 방법은 약간 어리 석습니다. 모든 사람은 의사 소통하는 좋은 방법이 있습니다.

코드보기 :

 청취자 : {itemclick : function (thisview, record) {personstore.loadData ([{name : "li", 섹스 : "male"}, {이름 : "zhang", 섹스 : "여자"}, true); Alert (personstore.first (true) .female.get ( 'name')); console.log (personstore.first (true)); personstore.remove (personstore.first (true) .female); var recs = personstore.getRange (); Console.log (Recs); //personstore.removeall(true) ;//anything은이 문장으로 수행 할 수 있습니다. alert (personstore.getRemovedRecords.length); //이 문장 경고 결과는 0 // console.log (personstore.getat (0)); }}