Ext 3 to 4 Migration

[dherbolt]

Trying to migrate from ext2 to ext4.
Used compatability file also.But still getting this error
Error: [Ext.extend] Attempting to extend from a class which has not been loaded on the page.
javascript//ext-4.1.1a/ext-all-debug.js
Line 4391

Please help..

It seems that you are trying to extend ExtJS class which does not exists in ExtJS4 anymore. You can try to use ext-all-dev.js instead of ext-all-debug.js. ext-all-dev.js logs many useful informations into browser's console.
You can also set breakpoint into ext-all-dev.js to line 5908 (impl. if Ext.extend) and see the name of non-existing superclass.
Code around the line 5908:

    //<feature classSystem.backwardsCompatible>
    // Backwards compatible
    Ext.extend = function(subclass, superclass, members) {
        if (arguments.length === 2 && Ext.isObject(superclass)) {
            members = superclass;
            superclass = subclass;
            subclass = null;
        }

        var cls;

        if (!superclass) {
            Ext.Error.raise("Attempting to extend from a class which has not been loaded on the page.");
        }

Note that in ExtJS4 you should use Ext.define instead of Ext.extend to define a new class/subcalss.

[wm003]

You really should upgrade to Ext 3.4 first and ensure everything works fine. Then try the compatibility layer (which is meant for Ext 3-> Ext 4) again and try to migrate to Ext4. It will probably throw errors again, but these may be different or easier to fix. Do you also use 3rd party plugins/extensions which the compatilbilitylayer may not support? Then you also need to get Ext 4 Version of them. Ext3-4 is pain enough for large projects but Ext2-4 without a working Ext3 Version of your project will probably never get finished.

[rageshp_moxie]

Hi all,
Good Day ..

I have upgraded my Application from extjs 3 to extjs 4. But my Firebug is showing error :

TypeError: clsData.postprocessors is undefined


Ext.apply(Ext.panel.Panel.prototype, {
ext3-compat.js (line 31)


TypeError: Ext.panel.Panel is undefined
Ext.apply(Ext.panel.Panel.prototype, {
ext3-compat.js (line 31)


TypeError: clsData.postprocessors is undefined
postprocessor = clsData.postprocessors.shift(),
ext-all-debug.js (line 4718)


TypeError: Ext.Container is not a constructor
hidden:false

Here is my code :

var TabItem = new Ext.Container
(
{
title: TabData[iTab].text,
tabCls: showTabStrip ? 'TabStripVisible' : 'TabStripInvisible',
id: tabId,
itemId: tabId,
idPrefix: Id,
layout: 'border',
anchor: '0 0',
plain:true,
hideBorders: true,
items:
[
{
layout: 'anchor',
region:'west',
hideBorders: true,
width: 10,
minWidth:1,
id: Id + 'PaneLeft',
cls: 'SD_PanelLeft',
bodyStyle: 'background-color: transparent',
hidden:false

},{
region: 'center',
layout: 'border',
hideBorders: true,
id: Id + 'Main',
items: MainItems
},{
layout: 'anchor',
region:'east',
hideBorders: true,
width: 10,
minWidth:1,
cls: 'SD_PanelLeft',
bodyStyle: 'background-color: transparent',
hidden:false
},
{
region: 'south',
cls: 'SD_PanelLeft',
bodyStyle: 'background-color: transparent',
height: 10,
hidden:false
}
]
}
);

Please help.

[rageshp_moxie]

Hello


TypeError: m.postprocessors is undefined

R	eload the page to get source for: http://localhost:1339/Content/js/ext/ext-all.j

Can you please help

[er_abhisinha]

Hi,

I have recently started migrating my app to use ExtJs4 which previously was using ExtJs 3.X.

Now, so as to set the auto height of GridPanel in ExtJs 3.x I used to extend gridview class using code:

var autoheightgridview = ext.extend
(
ext.grid.gridview,
{
onlayout: function ()
{
ext.get(this.innerhd).setstyle("float", "none");
this.scroller.setstyle("overflow-x", "scroll");
}
}
);

but while migrating my app to ExtJs 4.2.x I have modified my code to:

Ext.define('Ext.grid.AutoHeightGridView', {
extend: 'Ext.view.Table',
onLayout: function ()
{
Ext.get(this.innerHd).setStyle("float", "none");
this.scroller.setStyle("overflow-x", "scroll");
}
});

which I guess defines a new class Ext.grid.AutoHeightGridView.

Now when i assign this class in the View property of grid panel I get error:

config is undefined if (config.grid.isTree) {

The code which I am using is:
var xg = Ext.grid;
var grid1;

grid1 = new xg.GridPanel({
store: store,
cm: cm1,
viewConfig: {
forceFit: false
},
//height: 343,
autoHeight : true,
loadMask: true,

//width: 800,
width:getAdminGridWidth(),
view: new Ext.grid.AutoHeightGridView(),
renderTo: 'bdy',
viewConfig: {
onLoad: Ext.emptyFn,
listeners: {
beforerefresh: function(v)
{
// v.scrollTop = v.scroller.dom.scrollTop;
// v.scrollHeight = v.scroller.dom.scrollHeight;
// v.scrollLeft = v.scroller.dom.scrollLeft;
// v.scrollWidth = v.scroller.dom.scrollWidth;
},
refresh: function(v)
{
// v.scroller.dom.scrollTop = v.scrollTop +
// (v.scrollTop == 0 ? 0 : v.scroller.dom.scrollHeight - v.scrollHeight);
// v.scroller.dom.scrollLeft = v.scrollLeft +
// (v.scrollLeft == 0 ? 0 : v.scroller.dom.scrollWidth - v.scrollWidth);
}
}
},

bbar: new Ext.PagingToolbar({ pageSize: 10,
store: (store), displayInfo: true, displayMsg: 'Displaying records {0} - {1} of {2}', emptyMsg:"No records to display"})
});

Can someone tell me where exactly I am going wrong? Any help will be highly appreciated.