PDA

View Full Version : Ext.ux.grid.ExplorerView - Windows Explorer look-a-like grid



kaigan
4 Oct 2008, 3:00 PM
Hi,

Referring to my post I made yesterday about "Explorer-like GroupingView"
http://extjs.com/forum/showthread.php?t=49045

here's Ext.ux.grid.ExplorerView!

Be aware of that this is my first try to extend Ext classes and I hope that this contribution will inspire other, more experienced Ext guys to help out with this code.

Current features
Can switch between 5 "views"
* Large icons
* Medium icon
* Small icons
* Grid details
* Tiles

View can be switched on-the-fly and specified at creation of the view.
Grouping-"aware"

Demo
A full demo and a zip ready to be unzipped in your Examples folder can be found here:
http://extjs.funkar.nu/ext-2.2/examples/explorerview/


Update (Oct 5):
* Reworked markup and CSS for items
* Works in IE now, Safari also confirmed
* Added a new view, "Tiles"

Update (Oct 6):
* Some more tweaks to CSS
* ExplorerView can be used without GroupingExplorerView
* Sample updated, D&D seems to work from GroupingExplorerView but not ExplorerView ��
* Ext.reg('explorerview' ... 'groupingexplorerview') for lazy loading (xtype)
* New screenshots! :)

Update (Nov 26):
* Added license information to zip

Update (Jan 26):
* Added changes by Hunyi for D&D support in ExplorerView

Update (Feb 3):
* Updated ExplorerView to handle removal of columns on-the-fly (http://extjs.com/forum/showthread.php?p=282121#post282121)

- kaigan

kaigan
5 Oct 2008, 3:51 AM
Update (Oct 5):
* Reworked markup and CSS for items
* Works in IE now, Safari untested - should work
* Added a new view, "Tiles"

-kaigan

Ytorres
5 Oct 2008, 7:55 AM
Hi Kaigan,

Very great job. So clean ;)

Just tested with Safari v3.1.2 for Windows, without any problem

Keep up this great work !

TommyMaintz
6 Oct 2008, 3:21 AM
That looks really great! I think thats a great first extension.

Good luck with future projects.

temporary
6 Oct 2008, 5:19 AM
@kaigan:

do i have to use the grouping in order to use the grid?
i don't need the grouping stuff, since i have a separate tree for my folders.

kaigan
6 Oct 2008, 5:52 AM
@temporary
There seem to be some issues with that at the moment that I wasn't aware of.. It was supposed to be able to be used standalone without being wrapped by the GroupingExplorerView. Will take a look at it later on today.

temporary
6 Oct 2008, 6:09 AM
Thanks, that would be cool.

Together with a tree and my Locationbar component (http://extjs.com/forum/showthread.php?p=229683) this will be a great file explorer :-D

kaigan
6 Oct 2008, 11:05 AM
Update (Oct 6):
* Some more tweaks to CSS
* ExplorerView can be used without GroupingExplorerView
* Sample updated, D&D seems to work from GroupingExplorerView but not ExplorerView

temporary
6 Oct 2008, 1:50 PM
Nice shots :-D

Another question, can i configure what is shown in the view that is in your screenshot? For example i'd like to have the filesize as a third information (beneath filename and -type).

kaigan
6 Oct 2008, 2:21 PM
Templates for the different views are entirely up to the developer, they are not defined in the ux but in the code creating the grid. My 4 example templates are defined in explorerview.js and are simple Ext.Template's;


var largeIcons = new Ext.Template(
'<div class="x-grid3-row ux-explorerview-item ux-explorerview-large-item" unselectable="on">'+
'<table class="ux-explorerview-icon" cellpadding="0" cellspacing="0">'+
'<tr><td align="center"><img src="images/large-{icon}"></td></tr></table>'+
'<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}</div></div></div>'
);

var mediumIcons = new Ext.Template(
'<div class="x-grid3-row ux-explorerview-item ux-explorerview-medium-item">'+
'<table class="ux-explorerview-icon" cellpadding="0" cellspacing="0">'+
'<tr><td align="center"><img src="images/medium-{icon}"></td></tr></table>'+
'<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}</div></div></div>'
);

var smallIcons = new Ext.Template(
'<div class="x-grid3-row ux-explorerview-item ux-explorerview-small-item">'+
'<div class="ux-explorerview-icon"><img src="images/small-{icon}"></div>'+
'<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}</div></div></div>'
);

var tileIcons = new Ext.Template(
'<div class="x-grid3-row ux-explorerview-item ux-explorerview-tiles-item">'+
'<div class="ux-explorerview-icon"><img src="images/medium-{icon}"></div>'+
'<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}<br/><span>{type}</span></div></div></div>'
);

davidhoyt
2 Nov 2008, 10:21 PM
Great job!!

Any updates? Is D&D fully functional yet?

kaigan
2 Nov 2008, 11:00 PM
Hi,

Thanks! I haven't really had time to look into this extension that much lately, I've been busy developing some other really cool stuff with Ext ;)

