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?

[url=http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features]
http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features

-Olli
[/url]

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

Thank you very mutch.

No problem, let me know how it works out!

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

Here is the DropDown Menu:
28907.png

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

28919.png

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. :slight_smile: Thank you very much.

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

-Olli

Of course.

28926.png

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.

-Olli