11Extjs 高级组件 grid

最新推荐文章于 2019-05-01 14:57:00 发布

happy_marvin

最新推荐文章于 2019-05-01 14:57:00 发布

阅读量474

点赞数

分类专栏： extjs笔记

本文链接：https://blog.csdn.net/happy_marvin/article/details/31766359

版权

extjs笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1.组件说明：

每一个继承都是一层抽象一层实现

2.本节课需要讲解的类

注意后面就是用到的panel

3.老师的教学提纲：

4.注意里面每一个都是代表着一个类

可以看文档去了解这个类是什么。

column这里面的属性来自：

5.dataindex就是对应的store里面的。

6.对于一个表格grid必须要有自己的数据集store。否则就会报错。就是说没有数据是不行的。

7.关于storeID：就是说只要是写了storeID的话，那么他就会被storemanager进行管理了。

代码中：

8.关于store里面的根节点的介绍：

root就是传递过来数据的根节点。

下面就是根节点 topics 就是传递过来的数据在哪个字段里

9.调用storemanager的lookup 方法就可以获取相应的store了。

10store数据的的自动加载:

11.注意上面的一个错误，下面的是正确的

就是说，引用的是一个类，并不是一个对象。一个类的引用要加上' ' 但是一个对象的引用没有必要加上‘’。

12.下面就是对panel进行相应的添加边框和空白进行补充

13.上方添加按钮用到的属性

14.注意xtype和 ext.create 是等效的。

15.再重申一遍，添加对象（用xtype）后面就是跟着这个对象的属性。

16.上面是tbar下面是bbar

17.添加侧边栏

18看一个组件的别名方法是直接看源码，因为在文档里面他没有直接写出来。

效果

19.extjs 3和4的区别：

例子：比如一个容器里面控件想要找到父控件。下面的方法就是得到了一个父类然后在得到父类的store就好了

注意第一句里面是父类的xtype类型。

下面的另一种方法也是达到了相同的效果。就是直接得到他的父类。由于下面的父类是两层。第一层是bar 然后接着就是panel

这里的o指的是button

20.下面进行删除的操作。

具体看下面的代码（这就是一个panel上的按钮的操作罢了）

21.关于更新的操作，现在4.0中用的是plugins的操作。

下面是文档

下面就是代码（为panel添加编辑的插件）

最后的数字表示单机几下出现编辑插件。

上面的编辑插件不光光是将插件导入，而且还需要做的就是这个插件是要被panel里面的某个列引用的。因此需要给某个列配置需要引用哪一个编辑的插件就是了。

相应的引用代码是用field

只要是写好了代码，那么就会出现下面的效果了

22. 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="../../../../extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../../../extjs4/examples/shared/example.css" />
<link rel="stylesheet" type="text/css" href="../../../../permitToWork/common/css/common.css" />
<script type="text/javascript" src="../../../../extjs4/bootstrap.js"></script>
<script type="text/javascript" src="../../../../extjs4/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>

mode.js

//User类
Ext.define("user",{
	extend:"Ext.data.Model",
	fields:[
		{name:'name',type:'string',sortable:true},
		{name:'age',type:'int',sortable:true},
		{name:'email',type:'string',sortable:true}
	]
});
//User对象
var user = Ext.create("user",{});
Ext.create("Ext.data.Store",{
	model:'user',
	storeId:'s_user',
	proxy:{
		type:'ajax',
		url:'/extjs/extjs!getUserList.action',
		reader:{
			type:'json',
			root:'topics'
		},
		writer:{
			type:'json'
		}
	},
	autoLoad:true
});

01gridDemo.js

(function(){
	Ext.onReady(function(){
		Ext.QuickTips.init();
		//穿件表格时候要 用表格的面板
		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:"age",dataIndex:'age',width:100},
				{text:"email",dataIndex:'email',width:350,
					field:{
						xtype:'textfield',
						allowBlank:false
					}
				}
			],
			tbar :[
				{xtype:'button',text:'添加',iconCls:'table_add'},
				{xtype:'button',text:'删除',iconCls:'table_remove',
					handler:function(o){
						//var gird = o.findParentByType("gridpanel");
						var gird = o.ownerCt.ownerCt;
						var data = gird.getSelectionModel().getSelection();
						if(data.length == 0){
							Ext.Msg.alert("提示","您最少要选择一条数据");
						}else{
							//1.先得到ID的数据(name)
							var st = gird.getStore();
							var ids = [];
							Ext.Array.each(data,function(record){
								ids.push(record.get('name'));
							})
							//2.后台操作(delet)
							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.create("Ext.grid.plugin.CellEditing",{
					clicksToEdit : 1
				})
			],
			selType:'checkboxmodel',//设定选择模式
			multiSelect:true,//运行多选
			renderTo :'gridDemo',
			store : Ext.data.StoreManager.lookup('s_user')
		});
	});
})();

last.all