How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

classic Classic list List threaded Threaded
30 messages Options
12
Reply | Threaded
Open this post in threaded view
|

How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,

  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,

    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },

    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {

          qx.ui.core.queue.Widget.add(this, 'updateSize');

        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }

      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }

      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)

        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }

    }
  }
});

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar

On Mon, Jun 15, 2015 at 4:52 PM, Phyo Arkar <[hidden email]> wrote:
, if it updated for 3 times , scrolls to button

I meant scrolled to bottom

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar
Nobody can help? 
It should be quite simple to do in qooxdoo, i must be missing something, i had dig into pane and listend update too , can't help me.

On Tue, Jun 16, 2015 at 12:59 PM, Phyo Arkar <[hidden email]> wrote:

On Mon, Jun 15, 2015 at 4:52 PM, Phyo Arkar <[hidden email]> wrote:
, if it updated for 3 times , scrolls to button

I meant scrolled to bottom


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Mustafa Sak-5
In reply to this post by Phyo Arkar

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)
 
        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }
 
    }
  }
});


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar
Thanks a lot for helping me out!
When a singile last one is added its ok .
When multiple LastOnes are added it dosen't scroll to bottom.
Any thoughts?   

On Wed, Jun 17, 2015 at 1:47 PM, Mustafa Sak <[hidden email]> wrote:

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)
 
        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }
 
    }
  }
});


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar
  I can't see the scroll bar , it was hidden on purpose?

On Wed, Jun 17, 2015 at 3:19 PM, Phyo Arkar <[hidden email]> wrote:
Thanks a lot for helping me out!
When a singile last one is added its ok .
When multiple LastOnes are added it dosen't scroll to bottom.
Any thoughts?   

On Wed, Jun 17, 2015 at 1:47 PM, Mustafa Sak <[hidden email]> wrote:

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)
 
        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }
 
    }
  }
});


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel




------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Mustafa Sak-5

You are using Chrome right?

 

Would you please report a bug?

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Mittwoch, 17. Juni 2015 10:51
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

  I can't see the scroll bar , it was hidden on purpose?

 

On Wed, Jun 17, 2015 at 3:19 PM, Phyo Arkar <[hidden email]> wrote:

Thanks a lot for helping me out!

When a singile last one is added its ok .

When multiple LastOnes are added it dosen't scroll to bottom.

Any thoughts?   

 

On Wed, Jun 17, 2015 at 1:47 PM, Mustafa Sak <[hidden email]> wrote:

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)
 
        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }
 
    }
  }
});

 

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

 

 


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar
About disaapearing Scrollbars on Chrome? Ok i will file one.
It dosen't appear in my code tho.

On Wed, Jun 17, 2015 at 8:55 PM, Mustafa Sak <[hidden email]> wrote:

You are using Chrome right?

 

Would you please report a bug?

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Mittwoch, 17. Juni 2015 10:51
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

  I can't see the scroll bar , it was hidden on purpose?

 

On Wed, Jun 17, 2015 at 3:19 PM, Phyo Arkar <[hidden email]> wrote:

Thanks a lot for helping me out!

When a singile last one is added its ok .

When multiple LastOnes are added it dosen't scroll to bottom.

Any thoughts?   

 

On Wed, Jun 17, 2015 at 1:47 PM, Mustafa Sak <[hidden email]> wrote:

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)
 
        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }
 
    }
  }
});

 

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

 

 


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar
After trying to remember what my bugzilla pass , i had filed a bug. Bugzilla needs OAuth support badly.



On Wed, Jun 17, 2015 at 9:29 PM, Phyo Arkar <[hidden email]> wrote:
About disaapearing Scrollbars on Chrome? Ok i will file one.
It dosen't appear in my code tho.

On Wed, Jun 17, 2015 at 8:55 PM, Mustafa Sak <[hidden email]> wrote:

You are using Chrome right?

 

Would you please report a bug?

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Mittwoch, 17. Juni 2015 10:51
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

  I can't see the scroll bar , it was hidden on purpose?

 

On Wed, Jun 17, 2015 at 3:19 PM, Phyo Arkar <[hidden email]> wrote:

Thanks a lot for helping me out!

When a singile last one is added its ok .

When multiple LastOnes are added it dosen't scroll to bottom.

Any thoughts?   

 

