ListView and horizontal scroll - what am I doing wrong

[|ZUTI|]

Simple, in the below code I am using listview for showing quite simple items. Basically a little icon with a name beside it. The name can be quite long so I need the listview to be able to show horizontal scroll bar. Vertical one shows fine when needed.

Here is the simple code

public class FoldersListWidget implements IsWidget
{
	/**
	 * Static factory for creating class instances.
	 * 
	 * @param constants
	 * @return
	 */
	public static FoldersListWidget createNewInstance(ZPortalConstants constants)
	{
		return new FoldersListWidget(constants);
	}
	
	private class ZSafeUri implements SafeUri
	{
		private String value;
		
		protected ZSafeUri(String value)
		{
			this.value = value;
		}
		@Override
		public String asString()
		{
			return value;
		}
	}
	
	interface Renderer extends XTemplates
	{
		@XTemplate("<div><img title='{title}' style='width:16px; height:16px; vertical-align:middle;' src='{base64}'><span title='{title}'> {name}</span></div>")
		SafeHtml renderItem(SafeUri base64, String name, String title);
	}
	
	private VerticalLayoutContainer mainWidget;
	
	private Renderer renderer;
	private ListStore<FileModel> listStore;
	private ListView<FileModel, FileModel> listView;
	
	public FoldersListWidget(ZPortalConstants constants)
	{
		initWidget();
	}
	
	private void initWidget()
	{
		renderer = GWT.create(Renderer.class);
		ModelKeyProvider<FileModel> kp = new ModelKeyProvider<FileModel>()
		{
			@Override
			public String getKey(FileModel item)
			{
				return item.getTreePath();
			}
		};
		listStore = new ListStore<FileModel>(kp);
		listView = new ListView<FileModel, FileModel>(listStore, new IdentityValueProvider<FileModel>()
		{
			@Override
			public void setValue(FileModel object, FileModel value)
			{	


			}
		});
		listView.setCell(new SimpleSafeHtmlCell<FileModel>(new AbstractSafeHtmlRenderer<FileModel>()
		{
			@Override
			public SafeHtml render(FileModel object)
			{
				return renderer.renderItem(new ZSafeUri(object.getPresentationImage()), object.getName(), object.getDescription());
			}
		}));
		
		mainWidget = new VerticalLayoutContainer();
		mainWidget.add(listView, new VerticalLayoutData(1, 1));
	}
	
	public void prepareList(ArrayList<BaseBean> content)
	{
		List<ZPortalModel> models = BeanConverter.getZPortalModels(content);
		for (ZPortalModel model : models)
		{
			if( model instanceof FileModel )
			{
				FileModel imageModel = (FileModel)model;
				listStore.add(imageModel);
			}
		}
	}
	
	@Override
	public Widget asWidget()
	{
		return this.mainWidget;
	}
}

The "FileModel" class is just some simple bean that can be used in the list and has image as base64 encoded string with the name. Nothing fancy here. I am showing the vertical layout container then in a window.

Like I mentioned, vertical scroll is OK, horizontal does not show. What have I missed.

Thanks.

[Stetograph]

Hey ZUTI,

I am new to GXT so not sure if this is a very qualified or correct answer.
But maybe try to set the width for the listview.
I did similar stuff for a tree grid. Scrolling works fine, when giving a width constraint, like width: 200px for horizontal scrolling and a height constraint for vertical scrolling.
I think, the reason is, that the List needs to know when to render the scroll bar. This can only be known if you have specified it explicitly.


Greetings
Stefan

PS: let me know please, if it works after giving width-constraint.

[|ZUTI|]

Hey.

No, that does not work. What the problem was that I NEEDED to set appearance for the list. With the default one the horizontal scroll would not shot. As soon as I created my onw appearance the horizontal scroll showed.

Cheers.