Wow , thanks alot John for this valuable suggestion and helping me out , thats awesome! I will try to implement that and if it works i will share the results. I have also create an issue , to see response from Core devs, when they back from vacation.
Awesome man , thanks a lot. So i will leave this for now and do other things for phwa.be (We need Channel list and user list there urgent! :) I also created a channel for qooxdoo there http://phwa.be/c/qooxdoo On Tue, Aug 18, 2015 at 8:20 PM, John Spackman <john-li...@zenesis.com> wrote: > 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.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 >>>> >>>> >>>> ------------------------------------------------------------------------------ >>>> >>>> _______________________________________________ >>>> 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 >> >> > ------------------------------------------------------------------------------ > _______________________________________________ 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