On Wed, Jun 17, 2015 at 1:47 PM, Mustafa Sak <[hidden email]> wrote:

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)
 
        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }
 
    }
  }
});

 

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

 

 


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel




------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar

I cant get to work properly with the example you gave , it always out of scroll position after adding more than 1 item.

here is only working solution so far but very dirty.

If there any better solution?

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,

  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
    __resizeCount:0,

    _initLayer: function() {
      this.base(arguments);
      this._layer.addListener("updated", this._onUpdated, this);
      // this.getPane().addListener("update", this._scrollBottom, this)
    },

    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {

          qx.ui.core.queue.Widget.add(this, 'updateSize');

        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function(callback) {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      // console.log(rowSize)
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          var current_height = this.getPane().getRowConfig().getItemSize(row);
          if (height !== current_height) {
            this.getPane().getRowConfig().setItemSize(row, height);
            console.log("resizing")

          }

        }

      }
      callback()
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.getPane().setScrollY(1e99)
        this.scrollToY(1e99)
        var lastrow =  this.getModel().length -1;
        console.log(lastrow)
        this.getPane().scrollRowIntoView(lastrow)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }

      }
    },
  syncWidget: function(jobs) {
    var that = this
    if (jobs.scrollBottom & jobs.updateSize) {
      console.log(jobs)
      this.__scrollBottom = true
      this.__updateCount = 0
      this._updateSize(function(){
        that._scrollBottom(6)
      })
      console.log("BOTH JOBS no of updates" + this.__updateCount)

      this.__updateCount += 1
    } else if (jobs.scrollBottom) {
      this.__scrollBottom = true
      this.__updateCount = 0
    } else if (jobs.updateSize) {
      this._updateSize(function(){
        that._scrollBottom(3)
      })
      this.__updateCount += 1
      console.log("no of updates" + this.__updateCount)
    }



  }
}
});

On Mon, Jun 22, 2015 at 2:11 AM, Phyo Arkar <[hidden email]> wrote:
After trying to remember what my bugzilla pass , i had filed a bug. Bugzilla needs OAuth support badly.



On Wed, Jun 17, 2015 at 9:29 PM, Phyo Arkar <[hidden email]> wrote:
About disaapearing Scrollbars on Chrome? Ok i will file one.
It dosen't appear in my code tho.

On Wed, Jun 17, 2015 at 8:55 PM, Mustafa Sak <[hidden email]> wrote:

You are using Chrome right?

 

Would you please report a bug?

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Mittwoch, 17. Juni 2015 10:51
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

  I can't see the scroll bar , it was hidden on purpose?

 

On Wed, Jun 17, 2015 at 3:19 PM, Phyo Arkar <[hidden email]> wrote:

Thanks a lot for helping me out!

When a singile last one is added its ok .

When multiple LastOnes are added it dosen't scroll to bottom.

Any thoughts?   

 

On Wed, Jun 17, 2015 at 1:47 PM, Mustafa Sak <[hidden email]> wrote:

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)
 
        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }
 
    }
  }
});

 

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

 

 


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel





------------------------------------------------------------------------------
Monitor 25 network devices or servers for free with OpManager!
OpManager is web-based network management software that monitors
network devices and physical & virtual servers, alerts via email & sms
for fault. Monitor 25 devices for free with no restriction. Download now
http://ad.doubleclick.net/ddm/clk/292181274;119417398;o
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar
Another separated but related problem is size of scrollbar knob changed and irregular scrollbar position when list item is reized (huge list item) , how can i sync that?

On Tue, Jun 23, 2015 at 12:39 AM, Phyo Arkar <[hidden email]> wrote:

I cant get to work properly with the example you gave , it always out of scroll position after adding more than 1 item.

here is only working solution so far but very dirty.

