Без лишних слов опубликовать код
HTML -код:
<! Doctype html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <link rel = "stylesheet" type = "text/css" href = "../ extjs3/resources/css/ext-all.css" rel = "внешний nofollow"/> <script type = "text/javascript" src = "../ extjs3/adapter/ext/ext-base.js"> </script> <script type = "text/javascript" src = "../ extjs3"/ext. ext. ext. <script type = "text/javascript" src = "array-grid.js"> </script> <style type = "text/css">. <span style = "font-family: arial, helvetica, sans-serif;"> my_row_class </span> style = "font-famil Фон: grey;} </span> </style> </head> <body> <div id = "grid-example"> </div> </body> </html>
JS -код, где отдельный код является ключевым кодом, анализируйте его самостоятельно:
Ext.onready (function () {ext.quicktips.init (); ext.state.manager.setProvider (new Ext.State.cookieProvider ()); // Статические данные Show Var MyData = [['3M CO', 71,72, 0,02, 0,03, '9/1 12:00 утра'], [altria Group, 83. 83. 0,34, '9/1 12:00 утра'], ['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 Stores, Inc.', 45,45, 0,73, 1,63, 1, 3:00 3:00 3:00 3:00 3:00. /** Пользовательская функция, используемая для Renderer * @param {object} val */function изменение (val) {if (val> 0) {return '<span style = "color: green;">' + val + '</span>'; @param {object} val */function pctchange (val) {if (val> 0) {return '<span style = "color: green;">' + val + '%</span>'; Ext.data.arraystore ({fields: [{name: 'company'}, {name: 'price', type: 'float'}, {name: 'изменение', тип: 'float'}, {name: 'pctchange', type: 'float'}, {name: 'lastChange', type: 'date', dateformat: 'nia'; // вручную загружать локальный хранилище данных. Загрузкадата (mydata); // Создать Grid var grid = new Ext.Grid.GridPanel ({Store: Store, Columns: [{id: 'Company', Header: 'Company', ширина: 160, сортировка: true, dataindex: 'company'}, {Header: 'Price', Width: 75, Sortable: True, renderer: 'USMone «Изменение», ширина: 75, сортируемое: true, рендеринг: изменение, datainDex: «Изменение»}, {Header: '% Изменение', ширина: 75, сортировка: true, renderer: pctchange, dataIndex: 'pctchange'}, {Header: 'Последний обновленный', ширина: 85, сортировка: true, render: Ext.util.format.daterenderer ('m/d/y'), dataindex: 'lastchange'}], viewconfig: {forcefit: true // --------------------------------------------, getRowClass: function (record, rowindex, rowparams, hore) {if ("3m co" == record.get. }} // ------------------------------------------------}, Striperows: True, AutoExpandColumn: 'Company', высота: 350, ширина: 600, заголовок: 'Array Grid', // Параметры конфигурации для Statefulfultive Stateful: true, stastiD: 'Grid'}); // рендеринг сетки в указанный div в сетке Page.Render ('Grid-Example'); });