PDA

View Full Version : Custom inherited TriggerField does not write back values to a GridPanel



plessmann
20 Jul 2010, 10:42 AM
I have created an simple LongtextField extending the Ext.form.TriggerField.

The LongText field should display loooooong textlines not in a small grid cell but in a sepparate Ext.Window.

Well, my problem is, that my LongtextField does not work within the GridPanel correctly, because the value is not witten back to the GridPanel cell! I was looking for 3hours now and I can't find the "bug". Any Ideas? :-?

When I try the field without the grid (lets say just in another Panel), it works as it should!
I attached the full code for you to test. I hope you can help me?

thanks for you help in advance,
Phil




Ext.form.LongtextField = Ext.extend(Ext.form.TriggerField, {

triggerClass : 'x-form-longtext-trigger',
title: 'Bemerkung',
editable: false,
lazyInit : true,

defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},

initComponent : function(){
Ext.form.LongtextField.superclass.initComponent.call(this);
this.addEvents(
'select'
);
},

initEvents: function() {
Ext.form.LongtextField.superclass.initEvents.call(this);
this.keyNav = new Ext.KeyNav(this.el, {
"down": function(e) {
this.onTriggerClick();
},
scope: this,
forceKeyDown: true
});
},

getErrors: function(value) {
var errors = Ext.form.LongtextField.superclass.getErrors.apply(this, arguments);

return errors;
},

getValue : function(){
return Ext.form.LongtextField.superclass.getValue.call(this) || "";
},

setValue : function(val){
return Ext.form.LongtextField.superclass.setValue.call(this, val);
},

onDestroy : function(){
Ext.destroy(this.popupWin);
Ext.form.LongtextField.superclass.onDestroy.call(this);
},

onSelect: function(event, button){
this.setValue(d);
this.fireEvent('select', this, d);
},

beforeBlur: function(){
this.setValue(this.getRawValue());
},

onTriggerClick : function() {
if(this.disabled){
return;
}

this.popupWin = new Ext.Window({
renderTo: Ext.getBody(),
width:500,
height:300,
closeAction:'hide',
plain: true,
layout: 'fit',
title: this.title,

items: [ new Ext.form.TextArea({
id: 'textfieldValue',
value: this.getValue(),
border: false
}) ],

buttons: [{
text: 'Übernehmen',
handler: function() {
this.focus(false, 60);
this.setValue(this.popupWin.items.get('textfieldValue').getValue());
this.fireEvent('select', this, this.getValue());
this.popupWin.hide();
},
scope: this
},{
text: 'Abbruch',
handler: function() {
this.fireEvent('select', this, this.getValue());
this.popupWin.hide();
},
scope: this
}]
}).show(this);
}

});

Ext.reg('longtextfield', Ext.form.LongtextField);

BitPoet
20 Jul 2010, 12:02 PM
The problem is with the blurring. A TriggerField listens for mouseclicks outside of the component itself to blur, and the blurring in turn ends the grid's editing action. So the solution should be to

- assign a property that indicates whether the editing window is open at the moment, e.g.


Ext.form.LongtextField = Ext.extend(Ext.form.TriggerField, {
windowOpen : false,
triggerClass : 'x-form-longtext-trigger',

- Set the property to true once you open the editor window

onTriggerClick : function() {
if(this.disabled){
return;
}
this.windowOpen = true;
...
- reset the windowOpen value and fire the blur event when you close the window


this.popupWin = new Ext.Window({
listeners: {
'hide': {
fn: function() {
this.windowOpen = false;
this.fireEvent('blur');
},
scope: this
}
},
...
- and finally override the validateBlur method of the TriggerField class


validateBlur : function() {
return ! this.windowOpen;
},

plessmann
20 Jul 2010, 1:12 PM
Thats it!!!
Thanks a lot! now it works great :)