This example comes with a health warning. It is just an example. It doesn't manage the components properly, indeed just clicking on the column header to sort the column will trash it completely (that causes a refresh).

getRefItems is defined on AbstractContainer. We're in some pretty advanced territory here, you'll need to dig into the source code rather than relying on the API docs.

I suggest studying this example, my original comments and the ExtJS source code until you understand it. If you just copy/paste you will almost certainly shoot yourself in the foot.

var gridFields = {
    name: Ext.create('Ext.form.field.Text', {
        name: 'name'
    category: Ext.create('Ext.form.field.Text', {
        name: 'category'
    age: Ext.create('Ext.form.field.Text', {
        name: 'age'
    type: Ext.create('Ext.form.field.Text', {
        name: 'type'

var form = Ext.create('Ext.form.Panel', {
    height: 300,
    layout: 'fit',
    renderTo: Ext.getBody(),
    width: 300,
    items: [{
        border: false,
        xtype: 'grid',
        columns: [{
            dataIndex: 'fieldName',
            flex: 1,
            header: 'Fields',
            xtype: 'componentcolumn',
            renderer: function(value) {
                // We could create the field here and push it into gridFields instead
                // but be aware that this will happen asynchronously so we wouldn't
                // be able to use findField immediately if we did it that way
                return gridFields[value];
        store: {
            fields: ['fieldName'],
            data: [
                {fieldName: 'name'},
                {fieldName: 'category'},
                {fieldName: 'age'},
                {fieldName: 'type'}
        // Overriding inline in the config, we don't call the superclass version,
        // which could cause problems if the grid has other items (possibly toolbars)
        getRefItems: function() {
            return Ext.Object.getValues(gridFields);

Ext.define('Person', {
    extend: '',
    fields: ['name', 'category', 'age', 'type']

// loadRecord uses findField
form.loadRecord(new Person({
    name: 'Thomas',
    category: 'A',
    age: 23,
    type: 'Advanced'