ExtJS inline tree editing

[utkarshk.leeway]

Hi team,
i am using extjs4, and i am not able to find any way to do some inline editing of my tree using Ext.tree.TreeEditor class(which is not included in EXTJS4).

Can anyone help me quickly to understand the process to implement such functionality in my application.
All i want is to edit a tree leaf using inline editing and updating my database as per the changes done in inline edit mode on leaf.

Regards
UT

[mitchellsimoens]

Where did you get Ext.tree.TreeEditor?

[tobiu]

probably this one:
http://www.sencha.com/forum/showthre...eleases-native

in case of yes, i would ask your question directly in the topic of the UX, since it is related to it.

[utkarshk.leeway]

Ext.tree.TreeEditor() was shipped in EXTJS ver 3.0 however it is missing from EXTJS4.0 now.
I have tried using Ext.Editor() to convert any element into editable textfield, i was successful to edit available Div section on the page. however i now i need to know the method using which i can implement it on tree leaf

i.e. if i doubleclick on any leaf of the tree it should convert in editable text-field, and i should be able to change and save the text of it using my webservice.

Please let me know if EXTJS provides such activities to be performed on treepanel

[utkarshk.leeway]

hi tobiu.
yes this is something which is i am really looking for. i think Editing tree leafs/nodes functionality is not available in EXTJS4. Please do the needful.

Thanks in advance
UT

probably this one:
http://www.sencha.com/forum/showthre...eleases-native

in case of yes, i would ask your question directly in the topic of the UX, since it is related to it.

[Romick]

I use grid edit cell plugin

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });

Ext.grid.plugin.Editing.override({
    getEditingContext: function(record, columnHeader) {
        var me = this,
            grid = me.grid,
            store = grid.store,
            rowIdx,
            colIdx,
            view = grid.getView(),
            value;

        
        if (Ext.isNumber(record)) {
            rowIdx = record;
            record = store.getAt(rowIdx);
        } else {
            if (store.indexOf) {
                rowIdx = store.indexOf(record);
            } else {
                if (columnHeader.ownerCt.lockableInjected) {
                    if (columnHeader.locked) {
                        rowIdx = view.lockedView.indexOf(view.lockedView.getNode(record));
                    } else {
                        rowIdx = view.normalView.indexOf(view.normalView.getNode(record));
                    }
                } else {
                    rowIdx = view.indexOf(view.getNode(record));
                }
            }
        }
        if (Ext.isNumber(columnHeader)) {
            colIdx = columnHeader;
            columnHeader = grid.headerCt.getHeaderAtIndex(colIdx);
        } else {
            colIdx = columnHeader.getIndex();
        }

        value = record.get(columnHeader.dataIndex);
        return {
            grid: grid,
            record: record,
            field: columnHeader.dataIndex,
            value: value,
            row: view.getNode(rowIdx),
            column: columnHeader,
            rowIdx: rowIdx,
            colIdx: colIdx
        };
    }    
}); 

and then in column definition write

{
          text: 'Planned Date',
          dataIndex: 'col5',
          width: 70,
          sortable: false,
          renderer: Ext.util.Format.dateRenderer('d-M-Y'),
          editor: {
            xtype: 'datefield',
            format: 'd-M-Y'
          }
        } 

[rt.karthik87]

Is there way to create inline combo box renderer in tree column some thing like this

tree column.jpg

i need renderer only. not the editor one available in tree column.