Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    gorje001 is on a distinguished road

      0  

    Default bottom toolbar disappeared upon upgrade to PR3

    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',
    },
    ]
    },
    ],
    },
    },
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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'
                        }
                    ]
                }
            ]
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    gorje001 is on a distinguished road

      0  

    Default still no bottom toolbar

    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.

Thread Participants: 1