日期:2014-05-16  浏览次数:20458 次

extjs学习笔记(六--3) grid中数据的保存,添加和删除

?我们先通过grid的getSelectionModel方法获得当前的选择模型,由于当前我们使用了行选择模型,所以返回的是RowSelectionModel的对象,然后通过该对象的hasSelection方法判断有没有行呗选中,没有的话就弹出一个对话框,如果有选中的行要被删除,弹出一个提示框让用户确定删除操作,如果确实要删除,使用RowSelectionModel对象的getSelections方法返回所有被选择行的集合,遍历此集合,从store中去掉集合中的行。看看效果图:

?

? ?? 点击“是”,所有选中的行被删除,通过firebug可以看到被删除的行在store的removed属性中保存。

??? 但是有些人可能不习惯这里所谓的行选择模型,他们可能喜欢看到在每一行的前边有一个checkbox,勾选了之后表示选择该行,extjs中的CheckboxSelectionModel类可以方便的让我们实现这一点,该类继承自RowSelectionModel,说明这只是一种特殊的行选择模型。我们具体来看看怎么进行操作。首先需要定义一个CheckboxSelectionModel的对象:var sm=new Ext.grid.CheckboxSelctionModle({checkOnly:true}),这里chckOnly:true表明只能通过checkbox来选择行,为false的话则还可以通过我们上边提到的方法来选择行。接下来需要把原来的行选择模型替换成我们新的sm,然后运行一下看看吧。我们没有看到预期中的效果,这是为什么呢?仔细想一想,确实应该是看不到什么效果,我们知道列都是在ColumnModel里边配置的,我们的CheckboxSelectionModel需要添加一列,自然也要在其中配置。那我们就加上去吧,完整的代码如下:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->??1///<reference?path="vswd-ext_2.0.2.js"?/>
??2/*
??3*作者:大笨
??4*日期:2009-10-20
??5*版本:1.0
??6*博客地址:http://yage.cnblogs.com
??7*QQ:14202190
??8*/
??9Ext.BLANK_IMAGE_URL?=?'../extjs/resources/images/default/s.gif';
?10
?11Ext.onReady(function()?{
?12????Ext.QuickTips.init();
?13