`

GridPanel简单实例

 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="ext/resources/css/ext-all.css" type="text/css"
	rel="stylesheet" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
	Ext.onReady(function() {
		var data = [ [ 1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com' ],
				[ 2, 'jfox', 'huihoo', 'www.huihoo.org' ],
				[ 3, 'jdon', 'jdon', 'www.jdon.com' ],
				[ 4, 'springside', 'springside', 'www.springside.org.cn' ] ];
		var store = new Ext.data.SimpleStore({
			data : data,
			fields : [ "id", "name", "organization", "homepage" ]
		});
		var grid = new Ext.grid.GridPanel({
			renderTo : "hello",
			title : "中国Java开源产品及团队",
			height : 150,
			width : 600,
			columns : [ {//表格列模式的配置数组,可自动创建ColumnModel列模式
				header : "项目名称",//表头
				dataIndex : "name"//store中的record或fields中的字段,没有或是没有对应,就不会显示数据
			}, {
				header : "开发团队",
				dataIndex : "organization"
			}, {
				header : "网址",
				dataIndex : "homepage"
			} ],
			store : store,//表格的数据集
			autoExpandColumn : 2
		//自动填满表格未用空间的列,参数为列id,该id不能为0
		});
	});
</script>
</head>
<body>
	<div id="hello"></div>
</body>
</html>

 

分享到:
评论

相关推荐

    ExtJS 表格面板GridPanel完整例子

    下面是一个简单的GridPanel实例代码: ```javascript Ext.application({ name: 'MyApp', launch: function () { var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], data: [ {...

    EXTJSEXT实例GridPanel.

    这个实例"EXTJSEXT实例GridPanel"旨在教授如何在EXTJS中创建并使用GridPanel。 GridPanel是EXTJS中的一个核心组件,它允许开发者以网格形式展示数据,支持多种功能,如排序、分页、筛选、编辑等。在EXTJS中,...

    extjs gridpanel例子和简单应用

    本文将通过一个具体的例子来详细介绍ExtJS中`GridPanel`的基本用法以及如何利用`HttpProxy`、`JsonReader`、`Store`等关键对象来构建动态数据展示界面。 #### 二、核心概念介绍 1. **HttpProxy** - `HttpProxy`是...

    Ext的gridpanel控件二次加载问题

    在这个例子中,`initGrid`函数会检查`myGrid`是否已经存在,如果不存在则创建一个新的GridPanel实例。如果`myGrid`已存在,我们就直接更新它的数据源,避免了重新创建GridPanel导致的问题。 尽管这种解决方案在很多...

    ExtJs GridPanel简单的增删改实现代码

    ExtJs GridPanel是ExtJs框架中用于展示和管理表格数据的一个重要组件,它提供了丰富的API接口,方便开发者实现复杂的数据操作。...根据以上步骤,即可在ExtJs GridPanel中实现简单的数据增删改功能。

    Extjs4 GridPanel 的几种样式使用介绍

    首先,我们来看一个简单的GridPanel示例。在这个例子中,我们创建了一个包含三列的表格,每列分别绑定到数据源中的'id'、'name'和'gender'字段。通过`dataIndex`属性,我们可以将列头与数据模型的字段关联起来,实现...

    将RowExpander的template换成Gridpanel

    在本文中,我们将深入探讨如何将RowExpander的模板替换为Gridpanel,这是一个常见的需求,特别是在使用Ext JS或Sencha Touch等JavaScript框架时。RowExpander组件通常用于数据网格,它允许用户通过单击行来展开更多...

    ExtJS 2.0 GridPanel基本表格简明教程

    GridPanel的xtype为grid,这意味着开发者可以在使用Ext JS的类管理器时,通过简短的'grid'来创建一个新的GridPanel实例。 在ExtJS中使用GridPanel首先需要定义列信息和数据存储器Store。列信息由类Ext.grid....

    简单的EXT加载数据的例子

    在这个例子中,“简单的EXT加载数据的例子”可能是指如何动态地从服务器获取数据并加载到Treepanel中。 1. **创建Treepanel** 创建Treepanel时,我们需要指定一些基本配置,如ID、标题、宽度、高度等。此外,还...

    简单ext jsp数据库操作例子

    在"简单ext jsp数据库操作例子"这个项目中,我们将深入探讨如何利用EXT JSP进行数据库的读写操作,以及在学生管理系统中的具体应用。 首先,我们需要了解EXT JSP的基础结构。EXT JSP通常包含以下几个主要部分:EXT ...

    Extaspnet的中文实例

    它支持与各种数据源(如SQL数据库、XML、JSON等)进行无缝集成,使得数据显示和更新变得简单而高效。 2. 组件库:库中包含多种组件,如GridPanel(数据网格)、FormPanel(表单)、TreePanel(树形视图)、Chart...

    Ext3.2源码、API、及Demo(grid例子)

    它提供了便捷的异步数据通信方式,使得与服务器端的数据交换变得简单。EXT3.2的DataProxy和DataReader/Writer则负责数据的序列化和反序列化,实现了JSON、XML等多种数据格式的处理。 总的来说,EXT3.2是一个强大的...

    ext简单例子

    GridPanel是EXT中的核心组件,用于显示和操作表格数据。它可以动态加载数据,支持排序、分页、过滤、编辑等功能。EXT的网格还支持行选择、列隐藏、自定义列渲染和事件监听。 4. **日期框(DateField)**: ...

    JavaScript的Ext JS框架中的GridPanel组件使用指南

    1. 最简单的Grid Panel Grid Panel是展现数据的关键组件,可以实现数据的显示、排序、分组和编辑。在创建Grid Panel时,必须配置两个核心部分:Model和Store。Model定义了Grid Panel中显示的数据字段,类似于数据库...

    delphi实例大全

    实例会涵盖布局管理器(如GridPanel、FlowPanel)的使用,以及自定义控件和皮肤的应用,提升程序的视觉效果。 4. **数据库访问**:Delphi提供了强大的数据库访问能力,如ADO(ActiveX Data Objects)和DBExpress...

    EXT js 实例 学生成绩管理

    在"EXT js 实例 学生成绩管理"这个项目中,我们将探讨如何使用 EXT JS 来实现一个简单的学生成绩管理系统。 首先,我们来看一下系统的主要组成部分: 1. **数据模型(Model)**:在 EXT JS 中,数据模型用于定义和...

    JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色

    以下是一个简单的示例,展示了如何在GridPanel中实现单元格编辑: ```javascript { xtype: 'gridpanel', region: 'north', height: 150, title: 'My Grid Panel', store: 'A_Test_Store', columns: [ { ...

    ExtJs+Aspose.Cells+Asp.net导入Excel实例

    本实例是关于如何使用ExtJs、Aspose.Cells和Asp.net技术实现一个简单的Excel导入、导出和分页功能的Demo。以下是对这些技术及其在项目中的应用进行的详细解释。 **ExtJs** ExtJs是一个强大的JavaScript库,用于构建...

Global site tag (gtag.js) - Google Analytics