sencha touch: vertical separator on toolbar

Question

I have a toolbar containing a set of buttons. Now I want to insert a vertical separator in between these buttons. But I am not able to find out a component in Sencha Touch which will get this for me.

Please check the below pics to get an idea of what exactly I want:

Please help me with this.

thanks.

Answer 1

Here is a work around. You can try this. First you add a button in between the button where you want to add separator like this:

                {
                    xtype: 'button',
                    ui: 'plain',
                    text: '|',
                    disabled: true,
                    cls: 'separator'
                }

and then add style to 'separator' class like this:

.separator {
    font-size: 30px;
    color: #6EA6CC;
}

Now you can customize the style according to your need.

I believe there can be better ways of doing this. Good luck.