ExtJs——GridPanel！！！

Ext.onReady(function(){ var sm1 = new Ext.grid.CheckboxSelectionModel({ //复选框 //singleSelect:true //单选 }); var cm1 = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), //显示序号 sm1, //复选框 {header:'姓名',width:80,dataIndex:'name',tooltip:'这是你的名字！'}, {header:'性别',width:40,dataIndex:'sex',align:'center',renderer:function(v){ if(v == '男'){ return "<img src="image/boy.gif" mce_src="image/boy.gif" />"; }else if(v == '女'){ return "<img src="image/gril.gif" mce_src="image/gril.gif" />"; }else{ return v; } }}, {header:'生日',width:100,dataIndex:'birthday',renderer:Ext.util.Format.dateRenderer('Y-m-d')}, {header:'学历',width:80,dataIndex:'education',align:'center'}, {header:'备注',dataIndex:'memo',id:'memo_id'}, {header:'操作',width:150,dataIndex:'',menuDisabled:true,renderer:function(v){ return "<span style="margin-right:10px" mce_style="margin-right:10px"><a href="#" mce_href="#">修改</a></span><span><a href="#" mce_href="#">删除</a></span>"; }} ]); var record1 = new Ext.data.Record.create([ {name:'name',type:'string',mapping:'name'}, {name:'sex',type:'string',mapping:'sex'}, {name:'birthday',type:'string',mapping:'birthday'}, {name:'education',type:'string',mapping:'education'}, {name:'memo',type:'string',mapping:'memo'} ]); var store1 = new Ext.data.Store({ proxy:new Ext.data.MemoryProxy([ {name:'张胜鸿',sex:'神',birthday:Date.parseDate('1986-10-02','Y-m-d'),education:'圣斗士',memo:'一个帅哥'}, {name:'张三',sex:'男',birthday:Date.parseDate('1986-10-32','Y-m-d'),education:'博士',memo:'无备注'}, {name:'李四',sex:'女',birthday:Date.parseDate('1986-10-22','Y-m-d'),education:'勇士',memo:'一个美女'}, {name:'王五',sex:'妖',birthday:Date.parseDate('1986-10-12','Y-m-d'),education:'烈士',memo:'无备注'} ]), reader:new Ext.data.JsonReader({},record1) //autoLoad:true //即时加载数据 }); store1.load(); var grid1 = new Ext.grid.GridPanel({ renderTo:Ext.getBody(), title:'中国公民', width:600, autoHeight:true, style:'padding:10px', cm:cm1, sm:sm1, store:store1, autoExpandColumn:'memo_id', //自动伸缩，占满剩余区域。 buttonAlign:'center', buttons:[{ text:'第一行', handler:function(){ grid1.getSelectionModel().selectFirstRow(); } },{ text:'上一行', handler:function(){ var rsm = grid1.getSelectionModel(); if(!rsm.hasPrevious()){ Ext.Msg.alert('提示','已到达第一行！'); }else{ rsm.selectPrevious(); } } },{ text:'下一行', handler:function(){ var rsm = grid1.getSelectionModel(); if(!rsm.hasNext()){ Ext.Msg.alert('提示','已到达最后一行！'); }else{ rsm.selectNext(); } } },{ text:'最后一行', handler:function(){ grid1.getSelectionModel().selectLastRow(); } },{ text:'全选', handler:function(){ grid1.getSelectionModel().selectAll(); } },{ text:'全不选', handler:function(){ var rsm = grid1.getSelectionModel(); rsm.deselectRange(0,grid1.getView().getRows().length-1); } },{ text:'反选', handler:function(){ var rsm = grid1.getSelectionModel(); for(var i = grid1.getView().getRows().length-1;i >= 0;i--){ if(rsm.isSelected(i)){ rsm.deselectRow(i); }else{ rsm.selectRow(i,true); } } } }], tbar:new Ext.Toolbar({ buttons:[{ text:'获取选择行姓名', handler:function(){ var r = ''; for(var i=0;i<grid1.getView().getRows().length;i++){ if(grid1.getSelectionModel().isSelected(i)){ r += grid1.getStore().getAt(i).get('name') + '<br/>'; } } Ext.Msg.alert('选择','您选择的数据有：<br/>' + r); } },'-',{ text:'添加新行到行首', handler:function(){ var r1 = new record1({ name:'诸葛亮', sex:'神', birthday:Date.parseDate('2011-11-11','Y-m-d'), education:'烈士', memo:'new' }); grid1.getStore().insert(0,r1); grid1.getView().refresh(); } },'-',{ text:'添加新行到行尾', handler:function(){ var r1 = new record1({ name:'司马懿', sex:'神', birthday:Date.parseDate('2011-11-11','Y-m-d'), education:'烈士', memo:'new' }); grid1.getStore().add(r1); grid1.getView().refresh(); } },'-',{ text:'删除选定行', handler:function(){ var rsm = grid1.getSelectionModel(); var view = grid1.getView(); var store = grid1.getStore(); for(var i=view.getRows().length-1;i>=0;i--){ if(rsm.isSelected(i)){ store.remove(store.getAt(i)); } } view.refresh(); } },'-',{ text:'删除所有行', handler:function(){ grid1.getStore().removeAll(); grid1.getView().refresh(); } }] }) }); });