ViewPort - Dynamic resize components after a onResize Event.

[zodixman]

- JDK 6u10
- GXT 1.2.3
- GWT 1.5.3
- Eclipse 3.4.1

First, sorry if my English is not perfect :(.

I'm new to GXT. And i have trouble with my application.

I have a view that contains several components, in parallel, using a simple ADD.

The view is a ViewPort with a Fitlayout.

I have several FormPanel distributed in all components son (LayoutContainer) of ViewPort.

Consider a FormPanel which contains a set of TextField, ComboBox and others ...

So, my questions:

- Knowing that the viewport does not accept the ScrollBar. How can I use it even when I have a lower resolution. Should I (for example), put a set of component (LayoutContainer) in a layout that's active ScrollBar? If all this is simply impossible. Is there an alternative to the ViewPort ?

- How do I get a FormPanel in another FormPanel. I can not because it generates an exception ?

Other problems:

Codes in my ViewPort: (for example)



// ApplicationView.java
public class ApplicationView extends View {
public ApplicationView(Controller controller) {
super(controller) ;
}

public void initialize() {
Viewport viewport = new Viewport();
viewport.setLayout(new FitLayout());
viewport.setStyleAttribute("margin", "4px 0 0 0");

ContentPanel contentPanel = new ContentPanel();
contentPanel.setLayout(new FitLayout());
contentPanel.setFrame(false);
contentPanel.setBorders(false);
contentPanel.setHeaderVisible(false);

establishmentComponent = new EstablishmentComponent();
contentPanel.add(establishmentComponent, new FitData(4));

viewport.add(contentPanel, new FitData(Format.ApplicationView.VIEWPORT_MARGIN));
RootPanel.get().add(viewport);
}

}

// EstablishmentComponent.java
public class EstablishmentComponent extends LayoutContainer{
private EstablishmentPanel establishmentPanel ;
private CompanyPanel companyPanel ;

public EstablishmentComponent() {
setLayout(new FitLayout());

TabPanel panel = new TabPanel();

TabItem establishmentTab = new TabItem(locale.ESTABLISHMENT());
establishmentPanel = new EstablishmentPanel();
establishmentTab.add(establishmentPanel);
establishmentTab.getHeader().setStyleAttribute("width", "130px");
panel.add(establishmentTab);

TabItem companyTab = new TabItem(locale.COMPANY());
companyPanel = new CompanyPanel();
companyTab.add(companyPanel);
companyTab.getHeader().setStyleAttribute("width", "130px");
panel.add(companyTab);

add(panel);
}
}

// EstablishmentPanel .java
public class EstablishmentPanel extends LayoutContainer {
private EstablishmentSearchCriteria establishmentSearchCriteria ;
private EstablishmentSearchResult establishmentSearchResult ;

public EstablishmentPanel() {
setLayout(new RowLayout(Orientation.VERTICAL));

establishmentSearchCriteria = new EstablishmentSearchCriteria();
add(establishmentSearchCriteria);

establishmentSearchResult = new EstablishmentSearchResult();
add(establishmentSearchResult);
}
}

// EstablishmentSearchCriteria
public class EstablishmentSearchCriteria extends LayoutContainer {
private FormPanel formPanel ;
private Button searchButton ;
private Button cleanButton;
private TextField<String> textFieldCommercialName ;
private TextField<String> textFieldName ;
private ComboBox<BeanModel> comboBoxCompanyName ;
private ComboBox<BeanModel> comboBoxCompanySiren ;
private ColumnData columnData;

@SuppressWarnings("unchecked")
protected void onResize(int width, int height) {
super.onResize(width, height);

String fieldsSize = "96%";
double layoutSize = .20;

columnData.setWidth(layoutSize);
formPanel.setAutoWidth(true);

List<Field> fields = formPanel.getFields();
for (int i = 0; i < fields.size(); i++) {
fields.get(i).setWidth(fieldsSize);
}

layout();
}

public EstablishmentSearchCriteria() {
setLayout(new FitLayout());
setHeight(110);

columnData = new ColumnData(.20);

cleanButton = new Button(locale.CLEAN_BUTTON(), new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
formPanel.reset();
}
});
searchButton = new Button(locale.SEARCH_BUTTON(), new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent event) {
if (formPanel.isValid()) {
onSearchSubmit();
}
}
});

formPanel = createForm();

add(formPanel);
}

