Ext.onReady(function(){
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
// manually load local data
store.loadData(myData);
// create the Grid
var sm = new Ext.grid.CheckboxSelectionModel();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
sm,
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
// render the grid to the specified div in the page
grid.render('grid-example');
})
分享到:
相关推荐
标题中的"ext3 gridRowEditor本地数据简单demo"是指基于ExtJS 3.x版本的一个示例,它展示了如何使用GridPanel的RowEditor组件来编辑表格数据。ExtJS是一个流行的JavaScript库,用于构建富客户端应用程序,而ext3是其...
本文将深入探讨"EXT Grid数据绑定"这一主题,包括数据查找和如何将查找结果重新填充到Grid中。 EXT Grid的核心是其数据模型(Data Model)和视图(View)。数据模型负责存储和管理数据,而视图则负责渲染这些数据到...
在EXT JS这个强大的JavaScript框架中,Grid组件是用于展示大量结构化数据的核心组件。"ext grid 显示数据"这一主题,是深入理解EXT JS开发的关键知识点之一,特别是在处理表格和列表展示时。在"LearningExtJS 第五...
### Ext中grid多行数据全部删除 在前端开发过程中,我们经常会遇到需要处理表格数据的情况。其中,ExtJS是一个非常强大的JavaScript框架,它提供了一系列工具和组件来帮助开发者快速构建复杂的用户界面。本文将详细...
EXT2.0 GRID 示例是一个基于EXT JavaScript库的高级数据展示和操作组件的实例。EXT是一个强大的前端开发框架,尤其在创建交互式Web应用程序方面表现出色。EXT2.0是EXT库的一个早期版本,它提供了丰富的用户界面组件...
通过这个库,我们可以创建一个新的工作簿对象,并添加工作表,将Grid数据填充到工作表中。 3. **内容生成**:使用SheetJS,你可以创建一个工作簿对象,然后使用`XLSX.utils.json_to_sheet`函数将JavaScript对象数组...
Ext4 Grid打印是基于Ext JS库的一个功能,用于在网页中展示数据的表格组件。Ext4 Grid提供了丰富的功能,包括数据排序、筛选、分页以及列的动态调整等。在这个场景下,"grid打印"指的是将Grid中的数据导出或者可视化...
在JavaServer Pages (JSP) 开发中,EXT 是一个流行的JavaScript 框架,它提供了丰富的用户界面组件,包括Grid(数据网格)和Table。EXT 提供了一种优雅的方式来展示和操作数据,尤其适用于创建交互式的Web应用程序,...
2. **获取EXT Grid数据**:EXT Grid的数据通常存储在store中,我们需要遍历store中的所有记录,获取需要导出的字段值。这些记录可以是当前页面的数据,也可以是所有页面的数据,取决于用户的需求。 3. **转换为...
2. **EXT Grid数据准备**:在导出前,我们需要获取EXT Grid中的数据。EXT Grid的数据源通常是Store对象,我们可以遍历Store中的所有记录,将其转换为适合XLSX.js处理的格式。 3. **自定义导出按钮**:EXT Grid通常...
在Ext JS这个强大的JavaScript框架中,`Grid`是用于展示数据的一种常见组件,它提供了灵活的数据展示和操作功能。在实际开发中,我们有时需要在Grid的单元格(Cell)中添加更丰富的交互元素,例如输入框、下拉选择器...
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
`Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。对于初学者或者希望深入理解`GridPanel`特性的Web开发人员来说,掌握其...
Ext Grid是Ext JS库中的一个核心组件,用于展示和操作数据集。在Web应用程序中,它经常被用来作为数据表格,允许用户查看、排序、筛选和编辑数据。在这个"Ext Grid简单实例"中,我们将探讨如何从Web服务提取数据并将...
Ext grid panel 是Ext JS框架中的一个组件,用于展示表格形式的数据。它提供了丰富的功能,如分页、排序、筛选等,并且可以通过配置实现自定义样式和交互行为。对于实时数据的展示,保持滚动条位置不变是一个关键...
在"EXT-GRID+JSON简单应用"中,我们将探讨如何使用EXT-JS的Grid组件与JSON数据源进行集成,以创建一个动态的数据表格。 EXT-JS的Grid组件允许开发者通过定义列模型、存储器和视图来展示数据。在JSON方面,它是一种...
或者在用户确认操作后,使用`Ext.Array`的方法处理数据。 总结,`Ext.Array` 提供了强大的数组操作功能,极大地增强了EXTJS应用中的数据处理能力。而EXTJS的对话框组件则为用户提供交互式的反馈,两者结合能够构建...
Grid组件在EXT JS中扮演着数据表格的角色,可以展示多列数据,并且支持排序、分页、筛选、编辑等功能。它的灵活性在于能够根据需求定制各种复杂的行为,如自定义列渲染、行编辑、拖放排序等。以下是一些关于EXT JS ...
EXTJS Grid是一款强大的数据展示组件,常用于构建复杂的Web应用程序中的数据网格。它允许用户以交互方式查看、编辑和管理大量结构化数据。在EXTJS Grid中,数据通常以行和列的形式呈现,支持排序、分页、过滤、拖放...
在EXT JS框架中,"ext grid tree 应用"是一个常见的功能组合,它结合了Grid面板和Tree面板的优势,用于展示复杂的数据结构。Grid通常用于显示二维表格数据,而Tree则用于展示层次化的数据。在这个例子中,开发者通过...