第一个选项卡面板没有显示网格中的数据(ie9)
First tab panel does not show data in grid (IE 9)
我有一个选项卡面板,每个选项卡都有网格,但加载后,第一个选项卡中的数据缺失,但在第二个选项卡中显示良好,这在Extjs 4.2中的所有浏览器中都有效,但在Extjs 5.0中不工作。(在chrome中工作良好)在控制台没有错误。我对这个问题快疯了。可能是Extjs 5中的一个bug。提前谢谢。
//main panel class
Ext.define('MyApp.view.MyView', {
extend: 'Ext.tab.Panel',
alias : 'widget.myView',
id : 'myView',
autoScroll : true,
activeTab: 0,
height: 600,
layout: {
type: 'column'
},
requires : [
'MyView.view.FirstTab',
'MyView.view.SecondTab'
],
initComponent : function() {
this.items = [
{
xtype: 'panel',
id: 'fTab',
autoScroll: true,
items: [ { xtype: 'firstTab' }]
},
{
xtype: 'panel',
id: 'sTab',
autoScroll: true,
items: [ { xtype: 'secondTab' } ]
}
];
this.callParent(arguments);
}
});
//controller
var isActivieTabSet = false;
// if store1 has data show the first tab
if(store1Count > 0) {
var tab0 = myView.down('#fTab');
tab0.tab.show();
if (!isActivieTabSet) {
searchSummaryView.setActiveTab(tab0);
isActivieTabSet = true;
}
} else {
myView.down('#fTab').tab.hide();
}
//check if store2 has data
if(store2Count > 0) {
var tab1 = myView.down('#sTab');
tab1.tab.show();
if (!isActivieTabSet) {
myView.setActiveTab(tab1);
isActivieTabSet = true;
}
} else {
myView.down('#sTab').tab.hide();
}
我看到你的代码有这些问题:
- 你不应该在标签面板上设置布局。标签面板内部使用卡片布局,很可能会忽略任何传递的布局,但如果你设置它,它可能会让开发人员感到困惑
- 你在组件上设置id -它们在你发布的代码中是唯一的,但对整个应用程序来说可能不是真的。一般规则是不要手动设置id -你不需要它们。
- 你的overest -你不需要包装'firstTab'在'fTab'。我们总是尽量使用最浅的遏制链。
- 隐藏标签是非常不寻常的。我不是说它不起作用,但如果你需要隐藏一个标签,那么你可以使用一些简单的切换逻辑的卡片布局。标签面板实际上是一个卡片布局,带有标签"按钮"来切换活动卡片。
否则,代码不会给出为什么会出错的提示。我建议a)修复上述问题,如果没有帮助,b)在https://fiddle.sencha.com上准备一个展示,以便我可以运行它并找到真正的罪魁祸首。
谢谢!
1)正确,不需要在标签面板上指定布局。我把这个拿出来了
2)对,不添加id是一个很好的做法,但我们正在嵌套这些组件,并通过使用这些id来显示/隐藏。
3)对,这是我想到的第一件事,从网格中取出包装面板,它工作得很好,并显示数据,但这我们有两个问题。
a)在网格中,我们使用'pagingtoolbar'并在底部显示(在整个应用程序中相同)
this.dockedItems = [ { xtype: 'pagingtoolbar', store: this.store, displayInfo: true,
dock: 'bottom' } ];
我们正在使用CARD布局,当我们拿出面板时,它总是显示在底部,即使网格只有5条记录,它看起来很奇怪,我们不想把它放在顶部(dock: 'top')
b)其他问题是有时列标头和数据不对齐
{header: 'Number', dataIndex: 'number', flex: 1 }
如果我取出flex:1,那么所有的列都变得太窄,右边的垂直空间的一半是空的。
4)我们有这样的用例,如果网格没有任何数据,那么不显示选项卡。所以我们必须手动显示/隐藏选项卡。
让我把这些类组合起来&上传它们(但可能需要时间,因为我必须只取出必要的对象:()。
再次感谢您的帮助!我的网格在面板内,这个面板在主选项卡面板内。如果我移除了Gris上的面板,那么它可以正常工作。
//这不起作用(不显示数据在第一个选项卡)
{
xtype: 'panel',
id: 'fTab',
autoScroll: true,
items: [ { xtype: 'firstTab' }]
},
//this works
{
xtype: 'firstTab'
}
我猜这是Extjs 5.0中的一个bug,相同的代码可以在Extjs 4.2和Chrome中工作。
好的,我找到了解决方案,我必须把它添加到网格上。
bufferedRenderer: false,
在Extjs 5中,默认情况下它是正确的,当网格在带有分页的面板内时,它在IE中行为不正确。之后一切都很好:)谢谢
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- 正在将数据主题添加到所有项目
- 函数参数中的数据与指定变量之间的任何性能差异
- 在VanillaJS中模拟模型双向数据绑定
- CSS-如何定位内容数据标题
- 使用JavaScript在IE9中获取数据列表选项
- 如何在IE9中读取二进制数据
- 使用IE9更新XML数据孤岛
- Ajax 调用 IE8 不显示所有数据,适用于 Firefox 和 IE9
- Angularjs $http IE9 中的本地磁盘问题加载数据
- 带有jquery.form.js的ie8和ie9返回html,而不是来自PHP的数据echo
- 在IE9中同步使用XMLHttpRequest不会返回任何数据
- 在ie8, IE9中发送图像数据到服务器
- 无法在Firefox和IE9中获取数据,但在Chrome和Safari中可以正常工作
- 为什么我应该删除临时互联网文件(ie9),只有这样我才能加载数据
- 第一个选项卡面板没有显示网格中的数据(ie9)
- ie9上的Ajax调用(成功数据-未定义)
- enctype=“;多部分/形式数据”;ie9和chrome的工作原理不同
- 剑道UI网格在IE8中不显示任何数据;IE9