Dynamic formpanel

[jocy]

good morning everybody,

if i'm there it just to post something i done it is not perfect but...
it a formpanel with a row of three combobox and there is a space at the end of each row reserve to a textfield or a datefield it depends of your selection in the first combobox. You can add or remove a row:
the last row add is added at the end of the list of row
the button remove the row where the cursor was at last.

code of the panel:


package com.inet.mygrid.client;

import java.util.Collections;
import java.util.Comparator;
import java.util.List;

import com.extjs.gxt.samples.client.Examples;
import com.extjs.gxt.samples.resources.client.TestData;
import com.extjs.gxt.ui.client.Style.ButtonScale;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.layout.FlowData;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Widget;

public class dynamicForm extends LayoutContainer {

private ListStore<Data> store;
private RowData rd1;
private RowData rd2;
private RowData rd3;
private RowData rd4;
private FormPanel fp;
private int i=0;
private String str = "non";

public dynamicForm(){
List<Data> datas = TestData.getDatas();
Collections.sort(datas, new Comparator<Data>() {
public int compare(Data arg0, Data arg1) {
return arg0.getName().compareTo(arg1.getName());
}
});

store = new ListStore<Data>();
store.add(datas);

final LayoutContainer lc = new LayoutContainer();
lc.setSize(600, 30);
lc.setLayout(new RowLayout(Orientation.HORIZONTAL));
lc.setId("layout"+i);

fp = new FormPanel();
fp.setHeading("test");
fp.setFrame(true);
fp.setSize(650,350);
fp.setButtonAlign(HorizontalAlignment.CENTER);
fp.setId("form");

rd1 = new RowData(-1, 1, new Margins(4));
rd2 = new RowData(-1, 1, new Margins(4, 0, 4, 0));
rd3 = new RowData(-1, 1, new Margins(4, 4, 4, 4));
rd4 = new RowData(2, 0.1, new Margins(4));

final ComboBox<Data> combo1 = new ComboBox<Data>();
combo1.setHideLabel(true);
combo1.setDisplayField("name");
combo1.setStore(store);
combo1.setTriggerAction(TriggerAction.ALL);
combo1.addListener(Events.OnMouseDown, new Listener<ComponentEvent>(){
public void handleEvent(ComponentEvent ce){
str = combo1.getParent().getElement().getId();
}
});

combo1.addSelectionChangedListener(new SelectionChangedListener<Data>(){
public void selectionChanged(SelectionChangedEvent<Data> se){
createField(se.getSelectedItem().getName(),lc);
fp.layout();
}
});

final ComboBox<Data> combo2 = new ComboBox<Data>();
combo2.setHideLabel(true);
combo2.setDisplayField("name");
combo2.setStore(store);
combo2.setTriggerAction(TriggerAction.ALL);
combo2.addListener(Events.OnMouseDown, new Listener<ComponentEvent>(){
public void handleEvent(ComponentEvent ce){
str = combo2.getParent().getElement().getId();
}
});

final ComboBox<Data> combo3 = new ComboBox<Data>();
combo3.setHideLabel(true);
combo3.setDisplayField("name");
combo3.setStore(store);
combo3.setTriggerAction(TriggerAction.ALL);
combo3.addListener(Events.OnMouseDown, new Listener<ComponentEvent>(){
public void handleEvent(ComponentEvent ce){
str = combo3.getParent().getElement().getId();
}
});

Button btn1 = new Button();
btn1.setText("Plus+");
btn1.addStyleName("btn1");
btn1.addSelectionListener(new SelectionListener<ButtonEvent>(){
public void componentSelected(ButtonEvent ce) {
addLayout();
}
});

Button btn2 = new Button();
btn2.setText("Moins-");
btn2.addStyleName("btn2");
btn2.setIcon(Examples.ICONS.add16());
btn2.setScale(ButtonScale.SMALL);
btn2.addSelectionListener(new SelectionListener<ButtonEvent>(){
public void componentSelected(ButtonEvent ce) {
removeLayout();
}
});

lc.add(combo1, rd1);
lc.add(combo2, rd2);
lc.add(combo3, rd3);

fp.add(lc);
fp.addButton(btn1);
fp.addButton(btn2);

add(fp,new FlowData(10));
}

private void addLayout(){
i++;
final LayoutContainer lc1 = new LayoutContainer();
lc1.setSize(600, 30);
lc1.setLayout(new RowLayout(Orientation.HORIZONTAL));
lc1.setId("layout"+i);

final ComboBox<Data> combo4 = new ComboBox<Data>();
combo4.setHideLabel(true);
combo4.setDisplayField("name");
combo4.setStore(store);
combo4.setTriggerAction(TriggerAction.ALL);
combo4.addListener(Events.OnMouseDown, new Listener<ComponentEvent>(){
public void handleEvent(ComponentEvent ce){
str = combo4.getParent().getElement().getId();
}
});
combo4.addSelectionChangedListener(new SelectionChangedListener<Data>(){
public void selectionChanged(SelectionChangedEvent<Data> se){
createField(se.getSelectedItem().getName(),lc1);
fp.layout();
}
});

final ComboBox<Data> combo5 = new ComboBox<Data>();
combo5.setHideLabel(true);
combo5.setDisplayField("name");
combo5.setStore(store);
combo5.setTriggerAction(TriggerAction.ALL);
combo5.addListener(Events.OnMouseDown, new Listener<ComponentEvent>(){
public void handleEvent(ComponentEvent ce){
str = combo5.getParent().getElement().getId();
}
});

final ComboBox<Data> combo6 = new ComboBox<Data>();
combo6.setHideLabel(true);
combo6.setDisplayField("name");
combo6.setStore(store);
combo6.setTriggerAction(TriggerAction.ALL);
combo6.addListener(Events.OnMouseDown, new Listener<ComponentEvent>(){
public void handleEvent(ComponentEvent ce){
str = combo6.getParent().getElement().getId();
}
});

lc1.add(combo4, rd1);
lc1.add(combo5, rd2);
lc1.add(combo6, rd3);

fp.add(lc1);
fp.layout();
}

private void removeLayout(){
fp.remove(fp.getItemByItemId(str));
fp.layout();
}

private void createField(String name, LayoutContainer layout){
Widget widget = new Widget();
if(name=="Groupe" || name=="Stage"){
if(layout.getItem(3)!= null){
layout.remove(layout.getItem(3));
layout.layout();
}
TextField<String> field = new TextField<String>();
field.setHideLabel(true);
field.setAllowBlank(false);
field.setHeight(20);
widget = field;

}
if(name=="Date"){
if(layout.getItem(3)!= null){
layout.remove(layout.getItem(3));
layout.layout();
}
DateField field = new DateField();
field.setHideLabel(true);
field.setAllowBlank(false);
field.setHeight(20);
field.setWidth(140);
widget = field;
}
layout.add(widget,rd4);
}
}



