1. #1
    Sencha User
    Join Date
    Mar 2009
    Location
    Dallas, TX
    Posts
    19
    Vote Rating
    2
    darkwolfe is on a distinguished road

      1  

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

    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:
        ...
        var 
    serialized editorTreeGrid.toString('json');
        if (
    serializedconsole.log(Ext.decode(serialized));
        else 
    console.log('serializer does not exist');
        ... 
    PHP Code:
        ...
        
    datadrop: function(e) {
            
    console.info('datadrop listener');
            
    console.info('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,
        
    bodyBorderfalse,
        
    animatetrue,
        
    enableDDtrue,
        
    enableSortfalse,
        
    loadMask: {msg'Loading Demo Tree Grid Data...' },

        
    //--COLUMN MODEL--//
        
    columns: [{
            
    header:'Item Name/Number',
            
    width:200,
            
    dataIndex:'itemnum',
            
    editor: new Ext.form.TextField({ selectOnFocustrue })
        },{
            
    header:'Description',
            
    width:227,
            
    dataIndex:'itemdesc',
            
    editor: new Ext.form.TextField({ selectOnFocustrue })
        },{
            
    header:'Qty',
            
    width:50,
            
    dataIndex:'defqty',
            
    editor: new Ext.form.NumberField({
                
    allowBlankfalse,
                
    allowNegativefalse,
                
    selectOnFocustrue,
                
    style'text-align:left'
            
    })
        },{
            
    header:'Price',
            
    width:60,
            
    dataIndex:'defprice',
            
    renderer'usMoney',
            
    editor: new Ext.form.NumberField({
                
    //allowBlank: false,
                
    allowNegativefalse,
                
    selectOnFocustrue,
                
    style'text-align:left'
            
    })
        }],            

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

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

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

  2. #2
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    383
    Vote Rating
    11
    murrah will become famous soon enough

      0  

    Default


    Hi,

    I am still using Ext 3.4 since I am developing for AIR. I use the Ext.ux.tree.TreeGrid (with modified Template so AIR will work). At present I have no need for the editor functionality you have added (but I imagine I soon will!). Thanks for your work.

    My question is, do you know if it is possible to do multi select the grid rows? eg Shift+Click, CTRL+Click etc? I cant find a way to do this.

    Thanks,
    Murray

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Location
    Dallas, TX
    Posts
    19
    Vote Rating
    2
    darkwolfe is on a distinguished road

      0  

    Default


    Quote Originally Posted by murrah View Post
    Hi,

    I am still using Ext 3.4 since I am developing for AIR. I use the Ext.ux.tree.TreeGrid (with modified Template so AIR will work). At present I have no need for the editor functionality you have added (but I imagine I soon will!). Thanks for your work.

    My question is, do you know if it is possible to do multi select the grid rows? eg Shift+Click, CTRL+Click etc? I cant find a way to do this.

    Thanks,
    Murray
    Since the TreeGrid only extends a the TreePanel, and likewise this extension extends the TreeGrid, i would imagine that you just set the selection module using the selModel config parameter. As far as i can tell, the TreeGrid doesn't alter any selection model functions.

    PHP Code:
    ...
    selMode: new Ext.tree.MultiSelectionModel(),
    ... 

  4. #4
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    383
    Vote Rating
    11
    murrah will become famous soon enough

      0  

    Default


    Yes, you are correct. Adding selModel to the config adds the multi selection mode. The fact that I specified selMode instead of selModel wasnt helping! Thanks!

  5. #5
    Sencha User
    Join Date
    Aug 2009
    Posts
    2
    Vote Rating
    0
    JK. is on a distinguished road

      0  

    Thumbs up Great!

    Great!


    This is really great. I wonder if this works on extjs 4?

  6. #6
    Sencha User
    Join Date
    Mar 2009
    Location
    Dallas, TX
    Posts
    19
    Vote Rating
    2
    darkwolfe is on a distinguished road

      0  

    Default


    Thanks!

    I don't know if it works in Ext4 yet. I plan on finding out as soon as i finish up this part of the project that i'm using it for. If it doesn't i'll be converting to work in it since they still didn't put editor functionality into it.

  7. #7
    Sencha User
    Join Date
    Jul 2010
    Posts
    32
    Vote Rating
    0
    agustincba is on a distinguished road

      0  

    Default


    Would you upload the json file to see something ?... Coz I am not able to get it working... I am on v3.4 !. Thankx from Cordoba !.

  8. #8
    Sencha User
    Join Date
    Mar 2009
    Location
    Dallas, TX
    Posts
    19
    Vote Rating
    2
    darkwolfe is on a distinguished road

      0  

    Default


    Quote Originally Posted by agustincba View Post
    Would you upload the json file to see something ?... Coz I am not able to get it working... I am on v3.4 !. Thankx from Cordoba !.
    It uses standard tree json. I've included a sample that my back-end script generates for testing. You could also use the sample json found in the tree grid example, which i've also included for convenience.
    Attached Files

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    nordine is on a distinguished road

      0  

    Default


    Hi,

    Very nice component, thank you very much.
    I have some remarks :
    1) When I double click on a cell to edit the content and that cell is part of line that is not a leaf, it toogles automaticaly.
    Is there a way yo prevent this to toggle ?

    2) When I add a boolean column, and I try to edit the cell, the checkbox is not centering vertically, how do I correct that ?

    3) I noticed that if some columns are not displayed because of the width of the container, and if I scroll to the right, then the header of these columns are not well displayed.

    4) How could I add the checkcolumn model to this component ?

    By advance, thanks for your help

  10. #10
    Sencha User
    Join Date
    Mar 2009
    Location
    Dallas, TX
    Posts
    19
    Vote Rating
    2
    darkwolfe is on a distinguished road

      0  

    Default


    Quote Originally Posted by nordine View Post
    1) When I double click on a cell to edit the content and that cell is part of line that is not a leaf, it toogles automaticaly.
    Is there a way yo prevent this to toggle ?
    You can disable the toggle by adding a beforedblclick event listener and returning false. Since the editing events are tied to the tree body and not the panel body, this will not affect editing or events associated with editing.

    PHP Code:
        ...
        
    listeners: {
            
    beforedblclick: function(node,e) { return false; }
        }
        ... 
    Quote Originally Posted by nordine View Post
    2) When I add a boolean column, and I try to edit the cell, the checkbox is not centering vertically, how do I correct that ?
    The editor is positioned at the top left of the cell. When I created this i didn't take into account form elements like checkboxes so it handles all them the same in terms of editor position. I'll need to add some code to check for form element type before positioning the editor. I'll put this into the next update.

    Quote Originally Posted by nordine View Post
    3) I noticed that if some columns are not displayed because of the width of the container, and if I scroll to the right, then the header of these columns are not well displayed.
    I haven't noticed this. Can you provide a screenshot so i know what to look for?

    Quote Originally Posted by nordine View Post
    4) How could I add the checkcolumn model to this component ?
    I don't know how a checkcolumn model could be added. Ext was a little misleading calling the TreeGrid a grid, when it is more like a TreeListView. The columns are borrowed from the ListView, which in turn is loosely borrowed from the Grid, however, with a ListView, and consequently with the TreeGrid, no column model is actually used, so i'm not sure how you could get that in there. I'll take a look at it when i can, i should be able to mimic that functionality.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi