PDA

View Full Version : Solved: TriggerField : Menu is closed when i choose an item in a combobox



dme69
26 Apr 2010, 6:54 AM
Hello again,
I'm still having issues with triggerField and I still need help. :)

I'm trying simple things : 1 textfield (with trigger) + a menu with 2 fields (combo) and 1 btn.
I want to combine values of the 2 fields in the result when i click on the btn.

My issue is that when i select an item in a combobox the menu is closed ?

Can someone help me ?
Thanks.
Dominique.


Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout:"auto",
title:"FitLayout Container",
items:[
{
xtype:"trigger",
name:"triggervalue",
itemId: "testTrigger",
scope: this,
onTriggerClick: function() {
//this.setValue("33");
var triggerFld = this;
if (!this.menu) {
this.menu = new Ext.menu.Menu({
id: "myMenu",
items:[{
xtype: "combo",
id: "fldAggregate",
store: new Ext.data.SimpleStore({
id:0
,fields:
[
'aggregate'
]
,data:[["AVG"],["COUNT"],["MAX"],["MIN"],["SUM"]]
})
,valueField:'aggregate'
,displayField:'aggregate'
,mode:'local',
emptyText: 'Select aggregate',
selectOnFocus: true
},
{
xtype: "combo",
id: "fldOperator",
store: new Ext.data.SimpleStore({
id:0
,fields:
[
'operator'
]
,data:[["="],["!="],[">"],[">="],["<"],["<="],["LINE"],["IN"]]
})
,valueField:'operator'
,displayField:'operator'
,mode:'local'

},
{
xtype: 'button',
text: 'Put panel text field inside triggered field',
handler: function(menu_item, evt) {

var fldAggegate = Ext.getCmp("fldAggregate").getValue();
Ext.getCmp("fldAggregate").setValue("");
var fldOperator = Ext.getCmp("fldOperator").getValue();
Ext.getCmp("fldOperator").setValue("");
// How to set the triggered field value ?
//Here it's not working - The field is not set
// Why ?
triggerFld.setValue(fldAggegate+fldOperator);
// Hide the menu
this.ownerCt.hide();
}
}]
});
};
this.menu.show(this.getEl(), 'tl-bl?');
}
}
]

});
viewport.applyToMarkup('editor-grid');
})

mitchellsimoens
26 Apr 2010, 9:48 AM
You could have a listener for the combo for the select event and then show the menu.

Or try the ignoreParentClicks:true option on the menu. Haven't tried using your code just giving suggestions.

dme69
26 Apr 2010, 12:34 PM
Thank you for this answer.
I just tried :
- ignoreParentClicks does not seem to work ?
- Can you help for the listener. I just add an onSelect event. It is launched but how to show my menu again ?

Thanks again for your precious help.
Best.
Dominique.

dme69
27 Apr 2010, 5:59 AM
OK. I have made some things ....
It's working best but ... not completely and i'm closed to hate Extjs !
... Well I hate me first because it is surely my fault :(

What i have done is working when i'm having on textfield to populate. But my initial goal was to have this triggerfield inside a grid.
And then 2 things are not working :
1. the value is never set inside the grid cell
2. if i put 2 fields like this one in 2 columns there are some weird comportments (inside the combobox)

Well, here is my new code :

TgField = Ext.extend(Ext.form.TriggerField, {
initComponent: function() {
Ext.apply(this, {
emptyText:'Type to autocomplete...',
typeAhead: false,
forceSelection: false,
selectOnFocus: true,
displayField: 'value',
valueField: 'value',
minChars: 1,
});
// Call parent (required)
TgField.superclass.initComponent.call(this);
},
initEvents: function() {
// Before parent code
// Call parent (required)
TgField.superclass.initEvents.call(this);
// After parent code
// e.g. install event handlers on rendered component
// this.on('resize', this.resize_, this);
},
onTriggerClick: function() {
//this.setValue("33");
var triggerFld = this;
var fieldsAreSent = 0;
if (!this.menu) {
this.menu = new Ext.menu.Menu({
id: "myMenu",
autoDestroy: false,
ignoreParentClicks: true,
onHide: function() {
Ext.menu.Menu.superclass.onHide.call(this);
this.deactivateActive();
if(this.el && this.floating){
if (fieldsAreSent) {
this.el.hide();
fieldsAreSent = false;
}
}
var pm = this.parentMenu;
if(this.deepHide === true && pm){
if(pm.floating){
pm.hide(true);
}else{
pm.deactivateActive();
}
}

},
items:[{
xtype: "combo",
store: new Ext.data.SimpleStore({
fields:
[
'aggregate'
]
,data:[["AVG"],["COUNT"],["MAX"],["MIN"],["SUM"]]
})
,valueField:'aggregate'
,displayField:'aggregate'
,mode:'local',
emptyText: 'Select aggregate',
selectOnFocus: true
},
{
xtype: "combo",
store: new Ext.data.SimpleStore({
fields:
[
'operator'
]
,data:[["="],["!="],[">"],[">="],["<"],["<="],["LINE"],["IN"]]
})
,valueField:'operator'
,displayField:'operator'
,mode:'local'

},
{
xtype: 'panel',
layout: 'hbox',

items:[
{
xtype: 'button',
text: 'OK',
handler: function(menu_item, evt) {

/*var fldAggegate = Ext.getCmp("fldAggregate").getValue();
Ext.getCmp("fldAggregate").setValue("");
var fldOperator = Ext.getCmp("fldOperator").getValue();
Ext.getCmp("fldOperator").setValue("");
// How to set the triggered field value ?
//Here it's not working - The field is not set
// Why ?
triggerFld.setValue(fldAggegate+fldOperator);*/
fieldsAreSent = true;
// Hide the menu
this.ownerCt.ownerCt.hide();
}
},
{
xtype: 'button',
text: 'CANCEL',
handler: function(menu_item, evt) {
/*Ext.getCmp("fldAggregate").setValue("");
Ext.getCmp("fldOperator").setValue("");*/
fieldsAreSent = true;
// Hide the menu
this.ownerCt.ownerCt.hide();
}
}
]
}
]
});
};
this.menu.show(this.getEl(), 'tl-bl?');
}

});
Ext.reg('symodtrigger',TgField);

Animal
27 Apr 2010, 6:06 AM
Have you looked at examples/menu/menus.js ?

dme69
27 Apr 2010, 6:49 AM
yes but ...
:(
I'm sorry i really don't want to ask stupid questions here. I promise I'm "working" on this for a long time now. I'm just not thinking in the "good" way. I must improve myself in OO and that's why i'm asking for some help.
Thanks again for your help and pointing me in the good direction to look.
One day i will help others ! ... Well I hope so ! :)
Dominique.

Animal
27 Apr 2010, 7:12 AM
getListParent

dme69
27 Apr 2010, 7:20 AM
A big thanks to you for your help.
You solved one of my problems.
:)
I'm going to open a new thread because my other big issue is about using my class inside a grid ...
But thanks again.
Dominique.

Animal
27 Apr 2010, 7:52 AM
A Component inside a GridPanel.

You can't do it very safely and easily. It would be best to describe your UI requirements in detail and try to get help on how to achieve them.