GXT关于tabpanel中加入的的form无法显示的问题

0 0

GXT关于tabpanel中加入的的form无法显示的问题10

学习gxt时碰到一个问题

自己定义了一个CategoryForm组件，代码如下

package com.mypj.gxtportal.client;

import com.extjs.gxt.ui.client.widget.LayoutContainer;   
import com.extjs.gxt.ui.client.widget.VerticalPanel;   
import com.extjs.gxt.ui.client.widget.form.CheckBox;   
import com.extjs.gxt.ui.client.widget.form.CheckBoxGroup;   
import com.extjs.gxt.ui.client.widget.form.FormPanel;   
import com.extjs.gxt.ui.client.widget.form.Radio;   
import com.extjs.gxt.ui.client.widget.form.RadioGroup;   
import com.extjs.gxt.ui.client.widget.form.TextArea;   
import com.extjs.gxt.ui.client.widget.form.TextField;   
  
public class CategoryForm extends LayoutContainer {   
  
  private VerticalPanel vp;   
  
  public CategoryForm() {   
    vp = new VerticalPanel();   
    vp.setSpacing(10);   
  }   
  
  @Override  
  protected void onRender(Element parent, int index) {   
    super.onRender(parent, index);   
    createCategoryForm();   
    add(vp);   
  }   
  
  private void createCategoryForm() {   
    FormPanel simple = new FormPanel();   
    simple.setId("CateporyForm");
    simple.setHeading("Restaurant");
    simple.setFrame(true);   
    simple.setWidth(400);   
  
    TextField<String> name = new TextField<String>();   
    name.setFieldLabel("Name");   
    name.setLabelStyle("font-weight: bold;");
    name.setAllowBlank(false);
    simple.add(name);   
  
    TextField<String> phone = new TextField<String>();   
    phone.setFieldLabel("Phone");   
    simple.add(phone);   
  
    TextField<String> priceRange = new TextField<String>();   
    priceRange.setFieldLabel("Price");   
    simple.add(priceRange);   
  
    CheckBox check1 = new CheckBox();   
    check1.setBoxLabel("alcohol lisence");   
  
    CheckBox check2 = new CheckBox();   
    check2.setBoxLabel("BYOB");   
    check2.setValue(true);   
  
    CheckBox check3 = new CheckBox();   
    check3.setBoxLabel("H.D. alcohol");   
  
    CheckBoxGroup checkGroup = new CheckBoxGroup();   
    checkGroup.setFieldLabel("About Alcohol");   
    checkGroup.setLabelStyle("font-weight: bold;");
    checkGroup.add(check1);   
    checkGroup.add(check2);   
    checkGroup.add(check3);   
    simple.add(checkGroup);   
  
    Radio radio = new Radio();   
    radio.setName("radio");   
    radio.setBoxLabel("Yes");   
    radio.setValue(true);   
  
    Radio radio2 = new Radio();   
    radio2.setName("radio");   
    radio2.setBoxLabel("No");   
  
    RadioGroup radioGroup = new RadioGroup("test");   
    radioGroup.setFieldLabel(" credit card");   
    radioGroup.add(radio);   
    radioGroup.add(radio2);   

    simple.add(radioGroup);   
  
    TextArea description = new TextArea();   
    description.setPreventScrollbars(true);   
    description.setFieldLabel("Description");   
    simple.add(description);   
  
    vp.add(simple);   
  }   
  
}

一个TabForms类，准备将上面的组件加入

package com.mypj.gxtportal.client;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;   
import com.extjs.gxt.ui.client.widget.LayoutContainer;   
import com.extjs.gxt.ui.client.widget.TabItem;   
import com.extjs.gxt.ui.client.widget.TabPanel;   
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;   
import com.extjs.gxt.ui.client.widget.form.FormPanel;   
import com.extjs.gxt.ui.client.widget.layout.FitLayout;   
import com.extjs.gxt.ui.client.widget.layout.FormData;   
import com.extjs.gxt.ui.client.widget.layout.FormLayout;   
import com.google.gwt.user.client.Element;   
import com.mypj.gxtportal.client.CategoryForm;

public class TabForms extends LayoutContainer {   
 
	private VerticalPanel vp;   
	  
	  public TabForms() {   
	    vp = new VerticalPanel();   
	    vp.setSpacing(10);   
	  }   
	  
	  @Override  
	  protected void onRender(Element parent, int index) {   
	    super.onRender(parent, index);   
	    createTabForm();   
	  
	    add(vp);   
	  }   
	  
	  private void createTabForm() {   
	    FormData formData = new FormData("100%");   
	    FormPanel panel = new FormPanel();   
	    panel.setFrame(false);   
	    panel.setHeaderVisible(false);   
	    panel.setBodyBorder(false);   
	    panel.setButtonAlign(HorizontalAlignment.CENTER);   
	    panel.setLayout(new FitLayout());   
	  
	    TabPanel tabs = new TabPanel();   
	    tabs.setDeferredRender(false);   
	       
	    TabItem personal = new TabItem();   
	    personal.setText("tab1");   
	    personal.setLayout(new FormLayout());   
	  
	    CategoryForm categoryForm = new CategoryForm();

	    tabs.add(personal);
	    
	    TabItem personal2 = new TabItem();   
	    personal2.setText("tab2");   
	    personal2.setLayout(new FormLayout());  
	    
	    personal2.add(categoryForm);   
	    
	    tabs.add(personal2);
	    
	    panel.add(tabs);   
	    panel.addButton(new Button("Submit"));   
	  
	    panel.setSize(350, 300);   
	  
	    vp.add(panel);
	  }    
	  
	}

EntryPoint的代码：

package com.mypj.gxtportal.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.mypj.gxtportal.client.TabForms;

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

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
//		RootPanel.get("maindiv").add(new CategoryForm());
		RootPanel.get("maindiv").add(new TabForms());
		
	}
}

启动后页面上有tab1和tab2，但tab1里面什么都没有，tab2里也只显示了CategoryForm 的标题“Restaurant”和一条线。何故？是不是Tabitem里面不能加自己写的CategoryForm ？

GWT