Results 1 to 6 of 6

Thread: [SOLVED] Problem with TreeEditor

  1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    Warsaw, Poland
    Posts
    58

    Default [SOLVED] Problem with TreeEditor

    I'm having problems with getting treeEditor to work. In my window (which code is attached below), I have 3 buttons on tbar: Add category, Edit category, Remove category. When I click add category, it is created but editor does not launch, edit button doesn't work at all.

    I'm getting this error:
    this.tree.getTreeEl is not a function
    var td = this.tree.getTreeEl().dom, nd = el.dom;
    ext-all-debug.js (line 36406)
    ExtJS 3.3.0

    Code:
    Ext.pims.textureCategoryWindow = Ext.extend(Ext.Window, {
        title: 'Zarz?dzaj kategoriami',
        layout: 'fit',
        modal: true,
        resizable: false,
        autoScroll: true,
        tbar: [
            {
                xtype: 'button',
                text: 'Nowa kategoria',
                handler: function() {
                    var node = Ext.getCmp('texturesCategoryTree').root.appendChild(new Ext.tree.TreeNode({
                        text: 'Nowa kategoria'
                    }));
                    Ext.getCmp('texturesCategoryTree').getSelectionModel().select(node);
                    setTimeout(function() {
                        Ext.getCmp('texturesCategoryTree').treeEditor.triggerEdit(node);
                    }, 10);
                }
            },
            {
                xtype: 'button',
                text: 'Edytuj kategori?',
                handler: function() {
                    var node = Ext.getCmp('texturesCategoryTree').getSelectionModel().getSelectedNode();
                    Ext.getCmp('texturesCategoryTree').treeEditor.triggerEdit(node);
                }
            },
            {
                xtype: 'button',
                text: 'Usu? kategori?',
                handler: function() {
                    var comp = Ext.getCmp('texturesCategoryTree');
                    var node = comp.getSelectionModel().getSelectedNode();
                    if (node) {
                        node.destroy();
                    }
                }
            }
        ],
        initComponent: function() {
            Ext.pims.textureCategoryWindow.superclass.initComponent.call(this, arguments);
            var formPanel = new Ext.FormPanel({
                labelWidth: 150,
                frame: false,
                layout: 'form',
                bodyStyle: 'padding:5px 5px 5px 5px',
                width: 400,
                height: 300,
                autoScroll: true,
                defaults: { width: 200 },
                defaultType: 'textfield',
                defaults: { anchor: '0' },
                border: false,
                record: null,
                items: [
                    {
                        xtype: 'treepanel',
                        id: 'texturesCategoryTree',
                        useArrows: true,
                        autoScroll: true,
                        animate: true,
                        enableDD: true,
                        containerScroll: true,
                        border: false,
                        rootVisible: false,
                        dataUrl: '../../Textures/GetTexturesCategoriesTree',
                        root: {
                            nodeType: 'async',
                            text: '',
                            draggable: false
                        },
                        treeEditor: new Ext.tree.TreeEditor(this)
                    }
                ],
                buttons: [{
                    text: 'Zapisz',
                    formBind: true,
                    scope: this,
                    handler: this.submit
                }, {
                    text: 'Anuluj',
                    scope: this,
                    handler: this.close
                }]
            });
        this.add(formPanel);
        },
        submit: function() {
            this.getForm().submit({
                url: '../../Textures/AddCategory',
                waitTitle: 'Prosz? czekaj...',
                waitMsg: 'Twoje zmiany s? zapisywane...',
                success: function() {
                    this.close
                }
            });
        },
        getForm: function() {
            return this.items.items[0].getForm();
        }
    });

  2. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    Warsaw, Poland
    Posts
    58

    Default

    Any thoughts?

  3. #3
    Sencha User Screamy's Avatar
    Join Date
    Jun 2008
    Posts
    244

    Default

    The creation/initialization of the 'tbar' has to be moved inside of initComponent().

  4. #4
    Sencha User
    Join Date
    Apr 2010
    Location
    Warsaw, Poland
    Posts
    58

    Default

    Made this change and still same thing:

    Code:
    Ext.pims.textureCategoryWindow = Ext.extend(Ext.Window, {
        title: 'Zarz?dzaj kategoriami',
        layout: 'fit',
        modal: true,
        resizable: false,
        autoScroll: true,
        initComponent: function() {
            Ext.pims.textureCategoryWindow.superclass.initComponent.call(this, arguments);
            var formPanel = new Ext.FormPanel({
                labelWidth: 150,
                frame: false,
                layout: 'form',
                bodyStyle: 'padding:5px 5px 5px 5px',
                width: 400,
                height: 300,
                autoScroll: true,
                defaults: { width: 200 },
                defaultType: 'textfield',
                defaults: { anchor: '0' },
                border: false,
                record: null,
                tbar: [
                    {
                        xtype: 'button',
                        text: 'Nowa kategoria',
                        handler: function() {
                            var node = Ext.getCmp('texturesCategoryTree').root.appendChild(new Ext.tree.TreeNode({
                                text: 'Nowa kategoria'
                            }));
                            Ext.getCmp('texturesCategoryTree').getSelectionModel().select(node);
                            setTimeout(function() {
                                Ext.getCmp('texturesCategoryTree').treeEditor.triggerEdit(node);
                            }, 10);
                        }
                    },
                    {
                        xtype: 'button',
                        text: 'Edytuj kategori?',
                        handler: function() {
                            var node = Ext.getCmp('texturesCategoryTree').getSelectionModel().getSelectedNode();
                            Ext.getCmp('texturesCategoryTree').treeEditor.triggerEdit(node);
                        }
                    },
                    {
                        xtype: 'button',
                        text: 'Usu? kategori?',
                        handler: function() {
                            var comp = Ext.getCmp('texturesCategoryTree');
                            var node = comp.getSelectionModel().getSelectedNode();
                            if (node) {
                                node.destroy();
                            }
                        }
                    }
                ],
                items: [
                    {
                        xtype: 'treepanel',
                        id: 'texturesCategoryTree',
                        useArrows: true,
                        autoScroll: true,
                        animate: true,
                        enableDD: true,
                        containerScroll: true,
                        border: false,
                        rootVisible: false,
                        loader: new Ext.tree.TreeLoader({
                            url: '../../Textures/GetTexturesCategoriesTree'
                        }),
                        root: new Ext.tree.AsyncTreeNode({
                            expanded: true,
                            id: '0',
                            text: ''
                        }),
                        treeEditor: new Ext.tree.TreeEditor(this)
                    }
                ],
                buttons: [{
                    text: 'Zapisz',
                    formBind: true,
                    scope: this,
                    handler: this.submit
                }, {
                    text: 'Anuluj',
                    scope: this,
                    handler: this.close
                }]
            });
            this.add(formPanel);
        },
        submit: function() {
            this.getForm().submit({
                url: '../../Textures/AddCategory',
                waitTitle: 'Prosz? czekaj...',
                waitMsg: 'Twoje zmiany s? zapisywane...',
                success: function() {
                    this.close
                }
            });
        },
        getForm: function() {
            return this.items.items[0].getForm();
        }
    });

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    You are creating the TreeEditor wrong (look in the API docs at the parameters for the constructor).

  6. #6
    Sencha User
    Join Date
    Apr 2010
    Location
    Warsaw, Poland
    Posts
    58

    Default

    Thanks Condor, this helped.

    Code:
    Ext.pims.textureCategoryWindow = Ext.extend(Ext.Window, {
        title: 'Zarz?dzaj kategoriami',
        layout: 'fit',
        modal: true,
        resizable: false,
        autoScroll: true,
        initComponent: function() {
            Ext.pims.textureCategoryWindow.superclass.initComponent.call(this, arguments);
            
            var textureTreePanel = new Ext.tree.TreePanel({
                useArrows: true,
                autoScroll: true,
                animate: true,
                enableDD: true,
                containerScroll: true,
                border: false,
                rootVisible: false,
                loader: new Ext.tree.TreeLoader({
                    url: '../../Textures/GetTexturesCategoriesTree'
                }),
                root: new Ext.tree.AsyncTreeNode({
                    expanded: true,
                    id: '0',
                    text: 'Root'
                })
            });
    
            var textureTreeEditor = new Ext.tree.TreeEditor(textureTreePanel, {}, {
                allowBlank: false,
                blankText: 'Nazwa jest wymagana',
                selectOnFocus: true
            });
    
    ........

Similar Threads

  1. Replies: 2
    Last Post: 12 Apr 2012, 6:20 AM
  2. Replies: 2
    Last Post: 21 Jun 2010, 12:05 AM
  3. TreeEditor - CancelEdit problem
    By notdet in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 25 Apr 2009, 12:33 PM
  4. TreeEditor help!
    By cecol in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 6 Sep 2007, 4:45 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •