com.gwtext.client.widgets
Class DataView

java.lang.Object
  com.google.gwt.user.client.ui.UIObject
      com.google.gwt.user.client.ui.Widget
          com.gwtext.client.widgets.Component
              com.gwtext.client.widgets.BoxComponent
                  com.gwtext.client.widgets.DataView

All Implemented Interfaces:

com.google.gwt.user.client.EventListener, Observable

public class DataView
extends BoxComponent

A mechanism for displaying data using custom layout templates and formatting. DataView uses XTemplate as its internal templating mechanisma, and is bound to an Store so that as the data in the store changes the view is automatically updated to reflect the changes. The view also provides built-in behavior for many common events that can occur for its contained items including click, doubleclick, mouseover, mouseout, etc. as well as a built-in selection model. An itemSelector which is passed to the constructor is used to determine what nodes it will be working with. The example below binds a DataView to a Store and renders it into a Panel.

 

 // data here is Object[][] of local data.
 MemoryProxy dataProxy = new MemoryProxy(getData());
 ArrayReader reader = new ArrayReader(new RecordDef(new FieldDef[]{
                                      new StringFieldDef("name"),
                                      new IntegerFieldDef("size"),
                                      new DateFieldDef("lastmod", "timestamp"),
                                      new StringFieldDef("url")}));

 Store store = new Store(dataProxy, reader);
 store.load();

 XTemplate template = new XTemplate(new String[]{
                  "<tpl for='.'>",
                  "<div class='thumb-wrap' id='{name}'>",
                  "<div class='thumb'><img src='{url}' title='{name}'></div>",
                  "<span class='x-editable'>{shortName}</span></div>",
                  "</tpl>",
                  "<div class='x-clear'></div>"});

 Panel panel = new Panel();
 panel.setId("images-view");
 panel.setFrame(true);
 panel.setAutoHeight(true);
 panel.setCollapsible(true);
 panel.setLayout(new FitLayout());
 panel.setTitle("Simple DataView with editable labels, multi and drag selection");

 //pre process the data from te store before passing it to the DataView
 DataView dataView = new DataView("div.thumb-wrap") {
               public void prepareData(Data data) {
                   data.setProperty("shortName", Format.ellipsis(data.getProperty("name"), 15));
               } };


 dataView.setStore(store);
 dataView.setTpl(template);
 dataView.setAutoHeight(true);
 dataView.setMultiSelect(true);
 dataView.setOverCls("x-view-over");
 dataView.setEmptyText("No Images to display");

 panel.add(dataView);
 RootPanel.get().add(panel);
 
 

Nested Class Summary

static class

DataView.Data

Nested classes/interfaces inherited from class com.google.gwt.user.client.ui.UIObject

com.google.gwt.user.client.ui.UIObject.DebugIdImpl, com.google.gwt.user.client.ui.UIObject.DebugIdImplEnabled

Field Summary

Fields inherited from class com.gwtext.client.widgets.Component

config, id

Fields inherited from class com.google.gwt.user.client.ui.UIObject

DEBUG_ID_PREFIX

Constructor Summary

DataView(com.google.gwt.core.client.JavaScriptObject jsObj)

DataView(java.lang.String itemSelector)
Create a new DataView.

Method Summary

