CODEWITHSUNDEEP
extjsevent-listener
Ryan Williams
Ryan Williams

Reputation: 663

extJS events/listeners for newb to js/extjs

I'm trying to learn a little bit about manipulating UI elements in forms. I have 2 graphical elements. I have a comboBox that has a list of arbitrary things and I have a very basic form panel. what I'm trying to do is pass the contents of a clicked item in the combobox to the input box on the form. Click on 'cat" in combobox then the form will say animal: cat ... I've been trying to add listeners and using the .on approaches to do this but I can't seem to get it. Any advice or hints would be much appreciated. 

 Ext.onReady(function () {
// The data store containing the list of cool stuffz
var animals = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data: [{
        "id": 'cat',
        "name": "mycat"
    }, {
         'id' : 'dog',  
        "name": "mydog"
    }, {
        'id' : 'sbBarGirls', 
        "name": "heartbreaking-man-eating-deathclaw"
    }
    //...
    ]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
id: 'combo',
width: 600,
    fieldLabel: 'Choose animal',
emptyText: 'dont select the last one',
store: animals,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'id',
    renderTo: Ext.getBody()
});
});

//non related code here..

 Ext.onReady(function(){

Ext.create('Ext.form.Panel', {
    title: 'Animal sanctuary, one animal per location  ',
    width: 300,
    bodyPadding: 10,

    style: 'background-color: #Fdd;',
    renderTo: Ext.getBody(),
        items: [{
    xtype: 'textfield',
    fieldLabel: 'animal:',
    name: 'myanimal'
    }]

});
});

what i was trying to do was use the dom event mousedown on one of the comboselections trigger a listener but i couldn't seem to get it to work, my apologies if the event/listener tags are incorrect.

Upvotes: 1

Views: 6194

Answers (1)

Andron
Andron

Reputation: 6631

So you need describe id for the text field, e.g.:

{
    id: 'wild_but_very_good_animal',
    xtype: 'textfield',
    fieldLabel: 'animal:',
    name: 'myanimal'
}

And add listener for the combo:

Ext.create('Ext.form.ComboBox', {
    id: 'combo',
    width: 600,
    fieldLabel: 'Choose animal',
    emptyText: 'dont select the last one',
    store: animals,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'id',
    renderTo: Ext.getBody(),
    listeners: {
        'change': function(field, selectedValue) {
            Ext.getCmp('wild_but_very_good_animal').setValue(selectedValue);
        }
    }
});

Upvotes: 2

Related Questions