Selama proses praktik proyek, kami menemukan persyaratan bahwa data dalam grid dikelompokkan sesuai dengan bidang tertentu. Tentu saja, fungsi ini tersedia di API, dan terdaftar di sini untuk semua orang untuk menemukan:
Dua hal yang perlu diperhatikan:
1. Saat membuat toko, Anda perlu mengatur nilai atribut Groupfield, yaitu nilai yang perlu dikelompokkan.
Misalnya:
Kode JavaScript
Ext.define ('person', {extend: 'ext.data.model', bidang: ['name', 'sex']});Dalam model data ini, kita perlu mengelompokkan berdasarkan jenis kelamin (jenis kelamin), jadi silakan lihat toko di bawah ini
Kode JavaScript
var personstore = ext.create ('ext.data.store', {StoreID: 'personstore', model: 'person', groupfield: 'sex', data: [{name: 'hongmei li', seks: 'name': {name: 'san zhang', seks: 'laki -laki'}, {name: 'jim:' jim green ', san zhang', sex: 'Male'}, {name: 'jim:' jim green ', san zhang', sex: 'Male'}, {name: 'jim:' jim green ', sex: sex:' Male '}, {name:' jim: 'jim green', San zhang ', sex:' MALE '}, {{name:' JIM GRIEN, 'SAN ZHANG', SEX: 'MALE'}, {name: 'JIM JIM GRIENT' 'betina'}, {name: 'lucy', sex: 'female'}]});Selanjutnya, kita perlu mendefinisikan TPL yang ditampilkan di grup
Kode JavaScript
var groupingFeature = ext.create ('ext.grid.feature.grouping', {groupHeadertpl: 'sex: {name} ({rows.length} item {[values.rows.length> 1? "s": ""]}'}); // Perhatikan bahwa {name} adalah nilai yang sesuai dengan nilainya yang berkorespondensi dengan nilai yang berkoroning ke kolom yang berkorespondensi ini dengan nilai yang sesuai dengan nilai Corporing to the The Nilai yang Corporing to the Correpting to the The Correpting to The Correpting To Correpting to The Correpting To Corporing to the Correpting to the Correpting to the CommorDi GridPanel, kode ini adalah sebagai berikut: Konfigurasikan fitur ke GroupingFeature yang didefinisikan di atas
Kode 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 sebagai berikut:
Tentu saja, setelah menerapkan pengelompokan, kolom seks di Gridpanel tidak perlu ditampilkan.
Perlu dicatat bahwa jika data di toko berubah, dapatkah pengelompokan ditampilkan secara normal?
Sekarang tambahkan acara itemClick ke grid, kodenya adalah sebagai berikut:
Kode JavaScript
pendengar: {itemClick: function (thisview, record) {personstore. <span style = "color:#ff0000;"> add </span> ([{name: "li", sex: "Male"}, {name: "zhang", sex: "female"}]); }}Efeknya adalah sebagai berikut
Dapat dilihat bahwa antarmuka tidak seperti yang kita inginkan, jadi bagaimana cara menyelesaikannya? (Solusi bodoh di awal adalah bahwa saya menghapus dan menghancurkan gridpanel ini, dimuat ulang) Saya membuat beberapa transformasi kode yang mendengarkan acara dengan mendengarkan pendengar
Kode JavaScript
pendengar: {itemClick: function (thisview, record) {personstore.loadData ([{name: "li", sex: "Male"}, {name: "zhang", sex: "female"}], true); }}Lihat efeknya lagi:
Inilah efek yang kami inginkan. Ketika secara dinamis mengubah data di toko, pengelompokan juga harus diimplementasikan, daripada menambahkan data ke akhir gridpanel. Sesuai dengan perbedaan antara dua potong kode ini, yang utama adalah metode penambahan data di toko. Yang pertama adalah add (catatan) dan yang terakhir adalah loaddata (catatan, [append])
Awalnya saya tidak mengerti mengapa toko menambahkan data, tetapi efeknya berbeda. Saya membaca penjelasan dokumen resmi, add (), contoh model baru akan ditambahkan di akhir koleksi yang ada. (Tambahkan data di akhir pengumpulan) Saya tiba -tiba menyadari bahwa LoadData memuat data sesuai dengan aturan toko.
Selain itu, cara menghapus garis tertua dalam grup, saya memeriksanya sendiri, dan dokumen telah diimplementasikan. Saya akan membaginya dengan Anda di sini:
// Ubah acara mendengarkan pendengar sebelumnya sebagai berikut:
Perhatikan bahwa metode pertama ([grup boolean]), jika parameter tidak dilewati, data pertama di toko diperoleh. Ketika parameter benar, pengembalian adalah grup toko dengan kunci nama grup dan data pertama dalam grup adalah nilai. Personstore.first (true) .female mendapatkan data pertama dalam kelompok wanita. Jika Anda ingin mendapatkan laki -laki, Anda dapat menggunakan pribadi. Pertama (true) .male
Kode JavaScript
pendengar: {itemClick: function (thisview, record) {personstore.loadData ([{name: "li", sex: "Male"}, {name: "zhang", sex: "female"}], true); waspada (personstore.first (true) .female.get ('name')); console.log (personstore.first (true) .female); Personstore.remove (personstore.first (true) .female); // console.log (personstore.getat (0));}}Untuk menghindari hunian memori yang dihapus, pemrosesan lebih lanjut dilakukan. Fungsi dapat diimplementasikan, tetapi metodenya agak bodoh. Setiap orang memiliki cara yang baik untuk berkomunikasi.
Lihat kodenya:
pendengar: {itemClick: function (thisview, record) {personstore.loadData ([{name: "li", sex: "Male"}, {name: "zhang", sex: "female"}], true); waspada (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 dapat dilakukan dengan kalimat ini personal. alert (personstore.getremovedRecords.length); // Hasil peringatan kalimat ini adalah 0 // console.log (personstore.getat (0)); }}