PDA

View Full Version : [2.0] Grid Editor that maintain original field symbol



FxMan
17 Jan 2008, 7:12 AM
Hi everyone,
i've write an extension of the GridEditor that mantain the symbol (sec, mt, day, %, ... o what you want) during edit.
Due to my poor english i prefer to attach a screenshot and the code:


// Create user extensions namespace (Ext.fx)
Ext.namespace('Ext.fx');

Ext.fx.SpecialEditor = function(field1, config) {
Ext.fx.SpecialEditor.superclass.constructor.call(this, field1, config);
} // end of Ext.fx.SpecialEditor constructor


Ext.extend(Ext.fx.SpecialEditor, Ext.grid.GridEditor, {
onRender : function(ct, position){
Ext.fx.SpecialEditor.superclass.onRender.call(this, ct, position);
var newspan = Ext.DomHelper.insertAfter(this.field.el.dom.id, {tag:'div', html: this.simbol}, true);
if (Ext.isIE){
$(newspan.id).setStyle({cssFloat: 'left', 'background-color':'white', height : '19px', 'padding-top' : '3px', 'margin-top' : '-2px', 'padding-left' : '7px', 'padding-right' : '7px'});
var containerEl = $(this.field.el.dom.id);
$(containerEl.parentNode.id).setStyle({'padding-top':'2px'});
containerEl.setStyle({cssFloat: 'left'});
}else{
$(newspan.id).setStyle({cssFloat: 'left', 'background-color':'white', height : '17px', 'padding-top' : '3px', 'padding-left' : '5px', 'padding-right' : '5px'});
$(this.field.el.dom.id).setStyle({cssFloat: 'left'});
}
},
setSize : function(w, h){
Ext.fx.SpecialEditor.superclass.setSize.call(this, (w-this.delta), h);
}
}); // end of extend Ext.fx.SpecialEditor

There is a lot of rendering difference between IE and Firefox adjusted adding new css rules using prototype function. Trying to set this in a separate class (like newspan.addClass("some_css_class")) not work well.:((

Hope is useful for someone.
Appreciate any improvement.