Ext 3 to 4 Migration

[brian.moeskau]

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?

forceLayout was a Container config in 3.x. I would assume that it's no longer needed since 4.0 tends to manage that type of stuff for you better than 3.x did (though I haven't personally studied that particular use case in 4.0). If there is a specific problem where something is not working I would post it as a separate item in the help or bugs forums.

[brian.moeskau]

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.

I'm not sure I understand the problem... Have you tried comparing the Ext 3 and 4 versions of the desktop? The Ext 4 version works great. In this case, it might be easier to model your code after that example rather than trying to migrate the old one manually. In fact, the things that required custom UX'es in 3.x (the start menu and task bar) have now been greatly simplified and probably aren't worth trying to port from 3.x.

[brian.moeskau]

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

Are you getting any specific errors? You might have to debug a little bit for this, as it's impossible on this end to guess what the issue might be without a working test case. Are you testing this out with one of the standard Ext tree examples?

[brian.moeskau]

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?

You mean with the compatibility layer active?

[ShaneMc]

You mean with the compatibility layer active?

Hey Brian, Yeah it was the compatibility layer causing the problem.
Removed it and everything works fine.

[abctenorio@gmail.com]

the chart interactive with gird cause overflow memory and crash firefox 4.

[brian.moeskau]

the chart interactive with gird cause overflow memory and crash firefox 4.

Sounds like something that you should report in the Bugs forum as a new thread with more info about what you're doing.

[peet]

when i call:

		this.store.tree.filter(new Ext.util.Filter({
			filterFn : testnode
		}), true);

where "this" is a TreePanel, I get:

   filter: function(filters, recursive) {
        this.getRootNode().filter(filters, recursive);
ext-all-debug.js:53117Uncaught TypeError: Object [object Object] has no method 'filter'
    }

Is there a plan to implement this?

[brian.moeskau]

when i call:

		this.store.tree.filter(new Ext.util.Filter({
			filterFn : testnode
		}), true);

where "this" is a TreePanel, I get:

   filter: function(filters, recursive) {
        this.getRootNode().filter(filters, recursive);
ext-all-debug.js:53117Uncaught TypeError: Object [object Object] has no method 'filter'
    }

Is there a plan to implement this?

Filtering is implemented at the store level, not the tree level. Try this.store.filter(...)

[peet]

Debugging leads me into the empty AbstractStore methods, so neither "filter" nor "filterBy" are implemented on the TreeStore. "filter" on the Tree is implemented but, unfortunately it calls a non-existent method on the node interface (see my previous post).

Filtering trees is a cool feature and was prominent in the 3.x API docs (and my App) allowing easy searching for a Class. It was replaced by a combo box with suggestions, but the tree filtering was better IMHO. With larger structured datasets, it can be very helpful to see the filtered tree structure as the user is modifying that filter.

Thanks for your help!