D&D "seems" to work, I just haven't had time to test it thoroughly, other than that, a few more tweaks to the default templates and it should be ready for production use.

Now ~o)

Hunyi
13 Jan 2009, 2:17 AM
Making D&D work you have to complete the function of Ext.ux.grid.ExplorerView.doRender in this way:



doRender: function(cs, rs, ds, startRow, colCount, stripe){
if (this.rowTemplate == null) {
// Let GridView class handle "normal" rows
return Ext.ux.grid.ExplorerView.superclass.doRender.apply(
this, arguments);
} else {
var ts = this.templates, rt = ts.row;
var buf = [];
for(var j = 0, len = rs.length; j < len; j++){
//Set rowindex for DD and the other functions
var rowIndex = (j+startRow);
rs[j].data.rowIndex = rowIndex;
buf[buf.length] = rt.apply(rs[j].data);
}
//Need to clear for DD
buf[buf.length] = "<div style='clear: both;'></div>";
return buf.join("");
}
},

Digbert
22 Jan 2009, 2:23 AM
Would anybody be so kind as to tell me, a complete beginner at ext, and really not very experienced JS programmer, how I could make a simple example that would demonstrate the explorerView? NOTE: Please make no assumptions about what I might 'already know'. I am not even sure how many files I should put where and how in the VS2008 project I will be crating it in. Plus, how do I reference the control, and what code in an aspx file would call it.

I really am lost, so any help here would be greatly appreciated.

Thank you to anyone who spneds the time to help me out on this issue.

Perhaps id someone would post a basic example with some comments it might get me going in the right direction. :D

D.

tonedeaf
22 Jan 2009, 2:46 AM
Wow!!

@kaigan

D&D "seems" to work, I just haven't had time to test it thoroughly, other than that, a few more tweaks to the default templates and it should be ready for production use.

Seriously, I'm tempted to use this extension in my applications even though its in pre-alpha stage. Seems to work fine in IE and Firefox, which are all I support. And it loads reasonably fast, so the performance looks ok too.

Can you let me know any serious hurdles I may face if its used in a production environment? Or can you complete the tweaks to get it production ready.

I really would like to use this extension !

Digbert
22 Jan 2009, 2:50 AM
Hey, Tonedeaf, would you be willing to share with me the basics of your example? I am really keen to use this control, but am really stuck...:">

Apart from the js scripts (and exactly which ones will I need??), where does all the data that's shown in the explorer actually need to be stored, and how?? :-/

Cheers, D.

tonedeaf
22 Jan 2009, 3:11 AM
@Digbert
Can you get the ExtJS examples working? They don't need any server side code to work. Once you have that working, just drop the explorerview zip file in examples folder and point your browser to explorerview folder.

I would suggest that you get the basic grids working first, then look at the explorerview grid example to base your code upon.

Digbert
22 Jan 2009, 7:29 AM
@tonedeaf

I got the basic array grid to work, except the css isn't pointing to the images correctly(I'm not sure where to get them from).

Anyway, it works wi/out images. As for the explorerView, what do you mean with "examples" folder. What examples folder, where?:-?

cheers T.D.

D.

