grid toolbar that is hidden by the grid header

[flamant]

Hi,
I implemented a grid with a toolbar

Panel({  // I summarize
   region: 'south',
   height: 150,
   minSize: 75,
   maxSize: 250,
   layout: 'anchor',
    collapsed: true,
    items: {
                 TabPanel({    // I summarize
                  layout: 'fit',
                  anchor: '100% 100%',
                  items: [
                        {   Panel({    // I summarize
                                    layout: 'fit',
                                    items: {
                                                Ext.create('Ext.grid.Panel', {
                                                             columns : annotationColumns,
                                                             store: annotationJsonStore[type],
                                                             loadMask: true,
                                                             stripeRows: true,
                                                             forceFit: true,
                                                             autoScroll: true,
                                                            features: [
                                                            {
                                                                ftype:'grouping'
                                                            }
                                                            ],
                                                            tbar: Ext.create('Ext.toolbar.Toolbar', {
                                                                                       items: [buttons]

The columns are the following

    var annotationColumns = [];

    annotationColumns.push({
        header: '<spring:message code="annotation.element"/>',
        dataIndex: 'element',
        sortable: false,
        renderer: element,
        width: 45,
        flex: 0
    });
    annotationColumns.push({
        header: '<spring:message code="annotation.name"/>',
        dataIndex: 'name',
        renderer: goToLine,
        width: 100,
        flex: 0
    });
    annotationColumns.push({
        header: '<spring:message code="annotation.status"/>',
        dataIndex: 'status',
        sortable: false,
        renderer: status,
        width: 40,
        flex: 0
    });
    annotationColumns.push({
        header: '<spring:message code="annotation.createdOn"/>',
        dataIndex: 'createdOn',
        groupable: false,
        renderer: goToLine,
        width: 110,
        flex: 0
    });
    annotationColumns.push({
        header: '<spring:message code="annotation.user"/>',
        dataIndex: 'author',
        renderer: goToLine,
        width: 100,
        flex: 0
    });

And I don't see why, the toolbar is behind and hidden by the header

Thank you in advance for your answers

[scottmartin]

You have anchor in your tabPanel with a layout of fit, and you also have forcefit and autoscroll for your grid panel. This should be used for panels that have items and not a grid.

See how the following behaves:

Ext.onReady(function(){
	Ext.create('Ext.tab.Panel', {
		height: 200,
		width: 300,
		activeTab: 0,
		renderTo: Ext.getBody(),
		items: [ 
		{
			xtype: 'panel',
			title: 'my tab',
			layout: 'fit',
			items: [
			{
	            xtype: 'gridpanel',
	            title: 'My Grid Panel',
	            columns: [
	                {
	                    xtype: 'gridcolumn',
	                    dataIndex: 'string',
	                    text: 'String'
	                }
	            ],
	            tbar: [{
	            	text: 'my button'
	            }]
			}]
		} 
		]
	});
});

Regards,
Scott.