PageSizePlugin

[d95sld95]

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;
}
}

[d95sld95]

Note: I found an issue that involves this plugin. See http://www.extjs.com/forum/showthread.php?t=82331