Ext 3 to 4 Migration

[dstarr@allofe.com]

Hi,

I have started to migrate our codes from Ext 3 to 4. I find an issue with grid when using compatibility layer - grid headers are above the toolbar. It is really weird. Does anyone have the same issue? I guess it is a bug of compatibility files as it does not happen in pure Ext 4 environment.

Thanks.

May have already been answered, but it's because of the overridden Ext.panel.AbstractPanel.prototype.getDockedItems at the top of ext3-core-compat.js. If you remove that method, your grid column headers will show below tbars.

[brian.moeskau]

May have already been answered, but it's because of the overridden Ext.panel.AbstractPanel.prototype.getDockedItems at the top of ext3-core-compat.js. If you remove that method, your grid column headers will show below tbars.

Yes that was answered somewhere else, and also fixed in the current version of the compat file.

[zombeerose]

If you run the tree drag&drag example (../ext/examples/tree/two-trees.html), you will notice that all folders are displayed first in alpha order followed by files.

However, if you include the compatibility files into the two-trees.html source, then sorting is completely ignored (reason unknown).

<script type="text/javascript" src="../extjs/compatibility/ext3-core-compat.js"></script>
<script type="text/javascript" src="../extjs/compatibility/ext3-compat.js"></script>

Applies to sorters and folderSort options.

[cnesbit]

Anyone else getting this error?

cls.override is not a function
http://cnesbit/v2/ext4.0.1/ext-all-debug.js
Line 171

It happens in my overrides file where in Ext3 I could code one of the following options...

Ext.override(Ext.Panel,{
...
}) ;
//or
Ext.Panel.override({
...
});

Note that, I even converted all my override declarations to the first way thinking that might solve the problem (that's how the ext4 api does it, am I right?)
What am I needing to change to migrate to Ext4 with my overrides file?

[brian.moeskau]

Anyone else getting this error?

cls.override is not a function
http://cnesbit/v2/ext4.0.1/ext-all-debug.js
Line 171

It happens in my overrides file where in Ext3 I could code one of the following options...

Ext.override(Ext.Panel,{
...
}) ;
//or
Ext.Panel.override({
...
});

Note that, I even converted all my override declarations to the first way thinking that might solve the problem (that's how the ext4 api does it, am I right?)
What am I needing to change to migrate to Ext4 with my overrides file?

[class].override should still work just fine (as will Ext.override), except that now the overridden class must have been defined in the Ext class system I believe (via Ext.define). Are you getting the error on a non-Ext class?

[cnesbit]

Are you getting the error on a non-Ext class?

turns out the specific problem was with an override written by nerdydude81 to enable printing of Ext.Elements (in prior versions of Ext). In Ext4, changing the code from overriding Ext.Element to overriding Ext.Component gets rid of the error, but I still have about 150+ errors to dig through just to pull up the webapp (it's a hefty beast of an app). I guess I have no way of knowing if the printing still works until I finish correcting all the other errors first.

wow, this migration is a HUGE process (nearly 200,000 lines of code, per webapp, for a single developer to maintain )

[ShaneMc]

In Ext 3 the fieldset had a config property forceLayout to enforce the container to doLayout initially.
How can i achieve the same in Ext4?

[c.darmon]

I'm migrating my desktop application, and I found a big problem using a window plugin in a Module window (see desktop example) in extjs4 :
When I want to move the window plugin it disappears ... (all was fine with extjs3)
Did some one already resolved this problem?
I want to try building a constrained window in place, is it the right solution?

Thanks,
Caroline.

[c.darmon]

Because of lake of tree editor in extjs4, I adapt the tree grid editor on tree to be able renaming nodes into tree from an edition event fires on tree.
I use a custom class extending Ext.grid.plugin.CellEditing (see below) :

Ext.define( 'MyTreeEditor', {
    extend: 'Ext.grid.plugin.CellEditing',
    alias: 'editing.treeeditor',

    // initialization method of plugin
    init: function(cmp) {
        this.hostCmp = cmp;
        // on parent event
        this.hostCmp.on({
            // on edition event
            edition : {
                fn : function(view, record, item, index, e){
                    // call the start edition method
                    this.startEdit(record, view.getHeaderAtIndex(0),this);
                },
                scope: this
            }
        });
        this.callParent(arguments);
    },
    
    onEditComplete : function(ed, value, startValue) {
        if (value !== startValue) {
            //TODO: validation
        }
        this.callParent(arguments);
    },

    /**
     * overwrite the initEditTriggers to disable edition on click/dblclick
     * and to add custom 
     */
    initEditTriggers: function() {

        var me = this,
        view = me.view;

        me.on({
            edit: function(editor,event){
                // if there is a modification
                if (event.originalValue !== event.value) {
                    // delegate rename action on model
                    event.record.rename(event.value,function(result){
                        // if a result has been returned : success
                        if(result) {
                            // delegate commit action to delete modification flag
                            event.record.commit();
                            var rec = event.record.data;
                            // in case of directory
                            if (!rec.leaf){
                                // set folder's ID returned by server
                                rec.id = result.id;                                
                            }
                        } else { // in case of transaction error
                            if (event.originalValue === amdaModel.AmdaNode.NEW_DIR_NAME) {
                                var toto;
                            } else {
                                // reset originalValue:
                                event.record.value = event.originalValue;
                                event.record.data.text = event.originalValue;
                                event.record.commit();
                            }
                        }
                    });
                }

            }
        });

        // enable Enter key and Esc Key
        view.on('render', function() {
            me.keyNav = Ext.create('Ext.util.KeyNav', view.el, {
                enter: me.onEnterKey,
                esc: me.onEscKey,
                scope: me
            });
        }, me, { single: true });
    },

    //overwrite the getEditing context because we do not need the rowId
    getEditingContext: function(record, columnHeader) {
        var me = this,
        grid = me.grid,
        store = grid.store,
        colIdx,
        view = grid.getView(),
        value;

        // getting colIdx and real columnHeader
        if (Ext.isNumber(columnHeader)) {
            colIdx = columnHeader;
            columnHeader = grid.headerCt.getHeaderAtIndex(colIdx);
        } else {
            colIdx = columnHeader.getIndex();
        }
        // getting current value
        value = record.get(columnHeader.dataIndex);

        // return editing context
        return {
            grid: grid,
            record: record,
            field: columnHeader.dataIndex,
            value: value,
            column: columnHeader,
            colIdx: colIdx
        };
    }
} );

I use it in tree declaration as :

var tree = Ext.create('Ext.tree.Panel', {
    [...]
    selModel: { //use the grid cell model
        selType: 'cellmodel',
    },
    //add our custom editor plugin
    plugins: [new MyTreeEditor({ pluginId: 'treeEditor' })]
});
    }

All works fine until extjs4.0.1 but not in 4.0.2 which has still no tree editor...

Please, can someone help me...
Caroline

[ShaneMc]

Just updated my code to use the latest version 4.0.2.
However the grids checkbox selection model now seems to appear twice? But not in version 4.0.1?