I don’t see where you’re setting the appearance; what happens if you modify
vlistest.listItem’s properties to:
properties: { content: { apply: "_applyPost", nullable: true },
appearance: {
init: "listitem",
refine: true
} },
Or alternatively, what happens if you add this to your Appearance.js:
"control" : { alias : "atom", style : function(states) {
return { padding: [20,10] };
}
}
As an aside, “listitem" is also the name of a standard appearance and you
might want to choose a different name unless you want all listitems to have
your new style
John
From: Phyo Arkar <phyo.arkarl...@gmail.com>
Reply-To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
Date: Tuesday, 18 August 2015 14:11
To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
Subject: Re: [qooxdoo-devel] Set margin between listitems
I’ve tested to make sure if my code is the problem , unfortunately it isn’t.
Setting Margin of ListItem Dosen’t work in default virtual-list with default
listItem either.
here is the code:
qx.Class.define("vlistest.listItem", {
extend: qx.ui.core.Widget,
include: [qx.ui.form.MModelProperty],
construct: function() {
this.base(arguments);
var chat_grid = new qx.ui.layout.Grid();
chat_grid.setColumnFlex(1, 1);
this._createChildControl("content");
},
properties: {
content: {
apply: "_applyPost",
nullable: true
}
},
members: {
_createChildControlImpl: function(id) {
var that = this;
var control;
switch (id) {
case "content":
control = new qx.ui.basic.Label();
control.addListener("mouseover", function() {
control.setSelectable(this.hasState("selected"))
control.setNativeContextMenu(this.hasState("selected"))
}, this)
control.addListener("mouseout", function() {
control.setSelectable(false)
control.setNativeContextMenu(false)
}, this)
control.setWrap(true)
control.setAllowGrowX(true);
control.setRich(true);
control.set({
appearance: "content"
});
this.add(control, {
row: 0,
column: 0,
colSpan: 4
});
break;
return control || this.base(arguments, id);
},
_applyPost: function(value, old) {
var content = this.getChildControl("content");
content.setValue(value);
// console.log(value)
}
}
}
});
here is the appearance , i over written 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"
}
}
}
});
On Tue, Aug 18, 2015 at 6:18 PM, Phyo Arkar <phyo.arkarl...@gmail.com>
wrote:
> Thanks John , i am creating a new qooxdoo app to test it out.
>
> On Tue, Aug 18, 2015 at 5:51 PM, John Spackman <john-li...@zenesis.com> wrote:
>> Not having used virtual before I’m shooting in the dark a bit here, but I can
>> see from the demo browser (at
>> http://demo.qooxdoo.org/devel/demobrowser/#virtual~List.html) that a List
>> contains qx.ui.virtual.layer.WidgetCell and inside it is a
>> qx.ui.form.ListItem.
>>
>> That means that you can change the gap layout using an appearance, in exactly
>> the way as we both did earlier. The error you had before looks like whatever
>> you were setting the appearance property of, it wasn’t a ListItem (were you
>> setting WidgetCell.appearance instead?)
>>
>> John
>>
>> From: Phyo Arkar <phyo.arkarl...@gmail.com>
>> Reply-To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>> Date: Tuesday, 18 August 2015 12:08
>>
>> To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>> Subject: Re: [qooxdoo-devel] Set margin between listitems
>>
>> So what i just need now : Able to set margin for listItems to increase
>> Independant Gap between List Items, so that we can set on
>> Decorators/Boxshadows on listitems without overlapping each other.
>>
>> That would be quite easy if a QOoxdoo Core Dev can Enlighten us.
>>
>> On Tue, Aug 18, 2015 at 2:37 PM, Phyo Arkar <phyo.arkarl...@gmail.com> wrote:
>>> Thanks , the paddings works , but the margin dosen't
>>>
>>> on http://phwa.be , we hacked it by adding a component around the list item
>>> , but that implemention is slow and when virtual listitems resizes (images ,
>>> video , etc) it dosen't resize sometimes.
>>>
>>> Thats why i am trying to see if Margin can be set between list items (You
>>> can set Margin , but It never got effected , when look into inspector ,
>>> there is NO margin property set for list items , but any other widget is
>>> fine , which is very weird).
>>>
>>> Paddings will just make list items wider , not like margin.
>>>
>>> On Tue, Aug 18, 2015 at 2:19 PM, John Spackman <john-li...@zenesis.com>
>>> wrote:
>>>> Ah, I missed the bit about virtual lists, sorry.
>>>>
>>>> Yes, in Atom its the gap between the icon and the label; if you’re using a
>>>> completely custom widget then the layouting inside the object is up to the
>>>> widget, so you would have to tell that layout to move the text over. The
>>>> margins and paddings on the widget would still work though (although I’ve
>>>> not used the virtual widget I imagine that’s the case)
>>>>
>>>> John
>>>>
>>>> From: Phyo Arkar <phyo.arkarl...@gmail.com>
>>>> Reply-To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>>>> Date: Tuesday, 18 August 2015 08:43
>>>> To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>>>> Subject: Re: [qooxdoo-devel] Set margin between listitems
>>>>
>>>> I think it is due to , not using atom. I am using custom widget. and Gap is
>>>> only horizontal space between objects right?
>>>>
>>>> On Tue, Aug 18, 2015 at 2:12 PM, Phyo Arkar <phyo.arkarl...@gmail.com>
>>>> wrote:
>>>>> i am using virtual lis t(list.List) , is it because of that?
>>>>>
>>>>> going to test your code , thanks lots!
>>>>>
>>>>> On Tue, Aug 18, 2015 at 2:11 PM, Phyo Arkar <phyo.arkarl...@gmail.com>
>>>>> wrote:
>>>>>> this.classname
>>>>>> "qx.ui.core.queue.Manager"
>>>>>>
>>>>>> this.hf is undefined
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Tue, Aug 18, 2015 at 2:02 PM, Phyo Arkar <phyo.arkarl...@gmail.com>
>>>>>> wrote:
>>>>>>>
>>>>>>> On Tue, Aug 18, 2015 at 1:57 PM, John Spackman <john-li...@zenesis.com>
>>>>>>> wrote:
>>>>>>> typeof hf
>>>>>>>
>>>>>>> Thanks , i am working on it.
>>>>>>
>>>>>
>>>>
>>>> ---------------------------------------------------------------------------
>>>> --- _______________________________________________ qooxdoo-devel mailing
>>>> list
>>>> qooxdoo-devel@lists.sourceforge.nethttps://lists.sourceforge.net/lists/list
>>>> info/qooxdoo-devel
>>>>
>>>> ---------------------------------------------------------------------------
>>>> ---
>>>>
>>>> _______________________________________________
>>>> qooxdoo-devel mailing list
>>>> qooxdoo-devel@lists.sourceforge.net
>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>
>>>
>>
>> -----------------------------------------------------------------------------
>> - _______________________________________________ qooxdoo-devel mailing list
>> qooxdoo-devel@lists.sourceforge.nethttps://lists.sourceforge.net/lists/listin
>> fo/qooxdoo-devel
>>
>>
----------------------------------------------------------------------------->>
-
>>
>> _______________________________________________
>> qooxdoo-devel mailing list
>> qooxdoo-devel@lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>
----------------------------------------------------------------------------
-- _______________________________________________ qooxdoo-devel mailing
list qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
