PDA

View Full Version : Grid width problem



fother
10 Jun 2009, 6:13 AM
in explorer demo edit this class com.extjs.gxt.samples.client.examples.grid.GridExample

remove this line


cp.setSize(600, 300);


and add this line


cp.setHeight(400);


loses the ability to have a dynamic width

talking with sven and reading in bug forum I can see that now in gxt 2.0 the grid will lose this ability.. but this its bad, in all situations..

there is a way to make the grid with dynamic width?

sven
10 Jun 2009, 6:15 AM
AutoWidth in a grid was never supported before. It it worked before you were lucky ;)

fother
10 Jun 2009, 6:22 AM
:))

but there is no way to do this?
neither using HBoxLayout?

fother
10 Jun 2009, 6:24 AM
this version seems strange not think that the user may have screens of different resolutions, and this feature is very important (autowidth) to be working properly for different screen resolutions. There is prospect of including this feature again in the scope of the project?

sven
10 Jun 2009, 6:33 AM
This autowidth was never supported before in grids. You can use layouts that manage grid sizes also with different screen resolutions.

fother
10 Jun 2009, 6:43 AM
This autowidth was never supported before in grids.
ok


You can use layouts that manage grid sizes also with different screen resolutions.

what its this layout that I can manage grid sizes?

sven
10 Jun 2009, 6:45 AM
All layouts beside flowlayout are managing sizes. You need to pick the one that is correct for your situation.

fother
10 Jun 2009, 7:07 AM
Im using hosted mode win vista

to see the "problem" maximize the browser, reload the page and minimize

if you could help me :D

Code Example


public void onModuleLoad() {

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Company");
column.setWidth(200);
configs.add(column);

column = new ColumnConfig();
column.setId("symbol");
column.setHeader("Symbol");
column.setWidth(100);
configs.add(column);

column = new ColumnConfig();
column.setId("last");
column.setHeader("Last");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(75);
configs.add(column);

column = new ColumnConfig("change", "Change", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
configs.add(column);

column = new ColumnConfig("date", "Last Updated", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());
configs.add(column);

ListStore<Stock> store = new ListStore<Stock>();
store.add(TestData.getStocks());

ColumnModel cm = new ColumnModel(configs);

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Basic Grid");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setHeight(400);

Grid<Stock> grid = new Grid<Stock>(store, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
cp.add(grid);

TabItem tabItem = new TabItem();
tabItem.add(cp);
tabItem.setText("Test");
tabItem.setLayout(new FitLayout());

TabPanel tabPanel = new TabPanel();
tabPanel.add(tabItem);

RootPanel.get().add(tabPanel);
}

sven
10 Jun 2009, 7:12 AM
Add a viewport to the rootpanel. Give the viewport a fitlayout and put the tabpanel inside the viewport.

fother
10 Jun 2009, 8:25 AM
with this code work fine =D> (thanks) :D

buuuuuuuuuuuuuuut have more one problem
the height of the ContentPanel always have 100%



public void onModuleLoad() {

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Company");
column.setWidth(200);
configs.add(column);

column = new ColumnConfig();
column.setId("symbol");
column.setHeader("Symbol");
column.setWidth(100);
configs.add(column);

column = new ColumnConfig();
column.setId("last");
column.setHeader("Last");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(75);
configs.add(column);

column = new ColumnConfig("change", "Change", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
configs.add(column);

column = new ColumnConfig("date", "Last Updated", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());
configs.add(column);

ListStore<Stock> store = new ListStore<Stock>();
store.add(TestData.getStocks());

ColumnModel cm = new ColumnModel(configs);

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Basic Grid");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setHeight(400);

Grid<Stock> grid = new Grid<Stock>(store, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
cp.add(grid);

TabItem tabItem = new TabItem();
tabItem.add(cp);
tabItem.setText("Test");
tabItem.setStyleAttribute("padding", "10px");
tabItem.setScrollMode(Scroll.AUTO);
tabItem.setLayout(new FitLayout());

TabPanel tabPanel = new TabPanel();
tabPanel.add(tabItem);
tabPanel.setStyleAttribute("padding", "10px");

Viewport view = new Viewport();
view.setLayout(new FitLayout());
view.add(tabPanel);

RootPanel.get().add(view);
}

sven
10 Jun 2009, 8:27 AM
You tell it to ahve it always 100% as height. As you are using a FitLayout in that TabItem

fother
10 Jun 2009, 8:34 AM
You tell it to ahve it always 100% as height. As you are using a FitLayout in that TabItem

no... always have 100% width.. the height should be 400px ;)

sven
10 Jun 2009, 8:37 AM
Than you can use RowLayout for example.

fother
10 Jun 2009, 8:49 AM
I tried:


ContentPanel - RowLayout
TabItem - FitLayout
Viewport - FitLayout

dont work


ContentPanel - FitLayout
TabItem - RowLayout
Viewport - FitLayout

dont work


ContentPanel - FitLayout
TabItem - FitLayout
Viewport - RowLayout

dont work


ContentPanel - RowLayout
TabItem - RowLayout
Viewport - RowLayout

dont work

sven
10 Jun 2009, 8:54 AM
You have to use RowLayout with correct RowData.

fother
10 Jun 2009, 9:01 AM
finally work fine :D
thanks

code example


public void onModuleLoad() {

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Company");
column.setWidth(200);
configs.add(column);

column = new ColumnConfig();
column.setId("symbol");
column.setHeader("Symbol");
column.setWidth(100);
configs.add(column);

column = new ColumnConfig();
column.setId("last");
column.setHeader("Last");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(75);
configs.add(column);

column = new ColumnConfig("change", "Change", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
configs.add(column);

column = new ColumnConfig("date", "Last Updated", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());
configs.add(column);

ListStore<Stock> store = new ListStore<Stock>();
store.add(TestData.getStocks());

ColumnModel cm = new ColumnModel(configs);

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Basic Grid");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setHeight(400);

Grid<Stock> grid = new Grid<Stock>(store, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
cp.add(grid);

TabItem tabItem = new TabItem();
tabItem.add(cp, new RowData(1, 400));
tabItem.setText("Test");
tabItem.setStyleAttribute("padding", "10px");
tabItem.setScrollMode(Scroll.AUTO);
tabItem.setLayout(new RowLayout());

TabPanel tabPanel = new TabPanel();
tabPanel.add(tabItem);
tabPanel.setStyleAttribute("padding", "10px");

Viewport view = new Viewport();
view.setLayout(new FitLayout());
view.add(tabPanel);

RootPanel.get().add(view);
}

fother
10 Jun 2009, 9:12 AM
other way.. if I add



new Resizable(cp, "s");


the screen NOT broken, but I cannot resize the content panel..

fother
10 Jun 2009, 9:14 AM
forget work fine :D

fother
10 Jun 2009, 9:36 AM
now if you resizable ("s") more than the screen will appears a scrool bar - ok

the scrool bar X appears too (look the atchament)
have possible that the content ajust for dont appears the scroll bar X, only the scrool bar Y?

I`m using the code example with



new Resizable(cp, "s");