If there any better solution?

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,

  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
    __resizeCount:0,

    _initLayer: function() {
      this.base(arguments);
      this._layer.addListener("updated", this._onUpdated, this);
      // this.getPane().addListener("update", this._scrollBottom, this)
    },

    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {

          qx.ui.core.queue.Widget.add(this, 'updateSize');

        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function(callback) {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      // console.log(rowSize)
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          var current_height = this.getPane().getRowConfig().getItemSize(row);
          if (height !== current_height) {
            this.getPane().getRowConfig().setItemSize(row, height);
            console.log("resizing")

          }

        }

      }
      callback()
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.getPane().setScrollY(1e99)
        this.scrollToY(1e99)
        var lastrow =  this.getModel().length -1;
        console.log(lastrow)
        this.getPane().scrollRowIntoView(lastrow)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }

      }
    },
  syncWidget: function(jobs) {
    var that = this
    if (jobs.scrollBottom & jobs.updateSize) {
      console.log(jobs)
      this.__scrollBottom = true
      this.__updateCount = 0
      this._updateSize(function(){
        that._scrollBottom(6)
      })
      console.log("BOTH JOBS no of updates" + this.__updateCount)

      this.__updateCount += 1
    } else if (jobs.scrollBottom) {
      this.__scrollBottom = true
      this.__updateCount = 0
    } else if (jobs.updateSize) {
      this._updateSize(function(){
        that._scrollBottom(3)
      })
      this.__updateCount += 1
      console.log("no of updates" + this.__updateCount)
    }



  }
}
});

On Mon, Jun 22, 2015 at 2:11 AM, Phyo Arkar <[hidden email]> wrote:
After trying to remember what my bugzilla pass , i had filed a bug. Bugzilla needs OAuth support badly.



On Wed, Jun 17, 2015 at 9:29 PM, Phyo Arkar <[hidden email]> wrote:
About disaapearing Scrollbars on Chrome? Ok i will file one.
It dosen't appear in my code tho.

On Wed, Jun 17, 2015 at 8:55 PM, Mustafa Sak <[hidden email]> wrote:

You are using Chrome right?

 

Would you please report a bug?

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Mittwoch, 17. Juni 2015 10:51
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

  I can't see the scroll bar , it was hidden on purpose?

 

On Wed, Jun 17, 2015 at 3:19 PM, Phyo Arkar <[hidden email]> wrote:

Thanks a lot for helping me out!

When a singile last one is added its ok .

When multiple LastOnes are added it dosen't scroll to bottom.

Any thoughts?   

 

On Wed, Jun 17, 2015 at 1:47 PM, Mustafa Sak <[hidden email]> wrote:

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)
 
        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }
 
    }
  }
});

 

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

 

 


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel






------------------------------------------------------------------------------
Monitor 25 network devices or servers for free with OpManager!
OpManager is web-based network management software that monitors
network devices and physical & virtual servers, alerts via email & sms
for fault. Monitor 25 devices for free with no restriction. Download now
http://ad.doubleclick.net/ddm/clk/292181274;119417398;o
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Mustafa Sak-5

Hi,

 

it is much easier for us to answer if you provide us with an playground example. But anyway, dealing with different sizes on a virtual widget is difficult, so we are not always able to help with concrete code examples.

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 22. Juni 2015 20:18
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Another separated but related problem is size of scrollbar knob changed and irregular scrollbar position when list item is reized (huge list item) , how can i sync that?

 

On Tue, Jun 23, 2015 at 12:39 AM, Phyo Arkar <[hidden email]> wrote:

I cant get to work properly with the example you gave , it always out of scroll position after adding more than 1 item.

here is only working solution so far but very dirty.

If there any better solution?

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
    __resizeCount:0,
 
    _initLayer: function() {
      this.base(arguments);
      this._layer.addListener("updated", this._onUpdated, this);
      // this.getPane().addListener("update", this._scrollBottom, this)
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function(callback) {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      // console.log(rowSize)
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          var current_height = this.getPane().getRowConfig().getItemSize(row);
          if (height !== current_height) {
            this.getPane().getRowConfig().setItemSize(row, height);
            console.log("resizing")
 
          }
 
        }
 
      }
      callback()
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.getPane().setScrollY(1e99)
        this.scrollToY(1e99)
        var lastrow =  this.getModel().length -1;
        console.log(lastrow)
        this.getPane().scrollRowIntoView(lastrow)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
  syncWidget: function(jobs) {
    var that = this
    if (jobs.scrollBottom & jobs.updateSize) {
      console.log(jobs)
      this.__scrollBottom = true
      this.__updateCount = 0
      this._updateSize(function(){
        that._scrollBottom(6)
      })
      console.log("BOTH JOBS no of updates" + this.__updateCount)
 
      this.__updateCount += 1
    } else if (jobs.scrollBottom) {
      this.__scrollBottom = true
      this.__updateCount = 0
    } else if (jobs.updateSize) {
      this._updateSize(function(){
        that._scrollBottom(3)
      })
      this.__updateCount += 1
      console.log("no of updates" + this.__updateCount)
    }
 
 
 
  }
}
});

 

