1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
    jignesh.vaja is on a distinguished road

      0  

    Default Unanswered: Edit Node Name in tree like the filed value editing in grid

    Unanswered: Edit Node Name in tree like the filed value editing in grid


    Hi,
    I want to edit particular Node name in tree view for following

    http://www.vienen.co.uk/extjs4/examp...eecontext.html

    I want to do it the same way as grid editing works... like following

    http://www.vienen.co.uk/extjs4/examp...er/writer.html


    Can anyone help me for the same..?

    Thanks.

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Answers
    124
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default Tree Node editing will work, use following code

    Tree Node editing will work, use following code


    Attach the below Listener into Tree Panel
    Code:
     listeners: {
                             dblClick: function (n) {
                                 YourScope.onEditMethod();
                             }
    }
    
     , onEditMethod: function () {
                var treepanel = Ext.getCmp('treepanel')
                    , selectedNode = treepanel.getSelectionModel().getSelectedNode(); // Returns selected node
     
                if (!YourScope.treeEditor) {
                    YourScope.treeEditor = new Ext.tree.TreeEditor(treepanel, {}, {
                        cancelOnEsc: true
                        , completeOnEnter: true
                        , selectOnFocus: true
                        , allowBlank: false
                        , listeners: {
                            complete: {
                                scope: this
                               , fn: YourScope.onCompleteEdit
                            }
                        }
                    })
                }
                YourScope.treeEditor.editNode = selectedNode;
                YourScope.treeEditor.startEdit(selectedNode.ui.textNode);
            }
            , onCompleteEdit: function (treeEditor, newValue, OldValue) {
                var treePanel = Ext.getCmp('treepanel')
                treePanel.el.mask('Saving...', 'x-mask-loading');
                var editNode = treeEditor.editNode;
                var editNodeId = editNode.attributes.id;
                treePanel.el.unmask();
                editNode.setText(newValue);
    
            }
    Any Suggestions or feedback are welcome!!!!

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
    jignesh.vaja is on a distinguished road

      0  

    Default Treepanel code

    Treepanel code


    Hi, Sword

    Thanks for the reply.
    but i am still confused with your code.
    you have mentioned

    var treepanel = Ext.getCmp('treepanel')

    So here from where treepanel component will be loaded.
    &which object will be there inplace of .. YourScope. Exterior object or anything else.?

    Thanks in advance.

  4. #4
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Answers
    124
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi Jignesh
    Your two questions are:-
    1. Ext.getCmp('treepanel')
    2. YourScope

    Answer 1 :-
    First of all, you have to give an id 'treepanel' to your treepanel. Ext.getCmp returns an existing component by id, from these you will get your treepanel by using Ext.getCmp('--Id of treepanel--'). Also for more details check the link http://docs.sencha.com/ext-js/3-4/#!/api/Ext-method-getCmp

    Answer 2 :-
    Actually, i am not sure what you are using as a parent of your treepanel, maybe it is a window or a container.
    Here YourScope is the scope of your treepanel's parent.

    For eg., if you are building a treepanel inside a window, then that window's scope should come in the place of 'YourScope' in my code.

    I am assuming that you know the concept about scope and changing scope with ExtJs. If you are not aware check this link http://aboutfrontend.com/extjs/javas...d-extjs-scope/


    Any more questions/feedback are welcome.

    Have a nice day!!!

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
    jignesh.vaja is on a distinguished road

      0  

    Default


    Hi,
    sword

    I have tried to implement your code for node name editing in tree.
    I am getting the below error

    treepanel is undefined for the this line code.

    ,selectedNode = treepanel.getSelectionModel().getSelectedNode(); // Returns selected nodeI think it is because treepanel class is not getting included here..? but i am not getting exactly

    one more thing. where is treeeditor.js in secha ext structure & how can i use that as per this line

    Ext.tree.TreeEditor

    can you help me for this..?


    Thanks..

  6. #6
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Answers
    124
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi Jignesh
    Use following code for edit tree node

    Code:
        {
                         xtype: 'treepanel'
                         , id: 'treepanel'
                         , autoScroll: true
                         , split: true
                         , loader: new Ext.tree.TreeLoader()
                         , root: new Ext.tree.AsyncTreeNode({
                                    expanded: true
                                    , text: 'Information'
                                    , children: [
                                            {
                                                text: 'BookStore'
                                                , id: 'book'
                                                , expanded: true
                                                , children: [
                                                        {
                                                            text: 'Science'
                                                            , leaf: true
                                                        },
                                                        {
                                                            text: 'Computer'
                                                            , leaf: true
                                                        }
                                                ]
                                            }
                                    ]
                         })
                         , listeners: {
                             dblClick: function (n) {
                                 YourScope.onEditItem();  //please replace YourScope according to your scope
                             }
                         }
       }
    
    , onEditItem: function () {
                var treepanel = Ext.getCmp('treepanel')
                    , selectedNode = treepanel.getSelectionModel().getSelectedNode();
                if (!YourScope.treeEditor) {
                    YourScope.treeEditor = new Ext.tree.TreeEditor(treepanel, {}, {
                        cancelOnEsc: true
                        , completeOnEnter: true
                        , selectOnFocus: true
                        , allowBlank: false
                        , listeners: {
                            complete: {
                                scope: YourScope
                               , fn: YourScope.onCompleteEdit
                            }
                        }
                    })
                }
                YourScope.treeEditor.editNode = selectedNode;
                YourScope.treeEditor.startEdit(selectedNode.ui.textNode);
            }
            , onCompleteEdit: function (treeEditor, newValue, OldValue) {
                var treePanel = Ext.getCmp('treepanel')
                treePanel.el.mask('Saving...', 'x-mask-loading');
                var editNode = treeEditor.editNode
                     , editNodeId = editNode.attributes.id;
                treePanel.el.unmask();
                editNode.setText(newValue);
            }
    Hope It will work for you
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
    jignesh.vaja is on a distinguished road

      0  

    Default Still having issue

    Still having issue


    Hi Sword,

    Thanks for support so far, i have implement the code which you suggested but still i am facing issue, now it give me javascript error as below.

    Error: Ext.tree.TreeLoader is not a constructor

    I guess i need to add some resource for TreeLoader but not getting any file related to it. I have upload code on my live server so you can review
    http://122.170.114.165/sencha_tree/e...e/treedata.htm

    Thanks in advance for help.

  8. #8
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Answers
    124
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default check this

    check this


    Hi Jignesh,

    i guess you are using ExtJs 4.X version....
    check this....http://stackoverflow.com/questions/7370769/ext-tree-treeloader-is-not-a-constructor-error

    Have a nice day!!!
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  9. #9
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
    jignesh.vaja is on a distinguished road

      0  

    Default Still having issue

    Still having issue


    Hi Sword,

    hmmm, so do you have any complete example which have facility of editing a node?

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar