I added wrong code for Application.js , Disregard previous post. Here is
the correct one :
qx.Class.define("vlistest.Application",
{
extend : qx.application.Standalone,
members :
{
main : function()
{
this.base(arguments);
if (qx.core.Environment.get("qx.debug"))
{
qx.log.appender.Native;
qx.log.appender.Console;
}
var rawData = [];
for (var i = 0; i < 100000; i++)
{
rawData[i] = {
label: "Item No " + i,
icon: "16"
}
}
var model = qx.data.marshal.Json.createModel(rawData);
var list = this.__configList = new qx.ui.list.List(model).set({
scrollbarX: "on",
selectionMode : "one",
height: 400,
width: 150,
labelPath: "label",
iconPath: "icon",
iconOptions: {converter : function(data) {
return
"http://demo.qooxdoo.org/current/demobrowser/resource/qx/icon/Tango/";
+ data + "/places/folder.png";
}}
});
var that = this;
this.getRoot().add(list);
var btn1 = new qx.ui.form.Button("add new one and scroll");
this.getRoot().add(btn1, {top : 350, left : 200});
btn1.addListener("execute", function() {
model.push(qx.data.marshal.Json.createModel({
label: "LastONE",
icon: 16
}));
list.getChildControl("pane").scrollRowIntoView(model.getLength()-1);
}, this);
}
}
});
here is the appearance , i overridden listitem and margin of 100:
qx.Theme.define("vlistest.theme.Appearance",
{
extend : qx.theme.indigo.Appearance,
appearances :
{
"list" :
{
alias : "scrollarea",
include : "textfield"
},
"listitem" :
{
alias : "atom",
style : function(states)
{
var padding = [3, 5, 3, 5];
if (states.lead) {
padding = [ 2, 4 , 2, 4];
}
if (states.dragover) {
padding[2] -= 2;
}
var backgroundColor;
if (states.selected) {
backgroundColor = "background-selected"
if (states.disabled) {
backgroundColor += "-disabled";
}
}
return {
gap : 4,
marginBottom : 100,
padding : padding,
backgroundColor : backgroundColor,
textColor : states.selected ? "text-selected" : undefined,
decorator : states.lead ? "lead-item" : states.dragover ?
"dragover" : "chatitem",
opacity : states.drag ? 0.5 : undefined
};
}
}
}
});
Here is the decoration, i added a shadow border
qx.Theme.define("vlistest.theme.Decoration",
{
extend : qx.theme.indigo.Decoration,
decorations :
{
"chatitem": {
style: {
width: 0,
shadowColor: "shadow",
shadowBlurRadius: 1,
widthBottom: 2,
color: "rgb(217, 217, 217)",
backgroundColor: "transparent"
}
}
}
});
------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