On Mon, Jun 22, 2015 at 2:11 AM, Phyo Arkar <[hidden email]> wrote:

After trying to remember what my bugzilla pass , i had filed a bug. Bugzilla needs OAuth support badly.

 

 

 

On Wed, Jun 17, 2015 at 9:29 PM, Phyo Arkar <[hidden email]> wrote:

About disaapearing Scrollbars on Chrome? Ok i will file one.

It dosen't appear in my code tho.

 

On Wed, Jun 17, 2015 at 8:55 PM, Mustafa Sak <[hidden email]> wrote:

You are using Chrome right?

 

Would you please report a bug?

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Mittwoch, 17. Juni 2015 10:51
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

  I can't see the scroll bar , it was hidden on purpose?

 

On Wed, Jun 17, 2015 at 3:19 PM, Phyo Arkar <[hidden email]> wrote:

Thanks a lot for helping me out!

When a singile last one is added its ok .

When multiple LastOnes are added it dosen't scroll to bottom.

Any thoughts?   

 

On Wed, Jun 17, 2015 at 1:47 PM, Mustafa Sak <[hidden email]> wrote:

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)
 
        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }
 
    }
  }
});

 

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

 

 


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

 

 

 

 


------------------------------------------------------------------------------
Monitor 25 network devices or servers for free with OpManager!
OpManager is web-based network management software that monitors
network devices and physical & virtual servers, alerts via email & sms
for fault. Monitor 25 devices for free with no restriction. Download now
http://ad.doubleclick.net/ddm/clk/292181274;119417398;o
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar
Yes i tried on playground before sending code directly , it giving me syntax errors and i can't find where it is. The code runs correctly without playground.


On Tue, Jun 23, 2015 at 8:41 PM, Mustafa Sak <[hidden email]> wrote:

Hi,

 

it is much easier for us to answer if you provide us with an playground example. But anyway, dealing with different sizes on a virtual widget is difficult, so we are not always able to help with concrete code examples.

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 22. Juni 2015 20:18
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Another separated but related problem is size of scrollbar knob changed and irregular scrollbar position when list item is reized (huge list item) , how can i sync that?

 

On Tue, Jun 23, 2015 at 12:39 AM, Phyo Arkar <[hidden email]> wrote:

I cant get to work properly with the example you gave , it always out of scroll position after adding more than 1 item.

here is only working solution so far but very dirty.

If there any better solution?

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
    __resizeCount:0,
 
    _initLayer: function() {
      this.base(arguments);
      this._layer.addListener("updated", this._onUpdated, this);
      // this.getPane().addListener("update", this._scrollBottom, this)
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function(callback) {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      // console.log(rowSize)
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          var current_height = this.getPane().getRowConfig().getItemSize(row);
          if (height !== current_height) {
            this.getPane().getRowConfig().setItemSize(row, height);
            console.log("resizing")
 
          }
 
        }
 
      }
      callback()
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.getPane().setScrollY(1e99)
        this.scrollToY(1e99)
        var lastrow =  this.getModel().length -1;
        console.log(lastrow)
        this.getPane().scrollRowIntoView(lastrow)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
  syncWidget: function(jobs) {
    var that = this
    if (jobs.scrollBottom & jobs.updateSize) {
      console.log(jobs)
      this.__scrollBottom = true
      this.__updateCount = 0
      this._updateSize(function(){
        that._scrollBottom(6)
      })
      console.log("BOTH JOBS no of updates" + this.__updateCount)
 
      this.__updateCount += 1
    } else if (jobs.scrollBottom) {
      this.__scrollBottom = true
      this.__updateCount = 0
    } else if (jobs.updateSize) {
      this._updateSize(function(){
        that._scrollBottom(3)
      })
      this.__updateCount += 1
      console.log("no of updates" + this.__updateCount)
    }
 
 
 
  }
}
});

 

On Mon, Jun 22, 2015 at 2:11 AM, Phyo Arkar <[hidden email]> wrote:

