PDA

View Full Version : New Editor Tree Grid Extension based on Ext.ux.tree.TreeGrid



darkwolfe
8 Sep 2011, 3:59 PM
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 (http://www.sencha.com/forum/showthread.php?95571-TreeSerializer-cleaned-up-for-3.*) 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.



...
var serialized = editorTreeGrid.toString('json');
if (serialized) console.log(Ext.decode(serialized));
else console.log('serializer does not exist');
...



...
datadrop: function(e) {
console.info('datadrop listener');
console.info('e: ',e);
}


node now has set and get functions like record:


...
listeners: {
'click':function(node,e) {
e.node.set('itemnum','demo value');
}
}




...
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);
}
}




var treeGrid = new Ext.ux.tree.EditorGrid({
//--TREE SETTINGS--//
border: false,
bodyBorder: false,
animate: true,
enableDD: true,
enableSort: false,
loadMask: {msg: 'Loading Demo Tree Grid Data...' },

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

//--TREE LOADER--//
loader: new Ext.tree.TreeLoader({
url: datafile.json,
preloadChildren: true,
listeners: {
loadexception: function(loader, node, response) {
var msg = 'unable to fetch data. response.status:' + response.status + (e ? (', error: ' + e.message) : '');
Ext.Msg.alert('Demo', msg, 10);
},
load: function(loader, node, response) {
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\'');
}
}
}
});

murrah
11 Sep 2011, 6:33 PM
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

darkwolfe
12 Sep 2011, 11:48 AM
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.



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

murrah
12 Sep 2011, 2:48 PM
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!

JK.
25 Sep 2011, 8:31 PM
This is really great. I wonder if this works on extjs 4?

darkwolfe
26 Sep 2011, 11:00 AM
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.

agustincba
26 Sep 2011, 11:37 AM
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 !.

darkwolfe
27 Sep 2011, 8:17 AM
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.

nordine
5 Oct 2011, 4:37 PM
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

darkwolfe
6 Oct 2011, 8:14 AM
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.



...
listeners: {
beforedblclick: function(node,e) { return false; }
}
...




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.



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?



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.

nordine
6 Oct 2011, 3:51 PM
Hi Darkwolfe,

Thank you very much for your help.

1)

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.
Works, but I noticed another problem after that, when I edit a branch, after validating, it steps directly to the next branch (in edit mode) and not to the node (leaf in my case, see pictures below) just below.
Can I fix that, or at least can I prevent the fact that it goes to the next branch in editing mode.
In other words : I want only to edit the cell that I want and after editing I don't want that to step into another cells.

2)

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.
Wait for your answer thank you very much.
May be, meanwhile, could you tell me in which line of the code this is managed.

3)

I haven't noticed this. Can you provide a screenshot so i know what to look for?

Sure, have a look to the two pictures joined.

4)

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.
Thank you, it was just for information, don't bother.
I think that the boolean column will satisfy me need.

5) Another point that I forgot to mentionned, as you will see in the pictures, when I have a null value, this "null" value is displayed as "null", and before that I used a classic grid, and the "null" value was not displayed but it was empty.
How can I manage to avoid the displaying of "null" ?

darkwolfe
7 Oct 2011, 12:50 PM
Thank you very much for your help.


No problem, i hope you find my answers useful.



Works, but I noticed another problem after that, when I edit a branch, after validating, it steps directly to the next branch (in edit mode) and not to the node (leaf in my case, see pictures below) just below.
Can I fix that, or at least can I prevent the fact that it goes to the next branch in editing mode.
In other words : I want only to edit the cell that I want and after editing I don't want that to step into another cells.


This function is by design. The editor will move to the nextSibling on enter. If you would like to change this behavior, look at the onEditorKey function that begins on line 811. The line you want to alter will be line 831.



Wait for your answer thank you very much.
May be, meanwhile, could you tell me in which line of the code this is managed.


You'll want to look at the getCellEditor function that starts on line 617. This creates an instance of Ext.grid.GridEditor, which is an extension of the Ext.Editor class. Look in the ext api for config options, but I would start with the alignment config option. Without any testing, i am about 90% sure that'll do the trick.



Sure, have a look to the two pictures joined.


