在 Extjs4.1.1a 中，我有一个以网格为内容的选项卡面板。每个网格都有一个 itemcontextmenu，其中包含网格行内项目的操作。一些网格具有“分组”的内容，当我使用右键单击鼠标 (itemcontextmenu) 菜单打开带有分组网格的选项卡时，我会停止事件并正常打开菜单。菜单操作似乎也可以正常工作，但每次我收到此错误 - Ext.fly(node) 为空- 仅在分组网格上，而不是在普通网格上。
好的：这是 cellcontextmenu（右键单击）处理程序 -
beforecellcontextmenu: function(view, cell, columnIndex, rec, tableRow, rowIndex, e){
if (top.isAdmin == "Y") {
e.stopEvent();
e.preventDefault();
var thisItemID = rec.get('TARGETITEM_SEQ_ID');
var isVoid = rec.get('VOID_ROW');
top.selectedItemID = thisItemID;
top.isVoid = isVoid;
var column = view.getHeaderByCell(cell);
var position = view.getPositionByEvent(e);
var columnIndex = position.column;
var dataIndex = column.dataIndex;
//var dataIndex = columnIndex;
top.cellIndex = dataIndex;
// Define the model for a State
Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'abbr'},
{type: 'string', name: 'name', width: 25}
]
});
// The data for all states
var yesNoPlus = [
{"abbr":"Yes","name":"Yes"},
{"abbr":"No","name":"No"},
];
// The data store holding the states; shared by each of the ComboBox examples below
var yesNoPlusStore = Ext.create('Ext.data.Store', {
model: 'State',
data: yesNoPlus
});
// Simple ComboBox using the data store
var multiComboA8 = Ext.create('Ext.form.field.ComboBox', {
hideLabel: true,
store: yesNoPlusStore,
emptyText: 'Choose...',
displayField: 'name',
valueField: 'abbr',
typeAhead: true,
width: 150,
style: 'margin: 2px',
triggerAction: 'all',
queryMode: 'local',
selectOnFocus: true,
typeAhead: true,
//iconCls: 'no-icon'
});
//console.log('cell.ITEMNAME: ', cell.ITEMNAME + ', position: ', position + ', cell: ', cell + ', cellIndex: ', cellIndex + ', dataIndex: ', dataIndex);
if (dataIndex.match(/^TARGETVALUE.*$/))
{
/*TARGETVALUE Match found */
var gridContextMenuA8 = Ext.create('Ext.menu.Menu', {
style: {
overflow: 'visible' // For the Combo popup
},
items: [
voidActionA8,
hideColumnA8,
'-', {
text: 'Value Options',
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
'<b class="menu-title">Set ALL values to...</b>',
multiComboA8
]
}
}
]
});
gridContextMenuA8.showAt(e.getXY());
} else {
/*No TARGETVALUE Match found */
var gridContextMenuA8 = Ext.create('Ext.menu.Menu', {
style: {
overflow: 'visible' // For the Combo popup
},
items: [
voidActionA8,
'-', {
text: 'Value Options',
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
'<b class="menu-title">Set ALL values to...</b>',
multiComboA8
]
}
}
]
});
gridContextMenuA8.showAt(e.getXY());
}
multiComboA8.on('select', function(combo, records, eOpts) {
var grid = Ext.widget('tablea8_targetgrid');
var selected = grid.selModel.getSelection();
Ext.Array.each(records, function(record)
{
var selectedValue = record.get('abbr');
console.log('Record value from combo: ' + selectedValue);
if (selectedValue == 'No') {
Ext.MessageBox.confirm(
'Confirm - set ALL values to "No"',
'Set ALL values for item: ' + top.selectedItemID + ' to "No", are you sure?',
function(btn) {
if (btn == 'yes') {
console.log('Asking to set all values = No');
// make all values = no code goes here
var grid = Ext.widget('tablea8_targetgrid');
console.log(grid);
var theStore = grid.getStore();
console.log(theStore);
var targetName = top.recTargetName;
var tableName = top.adminTableName;
var familyName = top.familyName;
console.log('call AJAX request to set NO');
Ext.Ajax.request({
url : 'data/set_all_no_svc.php',
params : {
recordId: top.selectedItemID,
setValue: 'No',
familyName: top.familyName,
tableName: top.ACTIVE_TABLE_NAME
},
method : 'POST',
success : function(response, theRecord2) {
var res = Ext.JSON.decode(response.responseText);
if ((res.success) === false){
Ext.Msg.alert('Error',res.message);
return;
} else {
// reload store for this tab
theStore.load({
params: {
tableName: tableName,
familyName: familyName,
targetName: targetName
}
});
// close window
//voidwin.destroy();
}
}
});
}
}
);
} else if (selectedValue == 'Yes') {
Ext.MessageBox.confirm(
'Confirm - set ALL values to "Yes"',
'Set ALL values for item: ' + top.selectedItemID + ' to "Yes", are you sure?',
function(btn) {
if (btn == 'yes') {
console.log('Asking to set all values = Yes');
// make all values = yes code goes here
var grid = Ext.widget('tablea8_targetgrid');
console.log(grid);
var theStore = grid.getStore();
console.log(theStore);
var targetName = top.recTargetName;
var tableName = top.adminTableName;
var familyName = top.familyName;
console.log('call AJAX request to set YES');
Ext.Ajax.request({
url : 'data/set_all_yes_svc.php',
params : {
recordId: top.selectedItemID,
setValue: 'Yes',
familyName: top.familyName,
tableName: top.ACTIVE_TABLE_NAME
},
method : 'POST',
success : function(response, theRecord2) {
var res = Ext.JSON.decode(response.responseText);
if ((res.success) === false){
Ext.Msg.alert('Error',res.message);
return;
} else {
// reload store for this tab
theStore.load({
params: {
tableName: tableName,
familyName: familyName,
targetName: targetName
}
});
// close window
//voidwin.destroy();
}
}
});
}
}
);
}
});
});
return false;
}
},
///////
以下是从菜单中调用的“操作”功能：
function findColumnByDataIndex(grid, dataIndex) {
console.log('dataIndex: ', dataIndex);
var selector = "gridcolumn[dataIndex=" + dataIndex + "]";
console.log('selector: ', selector);
return grid.down(selector);
};
var hideColumnA8 = Ext.create('Ext.Action', {
text: 'Hide column?',
iconCls: 'icon-hide',
handler: function(widget, event) {
var grid = Ext.ComponentQuery.query('#tablea8_targetgrid_id')[0];
var gridView = grid.getView();
var columnToHide = findColumnByDataIndex(grid, top.cellIndex);
console.log('columnToHide: ', columnToHide);
columnToHide.hide();
gridView.refresh();
}
});
////
最后是 voidrow 函数：
var voidActionA8 = Ext.create('Ext.Action', {
iconCls: 'icon-void',
text: 'Void actions',
handler: function(widget, event) {
var grid = Ext.widget('tablea8_targetgrid');
var selected = grid.selModel.getSelection();
console.log('void value: ', top.isVoid);
if ((top.isVoid == 'false') || (top.isVoid == null) || (top.isVoid == "")){
Ext.MessageBox.confirm(
'Confirm VOID this row from A8',
'Void item: ' + top.selectedItemID + ', are you sure?',
function(btn) {
if (btn == 'yes') {
console.log('Asking to VOID row');
// void row action goes here
var grid = Ext.widget('tablea8_targetgrid');
console.log(grid);
var theStore = grid.getStore();
console.log(theStore);
var targetName = top.recTargetName;
var tableName = top.adminTableName;
var familyName = top.familyName;
console.log('call AJAX request');
Ext.Ajax.request({
url : 'app/store/dbcall/target/GG/set_void_svc.php',
params : {
recordId: top.selectedItemID,
voidValue: 'true',
familyName: top.familyName,
tableName: top.ACTIVE_TABLE_NAME
},
method : 'POST',
success : function(response, theRecord2) {
var res = Ext.JSON.decode(response.responseText);
if ((res.success) === false){
Ext.Msg.alert('Error',res.message);
return;
} else {
// reload store for this tab
theStore.load({
params: {
tableName: tableName,
familyName: familyName,
targetName: targetName
}
});
// close window
//voidwin.destroy();
}
}
});
}
}
);
} else {
Ext.MessageBox.confirm(
'Confirm return ROW to normal state',
'UN-Void item: ' + top.selectedItemID + ', are you sure?',
function(btn) {
if (btn == 'yes') {
console.log('Asking to UN-VOID row');
// void row action goes here
var grid = Ext.widget('tablea8_targetgrid');
console.log(grid);
var theStore = grid.getStore();
console.log(theStore);
var targetName = top.recTargetName;
var tableName = top.adminTableName;
var familyName = top.familyName;
console.log('call AJAX request to UN-VOID row');
Ext.Ajax.request({
url : 'app/store/dbcall/target/GG/set_void_svc.php',
params : {
recordId: top.selectedItemID,
voidValue: 'false',
familyName: top.familyName,
tableName: top.ACTIVE_TABLE_NAME
},
method : 'POST',
success : function(response, theRecord2) {
var res = Ext.JSON.decode(response.responseText);
if ((res.success) === false){
Ext.Msg.alert('Error',res.message);
return;
} else {
// reload store for this tab
theStore.load({
params: {
tableName: tableName,
familyName: familyName,
targetName: targetName
}
});
// close window
//voidwin.destroy();
}
}
});
}
}
);
}
}
});