PDA

View Full Version : Problem with accordion widget?



rgalvao
10 Aug 2009, 1:22 PM
Hi Everybody,

First of all, I'm really excited to work with this amazing API.
I think it's the way to go. Google should buy you ;)

My application is using a left navigation panel with an accordion
widget inside.
The problem is, when I start it the items of the accordion's list
aren't selectable, nor are the accordion's contentpanels selectable
by the title (only by the plus/minus sign). :-/ But when I collapse and
expand again the whole navigation panel, the components works
as expected.:-?
I thought it would have something to do with a proper initialization
of the "accordion panel" or the list model. But now I'm supposing
it is a bug.

Anybody?

The code is attached below. The libs and some images files were removed
because of the .zip file limit.

TIA,
R.Galvao

sven
10 Aug 2009, 1:25 PM
Moved this to the help forum as this is the proper place for this.

rgalvao
11 Aug 2009, 8:38 AM
up...

rgalvao
11 Aug 2009, 9:06 AM
More information... As I described, here are the behaviour depicted in the images below...

Arno.Nyhm
13 Aug 2009, 1:34 AM
i try your testcase.

on my computer it is the same as you described.


i digg into html which is generated and i see only this differences that some elements after the collapsing and expanding have the attribute unselectable="on" and the class x-unselectable.



--- C:/diff-l Thu Aug 13 11:17:15 2009
+++ C:/diff-r Thu Aug 13 11:17:19 2009
@@ -5,7 +5,7 @@
<tbody>
<tr>
<td align="left" valign="top">
-<div id="x-auto-11" class="x-nodrag x-tool-left x-tool">
+<div id="x-auto-34" class="x-nodrag x-tool-left x-tool">
</div>
</td>
</tr>
@@ -33,7 +33,7 @@
<div class="x-panel-bwrap">
<div style="width: 118px; height: 313px;" class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
<div style="border-width: 0px; width: 118px;" class="x-panel" id="x-auto-16">
-<div style="cursor: pointer;" id="x-auto-17" class="x-small-editor x-panel-header x-accordion-hd">
+<div unselectable="on" style="cursor: pointer;" id="x-auto-17" class="x-small-editor x-panel-header x-accordion-hd x-unselectable">
<div class="x-panel-toolbar" id="x-auto-18" style="overflow: visible; float: right;">
<table cellpadding="0" cellspacing="0">
<tbody>
@@ -51,7 +51,7 @@
</div>
<div class="x-panel-bwrap">
<div style="width: 116px; height: 243px;" class="x-panel-body">
-<div id="x-auto-28" class="x-view" tabindex="0" style="border-width: 0px; padding: 0px; overflow: auto; width: 116px; height: 243px;">
+<div unselectable="on" id="x-auto-28" class="x-view x-unselectable" tabindex="0" style="border-width: 0px; padding: 0px; overflow: auto; width: 116px; height: 243px;">
<div class="x-view-item">Administração
</div>
<div class="x-view-item">Decide
@@ -67,7 +67,7 @@
</div>
</div>
<div style="border-width: 0px; width: 118px;" class="x-panel x-panel-collapsed" id="x-auto-20">
-<div style="cursor: pointer;" id="x-auto-21" class="x-small-editor x-panel-header x-accordion-hd">
+<div unselectable="on" style="cursor: pointer;" id="x-auto-21" class="x-small-editor x-panel-header x-accordion-hd x-unselectable">
<div class="x-panel-toolbar" id="x-auto-22" style="overflow: visible; float: right;">
<table cellpadding="0" cellspacing="0">
<tbody>
@@ -91,7 +91,7 @@
</div>
</div>
<div style="border-width: 0px; width: 118px;" class="x-panel x-panel-collapsed" id="x-auto-24">
-<div style="cursor: pointer;" id="x-auto-25" class="x-small-editor x-panel-header x-accordion-hd">
+<div unselectable="on" style="cursor: pointer;" id="x-auto-25" class="x-small-editor x-panel-header x-accordion-hd x-unselectable">
<div class="x-panel-toolbar" id="x-auto-26" style="overflow: visible; float: right;">
<table cellpadding="0" cellspacing="0">
<tbody>
this attributes are set in


