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 will try this solution. :)

Thank you very mutch.

No problem, let me know how it works out!

-Olli

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

I seem to recall that adjusting the margins worked better than setting the position in a situation like that.

-Olli

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.

-Olli

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

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