gwt-ext布局初探

以前一直在项目中使用ext的library，由于项目比较复杂，而又由于完全在前端编写ext的js代码，导致项目难以维护 而且js风格各异，编写人员之间很难协作，尤其是前台后台两者分别是由于两组programmer编写，对接的时候存在很多问题； 固考虑在项目中引进gwt-ext，既采用了ext 的喜人的风格和强大的特效，而gwt的编写模式是由java代码编译生成 js代码，维护的时候，我们维护更加严谨的java代码，并且在编写过程中无缝的继承前后两段的java通信，给程序员代码维护等等都带来便利之处； 以下是java风格的panel的布局编写：（代码来自GWT-EXt官网） 1：HorizontalLayout 垂直布局  

   1. /* 

   2.  * GWT-Ext Widget Library 

   3.  * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated 

   4.  * by the @authors tag. See the copyright.txt in the distribution for a 

   5.  * full listing of individual contributors. 

   6.  * 

   7.  * This is free software; you can redistribute it and/or modify it 

   8.  * under the terms of the GNU Lesser General Public License as 

   9.  * published by the Free Software Foundation; either version 3 of 

  10.  * the License, or (at your option) any later version. 

  11.  * 

  12.  * This software is distributed in the hope that it will be useful, 

  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of 

  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 

  15.  * Lesser General Public License for more details. 

  16.  * 

  17.  * You should have received a copy of the GNU Lesser General Public 

  18.  * License along with this software; if not, write to the Free 

  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 

  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org. 

  21.  */  

  22.    

  23. import com.google.gwt.core.client.EntryPoint;  

  24. import com.google.gwt.user.client.ui.RootPanel;  

  25. import com.gwtext.client.widgets.Panel;  

  26. import com.gwtext.client.widgets.layout.HorizontalLayout;  

  27.   

  28. public class HorizontalLayoutSample implements EntryPoint {  

  29.   

  30.     public void onModuleLoad() {  

  31.         Panel panel = new Panel();  

  32.         panel.setBorder(false);  

  33.         panel.setPaddings(15);  

  34.   

  35.         panel.setLayout(new HorizontalLayout(15));  

  36.   

  37.         panel.add(new Panel("Item 1", 100, 150));  //
   1. /* 

   2.  * GWT-Ext Widget Library 

   3.  * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated 

   4.  * by the @authors tag. See the copyright.txt in the distribution for a 

   5.  * full listing of individual contributors. 

   6.  * 

   7.  * This is free software; you can redistribute it and/or modify it 

   8.  * under the terms of the GNU Lesser General Public License as 

   9.  * published by the Free Software Foundation; either version 3 of 

  10.  * the License, or (at your option) any later version. 

  11.  * 

  12.  * This software is distributed in the hope that it will be useful, 

  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of 

  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 

  15.  * Lesser General Public License for more details. 

  16.  * 

  17.  * You should have received a copy of the GNU Lesser General Public 

  18.  * License along with this software; if not, write to the Free 

  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 

  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org. 

  21.  */  

  22.    

  23.   

  24. package com.gwtext.tutorials.client;  

  25.   

  26. import com.google.gwt.core.client.EntryPoint;  

  27. import com.gwtext.client.widgets.Panel;  

  28. import com.gwtext.client.widgets.Viewport;  

  29. import com.gwtext.client.widgets.layout.VerticalLayout;  

  30.   

  31. public class Tutorials implements EntryPoint {  

  32.   

  33.     public void onModuleLoad() {  

  34.         Panel panel = new Panel();  

  35.         panel.setBorder(false);  

  36.         panel.setPaddings(15);  

  37.   

  38.         panel.setLayout(new VerticalLayout(15));  

  39.   

  40.         panel.add(new Panel("Item 1", 150, 100));  

  41.         panel.add(new Panel("Item 2", 350, 75));  

  42.         panel.add(new Panel("Item 3", 150, 100));  

  43.         panel.add(new Panel("Item 3", 150, 150));  

  44.   

  45.         Viewport viewport = new Viewport(panel);  

  46.     }  

  47. }  



/* * GWT-Ext Widget Library * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated * by the @authors tag. See the copyright.txt in the distribution for a * full listing of individual contributors. * * This is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as * published by the Free Software Foundation; either version 3 of * the License, or (at your option) any later version. * * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this software; if not, write to the Free * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ package com.gwtext.tutorials.client; import com.google.gwt.core.client.EntryPoint; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.Viewport; import com.gwtext.client.widgets.layout.VerticalLayout; public class Tutorials implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); panel.setLayout(new VerticalLayout(15)); panel.add(new Panel("Item 1", 150, 100)); panel.add(new Panel("Item 2", 350, 75)); panel.add(new Panel("Item 3", 150, 100)); panel.add(new Panel("Item 3", 150, 150)); Viewport viewport = new Viewport(panel); } } 
height width

  38.         panel.add(new Panel("Item 2", 75, 150));  

  39.         panel.add(new Panel("Item 3", 100, 150));  

  40.         panel.add(new Panel("Item 4", 150, 150));  

  41.   

  42.         RootPanel.get().add(panel);  

  43.     }  

  44. }  



/* * GWT-Ext Widget Library * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated * by the @authors tag. See the copyright.txt in the distribution for a * full listing of individual contributors. * * This is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as * published by the Free Software Foundation; either version 3 of * the License, or (at your option) any later version. * * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this software; if not, write to the Free * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.layout.HorizontalLayout; public class HorizontalLayoutSample implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); panel.setLayout(new HorizontalLayout(15)); panel.add(new Panel("Item 1", 100, 150)); panel.add(new Panel("Item 2", 75, 150)); panel.add(new Panel("Item 3", 100, 150)); panel.add(new Panel("Item 4", 150, 150)); RootPanel.get().add(panel); } } 

VerticalLayout：水平布局

   1. /* 

   2.  * GWT-Ext Widget Library 

   3.  * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated 

   4.  * by the @authors tag. See the copyright.txt in the distribution for a 

   5.  * full listing of individual contributors. 

   6.  * 

   7.  * This is free software; you can redistribute it and/or modify it 

   8.  * under the terms of the GNU Lesser General Public License as 

   9.  * published by the Free Software Foundation; either version 3 of 

  10.  * the License, or (at your option) any later version. 

  11.  * 

  12.  * This software is distributed in the hope that it will be useful, 

  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of 

  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 

  15.  * Lesser General Public License for more details. 

  16.  * 

  17.  * You should have received a copy of the GNU Lesser General Public 

  18.  * License along with this software; if not, write to the Free 

  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 

  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org. 

  21.  */  

  22.    

  23.   

  24. package com.gwtext.tutorials.client;  

  25.   

  26. import com.google.gwt.core.client.EntryPoint;  

  27. import com.gwtext.client.widgets.Panel;  

  28. import com.gwtext.client.widgets.Viewport;  

  29. import com.gwtext.client.widgets.layout.VerticalLayout;  

  30.   

  31. public class Tutorials implements EntryPoint {  

  32.   

  33.     public void onModuleLoad() {  

  34.         Panel panel = new Panel();  

  35.         panel.setBorder(false);  

  36.         panel.setPaddings(15);  

  37.   

  38.         panel.setLayout(new VerticalLayout(15));  

  39.   

  40.         panel.add(new Panel("Item 1", 150, 100));  

  41.         panel.add(new Panel("Item 2", 350, 75));  

  42.         panel.add(new Panel("Item 3", 150, 100));  

  43.         panel.add(new Panel("Item 3", 150, 150));  

  44.   

  45.         Viewport viewport = new Viewport(panel);  

  46.     }  

  47. }  



/* * GWT-Ext Widget Library * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated * by the @authors tag. See the copyright.txt in the distribution for a * full listing of individual contributors. * * This is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as * published by the Free Software Foundation; either version 3 of * the License, or (at your option) any later version. * * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this software; if not, write to the Free * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ package com.gwtext.tutorials.client; import com.google.gwt.core.client.EntryPoint; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.Viewport; import com.gwtext.client.widgets.layout.VerticalLayout; public class Tutorials implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); panel.setLayout(new VerticalLayout(15)); panel.add(new Panel("Item 1", 150, 100)); panel.add(new Panel("Item 2", 350, 75)); panel.add(new Panel("Item 3", 150, 100)); panel.add(new Panel("Item 3", 150, 150)); Viewport viewport = new Viewport(panel); } } 

3:BorderLayout:

   1. /* 

   2.  * GWT-Ext Widget Library 

   3.  * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated 

   4.  * by the @authors tag. See the copyright.txt in the distribution for a 

   5.  * full listing of individual contributors. 

   6.  * 

   7.  * This is free software; you can redistribute it and/or modify it 

   8.  * under the terms of the GNU Lesser General Public License as 

   9.  * published by the Free Software Foundation; either version 3 of 

  10.  * the License, or (at your option) any later version. 

  11.  * 

  12.  * This software is distributed in the hope that it will be useful, 

  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of 

  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 

  15.  * Lesser General Public License for more details. 

  16.  * 

  17.  * You should have received a copy of the GNU Lesser General Public 

  18.  * License along with this software; if not, write to the Free 

  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 

  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org. 

  21.  */  

  22.    

  23.   

  24. package com.gwtext.sample.showcase2.client;  

  25.   

  26. import com.google.gwt.core.client.EntryPoint;  

  27. import com.gwtext.client.core.Margins;  

  28. import com.gwtext.client.core.RegionPosition;  

  29. import com.gwtext.client.widgets.Panel;  

  30. import com.gwtext.client.widgets.Viewport;  

  31. import com.gwtext.client.widgets.layout.BorderLayout;  

  32. import com.gwtext.client.widgets.layout.BorderLayoutData;  

  33. import com.gwtext.client.widgets.layout.FitLayout;  

  34.   

  35. public class Test implements EntryPoint {  

  36.   

  37.     public void onModuleLoad() {  

  38.         Panel panel = new Panel();  

  39.         panel.setBorder(false);  

  40.         panel.setPaddings(15);  

  41.         panel.setLayout(new FitLayout());  

  42.   

  43.         Panel borderPanel = new Panel();  

  44.         borderPanel.setLayout(new BorderLayout());  

  45.   

  46.         //add north panel  

  47.         Panel northPanel = new Panel();  

  48.         northPanel.setHtml("<p>north panel</p>");  

  49.         northPanel.setHeight(32);  

  50.         northPanel.setBodyStyle("background-color:#FFFF88");  

  51.         borderPanel.add(northPanel, new BorderLayoutData(RegionPosition.NORTH));  

  52.   

  53.         //add south panel  

  54.         Panel southPanel = new Panel();  

  55.         southPanel.setHtml("<p>south panel</p>");  

  56.         southPanel.setHeight(100);  

  57.         southPanel.setBodyStyle("background-color:#CDEB8B");  

  58.         southPanel.setCollapsible(true);  

  59.         southPanel.setTitle("South");  

  60.   

  61.         BorderLayoutData southData = new BorderLayoutData(RegionPosition.SOUTH);  

  62.         southData.setMinSize(100);  

  63.         southData.setMaxSize(200);  

  64.         southData.setMargins(new Margins(0, 0, 0, 0));  

  65.         southData.setSplit(true);  

  66.         borderPanel.add(southPanel, southData);  

  67.   

  68.         //add east panel  

  69.         Panel eastPanel = new Panel();  

  70.         eastPanel.setHtml("<p>east panel</p>");  

  71.         eastPanel.setTitle("East Side");  

  72.         eastPanel.setCollapsible(true);  

  73.         eastPanel.setWidth(225);  

  74.   

  75.         BorderLayoutData eastData = new BorderLayoutData(RegionPosition.EAST);  

  76.         eastData.setSplit(true);  

  77.         eastData.setMinSize(175);  

  78.         eastData.setMaxSize(400);  

  79.         eastData.setMargins(new Margins(0, 0, 5, 0));  

  80.   

  81.         borderPanel.add(eastPanel, eastData);  

  82.   

  83.         Panel westPanel = new Panel();  

  84.         westPanel.setHtml("<p>west panel</p>");  

  85.         westPanel.setTitle("West");  

  86.         westPanel.setBodyStyle("background-color:#EEEEEE");  

  87.         westPanel.setCollapsible(true);  

  88.         westPanel.setWidth(200);  

  89.   

  90.         BorderLayoutData westData = new BorderLayoutData(RegionPosition.WEST);  

  91.         westData.setSplit(true);  

  92.         westData.setMinSize(175);  

  93.         westData.setMaxSize(400);  

  94.         westData.setMargins(new Margins(0, 5, 0, 0));  

  95.   

  96.         borderPanel.add(westPanel, westData);  

  97.   

  98.         Panel centerPanel = new Panel();  

  99.         centerPanel.setHtml("<p>center panel</p>");  

 100.         centerPanel.setBodyStyle("background-color:#C3D9FF");  

 101.   

 102.         borderPanel.add(centerPanel, new BorderLayoutData(RegionPosition.CENTER));  

 103.   

 104.         panel.add(borderPanel);  

 105.   

 106.         Viewport viewport = new Viewport(panel);  

 107.     }  

 108. }  



/* * GWT-Ext Widget Library * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated * by the @authors tag. See the copyright.txt in the distribution for a * full listing of individual contributors. * * This is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as * published by the Free Software Foundation; either version 3 of * the License, or (at your option) any later version. * * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this software; if not, write to the Free * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ package com.gwtext.sample.showcase2.client; import com.google.gwt.core.client.EntryPoint; import com.gwtext.client.core.Margins; import com.gwtext.client.core.RegionPosition; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.Viewport; import com.gwtext.client.widgets.layout.BorderLayout; import com.gwtext.client.widgets.layout.BorderLayoutData; import com.gwtext.client.widgets.layout.FitLayout; public class Test implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); panel.setLayout(new FitLayout()); Panel borderPanel = new Panel(); borderPanel.setLayout(new BorderLayout()); //add north panel Panel northPanel = new Panel(); northPanel.setHtml("<p>north panel</p>"); northPanel.setHeight(32); northPanel.setBodyStyle("background-color:#FFFF88"); borderPanel.add(northPanel, new BorderLayoutData(RegionPosition.NORTH)); //add south panel Panel southPanel = new Panel(); southPanel.setHtml("<p>south panel</p>"); southPanel.setHeight(100); southPanel.setBodyStyle("background-color:#CDEB8B"); southPanel.setCollapsible(true); southPanel.setTitle("South"); BorderLayoutData southData = new BorderLayoutData(RegionPosition.SOUTH); southData.setMinSize(100); southData.setMaxSize(200); southData.setMargins(new Margins(0, 0, 0, 0)); southData.setSplit(true); borderPanel.add(southPanel, southData); //add east panel Panel eastPanel = new Panel(); eastPanel.setHtml("<p>east panel</p>"); eastPanel.setTitle("East Side"); eastPanel.setCollapsible(true); eastPanel.setWidth(225); BorderLayoutData eastData = new BorderLayoutData(RegionPosition.EAST); eastData.setSplit(true); eastData.setMinSize(175); eastData.setMaxSize(400); eastData.setMargins(new Margins(0, 0, 5, 0)); borderPanel.add(eastPanel, eastData); Panel westPanel = new Panel(); westPanel.setHtml("<p>west panel</p>"); westPanel.setTitle("West"); westPanel.setBodyStyle("background-color:#EEEEEE"); westPanel.setCollapsible(true); westPanel.setWidth(200); BorderLayoutData westData = new BorderLayoutData(RegionPosition.WEST); westData.setSplit(true); westData.setMinSize(175); westData.setMaxSize(400); westData.setMargins(new Margins(0, 5, 0, 0)); borderPanel.add(westPanel, westData); Panel centerPanel = new Panel(); centerPanel.setHtml("<p>center panel</p>"); centerPanel.setBodyStyle("background-color:#C3D9FF"); borderPanel.add(centerPanel, new BorderLayoutData(RegionPosition.CENTER)); panel.add(borderPanel); Viewport viewport = new Viewport(panel); } } 

4:  AccordionLayout.

   1. /* 

   2.  * GWT-Ext Widget Library 

   3.  * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated 

   4.  * by the @authors tag. See the copyright.txt in the distribution for a 

   5.  * full listing of individual contributors. 

   6.  * 

   7.  * This is free software; you can redistribute it and/or modify it 

   8.  * under the terms of the GNU Lesser General Public License as 

   9.  * published by the Free Software Foundation; either version 3 of 

  10.  * the License, or (at your option) any later version. 

  11.  * 

  12.  * This software is distributed in the hope that it will be useful, 

  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of 

  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 

  15.  * Lesser General Public License for more details. 

  16.  * 

  17.  * You should have received a copy of the GNU Lesser General Public 

  18.  * License along with this software; if not, write to the Free 

  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 

  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org. 

  21.  */  

  22.    

  23.   

  24. import com.google.gwt.core.client.EntryPoint;  

  25. import com.google.gwt.user.client.ui.RootPanel;  

  26. import com.gwtext.client.core.EventObject;  

  27. import com.gwtext.client.widgets.Button;  

  28. import com.gwtext.client.widgets.Panel;  

  29. import com.gwtext.client.widgets.Window;  

  30. import com.gwtext.client.widgets.event.ButtonListenerAdapter;  

  31. import com.gwtext.client.widgets.layout.AccordionLayout;  

  32. import com.gwtext.client.widgets.layout.HorizontalLayout;  

  33.   

  34. public class AccordionLayoutSample implements EntryPoint {  

  35.   

  36.     public void onModuleLoad() {  

  37.         Panel panel = new Panel();  

  38.         panel.setBorder(false);  

  39.         panel.setPaddings(15);  

  40.   

  41.         panel.setLayout(new HorizontalLayout(15));  

  42.   

  43.         Panel accordionPanel = createAccordionPanel();  

  44.         accordionPanel.setTitle("Accordion Panel");  

  45.         accordionPanel.setHeight(400);  

  46.         accordionPanel.setWidth(200);  

  47.   

  48.         Button button = new Button("Show Accordion in Window", new ButtonListenerAdapter() {  

  49.             public void onClick(Button button, EventObject e) {  

  50.                 Panel accordionPanel = createAccordionPanel();  

  51.                 Window window = new Window();  

  52.                 window.setTitle("Accordion Window");  

  53.                 window.setWidth(200);  

  54.                 window.setHeight(400);  

  55.                 window.add(accordionPanel);  

  56.                 window.show(button.getId());  

  57.             }  

  58.         });  

  59.   

  60.         panel.add(accordionPanel);  

  61.         panel.add(button);  

  62.   

  63.         RootPanel.get().add(panel);  

  64.     }  

  65.   

  66.     private Panel createAccordionPanel() {  

  67.         Panel accordionPanel = new Panel();  

  68.         accordionPanel.setLayout(new AccordionLayout(true));  

  69.   

  70.         Panel panelOne = new Panel("Panel 1", "<p>Panel1 content!</p>");  

  71.         panelOne.setIconCls("settings-icon");  

  72.         accordionPanel.add(panelOne);  

  73.   

  74.         Panel panelTwo = new Panel("Panel 2", "<p>Panel2 content!</p>");  

  75.         panelTwo.setIconCls("folder-icon");  

  76.         accordionPanel.add(panelTwo);  

  77.   

  78.         Panel panelThree = new Panel("Panel 3", "<p>Panel3 content!</p>");  

  79.         panelThree.setIconCls("user-add-icon");  

  80.         accordionPanel.add(panelThree);  

  81.   

  82.         return accordionPanel;  

  83.     }  

  84. }  



/* * GWT-Ext Widget Library * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated * by the @authors tag. See the copyright.txt in the distribution for a * full listing of individual contributors. * * This is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as * published by the Free Software Foundation; either version 3 of * the License, or (at your option) any later version. * * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this software; if not, write to the Free * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; import com.gwtext.client.core.EventObject; import com.gwtext.client.widgets.Button; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.Window; import com.gwtext.client.widgets.event.ButtonListenerAdapter; import com.gwtext.client.widgets.layout.AccordionLayout; import com.gwtext.client.widgets.layout.HorizontalLayout; public class AccordionLayoutSample implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); panel.setLayout(new HorizontalLayout(15)); Panel accordionPanel = createAccordionPanel(); accordionPanel.setTitle("Accordion Panel"); accordionPanel.setHeight(400); accordionPanel.setWidth(200); Button button = new Button("Show Accordion in Window", new ButtonListenerAdapter() { public void onClick(Button button, EventObject e) { Panel accordionPanel = createAccordionPanel(); Window window = new Window(); window.setTitle("Accordion Window"); window.setWidth(200); window.setHeight(400); window.add(accordionPanel); window.show(button.getId()); } }); panel.add(accordionPanel); panel.add(button); RootPanel.get().add(panel); } private Panel createAccordionPanel() { Panel accordionPanel = new Panel(); accordionPanel.setLayout(new AccordionLayout(true)); Panel panelOne = new Panel("Panel 1", "<p>Panel1 content!</p>"); panelOne.setIconCls("settings-icon"); accordionPanel.add(panelOne); Panel panelTwo = new Panel("Panel 2", "<p>Panel2 content!</p>"); panelTwo.setIconCls("folder-icon"); accordionPanel.add(panelTwo); Panel panelThree = new Panel("Panel 3", "<p>Panel3 content!</p>"); panelThree.setIconCls("user-add-icon"); accordionPanel.add(panelThree); return accordionPanel; } } 

5:AnchorLayout

   1. /* 

   2.  * GWT-Ext Widget Library 

   3.  * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated 

   4.  * by the @authors tag. See the copyright.txt in the distribution for a 

   5.  * full listing of individual contributors. 

   6.  * 

   7.  * This is free software; you can redistribute it and/or modify it 

   8.  * under the terms of the GNU Lesser General Public License as 

   9.  * published by the Free Software Foundation; either version 3 of 

  10.  * the License, or (at your option) any later version. 

  11.  * 

  12.  * This software is distributed in the hope that it will be useful, 

  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of 

  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 

  15.  * Lesser General Public License for more details. 

  16.  * 

  17.  * You should have received a copy of the GNU Lesser General Public 

  18.  * License along with this software; if not, write to the Free 

  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 

  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org. 

  21.  */  

  22.    

  23.   

  24. import com.google.gwt.core.client.EntryPoint;  

  25. import com.gwtext.client.widgets.Panel;  

  26. import com.gwtext.client.widgets.Viewport;  

  27. import com.gwtext.client.widgets.layout.AnchorLayout;  

  28. import com.gwtext.client.widgets.layout.AnchorLayoutData;  

  29. import com.gwtext.client.widgets.layout.FitLayout;  

  30.   

  31. public class AnchorSample implements EntryPoint {  

  32.   

  33.     public void onModuleLoad() {  

  34.         Panel panel = new Panel();  

  35.         panel.setBorder(false);  

  36.         panel.setPaddings(15);  

  37.   

  38.         panel.setLayout(new FitLayout());  

  39.   

  40.         //add wrapper panel just to dispaly the borders  

  41.         Panel wrapperPanel = new Panel();  

  42.         wrapperPanel.setBorder(true);  

  43.         wrapperPanel.setBodyStyle("border-style:dotted;border-color:blue;");  

  44.   

  45.         wrapperPanel.setLayout(new AnchorLayout());  

  46.   

  47.         wrapperPanel.add(new Panel("Item 1", "Anchor : '100% 20%'  width is 100% of the  

  48.                                         containing element and 20% of its height"),  

  49.                 new AnchorLayoutData("100% 20%"));  

  50.         wrapperPanel.add(new Panel("Item 2", "Anchor : '50% 25%'  width is 50% of the  

  51.                                             containing element and 25% of its height"),  

  52.                 new AnchorLayoutData("50% 25%"));  

  53.   

  54.   

  55.         wrapperPanel.add(new Panel("Item 3", "Anchor : '-100 30%'  width is (100% of the  

  56.                                         containing element - 100px) and height is 30%  

  57.                                         of containing element."),  

  58.                 new AnchorLayoutData("-100 30%"));  

  59.   

  60.         panel.add(wrapperPanel);  

  61.   

  62.         Viewport viewport = new Viewport(panel);  

  63.     }  

  64. }  



/* * GWT-Ext Widget Library * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated * by the @authors tag. See the copyright.txt in the distribution for a * full listing of individual contributors. * * This is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as * published by the Free Software Foundation; either version 3 of * the License, or (at your option) any later version. * * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this software; if not, write to the Free * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ import com.google.gwt.core.client.EntryPoint; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.Viewport; import com.gwtext.client.widgets.layout.AnchorLayout; import com.gwtext.client.widgets.layout.AnchorLayoutData; import com.gwtext.client.widgets.layout.FitLayout; public class AnchorSample implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); panel.setLayout(new FitLayout()); //add wrapper panel just to dispaly the borders Panel wrapperPanel = new Panel(); wrapperPanel.setBorder(true); wrapperPanel.setBodyStyle("border-style:dotted;border-color:blue;"); wrapperPanel.setLayout(new AnchorLayout()); wrapperPanel.add(new Panel("Item 1", "Anchor : '100% 20%' width is 100% of the containing element and 20% of its height"), new AnchorLayoutData("100% 20%")); wrapperPanel.add(new Panel("Item 2", "Anchor : '50% 25%' width is 50% of the containing element and 25% of its height"), new AnchorLayoutData("50% 25%")); wrapperPanel.add(new Panel("Item 3", "Anchor : '-100 30%' width is (100% of the containing element - 100px) and height is 30% of containing element."), new AnchorLayoutData("-100 30%")); panel.add(wrapperPanel); Viewport viewport = new Viewport(panel); } } 

5:ColumnLayout:

   1. /* 

   2.  * GWT-Ext Widget Library 

   3.  * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated 

   4.  * by the @authors tag. See the copyright.txt in the distribution for a 

   5.  * full listing of individual contributors. 

   6.  * 

   7.  * This is free software; you can redistribute it and/or modify it 

   8.  * under the terms of the GNU Lesser General Public License as 

   9.  * published by the Free Software Foundation; either version 3 of 

  10.  * the License, or (at your option) any later version. 

  11.  * 

  12.  * This software is distributed in the hope that it will be useful, 

  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of 

  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 

  15.  * Lesser General Public License for more details. 

  16.  * 

  17.  * You should have received a copy of the GNU Lesser General Public 

  18.  * License along with this software; if not, write to the Free 

  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 

  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org. 

  21.  */  

  22.    

  23.   

  24. import com.google.gwt.core.client.EntryPoint;  

  25. import com.gwtext.client.widgets.Panel;  

  26. import com.gwtext.client.widgets.Viewport;  

  27. import com.gwtext.client.widgets.layout.ColumnLayout;  

  28. import com.gwtext.client.widgets.layout.ColumnLayoutData;  

  29. import com.gwtext.client.widgets.layout.FitLayout;  

  30.   

  31. public class ColumnPctSample implements EntryPoint {  

  32.   

  33.     public void onModuleLoad() {  

  34.         Panel panel = new Panel();  

  35.         panel.setBorder(false);  

  36.         panel.setPaddings(15);  

  37.         panel.setLayout(new FitLayout());  

  38.   

  39.         //add wrapper panel just to dispaly the borders  

  40.         Panel wrapperPanel = new Panel();  

  41.         wrapperPanel.setBorder(true);  

  42.         wrapperPanel.setBodyStyle("border-style:dotted;border-color:blue;");  

  43.   

  44.         wrapperPanel.setLayout(new ColumnLayout());  

  45.         wrapperPanel.setTitle("Column Layout - Percentage Only");  

  46.         wrapperPanel.add(new Panel("Column 1", "25% width"), new ColumnLayoutData(.25));  

  47.         wrapperPanel.add(new Panel("Column 2", "60% width"), new ColumnLayoutData(.6));  

  48.         wrapperPanel.add(new Panel("Column 3", "15% width"), new ColumnLayoutData(.15));  

  49.   

  50.         panel.add(wrapperPanel);  

  51.   

  52.         new Viewport(panel);  

  53.     }  

  54. }  



/* * GWT-Ext Widget Library * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated * by the @authors tag. See the copyright.txt in the distribution for a * full listing of individual contributors. * * This is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as * published by the Free Software Foundation; either version 3 of * the License, or (at your option) any later version. * * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this software; if not, write to the Free * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ import com.google.gwt.core.client.EntryPoint; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.Viewport; import com.gwtext.client.widgets.layout.ColumnLayout; import com.gwtext.client.widgets.layout.ColumnLayoutData; import com.gwtext.client.widgets.layout.FitLayout; public class ColumnPctSample implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); panel.setLayout(new FitLayout()); //add wrapper panel just to dispaly the borders Panel wrapperPanel = new Panel(); wrapperPanel.setBorder(true); wrapperPanel.setBodyStyle("border-style:dotted;border-color:blue;"); wrapperPanel.setLayout(new ColumnLayout()); wrapperPanel.setTitle("Column Layout - Percentage Only"); wrapperPanel.add(new Panel("Column 1", "25% width"), new ColumnLayoutData(.25)); wrapperPanel.add(new Panel("Column 2", "60% width"), new ColumnLayoutData(.6)); wrapperPanel.add(new Panel("Column 3", "15% width"), new ColumnLayoutData(.15)); panel.add(wrapperPanel); new Viewport(panel); } } 

   1. /* 

   2.  * GWT-Ext Widget Library 

   3.  * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated 

   4.  * by the @authors tag. See the copyright.txt in the distribution for a 

   5.  * full listing of individual contributors. 

   6.  * 

   7.  * This is free software; you can redistribute it and/or modify it 

   8.  * under the terms of the GNU Lesser General Public License as 

   9.  * published by the Free Software Foundation; either version 3 of 

  10.  * the License, or (at your option) any later version. 

  11.  * 

  12.  * This software is distributed in the hope that it will be useful, 

  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of 

  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 

  15.  * Lesser General Public License for more details. 

  16.  * 

  17.  * You should have received a copy of the GNU Lesser General Public 

  18.  * License along with this software; if not, write to the Free 

  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 

  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org. 

  21.  */  

  22.    

  23.   

  24. import com.google.gwt.core.client.EntryPoint;  

  25. import com.gwtext.client.widgets.Panel;  

  26. import com.gwtext.client.widgets.Viewport;  

  27. import com.gwtext.client.widgets.layout.ColumnLayout;  

  28. import com.gwtext.client.widgets.layout.ColumnLayoutData;  

  29. import com.gwtext.client.widgets.layout.FitLayout;  

  30.   

  31. public class ColumnMixedSample implements EntryPoint {  

  32.   

  33.     public void onModuleLoad() {  

  34.         Panel panel = new Panel();  

  35.         panel.setBorder(false);  

  36.         panel.setPaddings(15);  

  37.         panel.setLayout(new FitLayout());  

  38.   

  39.         //add wrapper panel just to dispaly the borders  

  40.         Panel wrapperPanel = new Panel();  

  41.         wrapperPanel.setBorder(true);  

  42.         wrapperPanel.setBodyStyle("border-style:dotted;border-color:blue;");  

  43.         wrapperPanel.setLayout(new ColumnLayout());  

  44.   

  45.         wrapperPanel.setTitle("Column Layout - Mixed");  

  46.         Panel p1 = new Panel("Column 1", "120px width");  

  47.         p1.setWidth(120);  

  48.         wrapperPanel.add(p1);  

  49.   

  50.         wrapperPanel.add(new Panel("Column 2", "80% width"), new ColumnLayoutData(.8));  

  51.         wrapperPanel.add(new Panel("Column 3", "20% width"), new ColumnLayoutData(.2));  

  52.   

  53.         panel.add(wrapperPanel);  

  54.   

  55.         new Viewport(panel);  

  56.     }  

  57. }  



/* * GWT-Ext Widget Library * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated * by the @authors tag. See the copyright.txt in the distribution for a * full listing of individual contributors. * * This is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as * published by the Free Software Foundation; either version 3 of * the License, or (at your option) any later version. * * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this software; if not, write to the Free * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ import com.google.gwt.core.client.EntryPoint; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.Viewport; import com.gwtext.client.widgets.layout.ColumnLayout; import com.gwtext.client.widgets.layout.ColumnLayoutData; import com.gwtext.client.widgets.layout.FitLayout; public class ColumnMixedSample implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); panel.setLayout(new FitLayout()); //add wrapper panel just to dispaly the borders Panel wrapperPanel = new Panel(); wrapperPanel.setBorder(true); wrapperPanel.setBodyStyle("border-style:dotted;border-color:blue;"); wrapperPanel.setLayout(new ColumnLayout()); wrapperPanel.setTitle("Column Layout - Mixed"); Panel p1 = new Panel("Column 1", "120px width"); p1.setWidth(120); wrapperPanel.add(p1); wrapperPanel.add(new Panel("Column 2", "80% width"), new ColumnLayoutData(.8)); wrapperPanel.add(new Panel("Column 3", "20% width"), new ColumnLayoutData(.2)); panel.add(wrapperPanel); new Viewport(panel); } } 

6:TableLayout.

   1. /* 

   2.  * GWT-Ext Widget Library 

   3.  * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated 

   4.  * by the @authors tag. See the copyright.txt in the distribution for a 

   5.  * full listing of individual contributors. 

   6.  * 

   7.  * This is free software; you can redistribute it and/or modify it 

   8.  * under the terms of the GNU Lesser General Public License as 

   9.  * published by the Free Software Foundation; either version 3 of 

  10.  * the License, or (at your option) any later version. 

  11.  * 

  12.  * This software is distributed in the hope that it will be useful, 

  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of 

  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 

  15.  * Lesser General Public License for more details. 

  16.  * 

  17.  * You should have received a copy of the GNU Lesser General Public 

  18.  * License along with this software; if not, write to the Free 

  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 

  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org. 

  21.  */  

  22.    

  23.   

  24. import com.google.gwt.core.client.EntryPoint;  

  25. import com.gwtext.client.widgets.PaddedPanel;  

  26. import com.gwtext.client.widgets.Panel;  

  27. import com.gwtext.client.widgets.Viewport;  

  28. import com.gwtext.client.widgets.layout.FitLayout;  

  29. import com.gwtext.client.widgets.layout.TableLayout;  

  30. import com.gwtext.client.widgets.layout.TableLayoutData;  

  31.   

  32. public class TableSample implements EntryPoint {  

  33.   

  34.     public void onModuleLoad() {  

  35.         Panel panel = new Panel();  

  36.         panel.setBorder(false);  

  37.         panel.setPaddings(15);  

  38.   

  39.         panel.setLayout(new FitLayout());  

  40.   

  41.         Panel wrapperPanel = new Panel();  

  42.         wrapperPanel.setAutoScroll(true);  

  43.         wrapperPanel.setBorder(true);  

  44.         wrapperPanel.setBodyStyle("border-style:dotted;border-color:blue;");  

  45.         wrapperPanel.setLayout(new TableLayout(3));  //把panel分成几列

  46.         //this add a blue background to the panel content area  

  47.         wrapperPanel.setBaseCls("x-plain");  

  48.   

  49.         //add top and right padding to each panel so that they look neat instead of right beside each other  

  50.         wrapperPanel.add(new PaddedPanel(new Panel("Item 1", 100, 100), 0, 0, 10, 10));  

  51.         wrapperPanel.add(new PaddedPanel(new Panel("Item 2", 100, 100), 0, 0, 10, 10));  

  52.         wrapperPanel.add(new PaddedPanel(new Panel("Item 3", 100, 100), 0, 0, 10, 10));  

  53.   

  54.         wrapperPanel.add(new PaddedPanel(new Panel("Item 4", 210, 100), 0, 0, 10, 10), new TableLayoutData(2));  

  55.         wrapperPanel.add(new PaddedPanel(new Panel("Item 5", 100, 100), 0, 0, 10, 10));  

  56.         wrapperPanel.add(new PaddedPanel(new Panel("Item 6", 100, 100), 0, 0, 10, 10));  

  57.         wrapperPanel.add(new PaddedPanel(new Panel("Item 7", 210, 100), 0, 0, 10, 10), new TableLayoutData(2));  //占据2列

  58.         wrapperPanel.add(new PaddedPanel(new Panel("Item 8", 100, 100), 0, 0, 10, 10));  

  59.   

  60.         panel.add(wrapperPanel);  

  61.   

  62.         Viewport viewport = new Viewport(panel);  

  63.     }  

  64. }  



/* * GWT-Ext Widget Library * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated * by the @authors tag. See the copyright.txt in the distribution for a * full listing of individual contributors. * * This is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as * published by the Free Software Foundation; either version 3 of * the License, or (at your option) any later version. * * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this software; if not, write to the Free * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ import com.google.gwt.core.client.EntryPoint; import com.gwtext.client.widgets.PaddedPanel; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.Viewport; import com.gwtext.client.widgets.layout.FitLayout; import com.gwtext.client.widgets.layout.TableLayout; import com.gwtext.client.widgets.layout.TableLayoutData; public class TableSample implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); panel.setLayout(new FitLayout()); Panel wrapperPanel = new Panel(); wrapperPanel.setAutoScroll(true); wrapperPanel.setBorder(true); wrapperPanel.setBodyStyle("border-style:dotted;border-color:blue;"); wrapperPanel.setLayout(new TableLayout(3)); //this add a blue background to the panel content area wrapperPanel.setBaseCls("x-plain"); //add top and right padding to each panel so that they look neat instead of right beside each other wrapperPanel.add(new PaddedPanel(new Panel("Item 1", 100, 100), 0, 0, 10, 10)); wrapperPanel.add(new PaddedPanel(new Panel("Item 2", 100, 100), 0, 0, 10, 10)); wrapperPanel.add(new PaddedPanel(new Panel("Item 3", 100, 100), 0, 0, 10, 10)); wrapperPanel.add(new PaddedPanel(new Panel("Item 4", 210, 100), 0, 0, 10, 10), new TableLayoutData(2)); wrapperPanel.add(new PaddedPanel(new Panel("Item 5", 100, 100), 0, 0, 10, 10)); wrapperPanel.add(new PaddedPanel(new Panel("Item 6", 100, 100), 0, 0, 10, 10)); wrapperPanel.add(new PaddedPanel(new Panel("Item 7", 210, 100), 0, 0, 10, 10), new TableLayoutData(2)); wrapperPanel.add(new PaddedPanel(new Panel("Item 8", 100, 100), 0, 0, 10, 10)); panel.add(wrapperPanel); Viewport viewport = new Viewport(panel); } } 

7：Card layout

   1. /*  

   2.  * GWT-Ext Widget Library  

   3.  * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated  

   4.  * by the @authors tag. See the copyright.txt in the distribution for a  

   5.  * full listing of individual contributors.  

   6.  *  

   7.  * This is free software; you can redistribute it and/or modify it  

   8.  * under the terms of the GNU Lesser General Public License as  

   9.  * published by the Free Software Foundation; either version 3 of  

  10.  * the License, or (at your option) any later version.  

  11.  *  

  12.  * This software is distributed in the hope that it will be useful,  

  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of  

  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU  

  15.  * Lesser General Public License for more details.  

  16.  *  

  17.  * You should have received a copy of the GNU Lesser General Public  

  18.  * License along with this software; if not, write to the Free  

  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  

  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.  

  21.  */  

  22.    

  23.   

  24. package com.gwtext.tutorials.client;  

  25.   

  26. import com.google.gwt.core.client.EntryPoint;  

  27. import com.google.gwt.user.client.ui.RootPanel;  

  28. import com.gwtext.client.core.EventObject;  

  29. import com.gwtext.client.widgets.Button;  

  30. import com.gwtext.client.widgets.Panel;  

  31. import com.gwtext.client.widgets.Toolbar;  

  32. import com.gwtext.client.widgets.ToolbarButton;  

  33. import com.gwtext.client.widgets.event.ButtonListenerAdapter;  

  34. import com.gwtext.client.widgets.layout.CardLayout;  

  35.   

  36. public class Tutorials implements EntryPoint {  

  37.   

  38.     public void onModuleLoad() {  

  39.         Panel panel = new Panel();  

  40.         panel.setBorder(false);  

  41.         panel.setPaddings(15);  

  42.   

  43.         final Panel wizardPanel = new Panel();  

  44.         wizardPanel.setHeight(250);  

  45.         wizardPanel.setWidth(350);  

  46.         wizardPanel.setTitle("Example Wizard");  

  47.         wizardPanel.setLayout(new CardLayout());  

  48.         wizardPanel.setActiveItem(0);  

  49.         wizardPanel.setPaddings(15);  

  50.   

  51.         ButtonListenerAdapter listener = new ButtonListenerAdapter() {  

  52.             public void onClick(Button button, EventObject e) {  

  53.                 String btnID = button.getId();  

  54.                 CardLayout cardLayout = (CardLayout) wizardPanel.getLayout();  

  55.                 String panelID = cardLayout.getActiveItem().getId();  

  56.   

  57.                 if (btnID.equals("move-prev")) {  

  58.                     if (panelID.equals("card-3")) {  

  59.                         cardLayout.setActiveItem(1);  

  60.                     } else {  

  61.                         cardLayout.setActiveItem(0);  

  62.                     }  

  63.                 } else {  

  64.   

  65.                     if (panelID.equals("card-1")) {  

  66.                         cardLayout.setActiveItem(1);  

  67.                     } else {  

  68.                         cardLayout.setActiveItem(2);  

  69.                     }  

  70.                 }  

  71.             }  

  72.         };  

  73.   

  74.         Toolbar toolbar = new Toolbar();  

  75.   

  76.         ToolbarButton backButton = new ToolbarButton("Back", listener);  

  77.         backButton.setId("move-prev");  

  78.         toolbar.addButton(backButton);  

  79.         toolbar.addFill();  

  80.   

  81.         ToolbarButton nextButton = new ToolbarButton("Next", listener);  

  82.         nextButton.setId("move-next");  

  83.         toolbar.addButton(nextButton);  

  84.   

  85.         wizardPanel.setBottomToolbar(toolbar);  

  86.   

  87.         Panel first = new Panel();  

  88.         first.setBorder(false);  

  89.         first.setId("card-1");  

  90.         first.setHtml("<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>");  

  91.   

  92.         Panel second = new Panel();  

  93.         second.setBorder(false);  

  94.         second.setId("card-2");  

  95.         second.setHtml("<p>Step 2 of 3</p>");  

  96.   

  97.         Panel third = new Panel();  

  98.         third.setBorder(false);  

  99.         third.setId("card-3");  

 100.         third.setHtml("<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>");  

 101.   

 102.         wizardPanel.add(first);  

 103.         wizardPanel.add(second);  

 104.         wizardPanel.add(third);  

 105.   

 106.         panel.add(wizardPanel);  

 107.   

 108.         RootPanel.get().add(panel);  

 109.     }  

 110. }  



/* * GWT-Ext Widget Library * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated * by the @authors tag. See the copyright.txt in the distribution for a * full listing of individual contributors. * * This is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as * published by the Free Software Foundation; either version 3 of * the License, or (at your option) any later version. * * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this software; if not, write to the Free * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ package com.gwtext.tutorials.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; import com.gwtext.client.core.EventObject; import com.gwtext.client.widgets.Button; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.Toolbar; import com.gwtext.client.widgets.ToolbarButton; import com.gwtext.client.widgets.event.ButtonListenerAdapter; import com.gwtext.client.widgets.layout.CardLayout; public class Tutorials implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); final Panel wizardPanel = new Panel(); wizardPanel.setHeight(250); wizardPanel.setWidth(350); wizardPanel.setTitle("Example Wizard"); wizardPanel.setLayout(new CardLayout()); wizardPanel.setActiveItem(0); wizardPanel.setPaddings(15); ButtonListenerAdapter listener = new ButtonListenerAdapter() { public void onClick(Button button, EventObject e) { String btnID = button.getId(); CardLayout cardLayout = (CardLayout) wizardPanel.getLayout(); String panelID = cardLayout.getActiveItem().getId(); if (btnID.equals("move-prev")) { if (panelID.equals("card-3")) { cardLayout.setActiveItem(1); } else { cardLayout.setActiveItem(0); } } else { if (panelID.equals("card-1")) { cardLayout.setActiveItem(1); } else { cardLayout.setActiveItem(2); } } } }; Toolbar toolbar = new Toolbar(); ToolbarButton backButton = new ToolbarButton("Back", listener); backButton.setId("move-prev"); toolbar.addButton(backButton); toolbar.addFill(); ToolbarButton nextButton = new ToolbarButton("Next", listener); nextButton.setId("move-next"); toolbar.addButton(nextButton); wizardPanel.setBottomToolbar(toolbar); Panel first = new Panel(); first.setBorder(false); first.setId("card-1"); first.setHtml("<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>"); Panel second = new Panel(); second.setBorder(false); second.setId("card-2"); second.setHtml("<p>Step 2 of 3</p>"); Panel third = new Panel(); third.setBorder(false); third.setId("card-3"); third.setHtml("<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>"); wizardPanel.add(first); wizardPanel.add(second); wizardPanel.add(third); panel.add(wizardPanel); RootPanel.get().add(panel); } } 

8： RowLayout

   1. /* 

   2.  * GWT-Ext Widget Library 

   3.  * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated 

   4.  * by the @authors tag. See the copyright.txt in the distribution for a 

   5.  * full listing of individual contributors. 

   6.  * 

   7.  * This is free software; you can redistribute it and/or modify it 

   8.  * under the terms of the GNU Lesser General Public License as 

   9.  * published by the Free Software Foundation; either version 3 of 

  10.  * the License, or (at your option) any later version. 

  11.  * 

  12.  * This software is distributed in the hope that it will be useful, 

  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of 

  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 

  15.  * Lesser General Public License for more details. 

  16.  * 

  17.  * You should have received a copy of the GNU Lesser General Public 

  18.  * License along with this software; if not, write to the Free 

  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 

  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org. 

  21.  */  

  22.    

  23.       

  24. import com.google.gwt.core.client.EntryPoint;  

  25. import com.gwtext.client.core.EventObject;  

  26. import com.gwtext.client.widgets.*;  

  27. import com.gwtext.client.widgets.event.ButtonListenerAdapter;  

  28. import com.gwtext.client.widgets.layout.FitLayout;  

  29. import com.gwtext.client.widgets.layout.RowLayout;  

  30. import com.gwtext.client.widgets.layout.RowLayoutData;  

  31.   

  32. public class RowLayoutSample implements EntryPoint {  

  33.   

  34.     public void onModuleLoad() {  

  35.         Panel panel = new Panel();  

  36.         panel.setBorder(false);  

  37.         panel.setPaddings(15);  

  38.   

  39.         panel.setLayout(new FitLayout());  

  40.   

  41.         final Panel wrapperPanel = new Panel();  

  42.         wrapperPanel.setLayout(new RowLayout());  

  43.         wrapperPanel.setBorder(true);  

  44.         wrapperPanel.setBodyStyle("border-style:dotted;border-color:blue;");  

  45.   

  46.         Panel firstPanel = new Panel();  

  47.         firstPanel.setTitle("My Height is 75px");  

  48.         firstPanel.setClosable(true);  

  49.   

  50.         final Button removeGreedyButton = new Button("Remove Greedy Panel", new ButtonListenerAdapter() {  

  51.             public void onClick(Button button, EventObject e) {  

  52.                 wrapperPanel.remove("greedy");  

  53.                 button.disable();  

  54.             }  

  55.         });  

  56.   

  57.         final Button showHideButton = new Button("Show / Hide Bottom Panel", new ButtonListenerAdapter() {  

  58.             public void onClick(Button button, EventObject e) {  

  59.                 Component b = ComponentMgr.getComponent("bottom");  

  60.                 b.setVisible(!b.isVisible());  

  61.             }  

  62.         });  

  63.         firstPanel.add(showHideButton);  

  64.         firstPanel.add(removeGreedyButton);  

  65.   

  66.         wrapperPanel.add(firstPanel, new RowLayoutData(75));  

  67.   

  68.         Panel secondPanel = new Panel();  

  69.         secondPanel.setTitle("I will take half of the free space!");  

  70.         secondPanel.setHtml(" I am greedy <br><br><br><br><br><br><br>" +  

  71.                 "<br><br><br><br><br><br><br><br><br><br><br>...");  

  72.         secondPanel.setId("greedy");  

  73.         secondPanel.setCollapsible(true);  

  74.         secondPanel.setAutoScroll(true);  

  75.         secondPanel.setBodyStyle("margin-bottom:10px");  

  76.   

  77.         wrapperPanel.add(secondPanel, new RowLayoutData("50%"));  

  78.   

  79.         Panel third = new Panel();  

  80.         third.setTitle("I'll take some too");  

  81.         third.setHtml("..if you don't mind. I don't have a <tt>height</tt> " +  

  82.                 "in the config.<br>Btw, you can resize me!<br><br><br><br>" +  

  83.                 "<br><br><br><br><br><br><br><br><br><br><br><br><br><br>...");  

  84.         third.setId("panel3");  

  85.         third.setAutoScroll(true);  

  86.         wrapperPanel.add(third);  

  87.   

  88.         Panel fourth = new Panel();  

  89.         fourth.setId("slider");  

  90.         wrapperPanel.add(fourth, new RowLayoutData(5));  

  91.   

  92.         Panel fifth = new Panel();  

  93.         fifth.setTitle("Let me settle too");  

  94.         fifth.setHtml("Since there are two of us without <tt>height</tt> given, " +  

  95.                 "each will take 1/2 of the unallocated space (which is 50%), " +  

  96.                 "that's why my height initially is 25%.<br><br><br><br><br>" +  

  97.                 "<br><br><br><br><br><br><br><br><br><br><br><br><br>...");  

  98.         fifth.setAutoScroll(true);  

  99.         wrapperPanel.add(fifth);  

 100.   

 101.         Panel sixth = new Panel();  

 102.         sixth.setTitle("I'm the panel with height in pixels too");  

 103.         sixth.setHtml("Nothing special, 60px panel");  

 104.         sixth.setId("bottom");  

 105.         wrapperPanel.add(sixth, new RowLayoutData(60));  

 106.   

 107.         panel.add(wrapperPanel);  

 108.   

 109.         Viewport viewport = new Viewport(panel);  

 110.     }  

 111. }  



/* * GWT-Ext Widget Library * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated * by the @authors tag. See the copyright.txt in the distribution for a * full listing of individual contributors. * * This is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License as * published by the Free Software Foundation; either version 3 of * the License, or (at your option) any later version. * * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public * License along with this software; if not, write to the Free * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ import com.google.gwt.core.client.EntryPoint; import com.gwtext.client.core.EventObject; import com.gwtext.client.widgets.*; import com.gwtext.client.widgets.event.ButtonListenerAdapter; import com.gwtext.client.widgets.layout.FitLayout; import com.gwtext.client.widgets.layout.RowLayout; import com.gwtext.client.widgets.layout.RowLayoutData; public class RowLayoutSample implements EntryPoint { public void onModuleLoad() { Panel panel = new Panel(); panel.setBorder(false); panel.setPaddings(15); panel.setLayout(new FitLayout()); final Panel wrapperPanel = new Panel(); wrapperPanel.setLayout(new RowLayout()); wrapperPanel.setBorder(true); wrapperPanel.setBodyStyle("border-style:dotted;border-color:blue;"); Panel firstPanel = new Panel(); firstPanel.setTitle("My Height is 75px"); firstPanel.setClosable(true); final Button removeGreedyButton = new Button("Remove Greedy Panel", new ButtonListenerAdapter() { public void onClick(Button button, EventObject e) { wrapperPanel.remove("greedy"); button.disable(); } }); final Button showHideButton = new Button("Show / Hide Bottom Panel", new ButtonListenerAdapter() { public void onClick(Button button, EventObject e) { Component b = ComponentMgr.getComponent("bottom"); b.setVisible(!b.isVisible()); } }); firstPanel.add(showHideButton); firstPanel.add(removeGreedyButton); wrapperPanel.add(firstPanel, new RowLayoutData(75)); Panel secondPanel = new Panel(); secondPanel.setTitle("I will take half of the free space!"); secondPanel.setHtml(" I am greedy <br><br><br><br><br><br><br>" + "<br><br><br><br><br><br><br><br><br><br><br>..."); secondPanel.setId("greedy"); secondPanel.setCollapsible(true); secondPanel.setAutoScroll(true); secondPanel.setBodyStyle("margin-bottom:10px"); wrapperPanel.add(secondPanel, new RowLayoutData("50%")); Panel third = new Panel(); third.setTitle("I'll take some too"); third.setHtml("..if you don't mind. I don't have a <tt>height</tt> " + "in the config.<br>Btw, you can resize me!<br><br><br><br>" + "<br><br><br><br><br><br><br><br><br><br><br><br><br><br>..."); third.setId("panel3"); third.setAutoScroll(true); wrapperPanel.add(third); Panel fourth = new Panel(); fourth.setId("slider"); wrapperPanel.add(fourth, new RowLayoutData(5)); Panel fifth = new Panel(); fifth.setTitle("Let me settle too"); fifth.setHtml("Since there are two of us without <tt>height</tt> given, " + "each will take 1/2 of the unallocated space (which is 50%), " + "that's why my height initially is 25%.<br><br><br><br><br>" + "<br><br><br><br><br><br><br><br><br><br><br><br><br>..."); fifth.setAutoScroll(true); wrapperPanel.add(fifth); Panel sixth = new Panel(); sixth.setTitle("I'm the panel with height in pixels too"); sixth.setHtml("Nothing special, 60px panel"); sixth.setId("bottom"); wrapperPanel.add(sixth, new RowLayoutData(60)); panel.add(wrapperPanel); Viewport viewport = new Viewport(panel); } }