PDA

View Full Version : Desktop, Window, CardLayout and Grid



mask_hot
17 Dec 2010, 7:04 AM
Hi,
I'm using the WebDesktop.
I made a layoutContainer with a cardLayout to alternate beteween a Grid and a Form (to Edit or Add grid rows).

I added my layoutContainer in a Window to use it in my desktop.
My problem is th following :
I'd like my grid to fit the window when the window is rendered and resized. The form fit well, but for the grid I don't really know how to do (except hard-coding the size ). Is there a way to figure it out?

- Window
-- LayoutContainer (CardLayout)
--- ContentPanel (FitLayout)
---- Grid
--- FormPanel

sven
17 Dec 2010, 7:28 AM
Which layout does your Window have? You need to set a FitLayout there.

Also what is the reason you have an extra layoutcontainer there? You can better give the Window the CardLayout directly

mask_hot
17 Dec 2010, 7:30 AM
- Window (FitLayout)
-- LayoutContainer (CardLayout)
--- ContentPanel (FitLayout)
---- Grid
--- FormPanel

If I do not explictly set a size for the ContentPanel, I do not see my Grid. And I do not want to set it as I'd like it to fit its parent (the window)

sven
17 Dec 2010, 7:48 AM
It should work with this. You need to size the window. Have you tried create a fully working testcase implementing ENtryPoint?

mask_hot
17 Dec 2010, 2:02 PM
It should work with this. You need to size the window. Have you tried create a fully working testcase implementing ENtryPoint?
of course I did, that's why I say it does not work :)

sven
17 Dec 2010, 6:53 PM
Than please post your testcase here.

mask_hot
18 Dec 2010, 6:21 AM
My Generic ContentPanel for a Grid


/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package org.fam.client.widget.grid;

import com.extjs.gxt.ui.client.Style.SortDir;
import com.extjs.gxt.ui.client.data.BaseFilterPagingLoadConfig;
import com.extjs.gxt.ui.client.data.BasePagingLoadConfig;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.BeanModelReader;
import com.extjs.gxt.ui.client.data.LoadEvent;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.IconButtonEvent;
import com.extjs.gxt.ui.client.event.LoadListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.StoreEvent;
import com.extjs.gxt.ui.client.store.StoreListener;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.Layout;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.ToolButton;
import com.extjs.gxt.ui.client.widget.form.LabelField;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
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.filters.DateFilter;
import com.extjs.gxt.ui.client.widget.grid.filters.GridFilters;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.DateTimeFormat.PredefinedFormat;
import com.google.gwt.user.client.Element;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.logging.Level;
import java.util.logging.Logger;
import org.fam.client.model.EntityDTO;

