Ext 3 to 4 Migration

Quote:

---

Originally Posted by ap

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.

PHP Code:

---

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.

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:

Code:

---

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

---

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

Quote:

---

Originally Posted by 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:

Code:

---

{
    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.:

Code:

---

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.

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?)

Hi,
My ExtJS3 application use something like this :

Code:

---

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 :)

Quote:

---

Originally Posted by 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?

---

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.

Quote:

---

Originally Posted by jas88

(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.

Quote:

---

Originally Posted by SToto98

Hi,
My ExtJS3 application use something like this :

Code:

---

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.

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

Code:

---

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

---

What is the equivalent to this in ExtJs 4?

Quote:

---

Originally Posted by ShaneMc

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

Code:

---

< 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

Quote:

---

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

In v3.x I can call

PHP Code:

---

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


---

and any call to anyFunction will be intercepted.

It seams that the behavior of the new static function

PHP Code:

---

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.

PHP Code:

---

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;
};
}
} 


---