I see your screenshot, but i'm still not quite sure what you mean. To me, it looks like a normal column. What am i missing? I didn't alter any code relating to the headers, so this must be present on the Ext.tree.TreeGrid. I'll see if I can fix it, and create an override for the standard tree grid if necessary, once I'm more clear of the problem. If it's obvious, sorry i'm being so thick.



Thank you, it was just for information, don't bother.
I think that the boolean column will satisfy me need.


Well, i'm glad you can get around it, but i like the idea, so i'll still keep it in mind.



5) Another point that I forgot to mentionned, as you will see in the pictures, when I have a null value, this "null" value is displayed as "null", and before that I used a classic grid, and the "null" value was not displayed but it was empty. How can I manage to avoid the displaying of "null" ?


I made no alterations of the code that displays the values in the tree, so i'm not 100% on this one. I would start by looking at the Ext.ux.tree.TreeGridNodeUI class and overriding the renderElements functions. I would guess that the first for loop that sets up the column/node html element is the place to look. If you haven't figured it out by the time i can get to this, i'll take a look. i agree, though, "null", null, and possibly undefined should be parsed out.

nordine
8 Oct 2011, 1:43 PM
Hi Darkwolfe,

First of all, again, thank you for your help, your answers are very useful.

1)

This function is by design. The editor will move to the nextSibling on enter. If you would like to change this behavior, look at the onEditorKey function that begins on line 811. The line you want to alter will be line 831.
I will have a look and try to modify the code in order to fit it with my needs.

2)

You'll want to look at the getCellEditor function that starts on line 617. This creates an instance of Ext.grid.GridEditor, which is an extension of the Ext.Editor class. Look in the ext api for config options, but I would start with the alignment config option. Without any testing, i am about 90% sure that'll do the trick.
I will try too, I will let you now the results.

3)

I see your screenshot, but i'm still not quite sure what you mean. To me, it looks like a normal column. What am i missing? I didn't alter any code relating to the headers, so this must be present on the Ext.tree.TreeGrid. I'll see if I can fix it, and create an override for the standard tree grid if necessary, once I'm more clear of the problem. If it's obvious, sorry i'm being so thick.
May be you missed the point.
If you have a look to the column header that I encircled in red, you will see that the background is not not properly displayed (in grey like the others header columns on the left).
And the problem occurs when these columns were masked at the beginning of the rendering, but when you scroll (horizontal scrollbar at the bottom of the grid), to display these columns, you will get the problems.
After you answer, I made the test with a simple grid, and we don't have this problem.

4)
I made no alterations of the code that displays the values in the tree, so i'm not 100% on this one. I would start by looking at the Ext.ux.tree.TreeGridNodeUI class and overriding the renderElements functions. I would guess that the first for loop that sets up the column/node html element is the place to look. If you haven't figured it out by the time i can get to this, i'll take a look. i agree, though, "null", null, and possibly undefined should be parsed out.[/QUOTE]
Thanks, by my side, meanwhile I will try to solve the problem at the source (server side) to avoid these "null" values.

nordine
9 Oct 2011, 3:34 PM
Hi Darkwolfe,

I noticed another point : When I edit a cell, and I scroll horizontaly (a treegrid with a horizontal scrolbar), the edit cell doesn't follow the column.
It stays on place as if it was positionned in a absolute way.

darkwolfe
10 Oct 2011, 8:02 AM
May be you missed the point. If you have a look to the column header that I encircled in red, you will see that the background is not not properly displayed (in grey like the others header columns on the left).
And the problem occurs when these columns were masked at the beginning of the rendering, but when you scroll (horizontal scrollbar at the bottom of the grid), to display these columns, you will get the problems. After you answer, I made the test with a simple grid, and we don't have this problem.


Ok, now i know what to look for, but since this isn't critical at the moment it may take me a few days to get to it.

darkwolfe
10 Oct 2011, 8:03 AM
Hi Darkwolfe,

I noticed another point : When I edit a cell, and I scroll horizontaly (a treegrid with a horizontal scrolbar), the edit cell doesn't follow the column.
It stays on place as if it was positionned in a absolute way.

Yeah, i noticed this too. In the newest update (v1.0.6), the editor will cancel when scrolling occurs.

nordine
10 Oct 2011, 9:31 AM
Thanks,

Yeah, i noticed this too. In the newest update (v1.0.6), the editor will cancel when scrolling occurs.
Great ! When do you think it will be available/released ?

And what about not cancelling the editor if scrolling occurs ? Is it possible to manage the editor with the scrolling (following the scrolling) ?

