Overview | Package | Class | Tree | Deprecated | Index | Help
PREV CLASS NEXT CLASS | FRAMES NO FRAMES
SUMMARY: NESTED | FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD

## 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`

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, setWidth, setWidth, syncSize, updateBox`

Methods inherited from class com.gwtext.client.widgets.Component
`addClass, addClassCreated, addEvent, addEvents, addListener, addListener, addListener, afterRender, beforeDestroy, check, cloneComponent, cloneComponent, cloneConfig, destroy, disable, enable, equals, error, focus, focus, focus, getApplyTo, getAttribute, getAttributeAsBoolean, getAttributeAsFloat, getAttributeAsInt, getAttributeAsJavaScriptObject, getAutoShow, getCls, getComponentJS, getConfig, getCtCls, getDisabledClass, getEl, getElement, getElement, getHideMode, getHideParent, getId, getItemId, getJsObj, getOffsetHeight, getOffsetWidth, getOrCreateJsObj, getOwnerContainer, getRenderTo, getStateEvents, getStateId, getStyle, getStyleElement, getTitle, getXTypes, hashCode, hide, initComponent, isCreated, isDisabled, isHidden, isRendered, isVisible, isXType, isXType, onDestroy, removeClass, render, render, render, render, render, render, setApplyTo, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAttribute, setAutoEl, setAutoShow, setCls, setCtCls, setDisabled, setDisabledClass, setEl, setEl, setHideMode, setHideParent, setId, setRenderTo, setStateEvents, setStateId, setStyle, setTitle, setVisible, show`

Methods inherited from class com.google.gwt.user.client.ui.Widget
`doAttachChildren, doDetachChildren, getParent, isAttached, onAttach, onBrowserEvent, onDetach, onLoad, onUnload, removeFromParent, setElement`

Methods inherited from class com.google.gwt.user.client.ui.UIObject
`addStyleDependentName, addStyleName, getAbsoluteLeft, getAbsoluteTop, getStyleName, getStyleName, getStylePrimaryName, getStylePrimaryName, isVisible, removeStyleDependentName, removeStyleName, setPixelSize, setSize, setStyleName, setStyleName, setStyleName, setStylePrimaryName, setStylePrimaryName, setVisible, sinkEvents, toString, 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

Overview | Package | Class | Tree | Deprecated | Index | Help
PREV CLASS NEXT CLASS | FRAMES NO FRAMES
SUMMARY: NESTED | FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD