1. #1
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
    Nico33 is on a distinguished road

      0  

    Default Problem with Layout

    Problem with Layout


    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 :

    Code:
    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
    Code:
    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);  
      }  
    }
    Code:
    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.

  2. #2
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
    Nico33 is on a distinguished road

      0  

    Default


    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.

  3. #3
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,966
    Vote Rating
    130
    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


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

  4. #4
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
    Nico33 is on a distinguished road

      0  

    Default


    Thanks Sven, You gave me hope again

    I tried

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

  5. #5
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,966
    Vote Rating
    130
    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


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


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

  6. #6
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
    Nico33 is on a distinguished road

      0  

    Thumbs up


    oh great !!

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

    Best regards

    Nico

  7. #7
    Ext User
    Join Date
    Dec 2008
    Posts
    31
    Vote Rating
    0
    janekdb is on a distinguished road

      0  

    Default


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

    How about making this into an Explorer example?

  8. #8
    Ext User
    Join Date
    Jan 2010
    Posts
    2
    Vote Rating
    0
    skumarb is on a distinguished road

      0  

    Default layout problem

    layout problem


    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' });
    }
    }
    });

Thread Participants: 3

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar