`

ext_GridPanel2_4

 
阅读更多
/**
 * grid.getView().getRows().length 可以获取总行数,和Ext.grid.RowSelectionModel的getCount()方法不同,后者返回的是选择的总行数,而前者
 * 是表格中的所有行。
 *  *  我们常常希望在每一行添加复选框,通过复选框来选择行,这样就不需要按ctrl或shift键实现多选了,使用鼠标
 *  就能直接操作。项目中批量删除往往都做成这样,在GridPanel中我们只需要创建一个Ext.grid.CheckboxSelectionModel对象即能实现
 *  Ext.grid.CheckboxSelectionModel为GridPanel添加了一个特殊的列,列中填充的内容不是文字或HTML标记,而是一个复选框,并且只占
 *  20个像素的宽度,禁用排序和列菜单
 * 
 * 示例如下: 
 */
Ext.onReady(function(){
	//启用悬停提示
	Ext.QuickTips.init();
	
	//创建CheckboxSelectionModel对象
	var sm = new Ext.grid.CheckboxSelectionModel();
	
	//列模型
	var cm = new Ext.grid.ColumnModel([
	   new Ext.grid.RowNumberer(),
	   sm, //第二列放复选框
	  {header: "姓名", width: 80, dataIndex: "Name", tooltip: "这是您的姓名"},
	  {
		  header: "性别", 
		  width: 40, 
		  dataIndex: "Sex", 
		  align: "center",
		  renderer: function(v){
			  if(v == "男"){
				  return "<img src='../img/drop-yes.gif'>"
			  } 
			  return "<img src='../img/drop-no.gif'>"
		  }
	  },
	  {
		  header: "生日", 
		  width: 150, 
		  format: "Y-m-d", 
		  dataIndex: "Birthday",
		  renderer: Ext.util.Format.dateRenderer("Y-m-d")
	  },
	  {header: "学历", width: 80, dataIndex: "Education", align: "center"},
	  {id: "memo", header: "备注", dataIndex: "Memo"},
	  {
		  header: "操作",
		  width: 150,
		  dataIndex: "",
		  menuDisabled: true,
		  renderer: function(v){
			  return "<span style='margin-right: 10px'><a href='#'>修改</a></span><span><a href='#'>删除</a></span>";
		  }
		  
	  }
	]);
 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics