1 Panel Grid termudah
Panel Grid adalah salah satu bagian inti dari EXTJS, dan data dapat ditampilkan, diurutkan, dikelompokkan dan diedit melalui panel grid. Model dan penyimpanan adalah inti dari data pemrosesan panel grid, dan setiap panel kisi harus mengatur model dan menyimpan. Untuk membuat panel kisi, Anda harus terlebih dahulu mendefinisikan model. Model ini mencakup semua bidang yang perlu ditampilkan panel grid, yang setara dengan kumpulan bidang tabel dalam database. Toko dapat dianggap sebagai kumpulan deretan data atau kumpulan contoh model. Setiap toko berisi satu atau lebih model model, dan data yang ditampilkan oleh panel grid disimpan di toko. Panel grid memperoleh data melalui toko dan menampilkannya, sementara toko membaca dan menyimpan data melalui proxy.
Di bawah ini adalah panel grid untuk menampilkan informasi dasar pengguna, termasuk nama pengguna, email, nomor ponsel (nama, email, telepon), dan pertama -tama membuat model pengguna (model pengguna).
Ext.define ('user', {extend: 'ext.data.model', bidang: ['name', 'email', 'phone']});Selanjutnya, buat toko, yang merupakan kumpulan pengguna, termasuk beberapa instance pengguna.
var userStore = Ext.create('Ext.data.Store', { model: 'User', //User Model data just created: [ { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' }, { name: 'Bart', email: '[email protected]', phone: '555-222-1234' }, {name: 'homer', email: '[email protected]', telepon: '555-222-1244'}, {name: 'marge', email: '[email protected]', telepon: '555-222-1254'}]}});Setelah model dan toko dibuat, Anda dapat membuat panel kisi.
Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), store: userStore, //Bind the Store width: 400, height: 200, title: 'Application Users', columns: [ { text: 'Name', width: 100, sortable: false, hideable: false, dataIndex: 'name' //The fields displayed in the Grid Panel must be the same as those in the User Model}, {text: 'alamat email', lebar: 150, dataindex: 'email', tersembunyi: true}, {text: 'number telepon', flex: 1, dataldex: 'phone'}]});Panel jaringan pengguna terakhir ditampilkan pada gambar.
2 Pengelompokan Data Panel Grid (Pengelompokan)
Selama properti Groupfield diatur di toko, data yang ditampilkan oleh panel grid dapat dikelompokkan. Misalkan perusahaan memiliki banyak karyawan dan perlu mengelompokkan karyawan perusahaan berdasarkan departemen di panel grid. Pertama, atur properti Groupfield ke departemen di toko.
Ext.create ('ext.data.store', {model: 'karyawan', data: ..., groupfield: 'department' // setel data yang dikelompokkan oleh departemen});Kemudian tambahkan fitur pengelompokan ke panel grid untuk mencapai efek tampilan pengelompokan.
Ext.create ('ext.grid.panel', {... fitur: [{ftype: 'pengelompokan'}]});Efek tampilan grup ditunjukkan pada gambar di bawah ini. Klik di sini untuk melihat kode tampilan grup resmi.
3 Tampilan Pagination Panel Kisi
Ketika ada lebih banyak data dan lebih banyak halaman untuk ditampilkan, data perlu ditampilkan paging. Panel Grid dapat mewujudkan tampilan pagination melalui dua metode: paging toolbar dan scroller paging. Toolbar Paging memiliki tombol halaman/halaman berikutnya sebelumnya. Scroller Paging secara dinamis memuat data saat panel grid menggulir ke bawah.
Untuk mengimplementasikan tampilan pagination, Anda harus terlebih dahulu mengatur toko untuk mendukung pagination. Atur halaman di toko. Halaman default adalah 25. Tetapkan jumlah total data dalam pembaca TotalProperty, dan pagin plugin paging sesuai dengan halaman dan TotalProperty. Kode berikut diatur ke 4, dan TotalProperty diperoleh dari data JSON yang dikembalikan.
Ext.create ('ext.data.store', {model: 'user', autoload: true, pageSize: 4, // atur jumlah data yang ditampilkan per proxy halaman: {type: 'ajax', url: 'data/users.json', pembaca: {type: 'json', root: 'root',//users.json ', pembaca: {type:' json ', root:' root ',//users.json, pembaca: {type:' json ', root:' root ',//users.json, Atribut terkait JSON: 'Total' // Total Kuantitas Data}}});Asumsikan bahwa format data JSON adalah sebagai berikut
{"Success": true, "Total": 12, "Users": [{"Name": "Lisa", "Email": "[email protected]", "Telepon": "555-111-1224"}, {"nama": "Bart", "Email": "[email protected]", "name": "Bart", "Email": "[email protected]", "Name": "BART "2 "Home", "email": "[email protected]", "phone": "555-222-1244"}, {"name": "marge", "email": "[email protected]", "telepon": "555-222-1254"}]}}Paging toko telah diatur. Fungsi paging paging paging paging diimplementasikan di panel grid.
Ext.create ('ext.grid.panel', {store: userStore, kolom: ..., dockeditems: [{xtype: 'pagingtoolbar', // tambahkan toko paging toolbar: UserStore, // atur paging toolbar store ke yang sama dengan pance panel store dock: 'dasar', displayinfo: trlayfo: true});Efek paging bilah alat paging ditunjukkan pada gambar di bawah ini. Klik di sini untuk melihat kode fungsi paging paging paging paging resmi.
Implementasi paging scroller paging relatif sederhana. Cukup atur kode berikut di panel grid. Klik di sini untuk melihat kode fungsi pagroler pagroler paging resmi.
Ext.create ('ext.grid.panel', {// gunakan paging scroller paging plugin verticalscroller: 'paginggridscroller', // jangan mereset scrollbar ketika tampilan menyegarkan disporselselonelonelon: false, // scrolling infinite tidak diselesaikan dengan scrolling dukungan yang tidak divalidasi.4 Panel Kisi Tambahkan kotak centang
Cukup atur properti Selmodel dari panel grid ke ext.selection.checkboxmodel, klik di sini untuk melihat contoh kode resmi.
Ext.create ('ext.grid.panel', {selmodel: ext.create ('ext.selection.checkboxmodel'), // Atur mode pemilihan panel kisi ke kotak centang toko: userStore, kolom: ...});5 Contoh Komprehensif
var grid = baru ext.grid.gridpanel ({store // Sumber data cm //ext.grid.columnmodel kolom // fungsi sama dengan ext.grid.columnmodel. Hanya memiliki satu dengan cm autowidth: benar -benar tag: false columnlines: true, renderto / /menampilkan cm autowidth: true widh Border: false columnlines: true, renderto / /menampilkan ID IDOLLTH: BORDER WELDETTH TRUE: FALSE COLUMNLINES: True, Renderto /menampilkan ID IDLE IDOLLOLTH TRUE BORDER TRUE: Efek animasi (default adalah benar, ketika class ext.fx tersedia). displayInfo:true, //Document source displayInfo:true, //DocumentationMsg:'Show the records from {0} to {1}, a total of {2}', emptyMsg:'No record' }), tbar:[{ text:'Query', icon:'/trade/images/delete.gif', cls:'x-btn-text-icon', Handler: function () {win.show ();}}}) // ***************************************** // pagingtoolbar paging // lewat ke data server mulai permintaan, batasi berapa banyak item untuk permintaan // sortir // sortir server, dir // *****************.grid. Ext.grid.rownumberer (), {header: "ID pelanggan", lebar: 50, sortable: true, dataindex: 'memid'}, {header: "nama pelanggan", lebar: 75, sortable: true, dataindex: 'memname'}, {header: 'no.' sortable: dataindex: 'memname'}, {header: 'no.' siruti no. ', width: 50, datainain:' memname '}, {header:' no. 'secret no.', width: 50, datining: 'memname'}, {header: 'no.' secret no. ', width: 50, datin renderer: function (v) {return (v == '1')? '<img src = "gambar/user_suit.png">': '<img src = "gambar/user_female.png">';}} {header: 'nomor pelacakan', lebar: 150, daterdex: ',' date: 'date:' date: 'date:' date: '{header:' DATAIN: 'DATERDEX:' DATERDEX: 'DATERDEX:' Dataindex: 'kd_time'}]); /********************************************************************************/EditorGridPanel ChicktoEdit: 1 // Jumlah Klik Columnmodel Editor: New Ext.Form.Textfield ({})//Dapatkan Var Var; // var dimodifikasi = StoreEdit.modified.slice (0); // ext.each (dimodifikasi, fungsi (m) {alert (m.data.id); // data ada di m.data dan id adalah nama bidang}) // Dapatkan data kisi var selmodel = grid.getSelectionModel (); Dapatkan Mode Seleksi VAR Record; if (! selmodel.hasselection ()) {ext.msg.alert ('peringatan', 'Silakan pilih baris yang akan dimodifikasi!'); kembali; } selmodel.getSelection (). panjang; // Jumlah baris yang dipilih catatan = selmodel.getSelected (); // Dapatkan data dari baris yang dipilih(1) Dapatkan data:
Satu baris
id = record.get ('id');atau
id = record.data.id;
Beberapa baris
Rekam [i] .get ('ddd')(2) Hapus data:
var obj = grid.getSelectionModel (). getSelected (); Store.Remove (OBJ); grid.getView (). Refresh ();
(3) kueri
store.baseparams ['memid'] = fb.form.findfield ('memid'). getValue (); store.baseparams ['start'] = 0; Store.Load ();(4) Tambahkan baris:
Ext membawa plugin
Membutuhkan file rowexpander.js
var expand = ext.ux.grid.rowExpander baru baru ({tpl: ext.template baru ('<p> {alamat} </p>')});Tambahkan kolom Expand ke Grid,
Dan tambahkan plugin: Expand ke grid atribut