darkwolfe
21 Oct 2011, 9:47 AM
Thanks,

Great ! When do you think it will be available/released ?

And what about not cancelling the editor if scrolling occurs ? Is it possible to manage the editor with the scrolling (following the scrolling) ?

Well, before i updated it to cancel the editing when scrolling, the editor, in my browser at least, was following the scroll. It didn't think it looked good to do that, so i made it cancel the editing on scroll.

Also, don't forget to grab the latest copy from the main post (v1.0.7), there is a major bug fix that prevented editing in IE.

soungalo
12 Nov 2011, 10:08 AM
hi,
First, thank you for this amazing work!
i have the same issus, like nordine.


Originally Posted by nordine
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.

please take a look at the screenshots.
i think this is a problem of the grid container.
thank you by adcance.

soungalo
18 Nov 2011, 8:25 AM
hi darkwolfe
i see that if a vertical scroller apear, the horizontal one apears too (even if there is no node in the treegrid). i think it's because when the vertical scroller apears, we don't subtract it's height to the height of the treegrid's innerBody. i resolved the issu by overriting the onResize methode.


bd.style.height = this.body.getHeight(true) - hd.offsetHeight-Ext.getScrollBarWidth()+ 'px';


i don't know if this is the better way to do that. so say me what do you think about it!
thanks

darkwolfe
23 Nov 2011, 3:46 PM
hi darkwolfe
i see that if a vertical scroller apear, the horizontal one apears too (even if there is no node in the treegrid). i think it's because when the vertical scroller apears, we don't subtract it's height to the height of the treegrid's innerBody. i resolved the issu by overriting the onResize methode.


bd.style.height = this.body.getHeight(true) - hd.offsetHeight-Ext.getScrollBarWidth()+ 'px';


i don't know if this is the better way to do that. so say me what do you think about it!
thanks

Sorry it's been so long, Getting married and going on vaction took me away from a computer for a while.

That's awesome. I'll add that line and upload version 1.0.9 as soon as I can.

Thanks for figuring that out, i really haven't had as much time as i would like lately to fix it.

inishi01
3 Mar 2012, 8:32 AM
hello widget is good!


but I see I can not use the tree with the options checked: true, or checked: false .... can someone give me a hand with this .. I have reviewed the forum and can not find a solution to this (for Ext v3.[34] .0)

any help is appreciated!

darkwolfe
7 Mar 2012, 12:03 PM
hello widget is good!


but I see I can not use the tree with the options checked: true, or checked: false .... can someone give me a hand with this .. I have reviewed the forum and can not find a solution to this (for Ext v3.[34] .0)

any help is appreciated!

inishi01,

Thanks for your feedback. The editor tree grid extension is based on the tree grid that comes with ext, so what ever functionality is present will also be in the editor tree grid. You can try searching the forums for tree grid and the checkbox tree to see if it's in there somewhere, however, i don't think it supports it. I haven't had a lot of time lately to update the editor tree grid, but the next time i get some free time i'll look into adding this functionality.

gorun-ul
10 Aug 2012, 8:46 AM
Format problem with DateField



Thank you for this nice introduction to the EditorGrid. The problem I noticed and that is not part of the examples is how to handle a Date format?

For instance, if you use a column of the type of: editor: new Ext.form.DateField:



columns:[{
header: 'Composants',
dataIndex: 'text',
width: 125
},{
xtype: 'datecolumn',
header: 'Date Installation',
format: 'd/m/Y',
width: 95,
dataIndex: 'dateInstallation',
editor: new Ext.form.DateField({
selectOnFocus: true,
format:"d/m/Y",
originalValue: true,
anchor: '100%'
})
}]



The problem appears after editing the column, showing a result of

