Get container's record on “initialize” in Sencha Touch

Question

I have a listContainer and on tap of any item in the list, I open another page known as editContainer with the record from list. In the edit page, I want to disable a dropdown based on the value of another field, is there any way I can get the values in record in the initialize function of editContainer? Here is my code:-

onListItemTap:function(dataview,index,target,record,e,eOpts)
{
if(record)
this.editContainer = Ext.create('myApp.view.EditContainer',{title:'Edit Data'});
this.editContainer.setRecord(record);
this.getMainNav().push(this.editContainer);
}

Above code opens editContainer when a list item is selected. Below is my EditContainer

Ext.define('myApp.view.EditContainer', {
    extend: 'Ext.Container',

    requires: [
    'Ext.form.Panel',
    'Ext.form.FieldSet',
    'Ext.field.Select'
],

config: {
    id: 'editContainer',
    autoDestroy: false,
    layout: 'fit',
    items: [
        {
            xtype: 'formpanel',
            id: 'editFormPanel',
            padding: 10,
            styleHtmlContent: true,
            autoDestroy: false,
            layout: 'fit',
            items: [
                {
                    xtype: 'fieldset',
                    id: 'nameFieldSet',
                    autoDestroy: false,
                    items: [
                        {
                            xtype: 'textfield',
                            id: 'siteName',
                            itemId: 'mytextfield',
                            label: 'Name',
                            labelWidth: '35%',
                            name: 'name'
                        },
                        {
                            xtype: 'selectfield',
                            id: 'role',
                            itemId: 'myselectfield4',
                            label: 'Role',
                            labelWidth: '35%',
                            name: 'role',
                            options: [
                                {
                                    text: 'Unassigned',
                                    value: 'Unassigned'
                                },
                                {
                                    text: 'Role1',
                                    value: 'role1'
                                }
                            ]
                        },
                        {
                            xtype: 'selectfield',
                            id: 'type',
                            label: 'Type',
                            labelWidth: '35%',
                            name: 'type',
                            options: [
                                {
                                    text: 'Default',
                                    value: 'Default'
                                },
                                {
                                    text: 'Custom',
                                    value: 'custom'
                                }
                            ]
                        },
                        {
                            xtype: 'selectfield',
                            id: 'roleValue',
                            label: 'Role Value',
                            labelWidth: '35%',
                            name: 'rolevalue',
                            options: [
                                {
                                    text: 'value1',
                                    value: 'value1'
                                },
                                {
                                    text: 'value2',
                                    value: 'value2'
                                },
                                {
                                    text: 'value3',
                                    value: 'value3'
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    listeners: [
        {
            fn: 'onTextfieldKeyup',
            event: 'keyup',
            delegate: 'textfield'
        },
        {
            fn: 'onSelectfieldChange',
            event: 'change',
            delegate: 'selectfield'
        }
    ]
},

onTextfieldKeyup: function(textfield, e, eOpts) {
    this.fireEvent('change', this);
},

onSelectfieldChange: function(selectfield, newValue, oldValue, eOpts) {
    this.fireEvent('change', this);
},

initialize: function() {
    this.callParent();
    var record;

    //Code to disable roleValue selectfield if Role is unassigned.
},

updateRecord: function(newRecord) {
    var me = this,
        myPanel = me.down('#editFormPanel');

    if(myPanel)
        myPanel.setRecord(newRecord);

},

saveRecord: function() {
    var me =this,
        myStore = Ext.data.StoreManager.lookup('MyStore');

    var formPanel = me.down('#editFormPanel'),
        record = formPanel.getRecord();
    formPanel.updateRecord(record);

    return record;
}

});

Answer 1

Since creating your editContainer and setting its data are two different steps in your code you can't use the initialize method of the editContainer.

But you can override the setRecord method of the editContainer, so it additionally disables the dropdown.

Since you push the editContainer onto a navigation view you could also use the activate event of the editContainer to disable the dropdown.

Answer 2

Maybe you can create a quick store on the fly, as a place to have a reference to that data...

    //in your controller where you set the record

    var mod = Ext.define('app.model.PanelDataModel', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                'roleValue'
            ]
        }
    });

    var sto = Ext.create('Ext.data.Store', {
        model: mod,
        id:'PanelDataStore'
    });

    sto.add({
        roleValue: record.roleValue
    });
    sto.sync();


    //Now in your panel's initialize method:

    var pstore = Ext.getStore('PanelDataStore');
    pstore.load();

    if(pstore.data.all[0].data.roleValue == 'unassigned'){
        Ext.getCmp('roleValue').setDisabled(true);
    }