d95sld95
2 Oct 2009, 10:21 AM
I created this PageSizePlugin for the GXT PagingToolbar. It adds a ComboBox to the toolbar that allows you to select the page size. It is based on Ext.ux.Andrie.pPageSize by Andrei Neculau.
The code contains a boolean 'first' in the SelectionChangeListener and a if-statement 'if(first)' in the method selectionChanged. This was the only way I could get it to work. For some reason the selectionChanged is called during initialization? I tried disabledEvents(true) but that did not work. If anyone knows how to make that prettier let me know.
import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.data.ModelData;
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.widget.Component;
import com.extjs.gxt.ui.client.widget.ComponentPlugin;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.toolbar.LabelToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;
import com.google.gwt.core.client.GWT;
/**
* A ComboBox control that glues itself to a PagingToolbar's pageSize
* configuration property. Based on Ext.ux.Andrie.pPageSize by Andrei Neculau -
* andrei.neculau@gmail.com or http://andreineculau.wordpress.com
*
*/
public class PageSizePlugin extends Component implements ComponentPlugin {
/** Text to display before the comboBox */
private String beforeText = "Show";
/** Text to display after the comboBox */
private String afterText = "items";
/** ToolBar item to add before the PageSize */
private String addBefore = "-";
/** ToolBar item to be added after the PageSizer */
private String addAfter = null;
/** Variations used for determining pageSize options */
private int[] variations = { 5, 10, 20, 50, 100, 200, 500, 1000 };
/** The starting position inside the ToolBar */
private int position = 11;
// The host component
private PagingToolBar toolbar = null;
@Override
public void init(Component component) {
// Host component
toolbar = (PagingToolBar) component;
// PageSize Store for ComboBox
ListStore<ModelData> store = createStore();
ModelData current = store.findModel("pageSize", toolbar.getPageSize());
if (current == null) {
GWT.log("No page size found in PageSizePlugin that match the pageSize of the PagingToolbar.", null);
current = new BaseModelData();
current.set("pageSize", toolbar.getPageSize());
}
// ComboBox
ComboBox<ModelData> comboBox = new ComboBox<ModelData>();
comboBox.setStore(store);
comboBox.setTriggerAction(TriggerAction.ALL);
comboBox.setDisplayField("pageSize");
comboBox.setValueField("pageSize");
comboBox.setWidth(50);
comboBox.setValue(current);
comboBox.addSelectionChangedListener(new SelectionChangedListener<ModelData>() {
boolean first = true;
@Override
public void selectionChanged(SelectionChangedEvent<ModelData> se) {
ModelData data = se.getSelectedItem();
int pageSize = data.get("pageSize");
toolbar.setPageSize(pageSize);
if (first) {
first = false;
return;
}
toolbar.refresh();
}
});
if (this.addBefore != null) {
if ("-".equals(this.addBefore)) {
this.toolbar.insert(new SeparatorToolItem(), position);
} else {
this.toolbar
.insert(new LabelToolItem(this.addBefore), position);
}
position++;
}
if (this.beforeText != null) {
this.toolbar.insert(new LabelToolItem(this.beforeText), position);
position++;
}
this.toolbar.insert(comboBox, position);
position++;
if (this.afterText != null) {
this.toolbar.insert(new LabelToolItem(this.afterText), position);
position++;
}
if (this.addAfter != null) {
if ("-".equals(this.addBefore)) {
this.toolbar.insert(new SeparatorToolItem(), position);
} else {
this.toolbar.insert(new LabelToolItem(this.addAfter), position);
}
}
}
protected ListStore<ModelData> createStore() {
ListStore<ModelData> store = new ListStore<ModelData>();
for (int size : variations) {
ModelData data = new BaseModelData();
data.set("pageSize", size);
store.add(data);
}
return store;
}
public String getBeforeText() {
return beforeText;
}
public void setBeforeText(String beforeText) {
this.beforeText = beforeText;
}
public String getAfterText() {
return afterText;
}
public void setAfterText(String afterText) {
this.afterText = afterText;
}
public String getAddBefore() {
return addBefore;
}
public void setAddBefore(String addBefore) {
this.addBefore = addBefore;
}
public String getAddAfter() {
return addAfter;
}
public void setAddAfter(String addAfter) {
this.addAfter = addAfter;
}
public int[] getVariations() {
return variations;
}
public void setVariations(int[] variations) {
this.variations = variations;
}
public int getPosition() {
return position;
}
public void setPosition(int position) {
this.position = position;
}
}
The code contains a boolean 'first' in the SelectionChangeListener and a if-statement 'if(first)' in the method selectionChanged. This was the only way I could get it to work. For some reason the selectionChanged is called during initialization? I tried disabledEvents(true) but that did not work. If anyone knows how to make that prettier let me know.
import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.data.ModelData;
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.widget.Component;
import com.extjs.gxt.ui.client.widget.ComponentPlugin;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.toolbar.LabelToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;
import com.google.gwt.core.client.GWT;
/**
* A ComboBox control that glues itself to a PagingToolbar's pageSize
* configuration property. Based on Ext.ux.Andrie.pPageSize by Andrei Neculau -
* andrei.neculau@gmail.com or http://andreineculau.wordpress.com
*
*/
public class PageSizePlugin extends Component implements ComponentPlugin {
/** Text to display before the comboBox */
private String beforeText = "Show";
/** Text to display after the comboBox */
private String afterText = "items";
/** ToolBar item to add before the PageSize */
private String addBefore = "-";
/** ToolBar item to be added after the PageSizer */
private String addAfter = null;
/** Variations used for determining pageSize options */
private int[] variations = { 5, 10, 20, 50, 100, 200, 500, 1000 };
/** The starting position inside the ToolBar */
private int position = 11;
// The host component
private PagingToolBar toolbar = null;
@Override
public void init(Component component) {
// Host component
toolbar = (PagingToolBar) component;
// PageSize Store for ComboBox
ListStore<ModelData> store = createStore();
ModelData current = store.findModel("pageSize", toolbar.getPageSize());
if (current == null) {
GWT.log("No page size found in PageSizePlugin that match the pageSize of the PagingToolbar.", null);
current = new BaseModelData();
current.set("pageSize", toolbar.getPageSize());
}
// ComboBox
ComboBox<ModelData> comboBox = new ComboBox<ModelData>();
comboBox.setStore(store);
comboBox.setTriggerAction(TriggerAction.ALL);
comboBox.setDisplayField("pageSize");
comboBox.setValueField("pageSize");
comboBox.setWidth(50);
comboBox.setValue(current);
comboBox.addSelectionChangedListener(new SelectionChangedListener<ModelData>() {
boolean first = true;
@Override
public void selectionChanged(SelectionChangedEvent<ModelData> se) {
ModelData data = se.getSelectedItem();
int pageSize = data.get("pageSize");
toolbar.setPageSize(pageSize);
if (first) {
first = false;
return;
}
toolbar.refresh();
}
});
if (this.addBefore != null) {
if ("-".equals(this.addBefore)) {
this.toolbar.insert(new SeparatorToolItem(), position);
} else {
this.toolbar
.insert(new LabelToolItem(this.addBefore), position);
}
position++;
}
if (this.beforeText != null) {
this.toolbar.insert(new LabelToolItem(this.beforeText), position);
position++;
}
this.toolbar.insert(comboBox, position);
position++;
if (this.afterText != null) {
this.toolbar.insert(new LabelToolItem(this.afterText), position);
position++;
}
if (this.addAfter != null) {
if ("-".equals(this.addBefore)) {
this.toolbar.insert(new SeparatorToolItem(), position);
} else {
this.toolbar.insert(new LabelToolItem(this.addAfter), position);
}
}
}
protected ListStore<ModelData> createStore() {
ListStore<ModelData> store = new ListStore<ModelData>();
for (int size : variations) {
ModelData data = new BaseModelData();
data.set("pageSize", size);
store.add(data);
}
return store;
}
public String getBeforeText() {
return beforeText;
}
public void setBeforeText(String beforeText) {
this.beforeText = beforeText;
}
public String getAfterText() {
return afterText;
}
public void setAfterText(String afterText) {
this.afterText = afterText;
}
public String getAddBefore() {
return addBefore;
}
public void setAddBefore(String addBefore) {
this.addBefore = addBefore;
}
public String getAddAfter() {
return addAfter;
}
public void setAddAfter(String addAfter) {
this.addAfter = addAfter;
}
public int[] getVariations() {
return variations;
}
public void setVariations(int[] variations) {
this.variations = variations;
}
public int getPosition() {
return position;
}
public void setPosition(int position) {
this.position = position;
}
}