Results 1 to 10 of 38

Thread: New Editor Tree Grid Extension based on Ext.ux.tree.TreeGrid

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Mar 2009
    Dallas, TX
    Vote Rating

    Cool New Editor Tree Grid Extension based on Ext.ux.tree.TreeGrid

    I know this is a bit late since not many people still use ExtJS 3.4, but I thought that someone out there might be able to benefit from this. The company I work for finally decided to upgrade to ExtJS3.4 from ExtJS2.2.1. In the earlier version we used the MaximGB tree grid extension for our order system, however, the version that was compatible with 3.4 had problems. It was slow, complicated, and had a bug in the GridView that caused the formatting to screw up every time and edit was made. This meant that the GridView had to be redrawn after each edit, really slowing down grid. I needed a tree grid and the only thing out there other than MaximGB was also an extension of the GridPanel, did not work with 3.4, and was no longer going to be receiving updates. So, creating this extension was my only option.

    Now the cool thing about this extension is that it extends the Ext.ux.tree.TreeGrid class, so I didn't have to write the tree handling functions, which seemed more complicated than the grid editing function I needed.

    Like I said, this extends the tree grid ux that comes with Ext, but it also has a couple of overrides to add record like get and set functions to the Ext.tree.TreeNode class and adds some methods to the TreeGrid class that were oddly missing, such as functions that get information from the columns, like getDataIndex.

    Added Properties/Config Options:
    • cellSelector, used to find cells internally (defaults to 'td.x-treegrid-col')
    • cellSelectorDepth, the number of levels to search for cells in event delegation (defaults to 4)
    • rowSelector, used to find rows internally (defaults to 'div.x-grid3-row')
    • rowSelectorDepth, the number of levels to search for rows in event delegation (defaults to 10)
    • autoEncode, true to automatically HTML encode and decode values pre and post edit (defaults to false)
    • forceValidation, true to force validation even if the value is unmodified (defaults to false)
    • loadMask, an Ext.LoadMask config or true to mask the grid while loading. Defaults to false
    • expandOnDdlClick, when set to false, disabled the tree's double click event to stop the branch from expanding on double click. an event listener attached to the config object will still fire, however. defaults to false.
    • completeOnEnter: True to complete edit when the enter key is pressed, defaults to true
    • cancelOnEsc: True to cancel the edit when the escape key is pressed, defaults to true
    • ignoreNoChange: True to skip the edit completion process (no save, no events fired) if the user completes an edit and the value has not changed (defaults to false). Applies only to string values - edits for other data types will never be ignored.
    Added Methods:
    • startEditing, starts editing the specified for the specified row/column
    • getColumnModel, returns the tree's column config object
    • getCellEditor, returns the editor defined for the cell/column
    • setEditable, sets if a column is editable
    • stopEditing, stops any active editing
    • isCellEditable, returns true if the cell is editable
    • getDataIndex, returns the dataIndex for the specified column
    • getIndexById, returns the index for a specified column id
    • getColumnId, returns the id of the column at the specified index
    • getColumnAt, returns the column at the specified index
    • findRow, return the HtmlElement representing the tree node which contains the passed element
    • findRowIndex, return the index of the tree node which contains the passed HTMLElement
    • findRowId, return the index of the tree node which contains the passed HTMLElement
    • toString, returns an XML or JSON serialized string of the tree panel or false if Ext.tree.TreeSerializer does not exist (see explanation below), returns json by default
    • getSerializer, returns the internal serializer or false if Ext.tree.TreeSerializer does not exist (see explanation below), returns json serializer by default
    Added Event Listeners:
    • cellclick, fires when a cell is clicked
    • celldblclick, fires when a cell is double clicked
    • beforeedit, fires before cell editing is triggered
    • afteredit, fires after a cell is edited
    • validateedit, fires after a cell is edited, but before the value is set in the node
    • beforedatadrop, firex before non-node data is dropped on a tree node
    • datadrop, fires after non-node data is droped onto a tree node
    New Ext.tree.TreeNode Methods (Note: all methods compatible with standard trees):
    • set, sets values for fields in a node on the tree grid
    • get, gets values for fields in a node on the tree grid
    • setLeaf, replaces a tree branch with a leaf containing the same attributes, destroying all child nodes, pass in false to turn a leaf into a branch (usefully when creating a branch out of a leaf to add childNodes to it), returns newly created node
    • toggleLeaf, toggles leaf/branch state, when changing into a leaf destroys all child nodes, returns newly created node
    Using this new class is as easy as using the standard Ext.ux.tree.TreeGrid, all you have to do is add an editor to the column model like you would on an EditorGridPanel. Also, many of the methods and events found in an EditorGridPanel, as listed above, take/provide the same parameters, with the exception of cellclick and celldblclick, they work more like the tree's click and dblclick events.

    Extended the Ext.tree.TreeDropZone to add a new event called "datadrop" that is fired when any non-node data is dropped onto a tree node. Normally the tree's native drag and drop events do not fire when any data that does not contain a tree node is dropped, which means you have to specify a dropConfig overwriting the notifyDrop function or similar functions, potentially loosing the tree's native drag and drop functionality. This new event will only fire when the data being dropped is not a tree node.

    Ext.ux.tree.EditorGrid creates it's own internal tree serializer and defines the function 'toString()' and 'getSerializer()' if Ext.tree.TreeSerializer exists. Simply pass 'xml' or 'json' into the toString() function to get your desired output or getSerializer() to get a reference to the internal serializer. if Ext.tree.TreeSerializer does not exists, these functions will return false.

    PHP Code:
    serialized editorTreeGrid.toString('json');
        if (
    console.log('serializer does not exist');
    PHP Code:
    datadrop: function(e) {
       'datadrop listener');
       'e: ',e);
    node now has set and get functions like record:
    PHP Code:
    listeners: {
    'click':function(node,e) {
    e.node.set('itemnum','demo value');
    PHP Code:
    listeners: {
    'cellclick':function(node,e) {
    console.log('cellclick listener');
    console.log('node: ',node);
    console.log('tree: ',e.tree);
    console.log('field: ',e.field);
    console.log('value: ',e.value);
    console.log('row: ',e.row);
    console.log('column: ',e.column);
    PHP Code:
    var treeGrid = new Ext.ux.tree.EditorGrid({
    //--TREE SETTINGS--//
    border:    false,
    loadMask: {msg'Loading Demo Tree Grid Data...' },

    //--COLUMN MODEL--//
    columns: [{
    header:'Item Name/Number',
    editor: new Ext.form.TextField({ selectOnFocustrue })
    editor: new Ext.form.TextField({ selectOnFocustrue })
    editor: new Ext.form.NumberField({
    editor: new Ext.form.NumberField({
    //allowBlank: false,

    //--TREE LOADER--//
    loader: new Ext.tree.TreeLoader({
    listeners: {
    loadexception: function(loadernoderesponse) {
    msg 'unable to fetch data. response.status:' response.status + (? (', error: ' e.message) : '');
    load: function(loadernoderesponse) {
    Ext.Msg.alert('Demo''Loading complete...',3);

    listeners: {
    'beforeedit': function(e) { if (e.node.isLeaf() && e.field == 'itemnum') return false; },
    'validateedit': function(e) {
    myTargetCol 1;

                if (
    e.column == myTargetCol && (e.value != 'option1' && e.value != 'option2')) {
    e.cancel true;
    colName e.tree.getColumnAt(e.column);
    alert(colName.header+' has been set with an invalid value, please enter \'option1\' or \'option2\'');
    Attached Images Attached Images
    Attached Files Attached Files
    Last edited by darkwolfe; 8 Nov 2011 at 1:37 PM. Reason: Fixed a bug with editing and scrolling

Posting Permissions

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