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:


if you look at the Grid examples in the Sampler, do you see some features that are missing?



Hi Oli,

Yes, filters are missing in the header right

Look at the Filter Grid:

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:


I will try this solution. :slight_smile:

Thank you very mutch.

No problem, let me know how it works out!


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. :frowning:

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

Of course you can do the same for each column like explained
in this post


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.


can you give me a examples?

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.


It is now working well. :slight_smile: Thank you very much.

You’re welcome! If you can, it’d be nice to see a screenshot :slight_smile:


Of course.


Looking good :slight_smile:

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.