After trying to remember what my bugzilla pass , i had filed a bug. Bugzilla needs OAuth support badly.

 

 

 

On Wed, Jun 17, 2015 at 9:29 PM, Phyo Arkar <[hidden email]> wrote:

About disaapearing Scrollbars on Chrome? Ok i will file one.

It dosen't appear in my code tho.

 

On Wed, Jun 17, 2015 at 8:55 PM, Mustafa Sak <[hidden email]> wrote:

You are using Chrome right?

 

Would you please report a bug?

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Mittwoch, 17. Juni 2015 10:51
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

  I can't see the scroll bar , it was hidden on purpose?

 

On Wed, Jun 17, 2015 at 3:19 PM, Phyo Arkar <[hidden email]> wrote:

Thanks a lot for helping me out!

When a singile last one is added its ok .

When multiple LastOnes are added it dosen't scroll to bottom.

Any thoughts?   

 

On Wed, Jun 17, 2015 at 1:47 PM, Mustafa Sak <[hidden email]> wrote:

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)
 
        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }
 
    }
  }
});

 

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

 

 


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

 

 

 

 


------------------------------------------------------------------------------
Monitor 25 network devices or servers for free with OpManager!
OpManager is web-based network management software that monitors
network devices and physical & virtual servers, alerts via email & sms
for fault. Monitor 25 devices for free with no restriction. Download now
http://ad.doubleclick.net/ddm/clk/292181274;119417398;o
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



------------------------------------------------------------------------------
Monitor 25 network devices or servers for free with OpManager!
OpManager is web-based network management software that monitors
network devices and physical & virtual servers, alerts via email & sms
for fault. Monitor 25 devices for free with no restriction. Download now
http://ad.doubleclick.net/ddm/clk/292181274;119417398;o
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar
Also i get request URL too Long when i just try to shorten url. i guess we need a real qooxdoo playground like codepen.io , if anyone going to chipin for hosting fee , i will build one.

On Wed, Jun 24, 2015 at 12:03 AM, Phyo Arkar <[hidden email]> wrote:
Yes i tried on playground before sending code directly , it giving me syntax errors and i can't find where it is. The code runs correctly without playground.


On Tue, Jun 23, 2015 at 8:41 PM, Mustafa Sak <[hidden email]> wrote:

Hi,

 

it is much easier for us to answer if you provide us with an playground example. But anyway, dealing with different sizes on a virtual widget is difficult, so we are not always able to help with concrete code examples.

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 22. Juni 2015 20:18
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Another separated but related problem is size of scrollbar knob changed and irregular scrollbar position when list item is reized (huge list item) , how can i sync that?

 

On Tue, Jun 23, 2015 at 12:39 AM, Phyo Arkar <[hidden email]> wrote:

I cant get to work properly with the example you gave , it always out of scroll position after adding more than 1 item.

here is only working solution so far but very dirty.

If there any better solution?

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
    __resizeCount:0,
 
    _initLayer: function() {
      this.base(arguments);
      this._layer.addListener("updated", this._onUpdated, this);
      // this.getPane().addListener("update", this._scrollBottom, this)
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function(callback) {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      // console.log(rowSize)
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          var current_height = this.getPane().getRowConfig().getItemSize(row);
          if (height !== current_height) {
            this.getPane().getRowConfig().setItemSize(row, height);
            console.log("resizing")
 
          }
 
        }
 
      }
      callback()
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.getPane().setScrollY(1e99)
        this.scrollToY(1e99)
        var lastrow =  this.getModel().length -1;
        console.log(lastrow)
        this.getPane().scrollRowIntoView(lastrow)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
  syncWidget: function(jobs) {
    var that = this
    if (jobs.scrollBottom & jobs.updateSize) {
      console.log(jobs)
      this.__scrollBottom = true
      this.__updateCount = 0
      this._updateSize(function(){
        that._scrollBottom(6)
      })
      console.log("BOTH JOBS no of updates" + this.__updateCount)
 
      this.__updateCount += 1
    } else if (jobs.scrollBottom) {
      this.__scrollBottom = true
      this.__updateCount = 0
    } else if (jobs.updateSize) {
      this._updateSize(function(){
        that._scrollBottom(3)
      })
      this.__updateCount += 1
      console.log("no of updates" + this.__updateCount)
    }
 
 
 
  }
}
});

 

