1. #1
    Sencha User
    Join Date
    Mar 2009
    Posts
    43
    Vote Rating
    0
    cgokey2 is on a distinguished road

      0  

    Default How do I get a horizontal scrollbar to appear in my grid?

    How do I get a horizontal scrollbar to appear in my grid?


    Sorry for double posting. I realized after the fact that me posting this question in "Open Discussion" was the wrong spot.

    Can someone please take a look at this code and help me add a horizontal scroll bar to the Window for the grid? What I'm after is for each column in my grid to auto expand to the length of the largest column value and whatever doesn't fit in my fixed width grid to be accessible via the horizontal scroll bar.

    See code below.

    Thanks,
    Chris

    Code:
    package gov.nasa.gsfc.gcmd.client;
    
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.extjs.gxt.ui.client.widget.Text;
    import com.extjs.gxt.ui.client.widget.Window;
    import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
    import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
    import com.extjs.gxt.ui.client.widget.grid.Grid;
    import com.extjs.gxt.ui.client.widget.layout.FitLayout;
    import com.extjs.gxt.ui.client.store.ListStore;
    import com.extjs.gxt.ui.client.data.BaseModel;
    
    import java.util.List;
    import java.util.ArrayList;
    
    /**
     * Entry point classes define <code>onModuleLoad()</code>.
     */
    public class Test implements EntryPoint
    {
        public void onModuleLoad() {
    
            RootPanel.get().add(new Text("My Test"));
            Window w = createLogWindow();
            w.show();
        }
    
        public Window createLogWindow() {
    
            Window w = new Window();
            w.setCloseAction(Window.CloseAction.CLOSE);
            w.setIconStyle("icon-grid");
            w.setMinimizable(true);
            w.setMaximizable(true);
            w.setHeading("Log");
            w.setSize(650, 300);
            w.setLayout(new FitLayout());
    
            List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
            columns.add(new ColumnConfig("timestamp", "Timestamp", 75));
            columns.add(new ColumnConfig("ip", "IP", 75));
            columns.add(new ColumnConfig("action", "Action", 100));
            columns.add(new ColumnConfig("change", "Changes", 400));
    
            ColumnModel cm = new ColumnModel(columns);
    
            final ListStore<Log> store = new ListStore<Log>();
    
            Grid grid = new Grid(store, cm);
            grid.setStyleAttribute("borderTop", "none");
            grid.setAutoExpandColumn("change");
            grid.setBorders(true);
    
            w.add(grid);
    
            store.add(new Log("1/1/09","127.0.0.1","move","this is a realy long column to push the column outside the window and hopefully see a horizontal scroll bar"));
            store.add(new Log("1/2/09","127.0.0.1","copy","this is a realy long column to push the column outside the window and hopefully see a horizontal scroll bar"));
            store.add(new Log("1/3/09","127.0.0.1","delete","this is a realy long column to push the column outside the window and hopefully see a horizontal scroll bar"));
            store.add(new Log("1/4/09","127.0.0.1","rename","this is a realy long column to push the column outside the window and hopefully see a horizontal scroll bar"));
            store.add(new Log("1/5/09","127.0.0.1","copy","this is a realy long column to push the column outside the window and hopefully see a horizontal scroll bar"));
            store.add(new Log("1/6/09","127.0.0.1","cut","this is a realy long column to push the column outside the window and hopefully see a horizontal scroll bar"));
            store.add(new Log("1/7/09","127.0.0.1","paste","this is a realy long column to push the column outside the window and hopefully see a horizontal scroll bar"));
    
            return w;
    
        }
        
        
    }
    class Log extends BaseModel {
        public Log(String dateTime, String ip, String action, String change) {
            set("timestamp", dateTime);
            set("ip", ip);
            set("action", action);
            set("change", change);
        }
    }

  2. #2
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    gslender is on a distinguished road

      0  

    Default


    Turn setAutoExpandColumn off and set the column to the width you think you'll need. If you want this to be done based off the cell contents, you'll need to add a cellrender and calculate an estimated column width and adjust the columns as needed.

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Posts
    43
    Vote Rating
    0
    cgokey2 is on a distinguished road

      0  

    Default


    Thanks Grant. Your suggestion worked perfectly. In my case, I could actually size the columns manually and make them large enough through fixed size columns.

    If come across a case where they need to be resized automatically (e.g., custom cell renderer) than I'll cross that bridge then or maybe there will be something in the API by then

    Thanks again!
    Chris

Thread Participants: 1