void	addListener(DataViewListener listener)
void	clearSelections() Clears all selections.
void	clearSelections(boolean suppressEvent) Clears all selections.
protected com.google.gwt.core.client.JavaScriptObject	create(com.google.gwt.core.client.JavaScriptObject config)
void	deselect(com.google.gwt.user.client.Element element) Deselects a node.
void	deselect(int nodeIndex) Deselects a node.
com.google.gwt.user.client.Element	findItemFromChild() Returns the template node the passed child belongs to, or null if it doesn't belong to one.
com.google.gwt.user.client.Element	getNode(int nodeIndex) Gets a template node.
com.google.gwt.user.client.Element	getNode(java.lang.String nodeID) Gets a template node.
com.google.gwt.user.client.Element[]	getNodes(int start, int end) Gets a range nodes.
Record	getRecord(com.google.gwt.user.client.Element node) Gets a record from a node.
int[]	getSelectedIndexes() Gets the indexes of the selected nodes.
Record[]	getSelectedRecords() Gets an array of the selected records.
int	getSelectionCount() Gets the number of selected nodes.
java.lang.String	getXType() Gets the xtype for this component as registered with ComponentMgr.
int	indexOf(com.google.gwt.user.client.Element element) Finds the index of the passed node.
int	indexOf(int nodeIndex) Finds the index of the passed node.
int	indexOf(java.lang.String nodeID) Finds the index of the passed node.
boolean	isSelected(com.google.gwt.user.client.Element element) Returns true if the passed node is selected, else false.
boolean	isSelected(int nodeIndex) Returns true if the passed node is selected, else false.
void	prepareData(DataView.Data data) This method that can be overridden to provide custom formatting for the data that is sent to the template for each node.
void	refresh() Refreshes the view by reloading the data from the store and re-rendering the template.
void	refreshNode(int nodeIndex) Refreshes an individual node's data from the store.
void	select(com.google.gwt.user.client.Element node) Selectsthe node.
void	select(com.google.gwt.user.client.Element node, boolean keepExisting, boolean suppressEvent) Selects the node.
void	select(int nodeIndex) Selects the node.
void	select(int[] nodeIndexes) Selects a set of nodes.
void	select(int[] nodeIndexes, boolean keepExisting, boolean suppressEvent) Selects a set of nodes.
void	select(int nodeIndex, boolean keepExisting, boolean suppressEvent) Selects the node.
void	select(java.lang.String[] nodeIDs) Selects a set of nodes.
void	select(java.lang.String[] nodeIDs, boolean keepExisting, boolean suppressEvent) Selects a set of nodes.
void	selectRange(int start, int end) Selects a range of nodes.
void	selectRange(int start, int end, boolean keepExisting) Selects a range of nodes.
void	setEmptyText(java.lang.String emptyText) The text to display in the view when there is no data to display (defaults to '').
void	setItemSelector(java.lang.String itemSelector) A CSS selector in any format supported by DomQuery that will be used to determine what nodes this DataView will be working with.
void	setLoadingText(java.lang.String loadingText) A string to display during data load operations (defaults to undefined).
void	setMultiSelect(boolean multiSelect) True to allow selection of more than one item at a time, false to allow selection of only a single item at a time or no selection at all, depending on the value of singleSelect (defaults to false).
void	setOverCls(java.lang.String overCls) A CSS class to apply to each item in the view on mouseover (defaults to undefined).
void	setSimpleSelect(boolean simpleSelect) True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl, false to force the user to hold Ctrl or Shift to select more than on item (defaults to false).
void	setSingleSelect(boolean singleSelect) True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false).
void	setStore(Store store) The Store to bind this DataView to.
void	setTpl(XTemplate tpl) An XTemplate constructed with the the HTML fragment or an array of fragments that will make up the template used by this DataView.

Methods inherited from class com.gwtext.client.widgets.BoxComponent

addListener, doOnRender, doOnRender, getAutoHeight, getAutoWidth, getBox, getBox, getConfigPrototype, getHeight, getPosition, getPosition, getSize, getWidth, setAutoHeight, setAutoWidth, setHeight, setHeight, setPagePosition, setPosition, setSize, setSize, setWidth, setWidth, syncSize, updateBox

Methods inherited from class com.gwtext.client.widgets.Component

addClass, addClassCreated, addEvent, addEvents, addListener, addListener, addListener, addPlugin, addStyleDependentName, addStyleName, afterRender, beforeDestroy, check, checkExtVer, cloneComponent, cloneComponent, cloneConfig, destroy, disable, enable, equals, error, findParentBy, findParentByType, fireEvent, focus, focus, focus, focus, getApplyTo, getAttribute, getAttributeAsBoolean, getAttributeAsFloat, getAttributeAsInt, getAttributeAsJavaScriptObject, getAutoShow, getCls, getComponentJS, getConfig, getConfigAsString, getCtCls, getDisabledClass, getEl, getElement, getElement, getElement, getHideMode, getHideParent, getId, getItemId, getJsObj, getOffsetHeight, getOffsetWidth, getOrCreateJsObj, getOwnerContainer, getRenderTo, getStateEvents, getStateId, getTitle, getXTypes, hashCode, hide, initComponent, isCreated, isDisabled, isHidden, isRendered, isVisible, isXType, isXType, onDestroy, purgeListeners, removeClass, removeStyleDependentName, removeStyleName, render, render, render, render, render, render, resumeEvents, setApplyTo, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAutoEl, setAutoEl, setAutoShow, setCls, setCtCls, setDisabled, setDisabledClass, setEl, setEl, setElement, setHideMode, setHideParent, setId, setRenderTo, setRenderToID, setStateEvents, setStateId, setStyle, setStyle, setStyleName, setStylePrimaryName, setTitle, setVisible, show, suspendEvents, toString