On Mon, Jun 22, 2015 at 2:11 AM, Phyo Arkar <[hidden email]> wrote:

After trying to remember what my bugzilla pass , i had filed a bug. Bugzilla needs OAuth support badly.

 

 

 

On Wed, Jun 17, 2015 at 9:29 PM, Phyo Arkar <[hidden email]> wrote:

About disaapearing Scrollbars on Chrome? Ok i will file one.

It dosen't appear in my code tho.

 

On Wed, Jun 17, 2015 at 8:55 PM, Mustafa Sak <[hidden email]> wrote:

You are using Chrome right?

 

Would you please report a bug?

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Mittwoch, 17. Juni 2015 10:51
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

  I can't see the scroll bar , it was hidden on purpose?

 

On Wed, Jun 17, 2015 at 3:19 PM, Phyo Arkar <[hidden email]> wrote:

Thanks a lot for helping me out!

When a singile last one is added its ok .

When multiple LastOnes are added it dosen't scroll to bottom.

Any thoughts?   

 

On Wed, Jun 17, 2015 at 1:47 PM, Mustafa Sak <[hidden email]> wrote:

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize()
        this._scrollBottom(5)
        console.log("BOTH JOBS no of updates" + this.__updateCount)
 
        this.__updateCount += 1
      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize()
        this._scrollBottom(3)
        this.__updateCount += 1
        console.log("no of updates" + this.__updateCount)
      }
 
    }
  }
});

 

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

 

 


------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

 

 

 

 


------------------------------------------------------------------------------
Monitor 25 network devices or servers for free with OpManager!
OpManager is web-based network management software that monitors
network devices and physical & virtual servers, alerts via email & sms
for fault. Monitor 25 devices for free with no restriction. Download now
http://ad.doubleclick.net/ddm/clk/292181274;119417398;o
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel




------------------------------------------------------------------------------
Monitor 25 network devices or servers for free with OpManager!
OpManager is web-based network management software that monitors
network devices and physical & virtual servers, alerts via email & sms
for fault. Monitor 25 devices for free with no restriction. Download now
http://ad.doubleclick.net/ddm/clk/292181274;119417398;o
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

Phyo Arkar
I made a gist https://gist.github.com/v3ss0n/f48e336c4a2eb6a80089
because tinyurl can't work with it. Only saying request URL too long ,even tho i deleted all comments. Hope you don't mind.

You can copy paste directly to playground, i have tested and it works.

On Wed, Jun 24, 2015 at 12:11 AM, Phyo Arkar <[hidden email]> wrote:
Also i get request URL too Long when i just try to shorten url. i guess we need a real qooxdoo playground like codepen.io , if anyone going to chipin for hosting fee , i will build one.

On Wed, Jun 24, 2015 at 12:03 AM, Phyo Arkar <[hidden email]> wrote:
Yes i tried on playground before sending code directly , it giving me syntax errors and i can't find where it is. The code runs correctly without playground.


On Tue, Jun 23, 2015 at 8:41 PM, Mustafa Sak <[hidden email]> wrote:

Hi,

 

it is much easier for us to answer if you provide us with an playground example. But anyway, dealing with different sizes on a virtual widget is difficult, so we are not always able to help with concrete code examples.

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 22. Juni 2015 20:18
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Another separated but related problem is size of scrollbar knob changed and irregular scrollbar position when list item is reized (huge list item) , how can i sync that?

 

On Tue, Jun 23, 2015 at 12:39 AM, Phyo Arkar <[hidden email]> wrote:

I cant get to work properly with the example you gave , it always out of scroll position after adding more than 1 item.

here is only working solution so far but very dirty.

