Problem with Layout

[Nico33]

Hi all,
I have problem with the layouts.

this is what I would like to do :

• A tabpanel containing 2 items
• The first item should have
  • a toolbar in the top of the tabitem (fixed size)
  • a grid (take the whole remaining place)

I tried with :

public class TestApp implements EntryPoint 
{
    public void onModuleLoad() 
    {
        TabPanel tabPanel = new TabPanel();
        tabPanel.add(CreateTabItem1());
        tabPanel.add(CreateTabItem2());

        Viewport viewport = new Viewport();
        viewport.setLayout(new AnchorLayout());
        viewport.add(tabPanel, new AnchorData("100% 100%", new Margins(10)));
        RootPanel.get().add(viewport);
    }

    private TabItem CreateTabItem1()
    {
        TabItem tab = new TabItem("First");
        
        LayoutContainer container = new LayoutContainer();
        container.setBorders(true);
        container.setLayout(new FitLayout());
        
        container.add(new ToolbarExample());
        container.add(new GroupingGridExample());
        tab.add(container);
        tab.setLayout(new FitLayout());
        return tab;
    }

    private TabItem CreateTabItem2()
    {
        TabItem tab = new TabItem("Second");
        tab.setLayout(new FitLayout());
        return tab;
    }
}

and

public class ToolbarExample extends LayoutContainer 
{  
  
  @Override  
  protected void onRender(Element parent, int pos) {  
    super.onRender(parent, pos);  
    setLayout(new FlowLayout(10));  
  
    ToolBar toolBar = new ToolBar();  
  
    Button button = new Button("Click");  
    toolBar.add(button);  
    toolBar.add(new SeparatorToolItem());  
 
    add(toolBar);  
  }  
}

public class GroupingGridExample extends LayoutContainer
{
    public GroupingGridExample()
    {
    }
  
  @Override  
  protected void onRender(Element parent, int index) {  
    super.onRender(parent, index);  
  
    setLayout(new FitLayout());

    GroupingStore<Person> store = new GroupingStore<Person>(); 
    store.add(GetPerson());  
    store.groupBy("Sex");  
   
    final ColumnModel cm = new ColumnModel(GetCollumnConfig());  
  
    GroupingView view = new GroupingView();  
    view.setShowGroupedColumn(false);  
    view.setForceFit(true);  
  
    Grid<Person> grid = new Grid<Person>(store, cm);  
    grid.setView(view);
    grid.setBorders(true);
    //grid.setAutoHeight(true);
  
    ContentPanel panel = new ContentPanel();  
    panel.setHeading("My Grid");  
    panel.setCollapsible(true);  
    panel.setFrame(true);
    panel.setLayout(new FitLayout());  
    panel.add(grid);

    add(panel); 
  }

  private List<ColumnConfig> GetCollumnConfig()
  {
      ColumnConfig sex = new ColumnConfig("Sex", "Sex", 20);  
      ColumnConfig name = new ColumnConfig("Name", "Name", 20);  
      ColumnConfig age = new ColumnConfig("Age", "Age", 20);  
      
      List<ColumnConfig> config = new ArrayList<ColumnConfig>();  
      config.add(sex);  
      config.add(name);  
      config.add(age);
      return config;
  }

  private List<Person> GetPerson() 
  {
      List<Person> persons = new ArrayList<Person>();
      for (int j = 0 ; j < 4 ; j++)
          for (int i = 0 ; i < 10 ; i++)
              persons.add(new Person("Test" + i, i, j));
      return persons;
  }
}

I thought that the LayoutContainer will be the best choice to contain the toolbar and the grid.
I tried with a VerticalPanel too.

But I can never achieve to make it layout as I expect.

Can you tell me what's wrong ?

Thanks in advance for any help.

[Nico33]

I thought the layout system could really help to make something like this.

But it's really hard. That's 3 days I tried many things, but nothing is working.

I'll be very happy if someone can unblock me.

Many thanks in advance for any help.

[sven]

container.setLayout(new FitLayout());
        
        container.add(new ToolbarExample());
        container.add(new GroupingGridExample());

Here is your first issue. A FitLayout only sizes one item, not two.

[Nico33]

Thanks Sven, You gave me hope again

I tried

    private TabItem CreateTabItem1()
    {
        TabItem tab = new TabItem("First");
        
        LayoutContainer c1 = new LayoutContainer();
        c1.setLayout(new FlowLayout());
        c1.add(new ToolbarExample());
        
        LayoutContainer c2 = new LayoutContainer();
        c2.setLayout(new FitLayout());
        c2.add(new GroupingGridExample());
        
        tab.setLayout(new FlowLayout());
        tab.add(c1);
        tab.add(c2);
        return tab;
    }

