Scope Problems, Sencha, Getting Data passed to vie

Question

I am passing a record in from the controller via:

showDetail: function (list, record) {

    this.getMain().push({
        xtype: 'leaddetail',
        data: record.data
    });
},

My View:

Ext.define('ApexChat.view.LeadDetail', {
extend: 'Ext.Panel',
xtype: 'leaddetail',

init: function() {
    debugger;
},


config: {
    styleHtmlContent: true,
    scrollable: 'vertical',
    title: 'Details',
    frame: true,
    labelwidth: 75,




    items: [
    {
        xtype: 'fieldset',
        columnWidth: 0.5,
        collapsible: true,
        title: 'Lead Information',
        defaultType: 'textfield',
        defaults: { anchor: '100%' },
        layout: 'vbox',
        items: [
            {
                fieldLabel: 'Name',
                name: 'name',
                tpl: '{name}',
                value: '{name}',
                disabled: true
            },
            {
                fieldLabel: 'Email',
                name: 'email',
                value: '{email}',
                disabled: true
            },
            {
                fieldLabel: 'Phone',
                name: 'phone',
                value: '{phone}',
                disabled: true
            }
        ]
       }, 
       {
           xtype: 'fieldset',
           columnWidth: 0.5,
           collapsible: true,
           title: 'Exta Information',
           defaultType: 'textfield',
           defaults: { anchor: '100%' },
           layout: 'vbox',
         items: [
            {
                fieldLabel: 'Company Key',
                name: 'companykey',
                value: '{companyKey}',
                disabled: true
            },
            {
                fieldLabel: 'Chat ID',
                name: 'chatid',
                value: '{chatId}',
                disabled: true
            },
            {
                fieldtype: 'textarea',
                fieldLabel: 'Notes',
                name: 'notes',
                value: '{notes}',
                disabled: true
            }
        ]
    }
 ]
}
});

But inside the textfields i still see {companyName}

Assuming it cant be done like that, so how do I access the record being passed from the controller so I can do a .get('name') or something similar to that?

Answer 1

tpl and data are used for rendering custom HTML, while Ext fields are components that handle their own rendering. You shouldn't have to touch their tpl, except for advanced use cases.

As opposed to other frameworks that are mainly based on HTML templates, Ext is essentially a object oriented component library. You rarely go to the HTML level yourself.

For setting the values of a bunch of fields at once, you need to put them in a Ext.form.Panel. Then you can use setValues or, maybe more appropriated in your case, setRecord.

Using your example, you would configure your fields this way:

Ext.define('ApexChat.view.LeadDetail', {
    extend: 'Ext.Panel',
    xtype: 'leaddetail',

    config: {
        ...
        items: [{
            fieldLabel: 'Name',
            // you only need the name for the field to load data
            name: 'name'
        },{
            fieldLabel: 'Email',
            name: 'email'
        }]
    }
});

Then you can assign your record at creation time using the record config option:

this.getMain().push({
    xtype: 'leaddetail',
    // using record config option
    record: record
});

Or you can use the methods to load the data:

// get a ref to your component the way you want, this line just illustrates what's in formPanel
var formPanel = Ext.create({xtype: 'leaddetail'});

// using setValues
formPanel.setValues(record.data);

// or using setRecord
formPanel.setRecord(record);