Extjs_javascript 스킬에서 매장 그룹화 기능을 활용하는 방법에 대한 심층 분석

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

두 가지 주의 사항:

1. 스토어 생성 시 그룹화해야 하는 값인 groupField 속성 값을 설정해야 합니다

예:

자바스크립트 코드

Ext.define('Person', { 
extend: 'Ext.data.Model', 
fields: ['name', 'sex'] 
}); 

이 데이터 모델에서는 성별별로 그룹화해야 합니다. 그러면 아래 매장을 확인하세요

자바스크립트 코드

var PersonStore = Ext.create('Ext.data.Store', { 
storeId: 'PersonStore', 
model: 'Person', 
groupField: 'sex', 
data: [{ 
name: 'hongmei li', 
sex: 'female' 
},{ 
name: 'san zhang', 
sex: 'male' 
},{ 
name: 'Jim Green', 
sex: 'male' 
},{ 
name: 'Lily', 
sex: 'female' 
},{ 
name: 'Lucy', 
sex: 'female' 
}] 
}); 

다음으로 그룹 표시를 위한 tpl을 정의해야 합니다

자바스크립트 코드

var groupingFeature= Ext.create('Ext.grid.feature.Grouping',{ 
groupHeaderTpl: 'sex: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' 
});//注意其中{name}即为store中sex列所对应的值 

gridPanel에서 코드는 다음과 같습니다. 위에서 정의한 groupingFeature로 기능을 구성합니다

자바스크립트 코드

var grid = Ext.create('Ext.grid.Panel', { 
renderTo: Ext.getBody(), 
store: PersonStore, 
width: 600, 
height: 400, 
title: 'Person', 
features: [groupingFeature], 
columns: [{ 
text: 'Name', 
flex: 1, 
dataIndex: 'name' 
},{ 
text: 'sex', 
flex: 1, 
dataIndex: 'sex' 
}] 
}); 

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

물론 그룹화가 구현된 후에는 GridPanel의 성별 열을 표시할 필요가 없습니다.

스토어 내 데이터가 변경되면 그룹핑이 정상적으로 표시될 수 있다는 점 유의하셔야 겠죠?

이제 그리드에 itemclick 이벤트를 추가합니다. 코드는 다음과 같습니다.

자바스크립트 코드

listeners:{ 
itemclick:function(thisview,record){ 
PersonStore.<span style="color:#ff0000;">add</span>([{name:"li",sex:"male"},{name:"zhang",sex:"female"}]); 
} 
} 

효과는 아래와 같습니다

우리가 원하는 인터페이스가 아닌 것 같은데, 어떻게 해결해야 할까요? (초기의 어리석은 해결책은 GridPanel을 제거하고 파기한 후 다시 로드하는 것이었습니다.) 리스너가 이벤트를 수신할 수 있도록 코드를 일부 변경했습니다.

자바스크립트 코드

listeners:{ 
itemclick: function (thisview,record){ 
PersonStore.loadData([{name: "li" ,sex: "male" },{name: "zhang" ,sex: "female" }], true ); 
} 
} 

효과 다시보기 :

이것이 우리가 원하는 효과입니다. Store에서 데이터를 동적으로 변경할 때, GridPanel 끝에 데이터를 추가하는 대신 그룹화도 구현해야 합니다. 이 두 코드의 차이점은 주로 스토어에 데이터를 추가하는 방식에 있습니다. 전자는 add(record)이고 후자는 loadData(records,[append])

입니다.

처음에는 왜 같은 매장에서 데이터를 추가했는지 이해할 수 없었으나 효과가 달랐습니다. 공식 문서 add()의 설명을 참조하세요. 새로운 모델 인스턴스는 기존 컬렉션의 마지막에 추가됩니다. (컬렉션에 데이터를 추가합니다. 마지막으로) loadData가 스토어의 규칙에 따라 데이터를 로드한다는 것을 갑자기 깨달았습니다.

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

//이전 청취자의 청취 이벤트를 다음과 같이 수정합니다.

첫번째([boolean group]) 메소드에 주의하세요. 매개변수가 전달되지 않으면 매장의 첫 번째 데이터를 가져옵니다. 매개변수가 true이면 매장 그룹이 그룹 이름 키와 함께 반환됩니다. 그룹의 첫 번째 데이터는 여러 값의 개체입니다. PersonStore.first(true).female은 여성 그룹의 첫 번째 데이터를 가져오려면 PersonStore를 사용할 수 있습니다. .첫번째(참).남자

자바스크립트 코드

listeners:{ 
itemclick: function (thisview,record){ 
PersonStore.loadData([{name: "li" ,sex: "male" },{name: "zhang" ,sex: "female" }], 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));
} 
}

records가 메모리를 점유하는 것을 방지하기 위해 추가 처리를 진행했습니다. 함수를 구현할 수는 있지만 방법이 조금 서툴러도 누구든지 좋은 방법으로 소통할 수 있습니다.

코드 보기:

listeners:{ 
itemclick:function(thisview,record){ 
PersonStore.loadData([{name:"li",sex:"male"},{name:"zhang",sex:"female"}],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);//这句有没有都可以 
PersonStore.loadRecords(recs);//重新load数据，内存中记录的removed掉的就没有了 
console.log(PersonStore); 
alert(PersonStore.getRemovedRecords.length);//这句alert结果为0 
// console.log(PersonStore.getAt(0)); 
} 
}