1. #1
    Ext User
    Join Date
    Jan 2010
    Location
    Cameroon-Douala
    Posts
    72
    Vote Rating
    0
    jocy is on a distinguished road

      0  

    Talking Dynamic formpanel

    Dynamic formpanel


    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:
    Code:
    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):
    Code:
    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:
    Code:
    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:
    Code:
    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

  2. #2
    Ext User
    Join Date
    Oct 2009
    Posts
    6
    Vote Rating
    0
    wangying95599 is on a distinguished road

      0  

    Default


    There is always throwing exception when I select the first Combobox

  3. #3
    Ext User
    Join Date
    Jul 2010
    Location
    berlin/germany
    Posts
    20
    Vote Rating
    0
    oneTETSUO is on a distinguished road

      0  

    Cool


    Quote Originally Posted by jocy View Post
    good morning everybody,
    ....
    code of the panel:
    Code:
            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:

    Code:
            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

  4. #4
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    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.

  5. #5
    Ext User
    Join Date
    Jul 2010
    Location
    berlin/germany
    Posts
    20
    Vote Rating
    0
    oneTETSUO is on a distinguished road

      0  

    Default solution ?

    solution ?


    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.

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

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