Hybrid View

    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

    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 Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,212
    Vote Rating
    1045
    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 Software Engineer
    ________________
    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

    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