EDIT: I found the examples folder and see what you mean now. I shoved the whole stuff in there, and now it works - yippee. Thanks again TD.

mschwartz
22 Jan 2009, 3:33 PM
Very nice. It needs to be combined with Saki's file tree and temporary's location bar.

;)

Scorpie
23 Jan 2009, 5:44 AM
Very nice. It needs to be combined with Saki's file tree and temporary's location bar.

;)


+1 :)

kaigan
23 Jan 2009, 6:12 AM
Hi guys,

First off thanks for all the comments and thanks for helping out tonedeaf :)

I will be implementing Hunyi's changes to get ExplorerView's D&D to work during the weekend. My own project that was supposed to use this extension is postponed so I havent had any "paid" time to work on it :)

Expect a new zip this weekend!

kaigan
23 Jan 2009, 6:13 AM
Making D&D work you have to complete the function of Ext.ux.grid.ExplorerView.doRender in this way:

Thanks Hunyi, it's appreciated!

Digbert
23 Jan 2009, 6:22 AM
...err, I wrote in my last post that it's working, but that was only true whilst I was accessing the html from the examples folder. I really want to do a .net project, and so I tried to put the html into an aspx file, imported all the explorerview files into the project and referenced them. I am referencing all other ext-js files using coolite, as you will see below. However, I get nothing when I view the aspx file. Here's the code:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExplorerView.aspx.cs" Inherits="WcfServiceTest.ExplorerView" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head runat="server">
<ext:ScriptManager ID="extScriptManager" runat="server" Theme="Gray" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Grid3 ExplorerView Example</title>

<!-- I was told I don't need these 2 references...-->
<!-- LIBS
<script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>-->
<!-- ENDLIBS
<script type="text/javascript" src="ext-2.2/ext-all.js"></script>-->


<script type="text/javascript" src="_js/explorerview/explorerview.js"></script>
<script type="text/javascript" src="_js/explorerview/Ext.ux.grid.GroupingExplorerView.js"></script>
<script type="text/javascript" src="_js/explorerview/explorerview.js"></script>
<link rel="stylesheet" type="text/css" href="_css/explorerview.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<h1>Grid3 ExplorerView</h1>
</body>

</html>The paths to the referenced .js files are all correct, but am I missing something obvious?

Would be really nice if you could point out my mistake.

cheers,
D.

fangzhouxing
23 Jan 2009, 7:15 AM
Great job! Thanks.

kaigan
26 Jan 2009, 6:37 AM
Update (Jan 26):
* Added changes by Hunyi for D&D support in ExplorerView

moegal
26 Jan 2009, 10:52 AM
is the sorting off in the grid examples? When I try to sort by name ASC. The names show up out of order on the grid without grouping.

Thanks, Marty

kaigan
26 Jan 2009, 1:23 PM
is the sorting off in the grid examples? When I try to sort by name ASC. The names show up out of order on the grid without grouping.

Thanks, Marty

Looks like the sorting is case sensitive, by design in ext?

moegal
27 Jan 2009, 8:13 AM
That appears to be the case. Any way to see what the default sorting order is? Is it all lower then all upper, how do numbers fit in? Can we convert so it sorts alpha with disregard to case?

I guess these are questions really meant for extjs.

Thanks, Marty

Excellent extension!

SOLUTION TO CASE
you can sort a column case insensitively by defining the type of the record to 'string'.
... [{name:'firstname', mapping:'firstname',type:'string'},...]

kaigan
28 Jan 2009, 4:10 AM
Great find moegal!

kaigan
3 Feb 2009, 2:14 AM
Update (Feb 3):
* Updated ExplorerView to handle removal of columns on-the-fly (http://extjs.com/forum/showthread.php?p=282121#post282121)


Zip in first post have been updated and so have the demo-page, enjoy!

Digbert
10 Feb 2009, 9:03 AM
@Kaigan: is there any way that I can double click the folders and so on so that they create an event.

Sorry for my ignorance on this matter, but I have little experience with EXTjs and even less with its add-ons.

Cheers,
D.

kaigan
11 Feb 2009, 12:59 AM
You can attach listeners to the GridPanel, http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel

Also check out the other Grid examples in Ext for ideas on how to use it.

corvonero
11 Feb 2009, 3:39 PM
You can attach listeners to the GridPanel, http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel

Also check out the other Grid examples in Ext for ideas on how to use it.

It took me a while to realize it... but CellClick and CellDblClick will not work with ExplorerView unless you're showing the default template.
If you think it for a while you'll see that there's no CELL to click ;)
ExplorerView will still let you use the "row" events (rowclick, rowdblclick)

