Sin más preámbulos, publique el código
Código HTML:
<! Doctype html public "-// w3c // dtd html 4.01 href = "../ extjs3/recursos/css/ext-all.css" rel = "externo nofollow"/> <script type = "text/javascript" src = "../ extjs3/adapter/ext/ext-base.js"> </script> <script type = "text/javaScript" src = "../ extjs3 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 span style = "font-family: arial, helvetica, sans-serif;" </style> </head> <body> <div id = "grid-exame"> </div> </body> </html>
El código JS, donde el código separado es el código clave, analícelo usted mismo:
Ext.onready (function () {ext.quicktips.init (); ext.state.manager.setProvider (new Ext.state.cookieProvider ()); // muestra datos estáticos para el almacén var myData = [[3M Co ', 71.72, 0.02, 0.03,' 9/1 12:00 am '], [' Altria Group Inc ', 83.81, 0.281, 0.281, 0.281, 0.81, 0.81, 0.81, 0.81, 0. 0.34, '9/1 12:00 am'], ['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 Store, Inc.', 45.45, 0.73, 1.63, '9/1 12:00 AM']; /** * Función personalizada utilizada para la columna * @param {object} val */function Change (val) {if (val> 0) {return '<span style = "color: verde;">' + val + '</span>'; @param {objeto} val */function pctchange (val) {if (val> 0) {return '<span style = "color: verde;">' + val + '%</span>'; Fields: [{name: 'Company'}, {name: 'Price', type: 'float'}, {name: 'Change', type: 'float'}, {name: 'pctchange', type: 'float'}, {name: 'LastChange', type: 'Date', dateFormat: 'n/jh: ia'}]}); // cargar manualmente el almacén de datos locales.loadData (myData); // Crear la cuadrícula var grid = new Ext.Grid.GridPanel ({store: store, columns: [{id: 'Company', Header: 'Company', Width: 160, Sortable: true, dataindex: 'Company'}, {header: 'precio', ancho: 75, sortable: true, renderer: 'usmoney', datainDex: 'precio}, {{{{{{ 'Change', Width: 75, Strayable: True, Renderer: Change, DataIndex: 'Change'}, {Header: '% Change', Width: 75, Ordolable: True, Renderer: PCTChange, Dataindex: 'PCTChange'}, {Header: 'Last actualizado', ancho: 85, NEG Ext.util.format.daterenderer ('m/d/y'), dataindex: 'lastchange'}], verfig: {forcefit: true // -------------------------------------------------, getRowClass: function (registro, fila, fila, rowparams, almacena) {if ("3m co" == registro.get ('compañía')) {return ' }} // ------------------------------------- // Renderizar la cuadrícula a la DIV especificada en Page Grid.render ('Grid-exame'); });