main code (entrypoint):


package com.inet.mygrid.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.extjs.gxt.themes.client.Slate;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.util.ThemeManager;
import com.extjs.gxt.ui.client.widget.HtmlContainer;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.custom.ThemeSelector;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class MyGrid implements EntryPoint {

private Viewport viewport;

public void onModuleLoad() {
Widget widget = getLayout();

viewport = new Viewport();
viewport.setLayout(new BorderLayout());
viewport.add(widget, new BorderLayoutData(LayoutRegion.CENTER));
createNorth();
viewport.setScrollMode(Scroll.AUTO);
RootPanel.get().add(viewport);
}

private Widget getLayout(){
LayoutContainer layout = new dynamicForm();
return layout;
}

private void createNorth() {
StringBuffer sb = new StringBuffer();
sb.append("<div id='demo-header' class='x-small-editor'><div id='demo-theme'></div><div id=demo-title>Mon premier essaie</div></div>");
HtmlContainer northPanel = new HtmlContainer(sb.toString());
northPanel.setStateful(false);
ThemeManager.register(Slate.SLATE);
ThemeSelector selector = new ThemeSelector();
selector.setWidth(125);
northPanel.add(selector, "#demo-theme");
BorderLayoutData data = new BorderLayoutData(LayoutRegion.NORTH, 33);
data.setMargins(new Margins(5, 5, 0, 5));
viewport.add(northPanel, data);
}


code of my testdata:


public static List<Data> getDatas() {
List<Data> datas = new ArrayList<Data>();

datas.add(new Data("Date"));
datas.add(new Data("Groupe"));
datas.add(new Data("Emploi"));
datas.add(new Data("Stage"));
datas.add(new Data("Amis"));

return datas;

}


code of my class data:


package com.inet.mygrid.client;

import java.util.Date;

import com.extjs.gxt.ui.client.data.BaseModel;

public class Data extends BaseModel{
public Data() {
}

public Data(String name) {
set("name", name);
}

public String getName() {
return (String) get("name");
}


public String toString() {
return getName();
}

}


i think it's all!
have a nice day:)