/**
*
* @author gbougear
*/
public abstract class FAMGrid<D> extends ContentPanel {

public static final int COL_DT_WIDTH = 200;
public static final String COL_DT_CREAT_HEADER = "Dt creat.";
public static final String COL_DT_MODIF_HEADER = "Dt modif.";
protected List<ColumnConfig> columnConfig = null;
protected SimpleGrid grid;
protected ListStore<BeanModel> store;
protected BasePagingLoader<PagingLoadResult<ModelData>> loader;
protected Button btnAjouter;
protected Button btnModifier;
protected GridFilters filters;
private RpcProxy<PagingLoadResult<D>> proxy;
static final Logger logger = Logger.getLogger("NameOfYourLogger");

public FAMGrid(Layout layout) {
super(layout);
logger.log(Level.INFO, "FAMGrid construct");
this.columnConfig = new ArrayList<ColumnConfig>();
}

protected void buildUI() {
logger.log(Level.INFO, "FAMGrid buildUI");

btnModifier = new Button("Modifier");
btnAjouter = new Button("Ajouter");

this.addButton(btnModifier);
this.addButton(btnAjouter);
}

protected void prepareServices() {
logger.log(Level.INFO, "FAMGrid prepareServices");

// reader and loader
BeanModelReader reader = new BeanModelReader();
loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy, reader) {

@Override
protected Object newLoadConfig() {
BasePagingLoadConfig config = new BaseFilterPagingLoadConfig();
return config;
}
};
this.loader.setSortDir(SortDir.ASC);
this.loader.setRemoteSort(true);

this.loader.addLoadListener(new LoadListener() {

/* (non-Javadoc)
* @see com.extjs.gxt.ui.client.event.LoadListener#handleEvent(com.extjs.gxt.ui.client.data.LoadEvent)
*/
@Override
public void handleEvent(LoadEvent e) {
super.handleEvent(e);
}

/* (non-Javadoc)
* @see com.extjs.gxt.ui.client.event.LoadListener#loaderBeforeLoad(com.extjs.gxt.ui.client.data.LoadEvent)
*/
@Override
public void loaderBeforeLoad(LoadEvent le) {
super.loaderBeforeLoad(le);
}

/* (non-Javadoc)
* @see com.extjs.gxt.ui.client.event.LoadListener#loaderLoad(com.extjs.gxt.ui.client.data.LoadEvent)
*/
@Override
public void loaderLoad(LoadEvent le) {
super.loaderLoad(le);
}

/* (non-Javadoc)
* @see com.extjs.gxt.ui.client.event.LoadListener#loaderLoadException(com.extjs.gxt.ui.client.data.LoadEvent)
*/
@Override
public void loaderLoadException(LoadEvent le) {
Info.display("loaderLoadException", le.exception.getMessage());
super.loaderLoadException(le);
}
});

// configure store
this.store = new ListStore<BeanModel>(this.loader);

// pagingToolBar = new PagingToolBar(SFLiveGrid.PAGESIZE);
// pagingToolBar.bind(this.loader);



this.store.addStoreListener(new StoreListener<BeanModel>() {

@Override
public void storeRemove(StoreEvent<BeanModel> se) {
// updateStatus();
// updateChartTask.delay(DEFAULT_DELAY);
}

@Override
public void storeUpdate(StoreEvent<BeanModel> se) {
// if (se.getRecord().isModified("shirt")) {
// updatingStore = true;
//// store.groupBy("shirt", true);
// grid.getView().refresh(false);
// updatingStore = false;
// }
// updateStatus();
// updateChartTask.delay(DEFAULT_DELAY);
}

@Override
public void storeDataChanged(StoreEvent<BeanModel> se) {
// if (!updatingStore) {
// updateStatus();
// updateChartTask.delay(DEFAULT_DELAY);
// }
}

@Override
public void storeFilter(StoreEvent<BeanModel> se) {
// updateChartTask.delay(DEFAULT_DELAY);
}

/* (non-Javadoc)
* @see com.extjs.gxt.ui.client.store.StoreListener#handleEvent(com.extjs.gxt.ui.client.store.StoreEvent)
*/
@Override
public void handleEvent(StoreEvent<BeanModel> e) {
super.handleEvent(e);
}
});
}

protected void buildColumnConfig() {
logger.log(Level.INFO, "FAMGrid buildColumnConfig");

ColumnConfig column = new ColumnConfig();
column = new ColumnConfig(EntityDTO.PROP_DT_CREAT, COL_DT_CREAT_HEADER, COL_DT_WIDTH);
column.setDateTimeFormat(DateTimeFormat.getFormat(PredefinedFormat.DATE_TIME_MEDIUM));
column.setHidden(true);
CellEditor ed = new CellEditor(new LabelField()) {

@Override
public Object preProcessValue(Object value) {
if (value instanceof Date) {
return DateTimeFormat.getFormat(PredefinedFormat.DATE_TIME_MEDIUM).format((Date) value);
}
return null;
}
};
column.setEditor(ed);
this.columnConfig.add(column);

column = new ColumnConfig(EntityDTO.PROP_DT_MODIF, COL_DT_MODIF_HEADER, COL_DT_WIDTH);
column.setDateTimeFormat(DateTimeFormat.getFormat(PredefinedFormat.DATE_TIME_MEDIUM));
column.setHidden(true);
column.setEditor(ed);
this.columnConfig.add(column);
}

protected void buildFilters() {
this.filters = new GridFilters();
DateFilter dtCreatFilter = new DateFilter(EntityDTO.PROP_DT_CREAT);
this.filters.addFilter(dtCreatFilter);
DateFilter dtModifFilter = new DateFilter(EntityDTO.PROP_DT_MODIF);
this.filters.addFilter(dtModifFilter);
}

