โดยไม่ต้องกังวลใจเพิ่มเติมโพสต์รหัส
รหัส HTML:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd"> <html> href = "../ extjs3/resources/css/ext-all.css" rel = "external nofollow"/> <script type = "text/javascript" src = "../ extjs3/adapter/ext/ext/ext-base.js"> </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> <span style = " </style> </head> <body> <div id = "grid- ตัวอย่าง"> </div> </body> </html>
รหัส JS ซึ่งรหัสที่คั่นเป็นรหัสคีย์วิเคราะห์ด้วยตัวเอง:
ext.onready (function () {ext.quicktips.init (); ext.state.Manager.SetProvider (ใหม่ ext.state.cookieprovider ()); // ตัวอย่างข้อมูลคงที่สำหรับร้านค้า var mydata = [['3M Co', 71.72, 0.02, 0.03, '9/1 12:00 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'] /** * ฟังก์ชั่นที่กำหนดเองสำหรับคอลัมน์ renderer * @param {Object} val */ฟังก์ชั่น (Val) {ถ้า (val> 0) {return '<span style = "สีเขียว:">' + val + '</span>' @Param {Object} val */function pctchange (val) {ถ้า (val> 0) {return '<span style = "สีเขียว:">' + val + '%</span>'; ext.data.arraystore ({ฟิลด์: [{ชื่อ: 'บริษัท '}, {ชื่อ: 'ราคา', ประเภท: 'float'}, {ชื่อ: 'เปลี่ยน', ประเภท: 'float'}, {ชื่อ: 'pctchange', ประเภท: // โหลด Local Data Store.loadData (myData) ด้วยตนเอง; // สร้าง grid var grid = new ext.grid.gridpanel ({store: store, คอลัมน์: [{id: 'บริษัท ', ส่วนหัว: 'บริษัท ', ความกว้าง: 160, เรียงลำดับ: จริง, dataindex: 'บริษัท '}, {ส่วนหัว: ราคา ' 'เปลี่ยน', ความกว้าง: 75, cortable: true, renderer: เปลี่ยน, dataIndex: 'เปลี่ยน'}, {ส่วนหัว: '% เปลี่ยน', ความกว้าง: 75, เรียงลำดับได้: จริง, เรนเดอร์: PCTCHANGE, DataIndex: 'PCTCHANGE' ext.util.format.daterenderer ('m/d/y'), datainedex: 'lastchange'}], viewConfig: {forcefit: true // --------------------------------------------, getrowclass: function (Record, Rowindex, Rowindex, Rowindex 'my_row_class';}} // ----------------------------------------}, striperows: จริง, autoexpandcolumn: 'บริษัท ', ความสูง: 350, ความกว้าง: 600, ชื่อ: // เรนเดอร์กริดไปยัง div ที่ระบุในหน้า grid.render ('grid- ตัวอย่าง'); -