Ohne weiteres die Code veröffentlichen
HTML -Code:
<! DocType html public "-// w3c // dtd html 4.01 transitional // en href = "../ extjs3/ressourcen/css/ext-all.css" rel = "externe nofollow"/> <script type = "text/javaScript" src = "../ extjs3/adapter/ext/ext-base.js"> </script> <script type type = "text/javaScript" src = "array-grid.js"> </script> <style type = "text/cs </style> </head> <body> <div id = "grid-exampel"> </div> </body> </html>
JS -Code, wobei der getrennte Code der Schlüsselcode ist, analysieren Sie ihn selbst:
Ext.onReady (function () {ext.quickTips.init (); ext.state.Manager.setProvider (neu ext.state.cookiesprovider (); // statische Beispieldaten für den Store var mydata = [['3M Co', 71.72, 0.02, 0,03, '9/1, 12, 12, AM'], ['Altria Inc', 83., '9/1, 12. 0.34, '9/1 12:00am'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am'] ]; /** * benutzerdefinierte Funktion für Spalten -Renderer * @param {Object} Val */Funktion Change (Val) {if (val> 0) {return '<span style = "color: grün;>' + val + '</span>'; @param {Objekt} val */function pctchange (val) {if (val> 0) {return '<span style = "color: grün;">' + val + '%</span>'; Ext.data.ArrayStore({ fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/jh:ia'} ] }); // Lokale Datenspeicher manuell laden.loadData (mydata); // Erstellen Sie das Grid var grid = new ext.grid.gridpanel ({Store: Store, Spalten: [{id: 'Company', Header: 'Company', Width: 160, sortierbar: true, dataindex: 'company'}, {Header: 'Preis', widsth: 75, sortable: true: renderer: renderer: uswone: usmoney 'usmoney' usmoney 'usmoney' usmoney: 'Change', width : 75, sortable : true, renderer : change, dataIndex: 'change' }, { header : '% Change', width : 75, sortable : true, renderer : pctChange, dataIndex: 'pctChange' }, { header : 'Last Updated', width : 85, sortable : true, renderer : Ext.util.format.daterenderer ('m/d/y'), dataindex: 'lastChange'}], ViewConfig: {ForceFit: TRUE // ----------------------------------------, GetRowClass: Funktion (Record, RowIndex, RowParams, Store) {mym- ("3M-co" == "). }} // ------------------------------------------- // das Netz in die angegebene Div in der Seitenraster ('Grid-Example') rendern; });