第二章-ExtJs-grid

ExtJS Grid 组件实战

最新推荐文章于 2024-12-02 13:52:57 发布

原创最新推荐文章于 2024-12-02 13:52:57 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extJs #extJs基础 #extJs面向对象 #extjs oop #oop

FY_Extjs_sir 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍如何使用ExtJS框架创建Grid组件展示数据。通过设置列模型、定义字段类型及配置数据集，实现了一个基本的Grid面板，并展示了如何加载数据进行展示。

grid

本章任务

1.grid

/**
 * 页面加载
 */
Ext.onReady(function() {

			/**
			 * 列模型
			 */
			var _cm = new Ext.grid.ColumnModel({
						columns : [{
									header : '用户名',
									dataIndex : 'userName'
								}, {
									header : "密码",
									dataIndex : 'userPass'
								}]
					});

			/**
			 * 字段类型
			 */
			var _fields = new Ext.data.Record.create([{
						name : 'userName',
						type : 'string'
					}, {
						name : 'userPass',
						type : 'string'
					}]);
			/**
			 * 数据集
			 */
			var _store = new Ext.data.JsonStore({
						url : './ch02.jsp',
						root : 'users',
						fields : _fields
					});

			/**
			 * 显示数据
			 */
			var _grid = new Ext.grid.GridPanel({

				width : 300,//宽
				height : 300,//高
				renderTo : Ext.getBody(),
				cm : _cm,//列模型
				store : _store//数据集
				});

			/**
			 * 加载数据
			 * 
			 */
			_store.load({})
		});

本章目标

1. 理解Grid