private FormPanel createForm() {
FormPanel formPanel = new FormPanel() ;
formPanel.setHeading(locale.ESTABLISHMENT_SEARCH_CRITERIA());
formPanel.setBorders(false);
formPanel.setBodyBorder(false);

LayoutContainer col1 = new LayoutContainer(new FormLayout(LabelAlign.TOP)) ;
LayoutContainer col2 = new LayoutContainer(new FormLayout(LabelAlign.TOP)) ;
LayoutContainer col3 = new LayoutContainer(new FormLayout(LabelAlign.TOP)) ;
LayoutContainer col4 = new LayoutContainer(new FormLayout(LabelAlign.TOP)) ;
LayoutContainer col5 = new LayoutContainer(new FormLayout(LabelAlign.TOP)) ;

textFieldCommercialName = new TextField<String>() ;
textFieldCommercialName.setName("commercialName") ;
textFieldCommercialName.setMaxLength(80) ;
col1.add(textFieldCommercialName) ;

textFieldName = new TextField<String>() ;
textFieldName.setName("name") ;
textFieldName.setMaxLength(80) ;
col2.add(textFieldName) ;

comboBoxCompanyName = new ComboBox<BeanModel>() ;
comboBoxCompanyName.setFieldLabel(locale.COMPANY()) ;
comboBoxCompanyName.setDisplayField("name") ;
comboBoxCompanyName.setSimpleTemplate("{name} - {siren}") ;
comboBoxCompanyName.setStore(getAsyncCompanyStore()) ;
comboBoxCompanyName.setTypeAhead(true) ;
comboBoxCompanyName.setMinChars(2) ;
comboBoxCompanyName.setPageSize(10) ;
comboBoxCompanyName.setForceSelection(true) ;
col4.add(comboBoxCompanyName) ;

comboBoxCompanySiren = new ComboBox<BeanModel>() ;
comboBoxCompanySiren.setFieldLabel(locale.COMPANY_SIREN()) ;
comboBoxCompanySiren.setDisplayField("siren") ;
comboBoxCompanySiren.setSimpleTemplate("{siren} - {name}") ;
comboBoxCompanySiren.setStore(getAsyncCompanyStore()) ;
comboBoxCompanySiren.setTypeAhead(true) ;
comboBoxCompanySiren.setMinChars(2) ;
comboBoxCompanySiren.setPageSize(10) ;
comboBoxCompanySiren.setForceSelection(true) ;
col5.add(comboBoxCompanySiren) ;

formPanel.setLayout(new ColumnLayout()) ;
formPanel.add(col1, columnData);
formPanel.add(col2, columnData);
formPanel.add(col3, columnData);
formPanel.add(col4, columnData);
formPanel.add(col5, columnData);

formPanel.setButtonAlign(HorizontalAlignment.LEFT) ;
formPanel.addButton(searchButton) ;
formPanel.addButton(cleanButton);
return formPanel ;
}
}
As you can see, I resize manualy the Fields at the time when resizing the window (onResize Event). It's ok, but this does not fully satisfy me. Because the result is unlikely. How can I solve this problem? I imagine that there is another easier solution to do that?

Thanks for answer me !?

[zodixman]

There is someone there to solve my problem ? please

[micgala]

Have you seen the FormData?

Why don't you add your fields to the formPanel using it?
It will automatically resize your fields....

You can see one example here:
http://www.extjs.com/explorer/#anchorlayout

[zodixman]

It is already the case!



...
textFieldCommercialName.setMaxLength(80) ;
textFieldCommercialName.setToolTip(locale.TOOLTIP_SEARCH_CRITERIA_FORMAT()) ;
col1.add(textFieldCommercialName) ;
...
textFieldName.setMaxLength(80) ;
textFieldName.setToolTip(locale.TOOLTIP_SEARCH_CRITERIA_FORMAT()) ;
col2.add(textFieldName) ;
...
formPanel.add(col1, columnData);
formPanel.add(col2, columnData);
...


But the scaling is not automatic. fields all simply disappear !!!

[gslender]

So, my questions:

- Knowing that the viewport does not accept the ScrollBar. How can I use it even when I have a lower resolution. Should I (for example), put a set of component (LayoutContainer) in a layout that's active ScrollBar? If all this is simply impossible. Is there an alternative to the ViewPort ?

- How do I get a FormPanel in another FormPanel. I can not because it generates an exception ?



If you add any container that is a subclass of ScrollContainer (like ContentPanel) it will add scroll bars if its content is larger than the container and scroll mode is enabled.

You should reconsider your design if you think you need to add a FormPanel to a FormPanel - you would be doing something odd if your use case needed to do this. More likely you should be adding a LayoutContainer to a LayoutContainer, perhaps with FormLayout set on the inner most container.

[zodixman]

Thank you gslender.

I will automatically use ScrollContainer to have the scroll, without being able to configure them.

The objective to have FormPanel in another ; it was to use the method getFields on several levels: First FormPanel ; To have a partial list of the fields which I treat in another Class. Then the other list of Fields who gathers the totality fields:



// ComponentExemple.java
public class ComponentExemple extends LayoutContainer{
private final FormPanel userPanel ;
private final FormPanel compangyPanel ;
public ComponentExemple() {
//-- form panel 1
userPanel = new FormPanel();
userPanel.setLayout(new FitLayout());
...
TextField<String> name = new TextField<String>();
name.setFieldLabel("First Name");
...
TextField<String> last = new TextField<String>();
last.setFieldLabel("Last Name");
...
Button submit1 = new Button("Submit1", new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent event){
if(userPanel.isValid()) {
onSubmit1();
}
}
}) ;
userPanel.add(name);
userPanel.add(last);
userPanel.addButton(submit1);
LayoutContainer userLayout = new LayoutContainer();
userLayout.add(userPanel);

//-- form panel 2
compangyPanel = new FormPanel();
compangyPanel.setLayout(new FitLayout());
...
TextField<String> company = new TextField<String>();
company.setFieldLabel("Company");
personal.add(company);
...
Button submit2 = new Button("Submit2", new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent event){
if(compangyPanel.isValid()) {
onSubmit2();
}
}
}) ;
compangyPanel.add(company);
compangyPanel.add(userLayout);
compangyPanel.addButton(submit2);
...
// Adding in the viewport
...
}
public FormPanel getUserPanel() {
return userPanel ;
}
public FormPanel getCompangyPanel() {
return userPanel ;
}
}

// MethodExemple.java
public class MethodExemple {
private final ComponentExemple componentExemple ;

public void userProcessing() {
List<Field> fields = componentExemple.getUserPanel.getFields();
for (Field field : fields) {
...
// Processing for 'name' and'last'
...
}
}
public void userProcessing() {
List<Field> fields = componentExemple.getCompangyPanel.getFields();
for (Field field : fields) {
...
// Processing for 'name' , 'last' and 'company'
...
}
}
}

But; I think that I would be in the obligation to change my design and components's partitionings.