Ext.ux.plugins.CellMasker, masks cells, intended for EditorGridPanel

[illuminum]

Ext.namespace('Ext.ux', 'Ext.ux.plugins');
Ext.ux.plugins.CellMasker = function(config) {
this.init = function(grid) {
Ext.apply(grid, {
maskCell: function(row, column) {
var cell_el = Ext.get(grid.getView().getCell(row, column));
var cell_editor = grid.getColumnModel().getCellEditor(row, column);
cell_el.mask();
cell_el._mask.setSize(cell_el.dom.clientWidth + 1, cell_el.dom.clientHeight + 1);
cell_editor.on({
startedit: {
fn: function() {
cell_editor.cancelEdit();
}
}
});
},
unmaskCell: function(row, column) {
var cell_el = Ext.get(grid.getView().getCell(row, column));
var cell_editor = grid.getColumnModel().getCellEditor(row, column);
cell_el.unmask();
cell_editor.events.startedit = true; //dirty hack to remove the listeners since the removeListener method didn't seem to work
}
});
};
};


Example


var foo = new Ext.grid.EditorGridPanel({
plugins: new Ext.ux.plugins.CellMasker(),
listeners: {
rowclick: {
fn: function(grid,row,e) { grid.maskCell(row,0); } //etc
}, //etc
}
})


it's not much but maybe it saves someone a headache

[illuminum]

updated


Ext.namespace('Ext.ux', 'Ext.ux.plugins');
Ext.ux.plugins.CellMasker = function(config) {
this.init = function(grid) {
Ext.apply(grid, {
maskCell: function(row, column) {
var cell_el = Ext.get(grid.getView().getCell(row, column));
var cell_editor = grid.getColumnModel().config[column].editor;
var width = cell_el.dom.clientWidth;
var height = cell_el.dom.clientHeight + 1;
var position = cell_el.getPositioning();
Ext.apply(position, {
'top': "0px",
'z-index': '99999',
'position': 'absolute'
});
cell_el.mask();
cell_el._mask.setPositioning(position);
cell_el._mask.setSize(width,height);
cell_editor.on({
startedit: {
fn: function() {
cell_editor.cancelEdit();
}
}
});
},
unmaskCell: function(row, column) {
var cell_el = Ext.get(grid.getView().getCell(row, column));
var cell_editor = grid.getColumnModel().getCellEditor(row, column);
cell_el.unmask();
cell_editor.events.startedit = true; //dirty hack to remove the listeners since the removeListener method didn't seem to work
}
});
};
};

[illuminum]

positioning tweaked. would be ironic if ext already had this capability but I couldn't find it.


Ext.namespace('Ext.ux', 'Ext.ux.plugins');
Ext.ux.plugins.CellMasker = function(config) {
this.init = function(grid) {
Ext.apply(grid, {
maskCell: function(row, column) {
var cell_el = Ext.get(grid.getView().getCell(row, column));
var cell_editor = grid.getColumnModel().config[column].editor;
var width = cell_el.dom.clientWidth;
var height = cell_el.dom.clientHeight + 1;
var position = cell_el.getPositioning();
Ext.apply(position, {
'top': row*(height + 1) + "px",
'z-index': '99999',
'position': 'absolute'
});
cell_el.mask();
cell_el._mask.setPositioning(position);
cell_el._mask.setSize(width,height);
cell_editor.on({
startedit: {
fn: function() {
cell_editor.cancelEdit();
}
}
});
},
unmaskCell: function(row, column) {
var cell_el = Ext.get(grid.getView().getCell(row, column));
var cell_editor = grid.getColumnModel().getCellEditor(row, column);
cell_el.unmask();
cell_editor.events.startedit = true; //dirty hack to remove the listeners since the removeListener method didn't seem to work
}
});
};
};