Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    70
    Vote Rating
    6
    mtraynham is on a distinguished road

      0  

    Default ListView styling does not follow Theme packaging structure

    ListView styling does not follow Theme packaging structure


    The ListView class points to a DefaultListViewAppearance in it's constructor.
    This should probably be doing a GWT.create(ListViewAppearence.class) and have the module xml allow replacements, such as a BlueListViewAppearance.

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    70
    Vote Rating
    6
    mtraynham is on a distinguished road

      0  

    Default


    Here is my svn diff for the necessary changes with a deferred binding approach. Also this removes the Type dependency parameter on the ListViewAppearance class, which was uneeded in the first place:

    Index: src/main/java/com/sencha/gxt/theme/blue/Blue.gwt.xml
    ===================================================================
    --- src/main/java/com/sencha/gxt/theme/blue/Blue.gwt.xml (revision 2750)
    +++ src/main/java/com/sencha/gxt/theme/blue/Blue.gwt.xml (working copy)
    @@ -59,6 +59,10 @@
    <!-- <when-type-is class="com.sencha.gxt.widget.core.client.box.MessageBox.MessageBoxAppearance" /> -->
    <!-- </replace-with> -->

    + <replace-with class="com.sencha.gxt.theme.blue.client.list.BlueListViewAppearance">
    + <when-type-is class="com.sencha.gxt.widget.core.client.ListView.ListViewAppearance" />
    + </replace-with>
    +
    <replace-with class="com.sencha.gxt.theme.blue.client.tree.BlueTreeAppearance">
    <when-type-is class="com.sencha.gxt.widget.core.client.tree.Tree.TreeAppearance" />
    </replace-with>
    Index: src/main/java/com/sencha/gxt/theme/blue/client/list/selectedBackground.gif
    ===================================================================
    Cannot display: file marked as a binary type.
    svn:mime-type = application/octet-stream

    Property changes on: src/main/java/com/sencha/gxt/theme/blue/client/list/selectedBackground.gif
    ___________________________________________________________________
    Added: svn:mime-type
    + application/octet-stream

    Index: src/main/java/com/sencha/gxt/theme/blue/client/list/ListView.css
    ===================================================================
    --- src/main/java/com/sencha/gxt/theme/blue/client/list/ListView.css (revision 0)
    +++ src/main/java/com/sencha/gxt/theme/blue/client/list/ListView.css (revision 0)
    @@ -0,0 +1,47 @@
    +.view {
    + background-color: white;
    + border: 1px solid #A3BAE9;
    + -moz-outline: none;
    + outline: 0 none;
    + position: relative;
    +}
    +
    +@if user.agent ie6 {
    + .view {
    + overflow: auto;
    + }
    +} @else {
    + .view {
    + overflow-y: auto;
    + }
    +}
    +
    +.item {
    + border: 1px solid #FFFFFF;
    + font-family: tahoma, arial, helvetica, sans-serif;
    + font-size: 12px;
    + font-size-adjust: none;
    + font-stretch: normal;
    + font-style: normal;
    + font-variant: normal;
    + font-weight: normal;
    + line-height: normal;
    + overflow: hidden;
    + padding: 2px;
    + white-space: nowrap;
    + cursor: pointer;
    +}
    +
    +@sprite .over {
    + gwt-image: 'selectedBackground';
    + height: auto;
    + border: 1px dotted #DDDDDD !important;
    + cursor: pointer;
    +}
    +
    +.sel {
    + background: none repeat scroll 0 50% #DFE8F6;
    + border: 1px dotted #A3BAE9 !important;
    + cursor: pointer;
    +}
    +
    Index: src/main/java/com/sencha/gxt/theme/blue/client/list/BlueListViewAppearance.java
    ===================================================================
    --- src/main/java/com/sencha/gxt/theme/blue/client/list/BlueListViewAppearance.java (revision 0)
    +++ src/main/java/com/sencha/gxt/theme/blue/client/list/BlueListViewAppearance.java (revision 0)
    @@ -0,0 +1,140 @@
    +package com.sencha.gxt.theme.blue.client.list;
    +
    +import java.util.ArrayList;
    +import java.util.List;
    +
    +import com.google.gwt.core.client.GWT;
    +import com.google.gwt.dom.client.Element;
    +import com.google.gwt.dom.client.NodeList;
    +import com.google.gwt.resources.client.ImageResource;
    +import com.google.gwt.resources.client.ImageResource.ImageOptions;
    +import com.google.gwt.resources.client.ImageResource.RepeatStyle;
    +import com.google.gwt.safehtml.shared.SafeHtml;
    +import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
    +import com.sencha.gxt.core.client.dom.XElement;
    +import com.sencha.gxt.widget.core.client.ListView.ListViewAppearance;
    +import com.sencha.gxt.widget.core.client.ListView.ListViewResources;
    +import com.sencha.gxt.widget.core.client.ListView.ListViewStyle;
    +
    +
    +@SuppressWarnings("javadoc")
    +public class BlueListViewAppearance implements ListViewAppearance {
    +
    + /**
    + * The default resources for the list view.
    + */
    + public interface BlueListViewResources extends ListViewResources {
    + /**
    + * Returns the default list view style names.
    + *
    + * @return the default list view style names
    + */
    + @Source("ListView.css")
    + BlueListViewStyle css();
    +
    + /**
    + * Returns the image resource for the selected item background.
    + *
    + * @return selected background image resource
    + */
    + @ImageOptions(repeatStyle = RepeatStyle.Horizontal)
    + ImageResource selectedBackground();
    + }
    +
    + /**
    + * The default styles for the list view.
    + */
    + public interface BlueListViewStyle extends ListViewStyle {
    +
    + /**
    + * Returns the name of the style representing the item.
    + *
    + * @return the style for the item
    + *
    + */
    + String item();
    +
    + /**
    + * Returns the name of the style representing the cursor over state.
    + *
    + * @return the style for the cursor over state
    + */
    + String over();
    +
    + /**
    + * Returns the name of the style representing the selected state.
    + *
    + * @return the style of the selected state
    + */
    + String sel();
    +
    + /**
    + * Returns the name of the style representing the list view root.
    + *
    + * @return the style of the list view
    + */
    + String view();
    + }
    +
    + protected BlueListViewResources resources;
    + protected BlueListViewStyle style;
    +
    + public BlueListViewAppearance() {
    + this.resources = GWT.create(BlueListViewResources.class);
    + this.style = resources.css();
    + this.style.ensureInjected();
    + }
    +
    + @Override
    + public Element findCellParent(XElement item) {
    + return item;
    + }
    +
    + @Override
    + public Element findElement(XElement child) {
    + return child.findParentElement("." + style.item(), 10);
    + }
    +
    + @Override
    + public List<Element> findElements(XElement parent) {
    + NodeList<Element> nodes = parent.select("." + style.item());
    + List<Element> temp = new ArrayList<Element>();
    + for (int i = 0; i < nodes.getLength(); i++) {
    + temp.add(nodes.getItem(i));
    + }
    +
    + return temp;
    + }
    +
    + @Override
    + public void onOver(XElement item, boolean over) {
    + item.setClassName(style.over(), over);
    + }
    +
    + @Override
    + public void onSelect(XElement item, boolean select) {
    + item.setClassName(style.sel(), select);
    + }
    +
    + @Override
    + public void render(SafeHtmlBuilder builder) {
    + builder.appendHtmlConstant("<div class=\"" + style.view() + "\"></div>");
    + }
    +
    + @Override
    + public void renderEnd(SafeHtmlBuilder builder) {
    + }
    +
    + @Override
    + public void renderItem(SafeHtmlBuilder sb, SafeHtml content) {
    + sb.appendHtmlConstant("<div class='" + style.item() + "'>");
    + sb.append(content);
    + sb.appendHtmlConstant("</div>");
    +
    + }
    +
    + @Override
    + public ListViewResources resources() {
    + return (ListViewResources)GWT.create(BlueListViewResources.class);
    + }
    +}
    \ No newline at end of file
    Index: src/main/java/com/sencha/gxt/widget/core/client/selectedBackground.gif
    ===================================================================
    Cannot display: file marked as a binary type.
    svn:mime-type = application/octet-stream
    Index: src/main/java/com/sencha/gxt/widget/core/client/ListView.css
    ===================================================================
    --- src/main/java/com/sencha/gxt/widget/core/client/ListView.css (revision 2750)
    +++ src/main/java/com/sencha/gxt/widget/core/client/ListView.css (working copy)
    @@ -1,47 +0,0 @@
    -.view {
    - background-color: white;
    - border: 1px solid #A3BAE9;
    - -moz-outline: none;
    - outline: 0 none;
    - position: relative;
    -}
    -
    -@if user.agent ie6 {
    - .view {
    - overflow: auto;
    - }
    -} @else {
    - .view {
    - overflow-y: auto;
    - }
    -}
    -
    -.item {
    - border: 1px solid #FFFFFF;
    - font-family: tahoma, arial, helvetica, sans-serif;
    - font-size: 12px;
    - font-size-adjust: none;
    - font-stretch: normal;
    - font-style: normal;
    - font-variant: normal;
    - font-weight: normal;
    - line-height: normal;
    - overflow: hidden;
    - padding: 2px;
    - white-space: nowrap;
    - cursor: pointer;
    -}
    -
    -@sprite .over {
    - gwt-image: 'selectedBackground';
    - height: auto;
    - border: 1px dotted #DDDDDD !important;
    - cursor: pointer;
    -}
    -
    -.sel {
    - background: none repeat scroll 0 50% #DFE8F6;
    - border: 1px dotted #A3BAE9 !important;
    - cursor: pointer;
    -}
    -
    Index: src/main/java/com/sencha/gxt/widget/core/client/ListViewCustomAppearance.java
    ===================================================================
    --- src/main/java/com/sencha/gxt/widget/core/client/ListViewCustomAppearance.java (revision 2750)
    +++ src/main/java/com/sencha/gxt/widget/core/client/ListViewCustomAppearance.java (working copy)
    @@ -11,7 +11,7 @@
    import com.sencha.gxt.widget.core.client.ListView.ListViewAppearance;

    @SuppressWarnings("javadoc")
    -public abstract class ListViewCustomAppearance<M> implements ListViewAppearance<M> {
    +public abstract class ListViewCustomAppearance implements ListViewAppearance {

    protected String itemSelector;
    protected String overStyle;
    Index: src/main/java/com/sencha/gxt/widget/core/client/ListViewDefaultAppearance.java
    ===================================================================
    --- src/main/java/com/sencha/gxt/widget/core/client/ListViewDefaultAppearance.java (revision 2750)
    +++ src/main/java/com/sencha/gxt/widget/core/client/ListViewDefaultAppearance.java (working copy)
    @@ -1,75 +0,0 @@
    -package com.sencha.gxt.widget.core.client;
    -
    -import java.util.ArrayList;
    -import java.util.List;
    -
    -import com.google.gwt.core.client.GWT;
    -import com.google.gwt.dom.client.Element;
    -import com.google.gwt.dom.client.NodeList;
    -import com.google.gwt.safehtml.shared.SafeHtml;
    -import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
    -import com.sencha.gxt.core.client.dom.XElement;
    -import com.sencha.gxt.widget.core.client.ListView.ListViewAppearance;
    -import com.sencha.gxt.widget.core.client.ListView.ListViewDefaultResources;
    -import com.sencha.gxt.widget.core.client.ListView.ListViewDefaultStyle;
    -
    -@SuppressWarnings("javadoc")
    -public class ListViewDefaultAppearance<M> implements ListViewAppearance<M> {
    -
    - protected ListViewDefaultResources resources;
    - protected ListViewDefaultStyle style;
    -
    - public ListViewDefaultAppearance() {
    - this.resources = GWT.create(ListViewDefaultResources.class);
    - this.style = resources.css();
    - this.style.ensureInjected();
    - }
    -
    - @Override
    - public Element findCellParent(XElement item) {
    - return item;
    - }
    -
    - @Override
    - public Element findElement(XElement child) {
    - return child.findParentElement("." + style.item(), 10);
    - }
    -
    - @Override
    - public List<Element> findElements(XElement parent) {
    - NodeList<Element> nodes = parent.select("." + style.item());
    - List<Element> temp = new ArrayList<Element>();
    - for (int i = 0; i < nodes.getLength(); i++) {
    - temp.add(nodes.getItem(i));
    - }
    -
    - return temp;
    - }
    -
    - @Override
    - public void onOver(XElement item, boolean over) {
    - item.setClassName(style.over(), over);
    - }
    -
    - @Override
    - public void onSelect(XElement item, boolean select) {
    - item.setClassName(style.sel(), select);
    - }
    -
    - @Override
    - public void render(SafeHtmlBuilder builder) {
    - builder.appendHtmlConstant("<div class=\"" + style.view() + "\"></div>");
    - }
    -
    - @Override
    - public void renderEnd(SafeHtmlBuilder builder) {
    - }
    -
    - @Override
    - public void renderItem(SafeHtmlBuilder sb, SafeHtml content) {
    - sb.appendHtmlConstant("<div class='" + style.item() + "'>");
    - sb.append(content);
    - sb.appendHtmlConstant("</div>");
    -
    - }
    -}
    \ No newline at end of file
    Index: src/main/java/com/sencha/gxt/widget/core/client/ListView.java
    ===================================================================
    --- src/main/java/com/sencha/gxt/widget/core/client/ListView.java (revision 2750)
    +++ src/main/java/com/sencha/gxt/widget/core/client/ListView.java (working copy)
    @@ -19,9 +19,6 @@
    import com.google.gwt.event.shared.HandlerRegistration;
    import com.google.gwt.resources.client.ClientBundle;
    import com.google.gwt.resources.client.CssResource;
    -import com.google.gwt.resources.client.ImageResource;
    -import com.google.gwt.resources.client.ImageResource.ImageOptions;
    -import com.google.gwt.resources.client.ImageResource.RepeatStyle;
    import com.google.gwt.safehtml.shared.SafeHtml;
    import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
    import com.google.gwt.safehtml.shared.SafeHtmlUtils;
    @@ -159,7 +156,7 @@
    *
    * @param <M> the model type
    */
    - public interface ListViewAppearance<M> {
    + public interface ListViewAppearance {

    /**
    * Returns the cell's parent element if it exists. Default implementation
    @@ -223,58 +220,31 @@
    * @param content the item content
    */
    void renderItem(SafeHtmlBuilder builder, SafeHtml content);
    -
    +
    + /**
    + * Returns the resources of the list view
    + */
    + ListViewResources resources();
    }

    /**
    * The default resources for the list view.
    */
    - public interface ListViewDefaultResources extends ClientBundle {
    + public interface ListViewResources extends ClientBundle {
    /**
    * Returns the default list view style names.
    *
    * @return the default list view style names
    */
    - @Source("ListView.css")
    - ListViewDefaultStyle css();
    -
    - /**
    - * Returns the image resource for the selected item background.
    - *
    - * @return selected background image resource
    - */
    - @ImageOptions(repeatStyle = RepeatStyle.Horizontal)
    - ImageResource selectedBackground();
    + ListViewStyle css();
    }

    /**
    * The default styles for the list view.
    */
    - public interface ListViewDefaultStyle extends CssResource {
    + public interface ListViewStyle extends CssResource {

    /**
    - * Returns the name of the style representing the item.
    - *
    - * @return the style for the item
    - *
    - */
    - String item();
    -
    - /**
    - * Returns the name of the style representing the cursor over state.
    - *
    - * @return the style for the cursor over state
    - */
    - String over();
    -
    - /**
    - * Returns the name of the style representing the selected state.
    - *
    - * @return the style of the selected state
    - */
    - String sel();
    -
    - /**
    * Returns the name of the style representing the list view root.
    *
    * @return the style of the list view
    @@ -282,22 +252,22 @@
    String view();
    }

    - private static ListViewDefaultResources standardResources;
    + private static ListViewResources standardResources;

    /**
    * Returns the default resources for the list view.
    *
    * @return the default resources
    */
    - public static ListViewDefaultResources getStandardResources() {
    + public static ListViewResources getStandardResources() {
    if (standardResources == null) {
    - standardResources = GWT.create(ListViewDefaultResources.class);
    + standardResources = ((ListViewAppearance)GWT.create(ListViewAppearance.class)).resources();
    standardResources.css().ensureInjected();
    }
    return standardResources;
    }

    - protected ListViewAppearance<M> appearance;
    + protected ListViewAppearance appearance;
    protected XElement focusEl;
    protected final FocusImpl focusImpl = FocusImpl.getFocusImplForPanel();

    @@ -328,7 +298,7 @@
    * @param valueProvider the value provider
    */
    public ListView(ListStore<M> store, ValueProvider<? super M, N> valueProvider) {
    - this(store, valueProvider, new ListViewDefaultAppearance<M>());
    + this(store, valueProvider, (ListViewAppearance) GWT.create(ListViewAppearance.class));
    }

    /**
    @@ -339,7 +309,7 @@
    * @param cell the cell
    */
    public ListView(ListStore<M> store, ValueProvider<? super M, N> valueProvider, Cell<N> cell) {
    - this(store, valueProvider, new ListViewDefaultAppearance<M>());
    + this(store, valueProvider, (ListViewAppearance) GWT.create(ListViewAppearance.class));
    setCell(cell);
    }

    @@ -350,7 +320,7 @@
    * @param valueProvider the value provider
    * @param appearance the appearance
    */
    - public ListView(final ListStore<M> store, ValueProvider<? super M, N> valueProvider, ListViewAppearance<M> appearance) {
    + public ListView(final ListStore<M> store, ValueProvider<? super M, N> valueProvider, ListViewAppearance appearance) {
    this.appearance = appearance;
    this.valueProvider = valueProvider;
    setSelectionModel(new ListViewSelectionModel<M>());

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    70
    Vote Rating
    6
    mtraynham is on a distinguished road

      0  

    Default


    I was still getting a rebind error, but referencing that the Resulting type must be a class. Could be because ListViewCustomAppearance is abstract.

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    12
    Vote Rating
    0
    hphung is on a distinguished road

      0  

    Default


    I'm also wanting to style my ListViews. Is there a reason why this does not follow the pattern of all the other Appearances?

    Thanks

  5. #5
    Ext GWT Premium Member lefke123's Avatar
    Join Date
    Dec 2011
    Location
    Belgium
    Posts
    76
    Vote Rating
    2
    lefke123 is on a distinguished road

      0  

    Default


    I'd love an actual reply on the thread, seeing as I'm running into the exact same issue. I need to style my lists, but the way the code is designed is blocking an implementation.

    Could someone comment on this, or suggest a workaround?

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    70
    Vote Rating
    6
    mtraynham is on a distinguished road

      0  

    Default


    Just create a class called ExtendedListView that looks like the following:

    Code:
    package com.digitalsmiths.admin.client.util.gxtExtended.listview;
    
    
    import com.google.gwt.cell.client.Cell;
    import com.google.gwt.core.client.GWT;
    import com.sencha.gxt.core.client.ValueProvider;
    import com.sencha.gxt.data.shared.ListStore;
    import com.sencha.gxt.widget.core.client.ListView;
    
    
    public class ExtendedListView<M, N> extends ListView<M, N> {
    	/**
    	 * Creates a new list view.
    	 * 
    	 * @param store the store
    	 * @param valueProvider the value provider
    	 */
    	@SuppressWarnings("unchecked")
    	public ExtendedListView(ListStore<M> store, ValueProvider<? super M, N> valueProvider) {
    		this(store, valueProvider, (ListViewAppearance<M>)GWT.create(ListViewAppearance.class));
    	}
    
    
    	/**
    	 * Creates a new list view.
    	 * 
    	 * @param store the store
    	 * @param valueProvider the value provider
    	 * @param cell the cell
    	 */
    	@SuppressWarnings("unchecked")
    	public ExtendedListView(ListStore<M> store, ValueProvider<? super M, N> valueProvider, Cell<N> cell) {
    		this(store, valueProvider, (ListViewAppearance<M>)GWT.create(ListViewAppearance.class));
    		setCell(cell);
    	}
    
    
    	/**
    	 * Creates a new list view.
    	 * 
    	 * @param store the store
    	 * @param valueProvider the value provider
    	 * @param appearance the appearance
    	 */
    	public ExtendedListView(final ListStore<M> store, ValueProvider<? super M, N> valueProvider, ListViewAppearance<M> appearance) {
    		super(store, valueProvider, appearance);
    	}
    }
    Now in your .gwt.xml Module file put the following:
    Code:
      <replace-with class="com.sencha.gxt.widget.core.client.ListViewDefaultAppearance">
        <when-type-is class="com.sencha.gxt.widget.core.client.ListView.ListViewAppearance" />
      </replace-with>
    This will simulate the default appearance that was hardcoded in GXT, but you could inject another Appearance that implements ListViewAppearance if necessary.

Thread Participants: 2