Question

过去24小时我一直试图找到这个问题的答案，但无法找到解决此问题的方法。这是：

我在ExtJS 4中使用MVC架构。我有一个tabpanel，它有一些网格作为项目。当这些网格加载时，它们没有垂直滚动条，即使我将autoScroll设置为＆＃39; true＆＃39;并且它们的内容大于屏幕可以显示的内容。我读到的关于此问题的每篇文章都已解决，将网格的父版布局设置为“适合”，但正如您在下面所见，我已经完成了它并且仍然没有滚动条...如果我定义了网格的高度，滚动条完美地工作，但我需要它以不同的高度工作... 我相信我可能会有一个过于严重的问题，但我几天前刚刚开始使用ExtJS进行开发，这对我来说仍然有点混乱......

问题是：如何使用autoScroll使这个结构有效？

因为我的声誉低于10，so you can find my app's structure here

，所以我不会在这里发布图片

请注意我写了＆＃34;布局：＆＃39;修复＆＃39;＆＃34;在图像中，但我的意思是＆＃34;布局：＆＃39; fit＆＃39;＆＃34; ：）

这是我的主视图，它有2个面板。＆＃39;中心＆＃39;一个是我加载有网格的tabpanel的地方。

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

requires:[
    // 'Ext.tab.Panel',
    // 'Ext.layout.container.Border',
    'MyApp.view.Menus'
],

xtype: 'app-main',

layout: {
    type: 'border'
},

items: [
    {
        region: 'north',
        xtype: 'panel',
        padding: '5 5 0 5',
        title: 'MyApp',
        items: {
            xtype: 'menus'
        }
    }, 
    {
        region: 'center',
        itemId: 'centerPanel',
        xtype: 'panel',
        padding: 5,
        layout: 'fit'
    }
]
});

这是将fieldset和tabpanel作为项目的视图：

Ext.define('MyApp.view.licencas.List', {
extend: 'Ext.form.Panel',
xtype: 'licencaslist',
title: 'Licenças de software',
border: false,
items: [
    {
        xtype: 'fieldset',
        title: 'Dados do Ve&iacute;culo',
        margin: 5,
        items: [
            {
                xtype: 'combobox',
                anchor: '100%',
                valueField: 'id',
                displayField: 'descricao',
                store: 'ComboEmpresas',
                typeAhead: true,
                queryMode: 'local',
                name: 'empresa',
                fieldLabel: 'Empresa'
            },
            {
                xtype: 'combobox',
                editable: false,
                valueField: 'id',
                displayField: 'descricao',
                store: 'ComboSoftwares',
                queryMode: 'local',
                name: 'software',
                fieldLabel: 'Software'
            },
            {
                name: 'valor',
                fieldLabel: 'Valor empresa:',
                xtype: 'numberfield',
                minValue: 0,
                maxValue: 100000,
                allowDecimals: true,
                disabled: true,
            },
            {
                name: 'contrato',
                fieldLabel: 'Contrato:',
                xtype: 'textfield',
                disabled: true,
            },
            {
                name: 'demonstracao',
                xtype: 'checkbox',
                fieldLabel: 'Demonstra&ccedil;&atilde;o',
                disabled: true,
            }
        ]
    },
    {
        xtype: 'licencastabpanel',
        border: false,
        margin: 5
    }
],

initComponent: function() {
    this.callParent(arguments)
}
});

最后这是我需要autoScroll属性的网格......

Ext.define('MyApp.view.licencas.placas.List', {
extend: 'Ext.grid.Panel',
xtype: 'licencasplacaslist',
store: 'EmpresaVeiculos',
border: false,
forceFit: true,
autoScroll: true,
plugins: [new Ext.grid.plugin.CellEditing({
    clicksToEdit: 1,
})],
dockedItems: [
    {
        dock: 'top',
        xtype: 'toolbar',
        items: [
            {
                text: 'Alterar todos',
                iconCls: 'money-16',
                action: 'alterartodos',
                xtype: 'button'
            },
            '->',
            {
                xtype: 'trigger',            
                name: 'searchfieldLicencasPlacas',
                itemId: 'searchfieldLicencasPlacas',
                emptyText: 'Filtrar por placa...',
                width: '500px',
                hideLabel: true,
                selectOnFocus: true,
                triggerCls: 'x-form-search-trigger'
            }                     
        ]
    }
],
columns: [
    Ext.create('Ext.grid.RowNumberer'),
    {       
        text: "Placa",
        dataIndex: 'placa',
        width: 70
    },
    {       
        text: "Serial",
        dataIndex: 'serial',
        width: 70
    },
    {
        text: "Condutor",
        dataIndex: 'condutor'
    },
    {
        text: "Ativo",
        dataIndex: 'ativo',
        width: 50
    },
    {
        text: "Data In&iacute;cio",
        dataIndex: 'data_inicio',
        format: 'd.m.Y',
        width: 60
    },
    {
        text: "Data Fim",
        dataIndex: 'dt_fim',
        format: 'd.m.Y',
        width: 60,
        editor: {
            xtype: 'datefield',
            format: 'd.m.Y'
        }
    },
    {
        text: "Contrato",
        dataIndex: 'contrato',
        width: 70,
        editor: {
            xtype: 'textfield'
        }
    },
    {
        text: "Software",
        dataIndex: 'valor_software',
        renderer: 'usMoney',
        width: 70,
        editor: {
            xtype: 'numberfield',
            minValue: 0,
            maxValue: 1000,
            allowDecimals : true
        }
    },
    {
        text: "Comunicação",
        dataIndex: 'valor_comunicacao',
        renderer: 'usMoney',
        width: 70,
        editor: {
            xtype: 'numberfield',
            minValue: 0,
            maxValue: 1000,
            allowDecimals : true
        }
    },
    {
        text: "Comodato",
        dataIndex: 'valor_comodato',
        renderer: 'usMoney',
        width: 70,
        editor: {
            xtype: 'numberfield',
            minValue: 0,
            maxValue: 1000,
            allowDecimals : true
        }
    },
    {
        text: 'Empresa para faturar',
        dataIndex: 'fatura',
        width: 200,
        editor:
            {
                xtype: 'combobox',
                displayField: 'descricao',
                valueField: 'descricao',
                store: 'ComboFaturas',
                name: 'software',
                queryMode: 'local'
            }

    }
],

initComponent: function() {
    this.callParent(arguments)
}
});

请注意，我删除了所有＆＃34;布局：＆＃39; fit＆＃39;＆＃34; （从主视图中除外，它对其他视图有影响）代码，因为它还没有工作......：）

如果我需要向您提供任何额外信息，请告诉我。我试图通过下面的图片更容易理解。

谢谢你们！

Answer 1

它的工作原理如下：

网格忽略autoScroll配置选项
网格需要一个高度，显式或由其父容器的布局控制
如果网格没有高度，它会尝试根据商店中加载的记录数垂直展开，以便它不显示滚动条
fit布局只能有一个项目 - 如果是网格，则其高度（和宽度）由父容器的大小控制

总结一下：如果你想要一个网格滚动它必须有一个高度。

ExtJS - autoScroll不显示在嵌套网格中

1 个答案: