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 <[email protected]>
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 <[email protected]>
> 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 <[email protected]>
>> Reply-To: qooxdoo Development <[email protected]>
>> Date: Tuesday, 18 August 2015 12:08
>>
>> To: qooxdoo Development <[email protected]>
>> 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 <[email protected]>
>> 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 <[email protected]>
>>> 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 <[email protected]>
>>>> Reply-To: qooxdoo Development <[email protected]>
>>>> Date: Tuesday, 18 August 2015 08:43
>>>> To: qooxdoo Development <[email protected]>
>>>> 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 <[email protected]>
>>>> 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 <[email protected]>
>>>>> wrote:
>>>>>
>>>>>> this.classname
>>>>>> "qx.ui.core.queue.Manager"
>>>>>>
>>>>>> this.hf is undefined
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Tue, Aug 18, 2015 at 2:02 PM, Phyo Arkar <[email protected]
>>>>>> > wrote:
>>>>>>
>>>>>>>
>>>>>>> On Tue, Aug 18, 2015 at 1:57 PM, John Spackman <
>>>>>>> [email protected]> wrote:
>>>>>>>
>>>>>>>> typeof hf
>>>>>>>>
>>>>>>>
>>>>>>> Thanks , i am working on it.
>>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>> ------------------------------------------------------------------------------
>>>> _______________________________________________ qooxdoo-devel mailing list
>>>> [email protected]
>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>
>>>>
>>>> ------------------------------------------------------------------------------
>>>>
>>>> _______________________________________________
>>>> qooxdoo-devel mailing list
>>>> [email protected]
>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>
>>>>
>>>
>> ------------------------------------------------------------------------------
>> _______________________________________________ qooxdoo-devel mailing list
>> [email protected]
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>>
>> ------------------------------------------------------------------------------
>>
>> _______________________________________________
>> qooxdoo-devel mailing list
>> [email protected]
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>>
>
------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