Well, btw, it's just a matter of CSS and selectors: search the code for "cellSelector: 'td.x-grid3-cell' " and you'll see why cell-events don't work.



findCell : function(el){
if(!el){
return false;
}
return this.fly(el).findParent(this.cellSelector, this.cellSelectorDepth);



Well, great job... and... this is not an error/bug... it's just plain correct!

kaigan
12 Feb 2009, 12:37 AM
Absolutely correct corvonero, maybe I should add one single cell to wrap the items up in, just to be able to use the *cell*-events, good for future reference if someone tries to use it also :)

Digbert
16 Feb 2009, 2:46 AM
You can attach listeners to the GridPanel, http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel

Also check out the other Grid examples in Ext for ideas on how to use it.

That did the trick. Thanks very much. I like this tool more and more.

By the way, have you experienced the 'views' button not always populating? It's happening to me on a seemingly random basis. One time all the items (small, medium, large icons, details and list [I have removed 'tiles', but the problem already existed]) appear, and other times I only get a subset of them (sometimes none at all). When it happens, I have tried refreshing the page, but this changes the items being put in the list only one time in twenty or so.

If anyone has experienced this, I would be interested to know. If Anybody got an incling where I should be looking to try and sort this out?

kaigan
16 Feb 2009, 5:43 AM
The "view"-icons are only a part of the sample that uses ExplorerView and it uses standard ExtJS components, I see no reason they should randomly dissapear, maybe some other error in your JS is causing this?

Digbert
16 Feb 2009, 6:36 AM
The "view"-icons are only a part of the sample that uses ExplorerView and it uses standard ExtJS components, I see no reason they should randomly dissapear, maybe some other error in your JS is causing this?

I had a more experienced colleague check over my code, and he saw nothing wrong with it. It's the randomness that's so difficult to understand. Oh well.

D.

Adversus
18 Feb 2009, 5:49 PM
Hi all !

Today i decided to test Ext.ux.grid.GroupingExplorerView(). For now i wonder how to get the record of the selected cell by using rowclick-Event.

Using this code snippet failed:



listeners: {
rowclick: function(grid, rowIndex, event) {
alert(grid.getStore().getAt(rowIndex).get("name"));
}
}


The rowIndex for ungrouped rows is correct. Using grouped rows changes the rowIndex. You can test this by copy the snippet to the config of the "grid" in the included example.

I recognize that the difference between the rowIndex i get in the event and the correct rowIndex is exactly the index of the associated group. Maybe it will help to find the bug ;)

My simple question now is: How can i get the correct record when i want to use groups?

Thx a lot!

cgs1999
20 Feb 2009, 12:24 AM
very nice, good work!:)

kaigan
20 Feb 2009, 12:34 AM
Adversus, I'll have a look at it, looks like it only happens when using a different template then detail in GroupingView. Maybe this weekend, thanks for letting me know!

Neil McLachlan
20 Feb 2009, 4:13 AM
First, thanks for a very nice component. I'm using this as a sort-of menu system, where I'm showing the user the 10 most popular functions they have used, and the 10 most recent.

The problem I am having is the return values from the rowclick event. Items that are in the 2nd group are returned with a row index one higher than they really are.

So, if an item is in the first group, the event passes me the record for that item. But if an item is in the second group, the record that comes with the event is actually for the item in the list directly after the one that was clicked.

I am only using tiles view and details view, and the problem only occurs in tiles view. I haven't got a third group but I'm guessing that items clicked in the 3rd group would return a row 2 items after the one that was clicked.