If there any better solution?

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
    __resizeCount:0,
 
    _initLayer: function() {
      this.base(arguments);
      this._layer.addListener("updated", this._onUpdated, this);
      // this.getPane().addListener("update", this._scrollBottom, this)
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function(callback) {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      // console.log(rowSize)
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          var current_height = this.getPane().getRowConfig().getItemSize(row);
          if (height !== current_height) {
            this.getPane().getRowConfig().setItemSize(row, height);
            console.log("resizing")
 
          }
 
        }
 
      }
      callback()
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.getPane().setScrollY(1e99)
        this.scrollToY(1e99)
        var lastrow =  this.getModel().length -1;
        console.log(lastrow)
        this.getPane().scrollRowIntoView(lastrow)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
  syncWidget: function(jobs) {
    var that = this
    if (jobs.scrollBottom & jobs.updateSize) {
      console.log(jobs)
      this.__scrollBottom = true
      this.__updateCount = 0
      this._updateSize(function(){
        that._scrollBottom(6)
      })
      console.log("BOTH JOBS no of updates" + this.__updateCount)
 
      this.__updateCount += 1
    } else if (jobs.scrollBottom) {
      this.__scrollBottom = true
      this.__updateCount = 0
    } else if (jobs.updateSize) {
      this._updateSize(function(){
        that._scrollBottom(3)
      })
      this.__updateCount += 1
      console.log("no of updates" + this.__updateCount)
    }
 
 
 
  }
}
});

 

On Mon, Jun 22, 2015 at 2:11 AM, Phyo Arkar <[hidden email]> wrote:

After trying to remember what my bugzilla pass , i had filed a bug. Bugzilla needs OAuth support badly.

 

 

 

On Wed, Jun 17, 2015 at 9:29 PM, Phyo Arkar <[hidden email]> wrote:

About disaapearing Scrollbars on Chrome? Ok i will file one.

It dosen't appear in my code tho.

 

On Wed, Jun 17, 2015 at 8:55 PM, Mustafa Sak <[hidden email]> wrote:

You are using Chrome right?

 

Would you please report a bug?

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Mittwoch, 17. Juni 2015 10:51
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

  I can't see the scroll bar , it was hidden on purpose?

 

On Wed, Jun 17, 2015 at 3:19 PM, Phyo Arkar <[hidden email]> wrote:

Thanks a lot for helping me out!

When a singile last one is added its ok .

When multiple LastOnes are added it dosen't scroll to bottom.

Any thoughts?   

 

On Wed, Jun 17, 2015 at 1:47 PM, Mustafa Sak <[hidden email]> wrote:

Wow,

 

it was not so easy to solve that issue. But would you please try this example? http://tinyurl.com/nus7pev

 

Dank & Gruß
Mustafa Sak

Softwareentwickler
Mail Development

1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: 
[hidden email] | Web: www.1und1.de

 

Von: Phyo Arkar [mailto:[hidden email]]
Gesendet: Montag, 15. Juni 2015 12:23
An: qooxdoo-devel
Betreff: [qooxdoo-devel] How can i scroll to the end of a list , after list item updated (continue), using dynamic virtual list widget sizes?

 

Previous thread was abandoned so i making new one , with more information.

I am now using syncWidget to scroll to bottom of a virtual list when new item is added.
But the problem is this virtuallist implementation automatically resizes list item height , and when scrolled inside syncWidget , it is not actually scrolled to the end , but to that widget item’s start.

here is handler for list’s updates:

      this.chat_list.getModel().addListener("change", function() {
          // qx.ui.core.queue.Manager.flush();
          qx.ui.core.queue.Widget.remove(this.chat_list,"scrollBottom");
          // normally using the flush should be time enough for the renderer
          qx.ui.core.queue.Widget.add(this.chat_list, "scrollBottom");
      },this)

I added a work around by counting how many times layer is updated , if it updated for 3 times , scrolls to button : this._layer.addListener("updated", this._onUpdated, this); .
Because i observed whenever a new item is added , layer firest updated 3 times and only at the last time it need to actually scroll.

Here is the infinite list with auto-resizing of item height from stackoverflow.com/questions/21456941/infinite-scroll-in-qooxdoo-with-virtual-list.

qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
 
  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
 
    _initLayer: function() {
      this.base(arguments);
      console.log("initing layer")
      this._layer.addListener("updated", this._onUpdated, this);
    },
 
    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
 
          qx.ui.core.queue.Widget.add(this, 'updateSize');
 
        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function() {
      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget !== null) {
          var height = widget.getSizeHint().height;
          this.getPane().getRowConfig().setItemSize(row, height);
        }
 
      }
    },
    _scrollBottom: function(limit) {
      if (this.__scrollBottom === true) {
        this.scrollToY(1e99)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }
 
      }
    },
    syncWidget: function(jobs) {
      if (jobs.scrollBottom & jobs.updateSize) {
        console.log(jobs)
        this