Results 1 to 3 of 3

Thread: Vertical Toolbar for ExtJS 3.4?

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Location
    Huntsville, AL
    Posts
    21
    Vote Rating
    0
      0  

    Question Vertical Toolbar for ExtJS 3.4?

    I'm currently using ExtJS 3.4.0 and have a custom component that was created that extends Ext.Toolbar. There is a good bit of custom logic added and I would like to re-use that component for a new application.

    A problem I'm having though is I would like for the toolbar to be aligned vertically down the right side of my panel instead of horizontally across the top.

    It seems this is available in ExtJS 4.0? Is there anywhere to do this in ExtJS 3.4 without having to create a new component all together? Upgrading to ExtJS 4.0 is not an option at this time either due to project constraints.

    I've tried using a vbox layout with the toolbar but that is apparently not enough. Thanks for any input you can give regarding this.

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,029
    Vote Rating
    1367
      0  

    Default

    There is no vertical toolbar. You can create a lookalike. Using hbox on the parent container, create a Container using the vbox layout and add buttons to it. You will need to give the toolbar lookalike container a width.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User brittongr's Avatar
    Join Date
    Jun 2007
    Location
    Panama
    Posts
    109
    Vote Rating
    3
      0  

    Default

    another option is using column layout:
    Code:
    new Ext.Panel(
        {
            renderTo: "container2",
            width: 300,
            items: [
            {
                title: 'Inner Panel',
                html: "Your Content",
                columnWidth: 1,
                border: false
            },
            {
                style: "background-color:#d0def0;padding-left:2px;",
                width: 27,
                tbar: new Ext.Toolbar(
                {
                    cls: "x-inline-toolbar",
                    width: 25,
                    items: [
                    {
                        id: "Button1",
                        text: 'A',
                        //iconCls: "icon-accept"
                    }, 
                    {
                        id: "Button2",
                        text: 'B',
                        //iconCls: "icon-add"
                    }, 
                    {
                        id: "Button3",
                        text: 'C',
                        //iconCls: "icon-application"
                    }, 
                    {
                        id: "Button4",
                        text: 'D',
                        //iconCls: "icon-bell"
                    }, 
                    {
                        id: "Button5",
                        text: 'E',
                        //iconCls: "icon-bomb"
                    }],
                    layout: "auto",
                    flat: true
                }),
                bodyStyle: "background-color:#d0def0;",
                border: false
            }],
            layout: "column",
            title: "Vertical Toolbar"
        });
    vertical-toolbar.png
    Greivin Britton

    My Extensions:
    Ext.ux.NumericField: Number field with support for currencySymbol, thousand separator, international...
    Ext.ux.PagerSizeSelector: A plugin that allows the change page size with just one click.
    Ext.ux.FieldAccess: A plugin to let the user know which fields are editable.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •