PDA

View Full Version : [SOLVED] Grid auto fit



valery.stroeder
20 Nov 2009, 7:49 AM
Hello Everybody,

I'm using a rowEditorGrid, the source is there : http://www.extjs.com/examples/pages/grid/roweditor.html (http://www.extjs.com/forum/../examples/pages/grid/roweditor.html)

Component works fine, you could see it in the attached file named sized.png

The problem is that the component size is defined



foodPanel = new ContentPanel();
foodPanel.setIcon(MyIcons.ICONS.table());
foodPanel.setHeading("Foods' list");
foodPanel.setFrame(true);
foodPanel.setSize(600, 300);
foodPanel.setLayout(new FitLayout());
and each table's column has a pre-defined size too



ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Common Name");
column.setWidth(220);
Thus my goal is to have the same component but without static size. It would take the panel's size.
I tried with some



foodPanel.setSize("100%","100%");
or


foodPanel.setLayout(new FitLayout());
or


foodPanel.setSize(super.getWidth(), super.getHeigth);
Result was never good, you could take a look at the attached file named large.png and you'll see that if the component take 100% width, heigth is too large and grid is not the good size and the columns headers disappear untill I click to the add button...

Help me :)

Arno.Nyhm
20 Nov 2009, 8:15 AM
your menu icons also not rendered right. did you are double check if the css and the resources is from the same gxt package you use?

valery.stroeder
23 Nov 2009, 12:24 AM
For the menu icons, I added manually these icons. They don't appear properly only with the hosted mode. When the application is deployed there is no problem with the icons. But the layout's grid problem still occur..

campersau1
23 Nov 2009, 12:54 AM
Maybe you are looking for:

grid.getView().setForceFit(true);

valery.stroeder
23 Nov 2009, 1:44 AM
Thank you for your answer, it solves the problem. My panel and grid are auto-sized regarding their container panel except the height.
To adjust the height I used :

foodPanel.setHeight(CRC.mainPanel.getCenter().getHeight()-2);
(-2 to don't have scrollbars)


Thus to have an auto fitable panel using the demo sample grid I


don't remove the columns' size


...
column.setWidth(130);
...

remove the panel size



foodPanel = new ContentPanel();
foodPanel.setIcon(MyIcons.ICONS.table());
foodPanel.setHeading("Foods' list");
foodPanel.setFrame(true);
foodPanel.setHeight(CRC.mainPanel.getCenter().getHeight()-2);
foodPanel.setLayout(new FitLayout());


set the autoforcefit property to true



final RowEditor<Food> re = new RowEditor<Food>();
final Grid<Food> grid = new Grid<Food>(store, cm);
grid.setBorders(true);
grid.addPlugin(checkColumn);
grid.addPlugin(re);
grid.getView().setForceFit(true);
foodPanel.add(grid);

Crash Override
29 Oct 2010, 3:43 AM
Thank you for your answer, it solves the problem. My panel and grid are auto-sized regarding their container panel except the height.
To adjust the height I used :

foodPanel.setHeight(CRC.mainPanel.getCenter().getHeight()-2);(-2 to don't have scrollbars)


Thus to have an auto fitable panel using the demo sample grid I



don't remove the columns' size



...
column.setWidth(130);
...

remove the panel size




foodPanel = new ContentPanel();
foodPanel.setIcon(MyIcons.ICONS.table());
foodPanel.setHeading("Foods' list");
foodPanel.setFrame(true);
foodPanel.setHeight(CRC.mainPanel.getCenter().getHeight()-2);
foodPanel.setLayout(new FitLayout());


set the autoforcefit property to true




final RowEditor<Food> re = new RowEditor<Food>();
final Grid<Food> grid = new Grid<Food>(store, cm);
grid.setBorders(true);
grid.addPlugin(checkColumn);
grid.addPlugin(re);
grid.getView().setForceFit(true);
foodPanel.add(grid);


I have the same problem, but, following your solution, they are not able to resolve the problem.
If I resize the window, as if the table is to remain fixed in place and the size of the columns does not change and thus lost the full view.
How I miss?

sven
29 Oct 2010, 3:48 AM
You should try to post your code as a standalone testcase that implements ENtryPoint and runs without any other dependencies. Than you should also explain what is not working as expected. This way you will have your answer quite soon.

Crash Override
29 Oct 2010, 5:20 AM
Good!
The solution was right!

Now work!

Thank You!

My mistake was entering the contentPanel in VBoxLayout...

sempervivo
2 Nov 2010, 2:00 AM
Thanks for the solution.

ramasamy
17 Dec 2010, 1:16 AM
/**
* Automatically adjust Grid column widths
*/

private void resizeColumns(final ListStore<BeanModel> newsStore,
final ColumnModel gridColsModel) {
if(newsStore == null || gridColsModel == null) {
return;
}
final List<ColumnConfig> colCfgs = gridColsModel.getColumns();
if (colCfgs == null) {
return;
}

newsGrid.getView().getScroller().setStyleAttribute("overflowY", "hidden");
newsGrid.getView().getScroller().setStyleAttribute("overflowX", "hidden");

final int nbRows = this.newsStore.getCount();
int panelwidth = 0;
if(nbRows > 0) {

for (int i = 0; i < colCfgs.size(); i++) {

if (colCfgs.get(i) instanceof ColumnConfig) {
final ColumnConfig cfg = (ColumnConfig) colCfgs.get(i);
int colW = cfg.getHeader().length();

for (int r = 0; r < nbRows; r++) {

final BeanModel bm = newsStore.getAt(r);
if(bm != null) {
String val = null;
if(i==0)
val = (String)bm.get("dateTime");
else
val = (String)bm.get("headline");
if (val != null && val.length() > colW) {
colW = val.length();
}
}
gridColsModel.setColumnWidth(i, colW * 6 + 20);
}
panelwidth = panelwidth + gridColsModel.getColumnWidth(i);
}

}
gripanel.setWidth(panelwidth);
}
}


this.newsStore.addStoreListener(new StoreListener<BeanModel>() {
public void storeDataChanged(StoreEvent<BeanModel> se) {
resizeColumns(newsStore, cm);
}
});