1. #1
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,913
    Answers
    371
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default Answered: Tree rowEditing or cellEditing

    Answered: Tree rowEditing or cellEditing


    There's not a rowEditing or cellEditing plugin for treePanel is there?

    Was hoping one of the existing framework plugins for grids would work for a treegrid, but they don't seem to out of the box.

  2. I know that Grgur, co-author of Ext JS 4 in action has written a plugin for this:

    Code:
    Ext.define('TreeCellEditing', {
        alias: 'plugin.treecellediting',					
        extend: 'Ext.grid.plugin.CellEditing',					#1
    
        init: function(tree) {
            var treecolumn = tree.headerCt.down('treecolumn');
            treecolumn.editor = treecolumn.editor || {xtype: 'textfield'};	#2
    
            this.callParent(arguments);
        },
    
        getEditingContext: function(record, columnHeader) {
            var me = this,
                grid = me.grid,
                store = grid.store,
                rowIdx,
                colIdx,
                view = grid.getView(),
                root = grid.getRootNode(),
                value;
    
            if (Ext.isNumber(record)) {
                rowIdx = record;
                //record = store.getAt(rowIdx);
                record = root.getChildAt(rowIdx);				#3
            } else {
                //rowIdx = store.indexOf(record);
                rowIdx = root.indexOf(record);					#4
            }
            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
            };
        }
    });
    Example context menu handler:
    Code:
    var onEdit = function(button, node) {
        var menu    = button.up(),						#1
            node    = node || menu.treeNode,					#2
            view    = menu.treeView,
            tree    = view.ownerCt,
            selMdl  = view.getSelectionModel(),
            colHdr  = tree.headerCt.getHeaderAtIndex(0);
    
        if (selMdl.getCurrentPosition) {					#3
            pos = selMdl.getCurrentPosition();
            colHdr = tree.headerCt.getHeaderAtIndex(pos.column);
        }
        treeEditor.startEdit(node, colHdr);					#4
    };

  3. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    I know that Grgur, co-author of Ext JS 4 in action has written a plugin for this:

    Code:
    Ext.define('TreeCellEditing', {
        alias: 'plugin.treecellediting',					
        extend: 'Ext.grid.plugin.CellEditing',					#1
    
        init: function(tree) {
            var treecolumn = tree.headerCt.down('treecolumn');
            treecolumn.editor = treecolumn.editor || {xtype: 'textfield'};	#2
    
            this.callParent(arguments);
        },
    
        getEditingContext: function(record, columnHeader) {
            var me = this,
                grid = me.grid,
                store = grid.store,
                rowIdx,
                colIdx,
                view = grid.getView(),
                root = grid.getRootNode(),
                value;
    
            if (Ext.isNumber(record)) {
                rowIdx = record;
                //record = store.getAt(rowIdx);
                record = root.getChildAt(rowIdx);				#3
            } else {
                //rowIdx = store.indexOf(record);
                rowIdx = root.indexOf(record);					#4
            }
            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
            };
        }
    });
    Example context menu handler:
    Code:
    var onEdit = function(button, node) {
        var menu    = button.up(),						#1
            node    = node || menu.treeNode,					#2
            view    = menu.treeView,
            tree    = view.ownerCt,
            selMdl  = view.getSelectionModel(),
            colHdr  = tree.headerCt.getHeaderAtIndex(0);
    
        if (selMdl.getCurrentPosition) {					#3
            pos = selMdl.getCurrentPosition();
            colHdr = tree.headerCt.getHeaderAtIndex(pos.column);
        }
        treeEditor.startEdit(node, colHdr);					#4
    };

  4. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,913
    Answers
    371
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Excellent. Thx. When is Ext 4 in Action out for sale?

Thread Participants: 1