ListView.java:681 ListView#onRender(Element target, int index)
ListView.java:699 disableTextSelection(true);
-->
Component.java:380


public void disableTextSelection(boolean disable) {
disableTextSelection = disable ? 1 : 0;
if (isAttached()) {
el.disableTextSelection(disable);
}
}
so the idea is that goes something wrong if this list is attached on rendering.


if i change your code:


private void createListContent()
{
ListView<Entry> list = new ListView<Entry>();
list.setDisplayProperty("name");
list.setBorders(false);
list.getSelectionModel().addSelectionChangedListener(new SelectionChangedListener<Entry>()
{
@Override
public void selectionChanged(SelectionChangedEvent<Entry> se)
{
Entry e = se.getSelection().get(0);
if (e != null && e instanceof Entry)
{
Americo.showPage(e);
}
}
});

ListStore<Entry> store = new ListStore<Entry>();
store.setStoreSorter(new StoreSorter(new Comparator<Entry>()
{
public int compare(Entry e1, Entry e2)
{
return e1.getName().compareTo(e2.getName());
}
}));
store.add(model.getEntries());

list.setStore(store);

//filter.bind((Store) store);

applicationsPanel.add(list);

}to this


private void createListContent()
{
// make list final
final ListView<Entry> list = new ListView<Entry>();
list.setDisplayProperty("name");
list.setBorders(false);
list.getSelectionModel().addSelectionChangedListener(new SelectionChangedListener<Entry>()
{
@Override
public void selectionChanged(SelectionChangedEvent<Entry> se)
{
Entry e = se.getSelection().get(0);
if (e != null && e instanceof Entry)
{
Americo.showPage(e);
}
}
});

ListStore<Entry> store = new ListStore<Entry>();
store.setStoreSorter(new StoreSorter(new Comparator<Entry>()
{
public int compare(Entry e1, Entry e2)
{
return e1.getName().compareTo(e2.getName());
}
}));
store.add(model.getEntries());

list.setStore(store);

//filter.bind((Store) store);

// removed !!!!!
// applicationsPanel.add(list);

// and placed in a later rendering.
DeferredCommand.addCommand(new Command() {

@Override
public void execute() {
applicationsPanel.add(list);
// and add an additional layot
applicationsPanel.layout();

}
});

}then its working. but i dont know where is the bug.


so the list is only working if the list is set after rendering the accordion widget.

sven
13 Aug 2009, 2:09 AM
I tried that code against the latest SVN version and beside a couple of expcetions, it is working.

rgalvao
13 Aug 2009, 8:28 AM
Thank you Arno.Nyhm (http://extjs.com/forum/member.php?u=49348) for your thorough analysis.
Thanks Sven for the test.

rgalvao
18 Aug 2009, 12:41 PM
The strange behaviour is now fixed, but with side effects.

About the SVN, I don´t have access to it. (!)

You have a well designed API, but here are some criticisms:

1. what´s the point in opensource it if we can´t even see the
newest code, let say contribute to it? "Hey, you can fix it yourself!".
Right, nobody wants to have their codes unsychronized with the
main code base. So it creates a pressure to buy paid support.
There is a clear conflit on your business model.

2. there is a huge lack of documentation to this API be
considered mature enough. You should name it GXT 0.9.
Yeah, there is a lot of examples, but I don´t want to debug
an application to understand how the API´s MVC work.

It seems to me it will be hard to be an earlier adopter of your API.

By the way, I´m still considering buying the gold "support", but I
don´t want to have a kind of vendor lock-in for having the API
working at all!!!

R.

rgalvao
19 Aug 2009, 9:51 AM
How about a GXT 2.0.2 release?

A good product/service is measured by the
surpassed quality expectancy.

You have a great potencial to be the next RIA
de facto standard. So please read that:

http://www.atlassian.com/about/

R.