bottom toolbar disappeared upon upgrade to PR3

[gorje001]

Hello,

My bottom toolbar does not show up upon an upgrade to PR3. It showed up in PR2. See view below.

Ext.require([
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Password',
'Ext.field.Email',
'Ext.field.Url',
'Ext.field.Checkbox',
'Ext.field.Spinner',
'Ext.field.Select',
'Ext.field.Hidden',
'Ext.field.TextArea',
'Ext.field.Slider',
'Ext.field.Toggle',
'Ext.field.Radio',
'Ext.Button',
'Ext.data.Store'
]);


Ext.define('TestApp.view.CreateEditGathr', {
extend: 'Ext.form.Panel',
alias: 'widget.createeditgathr',
id: 'createeditgathr',

requires: ['TestApp.model.Gathr', 'TestApp.store.Gathrs'],
stores: ['Gathrs'],
controllers: ['Gathr'],

//defaultInstructions: 'Please enter the information above.',


fullscreen: true,

config: {
layout: 'vbox',
items: [
{
id: 'gathrFormTitlebar',
xtype: 'toolbar',
docked: 'top',
title: 'Create gathr',
items: [ {
text: 'cancel',
ui: 'back',
id: 'gathrformcancelbutton',
scope: this
},
],
},
{
xtype: 'fieldset',
title: 'Gathr Details',
instructions: 'Please enter the above information.',
defaults: {
required : true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'name',
autoCapitalize : true
},
// {
// xtype: 'app.views.errorField',
// fieldname: 'name',
// },

{
xtype: 'textfield',
name : 'description',
label: 'description',
autoCapitalize : true
},
// {
// xtype: 'app.views.errorField',
// fieldname: 'description',
// },
]
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
id: 'gathrFormDeleteButton',
text: 'delete',
ui: 'decline',
},
{xtype: 'spacer'},
{
id: 'gathrFormSaveButton',
text: 'save',
ui: 'confirm',
},
]
},
],
},
},
});

[mitchellsimoens]

I had to comment out the requires, stores, controllers properties to get it working. Also, I had to move fullscreen into the config object to get it to render. Testing on PR3, I see the bottom toolbar just fine:

Ext.define('TestApp.view.CreateEditGathr', {
    extend: 'Ext.form.Panel',
    alias: 'widget.createeditgathr',
    id: 'createeditgathr',

    //requires: ['TestApp.model.Gathr', 'TestApp.store.Gathrs'],
    //stores: ['Gathrs'],
    //controllers: ['Gathr'],

    //defaultInstructions: 'Please enter the information above.',

    config:  {
        fullscreen: true,
        layout: 'vbox',
        items: [
            {
                id: 'gathrFormTitlebar',
                xtype: 'toolbar',
                docked: 'top',
                title: 'Create gathr',
                items: [ {
                        text: 'cancel',
                        ui: 'back',
                        id: 'gathrformcancelbutton',
                        scope: this
                    }
                ]
            },
            {
                xtype: 'fieldset',
                title: 'Gathr Details',
                instructions: 'Please enter the above information.',
                defaults: {
                    required  : true,
                    labelAlign: 'left',
                    labelWidth: '40%'
                },
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        label: 'name',
                        autoCapitalize : true
                    },

                    {
                        xtype: 'textfield',
                        name : 'description',
                        label: 'description',
                        autoCapitalize : true
                    }
                ]
            },
            {
                xtype: 'toolbar',
                docked: 'bottom',
                items: [
                    {
                        id: 'gathrFormDeleteButton',
                        text: 'delete',
                        ui: 'decline'
                    },
                    {xtype: 'spacer'},
                    {
                        id: 'gathrFormSaveButton',
                        text: 'save',
                        ui: 'confirm'
                    }
                ]
            }
        ]
    }
});

[gorje001]

I made the suggested changes and the bottom toolbar still does not show up. This view is shown based on user input. Here's the controller code:

create: function(options) {
var model = Ext.create('TestApp.model.Gathr',{});
var gathrform = Ext.getCmp('createeditgathr');
console.log(gathrform);
var gvp = Ext.getCmp('gathrviewport');
if (gathrform == undefined) {
gathrform = Ext.create('TestApp.view.CreateEditGathr', {});
gvp.add(gathrform);
}
console.log(gathrform);
gathrform.setRecord(model);
gathrform.newGathr(true);
gvp.setActiveItem(gathrform, {type: 'slide', direction: 'right'});
},


And the viewport is just a panel:

Ext.define('TestApp.view.Viewport', {
extend: 'Ext.Panel',
alias: 'widget.gathrviewport',
id: 'gathrviewport',

config: {
layout: 'card',
fullscreen: true,
cardSwitchAnimation: 'slide',
items: [{
xtype : 'gathrlist',
}]
},

});

Any idea why bottom toolbar does not show up?
Thanks.