Tanpa basa -basi lagi, posting kode
Kode HTML:
<! Doctype html public "-// w3c // dtd html 4.01 transisi // en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <tautan rel = "stylesheet" type = "css =" href = "../ extjs3/sumber daya/css/ext-all.css" rel = "eksternal nofollow"/> <script type = "text/javaScript" src = "../ extjs3/adapter/ext/ext-base.js"> </script> <script type = "teks/javascript" src = ".." .. type = "Text/JavaScript" src = "array-grid.js"> </script> <style type = "text/css">. <span style = "font-family: arial, helvetica, sans-serif;"> my_row_class </span> <span style = "font-family: arial, helpet;"; </tyle> </head> <body> <Div id = "grid-example"> </div> </body> </html>
Kode JS, di mana kode yang dipisahkan adalah kode kunci, menganalisisnya sendiri:
Ext.onready (function () {ext.quicktips.init (); ext.state.manager.setProvider (ext.state.cookieprovider baru ()); // Contoh data statis untuk toko var mydata = ['3m co', 71.72, 0,02, 0,03, '9/12,' 9:1.00, '9.00,' 0.10, 0.28, 0.34, '9/1 12:00 pagi'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00 AM'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00 AM'], ['Wal-Mart, Inc.' 12:00 AM ']]; Fungsi digunakan untuk renderer kolom * @param {objek} val */fungsi pctchange (val) {if (val> 0) {return '<span style = "color: green;"> val +'%</span> '; Ext.data.arraystore ({fields: [{{name: 'company'}, {name: 'price', type: 'float'}, {name: 'ubah', type: 'float'}, {name: 'pctchange', type: 'float'}, {name: 'lastChange', {type: 'date'); date 'name: nFa: {name: {name: {{{{{} {date: {date: // Muat Store Data Lokal secara manual.loadData (myData); // Buat grid var grid = baru ext.grid.gridpanel ({store: store, kolom: [{id: 'company', header: 'company', width: 160, sortable: true, dataindex: 'company'}, {header: 'price', width: 75, sortable: true, renderer: 'USM:' USMONEY ', width: 75, sortable: true, renderer:' USMone: 'USMoney:' uSoning: width: 75, sortable: true, renderer: 'usm:' USMONEY ', width: 75, sortable: true, renderer:' USMoning 'Ubah', lebar: 75, sortir: true, renderer: ubah, dataldex: 'ubah'}, {header: '% ubah', lebar: 75, sortable: true, renderer: pctchange, dataindex: 'pctchange'}, {header: 'terakhir diperbarui', lebar: 85, sortir '} ringer:' ringer: 'true:' ringer: 'true:' ringer: 'ringer:' true: 'ringer:' ringer: 'last updated', width: 85, sortir Ext.util.format.daterenderer ('m/d/y'), dataldex: 'lastchange'}], viewconfig: {forcefit: true // --------------------------------------------, getrowclass: function (record, rowIndex, rowparams, store) {if ("3m co" (== co ") (rowindex, rowparams, store) {if (" 3m co "co"). }} // ------------------------------------------------}, Strikerows: Benar, AutoExpandColumn: 'Perusahaan', Tinggi: 350, Lebar: 600, Judul: 'Grid Array', // Opsi Konfigurasi untuk Perilaku Stateful Stateful: True, StateD: 'Grid'}); // render grid ke div yang ditentukan di halaman grid.render ('grid-example'); });