Results 1 to 6 of 6

Thread: MultiField with ComboBox, TextField and Button display bug

  1. #1

    Default MultiField with ComboBox, TextField and Button display bug

    I'm trying to add a MultiField (horizontal) with a ComboBox, TextField and a Button to a Window. The ComboBox always overlaps the TextField(the ComboBox selection button is behind the TextField), and if I set padding or margins manually to css, it renders differently on different browsers. If i increase the MultiField's spacing, then the button is too far away. Is there something wrong in my example, or is this a bug?

    Here's the code


    Code:
    package com.test.client;
    
    import java.util.ArrayList;
    
    import com.extjs.gxt.ui.client.data.BaseModelData;
    import com.extjs.gxt.ui.client.store.ListStore;
    import com.extjs.gxt.ui.client.widget.Window;
    import com.extjs.gxt.ui.client.widget.button.Button;
    import com.extjs.gxt.ui.client.widget.form.AdapterField;
    import com.extjs.gxt.ui.client.widget.form.ComboBox;
    import com.extjs.gxt.ui.client.widget.form.MultiField;
    import com.extjs.gxt.ui.client.widget.form.TextField;
    import com.extjs.gxt.ui.client.widget.layout.FitLayout;
    import com.google.gwt.core.client.EntryPoint;
    
    public class TestModule implements EntryPoint {
    
    	public void onModuleLoad() {
    		
    		Window window = new Window();		
    
    		// Combobox items
    		ArrayList<BaseModelData> types = new ArrayList<BaseModelData>();
    		BaseModelData type = new BaseModelData();
    		type.set("text", "Type 1");
    		types.add(type);
    		type = new BaseModelData();
    		type.set("text", "Type 2");
    		types.add(type);
    		type = new BaseModelData();
    		type.set("text", "Type 3");
    		types.add(type);
    		type = new BaseModelData();
    		type.set("text", "Type 4");
    		types.add(type);
    		type = new BaseModelData();
    		type.set("text", "Type 5");
    		types.add(type);
    
    		// Combobox store
    		ListStore<BaseModelData> typeStore = new ListStore<BaseModelData>();
    		typeStore.add(types);
    		
    		// Combobox
    		ComboBox typeBox = new ComboBox<BaseModelData>();
    		typeBox.setStore(typeStore);
    		typeBox.setEditable(false);
    
    		// Textfield
    		TextField<String> simpleSearchField = new TextField<String>();
    		
    		// Button
    		Button button = new Button("OK");
    
    		// Multifield
    		MultiField multiField = new MultiField();		
    		multiField.add(typeBox);
    		multiField.add(simpleSearchField);
    		multiField.add(new AdapterField(button));
    		
    		// Add stuff to window and show it
    		window.add(multiField);
    		window.setLayout(new FitLayout());
    		window.show();
    	}
    
    }
    Attached Images Attached Images

  2. #2

    Default

    multiField.setSpacing(10) works for me

  3. #3

    Default

    setSpacing works OK, its just that the space between the TextField & Button and TextField & ComboBox is different (as shown in the attached image). Also, in my application the window has a BorderLayout, and whenever I click on the TextField the ComboBox disappears and vice versa. If I click the button, the TextField and ComboBox both disappear! Is there something wrong with my code? GWT [1.5.2] + GXT [1.1]

    EDIT: Also, I would like to know the proper way to align those fields horizontally to the center of the north panel, as currently I'm doing with CSS, but I think there's a way to do it in GXT?
    Code:
    package com.test.client;
    
    import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
    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.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.HorizontalPanel;
    import com.extjs.gxt.ui.client.widget.Window;
    import com.extjs.gxt.ui.client.widget.button.Button;
    import com.extjs.gxt.ui.client.widget.form.AdapterField;
    import com.extjs.gxt.ui.client.widget.form.MultiField;
    import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;
    import com.extjs.gxt.ui.client.widget.form.TextField;
    import com.extjs.gxt.ui.client.widget.layout.AccordionLayout;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
    import com.extjs.gxt.ui.client.widget.layout.FitLayout;
    import com.google.gwt.core.client.EntryPoint;
    
    public class TestModule implements EntryPoint {
    
    	private ContentPanel north;
    	private ContentPanel west;
    	private ContentPanel east;
    	private ContentPanel center;
    	private BorderLayoutData northData;
    	private BorderLayoutData westData;
    	private BorderLayoutData eastData;
    	private BorderLayoutData centerData;
    	
    	public void onModuleLoad() {		
    		
    		// Init window and layout
    		Window window = new Window();	
    		window.setMaximizable(true);
    		window.setLayout(new BorderLayout());
    		window.setWidth(640);
    		window.setHeight(480);
    		initPanels();
    		
    		// Add panels to the window
    		window.add(north, northData);
    		window.add(west, westData);
    		window.add(center, centerData);
    		window.add(east, eastData);
    		
    		// Combobox
    		SimpleComboBox box = new SimpleComboBox();
    		box.add("Type 1");
    		box.add("Type 2");
    		box.add("Type 3");
    		
    		// Textfield
    		TextField<String> simpleSearchField = new TextField<String>();
    		
    		// Button
    		Button button = new Button("OK");
    
    		// Multifield
    		MultiField multiField = new MultiField();		
    		multiField.add(box);
    		multiField.add(simpleSearchField);
    		multiField.add(new AdapterField(button));
    		multiField.setSpacing(20);
    		
    		// Add stuff to window and show it
    		HorizontalPanel hp = new HorizontalPanel();
    		hp.setHorizontalAlign(HorizontalAlignment.CENTER);
    		hp.add(multiField);
    		north.add(hp);
    		
    		window.show();
    	}
    	/**
    	 * Initializes the BorderLayout-panels
    	 */
    	private void initPanels() {
    
    		// North-panel
    		north = new ContentPanel();
    		north.setHeading("Search");
    		north.setHeaderVisible(false);
    		north.setHeight(80);	
    		northData = new BorderLayoutData(LayoutRegion.NORTH, 80);
    		northData.setCollapsible(false);
    		northData.setFloatable(false);
    		northData.setSplit(true);
    		northData.setMargins(new Margins(3, 3, 0, 3));
    		northData.setMaxSize(50);
    		northData.setMinSize(50);
    
    		// West-panel
    		west = new ContentPanel();
    		west.setHeading("Advanced");
    		west.setLayout(new AccordionLayout());
    		west.setHeaderVisible(true);
    		westData = new BorderLayoutData(LayoutRegion.WEST, 150);
    		westData.setSplit(true);
    		westData.setCollapsible(true);
    		westData.setFloatable(true);
    		westData.setMargins(new Margins(3));
    
    		// East-panel
    		east = new ContentPanel();
    		east.setHeading("Properties");
    		east.setHeaderVisible(true);
    		east.setScrollMode(Scroll.AUTO);
    		eastData = new BorderLayoutData(LayoutRegion.EAST, 205, 205, 205);
    		eastData.setSplit(true);
    		eastData.setCollapsible(true);
    		eastData.setFloatable(true);
    		eastData.setMargins(new Margins(3));
    
    
    		// Center-panel
    		center = new ContentPanel();
    		center.setLayout(new FitLayout());
    		center.setLayoutOnChange(true);
    		center.setHeading("Results");
    		center.setHeaderVisible(true);
    		center.setBodyBorder(false);
    		centerData = new BorderLayoutData(LayoutRegion.CENTER);
    		centerData.setMargins(new Margins(3, 0, 3, 0));
    		centerData.setCollapsible(false);
    		centerData.setFloatable(false);
    
    	}
    
    }
    Attached Images Attached Images

  4. #4

    Default

    Found the problem -- It was the HorizontalPanel that was inside the North panel. Still, I would like to know if there is a way to center that MultiField without CSS, and why is the space between the SimpleComboBox and Button different?

  5. #5

    Default

    Now there is a new problem: When minimizing and maximizing the window, the multifield disappears until I either move the window or click the titlebar.

    SOLVED: By setting the North panels layout to FormLayout

  6. #6
    Sencha User
    Join Date
    Feb 2011
    Posts
    1

    Default

    How can I use multifield in case of cell editor. How can I set two values in text field and combobox in one cell editor using mutlifield?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •