PDA

View Full Version : Having trouble using Element.mask() method correctly



illuminum
28 Jun 2008, 2:44 PM
In a nutshell: The mask is successful to the degree that I can see the mask object within FireBug and isMasked() returns true but I can't actually see the mask itself. As is evident from the pasted code below, I even tried hacking the css but with no luck--I still can't see it. If someone knows how to use this method, has a link, or can pinpoint the problem, can give you me a heads up? As always, I'll post the solution if I figure it out in the meantime.



rowclick: {
fn: function(grid,row,e){
//console.dir(colModel);
var myColumns = colModel.getColumnsBy(function(column) {
return true;
});
myColumns.each(function(column) {
colModel.setRenderer(column.id, function(v,p,r,row,col,ds) {
//console.log('v',v,'p',p,'r',r,'row',row,'col',col,'ds',ds);
return "<div class='pim-client-row'>"+v+"</div>";
});
});
view.refresh();
var target = e.getTarget('.pim-client-row');
if (target) {
target = Ext.get(target);
var mask = target.mask();
console.log('is masked?',target.isMasked());
console.log(mask);
mask.applyStyles({
'background': 'green',
'z-index': '9999999',
'width': '500px',
'height': '500px',
'position': 'absolute',
'top': '0px',
'right': '0px',
'display': 'block',
'visibility':'visible'
});
}
//console.log('colModel',colModel,'myColumns',myColumns);
//console.log('rowclick',arguments);
}
},

illuminum
28 Jun 2008, 3:23 PM
rowclick: {
fn: function(grid,row,e){
var cell_el = Ext.get(view.getCell(row,0));
console.log(cell_el);
cell_el.mask('foo','caca-mask');
...


this works but not quite as expected. apparently the mask() method won't handle masking cells, regardless of whether the el object its masking uses a correct td dom node. it opts instead to mask the entire grid. thus, I'll check out the source code, figure out how masking works, and make my own mask prototype.

illuminum
28 Jun 2008, 4:35 PM
so here's my solution:



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