this screenshot might explain it a bit better (http://austarpromo.com.au/ztest/gridproblem.jpg)

Any ideas? I am still fumbling with ExtJS a bit so debugging this is probably a bit beyond me.

kaigan
20 Feb 2009, 4:21 AM
Hi Neil,

This is the same error Adversus reported yesterday, I will have a look at the problem this weekend if there are some time over. Thank you.

Neil McLachlan
21 Feb 2009, 3:18 AM
Thanks, your efforts are much appreciated. I spent an hour or so myself today working my way back through the class hierarchy and got predictably lost only 2 classes in without finding any hint of where the click events originate.

In the meantime I've implemented an awful hack where the grid items come with data indicating how many rows to travel backwards to get the real item :P Of course the very last item still fails but I worked around that with an even worse hack. It will do for me for the moment.

I'm thinking perhaps the click events are fired from the selectionmodel class so I'll go have a look at that next.

NM

kaigan
23 Feb 2009, 4:11 AM
The reason for GroupingView to get an offset of +1 for each group is due to the fix to D&D suggested by someone earlier in the thread. (Row 47 in Ext.ux.grid.ExplorerView.js, in function doRender())

I haven't had the time to actually look more into it, if you don't need D&D it seems to be safe to comment that row for now.

Adversus
23 Feb 2009, 4:58 AM
Please can you post the code of the line to comment? Looking in line 47 in Ext.ux.grid.ExplorerView i found "}" ???

thx!

kaigan
23 Feb 2009, 5:04 AM
Please can you post the code of the line to comment? Looking in line 47 in Ext.ux.grid.ExplorerView i found "}" ???

thx!

Guess I've done some other changes, it's this row;


buf[buf.length] = "<div style='clear: both;'></div>";

Neil McLachlan
24 Feb 2009, 10:52 AM
Yep, that worked for me. Thanks again.

demongloom
26 Feb 2009, 9:30 AM
This fix is not so good. When I commented it, my selection returns to correct state, but in visual I getting mess, because div is missing.

I tried to understand this bug. If exists <div style='clear: both'>, or any another element, rowIndex of "icon" will be incorrect. When executed doRender function, rowIndices are correct, problem on fetching rowIndex from functions


findRow : function(el){
if(!el){
return false;
}
return this.fly(el).findParent(this.rowSelector, this.rowSelectorDepth);
},
findRowIndex : function(el){
var r = this.findRow(el);
return r ? r.rowIndex : false;
},

defined in gridview.

Neil McLachlan
26 Feb 2009, 10:26 PM
Strange, I implemented the fix and it worked perfectly. No visual changes at all. This is using 'tile' view and 'list' view, I don't use the other views.

mihaip007
4 May 2009, 3:00 AM
Hi..! I have downloaded and tried the component in the example folder of extjs 3.0 RC1. It works, but when I click on the grouping options (such as group by this field or ungroup. The menu jumps upwards. Like I am clicking a "#" link.

It does the trick of grouping by a different field, but it keeps jumping up! Also when I wanted to untick the box where it says "show in groups" the option is not available.

And lastly - the submenu comes up with an up and down arrow as if there is a limit on the submenu height.

Do you think that with small changes we can bring this component in the extjs 3.0 version? It's a cool component. Thanks for the great work!!!

Mihai

Sesshomurai
4 May 2009, 6:07 AM
Hi,
Nice start on this component, but it doesn't quite work yet. for example, I try to add "rowclick" event on the grid as suggested and no row record exists. Without that, its not possible to do anything.

Has anyone fixed this issue? I will try to, but wanted to check first. Not sure if the author supports this work at the moment.

kaigan
4 May 2009, 11:56 PM
Hi,

I have not tested this in 3.0 yet and doubt it will work out of the box, I'll take a look to address most of the issues and leaving behind 2.X branch support this weekend.

kaigan
12 May 2009, 2:23 AM
Started it this weekend at least, still needs some more work. I'm rethinking some things.

ethraza
26 May 2009, 12:30 PM
Hi, there is some progress with this awesome component?

I ask because it have a bug! You can see the bug in the Demo page itself. When it is grouped by some column, if you double click in any icon starting from the second group you will be able to see that the wrong icon is clicked and when you go to the last icon of the page it don't receive any click event.

Somebody know how to fix that?

Thanx!

Adversus
26 May 2009, 1:37 PM
This problem has been reported some time ago. Just read the whole thread and you will find the solution ;)

dverkade
28 May 2009, 1:32 AM
Hi,

I've this component working in Ext JS 3, but I do have a slight problem with the width. As you can see in the screenshot below the width is not 100%. The width of the gridpanel is 854px, but the div within has a fixed with of 420px. When I disable the style of the element in firebug everything looks fine and works great.

Anyone an idea?

Danny

dverkade
28 May 2009, 3:25 AM
Fix it, by using the following code:

this.gridPanel.on('afterrender', function(){
this.gridPanel.getEl().child('.x-grid3-body').dom.style.width = '100%';
}, this);

sklose
7 Jun 2009, 12:10 AM
I have the same problem as mentioned below in the quote.
The discussion in the thread before does not help (maybe because the coding changed meanwhile). The onBeforeRowSelect event returns a wrong row index: arrayindex + number of current group. So the rowindex becomes larger the the actual array size and therefore the last icons do not raise the event.

I works only if I deactivate D&D by commenting

// buf[buf.length] = "<div style='clear: both;'></div>";


Thanks in advance
Stefan:-?

Hi, there is some progress with this awesome component?

I ask because it have a bug! You can see the bug in the Demo page itself. When it is grouped by some column, if you double click in any icon starting from the second group you will be able to see that the wrong icon is clicked and when you go to the last icon of the page it don't receive any click event.

Somebody know how to fix that?

Thanx!

elfantasy
15 Jun 2009, 2:56 AM
i love this extension!!:D:D

BTW, is there any method to apply the column renderer into the value?

kaigan
21 Jun 2009, 4:55 PM
Good news and bad news.

I'll start with the bad news, I am discontinuing ExplorerView for Ext 2.x.
The good news, I just posted a new version for Ext 3.x, happy times!

http://extjs.com/forum/showthread.php?p=346841

I will not do any more work on this version (2.x) but I'm happy to answer question about it when there is time.

-- kaigan

Diddy433
5 Jul 2009, 11:54 AM
I am using the explorerView and was just wondering if anyone has tried to hide and show the headers depending on what view it is in. For example, I am trying to hide the column headers when in the icon views but show the headers when in the details view. Anyone have any suggestions?

elfantasy
9 Jul 2009, 12:16 AM
go here to download the 3.0 Version
http://extjs.com/forum/showthread.php?p=346841

change the code below taged.:D:D



updateAllColumnWidths : function(){
...
// compatible with Ext 2.2
//this.innerHd.firstChild.style.width = this.getOffsetWidth();
this.innerHd.firstChild.style.width = (this.cm.getTotalWidth() + this.scrollOffset) + 'px';
...
},
updateColumnWidth : function(col, width){
...
// compatible with Ext 2.2
//this.innerHd.firstChild.style.width = this.getOffsetWidth();
this.innerHd.firstChild.style.width = (this.cm.getTotalWidth() + this.scrollOffset) + 'px';
...
},

updateColumnHidden : function(col, hidden){
...
// compatible with Ext 2.2
//this.innerHd.firstChild.style.width = this.getOffsetWidth();
this.innerHd.firstChild.style.width = (this.cm.getTotalWidth() + this.scrollOffset) + 'px';
...
}


hope this code help some one like me (using Ext 2.2):D:D

jfa
10 Jul 2009, 2:05 AM
I am using the explorerView and was just wondering if anyone has tried to hide and show the headers depending on what view it is in. For example, I am trying to hide the column headers when in the icon views but show the headers when in the details view. Anyone have any suggestions?

in example, add in "changeView" function:


showHeaders = ...
grid.getView().mainHd.setDisplayed(showHeaders)

mihaip007
2 Jun 2010, 12:43 PM
Hi...!

I just wanted to ask if possible to have this kind of panel included as part of the extjs itself? I mean I am using it extensively and I am afraid that with each version update this extension breaks here and there...!

Thanks
Mihai