1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    23
    Vote Rating
    0
    steevebd is on a distinguished road

      0  

    Default Grid column width auto-resize with scroll

    Grid column width auto-resize with scroll


    Hello,

    I would like to create a Grid with this behavior (container has a fixed width) :
    - there is a column that adjust its width from its content
    - if grid width is greater than its container, then a scroll bar appear for the user to view all content

    I tried to use
    Code:
    Grid.setAutoExpandColumn
    but it seems that it disables scroll bar.

    Can you please help me on the best way to do this?

    Thanks and regards,

    Steeve

  2. #2
    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


    That should not disable the scrollbar. Do you size your grid? Can you post your code that shows what exactly you are doing?

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    23
    Vote Rating
    0
    steevebd is on a distinguished road

      0  

    Default Sample Code

    Sample Code


    Hi Sven,

    Is this part of code enough for your analysis ?
    Code:
    internat = GWT.create (InconsistenciesMessagesDialogViewInternat.class);
    
        setHeading (headerMsg != null ? headerMsg : internat.dialogTitle ());
        setHideOnButtonClick (true);
        setWidth (600);
        setHeight (400);
        setClosable (false);
        List<ColumnConfig> configs = new ArrayList<ColumnConfig> ();
    
        ColumnConfig column = new ColumnConfig ();
        column.setId (SOURCE_ID);
        column.setHeader (internat.source ());
        column.setWidth (50);
        configs.add (column);
    
        column = new ColumnConfig ();
        column.setId (TYPE_ID);
        column.setHeader (internat.type ());
        column.setWidth (25);
        column.setRenderer (new GridCellRenderer<InconsistencyMessage>() {
    
          @Override
          public Object render (InconsistencyMessage inconsistencyMessage, String property, ColumnData config, int rowIndex, int colIndex, ListStore<InconsistencyMessage> store, Grid<InconsistencyMessage> grid) {
            String style = inconsistencyMessage.getType ().equals (ERROR_TYPE) ? "red" : "orange";
            return "<span style=\"color:" + style + ";\">" + getMapping(inconsistencyMessage.getType ()) + "</span>";
          }
    
        });
        configs.add (column);
    
        column = new ColumnConfig ();
        column.setId (MESSAGE_ID);
        column.setHeader (internat.message ());
        column.setWidth (150);
        configs.add (column);
    
        store = new GroupingStore<InconsistencyMessage> ();
        store.groupBy (SOURCE_ID);
    
        final ColumnModel cm = new ColumnModel (configs);
    
        Grid<InconsistencyMessage> grid = new Grid<InconsistencyMessage> (store, cm);
        grid.setAutoExpandColumn (MESSAGE_ID);
        grid.setBorders (false);
        grid.setStripeRows (true);
        setLayout (new FitLayout ());
    
        GroupingView view = new GroupingView ();
        view.setForceFit (true);
        view.setGroupRenderer (new GridGroupRenderer() {
    
          @Override
          public String render (GroupColumnData data) {
            String f = cm.getColumnById (data.field).getHeader ();
            String l = data.models.size () == 1 ? internat.item () : internat.items ();
            String g = data.field.equals (TYPE_ID) ? getMapping (data.group) : data.group;
            return f + ": " + g + " (" + data.models.size () + " " + l + ")";
          }
        });
        grid.setView (view);
        
        add (grid);
    Thank you for your feedback,

    Steeve

  4. #4
    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


    Forcefit and autoexpand column wont work together.
    You need to remove forceFit. Than the autoexpandcolumn will expand to the remaining space.

Similar Threads

  1. Grid auto resize column widths
    By ozgur in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 29 Jul 2010, 4:15 AM
  2. Bets way to auto resize grid width without Viewport
    By drrs in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 2 Mar 2010, 1:52 PM
  3. specify grid column to *not* auto resize
    By oregontarheel in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 7 May 2007, 9:29 AM
  4. Grid - Auto-resize column-width after load
    By KimH in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 2 Mar 2007, 4:49 AM

Thread Participants: 1

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