PDA

View Full Version : grouping grid, itemcontextmenu error: Ext.fly(node) is null



PaulyWolly
11 Dec 2012, 8:40 AM
I have a tab panel with grids as content. Each grid has an itemcontextmenu, with actions for items within the grid rows. Some of the grids have content that is grouped, and when I open a tab with a grouping grid with a right-click mouse (itemcontextmenu) menu, I stop events and open the menu fine. Menu actions also appear to work fine, but every time i get this error - Ext.fly(node) is null - only on the grouped grids, and not on the normal grids.

Here is the 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;
}
},


...and here are the functions called from the menu:


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();

}
});


.. and here is the last function called:


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();
}
}
});
}
}
);
}
}
});

mitchellsimoens
13 Dec 2012, 7:05 AM
What Ext JS 4.x.x version are you using?

PaulyWolly
22 Dec 2012, 8:27 AM
I am using version 4.1.1a