Question

我在tabpanel上遇到复杂对象的问题。我有2个复杂的对象，包括商店，窗口，网格，树等等。这是对象的开头：

Ext.define('Ext.app.DocumentsContainer', {

    extend: 'Ext.container.Container',   

    initComponent: function(){

        var documentsStore = Ext.create('Ext.data.Store', {

我有两个面板的tabpanel（每个对象一个）。带tabpanel的完整视口代码：

Ext.create('Ext.container.Viewport', {
        layout: 'border',
        padding: '5',
        items: [
            {
                xtype: 'container',
                region: 'north',
                height: 50
            },
            {
                xtype: 'tabpanel',
                activeTab: 0,
                region: 'center',
                width: 100,
                items: [
                {
                    xtype: 'panel',
                    title: 'Documents',
                    layout: 'border',
                    items: Ext.create('Ext.app.DocumentsContainer'),
                },{
                    xtype: 'panel',
                    title: 'Transmittals',
                    layout: 'border',
                    items: [Ext.create('Ext.app.TransmittalsContainer')],
                }]
            }
        ],
    });

当我测试我的页面时，有一个问题，因为某个对象的某些数据在另一个对象的网格中显示不正常，或者根本没有发挥作用。但是这两个对象一次正常工作。我想，我可以通过在打开选项卡时动态加载对象来修复它，但不知道我该怎么做。有什么建议吗？

Answer 1

你正在过度使用tabpanel。 tabpanels项目将自动拉伸其内容。所以它可能对你有用。

这样做。将DocumentContainer更改为pe面板（因此它可以有标题。）

Ext.define('Ext.app.DocumentsContainer', {

    extend: 'Ext.panel.Panel',   

    initComponent: function(){

        var documentsStore = Ext.create('Ext.data.Store', {

并将tabpanel更改为此。我还删除了中心区域的宽度。中心区域自动填充剩余的边框布局空间。

Ext.create('Ext.container.Viewport', {
        layout: 'border',
        padding: '5',
        items: [
            {
                xtype: 'container',
                region: 'north',
                height: 50
            },
            {
                xtype: 'tabpanel',
                activeTab: 0,
                region: 'center',
                items: [
                    Ext.create('Ext.app.DocumentsContainer', {title:'Documents'}),
                    Ext.create('Ext.app.TransmittalsContainer', {title:'Transmittals'})
                ]
            }
        ],
    });

另外。正如斯特凡所说。永远不要在ExtJS4代码中使用id。他们是邪恶的，最终会释放你的结果。 itemId或简单的Ext.DomQuery是这样做的方法。

Answer 2

如果不了解您的两个组件Ext.app.DocumentsContainer和Ext.app.TransmittalsContainer的内部结构，则无法可靠地回答您的问题。也许您将相同的ID分配给两个不同的内部组件 - 这通常是混合数据的原因。

其次，Frederic是对的 - 你的组件过于严厉。 tabpanel内的两个面板都是不必要的，因为您可以将您的组件直接放入tabpanel，如Frederic所示。但是，如果您坚持保留面板，请尝试将layout更改为fit，因为该布局类型处理单项组件（调整单个组件的大小以适合父框架）。

Extjs tabpanel包含大型复杂对象或动态加载的对象

2 个答案: