最近开始使用Extjs进行开发, 会遇到一些各种各样的问题, 在此希望记录下来, 给和我一样新入手人一点提示.
问题: 在ColumnModel下添加复选框, 添加完成之后, 此复选框只能单选, 没办法同时选中多个选项.
前期代码如下:
this.colModel = new Ext.grid.ColumnModel({
columns : [this.rowNum
,
new Ext.grid.CheckboxSelectionModel(),
{
dataIndex : 'ID',
singleSelect : false
}
}
this.aGrid = new Ext.grid.EditorGridPanel(
{
id : 'aGrid',
title : 'Category Definition',
region : 'center',
height : 250,
autoScroll : true,
store : this.aStore,
selModel : new Ext.grid.CheckboxSelectionModel({
singleSelect : false}),
colModel : this.aGrid,
view : this.gridView,
stripeRows : true,
enableDragDrop : true,
SelectionMemory : 'Disabled',
ddGroup : 'aGridDDGroup',
.............................................
}
经过多方查证, 都显示只要将属性"singleSelect : false", 就意味着允许多选 , 但实际上还不可以. 尚不能确定是由于Extjs版本的问题引起的, 还是多控件组合使用导致的相互作用. 最后发现可以使用"checkOnly: true" 来解决这个问题.
代码如下:
selModel : new Ext.grid.CheckboxSelectionModel({ singleSelect : false,
checkOnly: true}),
var selectionModel = this.assetGrid.getSelectionModel();
操作完成之后, 清除已经选中的items:
selectionModel.clearSelections()
获取被选中的多个item的对象:
var str = '';
var selectRows = categorySelectionModel.getSelections();
for(var i=0;i <selectRows.length;i++){
str = str + selectRows[i].get('ID') + ',';
}
alert(str);
对于checkboxSelectionModel,不再显示提示框:
listeners : {
'cellclick' : this.openNewApp,
scope : this,
render : function(grid) {
var view = grid.getView();
grid.tip = new Ext.ToolTip(
{
target : view.mainBody,
delegate : '.x-grid3-cell',
trackMouse : true,
renderTo : document.body,
anchor : 'top',
listeners : {
beforeshow : function updateTipBody(tip) {
var rowIndex = view
.findRowIndex(tip.triggerElement);
var cellIndex = view
.findCellIndex(tip.triggerElement);
if(cellIndex == 0 ){
tip.body.dom.setDisplayed(false)
}else if (cellIndex < 5 || cellIndex > 7) {
var cell = view.getCell(
rowIndex, cellIndex);
tip.body.dom.innerHTML = cell.innerHTML;
} else {
tip.body.dom.innerHTML = 'xxxxxxx';
}
}
}
});
},
我的checkbox放在第一列, 所以cellIdex是0, 当它为0时,设置setDisplayed为false,可以让这一列没有提示框.
tip.body.dom.setDisplayed(false)
