دون مزيد من اللغط ، انشر الكود
رمز HTML:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3 href = "../ extjs3/sourse/css/ext-all.css" rel = "خارجي nofollow"/> <script type = "text/javascript" src = "../ extjs3/adapter/ext/ext/ext-base.js src = "../ extjs3/ext-all.js"> </script> <script type = "text/javaScript" src = "array-grid.js"> </script> <style type = "text/css" style = "font-family: arial ، helvetica ، sans-serif ؛"> {background: gray ؛} </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 ()) ؛ // نموذج بيانات ثابتة للمتجر var mydata = ['3m co' ، 71.72 ، 0.02 ، 0.03 ، ' 0.28 ، 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'] 12:00 AM '] يستخدم العارض * param {object} val */function pctchange (val) {if (val> 0) {return '<span style = "green ؛" ext.data.arraystore ({الحقول: [{name: 'Company'} ، {name: 'price' ، type: 'float'} ، {name: 'change' ، type: 'float'} ، {name: 'pctchange' ، type: 'float'} ، {name: "lastChange ' // قم بتحميل Data Store.LoadData (MyData) ؛ // قم بإنشاء شبكة var grid = new ext.grid.gridpanel ({Store: Store ، الأعمدة: [{id: 'Company' ، header: 'Company' ، width: 160 ، fortable: true ، dataindex: 'company'} ، {header: 'price' ، width: 75 ، fort: true ’ العرض: 75 ، قابلة للفرز: صواب ، العارض: تغيير ، dataindex: 'تغيير'} ، {header: '٪ change' ، العرض: 75 ، قابلة للفرز: صواب ، العارض: pctchange ، dataindex: 'pctchange'} ، {header: 'last updated' ، width: 85 ، fort: ext.teal.dater. dataindex: 'lastChange'}] ، viewConfig: {forcefit: true // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- } ، Striperows: True ، AutoExpandColumn: 'Company' ، الارتفاع: 350 ، العرض: 600 ، العنوان: 'Array Grid' ، // خيارات التكوين للسلوك الحكومي الدولة: True ، StateId: 'Grid'}) ؛ // عرض الشبكة إلى div المحددة في شبكة الصفحة. render ('مثال الشبكة') ؛ }) ؛