Javascript Ext grid PagingToolbar不显示在IE上

我的视口如下所示。

panel2

有一个网格，其中有一个

PagingToolbar

。它在IE中没有显示，在FF中几乎没有显示。如果我没有北区，它可以正常工作。 原因可能是什么

Ext.create('Ext.Viewport', {
    layout: 'border',
    border : 0,
    items: [
         {
            region: 'north',
            html : 'Some html'
         },
            { region: 'center',
            layout:'fit',
            split : true,
            items : [panel1, panel2]
         }
    ]
    });

下面是一个类似的例子：

---

按钮没有显示。

我在看你的小提琴，但有几件事不对劲

• CSS看起来像一个不完整的Neptune样式表
• 通过在区域面板中执行以下操作：

  items:resultsPanel

  ，您正在该面板内创建一个新面板
• 您在元素上设置了不正确的配置，我的建议是查看，因为它列出了所有有效的配置选项
• 你可能想看看

现在，对于布局，我不知道您到底想要什么，但这可能很接近：

var导航=功能（面板，方向）{
var layout=panel.getLayout（）；
布局[方向]（）；
Ext.getCmp（'move-prev'）.setDisabled（！layout.getPrev（））；
Ext.getCmp（'move-next'）.setDisabled（！layout.getNext（））；
};
Ext.define（'App.view.RequestPanel'{
扩展：“Ext.panel.panel”，
别名：“widget.requestpanel”，
标题：“请求小组”，
项目：[{
html:“示例结果”
}],
bbar：[{
xtype:'按钮'，
文本：“搜索”
}, {
xtype:'按钮'，
文本：“重置”
}]
});
Ext.define（'App.view.ResultPanel'{
扩展：“Ext.panel.panel”，
别名：“widget.resultpanel”，
标题：“结果面板”，
布局：“卡片”，
项目：[{
xtype:'panel'，//标准面板，但这可能是另一个超级复杂的面板
html:“示例结果1”
}, {
//如果未指定xtype，则默认为xtype:“面板”
html:“示例结果2”
}, {
//如果未指定xtype，则默认为xtype:“面板”
html:“示例结果3”
}, {
//如果未指定xtype，则默认为xtype:“面板”
html:“示例结果4”
}],
bbar：[{
xtype:'按钮'，
文本：“上一个”，
处理程序：函数（btn）{
导航（btn.up（'panel'），'prev'）；
}
}, {
xtype:'按钮'，
文本：“下一个”，
处理程序：函数（btn）{
导航（btn.up（“面板”），“下一步”）；
}
}]
});
Ext.create（'Ext.container.Viewport'{
布局：“边框”，
项目：[{
地区：'北'，
html:‘Sencha’，
边界：假
}, {
xtype:'requestpanel'，//您的超级复杂面板
区域：'中心'，//面板的上下文特定属性
布局：“fit”，//面板的上下文特定属性
flex:1//面板的上下文特定属性
}, {
区域：“南部”//您的超级复杂面板
xtype:'resultpanel'，//面板的上下文特定属性
flex:1，//面板的上下文特定属性
可折叠：true，//面板的上下文特定属性
分裂：对
}]
});

---

编辑：更新了小提琴和代码示例以使用

Ext.define

@LaurenZonneveld Yeah

panel2

隐藏，直到提交

panel1

。在这种情况下，卡片布局可能更合适。@LaurenZonneveld在

视口上有
拆分
属性？我有IE 9，它也发生在FF中，只是在FF中稍微好一点。不，我的坏，在示例中修复。来自文档：此配置选项将应用于此布局管理的子项。具有split:true的每个区域将获得一个拆分器，该拆分器允许手动调整容器的大小。除中心区域外。在带有按钮的面板上有一个属性
hidden:true
。其次，边框布局的中心区域不能折叠。第三，在面板中创建面板。这是不必要的过度嵌套，请遵循我的示例或查看Ext.define。​谢谢你的邀请​ ​​​快的​答复。​​ ​​我们不能将“请求”面板和“重新响应”面板放在视口中。面板非常复杂。因此，使用
Ext.define
。我已经更新了小提琴和代码示例。您还应该阅读我在示例中包含的注释。如果你的应用程序很复杂，也可以按照我的建议看看MVC。
var navigate = function (panel, direction) {
    var layout = panel.getLayout();
    layout[direction]();
    Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
    Ext.getCmp('move-next').setDisabled(!layout.getNext());
};

Ext.define('App.view.RequestPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.requestpanel',

    title: 'Request Panel',
    items: [{
        html: 'Sample Result'
    }],
    bbar: [{
        xtype: 'button',
        text: 'Search'
    }, {
        xtype: 'button',
        text: 'Reset'
    }]
});

Ext.define('App.view.ResultPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.resultpanel',

    title: 'Result Panel',
    layout: 'card',

    items: [{
        xtype: 'panel', // Standard panel, but this could be another super complex panel
        html: 'Sample Result 1'
    }, {
        // Defaults to xtype: 'panel', if no xtype is specified
        html: 'Sample Result 2'
    }, {
        // Defaults to xtype: 'panel', if no xtype is specified
        html: 'Sample Result 3'
    }, {
        // Defaults to xtype: 'panel', if no xtype is specified
        html: 'Sample Result 4'
    }],
    bbar: [{
        xtype: 'button',
        text: 'Previous',
        handler: function (btn) {
            navigate(btn.up('panel'), 'prev');
        }

    }, {
        xtype: 'button',
        text: 'Next',
        handler: function (btn) {
            navigate(btn.up('panel'), 'next');
        }
    }]
});

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Sencha</h1>',
        border: false
    }, {
        xtype: 'requestpanel', // Your super complex panel
        region: 'center', // Context specific properties for the panel
        layout: 'fit', // Context specific properties for the panel
        flex: 1 // Context specific properties for the panel
    }, {
        region: 'south', // Your super complex panel
        xtype: 'resultpanel', // Context specific properties for the panel
        flex: 1, // Context specific properties for the panel
        collapsible: true, // Context specific properties for the panel
        split: true
    }]
});