<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>ExtJS</title><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /><script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script><script type="text/javascript" src="Extjs/source/locale/ext-lang-zh_CN.js"></script><style type="text/css"> html,body{ margin:0px; height:100%; } #content{ height:100%; width:100%; } </style> <script type="text/javascript"> var grid; var cm; var ds; //性別詳細 function renderSex(value) { if (value == 'male') { return "<span style='color:red;font-weight:bold;'>男</span>"; } else { return "<span style='color:green;font-weight:bold;'>女</span>"; } } //描述詳細 function renderDescn(value, cellmeta, record, rowIndex, columnIndex,store){ var str = (rowIndex+1)+"行|"+(columnIndex+1)+"列"; return str; } //頁面完成後載入 Ext.onReady(function() { //對列的定義 cm = new Ext.grid.ColumnModel([ {header:'<font color="blue">編號</font>',width: Ext.get("content").getWidth()/4,sortable:true,dataIndex:'id'},//sortable 可排序，具體體現在有排序選項卡 {header:'<font color="blue">性別</font>',width: Ext.get("content").getWidth()/4,dataIndex:'sex',renderer:renderSex}, {header:'<font color="blue">名稱</font>',width: Ext.get("content").getWidth()/4,dataIndex:'name'}, {header:'<font color="blue">描述</font>',width: Ext.get("content").getWidth()/4,dataIndex:'descn',renderer:renderDescn} ]); //二維數組的資料，Json資料結構 var data = [ ['1','male','name1','descn1'], ['2','female','name2','descn2'], ['3','male','name3','descn3'], ['4','female','name4','descn4'], ['5','male','name5','descn5'] ]; //解釋二維數組 //proxy告訴我們從哪裡獲得資料，reader告訴我們如何解析這個資料 ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), //Ext.data.ArrayReader專門用來解析數組，綁定與cm的dataIndex相對應 reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]) }); //載入dataStore ds.load(); //建立grid對象 grid = new Ext.grid.GridPanel({ renderTo: 'content',//渲染到具體div //獲得div的寬和高，以便計算並自動調整比例，用來控制grid的各個列寬和整個grid的高度 width: Ext.get("content").getWidth(), height: Ext.get("content").getHeight(), //綁定ds和cm store: ds, cm: cm }); }); //自動適應瀏覽器視窗調整 window.onresize=function(){ grid.destroy(); cm = new Ext.grid.ColumnModel([ //對列進行比例分配，以便在視窗放大和縮小時候進行相對比例計算，以便自動調整grid的列寬和高度 {header:'<font color="blue">編號</font>',width: Ext.get("content").getWidth()/4,sortable:true,dataIndex:'id'}, {header:'<font color="blue">性別</font>',width: Ext.get("content").getWidth()/4,dataIndex:'sex',renderer:renderSex}, {header:'<font color="blue">名稱</font>',width: Ext.get("content").getWidth()/4,dataIndex:'name'}, {header:'<font color="blue">描述</font>',width: Ext.get("content").getWidth()/4,dataIndex:'descn',renderer:renderDescn} ]); grid = new Ext.grid.GridPanel({ width: Ext.get("content").getWidth(), height: Ext.get("content").getHeight(), store: ds, cm: cm }); grid.render(Ext.get("content")); }; </script> </head><body><div id="content"> </div> </body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
