在extjs中,用GridPanel来显示数据,需要用到Store来处理,详细就不多说了,因为基本上看了下在的代码应该
知道如何去处理数据了,如果看得一头雾水,建议还是先回去看看ext的基础说明吧。
var store = new Ext.data.SimpleStore({
// fields的取值应与下面columns的dataIndex值对应,注意大小写
fields: ['company', 'price', 'change', 'pctChange', 'lastChange'],
data : [
['AL', '0.1', 'The Heart of Dixie', '6', new Date()],
['AK', '22222', 'The Land of the Midnight Sun', '7', new Date()],
['IN', '109.1', 'The Hospitality State', '8', new Date() ]
]
});
var grid = new Ext.grid.GridPanel({
store: store, // 数据
columns: [ // 列名, dataIndex应对应store中的fields, 指明显示某个field的数据
{header: "Company", width: 200, sortable: true, dataIndex: 'company'},
{header: "Price", width: 120, sortable: true, renderer:
Ext.util.Format.usMoney, dataIndex: 'price'},
// 货币格式
{header: "Change", width: 120, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 135, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
// 日期格式
],
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width:600,
height:300,
frame:true,
collapsed: false, // 默认是展开状态
collapsible: true, // 自动出现 expand/collapse toggle button, 上下收展的按纽
titleCollapse: true, //collapsible: true,点击title也可以收展
hideCollapseTool: true, //隐藏上下或左右按纽
// 如果是放到 viewPort中,region: 'west',那么就变成了左右收展的按纽, region: 'north'又变成了上下收展的按纽
title:'test title', // 表格标题
header: false, // 不创建标题栏
headerAsText: false, // 如果有标题栏, 隐藏标题栏
iconCls:'icon-grid', // pressed:true, 设置按纽状态为按下的状态,
tbar:[{ pressed:true, text:'刷新', handler:function(){alert('q');} }], //表格的工具栏
tools:[ // 与title同一栏的按纽
{id:"save"},
{id:"help", handler:function(){Ext.Msg.alert('help','please help me!');}},
{id:"close"}
// 按纽取值如下, close,minimize ,maximize ,restore ,gear ,pin ,unpin
// toggle, down ,refresh ,minus ,plus ,help ,search ,save ,right ,left ,up
]
});
grid.render('grid');
grid.addListener( 'rowclick', function( g, rowIdx, eobj ) { // 对grid的行添加点击事件
var rd = store.getAt(rowIdx); // 返回是的一个 Record. Store包含的就是Record[]
//alert(rd.get('id'));
//substore.removeAll(); // 清除另一个store,
//substore.addSorted(rd); // 给另一个store在原来的排序方式下添加一个record
});