Question

I’m not understanding some key bit of ExtJs idiom so this question is about guiding me towards that. I think I’m trying to use ExtJs in the wrong way.

I’m writing an application which allows the user to add a dynamic number of child records. Let’s pretend I’m describing a room and the user can click the Add Door button and get a door FormPanel added to a list of FormPanels where they can specify the details of the door.

I’m holding the details of a door as an object in memory and I want to be able to connect the results of selecting a value in a combobox, textfield, etc with a field on the correct object. My plan is to then be able to send the object to the server using JSON/XHR/REST and persist it. I’ve got other processing that’s going onto the door object (e.g. spatial) hence wanting to have my own.

So far, nothing I’ve tried has worked. I can hook the select event but either my scope is the field control (in which case I can’t access the door object) or the scope is the door object and I can’t access the value of the field control.

I’m getting a little confused because ExtJs talks about linking to hidden fields. However, it appears to want one and only one field with a given id for a given control. This means that I can’t have more than one door unless the scope of that id is limited to the FormPanel.

Lastly, ideally I’d have a common store that was updated with new entries to the colour combobox so it could be shared by multiple doors. If anyone knows examples of this working I’d be grateful.

var doorDataEditor = new Ext.form.FormPanel({
    labelWidth: 75,
    width: 350,
    defaultType: 'textfield',
    items: [{
            fieldLabel: 'colour',
            name: 'colour',
            xtype: 'combo',
            store: colourStore,
            displayField: 'name',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            emptyText: 'Select the colour for this door...',
            selectOnFocus:true,
            value: door.colour,
            listeners:{
                scope: door,
                 'select': function(ev, target) {

                    alert(target.findField('name')); this.colour = target.value;
                } 
            }
        }]});

Thanks in advance for your help.

Answer 1

You are using the generic DOM event handler format (ev, target), but this is not a generic DOM event. For components, you should look in the API docs for the appropriate component-specific event signature. In this case, for ComboBox is ( Ext.form.ComboBox combo, Ext.data.Record record, Number index ) You should be able to grab the value from record.data.colour (assuming that’s how you have your records mapped).