创建extjs网格布局时出现问题

Question

我目前正在extjs项目中，我必须在其中创建一个带有网格的页面。 我的问题是，由于某种原因，该网格扩展得太多，导致我不得不缩小很多倍才能看到网格的结尾。

该问题似乎与我拥有的某些布局设置有关，但我不明白具体是什么。

这是我的代码（请记住，诸如getJsResource之类的功能在我的项目内部，并且用于从文件中恢复字符串，而且，有一部分被故意遗漏了，因为对发布目的无用）

如果您能帮助我了解我的问题所在，我将不胜感激。该网格称为：gesioneScadenzaGrid。

非常感谢您

var annoTrascinato = annoPianifForm - 1;
var sfondoChiaro = 'background-color: #f4f6fc;';
var sfondoScuro = 'background-color: #99bbe8;';



Ext.define('GestioneScadenza', {
    extend: 'Ext.data.Model',
    fields: ['codiceRamo', 'denominazione', {
        name: 'dataScadenza',
        type: 'date',
        dateFormat: 'd/m/Y'
    }]
});

var gestioneScadenzaStore = Ext.create('Ext.data.Store', {
    model: 'GestioneScadenza',
    data: [{
        codiceRamo: 'Lisa',
        denominazione: 'lisa@simpsons.com',
        dataScadenza: '03/03/1999'
    }, {
        codiceRamo: 'Bart',
        denominazione: 'bart@simpsons.com',
        dataScadenza: '03/03/1999'
    }, {
        codiceRamo: 'Homer',
        denominazione: 'homer@simpsons.com',
        dataScadenza: '03/03/1999'
    }, {
        codiceRamo: 'Marge',
        denominazione: 'marge@simpsons.com',
        dataScadenza: '03/03/1999'
    }]
});


var gestioneScadenzaGrid = Ext.create('Ext.grid.Panel', {
    store: gestioneScadenzaStore,
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })
    ],
    columns: [{
        flex: 5,
        text: getJsResource('tabRami.label.codiceRamo'),
        //            width: 200,
        dataIndex: 'codiceRamo'
    }, {
        flex: 2,
        text: getJsResource('tabRami.label.denominazione'),
        //            width: 150,
        dataIndex: 'denominazione'
    }, {
        flex: 3,
        text: getJsResource('tabRami.label.dataScadenza'),
        xtype: 'datecolumn',
        //            width: 135,
        dataIndex: 'dataScadenza',
        editor: {
            xtype: 'datefield',
            allowBlank: false,
            format: 'd/m/Y',
            maxValue: Ext.Date.format(new Date(), 'd/m/Y')
        }
    }]
});


var panelGrid = new Ext.Panel({
    region: 'north',
    id: 'panelGrid',
    title: getJsResource('gestioneScadenza.panelGrid.tratta'),
    layout: 'border',
    bodyStyle: 'font: bold 12px Tahoma, Arial; text-align: center; padding: 1 2 2 1;' + sfondoChiaro,
    style: 'padding: 2 10 2 2; ' + sfondoChiaro,
    border: false,
    items: [{
        region: 'north',
        bodyStyle: 'font: bold 12px Tahoma, Arial; text-align: center; padding: 0 5 5 0;' + sfondoChiaro,
        border: false,
        html: getJsResource('gestioneScadenza.panelGrid.tratta')
    }, gestioneScadenzaGrid]
});




var panelTab = new Ext.TabPanel({
    id: 'PanelTab',
    activeTab: 0,
    border: false,
    bodyStyle: sfondoChiaro,
    style: sfondoChiaro,
    layoutOnTabChange: true,
    closeOnTab: true,
    alwaysShowTabs: true,
    tabPosition: 'bottom',
    plain: true,
    items: [
        panelGrid
    ]
});

var panelBottone = new Ext.Panel({
    id: 'PanelBottone',
    border: false,
    style: 'font-size: 0px; padding: 0 0 2 0; ' + sfondoScuro,
    bodyStyle: sfondoScuro,
    buttonAlign: 'center',
    buttons: [{
        id: 'idBottoneConferma',
        text: 'Confirmar',
        tooltip: 'Confirmar'
    }]
});

var panelGestioneScadenza = new Ext.Panel({
    region: 'center',
    id: 'panelGestioneScadenza',
    layout: 'border',
    bodyStyle: 'font: bold 12px Tahoma, Arial; text-align: center; ' + sfondoScuro,
    border: false,
    style: 'padding: 0 3 5 0; ' + sfondoScuro, //  ,frame  : false
    items: [{
        region: 'north',
        id: 'PanelGestioneScadenzaNorthRegion',
        height: 35,
        layout: 'fit',
        border: false,
        items: [panelTestata]
    }, {
        region: 'center',
        id: 'PanelGestioneScadenzaCenterRegion',
        layout: 'fit',
        border: false,
        items: [panelTab]
    }, {
        region: 'south',
        id: 'PanelGestioneScadenzaSouthRegion',
        layout: 'fit',
        border: false,
        bodyStyle: sfondoScuro,
        items: [panelBottone]
    }]
});

var tabPanelGestioneScadenza = Ext.create('Ext.tab.Panel', {
    id: 'tabPanelGestioneScadenza',
    activeTab: 0,
    border: false,
    layoutOnTabChange: true,
    plain: true,
    closeOnTab: true,
    alwaysShowTabs: true,
    resizeTabs: true,
    minTabWidth: 150,
    defaults: {
        frame: false,
        border: false,
        hideBorders: true
    },
    items: [{
        id: 'GestioneScadenzaTitle',
        title: getJsResource('tab.tabPage.gestioneScadenza.title'),
        layout: 'border',
        items: [panelGestioneScadenza]
    }]
});


/*
 * ----------------------------------------------------------------------------
 * onReady
 * -----------------------------------------------------------------------------
 */
Ext.onReady(function() {
    /*
     * ----------------------------------------------------------------------------
     *  Viewport
     * ----------------------------------------------------------------------------
     */
    Ext.create('Ext.Viewport', {
        id: 'viewportId',
        layout: 'border',
        hideBorders: true,
        monitorResize: true,
        items: [{
            region: 'north',
            id: 'infoNodoUnita',
            height: 20,
            layout: 'form',
            border: false,
            items: [panelTestataMain]
        }, {
            region: 'center',
            id: 'pannelloForm',
            layout: 'fit',
            border: false,
            bodyStyle: 'background-color:#f4f6fc;',
            items: [tabPanelGestioneScadenza]
        }]
    });
});