Ext 3 to 4 Migration

[brian.moeskau]

If you application extends some Ext panel and it has internally configured options (defaults) which does not require the 'new' call to pass any config options, you will still have to pass on a blank config object. Because the Ext.Compat intercepts the constructors before you component is called.

someCustomCmp = new MyApp.MyPanel( {} );  //pass a blank obj, even if your custom obj contains all the required values to call it's parent component. 

Actually the compat layer should handle the case where the config is null, that's just an oversight. Thanks for pointing it out.

[kpalser]

In ExtJs3 I used style: to remove the default "text-bg.gif" background for some text controls as a visual cue to the users that the information was readonly, e.g:

{
    xtype: 'textarea',
    name: 'observations',
    flex: 1,
    style: 'background-image:none;',
    submitValue: false,
    readOnly: true
}

This doesn't work any more. Suggestions?
Thanks.

[brian.moeskau]

In ExtJs3 I used style: to remove the default "text-bg.gif" background for some text controls as a visual cue to the users that the information was readonly, e.g:

{
    xtype: 'textarea',
    name: 'observations',
    flex: 1,
    style: 'background-image:none;',
    submitValue: false,
    readOnly: true
}

This doesn't work any more. Suggestions?
Thanks.

I haven't tested the style config, but for overriding existing CSS I would recommend doing it in CSS directly instead, e.g.:

textarea.x-form-field {
   background-image: none;
}

Of course you would make this rule specific to your own ID/class or whatever you need to make it specific. This is much better since you can define the rule in one place and easily change it in one place later for all fields.

[jas88]

I've inherited an ExtJS app written against 3.x, and tried to load it with 4.0.1 and the compatibility layer. (The code was written by a contractor, using his license, so when we bought one naturally it was for 4.x.) It fails to load, blowing up with "You are using a ServerProxy but have not supplied it with a url" twice, preceded by "Registering implicit model Ext.data.Store.ImplicitModel-ext-gen1015. Please update your code to create a model explicitly", "[Ext.tree.AsyncTreeNode]: This class is no longer needed. Specify a TreeStore with an AjaxProxy instead" and "[Ext.tree.TreeLoader]: This class is no longer needed. Specify a TreeStore with standard store options to load the tree".

I might be able to find time to refactor out the 'deprecated' bits later, but in the mean time I really need to get the code running - which is surely what the compatibility layer is supposed to provide?

(Also, this thread's now approaching 20 pages, and I see similar issues have been mentioned twice already, though the proposed solutions there don't seem to help. Could this thread please be upgraded to a separate forum section, so distinct issues can have their own threads?)

[SToto98]

Hi,
My ExtJS3 application use something like this :

MyApp.windowRenderer = Ext.extend(Ext.Updater.BasicRenderer, { ... });

And with ExtJS4 (with compat layer), it return "Ext.Updater is undefined" ...

I do not found Ext.Updater anywhere in ExtJS4 neither an equivalent class, so how can I migrate this function ?

Thanks

[brian.moeskau]

I've inherited an ExtJS app written against 3.x, and tried to load it with 4.0.1 and the compatibility layer. (The code was written by a contractor, using his license, so when we bought one naturally it was for 4.x.) It fails to load, blowing up with "You are using a ServerProxy but have not supplied it with a url" twice, preceded by "Registering implicit model Ext.data.Store.ImplicitModel-ext-gen1015. Please update your code to create a model explicitly", "[Ext.tree.AsyncTreeNode]: This class is no longer needed. Specify a TreeStore with an AjaxProxy instead" and "[Ext.tree.TreeLoader]: This class is no longer needed. Specify a TreeStore with standard store options to load the tree".

I might be able to find time to refactor out the 'deprecated' bits later, but in the mean time I really need to get the code running - which is surely what the compatibility layer is supposed to provide?

The goal of the compat layer is to get you up and running with minimal effort, but almost every app will still require some manual debugging to get there. The compat layer is by no means perfect. I would strongly suggest taking a look at the migration screencasts, especially part 2. While they focus on migrating fully to Ext 4, they will also help you with strategies for debugging the types of errors you are running into.

(Also, this thread's now approaching 20 pages, and I see similar issues have been mentioned twice already, though the proposed solutions there don't seem to help. Could this thread please be upgraded to a separate forum section, so distinct issues can have their own threads?)

We already have an abundance of separate forums, and Migration from 3 to 4 is a pretty specific topic. You are of course free to start new threads at any time to post a migration bug or if you think something requires a more complete separate discussion.

[brian.moeskau]

Hi,
My ExtJS3 application use something like this :

MyApp.windowRenderer = Ext.extend(Ext.Updater.BasicRenderer, { ... });

And with ExtJS4 (with compat layer), it return "Ext.Updater is undefined" ...

I do not found Ext.Updater anywhere in ExtJS4 neither an equivalent class, so how can I migrate this function ?

Thanks

I think you are looking for Ext.ElementLoader.

[ShaneMc]

In ExtJs 3 I was able to use the syntax `ext:qtip="Some Text"` like below:

< a href="#" ext:qtip="View Actions" />

What is the equivalent to this in ExtJs 4?

[DHainzl]

In ExtJs 3 I was able to use the syntax `ext:qtip="Some Text"` like below:

< a href="#" ext:qtip="View Actions" />

What is the equivalent to this in ExtJs 4?

Have a look at the documentation of the QuickTipManager: http://docs.sencha.com/ext-js/4-0/#/...uickTipManager

To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with the data- namespace. The HTML element itself is automatically set as the quick tip target. Here is the summary of supported attributes (optional unless otherwise noted):

• hide: Specifying "user" is equivalent to setting autoHide = false. Any other value will be the same as autoHide = true.
• qclass: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).
• qtip (required): The quick tip text (equivalent to the 'text' target element config).
• qtitle: The quick tip title (equivalent to the 'title' target element config).
• qwidth: The quick tip width (equivalent to the 'width' target element config).

Here is an example of configuring an HTML element to display a tooltip from markup:
// Add a quick tip to an HTML button
<input type="button" value="OK" data-qtitle="OK Button" data-qwidth="100"
data-qtip="This is a quick tip from markup!"></input>

-- Dave

[ap]

In v3.x I can call

anyFunction.createInterceptor(function(){...}); 

and any call to anyFunction will be intercepted.

It seams that the behavior of the new static function

var newFunction = Ext.Function.createInterceptor( anyFunction, function(){}); 

has changed. That you must expect a returned function and call that function instead. A call to anyFunction will not invoke what's set in the interceptor block.

I can deal with this change. But I just want to check here, incase I'm doing something wrong.

Nevermind, looking at the source, it seems to be the only way.

createInterceptor: function(origFn, newFn, scope, returnValue) {
var method = origFn;
if (!Ext.isFunction(newFn)) {
return origFn;
}
else {
return function() {
var me = this,
args = arguments;
newFn.target = me;
newFn.method = origFn;
return (newFn.apply(scope || me || window, args) !== false) ? origFn.apply(me || window, args) : returnValue || null;
};
}
}