Looks like we can't reproduce the issue or there's a problem in the test case provided.
-
Sencha User
bottom toolbar disappeared upon upgrade to PR3
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',
},
]
},
],
},
},
});
-
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:
Code:
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'
}
]
}
]
}
});
-
Sencha User
still no bottom toolbar
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.