[wangying95599]

There is always throwing exception when I select the first Combobox

[oneTETSUO]

good morning everybody,
....
code of the panel:


final ComboBox<Data> combo1 = new ComboBox<Data>();
combo1.setHideLabel(true);
combo1.setDisplayField("name");
combo1.setStore(store);
combo1.setTriggerAction(TriggerAction.ALL);
combo1.addListener(Events.OnMouseDown, new Listener<ComponentEvent>(){
public void handleEvent(ComponentEvent ce){
str = combo1.getParent().getElement().getId();
}
});

combo1.addSelectionChangedListener(new SelectionChangedListener<Data>(){
public void selectionChanged(SelectionChangedEvent<Data> se){
createField(se.getSelectedItem().getName(),lc);
fp.layout();
}
});


i think it's all!
have a nice day:)

id didnt tested /compiled your code, but it seems, that u try to "touch" a object, which is not in the scope of these event. try changing it to sthg like:



combo1.addListener(Events.OnMouseDown, new Listener<ComponentEvent>(){
// would be consequent to do so @override
@Override
public void handleEvent(ComponentEvent ce){
str = ce.getComponent().getElement().getId();
}
});

if there is nothing in your event, you should post the stacktrace or so

[sven]

id didnt tested /compiled your code, but it seems, that u try to "touch" a object, which is not in the scope of these event. try changing it to sthg like:
combo1 is defined as final so this would work.


// would be consequent to do so @override

The override annotation only works on JDK6 or newer on overrides from interfaces.

[oneTETSUO]

i tested the code and changed the removelayout(); method to something different. you worked with the id of the layoutcontainer, but i just reduce the formpanel[] from the last element. it dosnt look so nice now, but it works fine.



private void removeLayout( ButtonEvent ce ){
Button g = (Button)ce.getSource();
Viewport v = ( Viewport ) g.getParent().getParent().getParent().getParent();
dynamicForm panel = (dynamicForm) v.getItems().get(0);
fp = (FormPanel)panel.getItems().get(0); // 1st position in list
List<Component> formPanelItems = fp.getItems();

if (formPanelItems!= null && formPanelItems.size()>0){
System.out.println( "removing layout: " + formPanelItems.get( formPanelItems.size()-1 ).getId() );
// removing the last element here, instead of the elementId in this case
fp.remove( formPanelItems.get(formPanelItems.size()-1 )); // last element is deleted
// fp.remove(fp.getItemByItemId(str)); //unused
fp.layout();
}
}


that first question with the error was, that a id was used, which was never been added or deleted due to the fragile code.

beside, sven was right (no question on that .), the final combo1 makes it possible to reach the id and stuff, but iam used to work with the event and its attached data.



combo1.addListener(Events.OnMouseDown, new Listener<ComponentEvent>(){
@Override
public void handleEvent(ComponentEvent ce){
try {
str = combo1.getParent().getElement().getId();
} catch (Error e) {
System.out.println( e.getLocalizedMessage() );
}
System.out.println( "combobox string: " + str );

ComboBox<Data> g = (ComboBox<Data>)ce.getSource();
LayoutContainer lc = (LayoutContainer) g.getParent();

System.out.println( "event string: " + lc.getId() );
if (str.equalsIgnoreCase( lc.getId() ))
System.out.println("hell yeah ^^");
}
});


anyhow, the code is not so elegant, but in general the idea works.