PDA

View Full Version : [Ver. 1.1-beta2] Collapsible InfoPanel/Accordion - Extension classes with Live Demo



Pages : [1] 2 3 4

jsakalos
17 May 2007, 1:19 PM
On the course of development of my application it happened that I needed collapsible info panels similar to these (http://extjs.com/forum/showthread.php?t=6095) so I've written the extension class for that.

I'd like to ask the community to give it a hard tests as I've done only brief initial testing. I'm also going to mail this link to Jack - maybe he includes it in the main trunk if you and he would like it.

I've tried to fully document the properties, config variables, methods and events but you're welcome to find any bugs, inconsistencies or typos.

Hope it helps someone.

UPDATE: Live demo is now available.
UPDATE2: The expand/collapse trigger is now configurable. See patch in this thread.
UPDATE3: Now it can create from markup. Whole code re-posted.
UPDATE4: Very first version of Accordion (http://www.aariadne.com/extjs/examples/accordion.html)
UPDATE5: Now support icons. Code updated. See Accordion demo.
UPDATE6: Panels are now pinnable. Code updated. See Accordion demo.
UPDATE7: Panels are now draggable. Code updated. See Live demo (http://www.aariadne.com/extjs/examples/infopanel.html)
Beta 1: All planned features of Accordion (http://www.aariadne.com/extjs/examples/accordion.html) implemented except state management.
Beta 2: Much better dragging and docking/undocking
Beta 3: Fixed bugs leading to odd behavior. Implemented autoCreate. Code updated.
RC 1: State management implemented. See http://extjs.com/forum/showthread.php?t=6388&p=33794 for details.
RC 2: Configurable shadows. Windows-like undocked panels management. No posted code updated, only example pages.
RC 3: All major IE issues resolved. CSS classes introduced. No posted code update. See http://extjs.com/forum/showthread.php?t=6388&p=34193 for details
RC 4: Dragging is now rock-solid. See http://extjs.com/forum/showthread.php?t=6388&p=34384 for details.
RC 5: Fixed height Accordion introduced. See Accordion (http://www.aariadne.com/extjs/examples/accordion.html) for details.
RC 6: Many bug fixes and improvements. See http://extjs.com/forum/showthread.php?t=6388&p=34886 for details.
RC 7: Many improvements/bug fixes. See http://extjs.com/forum/showthread.php?t=6388&p=36130 for details.
Ver. 1.0: See release notes in http://extjs.com/forum/showthread.php?t=6388&p=37999
Ver. 1.0.1: See Live Demo Page (http://aariadne.com/accordion/accordion.html) for changes.
Ver. 1.1-beta1: See this post (http://extjs.com/forum/showthread.php?t=6388&p=41502) for details and see it on Accordion-preview Live Demo Page (http://aariadne.com/accordion-preview).
Ver. 1.1-beta2: See this post (http://extjs.com/forum/showthread.php?t=6388&p=42941) for details and see it on Accordion-preview Live Demo Page (http://aariadne.com/accordion-preview).

[EDIT] Originaly posted code is removed. You can find current code on the Live demo (http://www.aariadne.com/extjs/examples/accordion.html) page.

galdaka
17 May 2007, 1:47 PM
Thanks, good works!!

Any example for testing?

jsakalos
17 May 2007, 2:01 PM
Not on-line yet. You can use it as any ContentPanel but it's not intended to be a main content panel of layout but as (small) InfoPanels inside of layout's content panels.

Should more people call for an on-line demo I'll create one, huh... , short of time...(:|

UPDATE: Live demo (http://www.aariadne.com/extjs/examples/infopanel.html) is now available.

Jul
17 May 2007, 5:30 PM
This is very nice. I hope it does get included in the main trunk. I think it will be very useful in certain GUI layouts.

jsakalos
17 May 2007, 6:02 PM
Thanks Jul,

it's always pleasant to hear an appreciation of the work done. :)

wregen
17 May 2007, 7:22 PM
Thank you. You save my time.

galdaka
17 May 2007, 8:16 PM
awesome. Thanks!!

schmidetzki
17 May 2007, 11:38 PM
Very nice.

Two things:
The infoBox can not be created from existing markup but must be filled from JavaScript.
It would be better to test for existing title- and body elements and only create them when they not already exist.

A question of taste: I would prefere that the box toggles when the user clicks on the title and not only when he clicks on the small tool-button.

Animal
17 May 2007, 11:54 PM
Very cool!

Animal
18 May 2007, 12:00 AM
Perhaps there could be a config option to give a maximumHeight to a panel (This would also need the style "overflow:auto"), so that you can limit the height to which it expands if you have a lot of content.

Also, some way of making a set of these panels aware of each other (perhaps you add them to a Region) so that a config option could make them behave like an accordion. That is, only one can be expanded at once.

nassaja-rus
18 May 2007, 12:28 AM
Ext.InfoPanel = function(el, config) {

// shortcut of DomHelper


// {{{
// basic setup
// process config
if('object' != typeof config) {
this.title = config || '';
config = {};
}

// save content supplied in config
if(config.content) {
var content = config.content;
config.content = null;
}

// shortcut of DomHelper
var dh = Ext.DomHelper;
if(config && config.autoCreate){
if(typeof config.autoCreate == "object"){
dh.append(config.autoCreate, { tag: "div", id: el, style:'border 1px solid silver'}, true);
}else{
dh.append(Ext.get(config.autoCreate), { tag: "div", id: el, style:'border 1px solid silver'}, true);
}
}





var panel2 = new Ext.InfoPanel(Ext.id(), {
autoCreate:GUI.innerLayout.getRegion("east").getPanel(0).getEl()
,collapsed: true
,title: 'Info panel - initially collapsed'
,content: 'Nam venenatis nonummy quam....'
});

adablue77
18 May 2007, 12:37 AM
=D> =D> =D> =D> =D> =D> =D> =D>
very nice!!!!!
i need it now!

fredrik.stockel
18 May 2007, 12:42 AM
jsakalos, great work, nice implementation! =D>





...
Also, some way of making a set of these panels aware of each other (perhaps you add them to a Region) so that a config option could make them behave like an accordion. That is, only one can be expanded at once.

This sounds like a very usefull feature.... and would make the infopanels suitable for vertical navigation etc...

nassaja-rus
18 May 2007, 2:12 AM
It would be healthy to make extension which would open only one panel from available panels, but on all accessible height of the container.

And at opening other panel, current it was closed.

Something like InfoPanelsManager;)

jsakalos
18 May 2007, 2:23 AM
Thank you all for your suggestion!

This is my quick reply as I just want to know to acknowledge you communication for now. I will go thought your individual posts later today and I will let you know "what's happening".

Frankly, I haven't expected such an interest :) :) :) I was just writing my app and I just thought "This could be interesting for other's". I'm very very glad you like it.

Thanks again.

thesilentman
18 May 2007, 3:23 AM
Jozef,
once again, excellent job done!! Looks great. I already found a nice way to implement it.
Thank you!!

Frank

cbetancourt
18 May 2007, 3:33 AM
Nice work jsalakos, I will be sure to use your InfoPanel.

jsakalos
18 May 2007, 3:38 AM
A question of taste: I would prefere that the box toggles when the user clicks on the title and not only when he clicks on the small tool-button.This was very easy to do. Here is patch of the originally posted code:



*** /home/jozo/Desktop/Ext.InfoPanel.js 2007-05-18 13:26:19.000000000 +0200
--- Ext.InfoPanel.js 2007-05-18 13:30:55.000000000 +0200
***************
*** 13,16 ****
--- 13,17 ----
* @cfg {Boolean} collapsible false to disable collapsibility (defaults to true)
* @cfg {Boolean} collapsed true to start with the collapsed body (defaults to false)
+ * @cfg {String} trigger 'title' or 'button'. Click on what element expands/collapses the panel (defaults to 'button')
*/
Ext.InfoPanel = function(el, config) {
***************
*** 63,75 ****
if(this.collapsible) {
this.collapseBtn = this.createTool(this.tools.dom, (this.collapsed ? 'x-layout-collapse-east' : 'x-layout-collapse-south'));
- this.collapseBtn.on("click", function() {
- if(this.collapsed) {
- this.expand();
- }
- else {
- this.collapse();
- }
- }, this);
this.collapseBtn.enableDisplayMode();
}
// }}}
--- 64,75 ----
if(this.collapsible) {
this.collapseBtn = this.createTool(this.tools.dom, (this.collapsed ? 'x-layout-collapse-east' : 'x-layout-collapse-south'));
this.collapseBtn.enableDisplayMode();
+ if(this.trigger && ('title' == this.trigger)) {
+ this.titleEl.addClass('x-window-header-text');
+ this.titleEl.on("click", this.toggle, this);
+ }
+ else {
+ this.collapseBtn.on("click", this.toggle, this);
+ }
}
// }}}
***************
*** 199,202 ****
--- 199,215 ----
// {{{
/**
+ * Toggles the expanded/collapsed states
+ */
+ , toggle: function() {
+ if(this.collapsed) {
+ this.expand();
+ }
+ else {
+ this.collapse();
+ }
+ }
+ // }}}
+ // {{{
+ /**
* Collapses the panel
* @return {InfoPanel} this

The Live Demo (http://perseus.localhost/extjs/examples/infopanel.html) is also updated.

jsakalos
18 May 2007, 3:41 AM
cbetancourt and thesilentman and all others I may have forgotten,

thank you all for your appreciations.

jsakalos
18 May 2007, 5:19 AM
Very nice.

The infoBox can not be created from existing markup but must be filled from JavaScript.



Creating from html markup is a bit problematic until I have approval from Jack and officially assigned classes that would be used to identify the title and body elements while constructing the InfoPanel from html markup.

As soon as I get them I can update the InfoPanel.

I'm thinking about the possibility to specify body element in config at least. In such a case I would remove the passed element from its existing position in the DOM tree and I'd append it to InfoPanel container.

What do you think about this?

amon
18 May 2007, 5:41 AM
It is a very useful widget! I'll use it in my applications! :)
But it has a small bug: when you expand the box (opening or closing), the borders are not continual. (Near the header box, the left and the right border break away from the title.
I have no time to test it out now, but tonight I will. :)

jsakalos
18 May 2007, 6:07 AM
Yeah,

it's just question of bodyClass that is the configurable option. The defaults maybe need some tuning.

jsakalos
18 May 2007, 10:07 AM
Hi folks,

I have added creation of the panel from html markup. The originally posted code is updated an also Live demo is updated (you may have to reload in the browser if cached).

franklt69
18 May 2007, 1:48 PM
jsalakos congratulations, I like this widget I'll use it in my applications, is there a link official where I can get the last version of Ext.InfoPanel?

kind regards
Frank

jsakalos
18 May 2007, 2:13 PM
jsalakos congratulations, I like this widget I'll use it in my applications, is there a link official where I can get the last version of Ext.InfoPanel?

kind regards
Frank

Thanks Frank.

There is no "official" link as Jack hasn't said a word yet. I'm still developing/debugging it. You can get latest code in this thread. When I post new version I change the title of this thread, next will be UPDATED4 and I'll inform in the first post about the character of the update. So when you see that I've updated code you can copy & paste it just from that first post.

schmidetzki
18 May 2007, 2:38 PM
I'm thinking about the possibility to specify body element in config at least. In such a case I would remove the passed element from its existing position in the DOM tree and I'd append it to InfoPanel container.

What do you think about this?

You could do something like in BasicDialog.js:


this.header = el.child("/.x-dlg-hd");
this.body = el.child("/.x-dlg-bd");
if(!this.header){
this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: " "}, this.body ? this.body.dom : null);
}
if(!this.body){
this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
}


In this case one can use HTML like this to create an InfoBox:

<div id="infobox">
<div class="x-dlg-hd">my title ...</div>
<div class="x-dlg-bd">
some body text ...
</div>
</div>
Perhapse use "x-infobox" instead of "x-dlg" ...

jsakalos
18 May 2007, 2:45 PM
Maybe you haven't noticed but I've already done it.

I've implemented both bodyEl logic what I'm describing in that post and Title+Body logic. I've overcame that css class thing like this:



<div id="panel">
<div>This is title</div>
<div>This is body put here whatever you like</div>
</div>
E.i., the first child is expected to hold the title and second child the body.

Usage is then:



var panel = new Ext.InfoPanel('panel', {trigger:'title', collapsed:true, .... });

jsakalos
18 May 2007, 3:44 PM
Hi folks,

I'm posting the example of Accordion (http://www.aariadne.com/extjs/examples/accordion.html). Not posting code yet as it's far from being perfect. Waiting for your inputs.

Animal
18 May 2007, 11:32 PM
Seems to work very well.

One thing. I do think animating the expansion and contraction is good. But can the easing be made configurable? I actually find the bouncy easing a bit annoying - just a smooth, linear easing would be better IMHO, but if it's configurable, then each to his own.

exo
19 May 2007, 12:58 AM
Very sexy. I'll definetly look into this.

nassaja-rus
19 May 2007, 2:01 AM
Can i put icon to panel titlebar?

jsakalos
19 May 2007, 2:40 AM
No API for it yet but you can try to set title to html markup or to style the title text to have icon as background image. I'll try it too, I'm curious.

jsakalos
19 May 2007, 3:21 AM
Now it support icons.

Thanks nassaja-rus for the idea.

jsakalos
19 May 2007, 3:25 AM
Seems to work very well.

One thing. I do think animating the expansion and contraction is good. But can the easing be made configurable? I actually find the bouncy easing a bit annoying - just a smooth, linear easing would be better IMHO, but if it's configurable, then each to his own.

Thanks Animal,

good idea. I'll do it.

jsakalos
19 May 2007, 3:37 AM
Seems to work very well.

One thing. I do think animating the expansion and contraction is good. But can the easing be made configurable? I actually find the bouncy easing a bit annoying - just a smooth, linear easing would be better IMHO, but if it's configurable, then each to his own.

Done. Posted source is not updated yet. Look at it if you like it. IMO, you were right now it looks better.

franklt69
19 May 2007, 5:06 AM
again good job jsakalos this examples http://www.aariadne.com/extjs/examples/accordion.html is a dream to me, when I begun to use this wonderful library I want do some UI like http://www.aariadne.com/extjs/examples/accordion.html I research but to me was difficult to do it, now you code is clear, I like it.

is possible jsakalos for instance in the west panel add a toolbar with a TextField where I can do search (filter) for the content inside each InfoPanel, I mean I guess it


InfoPanel - Firm (inside I have links setup, contacts, ......
InfoPanel -client(inside other links ....... contacts
InfoPanel - staff(inside other links .......
InfoPanel - sales(inside other links .......
............
InfoPanel -xconcept


now the user in the TextField type contacts and only appear the InfoPanel where inside it the link contact

it is some like to the toolbar in borland developer studio 2006 where is very easy to found a component in a panel like accordion.html example.

kind regards
Frank

jsakalos
19 May 2007, 5:20 AM
First of all, thank you for your appreciation, Frank.

I do not use/know "borland developer studio 2006" so I don't have any idea how it looks. If I understand it well you want a toolbar after the title that wouldn't be visible when panel is collapsed, right?

Post please some screenshot and I'll see what can I do about it. ;) Kidding... I'm almost 100% sure I'll include toolbar feature in the next upgrade.

wregen
19 May 2007, 5:34 AM
Hi jsakalos,
As I said before, you work is amazing. Especially quality of your code.

Question: Have you considered adding state management. Simple restoreState() method that expand it or collapse depending on previous state?

Thank you.

franklt69
19 May 2007, 6:20 AM
jsakalos the Idea is to do filter for the content inside of infoPanels, and show only the infopanels where appear the item that I want to find.

the idea is in the screenshot, let me know if you understand it.

kind regards
Frank

19 May 2007, 6:20 AM
Saki,

I want to publicly thank you for your work here. You've quickly become a valuable asset to the community.

jsakalos
19 May 2007, 6:21 AM
The toolbars are available now. See demos. Code is NOT UPDATED YET. Waiting for your inputs.

jsakalos
19 May 2007, 6:24 AM
Hi jsakalos,
As I said before, you work is amazing. Especially quality of your code.

Question: Have you considered adding state management. Simple restoreState() method that expand it or collapse depending on previous state?

Thank you.

Thank you very much for your appreciation.

I was expecting this question so you win a point. ;) Yes, I've been thinking about state management but that will come last as I have to finalize features to know what to save in addition to expanded/collapsed states.

jsakalos
19 May 2007, 6:29 AM
jsakalos the Idea is to do filter for the content inside of infoPanels, and show only the infopanels where appear the item that I want to find.

the idea is in the screenshot, let me know if you understand it.

kind regards
Frank

Look at the Accordion demo now if this is what you wanted. It should be easy to add a "global" toolbar as the Ext.Accordion is extension of Ext.ContentPanel so no code tweaking should be necessary. Let me know if I'm wrong.

The panels are stored in (undocumented) property items. It's Ext.util.MixedCollection.

jsakalos
19 May 2007, 6:31 AM
Saki,

I want to publicly thank you for your work here. You've quickly become a valuable asset to the community.

Thank you for your public commendation very much.

I'm very glad that you and others like my work.

:)

franklt69
19 May 2007, 7:29 AM
jsakalos, maybe you don't understand me, and I want something difficult to do, but I think is very useful, imagine this:

you have it InfoPanel:

Panel1 - Computer components (inside it panel I have this links)
- mouse
- memory ram
- hard driver
- motherboard

Panel2 - Network components (inside it panel I have this links)
- card
- wire utp5
- hub
- connector

Panel3 - other components (inside it panel I have this links)
- printer
- scaner
- machine fax
....

Now imagine in the west panel I add a toolbar to do search over the items (links) inside the each InfoPanel, inside the toolbar I have (search: TextField, a filter button, and clear filter button)

when I type "m": a search is executed and only appear

Panel1
- mouse
- memory ram
- motherboard

Panel3
- machine fax

so the idea is to do search over the content in each InfoPanel, when the user have many infoPanel in the west panel is hard to find the link that I want to click, so using it is vety easy, again maybe it is complicate but I think is a good idea.

kind regards
Frank

jsakalos
19 May 2007, 7:54 AM
Aaah,

now I get it fully. I was not planning this feature. Anyway I think it's not the difficult task for a user to create a global toolbar with controls he needs and then to iterate through the panels collection to find what he needs.

jsakalos
19 May 2007, 9:18 AM
Panel are now pinnable. See first post and Accordion (http://www.aariadne.com/extjs/examples/accordion.html) demo.

mdissel
19 May 2007, 10:39 AM
Thanks for your efforts!

Nice and clean code, jack can just copy / paste this into Ext :) and give you svn write access to maintain the code and/or join the Ext developer(s) team. There are more feature requests on the list ;) and Jack only has two hands

Marco

haibijon
19 May 2007, 11:08 AM
Looks great! =D>


Nice and clean code, jack can just copy / paste this into Ext :)

Only problem I can see if the weird comma placement, which makes the code a bit sloppy to read. I think the comma placement/code style should follow Ext (to make it easier to read) if anyone is planning on incorporating this into Ext.

I was also wondering if the accordian handles info panels in succession, like forms. ex:


var acc = new Ext.Accordion('west', { title: 'Accordion', fitContainer: true });
acc.add( infoPanelOne, infoPanelTwo, infoPanelThree );

jsakalos
19 May 2007, 11:45 AM
Only problem I can see if the weird comma placement, which makes the code a bit sloppy to read.Hmm, that's maybe just a personal taste. I've decided for leading commas after 10 years of coding and since then I don't need to search for a stray commas anymore.



I was also wondering if the accordian handles info panels in succession, like forms.
No, not yet. It has only basic functionality for panels to know about each other.

franklt69
19 May 2007, 11:51 AM
Ok thanks jsakalos, for now I will try to use the Ext.Accordion and Ext.InfoPanel, then I will try to do the search in the elements inside the panels, maybe I need you help, but now I think is good to fix bugs ect..

Now I am testing the page http://www.aariadne.com/extjs/examples/accordion.html but with IE6 and don't appear ok like in FF, watch the screenshoot.

kind regards
Frank

jsakalos
19 May 2007, 11:56 AM
I'll look into it, you can do too.

mdissel
19 May 2007, 12:14 PM
in IE 7 there's a gap space between the panels.. see screenshot

jsakalos
19 May 2007, 12:20 PM
The gap issue in IEx is fixed. Just a quick fix w/o code cleanup. I've updated also the code in the first post.

mdissel
19 May 2007, 12:27 PM
The gap issue in IEx is fixed. Just a quick fix w/o code cleanup. I've updated also the code in the first post.

Confirmed. Thanks!

Marco

franklt69
19 May 2007, 12:36 PM
jsakalos, now is better in IE6 but if you begin to open and close InfoPanel you can watch some troubles. watch attachment.

kind regards
Frank

jsakalos
19 May 2007, 1:06 PM
Yes, I'm just looking at it but still cannot come to a solution. It has something to do with region autoScroll that is true on demo page. I have right now implemented logic that turns of overflow auto on west region while animating.

It helps a bit but when the west region is not tall enough and scroll bar appears the panels do not resize in IE and display is corrupted.

To tell you truth I'm really very poorly skilled (better to say fully ignorant) in cross-browser issues as I've used exclusively FF so far. The code of demo is updated, posted not; I'm not going to update posted code until the issue is fixed.

I'm calling for help with IE issues !!! :-/ I'm calling for help with IE issues !!! :-/ I'm calling for help with IE issues !!!

haibijon
19 May 2007, 2:28 PM
Hmm, that's maybe just a personal taste. I've decided for leading commas after 10 years of coding and since then I don't need to search for a stray commas anymore.

Yeah, I just don't think it makes sense for all of Ext to have one coding style, and a single part of it to have a different, I mean, as long as this is just a 3rd party extension (i'd like to see i integrated into Ext, its a great component) its fine, but i think different coding styles in the same lib can be really confusing, especially for newbies that don't realize there is more than one way to write code.

jsakalos
19 May 2007, 2:39 PM
Reformating the commas is minimum. Should it become an Ext part I can do it in 10min. Otherwise, I'll continue to use leading commas as it contributes to decreasing my comma-error-debugging time nearly to zero.

If you're interested why I can explain.

What about the above mentioned IE issues? Could you help?

haibijon
19 May 2007, 2:42 PM
What about the above mentioned IE issues? Could you help?

I currently have a box running IE7, so can debug there, but no IE6 atm. BTW, do you want any help with the code, i've already refactored the accordian add method to work like the Ext.form.BasicForm/Form/Ext.menu.Menu add method.

jsakalos
19 May 2007, 2:46 PM
Sure, post it.

You can also see if the issue applies also to IE7. Just make window smaller, pin both pinnables and expand another. When the scrollbar appears you should see it.

haibijon
19 May 2007, 3:11 PM
Don't see the scrollbar issue in ie7 atm. Here is the new add code, it now allows adding one or more panels in sequence, and returns the last panel added (old accordion code still works same).

in Ext.Accordian(~ln 49), replace the add method with:

add: function() {
this.items.addAll(Array.prototype.slice.call(arguments, 0));
this.items.each(function(p){
this.relayEvents(p, ['beforecollapse', 'beforeexpand', 'animationcompleted', 'pinned']);
}, this);
return this.items.last();
}

Lemme know if you have any issues.

jsakalos
19 May 2007, 4:05 PM
Hi haibijon,

Re New add method: I just copied & pasted your add method and I found that the return value is last item whereas my original add returns the panel. This creates the problem with the accordion.js code (in center region of demo page) where return value of add is later used to create the toolbar. I've decided to keep the add as it was for the moment, although the code can be easily reworked to first create panels, save reference and then call createToolbar, or somehow else, there's plenty of methods. ;)

Re IE issues: I've solved one issue where the expand and pin icons were displayed at the scrollbar in IE6 by adding this:



, animationcompleted: {
scope: this
, fn: function(panel) {
this.enableScroll();
if(Ext.isIE) {
this.items.each(function(panel){
panel.el.repaint();
});
}
}}
but one issue still remains. While scrolling the west only bodies move, titles stay. Not seeing that?

tad_scsi
19 May 2007, 5:13 PM
Excellent work there!

jsakalos
19 May 2007, 5:25 PM
Thank you very much.

jsakalos
20 May 2007, 5:26 AM
Hi folks,

I have made panels draggable. See Live demo (http://www.aariadne.com/extjs/examples/infopanel.html). I've also cleaned up the code a bit removing defaults from constructor to public class variables to be easily overriden.

The scrolling issue in IE6 still remains. Can somebody help to fix it?

benny00
20 May 2007, 6:18 AM
Nice job Jozef!
How do you make the draggable pannel snap into a container or have its boundries set to the container? What I am trying to see if I can do, is to be able to rearrange the panels like in the D&D example. http://dev.tipos.com.br/extjs/dd_7.php

jsakalos
20 May 2007, 6:20 AM
Nice job Jozef!
How do you make the draggable pannel snap into a container or have its boundries set to the container? What I am trying to see if I can do, is to be able to rearrange the panels like in the D&D example. http://dev.tipos.com.br/extjs/dd_7.php

This is not implemented yet. Should there be more of you interested I'd look into it. For now, only plain dragging to change the position is there.

Jul
20 May 2007, 10:42 AM
Jozef,

The evolution of InfoPanel and Acccordion is great... it just keeps getting better and better.

I'll second benny00's comment about the draggable panel. I think it could be even more useful if it had the option to be constrained to a particular container. The ability to snap and reposition on drop and/or rubber band back when the drop target isn't valid seems to also be part of the usage pattern with constrained D&D.

That's probably a lot more work to implement, but I thought I would throw another voice on the pile in case it helps you decide what direction to take the development of Ext.InfoPanel.

- Jul

jsakalos
20 May 2007, 11:10 AM
Jozef,

The evolution of InfoPanel and Acccordion is great... it just keeps getting better and better.

I'll second benny00's comment about the draggable panel. I think it could be even more useful if it had the option to be constrained to a particular container. The ability to snap and reposition on drop and/or rubber band back when the drop target isn't valid seems to also be part of the usage pattern with constrained D&D.

That's probably a lot more work to implement, but I thought I would throw another voice on the pile in case it helps you decide what direction to take the development of Ext.InfoPanel.

- Jul

You mean something like docking/undocking plus reorderding within the dock, yeah?

Jul
20 May 2007, 11:48 AM
Yes, exactly. :)

trbs
20 May 2007, 3:27 PM
great work jsakalos :)

small side not: the text in the dragable panels are larger then the panels here. (ff on linux) so the >> arrows are not clearly visible anymore.

jsakalos
20 May 2007, 3:49 PM
great work jsakalos :)

small side not: the text in the dragable panels are larger then the panels here. (ff on linux) so the >> arrows are not clearly visible anymore.

Can you post a picture of it? I'm also on [email protected] and also [email protected] and looks fine. See att - it's after dragging + expanded.

sonic64
20 May 2007, 3:54 PM
thanks saki for your marvelous accordion addition..you are definitely a great asset to the EXT community...

jsakalos
20 May 2007, 3:57 PM
Hi folks,

I've just updated both Live Demo (http://www.aariadne.com/extjs/examples/infopanel.html) and Accordion (http://www.aariadne.com/extjs/examples/accordion.html).

Changes:



Width of panels on Live Demo is resizable now
The panels on Accordion are draggable within the container when collapsed.

The code of the implementation of the latter is really clumsy so far; If anybody had better idea on how to do it, just post it.

Panels are not yet dockable/undockable. Also the code in first post is not updated yet to show resizing part of panels. First I'd like to know what you think, then I'll update it.

okworld
20 May 2007, 10:17 PM
Hi,
That's an amazing work, really thank you.
I'm asking myself is there any way to load the panel content dynamically through XHR or iframe.
I've already tried both of them but I've some issue that I'm not able to solve until now. The iframe method work good but it doesn't take the whole ContentPanel width and it must be wrapped inside a div tag (issue related the panel title), the XHR method... ?! I'm trying to fire the load on expand event but it doesn't seem to work.

so any help ? :)

Animal
21 May 2007, 12:01 AM
I'm asking myself is there any way to load the panel content dynamically ?

Of course there is! These classes are just extensions of ContentPanel, so look at the ContentPanel documentation.

okworld
21 May 2007, 12:06 AM
I already tried, setUrl and url config options but nothing happen !!

jsakalos
21 May 2007, 1:03 AM
Post part of the code you thing is causing troubles.

jsakalos
21 May 2007, 1:38 AM
I'm trying to fire the load on expand event but it doesn't seem to work.I've just checked if expand event fire by this simple test code:



panel4.on('expand', function(){alert('expand')};);
and yes, it does fire.

Re loading from server: There is one think to keep in mind and it is that InfoPanel is the extension of ContentPanel with a content. The content is title and body. Title is formatted to look good, there are collapse and pin buttons added to it and body is just div to hold the content.

Should you load a content from server on expand event you had better to use body div (public variable) and use UpdateManager to load the content of body, not to setUrl on InfoPanel itself as if you'd loaded the whole content including title you'd run into troubles.

There are event handlers installed on title and collapse/pin buttons and such a server content would overwrite these elements. Title and (empty) body is rendered anyway before you can listen to expand event so there is no need to (re)load 'em from server.

Animal
21 May 2007, 2:20 AM
Perhaps getEl() should be overridden in InfoPanel to return the body Element?

Client code should not have access to the InfoPanel's wrapping Element, all client code needs to know about is the body Element, and the title Element.

okworld
21 May 2007, 2:25 AM
Thanks for the explanation, I'm going to make some test and keep in touch

jsakalos
21 May 2007, 2:26 AM
Perhaps getEl() should be overridden in InfoPanel to return the body Element?

Client code should not have access to the InfoPanel's wrapping Element, all client code needs to know about is the body Element, and the title Element.

Perfect idea! I'm going to do it.

jsakalos
21 May 2007, 2:33 AM
I have updated the code - see first post. The Animal's advice is also incorporated.

Animal
21 May 2007, 2:57 AM
Great, so now what's needed is for Jack to change the ContentPanel base class's implementation to use "getEl()" internally wherever "el" was used. (Shouldn't getters always be used?)

Then all the inherited ContentPanel methods will work: refresh, getUpdateManager, setUrl, setContent etc.

21 May 2007, 3:46 AM
Saki, this awesome.

jsakalos
21 May 2007, 3:59 AM
Great, so now what's needed is for Jack to change the ContentPanel base class's implementation to use "getEl()" internally wherever "el" was used. (Shouldn't getters always be used?)

Then all the inherited ContentPanel methods will work: refresh, getUpdateManager, setUrl, setContent etc.

So talk to him on that to coordinate with future version.

BTW, I've implemented resterOrder, setOrder and getOrder on Accordion. You can see it if you reorder panels and then you click "Reset order" button in panel3. I start to like it.

I plan dock/undock and state management and it would be finished. What do you think?

jsakalos
21 May 2007, 4:00 AM
Saki, this awesome.

Thank you very much.

Nice dragging, yeah?

johnnycannuk
21 May 2007, 4:14 AM
jsakalos,

This is just an amazing piece of code. Keep it up...go baby go!

How about expand all collapse all built in?

jsakalos
21 May 2007, 4:18 AM
jsakalos,

This is just an amazing piece of code. Keep it up...go baby go!

How about expand all collapse all built in?

Thank you very much.

You mean something like expandAll, collapseAll? No problem, just I don't think it will be used too often. But one never knows what users want... ;)

jsakalos
21 May 2007, 4:24 AM
I've bee thinking about expandAll a bit more and it seems to me that this wouldn't be useful to implement it in Accordion. Accordion is by definition: Expand one, others close, with the exception of pinned panel.

What could be maybe useful would be the possibility to put Accordion to "independent" mode. In such a case are expandAll and collapseAll really needed.

What do you think?

jsakalos
21 May 2007, 5:33 AM
I have added global toolbar with "Reset order" and "Independent mode" buttons. See the Accordian (http://www.aariadne.com/extjs/examples/accordion.html) live demo.

soad
21 May 2007, 7:00 AM
Greetings Jozef,

your InfoPanel component looks really nice. Is there any way to put it into individual grid cells?

jsakalos
21 May 2007, 7:02 AM
Never tried, but I'm veeeeeeeeeery curious. Do it as custom renderers.

johnnycannuk
21 May 2007, 11:54 AM
Saki,

Yeah, I'm sure I could have implemented expandAll collapseAll myself, but it would be nice to have it as part of the lib. I am currently working on a app that has a side panel of preferences that would fit perfectly into your accordion panel idiom - pin a few open if you wish, have them all closed by default or open by default and then have the ability to open or close all at the same time.

When we finally convert the app to Ext (it used DHTMLGoodies - kill me now) I think this will be a great feature for the UI. We have it coded by hand right now...

ben.tremblay
21 May 2007, 12:11 PM
I want to publicly thank you for your work here.
"RTFM" works! I think what you've done here answers most of the dumb/gnardly questions I would have otherwise have had to ask seperately.

E.G.:

I've bee thinking about expandAll a bit more and it seems to me that this wouldn't be useful to implement it in Accordion. Accordion is by definition: Expand one, others close, with the exception of pinned panel.
This is precisely what I'm working on for my WestMain right this moment!

thanks / congrats

jsakalos
21 May 2007, 12:27 PM
Thank you very much Ben,

I just haven't found word "gnardly" in any dictionary. Any slang? Could you explain?

galdaka
21 May 2007, 12:39 PM
Awesome work and progress. ;).

One suggestion: Make your accordion stateable via cookie provider for remember which panel are open.

Thanks in advance.

jsakalos
21 May 2007, 12:56 PM
Awesome work and progress. ;).

One suggestion: Make your accordion stateable via cookie provider for remember which panel are open.

Thanks in advance.

Thank you very much.

You maybe missed in this number of posts that I plan to implement the state mgmt but it will come last as it is not only if panel is open but also it's position, if it is docked/undocked, it's size, etc.

I'm still finalizing the features (undocking now works, but not on demo page yet) and as soon as they'll be completed I'll implements state mgmg. Only then I'll know what to save.

jsakalos
21 May 2007, 2:14 PM
Hi folks,

I've just update the Accordion (http://www.aariadne.com/extjs/examples/accordion.html) example. It now support seamless docking/undocking. Just drag a panel to the right out of the dock (west region) to undock it and drag it back to dock it.

Give it hard tests and report please any bug or oddity of behavior. The code is beta quality.

The next, hopefully last step will be the state management (remembering collapsed/expanded states, order, docked/undocked, size and position on the screen).

franklt69
21 May 2007, 3:40 PM
jsakalos amazing, only I am watching trouble in IE6:

The scrolling issue in IE6 still remains, and the drag, docking/undocking have trouble too, in FF it work ok.

again good job

kind regards
Frank

jsakalos
21 May 2007, 3:47 PM
jsakalos amazing, only I am watching trouble in IE6:

The scrolling issue in IE6 still remains, and the drag, docking/undocking have trouble too, in FF it work ok.

again good job

kind regards
Frank

I know :( As I told you last time, I'm IE-dumb. I could perhaps resolve that dragging issue as I'll review all code tomorrow but that scrolling ...

Hey some IE expert - Please help !

trbs
21 May 2007, 3:53 PM
Can you post a picture of it? I'm also on [email protected] and also [email protected] and looks fine. See att - it's after dragging + expanded.

sorry jozef i wasn't very clear but i've been very busy with work..
here are the screenshots, love your work :)

greetinx,
ido

jsakalos
21 May 2007, 3:58 PM
sorry jozef i wasn't very clear but i've been very busy with work..
here are the screenshots, love your work :)

greetinx,
ido

Oh, yes.

It looks you have different font mapped to sans-serif. I'm aware of the fact that styling of panels and accordion needs tweaking but panels are now (optionally) resizable (undocked not yet, that I'll review tomorrow).

Anyway thanks for posting; now I know what to tweak.

humpdi
21 May 2007, 6:45 PM
Reformating the commas is minimum. Should it become an Ext part I can do it in 10min. Otherwise, I'll continue to use leading commas as it contributes to decreasing my comma-error-debugging time nearly to zero.

If you're interested why I can explain.



I AM intrested why! could you explain me the advantage of the way you write your commas? would be nice :)

nice evening

jsakalos
21 May 2007, 7:00 PM
I AM intrested why! could you explain me the advantage of the way you write your commas? would be nice :)

nice evening

Yes, I'll write an article on this hope tomorrow.

humpdi
21 May 2007, 7:02 PM
:)would be nice :) allways ready for learning new programing technices

Mavrick
21 May 2007, 11:35 PM
Awesome, You've saved me a ton of work as I'd just started on building my own. thanks for posting this. I really hope this makes it into the main trunk as it should be.
Thanks for your hard work on this.

galdaka
21 May 2007, 11:46 PM
I

Mavrick
22 May 2007, 3:49 AM
Hi just wondering if anyone can guide me a bit. I am looking at the accordion widget and I do like it a lot. I have not managed to get it to work without having div's present on the page. ideally I'd like to achieve what I have currently with content panels in that I can generate them on the fly using the autoCreate flag. is anything like this present in the accordion/info panel? :-/

[edit]
I should add that I have tried using the autoCreate flag in various places with no results.

jsakalos
22 May 2007, 6:22 AM
The autoCreate is not yet supported but it's quite high on the priority list. As a workaround you can use DomHelper to generate panel on the fly (appending to document.body) and the you pass reference to it to the InfoPanel constructor.

I haven't tried but it should work.

I'm right now working on the accordion dragging struggling with cross browser issues but once this is finished I'll implement autoCreate.

Mavrick
22 May 2007, 6:35 AM
Ah... OK I'll give that a go and will see how I get on. Thanks Saki.

jsakalos
22 May 2007, 7:02 AM
Hi folks,

I've uploaded Beta 2 with much better dragging and docking/undocking.

Give it a try.

PS: Thanks all of you for all your commendations. They give an energy to continue.

galdaka
22 May 2007, 8:49 AM
Awesome work!! :)

One Question: When you drag a panel to a original container, is posible to restore in to a last position?

Thanks in advance

jsakalos
22 May 2007, 11:34 AM
Awesome work!! :)

One Question: When you drag a panel to a original container, is posible to restore in to a last position?

Thanks in advance

No, the logic is that you drag it where you want. What you can do is to resetOrder() (initial orded as defined by html/order of creation), then you can call method getOrder() and save the order before undocking and setOrder() after docking back, if the order is important and you want to override where the panel was dragged to.

galdaka
22 May 2007, 12:16 PM
No, the logic is that you drag it where you want. What you can do is to resetOrder() (initial orded as defined by html/order of creation), then you can call method getOrder() and save the order before undocking and setOrder() after docking back, if the order is important and you want to override where the panel was dragged to.

Sorry for my bad English.

I dont

jsakalos
22 May 2007, 6:39 PM
[quote=galdaka;33214]Sorry for my bad English.

I dont

jsakalos
22 May 2007, 6:45 PM
Hi folks!

I've updated the demos with newest code. There are two most significant improvements:



Even better and more reliable dragging
autoCreate now works. Here the autoCreate logic of Ext.ContentPanel is called and ony after that the title i added and elements are rearranged. The autoCreate object is thus that which will become the body of the panel

Give it a try.

PS: IE help for resolving the scrolling issue? Anybody who has tools and experiences?

waterlowa
22 May 2007, 8:24 PM
Great work!!

Just tried the example, and found two minor issues.

The panels are draggable when expanded. This is not a problem in IE but in Firefox there's a rendering issue.

Example 1: expand a panel, then dock it, then collapse it, the content is still visible.

Example 2: expand a panel, re-order its position, then collapse it or expand/collapse other panels.

The Firefox rendering problem remains until a COLLAPSED panel is dragged.


Another thing is the draggable boundary. This actually is worse in IE in which you can continue to drag the panel outside the screen (right and down). And in both Firefox and IE you can gradually drag a DOCKED panel to the left until almost completely off the screen.

Animal
23 May 2007, 12:09 AM
Amazing. I think it could be very useful when presenting a lot of info. Users can break out panels to view seperately in any position on the screen.

Just a tiny thing. It's not really a bug, but...

In accordion mode, when there is only supposed to be one expanded, if you drag a panel out, and expand it. Then expand another panel. Then drag the undocked panel back in, you end up with two panels expanded. The more panels you drag out and expand before dragging them back in, the more you can have open at once.

Not a big deal. I don't know how you implement the collapsing of "other" panels on expansion. Do you store the last single panel expanded, and collapse that? Perhaps it should just loop over all other docked panels and collapse any expanded ones?

Animal
23 May 2007, 12:15 AM
OK, I see you collect



this.expanded


And collapse it on expansion of another.

A suggestion, perpaps change



collapseAll: function(alsoPinned)


to



collapseAll: function(alsoPinned, except)


So you can collapse all except the one being expanded.

Mavrick
23 May 2007, 1:25 AM
Saki, Fantastic, The autoCreate stuff works a treat thanks.

jsakalos
23 May 2007, 3:38 AM
Great work!!

Just tried the example, and found two minor issues.

The panels are draggable when expanded. This is not a problem in IE but in Firefox there's a rendering issue.

Example 1: expand a panel, then dock it, then collapse it, the content is still visible.

Example 2: expand a panel, re-order its position, then collapse it or expand/collapse other panels.

The Firefox rendering problem remains until a COLLAPSED panel is dragged.


Another thing is the draggable boundary. This actually is worse in IE in which you can continue to drag the panel outside the screen (right and down). And in both Firefox and IE you can gradually drag a DOCKED panel to the left until almost completely off the screen.

Thank you very much.

These were bugs in fact; they are fixed now. Give it another try.

jsakalos
23 May 2007, 3:40 AM
OK, I see you collect



this.expanded
And collapse it on expansion of another.

A suggestion, perpaps change



collapseAll: function(alsoPinned)
to



collapseAll: function(alsoPinned, except)
So you can collapse all except the one being expanded.


Hi Animal,

thank you very much for your time you've invested to make the Accordion better. Your advices are excellent, as always. I've implemented 'em and also fixed some bugs so please give it an another try.

Thanks,
Jozef

KimH
23 May 2007, 3:43 AM
I get an error "document.body is null or not an object" :-/ when going to http://www.aariadne.com/extjs/examples/infopanel.html

jsakalos
23 May 2007, 3:46 AM
I get an error "document.body is null or not an object" :-/ when going to http://www.aariadne.com/extjs/examples/infopanel.html

I'll looked to it. I've been working on Accordion changing also InfoPanel what may introduce a new bug.

rtannert2
23 May 2007, 3:50 AM
Safari says "Undefined value" on line 432 of Ext.InfoPanel.js, which is the line bolded below:


, setContent: function(content) {
this.body.update(content);
}

jsakalos
23 May 2007, 4:10 AM
I get an error "document.body is null or not an object" :-/ when going to http://www.aariadne.com/extjs/examples/infopanel.html


Safari says "Undefined value" on line 432 of Ext.InfoPanel.js, which is the line bolded below:


, setContent: function(content) {
this.body.update(content);
}

This should be fixed now. Give it a try.

rtannert2
23 May 2007, 4:17 AM
It is. Great!

alanwilliamson
23 May 2007, 5:21 AM
Jsakalos, this is a beautiful piece of code and works beautifully. You are a credit and inspiration to the power open source brings to a project.

I have been playing with it and it is very solid. I do have one wee query! :)

I don't want the user to be able to drag them around, and when i turn that off "undockable?" it does seem to stop, however, it goes completely blank and I lose it!

Am i doing something stupid here?

JeffBurr
23 May 2007, 5:30 AM
This is great stuff. I almost feel guilty thinking about using it!

Question: your link to infopanel.html now shows a page that is broken. Did you decide the infopanels would not be able to get created outside an accordion? If not, you might want to update this page or add an example of a "standalone" infopanel on the accordion demo.

Again, this is excellent, excellent useful code.

jsakalos
23 May 2007, 5:53 AM
Thank you very much for commendation.



Question: your link to infopanel.html now shows a page that is broken. Did you decide the infopanels would not be able to get created outside an accordion? If not, you might want to update this page or add an example of a "standalone" infopanel on the accordion demo.




Hmmm, I've just clicked and it works. It was broken for some time but this is fixed. You may need to refresh cache of your browser.

newbie
23 May 2007, 6:07 AM
This is very nice!
However, I'm not sure how to set something other than HTML markup as the content of the InfoPanel. For example, I'd like to put a GridPanel as the content of one of the Accordion panels. Is this possible?
Thank you for your great work!

galdaka
23 May 2007, 6:11 AM
Hmmm, I think it is the matter of personal taste, preferences and character of the application the panels are used in. Now it's setup such a way that you can drag a panel from the center to the west to any position you like. The position from which you originally dragged it out to the center is not remembered.

Should many people requested this, giving me some real app examples where this is important I'd think how to implement it.

Do you have some specific app in mind? Any link or demo where I can see something similar?

I dont

alanwilliamson
23 May 2007, 6:15 AM
I have more information here.

Say I have:

acc.add(new Ext.InfoPanel('panel-1', {trigger:'title',collapsed:true, draggable:false}));

Then if it simply move the panel a little bit, (very common as you click it) then it disappears completely.

jsakalos
23 May 2007, 6:21 AM
I have more information here.

Say I have:

acc.add(new Ext.InfoPanel('panel-1', {trigger:'title',collapsed:true, draggable:false}));

Then if it simply move the panel a little bit, (very common as you click it) then it disappears completely.

I'm not able to reproduce this. Have you observed this behavior on demo page (you may need browser cache refresh; has been updated) or in your app?

If it's in your app please post your code and I'll look into it.

jsakalos
23 May 2007, 6:23 AM
[quote=galdaka;33454]I dont

alanwilliamson
23 May 2007, 6:25 AM
In my sample page -- the problem is that your demo page, you have turned on the ability for all your info panels to be draggable. If you turn this off, so they can't be moved, then you should see it fairly quickly.

If i turn on my draggable, then all is well; except its draggable and i don't want that. :)

If you can't recreate it by your own sample code, (which is all I really have incidentally), then i will send you my file.

Thanks

jsakalos
23 May 2007, 6:56 AM
Just one more question: Your panels in trouble are inside of Accordion or standalone?

hcervantes
23 May 2007, 7:11 AM
Great stuff Saki! You are awesome!
There is a JavaScript error on the Live Demo (http://www.aariadne.com/extjs/examples/infopanel.html) on IE 7. I tested it on FireFox and it works marevelouis.

Keep up the good work.

jsakalos
23 May 2007, 8:18 AM
Great stuff Saki! You are awesome!
There is a JavaScript error on the Live Demo (http://www.aariadne.com/extjs/examples/infopanel.html) on IE 7. I tested it on FireFox and it works marevelouis.

Keep up the good work.

This is fixed now. Code in first post is updated too.

JeffBurr
23 May 2007, 8:21 AM
My earlier question above about the infopanel.html example is IE-specific. FF does work perfectly.

Those great IE error messages say that it is "line 20", but I can't find anything on line 20 in any of the files that would cause this...

Nevermind, you fixed it while I was typing this! Way to go!

jsakalos
23 May 2007, 8:22 AM
In my sample page -- the problem is that your demo page, you have turned on the ability for all your info panels to be draggable. If you turn this off, so they can't be moved, then you should see it fairly quickly.

If i turn on my draggable, then all is well; except its draggable and i don't want that. :)

If you can't recreate it by your own sample code, (which is all I really have incidentally), then i will send you my file.

Thanks

I was looking into this but I cannot reproduce it. The reason could be that the code evolves very rapidly and I'm uploading quite frequently. Please download both Ext.InfoPanel.js and Ext.Accordion.js from demo pages now and re-check.

Should the problem continue, post your code so I can reproduce and fix the bug.

Thank you for your interest.

Jozef

jsakalos
23 May 2007, 8:24 AM
My earlier question above about the infopanel.html example is IE-specific. FF does work perfectly.

Those great IE error messages say that it is "line 20", but I can't find anything on line 20 in any of the files that would cause this...

Nevermind, you fixed it while I was typing this! Way to go!

I really hate the js error reporting in IE. It gives you a line but this is not the line in the specific file but some internal parsing line number or what.... ;)

Anyway, everything should be fixed now.

jsakalos
23 May 2007, 8:28 AM
Hi folks,

just reminder:

Refresh your browser cache when on demo pages. Code changes now quite fast so you may be reporting already fixed bugs.

Thank all of you for your interest and for your time helping me to find and fix bugs and thank you also for your ideas that make InfoPanel/Accordion even better.

burn
23 May 2007, 8:57 AM
Hey Saki, great job! I only have one bullet to shoot: dragging the floating panels around in the live demo affects the document body, causing scrollbars to appear. It would be nice if drag could have a threshold.

Very very nice job :) Kudos!

Luca

jsakalos
23 May 2007, 9:00 AM
Hey Saki, great job! I only have one bullet to shoot: dragging the floating panels around in the live demo affects the document body, causing scrollbars to appear. It would be nice if drag could have a threshold.

Very very nice job :) Kudos!

Luca

You probably mean horizontal scrollbar in the Accordion demo right?

Update: Hmmm, I've checked it right now and no scrollbars in FF2 and IE6. Have you refreshed browser cache?

efege
23 May 2007, 9:07 AM
Refresh your browser cache when on demo pages. Code changes now quite fast so you may be reporting already fixed bugs.

Saki, I suggest adding important notes like this one on the demo page itself. Also, a link to this forum thread would be nice; if people find the demo using e.g. a bookmark on del.icio.us (http://del.icio.us/url/ee8f90940f3ac00708a36bc7ba0d8121), the context is lost.

Thanks for sharing this work! =D>

leo.pfeifenberger
23 May 2007, 9:13 AM
Hi Jozef,

i found a glitch while using IE7...

Open all Panels and resize your Browserwindow that a scrollbar appears for the Accordion, then use the Scrollbar - the Panels scroll, the Titlebars remain fixed...

Thanks for your great effort! Nicely done!

Leo

galdaka
23 May 2007, 9:42 AM
Posible bug: When scroll the content, panel

Animal
23 May 2007, 9:56 AM
Beautiful job. Drag an open InfoPanel back into the Accordion, and it does a



collapseAll(collapsePinned, this.panel)


to close all except the panel being docked.

It should not do that if the Accordion is in "independent" mode where >1 is allowed to be open at once.

jsakalos
23 May 2007, 10:04 AM
Saki, I suggest adding important notes like this one on the demo page itself. Also, a link to this forum thread would be nice; if people find the demo using e.g. a bookmark on del.icio.us (http://del.icio.us/url/ee8f90940f3ac00708a36bc7ba0d8121), the context is lost.

Thanks for sharing this work! =D>

Perfect idea!

Done.

jsakalos
23 May 2007, 10:23 AM
Beautiful job. Drag an open InfoPanel back into the Accordion, and it does a



collapseAll(collapsePinned, this.panel)
to close all except the panel being docked.

It should not do that if the Accordion is in "independent" mode where >1 is allowed to be open at once.

Yes, it's the bug. My son found out too a couple of minutes ago. I'll fix it soon.

hcervantes
23 May 2007, 10:29 AM
This is fixed now. Code in first post is updated too.

You're right, it works.

jsakalos
23 May 2007, 10:32 AM
Yes, it's the bug. My son found out too a couple of minutes ago. I'll fix it soon.

This is fixed.

tryanDLS
23 May 2007, 11:09 AM
Saki,

Great job. I'm scrapping my implementation for yours, rather than implementing DnD in mine :D

I do think ExpandAll would be use a useful feature, in addition to the CollapseAll.

jsakalos
23 May 2007, 11:14 AM
Saki,

Great job. I'm scrapping my implementation for yours, rather than implementing DnD in mine :D

I do think ExpandAll would be use a useful feature, in addition to the CollapseAll.

No problem I'll add it.

jsakalos
23 May 2007, 11:26 AM
No problem I'll add it.

Hey Tim,

it's done. I've also added the button on the global toolbar to test it.

JeffBurr
23 May 2007, 11:37 AM
I saw this mentioned before I think, but now when I do expand-all in the accordion example, if the browser is small enough that the accordion has to scroll, the title bar handles do not scroll, although the content does.

This is only in IE, it works correctly in FF.

(Sorry if this is redundant or already being addressed.)

jsakalos
23 May 2007, 12:04 PM
I saw this mentioned before I think, but now when I do expand-all in the accordion example, if the browser is small enough that the accordion has to scroll, the title bar handles do not scroll, although the content does.

This is only in IE, it works correctly in FF.

(Sorry if this is redundant or already being addressed.)

Yes, this is known issue. I'm calling for help on this as I'm (first) an IE-dumb, (second) have no IE tools and (third) no IE experience. I'm pure Linux guy running IE6 in wine (windows emulator).

IE guys!!! Help!!!

waterlowa
23 May 2007, 5:28 PM
Thank you very much.

These were bugs in fact; they are fixed now. Give it another try.

Just tried the example (http://www.aariadne.com/extjs/examples/infopanel.html) and could still drag the docked panels off the screen (top, left, right, bottom, both IE and FF). Was I looking at the right place?

jsakalos
23 May 2007, 5:53 PM
Just tried the example (http://www.aariadne.com/extjs/examples/infopanel.html) and could still drag the docked panels off the screen (top, left, right, bottom, both IE and FF). Was I looking at the right place?

Probably not as there is no dock (Accordiong) on that page. That page contains only independent panels; two of them are draggable w/o any restriction. Look at this: Accordion (http://www.aariadne.com/extjs/examples/accordion.html).

maybenotmay
23 May 2007, 9:00 PM
this might be a really silly question, but how hard would it be to change it from vertical to horizontal?

danh2000
23 May 2007, 9:34 PM
Hi Saki,

Nice work... just a quick point - I'm in an office with only IE6 :"> (I know, the shame of it) and Panel 6 won't resize - I have no handles or ability to resize at all.

Haven't tried any other browsers.

Hope this helps,

Dan

Animal
23 May 2007, 11:56 PM
Congrats, it seems bug free, and fully featured to me... I only use FF, IE is quite poor software.

I don't mean to worry you, but you know ContentPanel will be deprecated in Ext 2.0 in favour of Ext.Panel?

This will mean some refactoring, but it looks like it will be worth it. See http://extjs.com/forum/showthread.php?t=6481

I have a ContentPanel subclass, so I'm going to be refactoring soon.

danh2000
24 May 2007, 12:29 AM
Hello Again,

Update:

I've tried again from home.. IE6 doesn't resize (I thought it may have been a glitch on the pc/browser I was using)... and Opera 9 is a bit odd.

The open and close animation in Opera is a bit strange - I get about 1 cm gap between the title bar and the content (table header or text) before it jumps back into place.

Also with Opera - if I simplly expand it works fine, however if I resize the titlebar (panel6) and then expand, the whole content panel is transparent (doesn't have a red bg like it should).

I hope this helps - it has potential to be a very nice component.

Regards,

Dan

EDIT: I've attached an image which shows both Opera issues.. The gap you see is mid-animation, and the content does jump back into place.http://www.technomedia.co.uk/opera.jpg

galdaka
24 May 2007, 12:40 AM
Posible bug: Z-Index of darggable panels are wrong when you D&D panels outside of accordion. When you drag one panel over another, you don

jsakalos
24 May 2007, 1:35 AM
this might be a really silly question, but how hard would it be to change it from vertical to horizontal?

Maybe I'll disappoint you but this wouldn't be a trivial 10 minutes work both on the part of the Accordion/InfoPanel components and also on the part of users. The major problem is that there is no easy way how to rotate text in browsers. You'd need to create an image of rotated title and css class to use it.

If you really need it, you're welcome to modify/extend the current InfoPanel/Accordion classes.

jsakalos
24 May 2007, 1:52 AM
Hello Again,

Update:

I've tried again from home.. IE6 doesn't resize (I thought it may have been a glitch on the pc/browser I was using)... and Opera 9 is a bit odd.

The open and close animation in Opera is a bit strange - I get about 1 cm gap between the title bar and the content (table header or text) before it jumps back into place.

Also with Opera - if I simplly expand it works fine, however if I resize the titlebar (panel6) and then expand, the whole content panel is transparent (doesn't have a red bg like it should).

I hope this helps - it has potential to be a very nice component.

Regards,

Dan

EDIT: I've attached an image which shows both Opera issues.. The gap you see is mid-animation, and the content does jump back into place.

Yes, this is confirmed. Right now I'm working on the state management for Accordion (http://www.aariadne.com/extjs/examples/accordion.html) and I'll look into these bugs when that will be finished.

jsakalos
24 May 2007, 1:54 AM
Congrats, it seems bug free, and fully featured to me... I only use FF, IE is quite poor software.

I don't mean to worry you, but you know ContentPanel will be deprecated in Ext 2.0 in favour of Ext.Panel?

This will mean some refactoring, but it looks like it will be worth it. See http://extjs.com/forum/showthread.php?t=6481

I have a ContentPanel subclass, so I'm going to be refactoring soon.

Yes, I'm prepared to make compatible with Ext 2.0.

jsakalos
24 May 2007, 2:24 AM
[quote=galdaka;33734]Posible bug: Z-Index of darggable panels are wrong when you D&D panels outside of accordion. When you drag one panel over another, you don

danh2000
24 May 2007, 4:38 AM
Right now I'm working on the state management for Accordion (http://www.aariadne.com/extjs/examples/accordion.html) and I'll look into these bugs when that will be finished.

Yes, I'm afraid Opera also behaves a little strangely with the accordian during the animation... not sure if you are aware of this, or are even looking for this sort of feedback, but feel free to ask if you want more info.

Regards,

Dan

jsakalos
24 May 2007, 4:43 AM
Hi folks,

I have just uploaded RC1 (Release Candidate 1) of the InfoPanel/Accordion. The main change is that the state management is implemented. The following states are currently preserved:



Collapsed/Expanded states of panels
Pinned states of panels
Order of panels
Docked state of panels
Positions of the undocked panels on the screen
Independent mode of accordion
Undockable mode of accordion

I consider this version as "Feature freeze" unless something very important and interesting arises. From this point on I'll focus on debugging, if any, code cleanup and optimization, if useful.

You can test it here: Accordion (http://www.aariadne.com/extjs/examples/accordion.html)

Have fun!

Animal
24 May 2007, 5:04 AM
Fantastic. I really love the "undockable" feature.

I've requested (a long time ago) that TabPanelItems be made undockable so that you can drag one out of its TabPanel for independent viewing, resizing etc. Perhaps you want to see two Panels at once, where straight TabPanels only show one at a time.

I don't know if this will be possible with the new Ext.Panel feature. I tried to add overrides to TabPanel to allow this, but it got too complicated - they are all interlinked.

galdaka
24 May 2007, 5:11 AM
ohhhhhhhhhhh, very nice.

Posible bug: 1. Open panel 2. Reopen the URL. Panel2 stick image not appears. I use IE6.

Thanks in advance.

jsakalos
24 May 2007, 5:16 AM
Fantastic. I really love the "undockable" feature.



Hi Animal,

I'm really very glad you like it. Give it hard tests if you have time and report any bugs or ideas. You ideas have always been very useful for the development.

About TabPanels: We'll see it in the new version. ;)

Hi,

jsakalos
24 May 2007, 5:21 AM
ohhhhhhhhhhh, very nice.

Posible bug: 1. Open panel 2. Reopen the URL. Panel2 stick image not appears. I use IE6.

Thanks in advance.

Thank you very much for finding the bug.

It's fixed now.

efege
24 May 2007, 5:28 AM
Saki, this is a really minor (even ignorable) observation.

The cursor over the titlebar of a pinned panel displays a hand. I'm not completely sure, but I think that by convention a hand cursor is used as an invitation to click. Since clicking on a pinned panel's title has no effect, should the hand still be there? Probably an arrow is better.

jsakalos
24 May 2007, 5:31 AM
Saki, this is a really minor (even ignorable) observation.

The cursor over the titlebar of a pinned panel displays a hand. I'm not completely sure, but I think that by convention a hand cursor is used as an invitation to click. Since clicking on a pinned panel's title has no effect, should the hand still be there? Probably an arrow is better.

Thank you for your observation. I'm putting it in the ToDo list.

Hi,

Brendan Carroll
24 May 2007, 8:41 AM
I have to say that stumbling upon extjs was an eye-opening experience. This is just insane...WOW. I've been developing in .Net/Javascript/JSP/Python etc.. for years and am blown away by the depth of this library. I would love to see more extensive help files so I can really dig deeper. I can wait as I can see you all have been real busy.

As for the accordians, is it possible to put together a demo showing just those objects outside of a layout. I kinda see the layout as overwhemling as this point.


GREAT WORK!!!!

-BC

kitepad
24 May 2007, 8:43 AM
Hi,

It's very cool. But how to add a Tab support for InfoPanel that like BasicDialog?

galdaka
24 May 2007, 8:54 AM
Hi,

It's very cool. But how to add a Tab support for InfoPanel that like BasicDialog?

Be patient.Comming soon with Exts 2.0 and new Window component.

jsakalos
24 May 2007, 11:30 AM
Hi,

It's very cool. But how to add a Tab support for InfoPanel that like BasicDialog?

I haven't tried but public property panel.body is the body div so if you can create tabs in a generic div as a container it should be possible to do it also in the InfoPanel's body div.

Try it and let me know; with screenshots or a Live Demo if possible.

Hi,
Jozef

jsakalos
24 May 2007, 11:41 AM
I have to say that stumbling upon extjs was an eye-opening experience. This is just insane...WOW. I've been developing in .Net/Javascript/JSP/Python etc.. for years and am blown away by the depth of this library. I would love to see more extensive help files so I can really dig deeper. I can wait as I can see you all have been real busy.

As for the accordians, is it possible to put together a demo showing just those objects outside of a layout. I kinda see the layout as overwhemling as this point.


GREAT WORK!!!!

-BC

Thank you for your commendation Brendan.

Re Help files: You see, the Ext develops rocket speed so manuals, tutorial, or howtos lag a bit. However, the number of good tutorials grows, this help forum is also great to share experience and knowledge of Ext. I must just say that I haven't seen anything better for (web) development through my 25 years of programming.

I'm also trying to help both on the forum and on Accordion (http://www.aariadne.com/extjs/examples/accordion.html) demo page you can find step by step howto. Many others help too.

So, you're welcome to explore and master Ext and be sure that you always find help.

Hi,

galdaka
24 May 2007, 11:54 AM
What about this problem? See image.

jsakalos
24 May 2007, 12:02 PM
What about this problem? See image.

Yes, this is known "IE scrolling issue". Still haven't found the solution. Tim Ryan is also helping; no result yet.

I was now working a bit on one new feature (will be in RC 2 as a surprise) now I'll cleanup the code and write documentation where missing and then I'll go for hunting of this scrolling issue.

Or somebody knows the reason for that?

galdaka
24 May 2007, 12:08 PM
I was now working a bit on one new feature (will be in RC 2 as a surprise)


I can

jsakalos
24 May 2007, 12:54 PM
[quote=galdaka;33950]I can

galdaka
24 May 2007, 12:56 PM
It's resolved. The fix will be included in RC 2.

Great work!! and quickly!! Awesome jsakalos!! ;)

jsakalos
24 May 2007, 5:27 PM
Hi folks,

I couldn't resist and in this RC 2 (Release Candidate 2) I've implemented two new features:


Configurable panel shadows
Windows-like overlapping undocked panels management
In addition to this the famous IE scrolling issue has been resolved.

Give it a try and report please bug/oddities.

Hi,

[Added]: I have just tested the Accordion Example page (http://www.aariadne.com/extjs/examples/accordion.html) and when I connected for the first time I got ugly effect and also that IE scrolling issue seemed not to work. I had to delete cookies in IE6 (if you can do it selectively look for cookie ys-west-dock-state and delete only this). I also had to Ctrl+Refresh Button click.

Jul
24 May 2007, 6:17 PM
Jozef,

Fantastic work. Just tested in IE6 and it's much, much better. However, I found one more small bug. See the attached image for an example, but in IE6, if you make the browser window smaller so that the scroll bar appears in the region with the accordion, the expansion/contraction buttons are obscured. If you do anything with the accordions, they will reset and all is fine. Maybe a refresh message isn't getting propagated to the panel correctly.

My only other observation at this point is a usability issue. I keep wanting to redock the panels to the accordion by dragging them to the empty space below the accordion. I wish there were a way to configure it to allow you to do that. It just seems more intuitive to be able to drop them on that nice empty space and have them redock. :)

Thanks again for this great contribution to the Ext community.

- Jul

jsakalos
24 May 2007, 6:22 PM
Yes, I see it. I'm putting both your comments to the todo list.

Thanks for testing.

Hi,

danh2000
24 May 2007, 6:51 PM
Re Accordian:

Apart from already mentioned, abnother bug I see in IE is that the accordian panels with a toolbar, lose the toolbar background after a toolbar button is clicked - mouse down displays the toolbar correctly, but as soon as you release the mouse button, the toolbar vanishes - then if you resize the west panel, or mouse over the main west toolbar, the panel toolbar reappears.

Another issue is if you start out with Panel 3 open, then open panel 4, the panel size is incorrect during animation then jumps back into place at the end of animation - I've attached a screen shot to show the mid-animation gap to the right of the content.

http://www.technomedia.co.uk/acc_ie_ani.JPG


Regards,

Dan

jsakalos
24 May 2007, 8:30 PM
lose the toolbar background after a toolbar buttonI have an idea what this could be so I hope I'll fix it soon.


size is incorrect during animation then jumps back into place at the end of animationThis is re-introduced bug as I've changed the layout of accordion so I re-fixed it.

Thanks for pointing out.

Hi

PS: Refresh cache before testing.

jsakalos
24 May 2007, 9:07 PM
Saki, this is a really minor (even ignorable) observation.

The cursor over the titlebar of a pinned panel displays a hand. I'm not completely sure, but I think that by convention a hand cursor is used as an invitation to click. Since clicking on a pinned panel's title has no effect, should the hand still be there? Probably an arrow is better.

Hi efege,

this is fixed.

Hi

kitepad
24 May 2007, 10:12 PM
I haven't tried but public property panel.body is the body div so if you can create tabs in a generic div as a container it should be possible to do it also in the InfoPanel's body div.

Try it and let me know; with screenshots or a Live Demo if possible.

Hi,
Jozef

Thanks. It's ok. Screenshot is following:

kitepad
24 May 2007, 10:16 PM
For InfoPanel live demo, resizeable is not work in IE6, but work in FF2.

jsakalos
24 May 2007, 10:37 PM
For InfoPanel live demo, resizeable is not work in IE6, but work in FF2.

Thanks, now it's "bug hunting" period, I'll let you know when it'll be fixed.

That tabs look good! I like it.

garyrgi
25 May 2007, 1:34 AM
jsakalos,

Thats just freaking awesome work man, great additional functionality!

Gary

alanwilliamson
25 May 2007, 7:54 AM
I would second the motion for a maxHeight property.

I have tried setting the body to a custom CSS with a max-height and overflow set, but i am getting some funky results when the infopanel is collapsed again.

jsakalos
25 May 2007, 8:57 AM
Hi folks,

I've just uploaded RC 3 and I have good news: All IE issues are fixed.


For those interested the main problem was that I have borrowed the title creation logic and styles from Ext.BorderLayout and in has shown up as lazy unlucky decision. The title is now composed of the table (similar to toolbar table) and this fixes everything.

Another major change is that I've introduced css classes, some of them mandatory for InfoPanel/Accordion to look good and some of them user definable. These classes are in accordion.css with comments that should clarify the purpose. Empty classes in this file are just hooks or reminders that they are used/changed by code so you can put there your visual preferences.

This was quite a work so code is now working but littered with commented out old fragments. Also, the infopanel example might not look good or not work at all as I've been focused to the Accordion (http://www.aariadne.com/extjs/examples/accordion.html).

So, give it a fresh try, and report please still outstanding issues/oddities.

Hi,

jsakalos
25 May 2007, 9:02 AM
I would second the motion for a maxHeight property.

I have tried setting the body to a custom CSS with a max-height and overflow set, but i am getting some funky results when the infopanel is collapsed again.

Look now how it works in RC 3 and if it's not as expected post please some picture so I can fix it.

jsakalos
25 May 2007, 9:06 AM
Jozef,

Fantastic work. Just tested in IE6 and it's much, much better. However, I found one more small bug. See the attached image for an example, but in IE6, if you make the browser window smaller so that the scroll bar appears in the region with the accordion, the expansion/contraction buttons are obscured. If you do anything with the accordions, they will reset and all is fine. Maybe a refresh message isn't getting propagated to the panel correctly.


This is fixed in RC 3;



My only other observation at this point is a usability issue. I keep wanting to redock the panels to the accordion by dragging them to the empty space below the accordion. I wish there were a way to configure it to allow you to do that. It just seems more intuitive to be able to drop them on that nice empty space and have them redock. :)



This will come next.

jsakalos
25 May 2007, 9:12 AM
Yes, I'm afraid Opera also behaves a little strangely with the accordian during the animation... not sure if you are aware of this, or are even looking for this sort of feedback, but feel free to ask if you want more info.

Regards,

Dan

Sure I'm interested in any feedback as this makes the component better. However, Opera usually comes last in testing as I think it's not used that often as other major browsers.

I've tested it in Opera [email protected] and you're right there are some odd effects during animation. I'm afraid I can do little about it as I'm using underlying Ext/YUI animation library.

Or somebody else knows better?

jsakalos
25 May 2007, 9:13 AM
[quote=galdaka;33734]Posible bug: Z-Index of darggable panels are wrong when you D&D panels outside of accordion. When you drag one panel over another, you don

franklt69
25 May 2007, 11:20 AM
Hi, jsakalos congratulations, now accordion work ok with IE, I am watching the site http://www.aariadne.com/extjs/examples/accordion.html and to me this links are broken

http://perseus.localhost/extjs/examples/accordion.html
http://www.perseus.localhost/extjs/examples/accordion.js
http://perseus.localhost/extjs/examples/accordion.css
http://perseus.localhost/extjs/examples/Ext.InfoPanel.js
http://perseus.localhost/extjs/examples/Ext.Accordion.js

ok
kind regards
Frank

jsakalos
25 May 2007, 11:46 AM
Hi, jsakalos congratulations, now accordion work ok with IE, I am watching the site http://www.aariadne.com/extjs/examples/accordion.html and to me this links are broken

ok
kind regards
Frank

Sorry I'll put there correct links ;)

Done. Links should be correct now

kitepad
25 May 2007, 7:11 PM
Resizable feature of InfoPanel still not work on IE6.

Tested:
Resizeable feature is work on IE6 now, but got resize handler is very difficult,you must position cursor at title corner.

Animal
25 May 2007, 11:11 PM
It's started to go weird on me.

I occasionally, when dragging a panel downwards get a 100% with (of the whole briwser window) titlebar, but on this occasion, it's put a shadow over the top of the browser window:

http://www.extjs.com/forum/attachment.php?attachmentid=514&stc=1&d=1180164114

I've also started "losing" panels...

jsakalos
26 May 2007, 12:28 AM
It's started to go weird on me.

I occasionally, when dragging a panel downwards get a 100% with (of the whole briwser window) titlebar, but on this occasion, it's put a shadow over the top of the browser window:

http://www.extjs.com/forum/attachment.php?attachmentid=514&stc=1&d=1180164114

I've also started "losing" panels...


Yeah, me too. Perhaps introduced new bugs.

I'm refactoring dragging now to be rock solid. Will be done soon.

Hi,

jsakalos
26 May 2007, 12:32 AM
Resizable feature of InfoPanel still not work on IE6.

Tested:
Resizeable feature is work on IE6 now, but got resize handler is very difficult,you must position cursor at title corner.

Yeah, I know. I'm right now focused on Accordion dragging but what can I do as minimum is to display drag handles in IE so it maybe helps.

When I'm finished with Accordion I'll review the functionality of individual panels.

Hi,

PS: I've just tried to make resize handles visible in IE but they don't show.

jsakalos
26 May 2007, 3:32 AM
Hi folks,

I've just uploaded RC 4. The major improvement is in the dragging part. I have refactored, streamlined, cleaned up and fully commented the Ext.dd.DDProxy extension and I think it's rock-solid now. (Let me know if not. ;))

I've also introduced DropZone so now panels can be docked by dragging 'em onto the empty part of dock too.

Hi,

KimH
26 May 2007, 4:18 AM
Just two minor 'bugs'...

1) if you double-click on a titlebar some/all of the text is selected.

2) The links on the "How to integrate the ...." page should have a target of "_blank" or similar ;)

jsakalos
26 May 2007, 5:01 AM
Just two minor 'bugs'...

1) if you double-click on a titlebar some/all of the text is selected.


Thanks, this was IE-only issue. It's fixed now.



2) The links on the "How to integrate the ...." page should have a target of "_blank" or similar ;)I had originally _blank, then I thought that it could be annoying, but now you motivated me to put _blank there again.

Thanks for your time and interest.

Hi

wregen
26 May 2007, 5:22 AM
Hi jsakalos,
As you know I am a big fan of your work.
See attached screenshot. It happens when you move panel to much to right.

Can I/you do something about it?

Thank you.

jsakalos
26 May 2007, 5:36 AM
Hi jsakalos,
As you know I am a big fan of your work.
See attached screenshot. It happens when you move panel to much to right.

Can I/you do something about it?

Thank you.

This is not first time I see this. In my app I use Ext standard dragging and it also happens. Thus, it seems to me that this is a bug in Ext but I'm not sure. It would be good to know an Ext team member if this is known bug before I'd implement some workaround.

Thanks for testing.

Hi,

RobbyRacoon
26 May 2007, 6:29 AM
Wonderful job, very cool stuff indeed.

Unfortunately, I do not appear to be able to donate money for your troubles :(

Paypal gives me the following error when I try :

Currently PayPal accounts in Slovakia are only able to send payments. This recipient is not eligible to receive funds.

Thank you for your hard work, it's great!

jsakalos
26 May 2007, 6:42 AM
Wonderful job, very cool stuff indeed.

Unfortunately, I do not appear to be able to donate money for your troubles :(

Paypal gives me the following error when I try :


Thank you for your hard work, it's great!

Thank you for your interest and willingness to donate. This problem is also if you change the country in the combo? Slovakia is there by default... Anyway, I'll try to do something with it.

jsakalos
26 May 2007, 7:35 AM
Thank you for your interest and willingness to donate. This problem is also if you change the country in the combo? Slovakia is there by default... Anyway, I'll try to do something with it.

Hmmm, I found out that PayPal accounts located in Slovakia cannot receive money. I would like to apologize to all of you that were willing to donate but couldn't because of this obstacle. I have changed to moneybookers to make donations possible.

Thank you.

Hi,

jsakalos
26 May 2007, 11:53 AM
Hi folks,

I've uploaded Fixed Height Accordion demo. It's in the tab "Fixed height" on the Accordion (http://www.aariadne.com/extjs/examples/accordion.html) demo page.

Hi,

jsakalos
26 May 2007, 4:17 PM
Hi jsakalos,
As you know I am a big fan of your work.
See attached screenshot. It happens when you move panel to much to right.

Can I/you do something about it?

Thank you.

Hi, I've fixed this. Let me explain it in a little bit more details.

As you can see now on demo page of Accordion (http://www.aariadne.com/extjs/examples/accordion.html), there is new tab "Fixed height" with new demo. When I was creating that I mentioned illogical behavior as when I dragged a panel out of this fixed accordion and then I switched to another tab the panel window was still visible.

This was caused by the default behavior of the accordion where undocked panels were appended to document.body, therefore globally visible. I found out that this is unacceptable for more complex applications.

Therefore I've introduced the concept of "desktop" that is container you want to append the undocked panel to. There is new configuration variable of the Accordion "desktop" that takes string id/html element/element argument and defaults to document.body.

On that new example the desktop is set to tab container so now when you switch tabs the undocked panels hide; that the normal logical behavior.

The Accordion in the west region has desktop set to document.body, e.i. panels dragged out of that are "global" and are visible while switching tabs.

So far so good.

But another problem arised. You could drag a panel from the fixed Accordion out of it's desktop (tab) boundaries and when you dropped it there it disappeared forever (well, until the reload, but with state management on really forever, or until cookie is deleted).

Now I had to resolve this somehow and after good amount of study/try/fail attempts I found the solution. There is new Accordion method constrainToDesktop(), and its counterpart clearConstraints(). This method has to be called after all panels have been added and after layout.endUpdate(), if any.

The pleasant "side effect" of this functionality is that page doesn't flicker when you move panel too right (now you cannot).

Thus, the bug you've reported has been resolved.

Hi,

franklt69
26 May 2007, 6:00 PM
jsakalos accordion is better for day, now working ok with IE, D&D work ok, now jsakalos I would like to know how I can iterate through the panels collection, I would like to add to accordion this funtionaly:

remember this post?

jsakalos, maybe you don't understand me, and I want something difficult to do, but I think is very useful, imagine this:

you have it InfoPanel:


Panel1 - Computer components (inside it panel I have this links)
<ul id="forumList" class="x-date-inner ">
<a id=" mouse" ref=""><span> mouse<br> </span>
<a id=" memory ram" ref=""><span> memory ram<br> </span>
<a id=" hard driver" ref=""><span> hard driver<br> </span>
<a id=" motherboard" ref=""><span>motherboard<br> </span>
</ul>
Panel2 - Network components (inside it panel I have this links)
<ul id="forumList" class="x-date-inner ">
<a id=" card" ref=""><span> card<br> </span>
<a id=" wire utp5" ref=""><span>wire utp5<br> </span>
<a id=" hub" ref=""><span> hub<br> </span>
<a id=" connector" ref=""><span> connector<br> </span>
</ul>


Panel3 - other components (inside it panel I have this links)
<ul id="forumList" class="x-date-inner ">
<a id=" printer" ref=""><span> printer<br> </span>
<a id=" scanner" ref=""><span>scanner<br> </span>
<a id=" machine fax" ref=""><span> machine fax<br> </span>
</ul>

....

Now imagine in the west panel I add a toolbar to do search over the items (links) inside the each InfoPanel, inside the toolbar I have (search: TextField, a filter button, and clear filter button)

when I type "m": a search is executed and only appear

Panel1
- mouse
- memory ram
- motherboard

Panel3
- machine fax

so the idea is to do search over the content in each InfoPanel, when the user have many infoPanel in the west panel is hard to find the link that I want to click, so using it is very easy, again maybe it is complicate but I think is a good idea.


you answer me:

Anyway I think it's not the difficult task for a user to create a global toolbar with controls he needs and then to iterate through the panels collection to find what he needs.

could you give some Idea how I can do it, to begin research about it?

kind regards
Frank

jsakalos
26 May 2007, 6:08 PM
Fortunately, it's very easy:




acc.items.each(function(panel) {
// put your search routine here
// you have panel.body as container
// of the content
}), scope);



Hope this helps; if not keep asking :)

Hi

jsakalos
26 May 2007, 6:11 PM
Hmmm,

I'm thinking now, that there is no hide and show method on the whole panel and you'll maybe need it. If yes, let me know.

Hi

franklt69
26 May 2007, 6:21 PM
Yes, only I need to show the panels where the item that I want to find are found, in the example only appear

Panel1 and Panel3 and inside this panels I have to show the items that match with the search criteria, the other link I have to hide

kind regards
Frank

jsakalos
26 May 2007, 6:26 PM
You can maybe start with independent mode and use expand() collapse() methods to show the content. In this the titles would stay displayed and content would be shown only for panels with match.

Try first this and if this look ugly or is unusable I'll add show/hide methods.

Hi,

PS: Now I go to bed, it's 4:30 am here. ;)

franklt69
26 May 2007, 6:33 PM
Ok thanks for you patience.

kind regards
Frank

okworld
27 May 2007, 12:13 AM
Hi all,

ok, here's my current problem, I'm using the accordion extension in the center BL.
the content of the panels (accordion) is loaded dynamically, one of these contain a grid, the grid render but it doesn't fit into the container and it's displayed under the other panels headers. (look at the screenshot)
any solution ?


NB: I'm using the RC3 (I think), I tried to upgrade to the latest version but I had some trouble with the layout.

Thanks

jsakalos
27 May 2007, 2:31 AM
Hi all,

ok, here's my current problem, I'm using the accordion extension in the center BL.
the content of the panels (accordion) is loaded dynamically, one of these contain a grid, the grid render but it doesn't fit into the container and it's displayed under the other panels headers. (look at the screenshot)
any solution ?


NB: I'm using the RC3 (I think), I tried to upgrade to the latest version but I had some trouble with the layout.

Thanks

Hi okworld,

I seems it could be a problem with styling. The InfoPanel is extension of ContentPanel with added title and body, with the following general markup:



<div> <!-- this is element passed to ContentPanel constructor -->
<div>
<!-- title text/buttons ... -->
</div>
<div>
<!-- this is body and here comes your content ... -->
</div>
</div>
Normally the title is always shown and body is show/hidded while expanding/collapsing. So if the grid is showing out of it's body it seems to be a grid's container markup or styling problem.

Use Firebug and explore the rendered panel and grid to check the markup and style of the problematic fragment.

I hope this helped.

Hi

okworld
27 May 2007, 3:25 AM
Hi Saki,
The problem occur just when I use the grid, if I use a simple html content or a form (both hard coded form or using Ext.form) it works correctly. I solved the issue temporaray by setting a height to the container div !!

BTW in FF the grid is rendered but it's not visible !!

inspiredbylife
27 May 2007, 3:34 AM
Very cool, was looking out for such a panel and was surprised not to see in Ext main trunk itself. Thanks for all the hard work. :)

jsakalos
27 May 2007, 5:26 AM
Hi Saki,
The problem occur just when I use the grid, if I use a simple html content or a form (both hard coded form or using Ext.form) it works correctly. I solved the issue temporaray by setting a height to the container div !!

BTW in FF the grid is rendered but it's not visible !!

Would it be possible to setup the showcase that would show the problem and provide a link to it? I'm curious if this is a problem of Accordion/InfoPanel, I would fix it then, or if it is an outside problem, I would write a recommendation for users then.

Hi,

franklt69
27 May 2007, 7:10 AM
Fortunately, it's very easy:




acc.items.each(function(panel) {
// put your search routine here
// you have panel.body as container
// of the content
}), scope);



Hope this helps; if not keep asking :)

Hi

jsakalos to test I want to iterate with each items (link) inside the panel I did it but I don't found way to get the items inside the panels

I add a button a function findItem

, { tooltip: 'iteration'
, id: 'btn-find'
, cls: 'x-btn-icon'
, enableToggle: true
, icon: '../images/find.png'
, scope: acc
, handler: function(btn, e) {
findItem(panel3);
}

}

var findItem = function(panel){
var p = panel.body.dom;
text = p.innerText ; //here I get the text of element inside the panel3
debugger;
//how to iterate foreach element inside panel3?
};

kind regards
Frank

jsakalos
27 May 2007, 7:14 AM
Frank,

gimme an hour or two and I'll create this and post to the example page, OK?

Hi,

franklt69
27 May 2007, 7:55 AM
thanks take your time, jsakalos maybe its a bad idea but I was thinking to have a store in memory with each elements inside the panels, then do the search in the store, and hide all elements and Infopanels that not match with the search criteria. Maybe your solution is better.

kind regards
Frank

jsakalos
27 May 2007, 8:47 AM
Hi Frank,

I've just uploaded it. Look if it is what you want.

Hi,
Jozef

franklt69
27 May 2007, 10:31 AM
jsakalos, my dream is near, it is very nice, imagine 30 Infopanel, using find is a shortcut to get a item, I think any user end will love it features.

some comments:

I think is better to use
panel.body.dom.innerText.match(re) because using panel.body.dom.innerHTML.match(re) if inside the html your have some comments it will appear, or search for css class, or id and its wrong, yet I think innerText is not the best, for instance, is there any way to know if inside the panels are html tag like <a><span>Computer<br></span></a> ?

<a id="pc" href="xxx"><span class="body computer"> Computer<br></span></a>

and only search inside the span?

other remarks:

for end user could be more clear only show the infopanels that hit with the search (and items found), I means could be better to hide the Infopanels and items where found = false, when the user remove the filter then appear again all infopanels, what do you think?

kind regards
Frank

jsakalos
27 May 2007, 11:24 AM
I think is better to use
panel.body.dom.innerText.match(re) because using panel.body.dom.innerHTML.match(re) if inside the html your have some comments it will appear, or search for css class, or id and its wrong, yet I think innerText is not the best, for instance, is there any way to know if inside the panels are html tag like <a><span>Computer<br></span></a> ?

<a id="pc" href="xxx"><span class="body computer"> Computer<br></span></a>

and only search inside the span?

I'm not sure that innerText is cross-browser. There is an elegant method I'd use. Imagine this:


<div id="body">
<a href="#" class="..... searchable">link text</a>
<a href="#" >link2 text</a>
...
<a href="#" class="..... searchable">link3 text</a>
this is plain text but <span class="searchable">this part will be searched</span>
</div>
Here is the "searchable" class that has no visual purposes; it doesn't even need to be defined in your style sheet. It has selection purposes. The code would be:



var searchables = Ext.fly('body').select('.searchable');
With this code you get the searchables variable that is CompositeElement that contains only elements with searchable class. This way you can selectively mark the elements or text fragments that is to be searched within.



for end user could be more clear only show the infopanels that hit with the search (and items found), I means could be better to hide the Infopanels and items where found = false, when the user remove the filter then appear again all infopanels, what do you think?
Yes, this seems to be good idea. I'll add show and hide methods. It will take a day or so as I have to do also other things; in meantime you can play with your search function. Mine is only the simplest thing that came to my mind for demo purposes.

Hi,

jack.slocum
27 May 2007, 12:02 PM
var searchables = Ext.fly('body').select('.searchable');

var searchables = Ext.fly('body').select('span.searchable');

You should always try to use a tag when you can as it will limit the scan and make it faster. ;)

jsakalos
27 May 2007, 12:06 PM
var searchables = Ext.fly('body').select('.searchable');

var searchables = Ext.fly('body').select('span.searchable');

You should always try to use a tag when you can as it will limit the scan and make it faster. ;)



Good information Jack; about that performance. It's especially important in this case as Frank is maybe going to search many items.

Thanks.

efege
27 May 2007, 12:45 PM
Saki, since the fixed height example has the warning "Might not be working or may look bad", I'm not sure if you expect bug reports for it. Anyway, I found that attempting to drag the panels makes them disappear.

jsakalos
27 May 2007, 12:50 PM
Saki, since the fixed height example has the warning "Might not be working or may look bad", I'm not sure if you expect bug reports for it. Anyway, I found that attempting to drag the panels makes them disappear.

Hi efege,

sure I'm glad if you report bugs :)

A panel disappearing never happened to me...:-? Do you really get 4 panels instead of original 5? Can you explain how or where you drag?

Hi,

efege
27 May 2007, 1:14 PM
Do you really get 4 panels instead of original 5? Can you explain how or where you drag?

I've tested with Firefox, IE, Mozilla... the same in all of them. Originally the 5 panels are there; when I attempt to drag any of them (mousedown on panel's title, mousemove, mouseup), they just disappear.

Is it just me? :-?

jsakalos
27 May 2007, 1:20 PM
Have you hard refreshed the browsers? Ctrl+Refresh click? This would be only logical explanation as for me it works in FF/IE/Seamonkey/Opera w/o disappearing.

Anybody else observed this?

Hi,

jsakalos
27 May 2007, 2:49 PM
Resizable feature of InfoPanel still not work on IE6.

Tested:
Resizeable feature is work on IE6 now, but got resize handler is very difficult,you must position cursor at title corner.

As I have promised to go back to this problem I've just uploaded fixes. I don't know why but it's still difficult (or almost impossible) to get east and west resize handles in IE6 but I've added se, sw and south handles (all except north) so resizing should be possible now.

Have a look.

Hi,

trbs
27 May 2007, 3:04 PM
Hey guys,

Great example/code Jozef, or did i say that already :) anyways it is :!:

I talked with Efege on IRC and i confirmed/reproduced his problem.
when i drag the panels in fixed-height of the container they disappear.
now when i refresh (either with ctrl-r or ctrl-shift-r) there still gone.

Picture after dragging all the panels out (all disappeared) then looking google.com and pressing the Back Button:
http://ido.nl.eu.org/static/accordion-weirdness.png

The state is remembered across the reloads in the cookie of the StateManager.

Looking at the example it seems that the panels are not mend to be draggable...
So the first/quick solution would seem to try and disable dragging of the InfoPanel.



acc2.add(new Ext.InfoPanel('panel2-1', {
icon: '/img/silk/icons/cart.png',
draggable: false
}));


Tested with: Firefox / Iceweasel 2.0.0.3 on Debian/GNU Linux

jsakalos
27 May 2007, 3:17 PM
Hey guys,

Great example/code Jozef, or did i say that already :) anyways it is :!:

I talked with Efege on IRC and i confirmed/reproduced his problem.
when i drag the panels in fixed-height of the container they disappear.
now when i refresh (either with ctrl-r or ctrl-shift-r) there still gone.

Picture after dragging all the panels out (all disappeared) then looking google.com and pressing the Back Button:
http://ido.nl.eu.org/static/accordion-weirdness.png

The state is remembered across the reloads in the cookie of the StateManager.

Looking at the example it seems that the panels are not mend to be draggable...
So the first/quick solution would seem to try and disable dragging of the InfoPanel.



acc2.add(new Ext.InfoPanel('panel2-1', {
icon: '/img/silk/icons/cart.png',
draggable: false
}));
Tested with: Firefox / Iceweasel 2.0.0.3 on Debian/GNU Linux


Hi trbs & efege,

after many attempts I was also able to reproduce this but. The problem was that Ext getBox() call return negative x & y. With state management on this got saved so panels disappeared forever.

Now I've put sanity check there and if x or y < 0 the panel doesn't undock.

Hope it solves the issue.

Hi,

keithpitt
27 May 2007, 3:24 PM
Nice work again mate. I really like the "Drag me, Resize me" box at the top and how it jumps out of its header. Nice touch.

Keith

trbs
27 May 2007, 3:25 PM
cool !
your quick man :)

if u want, maybe u can join us on the #extjs IRC channel for a random chat :)

franklt69
27 May 2007, 4:29 PM
jsakalos I am playing to learn a little ext I am doing it but I don't understand how to hide a element, see below:



function searchPanels() {
debugger;
this.collapseAll();
var val = find.el.value;
if(val.length < 3 && val.length > 0) {
return;
}
else if(0 == val.length) {
this.collapseAll();
}
else {
var re = new RegExp('.*' + val + '.*', 'i');
var found = false;
this.items.each(function(panel) {
var searchables = Ext.fly(panel.id).select('span.searchable');

if(found && !this.independent) {
return;
}

for (var i=0; i< searchables.elements.length; i++){
if(searchables.elements[i].innerText.match(re)) {
//here is show the element found
}
else
{
//here I want to hide the element but I don't know because
//don't have the method hide
var ael = searchables.elements[i];

}
}

}, this);
}

}

kind regards
Frank