Extjs中通过复选框实现批量删除.docx

Extjs中通过复选框实现批量删除先来张效果图：下面看看代码，代码很简单，但是代表意义却很大：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd　　html xmlns=/1999/xhtml 　　head　meta http-equiv=Content-Type content=text/html; charset=utf-8 /　titlegrid中添加checkbox/titlelink rel=stylesheet type=text/css href=extjs/resources/css/ext-all.css/script language=javascript src=extjs/ext-all.js/scriptscript language=javascript src=Jquery/jquery-1.8.3.min.js/script　　/head　　body　　script language=javascript$(document).ready(function(){Ext.onReady(function(){var myStore=Ext.create(Ext.data.Store, { storeId:simpsonsStore, fields:[name, email, phone], data:{items:[ { name: Lisa, email:lisa@, phone:555-111-1224 }, { name: Bart, email:bart@, phone:555-222-1234 }, { name: Homer, email:home@, phone:555-222-1244 }, { name: Marge, email:marge@, phone:555-222-1254 } ]}, proxy: { type: memory, reader: { type: json, root: items } }});//插入checkbox框var sm = new Ext.selection.CheckboxModel();var mygrid=Ext.create(Ext.grid.Panel, { title: Simpsons,selModel:sm,dockedItems: [{xtype: toolbar,dock: top,items: [{xtype: button,text: 批量删除,listeners: {click: function() {var records=mygrid.getSelectionModel().getSelection();//获得要删除的元素console.log(records[0]);for(var i=0;irecords.length;i++){alert(records[i].);}myStore.remove(records);}}},-,{xtype: button,text: 导出表格,listeners: {click: function() {alert(这是导出表格);}}}]}], store: Ext.data.StoreManager.lookup(simpsonsStore), columns: [ { text: Name, dataIndex: name }, { text: Email, dataIndex: email, flex: 1 }, { text: Phone, dataIndex: phone } ], height: 200, width: 400, renderTo: Ext.getBody(),/*listeners:{itemclick:function(that,item,record,index,e,eOpt){alert(index);}}*/});});});/script　/body　　/html