IE 8 error on getViewport

[martinrame]

Hi, I'm getting the error "object does not support this action" on IE 8. On Chrome and Firefox it works as expected.

The error is raised when I want to get a reference to the Viewport. My viewport has the alias "widget.viewport", also in the controller I created this ref:


refs: [
{
ref: 'viewport',
selector: 'viewport'
}
]


The line of code with the problem is inside a function defined in the controller:


showMainView: function()
{
item = this.getViewport().down('container[region=center]');
}

Why I'm getting the error?.

This is the complete controller:


Ext.define('MyApp.controller.Main', { extend: 'Ext.app.Controller',


models: [
'Customer'
],
stores: [
'Customers'
],
views: [
'CustomerGrid',
'MainToolbar'
],
refs: [
{
ref: 'viewport',
selector: 'viewport'
}
],


init: function() {
this.control({
});
},


showMainView: function() {
mainToolBar = Ext.create('MyApp.view.MainToolbar', {});
mainView = Ext.create('MyApp.view.CustomerGrid', {flex: 1});
// to be able to use "this.getViewport()" the a ref has to be added
// please take a look at the refs section of this file.
item = this.getViewport().down('container[region=center]');
item.add(mainToolBar);
item.add(mainView);
// load the store
this.getCustomersStore().load();
},


destroyAll: function() {
mainToolBar.destroy();
mainView.destroy();
this.destroy();
}


});

P.S.: I'm using ext-4.0.2a from cachefly.

[mitchellsimoens]

Is your viewport your own class or Ext.container.Viewport?

[martinrame]

I created the Viewport using Designer. It created a base class and an implementation class:

Base class:


Ext.define('MyApp.view.ui.MyViewport', { extend: 'Ext.container.Viewport',

layout: {
type: 'border'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'container',
layout: {
align: 'stretch',
type: 'vbox'
},
floatable: false,
region: 'center'
},
{
xtype: 'container',
height: 100,
html: '<h1 class="x-panel-header">Page Title</h1>',
floatable: false,
region: 'north'
},
{
xtype: 'container',
height: 50,
html: '<h1 class="x-panel-header">Page Footer</h1>',
floatable: false,
region: 'south'
}
]
});


me.callParent(arguments);
}


});

Implementation:


Ext.define('MyApp.view.MyViewport', { extend: 'MyApp.view.ui.MyViewport',
alias: 'widget.viewport',


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


});

In app.js the viewport is referenced as:



views:['MyViewport']

[mitchellsimoens]

The xtype viewport already exists for Ext.container.Viewport so first you need to choose a different, unique xtype.

[martinrame]

I replaced the alias to "widget.viewportmain", also the references are now:


refs: [
{
ref: 'viewportmain',
selector: 'viewportmain'
}
]


Also replaced item = this.getViewport().down('container[region=center]'); to item = this.getViewportmain().down('container[region=center]');

But I'm still getting the error on IE 8. On Chrome of course it works.

[martinrame]

I found the solution. This is unbelievable, the problem was the usage of the variable named "item" inside a function.

In my controller I had this:


item = this.getViewportmain().down('container[region=center]');
item.add(mainToolBar);
item.add(mainView);

The fix was to not use the name "item", for example "center_container":


center_container = this.getViewportmain().down('container[region=center]');
center_container.add(mainToolBar);
center_container.add(mainView);