我们将应用程序升级到Extjs版本5.1.0并使用Sencha Cmd 5.1.0.26进行构建,当我们从卡片视图切换到另一个时,我们面临布局问题。
我们在视口中使用'border'布局,在中心区域使用'card'布局。
这是我的视口
Ext.define('MyApp.view.Viewport', {
extend : 'Ext.container.Viewport',
id : 'myviewpoint',
flex: 1,
layout :
{
type : 'border'
},
initComponent : function() {
this.items = [
{
xtype : 'appheader',
region : 'north'
},
{
xtype : 'appcenter',
region : 'center'
},
{
xtype : 'appfooter',
region : 'south'
}];
this.callParent(arguments);
}
});
and here is my center
Ext.define('MyApp.view.layout.Center', {
extend: 'Ext.panel.Panel',
alias : 'widget.appcenter',
id: 'appcenter',
requires: [..... ],
items: [
{ xtype: 'homeCard1' },
{ xtype: 'menuCard2', hidden: true},
{ xtype: 'menuCard2', hidden: true}
]
});
当用户从homeCard1切换到menuCard2时,它会抛出一些参考错误,整个布局搞砸了,没有任何效果。
实际上只有在第二个视图(卡片)有sencha-chart
时才会发生这是我的图表类,此功能正常。但是当我从一个页面/视图切换到另一个页面/视图时,会出现错误。
我正在使用setActiveItem()来显示其他视图
this.getCenterRegion().getLayout().setActiveItem('menuCard2');
图表JS文件
Ext.define('MyApp.view.MyAumPieChart', {
extend : 'Ext.panel.Panel',
alias : 'widget.guidelineReconStatusAumPieChart',
id : 'myAumPieChart',
requires : ['Ext.chart.PolarChart',
'Ext.chart.series.Pie',
'Ext.chart.series.sprite.PieSlice',
'Ext.chart.interactions.Rotate',
'Ext.chart.interactions.ItemHighlight'],
padding: '0, 0, 0, 10',
width: 600,
dockedItems: [{
xtype: 'toolbar',
id: 'aumPieToolbar',
dock: 'top',
items: [
{ xtype : 'tbtext', id : 'aumPieTitle', text: '<b>My Pie Chart</b>', padding : '3 0 3 0' },
{ xtype : 'tbfill' },
{ xtype : 'button', id : 'aumPieSave', text: '<b><u>Save Chart</u></b>', border: 1 }
]
}],
initComponent : function() {
this.items = [
{
xtype: 'polar',
id: 'aumPieChart_id',
height: 400,
width: '100%',
interactions: ['rotate', 'itemhighlight'],
store: Ext.data.StoreManager.lookup('report.AumPieChart'),
insetPadding: 50,
innerPadding: 20,
series: {
type: 'pie',
xField: 'data',
donut: 50,
highlight: true,
label: {
field: 'name'
}
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function(storeItem, item) {
console.log(storeItem);
this.setHtml(storeItem.get('name'));
}
}
}
}
];
this.callParent(arguments);
}
});
这是我得到的错误
**Uncaught TypeError: Object [object Object] has no method 'isFocusable' ext-all-debug.js:15441**
Ext.apply.pseudos.focusable ext-all-debug.js:15441
filterByPseudo ext-all-debug.js:15163
filterItems ext-all-debug.js:15044
cq.Query.Ext.extend._execute ext-all-debug.js:15310
cq.Query.Ext.extend.execute ext-all-debug.js:15271
Ext.apply.query ext-all-debug.js:15480
Ext.define.query ext-all-debug.js:63058
Ext.define.down ext-all-debug.js:63101
Ext.define.getDefaultFocus ext-all-debug.js:75517
Ext.define.privates.getFocusEl ext-all-debug.js:75966
Ext.define.focus ext-all-debug.js:37682
Ext.define.setActiveItem ext-all-debug.js:106716
Ext.define.doSearchAndDisplay Header.js?_dc=1422407408850:265
先谢谢你的帮助!!
答案 0 :(得分:2)
This看起来与您的问题相似,似乎仍然是一个悬而未决的问题。这是他们建议绕过它的覆盖,直到他们有一个实际的修复。
Ext.define('Override.ComponentQuery', {
override: 'Ext.ComponentQuery'
},function () {
Ext.apply(this.pseudos, {
focusable: function(cmps) {
var len = cmps.length,
results = [],
i = 0,
c;
for (; i < len; i++) {
c = cmps[i];
// If this is a generally focusable Component (has a focusEl, is rendered, enabled and visible)
// then it is currently focusable if focus management is enabled or if it is an input field, a button or a menu item
if (c.isFocusable && c.isFocusable()) {
// if (c.isFocusable()) {
results.push(c);
}
}
return results;
},
});
});