ExtJS 3.4 GridPanel doesn't show inside a FormPanel

Question

I am trying to modify the sample code to build a similar form like http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/form/form-grid.html

My code is below:

    var references = new Ext.form.FormPanel({
    frame: true,
    title: 'References',
    bodyPadding: 5,
    layout: 'column',
    fieldDefaults: {
        labelAlign: 'left',
        msgTarget: 'side'
    },
    items: [{
        columnWidth: 0.60,
        xtype: 'gridpanel',
        store: reference_store,
        height: 400,
        title:'General',
        columns: [
          { id: 'name', header : 'Reference', flex: 1, sortable : true, dataIndex: 'reference' },
          { header: 'Impact', width : 75, sortable : true, dataIndex: 'impact'},
       ]
    }, {
        columnWidth: 0.4,
        margin: '0 0 0 10',
        xtype: 'fieldset',
        title:'Details',
        defaults: {
            width: 240,
            labelWidth: 90
        },
        defaultType: 'textfield',
        items: [{fieldLabel: 'Name', name: 'reference'}]
    }]
});

But the entire FormPanel failed to show. When I replace the 'gridpanel' with 'fieldset' or other type, the FormPanel does appear regardless of the bad format.

Answer 1

xtype should be “grid“ instead of “gridpanel“