PDA

View Full Version : Resize a FieldSet when contents change



negge
5 Feb 2012, 1:03 PM
I have a Grid inside a FieldSet. On some user events, the number of items visible in the grid is changed (via a custom StoreFilter). The problem is that the FieldSet/Grid does not expand or shrink to show just the visible items in Grid. I am able to trap the user events, and the FieldSet Expand and BeforeExpand but am unsure how to force the FieldSet/Grid to redo the layout.

I have created example code that illustrates the problem. To see the problem, simply expand One and then Two, and then select SubOne. The Grid in Two now has an item in it, but it is not visible.

This is using GXT 2.2.5. Any pointers would be greatly appreciated.

Nathan



package test.client;


import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.HashSet;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;


import test.client.Test.Heading;
import test.client.Test.Item;


import com.extjs.gxt.ui.client.Style;


import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.data.BaseListLoader;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.BeanModelReader;
import com.extjs.gxt.ui.client.data.BeanModelTag;
import com.extjs.gxt.ui.client.data.ListLoadResult;
import com.extjs.gxt.ui.client.data.ListLoader;
import com.extjs.gxt.ui.client.data.MemoryProxy;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.Store;
import com.extjs.gxt.ui.client.store.StoreFilter;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Html;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.form.FieldSet;
import com.extjs.gxt.ui.client.widget.grid.CheckBoxSelectionModel;
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.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;


class TestTab extends TabItem {


@SuppressWarnings("serial")
Map<Integer,Item> items=new LinkedHashMap<Integer,Item>() {
{
put(1,new Item(1,"SubOne"));
put(2,new Item(2,"SubTwo"));
put(3,new Item(3,"SubThree"));
put(4,new Item(4,"SubFour",new HashSet<Item>(Arrays.asList(get(1)))));
put(5,new Item(5,"SubFive",new HashSet<Item>(Arrays.asList(get(1),get(2)))));
}
};


@SuppressWarnings("serial")
Map<Integer,Heading> headings=new LinkedHashMap<Integer,Heading>() {
{
put(1,new Heading(1,"One",null,Arrays.asList(items.get(1),items.get(2))));
put(2,new Heading(2,"Two",get(1),Arrays.asList(items.get(3),items.get(4),items.get(5))));
}
};


protected Map<Integer,FieldSet> fieldSets=new HashMap<Integer,FieldSet>();


public TestTab() {
setText("Test");


setLayout(new FitLayout());


LayoutContainer main=new LayoutContainer();
BorderLayout layout=new BorderLayout();
layout.setEnableState(false);
main.setLayout(layout);
add(main);


BorderLayoutData westData=new BorderLayoutData(LayoutRegion.WEST,300);
westData.setMargins(new Margins(5,0,5,5));
westData.setSplit(true);
westData.setCollapsible(true);
westData.setFloatable(false);


ContentPanel filterPanel=new ContentPanel();
filterPanel.setHeading("Selection");
filterPanel.setLayout(new FitLayout());
main.add(filterPanel,westData);


final ContentPanel filterMain=new ContentPanel();
filterMain.setScrollMode(Scroll.AUTO);
filterMain.setLayout(new RowLayout(Orientation.VERTICAL));
filterMain.setHeaderVisible(false);
filterMain.setBodyBorder(false);
filterMain.setButtonAlign(HorizontalAlignment.CENTER);
filterMain.setStyleAttribute("background","white");
filterPanel.add(filterMain);


//


BorderLayoutData centerData=new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(5));


ContentPanel gridPanel=new ContentPanel();
gridPanel.setHeaderVisible(false);
gridPanel.setLayout(new FitLayout());
main.add(gridPanel,centerData);


ContentPanel gridMain=new ContentPanel();
gridMain.setScrollMode(Scroll.AUTO);
gridMain.setLayout(new RowLayout(Orientation.VERTICAL));
gridMain.setHeaderVisible(false);
gridMain.setBodyBorder(false);
gridMain.setStyleAttribute("background","white");
gridPanel.add(gridMain);


for (final Heading heading : headings.values()) {
final FieldSet fieldSet=new FieldSet();
fieldSet.setHeading(heading.name);
fieldSet.setCollapsible(true);
fieldSet.setCheckboxToggle(true);
fieldSet.setExpanded(false);
filterMain.add(fieldSet,new RowData(1,-1,new Margins(10,30,0,10)));


CheckBoxSelectionModel<BeanModel> sm=new CheckBoxSelectionModel<BeanModel>();


List<ColumnConfig> columns=new ArrayList<ColumnConfig>();
columns.add(sm.getColumn());
columns.add(new ColumnConfig("id","ID",45));
ColumnConfig column=new ColumnConfig("name","Name",180-1);
column.setSortable(false);
column.setResizable(false);
columns.add(column);


ListLoader<ListLoadResult<Item>> loader=new BaseListLoader<ListLoadResult<Item>>(new MemoryProxy<Item>(heading.getItems()),new BeanModelReader());
final ListStore<BeanModel> store=new ListStore<BeanModel>(loader);
loader.load();


if (heading.getDependentOn()!=null) {
StoreFilter<BeanModel> filter=new StoreFilter<BeanModel>() {
public boolean select(Store<BeanModel> _store,BeanModel _parent,BeanModel _item,String _property) {
FieldSet filterFieldSet=fieldSets.get(heading.getDependentOn().getId());
if (filterFieldSet.isExpanded()) {
@SuppressWarnings("unchecked")
Grid<BeanModel> grid=(Grid<BeanModel>)filterFieldSet.getWidget(0);
Item item=_item.getBean();
for (BeanModel itemBean : grid.getSelectionModel().getSelectedItems()) {
Item tmp=itemBean.getBean();
if (item.getDependentOnItems().contains(tmp)) {
return(true);
}
}
return(false);
}
return(true);
}
};
store.addFilter(filter);
}


final Grid<BeanModel> grid=new Grid<BeanModel>(store,new ColumnModel(columns));
grid.addPlugin(sm);
grid.setBorders(true);
grid.setSelectionModel(sm);
fieldSets.put(heading.getId(),fieldSet);
grid.setAutoExpandColumn("name");
fieldSet.add(grid);


fieldSet.addListener(Events.BeforeExpand,new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
store.applyFilters(null);
}
});
fieldSet.addListener(Events.Expand,new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
grid.getView().refresh(true);
}
});


