Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Sencha GXT UI Components in Vaadin 7
I'm looking to use Sencha (GXT 3.1.4) components with Vaadin (version 7.7.3).
Anyone experienced with this integration than can provide me some help?
I would like create this table:
http://examples.sencha.com/gxt/4.0.2/#ExamplePlace:basicgrid
Hi,
if you look at the Grid examples in the Sampler, do you see some features that are missing?
http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features
-Olli
Hi Oli,
Yes, filters are missing in the header right
Look at the Filter Grid:
http://examples.sencha.com/gxt/4.0.2/#ExamplePlace:filtergrid
I think you could get that kind of behavior from a PopupView. The example in Sampler isn't very complicated, but you can add any components there: http://demo.vaadin.com/sampler/#ui/structure/popup-view
-Olli
I created a simple DropDown Menu with PopupView help.
Now, i would you like to add this Menu header inside. But i didn't know to solve. :(
Here is the DropDown Menu:
Let's say you have a Grid "grid" with the column "col1".
Without testing, something like this:
Component popupViewContent = ... // your popup view content here;
final PopupView pv = new PopupView(null, popupViewContent);
Grid.HeaderRow hr = grid.getDefaultHeaderRow();
Grid.HeaderCell cell = hr.getCell("col1");
HorizontalLayout headerCellLayout = new HorizontalLayout();
Button button = new Button("v");
button.addClickListener(event -> pv.setPopupVisible(true));
headerCellLayout.addComponents(button, pv);
cell.setComponent(headerCellLayout);
Of course you can do the same for each column like explained in this post.
-Olli
It works fine. but there are still problems with the positioning:
Css code here:
.mytheme .v-popupview-popup {
top: 24% !important;
left: 25% !important;
}
.mytheme .v-popupview-popup-filters {
top: 38% !important;
left: 30% !important;
}
I seem to recall that adjusting the margins worked better than setting the position in a situation like that.
-Olli
On the div ".v-popupview-popup" try setting the margin-top and margin-left values to something; it's easy to test with for example Chrome's Inspector.
-Olli
You're welcome! If you can, it'd be nice to see a screenshot :)
-Olli
I've got some more questions in my mind. For example how could I insert buttons (popupview) in a specific columns header i've selected?
That depends on how exactly it's supposed to work. If you want to add some components to a header that has been clicked, you could have a ClickListener on the Layout in the header. If you want to add components to a column that's been clicked on the Grid (that is, somewhere on the main data rows), you can use ItemClickListener. The event handled in ItemClickListener has a getPropertyId() method, which you can then use to get the HeaderCell from the HeaderRow.
-Olli