PDA

View Full Version : x-grid-dirty-cell on all types of fields



dunks80
12 Sep 2007, 1:40 PM
I really like the little red corner on the editable grid so i added it to all types of form fields. You guys should think about making that a standard feature (that can be turned off of course)...

It's pretty much exactly like the error icon stuff...

addition to Ext.form.Field


...
initEvents : function(){
this.el.on(Ext.isIE ? "keydown" : "keypress", this.fireKey, this);
this.el.on("focus", this.onFocus, this);
this.el.on("blur", this.onBlur, this);
this.on("valid",this.markDirty,this);
this.originalValue = this.getValue();
},
...
markDirty : function(){

if(this.isDirty()){
if(!this.dirtyIcon){
var elp = this.el.findParent('.x-form-element', 5, true);
this.dirtyIcon = elp.createChild({cls:'x-grid-dirty-cell'});
this.dirtyIcon.setSize(10,10);
}
this.alignDirtyIcon();
this.dirtyIcon.show();
this.on('resize', this.alignDirtyIcon, this);
}
else{

if(this.dirtyIcon){
this.dirtyIcon.hide();
}

}

},

alignDirtyIcon : function(){
this.dirtyIcon.alignTo(this.el, 'tl', [0, 0]);
},

...

dunks80
13 Sep 2007, 2:07 PM
I just realized that this could cause some positioning problems with other elements so i added the one line to position the red corner absolutely instead of relatively



...
initEvents : function(){
this.el.on(Ext.isIE ? "keydown" : "keypress", this.fireKey, this);
this.el.on("focus", this.onFocus, this);
this.el.on("blur", this.onBlur, this);
this.on("valid",this.markDirty,this);
this.originalValue = this.getValue();
},
...
markDirty : function(){

if(this.isDirty()){
if(!this.dirtyIcon){
var elp = this.el.findParent('.x-form-element', 5, true);
this.dirtyIcon = elp.createChild({cls:'x-grid-dirty-cell'});
this.dirtyIcon.setSize(10,10);
this.dirtyIcon.setPositioning("position: absolute");
}
this.alignDirtyIcon();
this.dirtyIcon.show();
this.on('resize', this.alignDirtyIcon, this);
}
else{

if(this.dirtyIcon){
this.dirtyIcon.hide();
}

}

},

alignDirtyIcon : function(){
this.dirtyIcon.alignTo(this.el, 'tl', [0, 0]);
},

...

arnold
13 Dec 2007, 2:40 AM
Many thanks for your example.



Ext.override(Ext.form.Field, {
initEvents : function(){
this.el.on(Ext.isIE ? "keydown" : "keypress", this.fireKey, this);
this.el.on("focus", this.onFocus, this);
this.el.on("blur", this.onBlur, this);
this.on("valid",this.markDirty,this);
// reference to original value for reset
this.originalValue = this.getValue();
},
markDirty : function(){

if(this.isDirty()){
if(!this.dirtyIcon){
var elp = this.el.findParent('.x-form-element', 5, true);
this.dirtyIcon = elp.createChild({cls:'x-grid3-dirty-cell'});
this.dirtyIcon.setSize(10,10);
this.dirtyIcon.setPositioning("position: absolute");
}
this.alignDirtyIcon();
this.dirtyIcon.show();
this.on('resize', this.alignDirtyIcon, this);
}
else{
if(this.dirtyIcon){
this.dirtyIcon.hide();
}

}

},
alignDirtyIcon : function(){
this.dirtyIcon.alignTo(this.el, 'tl', [0, 0]);
}
});

genio
22 Jan 2010, 5:02 AM
Made alteration to use this in EXT 3.0

[CODE]
Ext.override(Ext.form.Field, {
initEvents: function () {
this.el.on(Ext.isIE ?