PDA

View Full Version : Combobox like dropdown menu



dmN86
30 Dec 2011, 7:32 AM
Hi,

I would like to make a combobox that expand on mouse over. I know I can do it using the menu:)
I was looking for an appropriate event but have not found suitable. All fires after click.
Does anyone know how to do this?

mitchellsimoens
30 Dec 2011, 9:26 AM
You can put a mouseover event listener on any element.

dmN86
30 Dec 2011, 9:33 AM
I have to do something wrong because it does not work.


{
xtype: 'combobox',
itemId: 'charges-combo',
width: 220,
margin: '0 5 0 0',
name: 'charges',
fieldLabel: lang.addElement.capitalize(),
labelWidth: 50,
store: Ext.create('Ext.data.Store', {
fields:['name', 'value'],
data:{
'items':[
{
'name': lang.recurringCharge.capitalize(),
"value":"recurring_charge_def"
},
{
'name': lang.recurringChargeWithUnitPrice.capitalize(),
"value":"recurring_charge_def_with_unit_price"
},
{
'name': lang.oneTimeCharge.capitalize(),
"value":"onetime_charge_def"
},
{
'name': lang.oneTimeChargeWithUnitPrice.capitalize(),
"value":"onetime_charge_def_with_unit_price"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
}),
displayField: 'name',
valueField: 'value',
emptyText: lang.pick.capitalize() + ' ' + lang.element,
editable: true,
typeAhead: true,
forceSelection: true,
queryMode: 'local',
listeners: {
mouseover: function(x){
console.log('lol');
}
}
}

mitchellsimoens
30 Dec 2011, 9:39 AM
As I said, you have to put it on an element, not a component.

dmN86
30 Dec 2011, 9:49 AM
Thx :)



listeners: {
render: function(combo){
console.log(combo.getEl().on('mouseover', function(){
console.log('TEST')
}));
}
}

mitchellsimoens
30 Dec 2011, 9:52 AM
This should work too:


listeners : {
el : {
scope : combo,
mouseover : function() {}
}
}

dmN86
30 Dec 2011, 10:09 AM
I tried to do it with a single listener.
However, I have a problem with the scope when I type this, I get the whole view, not just the combobox.



{
xtype: 'combobox',
itemId: 'charges-combo',
width: 220,
margin: '0 5 0 0',
name: 'charges',
fieldLabel: lang.addElement.capitalize(),
labelWidth: 50,
store: Ext.create('Ext.data.Store', {
fields:['name', 'value'],
data:{
'items':[
{
'name': lang.recurringCharge.capitalize(),
"value":"recurring_charge_def"
},
{
'name': lang.recurringChargeWithUnitPrice.capitalize(),
"value":"recurring_charge_def_with_unit_price"
},
{
'name': lang.oneTimeCharge.capitalize(),
"value":"onetime_charge_def"
},
{
'name': lang.oneTimeChargeWithUnitPrice.capitalize(),
"value":"onetime_charge_def_with_unit_price"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
}),
displayField: 'name',
valueField: 'value',
emptyText: lang.pick.capitalize() + ' ' + lang.element,
editable: true,
typeAhead: true,
forceSelection: true,
queryMode: 'local',
listeners : {
el : {
scope: this,
mouseenter : function() {
console.log(this);
console.log(this.expand());
}
}
}
}