Ext CheckboxSelectionModel中不能点击菜单上面全选按钮
点击id前面的框不能实现全选，查了一下对应div的Class是为x-grid3-hd-checker，源码如下：<%@pagelanguage="java"content...
点击id前面的框不能实现全选，查了一下对应div的Class是为x-grid3-hd-checker，源码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>gridPanel测试</title><jsp:include page="/cache/base.jsp"></jsp:include><script language="javascript" type="text/JavaScript" src="<%=request.getContextPath()%>/jsp/allCost/calendar.js"></script><link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /><script>Ext.onReady(function(){ var store = new Ext.data.Store({ data:[[1,"office Space","Mike Judge", "1999-02-02",1,"work sucks",19.95,1],[2,"offic2ace","Mike2udge", "1939-02-02",1,"wor2cks",19.95,1]], reader:new Ext.data.ArrayReader({id:'id'},['id','name','sex',{name:'brithday',type:'date',dataFormat:'Y-m-d'},'genre','tagline','price','avalible']) }); Ext.QuickTips.init(); var grid = new Ext.grid.GridPanel({ renderTo:Ext.getBody(), frame:true, title:'设置标题', height:400, width:700, store:store, columns:[ new Ext.grid.RowNumberer(), new Ext.grid.CheckboxSelectionModel(), {header:'id',dataIndex:'id'}, {header:'name',dataIndex:'name'}, {header:'brithday',dataIndex:'brithday',renderer:Ext.util.Format.dateRenderer('m/d/Y')}, {header:'sex',dataIndex:'sex'} ] });});
</script>
</head><body> <div id="grid"></div></body></html> 展开
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>gridPanel测试</title><jsp:include page="/cache/base.jsp"></jsp:include><script language="javascript" type="text/JavaScript" src="<%=request.getContextPath()%>/jsp/allCost/calendar.js"></script><link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /><script>Ext.onReady(function(){ var store = new Ext.data.Store({ data:[[1,"office Space","Mike Judge", "1999-02-02",1,"work sucks",19.95,1],[2,"offic2ace","Mike2udge", "1939-02-02",1,"wor2cks",19.95,1]], reader:new Ext.data.ArrayReader({id:'id'},['id','name','sex',{name:'brithday',type:'date',dataFormat:'Y-m-d'},'genre','tagline','price','avalible']) }); Ext.QuickTips.init(); var grid = new Ext.grid.GridPanel({ renderTo:Ext.getBody(), frame:true, title:'设置标题', height:400, width:700, store:store, columns:[ new Ext.grid.RowNumberer(), new Ext.grid.CheckboxSelectionModel(), {header:'id',dataIndex:'id'}, {header:'name',dataIndex:'name'}, {header:'brithday',dataIndex:'brithday',renderer:Ext.util.Format.dateRenderer('m/d/Y')}, {header:'sex',dataIndex:'sex'} ] });});
</script>
</head><body> <div id="grid"></div></body></html> 展开
2个回答
展开全部
你用的是ext的什么版本啊，以下ext3.2.1的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext3.2.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext3.2.1/resources/css/xtheme-blue.css" />
<script language="javascript" type="text/javascript" src="ext3.2.1/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="ext3.2.1/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="ext3.2.1/ext-lang-zh_CN.js"></script>
<script language="javascript" type="text/javascript" src="ext3.2.1/ext-chinese-sort.js"></script>
<script language="javascript" type="text/javascript" src="ext3.2.1/PagingMemoryProxy.js"></script>
<style type="text/css" media="all">
.red-row {background-color:#F5C0C0 !important ;}
.yellow-row {background-color:#FBF8BF !important ;}
.green-row {background-color:#99CC99 !important ;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
Ext.onReady(function(){
function renderDescn(value,cellmeta,record,rowIndex,columnIndex,store){
var str = "<INPUT TYPE='button' value='查看详细信息' onclick='alert(\""+
"这个单元格的值是："+value+"\\n"+
"这个单元格的配置是：{cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}\\n"+
"这个单元格对应行的record是:"+record+",一行的数据都在里边\\n"+
"这是第"+rowIndex+"行\\n"+
"这是第"+columnIndex+"列\\n"+
"这个表格对应的数据源在这里："+store+",可以用。"+
"\")'>";
return str;
}
//--------------------------------------------------------
var data=[
['1','name1','male','descn1','啊','2010-05-16T15:30:04','#FBF8BF'],
['2','name2','female','descn2','啵','2010-05-16T15:30:04','#99CC99'],
['3','name3','male','descn3','呲','2010-05-16T15:30:04','#FBF8BF'],
['4','name4','female','descn4','嘚','2010-05-16T15:30:04','#F5C0C0'],
['5','name5','male','descn5','咯','2010-05-16T15:30:04','#FBF8BF']
];
//------------------------------
var store = new Ext.data.Store({
proxy: new Ext.data.PagingMemoryProxy(data), //MemoryProxy(data) 手动排序
reader: new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'sex'},
{name:'descn'},
{name:'chinese'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'},
{name:'color'}
]),
sortInto:{field:"name",direction:"ASC"}
});
store.load();
//-------------------------------
var sm = new Ext.grid.CheckboxSelectionModel();
//{handleMouseDown:Ext.emptyFn} 去选多少行时，在选一行，把其它的去掉。
//{singleSelect:true} 去掉Ctrl和Shift键选多行，只会高亮选最后一行
//-------------------------------
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //自动行号
sm,
{header:'编号',dataIndex:'id',sortable:true}, //sortable 排序
{header:'名称',dataIndex:'name',sortable:true},
{header:'性别',dataIndex:'sex',sortable:true,renderer:renderSex},
{header:'描述',dataIndex:'descn',sortable:true}, //,renderer:renderDescn 单元格里的信息
{header:'中文',dataIndex:'chinese',sortable:true},
{header:'日期',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日 H:i:s'),sortable:true,width:180},
{header:'颜色',dataIndex:'color',sortable:true,renderer:renderMotif}
]);
//------------------------------
function renderSex(value){
if(value=='male'){
return "<span style='color:red;font-weight:bold;'>红男</span><img src='img/png-0623.ico' width=15 />";
}else{
return "<span style='color:green;font-weight:bold;'>绿女</span><img src='img/png-0622.ico' width=15 />";
}
}
//---------------------------
function renderMotif(data,cell,record,rowIndex,columnIndex,store){
var value = record.get('color');
cell.attr="style=background-color:"+value;
return data;
}
//--------------
var grid = new Ext.grid.GridPanel({
renderTo:'grid', //渲染位置
width:650, //宽度
height:180, //手动高度
autoHeight:true, //自动高度 优先级大于手动高度
stripeRows:true, //斑马线效果
loadMask:true, //加载loading效果
store:store, //数据源
cm:cm, //表头，最上面那行
sm:sm, //复选框
bbar: new Ext.PagingToolbar({
pageSize:10, //每页几条
store:store, //数据源
displayInfo:true //是否显示数据信息
}),
viewConfig:{
forceFit:true, //智能分配列宽
enableRowBody:true
// getRowClass : function(record,rowIndex,p,ds){
// var cls='white-row';
// switch(record.data.color){
// case '#FBF8BF':cls='yellow-row';break;
// case '#99CC99':cls='green-row';break;
// case '#F5C0C0':cls='red-row';break;
// }
// return cls;
// }
}
});
//-------------------------------
Ext.get('remove').on('click',function(){
store.remove(store.getAt(1)); //删除行，getAt(?) 表示为那行，行是从0开始的。
grid.view.refresh(); //删除后，刷新grid视图
});
//----------------------------------
grid.on('click',function(){ //单击一行，弹出对话框提示
var selections = grid.getSelectionModel().getSelections();
for(var i=0;i<selections.length;i++){
var record = selections[i];
grid.getView().getRow(i).style.backgroundColor = "yellow";
Ext.Msg.alert('提示',record.get("id")+","+record.get("name")+","+record.get("descn"));
}
});
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id="grid"></div>
<INPUT id="remove" TYPE="button" value="删除第二行">
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext3.2.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext3.2.1/resources/css/xtheme-blue.css" />
<script language="javascript" type="text/javascript" src="ext3.2.1/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="ext3.2.1/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="ext3.2.1/ext-lang-zh_CN.js"></script>
<script language="javascript" type="text/javascript" src="ext3.2.1/ext-chinese-sort.js"></script>
<script language="javascript" type="text/javascript" src="ext3.2.1/PagingMemoryProxy.js"></script>
<style type="text/css" media="all">
.red-row {background-color:#F5C0C0 !important ;}
.yellow-row {background-color:#FBF8BF !important ;}
.green-row {background-color:#99CC99 !important ;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
Ext.onReady(function(){
function renderDescn(value,cellmeta,record,rowIndex,columnIndex,store){
var str = "<INPUT TYPE='button' value='查看详细信息' onclick='alert(\""+
"这个单元格的值是："+value+"\\n"+
"这个单元格的配置是：{cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}\\n"+
"这个单元格对应行的record是:"+record+",一行的数据都在里边\\n"+
"这是第"+rowIndex+"行\\n"+
"这是第"+columnIndex+"列\\n"+
"这个表格对应的数据源在这里："+store+",可以用。"+
"\")'>";
return str;
}
//--------------------------------------------------------
var data=[
['1','name1','male','descn1','啊','2010-05-16T15:30:04','#FBF8BF'],
['2','name2','female','descn2','啵','2010-05-16T15:30:04','#99CC99'],
['3','name3','male','descn3','呲','2010-05-16T15:30:04','#FBF8BF'],
['4','name4','female','descn4','嘚','2010-05-16T15:30:04','#F5C0C0'],
['5','name5','male','descn5','咯','2010-05-16T15:30:04','#FBF8BF']
];
//------------------------------
var store = new Ext.data.Store({
proxy: new Ext.data.PagingMemoryProxy(data), //MemoryProxy(data) 手动排序
reader: new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'sex'},
{name:'descn'},
{name:'chinese'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'},
{name:'color'}
]),
sortInto:{field:"name",direction:"ASC"}
});
store.load();
//-------------------------------
var sm = new Ext.grid.CheckboxSelectionModel();
//{handleMouseDown:Ext.emptyFn} 去选多少行时，在选一行，把其它的去掉。
//{singleSelect:true} 去掉Ctrl和Shift键选多行，只会高亮选最后一行
//-------------------------------
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //自动行号
sm,
{header:'编号',dataIndex:'id',sortable:true}, //sortable 排序
{header:'名称',dataIndex:'name',sortable:true},
{header:'性别',dataIndex:'sex',sortable:true,renderer:renderSex},
{header:'描述',dataIndex:'descn',sortable:true}, //,renderer:renderDescn 单元格里的信息
{header:'中文',dataIndex:'chinese',sortable:true},
{header:'日期',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日 H:i:s'),sortable:true,width:180},
{header:'颜色',dataIndex:'color',sortable:true,renderer:renderMotif}
]);
//------------------------------
function renderSex(value){
if(value=='male'){
return "<span style='color:red;font-weight:bold;'>红男</span><img src='img/png-0623.ico' width=15 />";
}else{
return "<span style='color:green;font-weight:bold;'>绿女</span><img src='img/png-0622.ico' width=15 />";
}
}
//---------------------------
function renderMotif(data,cell,record,rowIndex,columnIndex,store){
var value = record.get('color');
cell.attr="style=background-color:"+value;
return data;
}
//--------------
var grid = new Ext.grid.GridPanel({
renderTo:'grid', //渲染位置
width:650, //宽度
height:180, //手动高度
autoHeight:true, //自动高度 优先级大于手动高度
stripeRows:true, //斑马线效果
loadMask:true, //加载loading效果
store:store, //数据源
cm:cm, //表头，最上面那行
sm:sm, //复选框
bbar: new Ext.PagingToolbar({
pageSize:10, //每页几条
store:store, //数据源
displayInfo:true //是否显示数据信息
}),
viewConfig:{
forceFit:true, //智能分配列宽
enableRowBody:true
// getRowClass : function(record,rowIndex,p,ds){
// var cls='white-row';
// switch(record.data.color){
// case '#FBF8BF':cls='yellow-row';break;
// case '#99CC99':cls='green-row';break;
// case '#F5C0C0':cls='red-row';break;
// }
// return cls;
// }
}
});
//-------------------------------
Ext.get('remove').on('click',function(){
store.remove(store.getAt(1)); //删除行，getAt(?) 表示为那行，行是从0开始的。
grid.view.refresh(); //删除后，刷新grid视图
});
//----------------------------------
grid.on('click',function(){ //单击一行，弹出对话框提示
var selections = grid.getSelectionModel().getSelections();
for(var i=0;i<selections.length;i++){
var record = selections[i];
grid.getView().getRow(i).style.backgroundColor = "yellow";
Ext.Msg.alert('提示',record.get("id")+","+record.get("name")+","+record.get("descn"));
}
});
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id="grid"></div>
<INPUT id="remove" TYPE="button" value="删除第二行">
</BODY>
</HTML>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
mode : "SINGLE"/"SIMPLE"/"MULTI"
你设置允许多选了吗？
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true
}),
selType: 'checkboxmodel',
看看这个 http://docs.sencha.com/extjs/4.2.2/#!/example/build/KitchenSink/ext-theme-neptune/#array-grid
你设置允许多选了吗？
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true
}),
selType: 'checkboxmodel',
看看这个 http://docs.sencha.com/extjs/4.2.2/#!/example/build/KitchenSink/ext-theme-neptune/#array-grid
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
