Grid
Grid是Ext中人们最想先睹为快的和最为流行Widgets之一。好，让我们看看怎么轻松地创建一个Grid并运行。
Ext.onReady(function() {
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,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var myReader = new Ext.data.ArrayReader({},[
{name: 'company'},
{name: 'price',type: 'float'},
{name: 'change',
{name: 'pctChange',
{name: 'lastChange',type: 'date',dateFormat: 'n/j h:ia'}
]
);
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: "Company",width: 120,sortable: true,dataIndex: 'company'},
{header: "Price",width: 90,dataIndex: 'price'},
{header: "Change",dataIndex: 'change'},
{header: "% Change",dataIndex: 'pctChange'},
{header: "Last Updated",
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
viewConfig: {forceFit: true},
renderTo: 'content',
title: 'My First Grid',
width: 500,
frame: true
});//grid
grid.getSelectionModel().selectFirstRow();
});
这看上去很复杂，但实际上加起来，只有四行代码（不包含测试数据的代码）。
- 第一行创建数组并作为数据源。实际案例中，你很可能从数据库、或者WebService那里得到动态的数据。
- 接着，我们创建并加载data store， data store将会告诉Ext的底层库接手处理和格式化这些数据。不同的数据类型须在类Reader中指明。
- 接着，我们创建一个Grid的组件，传入各种的配置值，有：
- 新的data store,配置好测试数据和reader
- 列模型column model定义了 列columns的配置
- 其他的选择指定了Grid所需的功能
- 最后，通过SelectionModel告诉Grid高亮显示第一行。
如果一切顺利，完成之后你会看到像这样的：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
