Separate 2 gridpanels (in hbox) with small fine line, not splitter

Question

I have placed the following and everything is working great. I have a grid on the left and a grid on the right, but they placed side by side, I would like a thin line between thing. Is this possible?

   {
                        layout: {
                            type: 'hbox',
                            pack: 'start',
                            align: 'stretch'
                        },
                        items: [
                            {
                                xtype: 'first-grid-panel',
                                flex: 1
                            },
                            {
                                xtype: 'second-grid-panel',
                                flex: 1
                            }
                        ]
                    }

I was hoping to placer some kind of vertical line between them, very thin.

Or other option would be to place a right border on the "left" grid panel and a left border on the "right" grid panel. I am unsure whether that would work.

I tried setting frame: true, but this puts a big ugly frame around it.

Answer 1

Setting a border as you mentioned is possible, for example:

items: [{
    style: {
        borderRight: 'solid 1px red'
     } 
 },{
    style: {
        borderLeft: 'solid 1px green'
     }
 }]

Example: https://fiddle.sencha.com/#fiddle/umu.

(You better do this using a css class)