protected void buildGrid() {
logger.log(Level.INFO, "FAMGrid buildGrid");

ColumnModel cm = new ColumnModel(this.columnConfig);

this.grid = new SimpleGrid(this.store, cm);
this.grid.setStyleAttribute("borderTop", "none");
this.grid.addPlugin(this.filters);
}

@Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);
boolean load = this.loader.load();

this.getHeader().addTool(new ToolButton("x-tool-refresh", new SelectionListener<IconButtonEvent>() {

@Override
public void componentSelected(IconButtonEvent ce) {
boolean load = loader.load();
}
}));
}

public Button getBtnAjouter() {
return btnAjouter;
}

public void setBtnAjouter(Button btnAjouter) {
this.btnAjouter = btnAjouter;
}

public Button getBtnModifier() {
return btnModifier;
}

public void setBtnModifier(Button btnModifier) {
this.btnModifier = btnModifier;
}

public List<ColumnConfig> getColumnConfig() {
return columnConfig;
}

public void setColumnConfig(List<ColumnConfig> columnConfig) {
this.columnConfig = columnConfig;
}

public GridFilters getFilters() {
return filters;
}

public void setFilters(GridFilters filters) {
this.filters = filters;
}

public SimpleGrid getGrid() {
return grid;
}

public void setGrid(SimpleGrid grid) {
this.grid = grid;
}

public BasePagingLoader<PagingLoadResult<ModelData>> getLoader() {
return loader;
}

public void setLoader(BasePagingLoader<PagingLoadResult<ModelData>> loader) {
this.loader = loader;
}

public ListStore<BeanModel> getStore() {
return store;
}

public void setStore(ListStore<BeanModel> store) {
this.store = store;
}

public RpcProxy<PagingLoadResult<D>> getProxy() {
return proxy;
}

public void setProxy(RpcProxy<PagingLoadResult<D>> proxy) {
this.proxy = proxy;
}
}



My ContentPanel


/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package org.fam.client.widget.grid;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.SortDir;
import com.extjs.gxt.ui.client.data.FilterPagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.NumberField;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.filters.DateFilter;
import com.extjs.gxt.ui.client.widget.grid.filters.GridFilters;
import com.extjs.gxt.ui.client.widget.grid.filters.NumericFilter;
import com.extjs.gxt.ui.client.widget.grid.filters.StringFilter;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import java.util.logging.Level;
import java.util.logging.Logger;
import org.fam.client.model.ClubDTO;
import org.fam.client.model.EntityDTO;
import org.fam.client.service.ClubService;
import org.fam.client.service.ClubServiceAsync;

/**
*
* @author gbougear
*/
public class ClubGrid extends FAMGrid<ClubDTO> {

public static final String TITLE = "Clubs";
public static final String ICON_CLS = "icon-user";
private static final String DEFAULT_SORT = ClubDTO.PROP_LIB;
private static final int COL_LIB_WIDTH = 100;
private static final String COL_LIB_HEADER = "Nom";
private static final int COL_COD_FFF_WIDTH = 60;
private static final String COL_COD_FFF_HEADER = "Code FFF";
static final Logger logger = Logger.getLogger("NameOfYourLogger");

/**
*
*/
public ClubGrid() {

super(new FitLayout());
logger.log(Level.INFO, "ClubGrid construct");

RpcProxy<PagingLoadResult<ClubDTO>> proxy = new RpcProxy<PagingLoadResult<ClubDTO>>() {

@Override
public void load(Object loadConfig, AsyncCallback<PagingLoadResult<ClubDTO>> callback) {
getService().findAll((FilterPagingLoadConfig) loadConfig, callback);
}
};
this.setProxy(proxy);
this.prepareServices();
this.buildColumnConfig();
this.buildFilters();
this.buildGrid();
this.buildUI();
}

@Override
protected void buildUI() {
super.buildUI();
// this.setHeaderVisible(false);
this.setHeading(TITLE);
// this.setIconStyle(ICON_CLS);

ToolBar toolBar = new ToolBar();
// Button add = new Button("Nouveau club");
//
// add.addSelectionListener(new SelectionListener<ButtonEvent>() {
//
// @Override
// public void componentSelected(ButtonEvent ce) {
// ClubDTO club = new ClubDTO();
// BeanModelFactory factory = BeanModelLookup.get().getFactory(ClubDTO.class);
// BeanModel model = factory.createModel(club);
//
// rowEditor.stopEditing(false);
// store.insert(model, 0);
// rowEditor.startEditing(store.indexOf(model), true);
//
// }
// });
// toolBar.add(add);

// Button truncate = new Button("Truncate");
// truncate.addSelectionListener(new SelectionListener<ButtonEvent>() {
//
// @Override
// public void componentSelected(ButtonEvent ce) {
// AsyncCallback<Void> aCallBack = new AsyncCallback<Void>() {
//
// public void onFailure(Throwable caught) {
// grid.el().unmask();
// store.rejectChanges();
// }
//
// public void onSuccess(Void result) {
// grid.el().unmask();
// loader.load(0, LiveGrid.PAGESIZE);
// }
// };
// grid.el().mask("Suppresion de tous les clubs...");
// service.truncate(aCallBack);
// }
// });
// toolBar.add(truncate);

Button generate = new Button("Gen. Data");
generate.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
AsyncCallback<Void> aCallBack = new AsyncCallback<Void>() {

@Override
public void onFailure(Throwable caught) {
grid.el().unmask();
store.rejectChanges();
}

@Override
public void onSuccess(Void result) {
grid.el().unmask();
boolean load = loader.load();
}
};
grid.el().mask("Insertion de données...");
getService().generateData(aCallBack);
}
});
toolBar.add(generate);

this.setTopComponent(toolBar);

this.add(grid);
}

/**
*
*/
@Override
protected void prepareServices() {
super.prepareServices();
logger.log(Level.INFO, "ClubGrid prepareServices");
this.loader.setSortField(DEFAULT_SORT);
this.loader.setSortDir(SortDir.ASC);
}

/**
*
*/
@Override
protected void buildGrid() {
super.buildGrid();
logger.log(Level.INFO, "ClubGrid buildGrid");
this.grid.setAutoExpandColumn(ClubDTO.PROP_LIB);

}

/**
*
*/
@Override
protected void buildColumnConfig() {
logger.log(Level.INFO, "ClubGrid buildColumnConfig");

ColumnConfig column = new ColumnConfig();
column.setId(ClubDTO.PROP_ID);

column = new ColumnConfig(ClubDTO.PROP_LIB, COL_LIB_HEADER, COL_LIB_WIDTH);
TextField<String> tf = new TextField<String>();
tf.setAllowBlank(false);
column.setEditor(new CellEditor(tf));
this.columnConfig.add(column);

column = new ColumnConfig(ClubDTO.PROP_COD, COL_COD_FFF_HEADER, COL_COD_FFF_WIDTH);
column.setAlignment(HorizontalAlignment.LEFT);
NumberField nf = new NumberField();
nf.setPropertyEditorType(Integer.class);
column.setEditor(new CellEditor(nf));
this.columnConfig.add(column);

super.buildColumnConfig();
}

@Override
protected void buildFilters() {
logger.log(Level.INFO, "ClubGrid buildFilters");

super.buildFilters();
NumericFilter codeFilter = new NumericFilter(ClubDTO.PROP_COD);
this.filters.addFilter(codeFilter);
StringFilter libelleFilter = new StringFilter(ClubDTO.PROP_LIB);
this.filters.addFilter(libelleFilter);

}

public static ClubServiceAsync getService() {
return (ClubServiceAsync) GWT.create(ClubService.class);
}
}



My ContentPanel for "Carding"



/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package org.fam.client.widget.panel;

import com.extjs.gxt.ui.client.binding.FormBinding;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.BeanModelFactory;
import com.extjs.gxt.ui.client.data.BeanModelLookup;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.GridEvent;
import com.extjs.gxt.ui.client.event.IconButtonEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.ToolButton;
import com.extjs.gxt.ui.client.widget.layout.CardLayout;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
import org.fam.client.model.ClubDTO;
import org.fam.client.widget.form.ClubForm;
import org.fam.client.widget.grid.ClubGrid;

