<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var column=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
//{id:'descn',header:'描述',dataIndex:'descn'}
//header(首部显示文本)，dataIndex(列对应的记录集字段)，sortable(是否排序)，renderer(列的渲染函数)，width(宽度)，format(格式化信息)
]);
var data=[
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3']
];
var store=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),//获得本地数据
//proxy:new Ext.data.ScriptTagProxy({url:'http://www.baidu.com'}),//获得远程数据
reader:new Ext.data.ArrayReader( //解析数据
{},
[
{name:'id'},
{name:'name'},
{name:'descn'}
//{name:'id',mapping:1},
//{name:'name',mapping:0},//第一列显示name
//{name:'descn',mapping:2}
]
)
});
var grid=new Ext.grid.GridPanel({
renderTo:'grid',
title:'grid',
height:300,
width:500,
enableColumnMove:false,//禁止拖放列
enableColumnResize:false,//精致改变列的宽度
stripeRows:true,//表格显示斑马线效果
viewConfig:{//设置表格列宽度
//forceFit:true //平均分配
autoSizeColumn:true //根据内容填充列的大小
},
//autoExpandColumn:'descn', //autoExpandColumn只能指定一列id,此id在cm里设置
loadMask:true,
store:store,
cm:column
});
store.load();
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
分享到：
这个小例子写的不错，值得一看。初学者必备
相关推荐
这个实例"EXTJSEXT实例GridPanel"旨在教授如何在EXTJS中创建并使用GridPanel。 GridPanel是EXTJS中的一个核心组件，它允许开发者以网格形式展示数据，支持多种功能，如排序、分页、筛选、编辑等。在EXTJS中，...
通常，这可能是由于在重新加载时，没有正确地处理GridPanel实例或者数据源，导致旧的实例被覆盖或者销毁，新的数据未能正确显示。在某些情况下，可能是由于页面刷新或者重定向导致GridPanel的DOM元素被清除，从而...
下面是一个简单的GridPanel实例代码： ```javascript Ext.application({ name: 'MyApp', launch: function () { var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], data: [ {...
例如，在ExtJS中，我们可以创建一个新的`Ext.toolbar.Toolbar`实例，并将其附加到`gridPanel`的顶部或底部。 ```javascript var toolbar = Ext.create('Ext.toolbar.Toolbar', { dock: 'top', // 或者 'bottom' ...
4. **设置JavaScript逻辑**：`GridPanel.jwc`文件可能包含了组件的JavaScript配置，用于初始化和配置ExtJS的GridPanel实例。这里通常会涉及数据源的配置、列定义、事件监听器等。 5. **资源文件**：`GridPanel....
最后创建了一个`GridPanel`实例，指定了其高度、宽度、数据源、标题、列配置和工具栏等属性。 #### 四、总结 通过以上分析可以看出，在ExtJS中利用`GridPanel`展示数据时，需要通过多个对象进行配合来完成数据的...
实例会涵盖布局管理器（如GridPanel、FlowPanel）的使用，以及自定义控件和皮肤的应用，提升程序的视觉效果。 4. **数据库访问**：Delphi提供了强大的数据库访问能力，如ADO（ActiveX Data Objects）和DBExpress...
它支持与各种数据源（如SQL数据库、XML、JSON等）进行无缝集成，使得数据显示和更新变得简单而高效。 2. 组件库：库中包含多种组件，如GridPanel（数据网格）、FormPanel（表单）、TreePanel（树形视图）、Chart...
- 然后，实例化Gridpanel时，在plugins属性中指定GroupHeaderPlugin。 - 接下来，通过定义多层的column模型来创建多表头结构。 - 最后，利用插件提供的API进行动态操作，如添加、删除或重组表头。 通过深入研究这两...
- `grid`: 引发事件的GridPanel实例。 - `rowIndex`: 用户点击的行的索引。 - `columnIndex`: 用户点击的列的索引。 - `e`: 事件对象，包含有关点击的更多信息。 3-9. 获取单元格值的步骤： - `editCell_row =...
3. 控件使用方法：EXT.NET框架提供了多种控件，如GridPanel（表格）、FormPanel（表单）、TabPanel（选项卡）、Window（弹出窗口）、TreePanel（树形视图）等。每个控件都有丰富的配置项和事件处理方法，通过这些...
创建完ColumnModel和Store后，我们可以创建GridPanel实例： ```javascript var grid = new Ext.grid.GridPanel({ store: ds, cm: cm, renderTo: Ext.getBody() }); ``` `store`属性指定了数据源，`cm`设置...
4. 实例化GridPanel：配置GridPanel的各种属性，如高度、宽度、是否可拖动列等，然后将Store和ColumnModel传递给GridPanel。 5. 渲染GridPanel：将GridPanel添加到容器中，完成渲染。 在实际应用中，GridPanel还...
每一项都是一个`Ext.grid.Column`实例。 - 示例：`columns: [{ header: '姓名', dataIndex: 'name' }, { header: '年龄', dataIndex: 'age' }]` 3. **autoExpandColumn** - 说明：此配置项指定了一个列ID，该列会...
### GridPanel 属性详解 #### 一、Ext.grid.GridPanel 组件概述 `Ext.grid.GridPanel` 是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。接...
5. **实现逻辑**：在JavaScript代码（如agrid.js或agrid2.js）中，我们需要创建GridPanel实例，配置列模型，设置模板，并处理按钮事件。如果使用了MVVM模式，那么这些逻辑可能会在ViewModel中。 6. **HTML结构**：...
在 Ext 3.0 中，可以使用 GridPanel 显示数据，结合 Store 和 Proxy 实现数据的加载和筛选。同时，可以添加过滤器（Filter）或使用远程排序（remoteSort）来处理查询逻辑。 4. **动态树形菜单**：动态树形菜单是...
在本文中，我们将深入探讨如何使用`GridPanel`在Ext JS框架中实现动态加载数据的实例。`GridPanel`是Ext JS中一个强大的组件，它用于显示和操作表格数据。动态加载数据是一种优化性能的策略，它允许在用户滚动或需要...
在实际使用中，我们可以创建一个`DescGroupingStore`实例，并将它赋值给消息列表的数据源，就像下面这样： ```javascript // 消息列表数据源 var messageStore = new DescGroupingStore({ // 配置项... }); ``` ...
在本文中，我们将深入探讨如何使用ExtJS框架根据数据库返回的JSON数据动态生成Grid列表实例。ExtJS是一款强大的JavaScript库，常用于构建富客户端应用程序，尤其是数据可视化和数据管理组件，如Grid。Grid是ExtJS中...