ExtJs TabPanel and gridview

0

I think it's a simple question, but I tried everything and it did not work.

A gridview in the tabpanel is not displaying the pagingtollbar, as there is a lot of grid line passing the area of view. The tab scroll does not work, and I can not access the navigation buttons.

Without setting the height of the grid in the hand how to adjust to the size of the screen automatically? No scrollbar scroll only gridview.

Thank you

Grid code

Ext.define('ImpPdf.view.GridView', {
extend: 'Ext.grid.Panel',

requires: ['Ext.toolbar.Paging'],

alias: 'widget.gridV',
//title: 'Importação',

store: 'GridStore',
selType: 'checkboxmodel',

selModel: {
    checkOnly: true,
    injectCheckbox: 1
},

layout: {
    type: 'border',
    align: 'center'
},

loadMask: true,
autoScroll: true,
stateful: true,
multiSelect: true,

//height: 620,
//autoHeight: true,

viewConfig: {
    stripeRows: true,
    enableTextSelection: true,
    forceFit: true,

    //autoFill: true,
    //scrollOffset: 0
},

columns: [
    {   header: 'Id',
        dataIndex: 'id',
        sortable: false,
        width: 50,
        fixed: true
    },{
        header: "Url",
        dataIndex: 'url',
        sortable: true
    }

],
initComponent: function() {
    this.dockedItems = [
        {
            xtype: 'toolbar',
            items: [
                {
                    text: 'Importar',
                    action: 'selimp',
                    tooltip: 'Importar TXT'
                },{
                    text: 'Excluir',
                    action: 'delete',
                    tooltip: 'Deletar Registros'
                },{
                    text: 'Excluir Todos',
                    action: 'deleteAll',
                    tooltip: 'Deletar todos os Registros'
                },{
                    text: 'Transferir Dados',
                    action: 'transfDados',
                    tooltip: 'Transferencia de registros'
                }
            ]
        },{
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            store: 'GridStore',
            displayInfo: true,
            emptyMsg: "Nenhum registro encontrado."
        }
    ];

    this.callParent(arguments);
}

});

Layout / Container / TabPanel

Ext.define('ImpPdf.view.Main', {
extend: 'Ext.container.Container',

requires:[
    'ImpPdf.view.GridView',
    'Ext.tab.Panel'
],
xtype: 'app-main',

layout: {
    type: 'border',
    align: 'left'
},

defaults: {
    bodyBorder: false,
    //collapsible: true,
    split: true,
    bodyPadding: 0
},

items: [
{
    xtype: 'container',
    region: 'north',
    split: false,
    height: 40,
    html: '<h2>Primeiro aplicativo</h2>',
    style:{
        marginBottom: '10px',
        marginLeft: '5px',
        color: 'white'
    }
},{
    title: 'Navegação',
    region: 'west',
    floatable: false,
    margins: '5 0 0 0',
    width: 180,
    minWidth: 100,
    maxWidth: 250
},{
    //title: 'Main',
    region: 'center',
    collapsible: false,
    margins: '5 0 0 0',
    items: [{
        xtype: 'tabpanel',
        activeTab: 0,

        items:[{
            title: 'Importação',
            items: [{
                xtype: 'gridV'
            }]
        },{
            title: 'Transferencia'
        }]
    }]
}]

});

    
asked by anonymous 17.07.2014 / 01:34

1 answer

1

Height setting automatically is a bit tricky. The simplest is to use the bootstrap

Now pro scroll to work, you'll have to set the autoScroll property to true on your tabpanel

  

autoScroll: true

After the scroll works the content should adjust itself.

    
17.07.2014 / 07:12