Methods inherited from class com.google.gwt.user.client.ui.Widget

doAttachChildren, doDetachChildren, getParent, isAttached, onAttach, onBrowserEvent, onDetach, onLoad, onUnload, removeFromParent

Methods inherited from class com.google.gwt.user.client.ui.UIObject

ensureDebugId, ensureDebugId, ensureDebugId, getAbsoluteLeft, getAbsoluteTop, getStyleElement, getStyleName, getStyleName, getStylePrimaryName, getStylePrimaryName, isVisible, onEnsureDebugId, setElement, setPixelSize, setStyleName, setStyleName, setStylePrimaryName, setVisible, sinkEvents, unsinkEvents

Methods inherited from class java.lang.Object

clone, finalize, getClass, notify, notifyAll, wait, wait, wait

Constructor Detail

DataView

public DataView(java.lang.String itemSelector)

Create a new DataView.

Parameters:

itemSelector - a CSS selector in any format supported by DomQuery that will be used to determine what nodes this DataView will be working with.

DataView

public DataView(com.google.gwt.core.client.JavaScriptObject jsObj)

Method Detail

getXType

public java.lang.String getXType()

Description copied from class: Component

Gets the xtype for this component as registered with ComponentMgr. For a list of all available xtypes, see the Component javadocs.

 
 

 TextField field = new TextField();
 field.getXType() returns "textfield"
 
 

Overrides:

getXType in class BoxComponent

Returns:

the xtype

create

protected com.google.gwt.core.client.JavaScriptObject create(com.google.gwt.core.client.JavaScriptObject config)

Overrides:

create in class BoxComponent

prepareData

public void prepareData(DataView.Data data)

This method that can be overridden to provide custom formatting for the data that is sent to the template for each node. Data can be retried by name for lookup and new fields / value can be added to it/

Parameters:

data - the view data

clearSelections

public void clearSelections()

Clears all selections.

clearSelections

public void clearSelections(boolean suppressEvent)

Clears all selections.

Parameters:

suppressEvent - true to prevent firing of the selectionchange event

deselect

public void deselect(com.google.gwt.user.client.Element element)

Deselects a node.

Parameters:

element - the node to delselect

deselect

public void deselect(int nodeIndex)

Deselects a node.

Parameters:

nodeIndex - index of node to deselect

findItemFromChild

public com.google.gwt.user.client.Element findItemFromChild()

Returns the template node the passed child belongs to, or null if it doesn't belong to one.

Returns:

template node the child belongs to

getNode

public com.google.gwt.user.client.Element getNode(java.lang.String nodeID)

Gets a template node.

Parameters:

nodeID - the id of a template node

Returns:

the node or null if it wasn't found

getNode

public com.google.gwt.user.client.Element getNode(int nodeIndex)

Gets a template node.

Parameters:

nodeIndex - the index of a template node

Returns:

the node or null if it wasn't found

getNodes

public com.google.gwt.user.client.Element[] getNodes(int start,
                                                     int end)

Gets a range nodes.

Parameters:

start - the index of the first node in the range

end - the index of the last node in the range

Returns:

an array of nodes

getRecord

public Record getRecord(com.google.gwt.user.client.Element node)

Gets a record from a node.

Parameters:

node - The node to evaluate

Returns:

the Record

getSelectedIndexes

public int[] getSelectedIndexes()

Gets the indexes of the selected nodes.

Returns:

an array of numeric indexes

getSelectedRecords

public Record[] getSelectedRecords()

Gets an array of the selected records.

Returns:

an array of Records

getSelectionCount

public int getSelectionCount()

Gets the number of selected nodes.

Returns:

the node count

indexOf

public int indexOf(com.google.gwt.user.client.Element element)

Finds the index of the passed node.

Parameters:

element - the node

Returns:

The index of the node or -1

indexOf

public int indexOf(java.lang.String nodeID)

Finds the index of the passed node.

Parameters:

nodeID - the node ID

Returns:

The index of the node or -1

indexOf

public int indexOf(int nodeIndex)

Finds the index of the passed node.

Parameters:

nodeIndex - the node index

Returns:

The index of the node or -1

isSelected

public boolean isSelected(com.google.gwt.user.client.Element element)

Returns true if the passed node is selected, else false.

Parameters:

element - the node

Returns:

true if selected

isSelected

public boolean isSelected(int nodeIndex)

