Ext 3 to 4 Migration

Quote:

---

Originally Posted by pcr

Ed Spencer promised to include a desktop example in ExtJS 4.0. And yes he did. Very nice. Now I tried to migrate the Desktop from ExtJS 3.3.1 into ExtJS 4.0. In the ExtJS 4.0 HTML example 1 file is used that combines all *.js files. This file is minified. Not all javascript files in the classes.js are present as separate unminified files. Now its impossible for me to migrate the desktop.

Please mister Spencer put the missing unminified files or the unminified classes.js in the example Desktop.

Thanks

---

I'll ask Don (who wrote the new desktop) to provide unminified files for the next release

Apologies for the inconvenience. While the classes.js file is compressed, if you download the SDK, the code is uncompressed on the examples/desktop folder.

The "pure" demo classes are in that folder and the 'Ext.ux.desktop' classes are in the examples/desktop/js folder.

The online versions are here:

(Ext.ux.desktop)
http://dev.sencha.com/deploy/ext-4.0...ktop/js/App.js
http://dev.sencha.com/deploy/ext-4.0.../js/Desktop.js
http://dev.sencha.com/deploy/ext-4.0...itAllLayout.js
http://dev.sencha.com/deploy/ext-4.0...p/js/Module.js
http://dev.sencha.com/deploy/ext-4.0...ortcutModel.js
http://dev.sencha.com/deploy/ext-4.0...s/StartMenu.js
http://dev.sencha.com/deploy/ext-4.0.../js/TaskBar.js
http://dev.sencha.com/deploy/ext-4.0...op/js/Video.js
http://dev.sencha.com/deploy/ext-4.0...s/Wallpaper.js

(Samples using Ext.ux.desktop)
http://dev.sencha.com/deploy/ext-4.0...rdionWindow.js
http://dev.sencha.com/deploy/ext-4.0...desktop/App.js
http://dev.sencha.com/deploy/ext-4.0...sMenuModule.js
http://dev.sencha.com/deploy/ext-4.0...BogusModule.js
http://dev.sencha.com/deploy/ext-4.0.../GridWindow.js
http://dev.sencha.com/deploy/ext-4.0...top/Notepad.js
http://dev.sencha.com/deploy/ext-4.0...op/Settings.js
http://dev.sencha.com/deploy/ext-4.0...ystemStatus.js
http://dev.sencha.com/deploy/ext-4.0...p/TabWindow.js
http://dev.sencha.com/deploy/ext-4.0...VideoWindow.js
http://dev.sencha.com/deploy/ext-4.0...lpaperModel.js

As you know, in Extjs3.3.1 accordtionLayout support "setActiveItem" method to programmatically update active component.
But in extjs4.0, similar feature can not be found from API DOC,
Can anyone provide with a way to achieve this function.

Hi,

i have a custom Desktop built under Ext 3 which uses customized Panel-Tab's. The customizing is done with the >itemTpl: < config for the panel. This config-Option does not longer exist in ExtJs 4. How to migrate it?

Code:

---

                var config = {
                        border: false,
                        cls: 'MyApp-UserInterface-SectionMenu',
                        items: this._getSectionMenuItems(),
                        itemTpl: new Ext.XTemplate('<li class="{cls}" id="{id}"><a class="x-tab-strip-close"></a>',
                '<a class="x-tab-right" href="#"><em class="x-tab-left">',
                '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">',
                                // Begin Modification, added iconWrapper
                            '<span class="iconWrapper"></span>',
                                // End Modification
                                '{text}</span></span>',
                '</em></a></li>')
                };

---

Hi,

Now that the column model is gone, does anyone know what the replacements are for colModel.isCellEditable and colModel.getCellEditor?

Docs aren't helping, google isn't helping, the migration guide isn't helping :(

thanks

@freeranger:
Individual columns have a getEditor method and an editable property:
http://dev.sencha.com/deploy/ext-4.0...n.Column.html#

hi,

Thanks for the reply.

There is no editable property on the Column - or if there is, the documentation makes no mention of one.?

I need to loop around all the rows and columns in a grid and if the fields are editable, I want to validate them. The methods I was using took row and col params.
How can I translate this into the v4 way of doing things, where getEditor takes a record and a default field? I have to say, I am really struggling with converting to v4 - the migration guide seems rather...lacking, so it's only by hunting around and guessing and trying things out that I'm making any progress :(

thanks

I'm in the process of converting my app from V3 to V4 - so far, thanks to the webcasts and compatibility layer, this has gone pretty smoothly. However, I've now tried to get my tree up and running and I'm stumped (no pun intended!).

Previously my tree used a TreeLoader to get the tree data from the server, and once this was complete, the TreeLoader's 'load' event was used to set the style of the node to make it use the correct part of a sprite as its icon:

Code:

---


CategoryTreeLoader.on("load", function (treeLoader, node)
{
  node.setIconStyle('background-position: ' + node.attributes.iconPos + ';');
}

---

Now, in version 4, it appears that the TreeLoader no longer exists, so I've moved to using a
'Ext.data.TreeStore'. This returns me the data for the tree and the tree itself is created, however I can't see how I can get access to the individual nodes to set their CSS style (the 'load' event of a TreeStore doesn't seem to contain the node).

Unfortunately the current help page about tree's (http://dev.sencha.com/deploy/ext-4.0.0/docs/guide/tree.html) contains "TODO: icon and iconCls", so I'm stuck. If anyone can help it would be much appreciated.

Ta,
Steve

Quote:

---

Originally Posted by MuadDib-DK

First of all thank you for the migration guide! It got me a long way, but I am now stuck with a proxy problem that I can't seem to find a solution to...

I get the following error in firebug:

msg: "You are using a ServerProxy but have not supplied it with a url."
sourceClass: "Ext.data.proxy.Server"
sourceMethod: "buildUrl"

We use a lot of Ext.Ajax.request calls, are they the problem? And what can I do to fix the problem?

---

The problem is in the use of JsonStore.
In JsonStore constuctor we have following code

Code:

---

  constructor: function(config) {
        config = config || {};

        Ext.applyIf(config, {
            proxy: {
                type  : 'ajax',
                reader: 'json',
                writer: 'json'
            }
        });

        this.callParent([config]);
    }

---

In compat file we have following sequence function

Code:

---

  constructor: Ext.Function.createInterceptor(Ext.data.AbstractStore.prototype.constructor, function(config) {
                if (this.$className == 'Ext.data.NodeStore') {
                    return;
                }
                if (config.url) {
                    deprecate({pkg:'Ext.data.Store', member:'url', type:'config', alt:'proxy.url',
                        msg:'The store\'s "url" config should now be passed as a config to a valid remote-style proxy.'});

                    if (!config.proxy) {
                        deprecate({pkg:'Ext.data.Store', msg:'A store url was specified with no proxy config. Implcitily creating an AjaxProxy with that url. '+
                            'Please see the header docs for Ext.data.Store for details on properly setting up your data components.'});
                       
                        config.proxy = {
                            type: 'ajax',
                            url: config.url
                        };

---

As you can see Store created with proxy but without url property in proxy config and compat file didn't resolve the issuie, because not overwrite exist proxy object.
my temp solution is

Code:

---

Ext.override(Ext.data.JsonStore, {
    constructor: function(config) {
        config = config || {};

        Ext.applyIf(config, {
            proxy: {
                url  : config.url,
                type  : 'ajax',
                reader: 'json',
                writer: 'json'
            }
        });

        this.callParent([config]);
    }

});

---

In compat file missing find methods
Something like this:

Code:

---

Ext.override(Ext.AbstractComponent, {
    find : function(attributeName, attributeValue){
        return Ext.ComponentQuery.query('component['+attributeName+'="'+attributeValue+'"]', this)
    },
    findByType: function(xtype){
        return Ext.ComponentQuery.query(xtype, this);
    }
});

---