当左侧为树形菜单,右侧为TabPanel时,点击左侧的对应的树形菜单,右侧则会加载对应的Tab。如在加载Tab的Extjs代码中包含有id属性配置的控件时,并且在右侧Tab中已经有该菜单对应的Tab,当再次点击左侧对应树形菜单加载Tab时,就有可能会报id冲突错误。这是因为当再次点击左侧菜单时,Tab对应的Extjs代码会再次运行一次,再创建一个Tab。id属性它是一个全局性的,在当前整个Extjs代码是有效的,并且id值必须是唯一的。所有当再次加载时,就会报该错误。要解决这种错误的方法是,通过控件中的itemId属性配置来代替id,这样就可以解决了。itemId是一个局部的,它在哪个控件定义的,作用就在那个控件范围内,通过它就可解决id值冲突问题。如果要获取该控件,通过getComponent(itemId)方法就可以获取。
示例代码:
创建一个列表,包含一个itemId的删除按钮。原来使用id,报id冲突错误。
//创建列表
var depclassGrid = Ext.create('Ext.grid.GridPanel', {
store: depclassStore,
loadMask: { msg: '数据加载中,请稍候...' },
selModel: sm,
stripeRows: true,
columns: [
{ xtype: 'rownumberer' },
{ text: '班级编号', dataIndex: 'classId', width: 100, align: 'center' },
],
tbar: Ext.create('Ext.toolbar.Toolbar', {
style: 'background:#DFEAF2',
itemId: 'toolbar1',//定义itemId
items: [
'->',
{
text: '新增班级',
cls: 'button',
icon: 'icon/add.png',
handler: function () {
AddDepclass(null, depclassGrid);
}
},
'-',
{
text: '删除选中行',
cls: 'button',
itemId: 'depclassDelete',//定义itemId
icon: 'icon/delete.png',
disabled: true,
handler: function () {
var item = depclassGrid.getSelectionModel().getSelection();
if (item.length == 0) {
Ext.Msg.alert('温馨提示', '请选择要删除的记录...');
return;
}
var classId = "";
for (var i = 0; i < item.length; i++) {
classId += item[i].data['classId'] + ",";
}
Ext.Msg.confirm('温馨提示', '确定要删除吗?', function (btn) {
if (btn == 'yes') {
Ext.Ajax.request({
url: 'aspx/depclass/Delete.aspx',
waitMsg: '数据处理中,请稍候...',
success: function (response) {
var json = Ext.decode(response.responseText);
if (json.success) {
Ext.Msg.alert("系统提示", json.msg, function () {
depclassGrid.getStore().reload();
});
} else {
Ext.Msg.alert("系统提示", json.msg);
}
},
failure: function () {
Ext.Msg.alert('系统提示', '删除失败');
depclassGrid.getStore().reload();
},
params: { classId: classId }
});
}
});
}
}
]
})
});
通过itemId获取删除
var sm = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
select: function (model, record, index) {
depclassGrid.getComponent('toolbar1').getComponent('depclassDelete').enable();//获取删除按钮,并启用
},
selectionchange: function (model, selected) {
var records = model.getSelection();
if (records.length <= 0) {
depclassGrid.getComponent('toolbar1').getComponent('depclassDelete').disable();
}
}
}
});