Analisis mendalam tentang cara menggunakan fungsi pengelompokan kedai dalam kemahiran Extjs_javascript

Semasa latihan projek, saya menghadapi keperluan untuk mengumpulkan data dalam grid mengikut medan tertentu Sudah tentu, fungsi ini tersedia dalam API dan disenaraikan di sini untuk semua orang mencari:

Dua perkara yang perlu diberi perhatian:

1 Apabila membuat kedai, anda perlu menetapkan nilai atribut GroupField, iaitu nilai yang perlu dikumpulkan

contohnya:

Kod JavaScript

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

Dalam model data ini, kita perlu mengumpulkan mengikut jantina, kemudian sila lihat kedai di bawah

Kod 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: 'female' 
},{ 
name: 'Lucy', 
sex: 'female' 
}] 
}); 

Seterusnya, kita perlu menentukan tpl untuk paparan kumpulan

Kod JavaScript

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

Dalam gridPanel, kodnya adalah seperti berikut: Konfigurasikan ciri sebagai ciri kumpulan yang ditakrifkan di atas

Kod 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' 
}] 
}); 

Rendering adalah seperti berikut:

Sudah tentu, selepas pengelompokan dilaksanakan, lajur jantina dalam gridPanel tidak perlu dipaparkan.

Perlu diingat bahawa jika data dalam kedai berubah, bolehkah kumpulan dipaparkan secara normal?

Sekarang tambahkan acara itemclick pada grid, kodnya adalah seperti berikut:

Kod JavaScript

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

Kesannya seperti di bawah

Ia boleh dilihat bahawa antara muka tidak seperti yang kita mahu, jadi bagaimana untuk menyelesaikannya? (Penyelesaian bodoh awal ialah saya mengalih keluar gridPanel, memusnahkannya dan memuatkannya semula) Saya membuat beberapa perubahan pada kod untuk pendengar mendengar acara

Kod JavaScript

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

Tengok kesan semula:

Ini adalah kesan yang kami mahukan Apabila menukar data dalam stor secara dinamik, pengumpulan juga mesti dilaksanakan dan bukannya menambahkan data ke hujung gridPanel. Perbezaan antara dua keping kod ini terutamanya terletak pada kaedah menambah data ke stor Yang pertama ialah tambah(rekod) dan yang kedua ialah loadData(rekod,[tambah])

Pada mulanya, saya tidak dapat memahami mengapa kedai yang sama menambah data, tetapi kesannya berbeza Lihat penjelasan dalam dokumentasi rasmi, add(), Contoh Model baharu akan ditambahkan pada penghujung koleksi sedia ada . (Tambah data pada koleksi. Akhirnya) Saya tiba-tiba menyedari bahawa loadData memuatkan data mengikut peraturan kedai.

Selain itu, bagaimana untuk mengalih keluar baris tertua dalam kumpulan, saya menyemaknya sendiri, dokumen itu telah dilaksanakan, dan saya akan berkongsi dengan anda di sini:

//Ubah suai acara mendengar pendengar sebelumnya seperti berikut:

Perhatikan kaedah pertama([kumpulan boolean]) Jika tiada parameter diluluskan, data pertama dalam stor akan diperolehi Apabila parameter itu benar, kumpulan kedai akan dikembalikan dengan kunci nama kumpulan dan data pertama dalam kumpulan. Satu sekeping data ialah berbilang objek yang bernilai.Pertama(benar).perempuan mendapat sekeping data pertama dalam kumpulan perempuan. Jika anda ingin mendapatkan data dalam lelaki, anda boleh menggunakan PersonStore .pertama(benar).lelaki

Kod JavaScript

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));
} 
}

Untuk mengelakkan Rekod yang dikeluarkan daripada menduduki memori, pemprosesan selanjutnya telah dijalankan, tetapi kaedahnya agak kekok, jika ada cara yang baik, kami boleh berkomunikasi

Lihat kod:

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)); 
} 
}