더 이상 고민하지 않고 코드를 게시하십시오
HTML 코드 :
<! docType html public "-// w3c // dtd html 4.01 Transitional // en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <inink rel = "stylesheet"type/css " href = "../ extjs3/resources/css/ext-all.css"rel = "external nofollow"/> <script type = "text/javaScript"src = "../ extjs3/adapter/ext/ext-base.js"> </script> <script> <script> <script> javascript " src = "../ extjs3/ext-all.js"> </script> <script type = "text/javaScript"src = "array-grid.js"> </script> <style type = "text/css">. Arial, Helvetica, sans-serif; "> {배경 : Grey;} </span> </style> </head> <hod> <div id ="grid-example "> </div> </body> </html>분리 된 코드가 키 코드 인 JS 코드는 직접 분석합니다.
ext.onready (function () {ext.quicktips.init (); ext.state.manager.setprovider (new ext.state.cookieProvider ()); // 매장 var var var mydata = [ '3M Co', 71.72, 0.02, 0.03, '9/1 12:00 am'] 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 Stores, Inc.', 45.45, 0.73, '9/1 12:111;]; /** * 열 렌더러에 사용 된 사용자 정의 기능 * @param {object} val */function change (val> 0) {retud '<color : ">' + val + '</span>'; @param {object} val */val) {val> 0) {return '<span style = "color;" + val +'%</span> '; ext.data.arraystore ({fields : [{name : 'company'}, {name : 'price', type : 'float'}, {이름 : 'change', 'float'}, {이름 : 'pctchange', type : 'float'}, 'lastchange', 'type :'dateformat : '))); // 로컬 Data Store.LoadData (myData)를 수동으로로드합니다. // 그리드 var grid = new ext.grid.gridpanel을 만듭니다 ({상점 : 상점, 열 : [{id : 'company', header : 'company', width : 160, sortable : true, dataindex : 'company'}, {header : 'price', width : 75, sortable : true, render : 'usmoney', 'usmoney', 'usmoney', 'usmoney', 'usmoney' 너비 : 75, 정렬 가능 : true, renderer : change, dataindex : 'change'}, {헤더 : '% 변경', 너비 : 75, 정렬 가능 : true, renderer : pctchange, dataindex : 'pctchange'}, {header : 'last updated', width : 85, true : el dataIndex: 'lastChange' } ],viewConfig : {forceFit:true //------------------------------------------------ ,getRowClass : function(record,rowIndex,rowParams,store){ if("3m Co"==record.get('company')){ return 'my_row_class'; } } //------------------------------------------------ }, Striperows : True, AutoExpandColumn : 'Company', Height : 350, 너비 : 600, 제목 : 'Array Grid', // 상태가있는 동작을위한 // 구성 옵션 상태 : true, stateID : 'Grid'}); // 페이지 그리드에서 지정된 div로 그리드를 렌더링합니다 ( 'grid-example'); });