PDA

View Full Version : Add EventListener to a combobox



messyOne
4 Sep 2012, 11:41 PM
Hi guys,

I have a PHP code which returns an JSON object. This object consists the data for a combobox. In my ExtJS script the object is embedded. Now I want to add a EventListener to this object, but I get the error "Uncaught TypeError: Object #<Object> has no method 'addListener'" if I try it with the addListerner.

PHP array for JSON object


$this->metadata['tbar']['combos'][] = array(
'Test',
array(
'hidden' => false,
'xtype' => 'combo',
'width' => 100,
'store' => $items,
'value' => $value,
)
);

ExtJS panel create

Ext.create('widget.panel', {
width: 1024,
height: 728,
renderTo: _this.config.config.dom,
layout: 'fit',
items: _this.panelItems,
tbar : [
_this.config.metadata.tbar.combos,
]
});
}
}

_this.config.metadata.tbar.combos is the JSON data for the combobox passed by PHP.

How can I do it?

tvanzoelen
5 Sep 2012, 1:10 AM
You can add it in the config of the combo. Because only afterrender of the combo you can set the listener.



$this->metadata['tbar']['combos'][] = array(
'Test',
array(
'hidden' => false,
'xtype' => 'combo',
'listeners: '{ render: onComboboxRender }',
'width' => 100,
'store' => $items,
'value' => $value,
)
);


and create that render function



onComboboxRender: function(c) {
c.addListerner(yourlistener);
}


Or put all listeners directly in the config of you combo.

messyOne
5 Sep 2012, 1:57 AM
Mhh... I have tried it, but no result.

At first put the listener directly in combo:


$this->metadata['tbar']['combos'][] = array(
$title,
array(
'hidden' => false,
'xtype' => 'combo',
'width' => 100,
'store' => $items,
'displayField' => 'display',
'valueField' => 'value',
'value' => $value,
'listeners' => '{
select: function(combo, records, scope) {
console.log("foo");
}
}'
)
);


At second: In which position must the onComboboxRender be placed?

dawesi
5 Sep 2012, 2:20 AM
can you add the listener in the config object?



listeners : {
change : function(myCombo,sel,orig){
console.log('diff',Ext.Array.remove(myCombo.getValue(),myCombo.originalValue));
myCombo.setValue(Ext.Array.remove(myCombo.getValue(),myCombo.originalValue));
}
}

tvanzoelen
5 Sep 2012, 2:58 AM
Hmm then this?



$this->metadata['tbar']['combos'][] = array(
$title,
array(
'hidden' => false,
'xtype' => 'combo',
'width' => 100,
'store' => $items,
'displayField' => 'display',
'valueField' => 'value',
'value' => $value,
'listeners' => '{
select:
{
fn: function(combo, records, scope) {
console.log("foo");
}
}
}'
)
);

messyOne
5 Sep 2012, 3:55 AM
@tvanzoelen: Unfortunately it also doesn't work with this.

@dawesi: The listener "change" also doesn't work.

tvanzoelen
5 Sep 2012, 3:58 AM
And is the store loaded? Else there will be no change or select possible.

messyOne
5 Sep 2012, 3:59 AM
Yes! The store is loaded. I have a lot of items in the list.

tvanzoelen
5 Sep 2012, 4:03 AM
But the error is gone. What happens now? No event, no log?

messyOne
5 Sep 2012, 4:05 AM
Oh, yes. The error is gone, but no log.

Edit: The error came but only if I try to add the listener in the ExtJS script to the object.

tvanzoelen
5 Sep 2012, 4:10 AM
What does the reponse php look like. Is the listeners property quoted?

messyOne
5 Sep 2012, 4:19 AM
Mhh...

JSON object


"listeners":"{select:{fn: function(combo, records, scope) {console.log(\"foo\");}}}"


The PHP generated JS still work with the JSON object.

tvanzoelen
5 Sep 2012, 4:23 AM
yes, the xtype string will do that. But Listeners must be an object. No string, try to change that in your php serialization.

messyOne
5 Sep 2012, 4:31 AM
Can you tell me how the object should look like? I try it with different methods, but I always get errors like:



Uncaught TypeError: Object {fn: function(combo, records, scope) {console.log("foo");}} has no method 'apply'
Uncaught TypeError: Object function(combo, records, scope) {console.log("foo");} has no method 'apply'
Uncaught TypeError: Object #<Object> has no method 'apply'


Edit: The error comes when the event is fired! An improvement! ;-)

tvanzoelen
5 Sep 2012, 4:33 AM
Just no quotes



"listeners": {select:{fn: function(combo, records, scope) {console.log(\"foo\");}}}

messyOne
5 Sep 2012, 4:34 AM
No quotes? But in the PHP array I can't work without quotes.

tvanzoelen
5 Sep 2012, 4:37 AM
Must be possible to serialize object in PHP. Create a class Listeners and serialize it.

messyOne
5 Sep 2012, 5:08 AM
I can't seem to get this right. If I serialize the class it doesn't work. No event. No error.
If I transform the class in JSON data it added quotes. Event fired. Error: Uncaught TypeError: Object #<Object> has no method 'apply'

tvanzoelen
5 Sep 2012, 5:21 AM
Well leave it a string then , as it was but change the following



Ext.create('widget.panel', {
width: 1024,
height: 728,
renderTo: _this.config.config.dom,
layout: 'fit',
items: _this.panelItems,
tbar : [
Ext.appy(_this.config.metadata.tbar.combos, Ext.decode(_this.config.metadata.tbar.combos.listeners)),
]
});
}
}

messyOne
5 Sep 2012, 5:38 AM
The same "Uncaught TypeError: Object #<Object> has no method 'apply'" error.

The select listener works only when I set it as array:


array(
'xtype' => 'combo',
'width' => 100,
'store' => $items,
'displayField' => 'display',
'valueField' => 'value',
'value' => $value,
'listeners' => array(
'select' => array()
)
)

Then I got the error from above. The question is now how to set the function data in the select array!?