Wed Aug 08 2012 00:00:00 GMT+0200 (Paris, Madrid (heure d'été))

instead of 'dd/mm/yyyy'. The problem lies probably on an other level than the EditorGrid, since the editor field is in the right format.
Have you some suggestions or experience concerning this format problem?

darkwolfe
17 Aug 2012, 8:19 AM
Format problem with DateField



Thank you for this nice introduction to the EditorGrid. The problem I noticed and that is not part of the examples is how to handle a Date format?

For instance, if you use a column of the type of: editor: new Ext.form.DateField:



columns:[{
header: 'Composants',
dataIndex: 'text',
width: 125
},{
xtype: 'datecolumn',
header: 'Date Installation',
format: 'd/m/Y',
width: 95,
dataIndex: 'dateInstallation',
editor: new Ext.form.DateField({
selectOnFocus: true,
format:"d/m/Y",
originalValue: true,
anchor: '100%'
})
}]



The problem appears after editing the column, showing a result of

Wed Aug 08 2012 00:00:00 GMT+0200 (Paris, Madrid (heure d'été))

instead of 'dd/mm/yyyy'. The problem lies probably on an other level than the EditorGrid, since the editor field is in the right format.
Have you some suggestions or experience concerning this format problem?


Hi gorun-ul,

Sorry it's taken so long for me to get back to you about this. Try using a date renderer in your column config:



renderer : Ext.util.Format.dateRenderer('d/m/Y'),


That should do the trick. The reason why you are getting that long annoying date string is because that is what the Ext.form.DateField component naturally outputs. It's the standard JavaScript output from a date object. The renderer should allow you to specify what you want the output to look like.

Let me know if that helped!

Sreekesh S K
13 Nov 2012, 11:29 PM
Hi darkwolfe (http://www.sencha.com/forum/member.php?67951-darkwolfe) ,

Is there any way to implement context menu over this plugin..

Sreekesh S K
22 Nov 2012, 11:33 AM
Is it possible to implement alternate row coloring system on this plugin

garg.shivani02
25 Jul 2014, 1:03 AM
Hi,

I need to know whether this component requires the complete data to be shown at one go or it retrieves the children for a node only when it is expanded?

Because having the complete data at the starting is not feasible as it can be very huge.
It should be retrieved only when the node is expanded.

So can anyone please tell me what exactly happens in this component?

Thanks!

darkwolfe
25 Jul 2014, 4:45 AM
Hi,

I need to know whether this component requires the complete data to be shown at one go or it retrieves the children for a node only when it is expanded?

Because having the complete data at the starting is not feasible as it can be very huge.
It should be retrieved only when the node is expanded.

So can anyone please tell me what exactly happens in this component?

Thanks!

Hi Garg,

When i wrote this extension, i didn't write it with that functionality in mind, however, it's an extension of the TreeGrid and the TreeGrid is an extension of the Tree, and the Tree does have that functionality. So, this extension should also be able to do the same thing. I haven't tested it, but i don't see why it wouldn't work.

darkwolfe
25 Jul 2014, 4:57 AM
Hi darkwolfe (http://www.sencha.com/forum/member.php?67951-darkwolfe) ,

Is there any way to implement context menu over this plugin..




this is most likely way too late. for some reason i didn't get notified when the post was made 2 years ago. but yes, you can implement a context menu.



...
var contextMenu = new Ext.menu.Menu({
items: [{
iconCls: 'expand',
text: 'Expand Node'
}]
});
...
var treeGrid = new Ext.ux.tree.EditorGrid({
...
​ contextmenu: function(node,e) {
node.select();
​ var c = contextMenu;
​ c.contextNode = node;
​ c.showAt(e.getXY());
​ },
...
});
...


i hope that helps, which it probably won't considering this replay is 2 years too late.

darkwolfe
25 Jul 2014, 5:31 AM
Is it possible to implement alternate row coloring system on this plugin

i realize that this reply is 2 years too late, but just in case it helps:

I'm not sure how easily it'll be to alternate row coloring, however, you can try to hook into the beforechildrenrendered (http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.tree.TreePanel-event-beforechildrenrendered) listener and add a CSS class to the node's underlying element. That should do the trick.

I image something like the following will work:



...
listeners: {
beforechildrenrendered: function(node) {
var nodeIndex = node.getOwnerTree().getRootNode.indexOf(node);
if (nodeIndex % 2) node.ui.addClass('you-row-stripe-class');
}
}
...


hope that helps, though it probably won't since it's 2 years too late.

garg.shivani02
25 Jul 2014, 9:15 PM
Hi,

Thanks darkwolfe for the reply...!!!!

I am using Extjs 3.4 version.I also have a doubt that I am unable to use this extension which is a ux component. It would be great if you can just post a sample code to use this extension.

Also do I also need to have the Ext.ux.tree.TreeGrid component also so as to use this extension?
If yes can you please post some link from where I can get this compatible to your extension.

Thanks again!