Returns true if the passed node is selected, else false.

Parameters:

nodeIndex - the node index

Returns:

true if selected

refresh

public void refresh()

Refreshes the view by reloading the data from the store and re-rendering the template.

refreshNode

public void refreshNode(int nodeIndex)

Refreshes an individual node's data from the store.

Parameters:

nodeIndex - the node index

select

public void select(com.google.gwt.user.client.Element node)

Selectsthe node.

Parameters:

node - the noed

select

public void select(com.google.gwt.user.client.Element node,
                   boolean keepExisting,
                   boolean suppressEvent)

Selects the node.

Parameters:

node - the node

keepExisting - true to keep existing selections

suppressEvent - true to skip firing of the selectionchange vent

select

public void select(int nodeIndex)

Selects the node.

Parameters:

nodeIndex - the node index

select

public void select(int nodeIndex,
                   boolean keepExisting,
                   boolean suppressEvent)

Selects the node.

Parameters:

nodeIndex - the node index

keepExisting - true to keep existing selections

suppressEvent - true to skip firing of the selectionchange event

select

public void select(int[] nodeIndexes)

Selects a set of nodes.

Parameters:

nodeIndexes - the node indexes

select

public void select(int[] nodeIndexes,
                   boolean keepExisting,
                   boolean suppressEvent)

Selects a set of nodes.

Parameters:

nodeIndexes - the node indexes

keepExisting - true to keep existing selections

suppressEvent - true to skip firing of the selectionchange event

select

public void select(java.lang.String[] nodeIDs)

Selects a set of nodes.

Parameters:

nodeIDs - the node ID's

select

public void select(java.lang.String[] nodeIDs,
                   boolean keepExisting,
                   boolean suppressEvent)

Selects a set of nodes.

Parameters:

nodeIDs - the node ID's

keepExisting - true to keep existing selections

suppressEvent - true to skip firing of the selectionchange event

selectRange

public void selectRange(int start,
                        int end)

Selects a range of nodes. All nodes between start and end are selected.

Parameters:

start - The index of the first node in the range

end - The index of the last node in the range

selectRange

public void selectRange(int start,
                        int end,
                        boolean keepExisting)

Selects a range of nodes. All nodes between start and end are selected.

Parameters:

start - The index of the first node in the range

end - The index of the last node in the range

keepExisting - true to retain existing selections

addListener

public void addListener(DataViewListener listener)

setEmptyText

public void setEmptyText(java.lang.String emptyText)

The text to display in the view when there is no data to display (defaults to '').

Parameters:

emptyText - the empty text

setItemSelector

public void setItemSelector(java.lang.String itemSelector)

A CSS selector in any format supported by DomQuery that will be used to determine what nodes this DataView will be working with.

Parameters:

itemSelector - the items selector

setLoadingText

public void setLoadingText(java.lang.String loadingText)

A string to display during data load operations (defaults to undefined). If specified, this text will be displayed in a loading div and the view's contents will be cleared while loading, otherwise the view's contents will continue to display normally until the new data is loaded and the contents are replaced.

Parameters:

loadingText - the loading text

setMultiSelect

public void setMultiSelect(boolean multiSelect)

True to allow selection of more than one item at a time, false to allow selection of only a single item at a time or no selection at all, depending on the value of singleSelect (defaults to false).

Parameters:

multiSelect - true to allow multiple selections

setOverCls

public void setOverCls(java.lang.String overCls)
                throws java.lang.IllegalStateException

A CSS class to apply to each item in the view on mouseover (defaults to undefined).

Parameters:

overCls - a CSS class to apply to each item in the view on mouseover (defaults to undefined).

Throws:

java.lang.IllegalStateException - this property cannot be changed after the Component has been rendered

setSimpleSelect

public void setSimpleSelect(boolean simpleSelect)

True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl, false to force the user to hold Ctrl or Shift to select more than on item (defaults to false).

Parameters:

simpleSelect - true to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl

setSingleSelect

public void setSingleSelect(boolean singleSelect)

True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false). Note that if multiSelect = true, this value will be ignored.

Parameters:

singleSelect - true to allow selection of exactly one item at a time, false to allow no selection at all

setStore

public void setStore(Store store)

The Store to bind this DataView to.

Parameters:

store - the Ext.data.Store to bind this DataView to.

setTpl

public void setTpl(XTemplate tpl)

An XTemplate constructed with the the HTML fragment or an array of fragments that will make up the template used by this DataView.

Parameters:

tpl - the DataView tempalte