com.gwtext.client.widgets
Class DataView

java.lang.Object
  extended by com.google.gwt.user.client.ui.UIObject
      extended by com.google.gwt.user.client.ui.Widget
          extended by com.gwtext.client.widgets.Component
              extended by com.gwtext.client.widgets.BoxComponent
                  extended by 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
           
 
Field Summary
 
Fields inherited from class com.gwtext.client.widgets.Component
config, id
 
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, 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
getAbsoluteLeft, getAbsoluteTop, getStyleElement, getStyleName, getStyleName, getStylePrimaryName, getStylePrimaryName, isVisible, 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