Extjs-grid元件
阿新 • • 發佈：2018-11-10
1.
grid元件
<!DOCTYPE html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script> <script type="text/javascript"> Ext.define('StudentDataModel',{ extend:'Ext.data.Model', //區別[]和{} fields:[ {name:'name',mapping:'name'}, {name:'age',mapping:'age'}, {name:'marks',mapping:'marks'} ] }); Ext.onReady(function(){ //建立store資料 var myData=[ //這裡的值是雙引號 {name:"Asha",age:"16",marks:"40"}, {name:"Anand",age:"18",marks:"50"}, {name:"Mikle",age:"19",marks:"65"}, {name:"Andy",age:"20",marks:"70"} ]; //先建立store再建立grid var gridStore=Ext.create('Ext.data.Store',{ //model要用單引號括起來 model:'StudentDataModel', //store的取值用data屬性，值不用引號 data:myData }); //建立Grid Ext.create('Ext.grid.Panel',{ id:'gridId', //store屬性不需要引號 store:gridStore, stripeRows:true, title:'Student Grid Title', //renderTo 把grid放到哪個div下 renderTo:'gridDiv', width:600, //collapsible表示該grid是否可以摺疊 collapsible : true, // property to collapse grid enableColumnMove :true, // property which alllows column to move to different position by dragging that column. //enableColumnResize是否可以通過選中列的邊框從而進行拖拉從而變換列的大小 enableColumnResize:false, // property which allows to resize column run time. columns:[ { //header是雙引號,header是該列的顯示名稱 header:"Student name", id:'name', dataIndex:'name', //flex在容器中所佔的寬度 flex:3, //sortable該列是否可以按從小到大或者從大到小排列 sortable:true, //hideable是否可以通過該列的下拉框選項，從而隱藏該列 hideable:true }, { header:"Age", // id:'age', dataIndex:'age', sortable:true, hideable:false, flex:5 }, { header:"Marks", // id:'marks', dataIndex:'marks', flex:5, sortable:true, renderer:function(value,metadata, record, rowIndex, colIndex, store){ var metadata=metadata; var record=record; var rowIndex=rowIndex; var colIndex=colIndex; var store=store; if (value>=60) { return "pass"; }else{ return "no pass"; } } } ] }); }); </script> </head> <body> <div id="gridDiv"></div> </body> </html>
執行效果；
原文：https://www.w3cschool.cn/extjs/grid.html