Sem mais delongas, poste o código
Código HTML:
<! Doctype html public "-// w3c // dtd html 4.01 transitório // pt" "http://www.w3.org/tr/html4/loose.dtd"> <html> <link Rel = "Stylesheet" type = " href = "../ extjs3/recursos/css/ext-all.css" rel = "Nofollow externo"/> <script type = "text/javascript" src = "../ extjs3/adaptador/extasccript/e extasc.js"> </script> <cript type = "text/javroScript" src = "> </script> <script Type =" text/javroScript "src ="> </script> <script type = "text/javroScript" src = "> </script> <script =" text/javroScript "src ="> </script> <script = "text/javroScript" ... <script type = "text/javascript" src = "Array-grid.js"> </script> <style type = "text/css">. <span style = "font-family: arial, helvetica, sans-sef;"> my_row_class </span> <stylesty = "" family: ARAL; Antecedentes: Gray;} </span> </style> </ad Head> <body> <div id = "grid-expler"> </div> </body> </html>
Código JS, onde o código separado é o código -chave, analise -o mesmo:
Ext.OnReady (function () {Ext.quicktips.init (); ext.state.manager.setProvider (new ext.state.cookieProvider ()); // Amostra de dados estáticos para o armazenamento var mydata = [['3m co', 71.72, 0,02, 0,03, '9/1 12:00 AM' AM 'AM'. 0,34, '9/1 12:00'], ['Altria Group Inc', 83,81, 0,28, 0,34, '9/1 12:00'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00], [' Wal-Mart Storores, Inc. '', /** * Função personalizada usada para renderizador de coluna * @param {objeto} val */função altere (val) {if (val> 0) {return '<span style = "cor: verde;">' + val + '</span>'; renderizador * @param {objeto} val */função pctchange (val) {if (val> 0) {return '<span style = "cor: verde;">' + val + '%</span>'; Ext.data.arrayStore ({campos: [{name: 'Company'}, {name: 'Price', tipo: 'float'}, {name: 'altere', tipo: 'float'}, {name: 'pctchange', tipo: 'float'}, {name '/' linChange ' // Carregar manualmente o armazenamento de dados local.loadData (myData); // Crie a grade var grade = new Ext.Grid.GridPanel ({store: store: colunas: [{id: 'Company', Header: 'Company', Width: 160, Sortable: True, DataIndex: 'Company'}, {Header: 'Price', largura: 75, Sortable ':' RERER '}, {Header:' Price ', LIMTH: 75, True', ' '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.datendendender ('m/d/y'), DataIndEx: 'Lastchange'}], ViewConfig: {forceFit: true // -----------------------------------------------, MyStrowclass: function (Record, RowIndEx, RowParams, Store) {se ("3m Co" Co "Co" CON " }} // ------------------------------------------------}, StripRerows: True, AutoExpandColumn: 'Company', Altura: 350, Largura: 600, Título: 'Array Grid', // Opções de Config para comportamento com estado de estado: Verdadeiro, StateId: 'Grid'}); // renderizar a grade para a div especificada na grade de página. });