Reputation: 281

ExtJs doesn't load data to a form

this is my model

Ext.define('Contact', {
extend : 'Ext.data.Model',
fields : [ {
    name : 'first',
    mapping : 'name.first'
}, {
    name : 'last',
    mapping : 'name.last'
}, 'company', 'email', {
    name : 'dob',
    type : 'date',
    dateFormat : 'm/d/Y'
} ]

});

and this is my store

var store = Ext
    .create(
            'Ext.data.Store',
            {
                // alert("inside")
                // id: 'store',
                model : 'Contact',
                proxy : {
                    type : 'ajax',
                    url : 'urlForJson',
                    reader : 'json',
                    root : 'contact'
                },
                autoLoad : true
            });

and this is my form panel

Ext.onReady(function() {
var formPanel = Ext.create('Ext.form.Panel', {
    title : 'Simple Form with FieldSets',
    labelWidth : 75, 
    // url : 'save-form.php',
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    width : 340,
    bodyPadding : 5,

    layout : 'anchor', // arrange fieldsets side by side
    items : [ {
        xtype : 'fieldset',
        title : 'Contact Information',
        defaultType : 'textfield',
        defaults : {
            width : 280
        },
        items : [ {
            fieldLabel : 'First Name',
            emptyText : 'First Name',
            name : 'first'
        }, {
            fieldLabel : 'Last Name',
            emptyText : 'Last Name',
            name : 'last'
        }, {
            fieldLabel : 'Company',
            name : 'company'
        }, {
            fieldLabel : 'Email',
            name : 'email',
            vtype : 'email'
        }, {
            xtype : 'datefield',
            fieldLabel : 'Date of Birth',
            name : 'dob',
            allowBlank : false,
            maxValue : new Date()
        } ]
    } ],

    buttons : [ {
        text : 'Load',
        handler : function() {
            formPanel.getForm().load({
                url : 'xml-form-data.xml',
                waitMsg : 'Loading...'
            });
        }
    }, {
        text : 'Submit',
        disabled : true,
        formBind : true,
        handler : function() {
            this.up('form').getForm().submit({
                url : 'xml-form-errors.xml',
                submitEmptyText : false,
                waitMsg : 'Saving Data...'
            });
        }
    } ],
    renderTo : Ext.getBody()
});
var record = store.getAt(0);
 formPanel.getForm().loadRecord(record);

}

);

but this is not loading the data from the store, and also when i put this line

'formPanel.getForm().loadRecord(record);'

it gives me this ERROR as well "Uncaught TypeError: Cannot call method 'getData' of undefined " hope that anybody can help me

Upvotes: 2

Answers (4)

Vitold S.

Reputation: 442

You should have records in your store preloaded values. You may reach that by store.load() or by declarative autoLoad: true (this way may cause uncovered issue when you newbe in Ext JS Execution flow).

Upvotes: 0

Ivan

Reputation: 2262

It seems record is undefined. can you confirm this with console.log(record).

If this is the case see load event:

e.g.

var store = Ext.create(
    'Ext.data.Store',
    {
        // alert("inside")
        // id: 'store',
        model : 'Contact',
        proxy : {
            type : 'ajax',
            url : 'urlForJson',
            reader : 'json',
            root : 'contact'
        },
        autoLoad : false,
        listeners: {
            load: function(store, records) {
                var record = store.getAt(0);
                formPanel.getForm().loadRecord(record);
            }
        }
    }
);

Then call store.load() after form panel is rendered. Also ensure formPanel is visible in load event callback. In case it's not visible add id to the panel and use Ext.get(formId)

Upvotes: 2