extjs4.0中 grid的详细应用

最新推荐文章于 2014-04-18 17:07:13 发布

fanpeii

最新推荐文章于 2014-04-18 17:07:13 发布

阅读量5.1k

点赞数

分类专栏： HTML 网页制作 Ext 技术文章标签： extjs stylesheet button function user delete

本文链接：https://blog.csdn.net/fanpeii/article/details/7097015

版权

HTML 网页制作同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

Ext 技术

22 篇文章 0 订阅

订阅专栏

代码中有很多详细的例子可以参考

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="button.css" />
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="mode.js"></script>
<script type="text/javascript" src="01gridDemo.js"></script>
</head>
<body>
<div id="fanpei">123</div>
</body>
</html>

button.css

.icon-add{
    background-image:url(icons/fam/image_add.png) !important;
}
.icon-delete {
    background-image:url(icons/fam/delete.gif) !important;
}
.icon-refresh {
    background-image:url(icons/fam/table_refresh.png) !important;
}
.icon-look {
    background-image:url(icons/fam/application_go.png) !important;
}

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',//一旦设定了storeId就可以用store.manager进行管理
	proxy:{
		type:'ajax',
		url:'/exjs/extjs!getUserList.action',
		reader:{
			type:'json',
			root:'topics'
		},
		writer:{
			type:'json'	
		}
	},
	autoLoad:true,
})

01gridDemo.js

(function(){
	Ext.onReady(function(){
		Ext.QuickTips.init();	
		//创建一个grid的高级组件会用到grid的面板
		var grid=Ext.create("Ext.grid.Panel",{
			title:'我的窗口',//标题
			frame:true,//面板渲染
			forceFit:true,//列的自动填充
			width:600,
			height:280,
			columns:[//列模式的集合
				{text:'Name',//模型标题
				dataIndex:'name'//对应的数据模型
				},
				{text:'Age',dataIndex:'age'},
				{text:'Email',dataIndex:'email',
					field:{//输入框式的编辑模式 必须加插件
						xtype:'textfield',
						allowBlank:false
					}
				}
			],
			tbar:[
				{xtype:'button',text:'添加',iconCls:'icon-add'},
				{xtype:'button',text:'删除',iconCls:'icon-delete',handler:button_delete},
				{xtype:'button',text:'修改',iconCls:'icon-refresh'},
				{xtype:'button',text:'查看',iconCls:'icon-look'},
			],
			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:Ext.get('fanpei'),
			store:Ext.data.StoreManager.lookup('s_user'),	
		});
	})
}

)();

function button_delete(o)//删除的按钮事件
{
	alert(o.text);//获取该组件的text名称
	//下面是第一种获得grid的方法
	//var grid=o.findParentByType("gridpanel");//找到父组件的对象，获取对象来操纵这个对象
	//下面是第二种获取grid的方法
	var grid=o.ownerCt.ownerCt;//因为这个按钮的第一个父组件是工具条，工具条的父组件才是grid
	//alert(grid.getStore().getCount());//获取这个父组件中的对象的store中数据的个数
	//假如我要删除某几行数据。那么我先要获取我选择了哪些数据。
	var data=grid.getSelectionModel().getSelection();
	if (data.lenth==0)
	{
		alert(您至少要选择一条数据);	
	}else{
		//1.得到ID的数组（name）
		var st=grid.getStore();
		var ids=[];
		Ext.Array.each(data,function(re){
			ids.push(re.get('name'));							 
		})
		//2.后台操作（delete）
		Ext.Ajax.request({
			url:'/extjs/extjs!deleteData',
			params:{ids:ids.join(",")},
			method:'POST',
			timeout:2000,
			success:function(response,opts){
				Ext.Array.each(data,function(record){
					st.remove(record);							 
				})	
			}
		})
		//3.前段操作DOM进行删除（Extjs）
	};
	
};

fanpeii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs4.0中 grid的详细应用

代码中有很多详细的例子可以参考123button.css.icon-add{ background-image:url(icons/fam/image_add.png) !important;}.icon-delete { background-image:url(icons/fam/delete.gif) !importa
复制链接

扫一扫

专栏目录