PDA

View Full Version : Custum Form Field Extension - Doesn't disappear when clicked off in grid



yerajeff
2 Sep 2010, 10:45 AM
I wrote a custom form field extension comprised of a textfield and combobox. Everything is working great, except when I implement the field inside of a grid. When I double click the cell, my custom fields appears just fine; however, when I click off onto another part of the screen, the custom field does not disappear. The only way to get it to disappear and update my DB is by double clicking on another cell to edit.

Here is the code for my extension:


Ext.ux.sendIntervalField = Ext.extend(Ext.form.Field, {
afterText: '-After Previous Message',
seperatorText: '-',

onRender: function(ct, position){
if(!this.el){
this.sIamount = new Ext.form.TextField({
id: this.id+'-sIamount',
width:25,
minLength: 1,
maxLength: 2,
allowBlank: false
});
this.sIamountType = new Ext.form.ComboBox({
id: this.id+'-sIamountType',
labelWidth: 0,
hideLabel:true,
width:90,
typeAhead: false,
triggerAction: 'all',
lazyRender: true,
editable: false,
value:"Day(s)",
allowBlank: false,
store : [
["Day(s)", "Day(s)"],
["Week(s)", "Week(s)"],
["Month(s)", "Month(s)"]
]
});
this.afterLabel = new Ext.form.Label({
xtype: 'label',
id: this.id+'-afterLabel',
text: this.afterText
});
this.seperatorLabel = new Ext.form.Label({
xtype: 'label',
id: this.id+'-seperatorLabel',
text: this.seperatorText
});
this.fieldCt = new Ext.Container({
autoEl: {id:this.id}, //make sure the container el has the field's id
cls: 'ext-dt-range',
renderTo: ct,
layout:'table',
layoutConfig: {
columns: 4
},
defaults: {
//hideParent: true
},
items:[
this.sIamount,
this.seperatorLabel,
this.sIamountType,
this.afterLabel
]
});

this.fieldCt.ownerCt = this;
this.el = this.fieldCt.getEl();
this.items = new Ext.util.MixedCollection();
this.items.addAll([this.sIamount, this.seperatorLabel, this.sIamountType, this.afterLabel]);
}
Ext.ux.sendIntervalField.superclass.onRender.call(this, ct, position);
},

getValue: function(){
return [
this.sIamount.getValue()+' '+this.sIamountType.getValue()
];
},

setValue: function(v){
v=v.toString();
var explodeArray = v.split(' ');
this.sIamount.setValue(explodeArray[0]);
this.sIamountType.setValue(explodeArray[1]);
},
isDirty: function(){
var dirty = false;
if(this.rendered && !this.disabled) {
this.items.each(function(item){
if (item.isDirty()) {
dirty = true;
return false;
}
});
}
return dirty;
},
onDisable : function(){
this.delegateFn('disable');
},
onEnable : function(){
this.delegateFn('enable');
},
reset : function(){
this.delegateFn('reset');
},
// private
delegateFn : function(fn){
this.items.each(function(item){
if (item[fn]) {
item[fn]();
}
});
},
beforeDestroy: function(){
Ext.destroy(this.fieldCt);
Ext.ux.sendIntervalField.superclass.beforeDestroy.call(this);
},
onDestroy : function(){
Ext.removeNode(this.fieldCt);
Ext.ux.sendIntervalField.superclass.onDestroy.call(this);
},
getRawValue : Ext.emptyFn,
setRawValue : Ext.emptyFn
});

Ext.reg('sendintervalfield', Ext.ux.sendIntervalField);
I have also included a screen shot of this to better explain what is going on:
22227

Here is how I define it in my column model:


colModelCampaignMessages = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
dataIndex: 'message_name',
header:"Message Name",
sortable: true
},{
dataIndex: 'send_interval',
header: "Send Interval",
sortable: true,
editor: {
xtype: 'sendintervalfield',
hideLabel: true,
height:30,
afterText:'',
labelWidth: 0,
hideLabel:true
}
},{
dataIndex: 'message',
header: "Message",
sortable: true,
editor: {
xtype: 'textarea',
minLength: 1,
maxLength: 140,
allowBlank: false
}
},{
dataIndex: 'orderM',
header: "Message Order",
style:'text-align:right;',
sortable: true
}

]);
How can I get the custom field to disappear? Is this an extjs bug or am I doing something wrong? Thanks!

laurentParis
2 Sep 2010, 1:18 PM
question** have your custom field a hide method ?

yerajeff
2 Sep 2010, 8:15 PM
I've added a hide method to it and it still doesn't work... this is the code I tried using:


hide : function(){
if(this.fireEvent('beforehide', this) !== false){
this.doHide();
this.fireEvent('hide', this);
}
return this;
},
// private
doHide: function(){
this.hidden = true;
if(this.rendered){
this.onHide();
}
},
// private
onHide : function(){
this.getVisibilityEl().addClass('x-hide-' + this.hideMode);
},


Nonetheless, even if I were to add these methods, would I not have to call them directly? How would specifying a hide method affect what is happening on the grid? I've even looked at the extjs-all-dubug.js file and didn't see other fields like textarea with these methods.... which makes me suspicious as to why my custom field extension is not working... Any more thoughts?

laurentParis
3 Sep 2010, 12:44 AM
When I read your extension and when I read "Everything is working great except..." I have some doubts !! ))

try this


hide: {
this.sIamount.hide();
this.seperatorLabel.hide();
}



Have you try CompositeElement ?

Condor
3 Sep 2010, 12:54 AM
Your custom component needs to fire 'blur' and 'specialkey' events (and you have to make sure - using a buffer delay? - that the blur event isn't fired when you move from the textfield to the combobox and vv.).