Grid or Field in a window...but not both???

[Snaux]

This is driving me insane... I am making a popup window with a text entry field at the top, followed by a datagrid, then two buttons at the bottom to approve or cancel.

The problem is that I can have the grid or the datafield appear, but not both... what am I doing wrong?

Here's the code... if I comment out either of the two items in the items list (either the inline text field or the ref to grid) it will run, but including both will generate an error "Cannot set property 'component' of null" when the dialog window attempt to display.

Ext.define('MyApp.model.Mark', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
}, {
        name: 'annotation',
        type: 'string'
}, {
        name: 'mark_date',
        type: 'date'
}, {
        name: 'status',
        type: 'string'
}]
});

Ext.define('MyApp.store.Marks', {
    extend: 'Ext.data.Store',

    //best to require the model if you  put it in separate files
requires: ['MyApp.model.Mark'],
    model: 'MyApp.model.Mark',
    storeId: 'markStore',
    data: {
        items: [{
            id: 1,
            annotation: "Test",
            mark_date: "2013-04-24 9:28:00",
            status: "Done"
}]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
}
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    itemId: 'markGrid',
    store: Ext.create('MyApp.store.Marks'),
    loadMask: true,
    width: 400,
    columns: [{
        header: 'annotation',
        dataIndex: 'annotation',
        width: 230,
        flex: 1
}, {
        header: 'date',
        dataIndex: 'mark_date',
        width: 30,
        flex: 1
}, {
        header: 'status',
        dataIndex: 'status',
        width: 30,
        flex: 1
}]
});


Ext.define('csssui.view.batch.NewBatch', {

    extend: 'Ext.window.Window',
    xtype: 'newbatch',

    requires: [
        "csssui.view.batch.BatchSetupController",
        "csssui.view.batch.BatchModel",
        'Ext.form.Panel',
        'Ext.grid.Panel',
        'Ext.button.Button',
        'Ext.form.field.Text',
        'Ext.form.field.ComboBox'
],


    title: 'Batch',
    controller: "batchsetup",
    viewModel: {
        type: "batchsetup"
},
    bodyPadding: 10,
    title: 'New Batch',
    closable: false,

    cls: 'plate',
    items: [

        // CHOOSE EITHER THIS:
        {
            xtype: 'textfield',
            name: 'batchId',
            fieldLabel: 'Batch ID:',
            allowBlank: false,
            enableKeyEvents: true
         },

         // OR THIS, BUT NOT BOTH!!!!
        // grid
],


    buttons:
        [
            {
                text: 'Create',
                listeners: {
                    click: 'onCreateDept'
                }
            },
            {
                text: 'Cancel',
                listeners: {
                    click: 'onCancel'
                }
            }
        ]
})
;

[Snaux]

I solved this...kinda... by putting the button code inside the tbar:{} property of the grid. This still does not explain why the code above does NOT work (maybe its too complex to render without another cotainer as a wrapper?) but its good enough for me now.