fieldSet.addListener(Events.Resize,new Listener<BaseEvent>() {
public void handleEvent(BaseEvent _be) {
if (fieldSet.isExpanded()) {
grid.getView().refresh(true);
}
}
});


grid.getSelectionModel().addSelectionChangedListener(new SelectionChangedListener<BeanModel>() {
public void selectionChanged(SelectionChangedEvent<BeanModel> _sce) {
showDependent(heading);
}
});
}
}


protected void showDependent(Heading _heading) {
for (Heading tmp : headings.values()) {
Heading dependentOn=tmp.getDependentOn();
if (dependentOn!=null&&dependentOn.getId()==_heading.getId()) {
FieldSet fieldSet=fieldSets.get(tmp.getId());
if (fieldSet.isExpanded()) {
@SuppressWarnings("unchecked")
Grid<BeanModel> grid=(Grid<BeanModel>)fieldSet.getWidget(0);
grid.getStore().applyFilters(null);
showDependent(tmp);
fieldSet.layout(true);
}
}
}
}


};


class TestViewport extends Viewport {


public TestViewport() {
BorderLayout layout=new BorderLayout();
layout.setEnableState(false);
setLayout(layout);


// header


LayoutContainer header=new LayoutContainer();
layout=new BorderLayout();
layout.setEnableState(false);
header.setLayout(layout);


BorderLayoutData data=new BorderLayoutData(Style.LayoutRegion.NORTH,24);
data.setMargins(new Margins(5,5,0,5));
add(header,data);


Html title=new Html("Test");
title.setStyleAttribute("font","normal 14pt tahoma,arial,helvetica");
header.add(title,new BorderLayoutData(Style.LayoutRegion.CENTER));


// content panel


ContentPanel content=new ContentPanel();
content.setBorders(false);
content.setHeaderVisible(false);
content.setLayout(new FitLayout());


data=new BorderLayoutData(Style.LayoutRegion.CENTER);
data.setMargins(new Margins(5,0,5,0));
add(content,data);


TabPanel tabPanel=new TabPanel();
tabPanel.setTabScroll(true);
tabPanel.setBorderStyle(false);
tabPanel.setBodyBorder(false);
content.add(tabPanel);


// footer


Html footer=new Html("Copyright &copy; 2012 Test");
footer.setStyleAttribute("font","normal 8pt tahoma,arial,helvetica");


data=new BorderLayoutData(Style.LayoutRegion.SOUTH,14);
data.setMargins(new Margins(0,5,5,5));
add(footer,data);


tabPanel.add(new TestTab());
}


};


public class Test implements EntryPoint {


public static class Item implements BeanModelTag {


Integer id;


String name;


Set<Item> dependentOnItems=new HashSet<Item>();


public Item(int _id,String _name) {
this(_id,_name,new HashSet<Item>());
}


public Item(int _id,String _name,Set<Item> _dependentOnItems) {
setId(_id);
setName(_name);
setDependentOnItems(_dependentOnItems);
}


public Integer getId() {
return(id);
}


public void setId(Integer _id) {
id=_id;
}


public String getName() {
return(name);
}


public void setName(String _name) {
name=_name;
}


public Set<Item> getDependentOnItems() {
return(dependentOnItems);
}


public void setDependentOnItems(Set<Item> _dependentOnItems) {
dependentOnItems=_dependentOnItems;
}


};


public static class Heading implements BeanModelTag {


Integer id;


String name;


Heading dependentOn;


List<Item> items=new ArrayList<Item>();


public Heading(int _id,String _name,Heading _dependentOn,List<Item> _items) {
setId(_id);
setName(_name);
setDependentOn(_dependentOn);
setItems(_items);
}


public Integer getId() {
return(id);
}


public void setId(Integer _id) {
id=_id;
}


public String getName() {
return(name);
}


public void setName(String _name) {
name=_name;
}


public Heading getDependentOn() {
return(dependentOn);
}


public void setDependentOn(Heading _dependentOn) {
dependentOn=_dependentOn;
}


public List<Item> getItems() {
return(items);
}


public void setItems(List<Item> _items) {
items=_items;
}


};


public void onModuleLoad() {
RootPanel.get().add(new TestViewport());
}


};