but the grid is very small and doesn't take the whole width and height.

This should be a very easy issue. How to correct it ?

[sven]

A FlowLayout is also not sizing anything, so you cannot use it if oyu want something to be sized.

  private TabItem CreateTabItem1()
    {
        TabItem tab = new TabItem("First");        
        tab.setLayout(new RowLayout());
        tab.add(new ToolbarExample(),new RowData(1,-1));
        tab.add(new GroupingGridExample(),new RowData(1,1));
        return tab;
    }

[Nico33]

oh great !!

Thanks a lot for your help.
You should ask your boss for a pay increase for working on sunday

Best regards

Nico

[janekdb]

After reading this post I was able to solve my (similar) problem immediately.

How about making this into an Explorer example?

[skumarb]

i have problem with layout it is giving scroll bar

/**
* Auraria(R) Networks
* Copyright(C) 2007-2008 Auraria Networks, Inc.
* All Rights Reserved
*
*/
Ext.ns('SaveDocumentToDialog');

SaveDocumentToDialog = Ext.extend(Ext.Window, {


// override
initComponent : function() {
this.viewManager = Seam.Component.getInstance("ViewManager");

this.formPanel = this.createFormPanel();

Ext.apply(this, {
width:450
,height:300
,layout:"fit"
,title : "Save documents to" //this.selectedContext.caller
,resizable: false
,modal:true
,defaultButton: 0
,items:this.formPanel
});

// finally call the superclasses implementation
SaveDocumentToDialog.superclass.initComponent.call(this);
this.addButton(ECA._localeStrObj.ProfileSummary_newButton, function() {
this.profileDialog = new ProfileDialog.CreateProfileDialog({callerContext:"Others"});
this.profileDialog.on('close', this.onCloseProfileDialog, this);
this.profileDialog.show();
}, this);

this.addButton(ECA._localeStrObj.CreateProject_okBtn, function() {

var node = this.searchBrowseTree.getSelectionModel().getSelectedNode();
var request = new Seam.Remoting.createType("com.digitalreefinc.ws.AddFromDocumentsRequestMessage");
request.srcDocumentHandleList = this.selections;
request.setDestViewHandle(node.attributes.viewHandle);
ECA.viewManager.addFromDocuments(request);
this.close();
}, this);


this.addButton("Cancel", function() {
this.close();
}, this);

},

onCloseProfileDialog: function() {
this.loadData(this);
this.searchBrowseTree.expandPath(this.rootNode);

},

createFormPanel: function(){

this.sysMgmtTreeLoader = new Ext.tree.TreeLoader({
directFn: this.loadData.createDelegate(this)

});

this.searchBrowseTree = new Ext.tree.TreePanel({
border : false,
header : false,
loader : this.sysMgmtTreeLoader,
flex : 1,
scope: this,
rootVisible: false,

root: {
id: 'root',
expanded : true,
nodeType: 'async',
text: 'The Root',
draggable: false
}
});
this.centerPanel = new Ext.Panel({
width : 300,
height : 250,
autoScroll : true,
region: 'center',
items : this.searchBrowseTree
});

this.westPanel = new Ext.Panel({
width : 150,
height : 300,
region: 'west',
items : new Ext.form.Label({
fieldLabel: '<b>' + ECA._localeStrObj.SearchDuplicateDocumentDialog_target + '</b>',
name : 'target'
})
});

this.mainPanel = new Ext.Panel({
layout: 'column',
items : [this.westPanel, this.centerPanel]
})
this.searchFormPanel = new Ext.form.FormPanel({
frame: true,
layout: 'fit',
id: 'searchFormPanel',
items: this.mainPanel
});

return this.mainPanel;
},

loadData: function(nodeId, loadDelegate) {
var request = new Seam.Remoting.createType("com.digitalreefinc.eca.GetSaveDocumentToTreeRequestMessage");
request.setCaseHandle(ECA.projectId);
Seam.Component.getInstance("CaseManager").getSaveDocumentToTree(request, this.loadDataCB.createDelegate(this, [loadDelegate], true));
},

loadDataCB: function(result, junk1, junk2, loadDelegate) {
var response = Ext.util.JSON.decode(result);
if (response.error)
{

alert('Tree failed: '+response.error);
}
else
{
loadDelegate(response, { status: 'OK' });
}
}
});