ExtJS4.2学习(11)——高级组件之Grid

最新推荐文章于 2025-04-02 03:41:16 发布

低调de草原狼

最新推荐文章于 2025-04-02 03:41:16 发布

阅读量7.6k

点赞数 1

分类专栏： ExtJS ExtJS学习文章标签： extjs4

本文链接：https://blog.youkuaiyun.com/sunyingyuan/article/details/11020813

版权

本文详细介绍了ExtJS4.2中Grid组件的搭建、MVC架构重构以及各种特性，包括列模式、选择模式、Grid特性如行体、摘要和分组，还涉及可编辑插件、表格拖拽和分页组件的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大纲：

1.首先，搭建起来一个最基础的Grid组件；

2.其次，利用前边MVC架构将代码重构；

3.再者，介绍下Grid的一些特性。

一、搭建基础的Grid组件

在文章的开始，我们首先简单的搭建一个Grid项目，感受下Grid的样子和其吸引众人的魅力所在。

架构如图：

代码分别如下，注释写的比较清楚，按照以上搭建可以正常运行：

grid.html代码如下：

<!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>EXTJS4.0</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/bootstrap.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="mode.js"></script>
<script type="text/javascript" src="01gridDemo.js"></script>
</head>
<body>
<div id="gridDemo"></div>
</body>
</html>

gridDemo.js代码如下：

(function(){
	Ext.onReady(function(){
		//初始化
		Ext.QuickTips.init();//类似于title，用于显示ext:qtip设定的值
		//创建表格时候要 用表格的面板
		var grid = Ext.create("Ext.grid.Panel",{
			title : 'Grid Demo',//标题
			frame : true,//面板渲染，使表格更加饱满
			//forceFit : true,//自动填充panel空白处
			width : 600,
			height: 280,
			columns : [ //列模式
				{text:"Name",dataIndex:'name',width:100},//text列名，表头信息
				{text:"age",dataIndex:'age',width:100},//dataIndex从store/model中找到相应的记录
				{text:"email",dataIndex:'email',width:350,
					//重构列模式
					field:{
						xtype:'textfield',//编辑方式
						allowBlank:false//
					}
				}
			],
			tbar :[
				{xtype:'button',text:'添加',iconCls:'table_add'},//这个地方iconCls是一些图标组件，大家可以自行添加
				{xtype:'button',text:'删除',iconCls:'table_remove',
					handler:function(o){
						//var gird = o.findParentByType("gridpanel");
						var gird = o.ownerCt.ownerCt;//ownerCt是拥有这个组件的组件
						var data = gird.getSelectionModel().getSelection();
						//getSelectionModel得到Ext.selection.Model对象，得到选择模式
						//Ext.selection.Model中有getSelection方法得到选中对象的数组
						if(data.length == 0){
							Ext.Msg.alert("提示","您最少要选择一条数据");
						}else{
							//1.先得到ID的数据(name)
							var st = gird.getStore();//得到store
							var ids = [];
							Ext.Array.each(data,function(record){
								ids.push(record.get('name'));
							})
							//2.后台操作(delete)
							Ext.Ajax.request({
								url:'/extjs/extjs!deleteData.action',
								params:{ids:ids.join(",")},
								method:'POST',
								timeout:2000,//延迟显示
								success:function(response,opts){
									Ext.Array.each(data,function(record){
										st.remove(record);
									})
								}
							})
							//3.前端操作DOM进行删除(ExtJs)
						}
					}
				  },
				{xtype:'button',text:'修改',iconCls:'table_edit'},
				{xtype:'button',text:'查看',iconCls:'table_comm'}
			],
			dockedItems :[{//控制组件在什么位置，随便定位
				xtype:'pagingtoolbar',//分页组件
				store:Ext.data.StoreManager.lookup('s_user'),//分页也跟数据、挂钩
				dock:'bottom',//位置
				displayInfo:true
			}],
			plugins:[//Ext 4.0用的是 插件的形式来和form表单配合使用的

最低0.47元/天解锁文章