/**
*
* @author gbougear
*/
public class ClubGridFormPanel extends ContentPanel {

final LayoutContainer IDX_GRID = new LayoutContainer();
final LayoutContainer IDX_FORM = new LayoutContainer();
final ClubGrid grid = new ClubGrid();
final ClubForm form = new ClubForm();
final CardLayout card = new CardLayout();
final ToolButton toolRefresh = new ToolButton("x-tool-refresh");

public ClubGridFormPanel() {
// setHeaderVisible(false);
this.setHeading("Clubs");
buildUI();
}

private void buildUI() {
this.setLayout(card);

grid.setHeaderVisible(false);
form.setHeaderVisible(false);

// grid.setHeight(300);
// form.setHeight(300);

IDX_GRID.add(grid);
IDX_FORM.add(form);

this.add(IDX_GRID);
this.add(IDX_FORM);
card.setActiveItem(this.getItem(0));

toolRefresh.addSelectionListener(new SelectionListener<IconButtonEvent>() {

@Override
public void componentSelected(IconButtonEvent ce) {
grid.getGrid().getStore().getLoader().load();
}
});


final FormBinding formBindings = new FormBinding(form, true);
formBindings.setStore(grid.getGrid().getStore());

grid.getGrid().addListener(Events.CellDoubleClick, new Listener<BaseEvent>() {

@Override
public void handleEvent(BaseEvent be) {
GridEvent ge = (GridEvent) be;
if (ge.getColIndex() != 0) {
// Do something
BeanModel model = grid.getGrid().getSelectionModel().getSelectedItem();

formBindings.bind(model);

toolRefresh.hide();
card.setActiveItem(IDX_FORM);

}
}
});

grid.getBtnAjouter().addSelectionListener(
new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {

ClubDTO item = new ClubDTO();
BeanModelFactory factory = BeanModelLookup.get().getFactory(ClubDTO.class);
BeanModel model = factory.createModel(item);

grid.getGrid().getStore().insert(model, 0);
grid.getGrid().getSelectionModel().select(0, true);

formBindings.bind(model);

toolRefresh.hide();
card.setActiveItem(IDX_FORM);
}
});

grid.getBtnModifier().addSelectionListener(
new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {

BeanModel model = grid.getGrid().getSelectionModel().getSelectedItem();

formBindings.bind(model);

toolRefresh.hide();
card.setActiveItem(IDX_FORM);
}
});

form.getBtnSave().addSelectionListener(
new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {

BeanModel model = (BeanModel) formBindings.getModel();
ClubDTO item = (ClubDTO) model.getBean();
AsyncCallback<Void> aCallBack = new AsyncCallback<Void>() {

@Override
public void onFailure(Throwable caught) {
grid.el().unmask();
grid.getGrid().getStore().rejectChanges();
form.clear();

Info.display("onFailure",
"Echec de l'enregistrement");
}

@Override
public void onSuccess(Void result) {
grid.el().unmask();
grid.getGrid().getStore().getLoader().load(grid.getGrid().getStore().getLoadConfig());
form.clear();

toolRefresh.show();
card.setActiveItem(IDX_GRID);

}
};

grid.el().mask("Enregistrement...");
ClubGrid.getService().save(item, aCallBack);
}
});

form.getBtnCancel().addSelectionListener(
new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {

grid.getGrid().getSelectionModel().deselectAll();
grid.getGrid().getSelectionModel().select(0, true);
BeanModel model = grid.getGrid().getSelectionModel().getSelectedItem();
ClubDTO item = (ClubDTO) model.getBean();
if (item.getIdClub() == null) {
grid.getGrid().getStore().remove(0);
}

grid.getGrid().getStore().rejectChanges();

toolRefresh.show();
card.setActiveItem(IDX_GRID);

}
});
}

@Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);

this.getHeader().addTool(toolRefresh);

}
}



and finally my call in a window :


private Window createClubWindow() {
Window w = new Window();
// w.setIcon(IconHelper.createStyle("icon-grid"));
w.setMinimizable(true);
w.setMaximizable(true);
// w.setHeading("Grid Window");
w.setSize(500, 400);
w.setLayout(new FitLayout());

ClubGridFormPanel grid = new ClubGridFormPanel();
w.add(grid);
w.setHeading(ClubGrid.TITLE);
// w.setIconStyle(SeasonGridPanel.ICON_CLS);
return w;
}

sven
18 Dec 2010, 6:23 AM
That is not a simple, standalone testcase implementing EntryPoint.