很强大的grid总算登场啦,先来热热身,看下最简单的应用,详细就看注释吧,写的很全面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ page pageEncoding="UTF-8"%> <html> <body> <script type="text/javascript"> //页面加载完前执行 Ext.onReady(function() { //根据元素id获得页面元素 var page = Ext.get("Page"); //定义json类型对象 var myData = [ ['Apple',29.89,0.24,0.81,'9/1 12:00am'], ['Ext',83.81,0.28,0.34,'9/12 12:00am'], ['Google',71.72,0.02,0.03,'10/1 12:00am'], ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'], ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am'] ]; //创建 data store var ds = new Ext.data.ArrayStore({ //fields可以与具体列绑定,并且定义类型以及格式 fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ] }); //data store开始加载,当然也可以在grid渲染后加载,具体体现在出现loading条 ds.loadData(myData); //创建列模型,具体显示列头名称,列样式,能否排序(默认是页面排序,后面有讲到后台排序),dataIndex用来绑定data store具体数据 var columnModel = new Ext.grid.ColumnModel([ {header: "Company", width: 120, sortable: true, dataIndex: 'company'}, {header: "Price", width: 90, sortable: true, dataIndex: 'price'}, {header: "Change", width: 90, sortable: true, dataIndex: 'change'}, {header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'}, {header: "Last Updated", width: 120, sortable: true, dataIndex: 'lastChange', renderer: Ext.util.Format.dateRenderer('m/d/Y')} ]); //创建grid对象并且绑定到Page的div层上(众多属性参看api) var grid = new Ext.grid.GridPanel({renderTo : "Page",height : 300, store : ds, cm: columnModel}); //grid.getSelectionModel().selectFirstRow(); }); </script> <div id="Page"></div> </body> </html>
很强大的grid总算登场啦,先来热热身,看下最简单的应用,详细就看注释吧,写的很全面 =-=: