Pengantar fitur tabel di extjs
Tabel ini didefinisikan oleh kelas ext.grid.gridpanel, diwarisi dari ext.panel, dan xtype adalah grid
Informasi kolom tabel ditentukan oleh ext.grid.columnmodel
Penyimpanan data tabel ditentukan oleh ext.data.store. Menurut data analitik yang berbeda, penyimpanan data dapat dibagi menjadi jenis berikut:
JSSTORE, SimpleStore, GroupingStore…
Proses penulisan dasar tabel:
1. Buat model kolom tabel
var cm = ext.grid.columnModel baru ({{header: 'role', dataindex: 'role'}, {header: 'level', dataindex: 'grade'}, {header: 'create date', dataindex: 'created', type: 'date', renderer: 'day pound.util. data});2. Buat array data
var data = ['prajurit', '7', '2011-07-2412: 34: 56'], ['umum', '10', '2011-07-2412: 34: 56'],];
3. Buat toko objek penyimpanan data, yang berisi dua bagian: proxy, cara untuk mendapatkan data; pembaca, cara untuk menguraikan data
Pemetaan ArrayReader digunakan untuk mengatur urutan kolom
var store = new ext.data.store ({proxy: new ext.data.memoryproxy (data), pembaca: ext.data.arrayreader baru ({}, [{name: 'role', pemetaan: 1}, {name: 'grade', pemetaan: 0} {name: 'created: created: {name:' grade ', pemetaan: 0} {' create: 'created' DateFormat: 'YM-DH: I: S'} // Buat kolom tanggal dan format tampilan])}); Store.Load ();4. Buat gridpanel, kumpulkan Columnmodel dan Store
var grid = ext.grid.gridPanel baru ({renderto: 'grid', store: store, cm: cm});Selain itu, Anda dapat menggunakan scripttagproxy untuk mendapatkan data jarak jauh, seperti yang ditunjukkan di bawah ini
var store = ext.data.store baru ({proxy: new ext.data.scripttagproxy ({url: 'http: // ...'}), pembaca: ext.data.arrayReader ({{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{'), "Peran", arah: "ASC"} // Atur urutan penyortiran default, ASC/desc});Sifat umum tabel
var grid = ext.grid.gridPanel baru ({enableColumnMove: false, // kolom seret dan drop dilarang diaktifkancolumnresise: false, // nonaktif var cm = new Ext.grid.ColumnModel({ {header: 'role', dataIndex: 'role', width:90, sortable: true}, //width sets the column width, the default is 100px, sortable sets the sort function {id:'grade', header: 'level', dataIndex: 'grade', width:40}});var grid = new Ext.grid.gridpanel ({renderto: 'grid', store: store, cm: cm viewconfig: {// biarkan setiap kolom secara otomatis mengisi bentuk forcefit: true} autoexpandcolumn: 'grade' // secara otomatis memperluas kolom, ID kolom didefinisikan dalam kolommodel});Render tabel dan atur gaya khusus untuk tabel
Cukup tambahkan atribut renderer ke CM dan tambahkan fungsi khusus untuk membuat gaya parameter yang dilewati (secara otomatis diteruskan oleh ext), yaitu, merakit peristiwa respons HTML, CSS atau JS yang sesuai sebelum mengembalikan nilainya.
function rendersex (value) {if (value == 'Male') {return "<span style = 'color: blue;'> jantan </span> <img src = 'gambar/icon_male.png'/>"; } else {return "<span style = 'color: red;'> female </span> <img src = 'gambar/icon_female.png'/>"; }} var cm = ext.grid.columnModel ([{{header: 'id', dataindex: 'id'}, {header: 'name', dataindex: 'name'}, {header ',' 1, ',' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' 1, '1,' ['2', 'Kate', 'betina']]]; var store = new ext.data.store ({proxy: ext.data.memoryproxy baru (data), pembaca: new ext.data.arrayreader ({}, [{name: 'id'}, {name: 'name'; grid = ext.grid.gridPanel baru ({autoheight: true, renderto: 'grid', store: store, cm: cm});Secara otomatis menampilkan nomor baris, cukup buat rownumberer saat membuat cm
var cm = ext.grid.columnModel baru ([baru ext.grid.rownumberer (), // tampilkan nomor baris {header: 'id', dataindex: 'id'}, {header: 'name', dataindex: 'name'}, {header: 'sex', dataindex: 'sex', 'name'}, {header: 'sex', dataldex: 'sex', 'name'}, {header: 'sex', dataindex: 'sex' sex 'Hapus kolom
Store.remove (Store.getat (i));
Segarkan meja
grid.view.refresh ();
Tambahkan kotak centang untuk tabel
Perlu menggunakan CekboxSelectionModel
SelectionModel SM harus ditempatkan di cm dan tabel saat digunakan
var sm = ext.grid.checkboxselectionModel () baru baru = ext.grid.columnmodel baru ([ext.grid.rownumberer (), sm, {header: 'nomor', dataindex: 'id'}, {header: 'name', dataindex: 'name'}]; ['2', 'Name2']]]; var store = ext.data.store baru ({proxy: ext.data.memoryproxy baru (data), pembaca: baru ext.data.arrayreader ({}, [{name: 'id'}, {name: 'name'}]}} ({{{{ID '}, {name:' name '{} {{{{{{ID), {{{{{{{name), {{{{{{{{{{{{{{{{name), {{{{{{{{name), Ext.grid.gridpanel ({autoheight: true, renderto: 'grid', store: store, cm: cm, sm: sm});Hanya satu baris yang dipilih melalui pengaturan RowselectionModel:
var grid = ext.grid.gridPanel baru ({autoheight: true, renderto: 'grid', store: store, cm: cm, sm: new ext.grid.rowselectionModel ({singleselect: true})});Gunakan model pilih untuk mendapatkan data
grid.on ('klik', function () {var selections = grid.getSelectionModel (). getSelection (); for (var i = 0; i <selections.length; i ++) {var record = seleksi [i]; ext.msg.alert (record.get ("id"));}});Tampilan Tabel
Dari gagasan MVC, kontrol meja:
* Ext.data.store dapat dianggap sebagai model
* Ext.grid.gridpanel dapat dianggap sebagai pengontrol
* Ext.grid.gridview dapat dilihat sebagai tampilan
* Secara umum, GridView secara otomatis dihasilkan oleh GridPanel. Jika Anda ingin mengatur properti GridView, Anda bisa mendapatkan contoh tampilan melalui getView () dari ext.grid.gridpanel.
Ext.get ('button1'). On ('click', function () {grid.getView (). Scrolltotop (); grid.getView (). Focuscell (0, 0); var cell = grid.getView (). GetCell (0, 0); cell.style.backgroundcolor = 'red';Gunakan ViewConfig ViewPanel untuk mengatur parameter inisialisasi GridView saat membuat tabel
var grid = ext.grid.gridPanel baru ({height: 100, width: 400, renderto: 'grid', store: new ext.data.store ({autoload: true, proxy: new ext.data.memoryproxy (data), pembaca: ext.data.data.ray columon ({} {{} {{{} {{} {{new, {{{{{new, {{{{{{{{{), new baru. { columnsText: 'Show column', //Set the drop-down menu prompt text scrollOffset: 30, //Set the reserved width of the scrollbar on the right sortAscText: 'AscText', //Set the drop-down menu prompt text sortDescText: 'Down order', //Set the drop-down menu prompt text forceFit: true //Automatically extend the length of each column}});Tambahkan bilah alat paging ke tabel
* Anda dapat menggunakan properti BBAR GridPanel dan membuat objek bilah alat paging expagingtoolbar
* Perhatikan bahwa jika bilah alat paging dikonfigurasi, Store.Load () harus dieksekusi setelah tabel dibangun.
var grid = ext.grid.gridPanel baru ({renderto: 'grid', autoHeight: true, store: store, cm: cm, bbar: ext.pagingtoolbar baru ({{{{pagarze: 10, // 10 item data ditampilkan per halaman toko: distangkan, displayinfo: true, // informasi pajangan pajangan 0 {2} ', emptymsg: "no record" // informasi yang ditampilkan ketika tidak ada data})}); store.load ();Dapatkan data pagination dari skrip latar belakang
Gunakan httpproxy untuk meneruskan permintaan, mendapatkan data JSON server, dan menyerahkannya ke JSONREADER untuk analisis
var cm = new Ext.grid.ColumnModel([ {header:'number',dataIndex:'id'}, {header:'name',dataIndex:'name'}]);var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'page.jsp'}), reader: new Ext.data.jsonreader ({TotalProperty: 'TotalProperty', root: 'root'}, [{name: 'id'}, {name: 'name'}])}); var grid = yough ext.grid. Toko Tinggi: Store, CM: CM, BBAR: Ext.PagingToolBar baru ({PageSize: 10, Store: Store, DisplayInfo: True, DisplayMsg: 'Tunjukkan {0} ke {1} catatan/total {2}', emptymsg: "No Record"})}); Store.load ({params: {start: 0, Limit: 10}});Jika Anda ingin bilah alat pagination muncul di bagian atas tabel, Anda dapat menambahkan toolbar menggunakan pengaturan properti GridPanel Tbar.
Biarkan Extjs memberi paginasi data yang dikembalikan
* Anda perlu memperkenalkan file pagingmemoryproxy.js di bawah Contoh/Direktori Lokal ke dalam halaman
* Gunakan pagingmemoryproxy untuk mengatur proxy
var store = new ext.data.store ({proxy: new ext.data.pagingmemoryproxy (data), pembaca: ext.data.arrayreader baru ({}, [{name: 'id'}, {nama: 'name'}, {name: 'descn'}])}}}} {{name: Store.load ({params: {start: 0, Limit: 3}});Penggunaan EditorGrid dengan kontrol tabel yang dapat diedit
Langkah -langkah untuk membuat editorgrid sederhana:
1. Tentukan kolom kolommodel dan tambahkan atribut editor ke dalamnya
var cm = ext.grid.columnModel baru ([{header: 'number', dataindex: 'id', editor: ext.grid.grideditor baru (ext.form.textfield baru ({{{needer ', newititor', newitor ', newitor, needor, namein. Ext.form.textfield ({izinBlank: false}))}]);2. Siapkan array
var data = [['1', 'jason'], ['2', 'jay']];
3. Buat ext.data.store, atur proxy memori, dan atur arrayreader ke array parse
var store = ext.data.store baru ({proxy: new ext.data.memoryproxy (data), pembaca: ext.data.arrayreader baru ({}, [{{name: 'id'}, {name: 'name'}])});4. Muat data dan buat editorGridPanel
Store.load (); var grid = ext.grid.EditorGridPanel baru ({autoheight: true, renderto: 'grid', store: store, cm: cm});Tambahkan dan hapus data untuk tabel yang dapat diedit
1. Buat set rekaman menggunakan Metode Create Metode MyRecord. MyRecord setara dengan kelas
var myRecord = ext.data.record.create ([{{name: 'id', type: 'string'}, {name: 'name', type: 'string'}]); store.load ();2. Buat panel editorGridPanel dan buat ext.toolbar di properti tbar
var grid = ext.grid.EditorGridPanel baru ({autoHeight: true, renderto: 'grid', store: store, cm: cm, tbar: new ext.toolbar (['-', {//- berarti menu pemisah teks: 'tambahkan baris', handler: function () {var p = my my myRece: 'Tambah baris', handler: function () {var p = my my myRece: '{{{var p = my myRecing:' {{{new p = my my myRecing: 'Tambahkan baris', handler: function () {var p = my my myRECTICE: ' grid.stopediting (); // Tutup status pengeditan Table Store.insert (0, p); Hapus? ' '-'])});Simpan hasil yang dimodifikasi untuk tabel yang dapat diedit
Berdasarkan contoh di atas, tambahkan tombol simpan
Teks: 'Simpan', handler: function () {var m = store.modified.slice (0); // Dapatkan data yang dimodifikasi di toko untuk (var i = 0; i <m.length; i ++) {// Verifikasi apakah informasi tabel benar dan apakah itu berisi spasi var Record = m [i]; var fields = record.fields.keys; untuk (var j = 0; j <fields.length; j ++) {var name = bidang [j]; var value = record.data [name]; var colindex = cm.findcolumnIndex (name); var rowIndex = Store.IndexOfID (Record.id); editor var = cm.getCelleditor (colindex) .field; if (! editor.validateValue (value)) {ext.msg.alert ('tip', 'Silakan periksa apakah data yang dimasukkan benar!', function () {grid.startediting (rowindex, colindex);}); kembali; }}} var jsonarray = []; Ext.each (m, function (item) {jsonarray.push (item.data); // Masukkan data yang dimodifikasi ke dalam jsonarray}); Ext.lib.ajax.Request (// Gunakan permintaan AJAX untuk mengirimkan ke latar belakang 'pos', 'save_data.jsp', {Success: function (response) {// return ext.msg.alert yang berhasil ('Informasi', respons.responsext, function () {Store.moad ();};},},}, function () {store. "Kesalahan Data Server!");Selain itu, toko dapat mengatur properti prunemodifiedRecords: true. Dengan cara ini, toko akan secara otomatis menghapus tag yang dimodifikasi setiap kali menghapus atau memuat operasi, yang dapat menghindari fenomena membawa semua informasi yang dimodifikasi pada waktu berikutnya diserahkan.
Batasi tipe data input tabel
Numberfield
{header: 'id', dataldex: 'id', editor: ext.grid.grideditor baru (baru ext.form.numberfield ({// batasanfield batas yang hanya angka yang dapat dimasukkan Allowblank: false, allownegative: false, // tidak dapat memasukkan tanda minus maxValue: 10}))}ComboBox
var combodata = [['0', 'java'], ['1', 'android']]; {header: 'comboBox', dataindex: 'combo', editor: ext.grid.gridreditor baru (ext.form.comboBox ({store: ext.data.data.simpleStore baru ({{{{store ', {{{{{{{{{{{{{{{{{{{{{{{{{{{newah' baru emplemtext: 'silakan pilih', mode: 'lokal', pemicu: 'all', valuefield: 'value', displayField: 'text', readonly: true})), renderer: function (value) {return combodata [value] [1]; }}Datfield
{Header: 'Date', DatainDex: 'Date', Editor: New Ext.Grid.Grideditor (Ext.Form.DateField baru ({format: 'ym-d', MinValue: '2011-07-24', DisableDdays: [0, 6], ringldayStext: 'Pilih tanggal antara Senin dan Sabtu'}), retender), function {donableDdayStext: 'Pilih tanggal antara Senin dan Sabtu'}), function {donabeddayStext: 'Pilih tanggal antara Senin dan Sabtu'}), FUNGSI), 'oMER DAYERMAN:' oMERGED: 'DISABLEDDAYSTEXT:' Pilih Tanggal antara Senin dan Sabtu '}), Senin dan Sabtu), DisableddayStext:' value.format ("ymd"); }}Penggunaan PropertyGrid
Ini adalah komponen bentuk canggih yang lebih pintar yang dikembangkan berdasarkan editorgrid
var grid = ext.grid.propertygrid ({title: 'properti', autoHeight: true, lebar: 400, renderto: 'grid', viewonfig: {forcefit: {forple, {{{{{forple, {{{{{{{{{{{{{{{{{{{{{{{{{boolean, }});Cara Menonaktifkan Fungsi Pengeditan PropertyGrid
grid.on ('sebelumnya', function (e) {e.cancel = true; return false;});Dapatkan nilai sesuai dengan nama tabel
grid.store.getById ('jason'). get (value);Menerapkan tabel bersarang di extjs
Mari kita lihat efeknya terlebih dahulu:
Kodenya adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html><heHead>< <meta htmeta =" htpetpetpe = "html" contentspetpet; charset = UTF-8 "/> <Title> tes </iteme> <script type =" text/javascript "> </script> <tautan rel =" stylesheet "type =" text/css "href =" lib/extjs/2_2/sumber daya/css/ext-all.css "/<script type/javas/javas/javas/javas" src = "lib/extjs/2_2/adaptor/ext/ext-base.js"> </script> <script type = "text/javascript" src = "lib/extjs/2_2/ext-all-debug.js"> </script> <script type = "teks/javascript" src = "lib/extjs/2_2/source/locale/ext-lang-zh_cn.js"> </script> <script type = "text/javascript" src = "lib/extjs/plus/rowexpander.js"> </script> <script type = "teks/javascript"> ext.onready (function) (function =) <) <script = "teks/javascript"> ext.onready (function) (function =) <) <script = "teks/javascript"> ext.onready (function) (script> <script = "teks/javascript"> ext.onReady ["Lugreen", "Pria", 26, [["Matematika", 100], ["Cina", 150]]], ["Lisi", "Pria", 25, ["Matematika", 100], ["Cina", 150]], ["Zhangsan", "27, [" Math ", 120], [Zhangsan", "MALE", 27, ["Matematika", 120], [Zhangsan "," Math "," Zhangsian "," MALE, "MALE", "MALE," Ext.data.simplestore ({fields: ["name", "sex", "age", "grade"], data: testData}); var expander = baru ext.grid.rowexpander ({tpl: ext.xtemplate baru ('<verv>', '', '</dv>') }); expander.on ("expand", function (expander, r, body, rowindex) {// temukan grid window.testele = body; //alert(body.id); if (ext.domQuery.select ("div.x-panel-bwrap", body) .length == 0) {// weran ("a"); varson = R. Ext.data.simplestore ({fields: ["class", "degrade"], data: data}); 'Degrade', Width: 130, Hidable: False, Sorthable: False, Ressize: True}]); autowidth: true, autoHeight: true});}}); // var sm = ext.grid.checkboxselectionModel ({singleselect: true {var cm, {fale, {weader: {weader: {weader: {weader: {fale, {weader: {weader: {weader: {weader: {weader: {weader: {weader: {weadher: "Jenis Kelamin", Dataindex: 'Sex', Width: 130, Hidable: False, Sortable: False, Recize: True}])); plugin: [expander]});}); </script> <style type = "text/css">#div2 h2 {font-weight: 200; Ukuran font: 12px;}. C1 H2 {font-weight: 200;} </style> </head> <body> <Div id = "grid1"> </div> <div id = "grid2"> </div> </body> </html>"Rowexpander.js" yang digunakan dibangun dalam contoh EXTJS resmi.
Ada dua tips yang perlu diperhatikan saat menerapkan tabel bersarang ini:
1. Sumber data yang disediakan untuk datastore di tabel luar mewakili data di area detail dalam bentuk array bersarang, seperti yang ditunjukkan pada tebal di bawah ini.
var testData=[ ["lugreen","male",26,[["math",100],["Chinese",150]]] ,["lisi","male",25,["math",100],["Chinese",150]]] ,["zhangsan","male",27,["math",120],["Chinese",158]]] ];
Gunakan atribut JSON dari objek catatan di array untuk mendapatkan data secara rinci
var data = r.json [3];
2. Tambahkan tabel bersarang di acara Expand Rowexpander.