Durante o processo de prática do projeto, encontramos o requisito de que os dados na grade sejam agrupados de acordo com um determinado campo. Obviamente, esta função está disponível na API e está listada aqui para todos encontrarem:
Duas coisas a serem observadas:
1. Ao criar uma loja, você precisa definir o valor do atributo Groupfield, ou seja, o valor que precisa ser agrupado.
por exemplo:
Código JavaScript
Ext.Define ('Pessoa', {Extend: 'Ext.Data.model', Fields: ['Nome', 'Sex']});Neste modelo de dados, precisamos agrupar por gênero (sexo), então, veja a loja abaixo
Código JavaScript
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: 'feminino'}, {name: 'Lucy', sexo: 'feminino'}]});Em seguida, precisamos definir o TPL exibido no grupo
Código JavaScript
var groupingFeature = ext.create ('ext.grid.feature.grouping', {groupheadertpl: 'sexo: {name} ({linhas.length} item {[valores.rows.length> 1? "S": "]})'); // note que {nome} éEm GridPanel, o código é o seguinte: Configure recursos para agrupar o feato definido acima
Código JavaScript
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' }] });As renderizações são as seguintes:
Obviamente, após a implementação do agrupamento, a coluna sexual em Gridpanel não precisa ser exibida.
Deve -se notar que, se os dados da loja mudarem, o agrupamento pode ser exibido normalmente?
Agora adicione um evento ItemClick à grade, o código é o seguinte:
Código JavaScript
ouvintes: {itemclick: function (thisView, registro) {PersonStore. }}O efeito é o seguinte
Pode -se observar que a interface não é o que queremos, então como resolvê -la? (A solução estúpida no começo foi que eu removi e destruí este Gridpanel, recarreguei) Fiz algumas transformações do código que ouviam o evento ouvindo ouvintes
Código JavaScript
ouvintes: {itemclick: function (thisView, registro) {PersonStore.loadData ([{name: "li", sexo: "masculino"}, {name: "zhang", sexo: "feminino"}], verdadeiro); }}Veja o efeito novamente:
Este é o efeito que queremos. Ao alterar dinamicamente os dados na loja, o agrupamento também deve ser implementado, em vez de anexar os dados ao final do GridPanel. Correspondente à distinção entre essas duas partes de código, o principal é o método de adicionar dados na loja. O primeiro é add (registro) e o último é o loaddata (registros, [append])
No começo, eu não conseguia entender por que os dados adicionados da loja, mas o efeito foi diferente. Eu li a explicação do documento oficial, Add (), as novas instâncias do modelo serão adicionadas no final da coleção existente. (Adicione dados no final da coleção) De repente, percebi que o LoadData carrega os dados de acordo com as regras da loja.
Além disso, como remover a linha mais antiga do grupo, eu mesmo verifiquei e o documento foi implementado. Vou compartilhar com você aqui:
// Modifique o evento de escuta dos ouvintes anteriores da seguinte forma:
Observe que o primeiro método ([grupo booleano]), se o parâmetro não for passado, os primeiros dados na loja serão obtidos. Quando o parâmetro é verdadeiro, o retorno é um grupo de lojas com a chave de nome do grupo e os primeiros dados do grupo são o valor. PersonStore.First (True) .Female recebe os primeiros dados no grupo feminino. Se você deseja obter o homem, pode usar o PERSOSTORE.FIRST (TRUE) .MALE
Código JavaScript
ouvintes: {itemclick: function (thisView, registro) {PersonStore.loadData ([{name: "li", sexo: "masculino"}, {name: "zhang", sexo: "feminino"}], verdadeiro); alert (PersonStore.First (true) .Female.get ('nome')); console.log (PersonStore.First (true) .Female); PersonStore.Remove (PersonStore.First (true) .Female); // console.log (PersonStore.getat (0));}}Para evitar a ocupação da memória dos registros removidos, foi realizado um processamento adicional. A função pode ser implementada, mas o método é um pouco estúpido. Todo mundo tem uma boa maneira de se comunicar.
Veja o código:
ouvintes: {itemclick: function (thisView, registro) {PersonStore.loadData ([{name: "li", sexo: "masculino"}, {name: "zhang", sexo: "feminino"}], verdadeiro); alert (PersonStore.First (true) .Female.get ('nome')); console.log (PersonStore.First (true)); PersonStore.Remove (PersonStore.First (true) .Female); var recs = PersonStore.getRange (); console.log (RECS); //PersonStore.Removeall(tuRue) ;//anynatchthing pode ser feito com esta sentença de pessoa. alert (PersonStore.getRemovedRecords.length); // Este resultado de alerta de sentença é 0 // console.log (PersonStore.getat (0)); }}