1. #1
    Sencha User
    Join Date
    Mar 2010
    Location
    Huntsville, AL
    Posts
    21
    Vote Rating
    0
    scottlusk.cis is on a distinguished road

      0  

    Question Vertical Toolbar for ExtJS 3.4?

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Vote Rating
    756
    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


    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 @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 brittongr's Avatar
    Join Date
    Jun 2007
    Location
    Panama
    Posts
    109
    Vote Rating
    3
    brittongr is on a distinguished road

      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.

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar