So the virtual stuff handles its own layouting and you’re right does not
appear to support margin. Actually it doesn’t support padding via
appearances either because the code has to specify the row height (try
setting the padding really high, e.g. 100 top and bottom to see how that
breaks the appearance).
It seems like the only way to fix this is to implement your own class that
derives from qx.ui.form.ListItem and then implement your own layout within
the ListItem. You make it creates instances of your ListItem derived class
by providing your own WidgetProvider, but I’m not sure how you would hook
that up to your qx.ui.list.List (although it definitely uses one). A Canvas
layout would probably be fine in your ListItem, just set the default height
for cells to match the layouting that you do.
John
From: Phyo Arkar <phyo.arkarl...@gmail.com>
Reply-To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
Date: Tuesday, 18 August 2015 14:36
To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
Subject: Re: [qooxdoo-devel] Set margin between listitems
I have updated another post , i posted a wrong file.
For the test , yes i overridden on purpose to override all listitems to make
sure.
I have attached full test tar.gz
On Tue, Aug 18, 2015 at 7:50 PM, John Spackman <john-li...@zenesis.com>
wrote:
> 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/lis
>>>>> tinfo/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/listi
>>> nfo/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/listinf
> o/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
