Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Continuously scrolling items

  1. #1
    Ext User
    Join Date
    Mar 2009
    Posts
    22
    Vote Rating
    0
      0  

    Question Continuously scrolling items

    I have a requirement to display items ( location and current status columns ) from my database, similar to a vertical news ticker, as a continuously scrolling list. So, I will be refreshing the list periodically using ajax calls. I have tried to search for an example on this site as well as the net, but haven't found anything that would do a scrolling ticker container.

    Can someone guide me in the right direction?

    Thanks

  2. #2

  3. #3
    Ext User
    Join Date
    Mar 2009
    Posts
    22
    Vote Rating
    0
      0  

    Question Not exactly what I need

    Thank you for taking time to reply and provide the link. I had found that url, but I need a couple things that I don't think are available in that script.

    1. I need to make it vertical scrolling. I didn't find anything in the script to let me do that
    2. I need to keep updating the items using ajax. How do I do it?
    3. I need to use an ExtJS container as the entire application is in ExtJS. Also, it needs to be dockable and pop-uppable ( if there is such a word ). Also, another thing is that I am just inheriting this pplication and have almost zero knowledge of ExtJS, to even figure out what do I need to experiment with.

    I hope someone can point me in the right direction.

    Thanks,

  4. #4
    Ext User euchiyama's Avatar
    Join Date
    Apr 2008
    Location
    Chicago, IL
    Posts
    149
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by adbdkb View Post
    Thank you for taking time to reply and provide the link. I had found that url, but I need a couple things that I don't think are available in that script.

    1. I need to make it vertical scrolling. I didn't find anything in the script to let me do that
    2. I need to keep updating the items using ajax. How do I do it?
    3. I need to use an ExtJS container as the entire application is in ExtJS. Also, it needs to be dockable and pop-uppable ( if there is such a word ). Also, another thing is that I am just inheriting this pplication and have almost zero knowledge of ExtJS, to even figure out what do I need to experiment with.

    I hope someone can point me in the right direction.

    Thanks,
    1. Create a window which is dockable using this extension:
    https://extjs.com/forum/showthread.php?p=153021
    example:
    http://www.polomuseale.firenze.it/ext/test/test.html

    2. In the content area use this type of vertical ticker concept:
    http://www.devdude.com/tools/js/vertical_ticker/

    3. In your AJAX code, update the content of the window/panel...wrap the AJAX in a Ext Task so it's called in set intervals

    You should be able to take all 3 of these concepts and combine them to what you need.

  5. #5
    Ext User
    Join Date
    Mar 2009
    Posts
    22
    Vote Rating
    0
      0  

    Default

    Thanks again. This is very useful. I shall work on getting these working together to create what I need. ( It may take me a while, ExtJS is appearing to be very complicated )

  6. #6
    Ext User
    Join Date
    Mar 2009
    Posts
    22
    Vote Rating
    0
      0  

    Question Ran into dock / undock issue

    I combined the above concepts to create a vertical scroller to update the details in it on a schedule. I have run into an issue, where when I use the docking with task, when I undock I lose the updated title for the panel and when I go back to docking, I lose the html that was initially set when defining the panel. I have not included the scroller logic here to keep the test simple

    Can someone help ?

    I have attached the code as a txt file.

    Thanks
    Attached Files Attached Files

  7. #7
    Ext User
    Join Date
    Mar 2009
    Posts
    22
    Vote Rating
    0
      0  

    Default

    I tried different things to try to get this to work but to no avail. Hasn't anyone run into this issue or is there no solution to it?

    I hope someone has a solution to this.

    Thanks

  8. #8
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    4
      0  

    Lightbulb

    I've been able to write some basic code to achieve the ticker functionality. Here is the ux:

    Code:
    Ext.ns("Ext.ux");
    Ext.ux.Ticker = Ext.extend(Ext.BoxComponent, {
        baseCls: 'x-ticker',
        direction: 'left',
        autoEl: {
            tag: 'div',
            cls: 'x-ticker-wrap'
        },
        afterRender: function() {
            // Default speed
            if (!this.speed) {
                this.speed = (this.direction == 'left' || this.direction == 'right') ? 2 : 1;
            }
            this.task = {
                interval: 30,
                scope: this
            }
    
            var posInfo;
            switch (this.direction) {
                case "left":
                case "right":
                    posInfo = { left: this.width || this.el.getWidth() };
                    this.task.run = this.scroll.horz;
                    break;
                case "up":
                case "down":
                    posInfo = { top: this.height || this.el.getHeight() };
                    this.task.run = this.scroll.vert;
                    break;
            }
            posInfo.position = 'relative';
    
            if (!this.contentEl) {
                this.contentEl = this.el.createChild({ tag: 'span', html: this.text, style: posInfo });
            } else {
                var ce = Ext.getDom(this.contentEl);
                this.el.dom.appendChild(ce);
                this.contentEl = Ext.get(ce);
                this.contentEl.setPositioning(posInfo);
            }
            this.contentEl.removeClass(['x-hidden', 'x-hide-display']);
            Ext.ux.Ticker.superclass.afterRender.call(this);
    
            Ext.TaskMgr.start(this.task);
        },
    
        onDestroy: function() {
            if (this.task) {
                Ext.TaskMgr.stop(this.task);
            }
        },
    
        scroll: {
            horz: function() {
                var contentEl = this.contentEl;
                var left = contentEl.getLeft(true);
                var width = contentEl.getWidth();
                if (this.direction == 'left') {
                    if (left <= -width) {
                        left = this.width;
                    } else {
                        left -= this.speed;
                    }
                } else {
                    if (left >= this.width) {
                        left = -width;
                    } else {
                        left += this.speed;
                    }
                }
                contentEl.setLeft(left);
            },
    
            vert: function() {
                var contentEl = this.contentEl;
                var top = contentEl.getTop(true);
                var height = contentEl.getHeight();
                if (this.direction == 'up') {
                    if (top <= -height) {
                        top = this.el.getHeight(true);
                    } else {
                        top -= this.speed;
                    }
                } else {
                    if (top >= height) {
                        top = -height;
                    } else {
                        top += this.speed;
                    }
                }
                contentEl.setTop(top);
            }
        }
    });
    CSS:
    Code:
            .x-ticker-wrap { border: solid 1px black; overflow: hidden; }
    Sample usage:
    Code:
        new Ext.ux.Ticker({ text: 'Left to Right', width: 200, renderTo: 'tickerDivRight', direction: 'right' });
        new Ext.ux.Ticker({ text: 'Right to Left', width: 200, renderTo: 'tickerDivLeft', direction: 'left' });
        new Ext.ux.Ticker({ text: 'Going Up', width: 200, height: 20, speed: 1, renderTo: 'tickerDivUp', contentEl: 'tickerUpContent', direction: 'up' });
        new Ext.ux.Ticker({ text: 'Going Down', width: 200, speed: 1, renderTo: 'tickerDivDown', direction: 'down' });
    Tested on: IE 8, Firefox 3.1
    Ext Version: 2.2
    Demo Url: http://www.durlabh.com/extJs/example...ets/ticker.htm

    Basic Features

    • Allows specifying custom text or you can use contentEl to specify an existing DIV etc
    • Works in directions left/right/top/bottom
    Last edited by durlabh; 2 Sep 2009 at 2:15 PM. Reason: Included CSS/ sample usage

  9. #9
    Ext User
    Join Date
    May 2009
    Posts
    19
    Vote Rating
    0
      0  

    Default

    Hi Durlabh,

    I saw the demo page and your tickers are awesome. I was able to run it successfully. However, I am unable to update the ticker dynamically via AJAX response. I tried to fiddle around a lot but unfortunately none of them really worked.

    I have been trying to dom something like this ...
    Code:
    Ext.Ajax.request({
                            url : 'http://mysite.com/ScrollingTicker.action',
                            success: function(response){
                                 var o = Ext.decode(response.responseText);
                                 Ext.TaskMgr.stop(parenttask); // PARENT TASK IS THE HORIZONTAL RUN TASK of the plugin code. 
                                 if(this.contentE1)
                                 {
                                     console.info('Live tickers are  me ' + this.contentE1);
                                     var me = Ext.get('pnlDivContent');
                                     me.update(o.liveData);
                                     //this.contentE1 = me;
                                 }
                                 Ext.TaskMgr.start(parenttask);
                                 
                            }
                              ,failure: Ext.emptyFn
                              ,scope:this
                        });
                    },
    I also commented out var contentE1 = this.contentE1 and replaced the references of contentE1 to this.contentE1.

    None of the above has worked me so far. Could you give me some pointers or show me sample code in this regard ?

    Thanks,
    Rajat

  10. #10
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    4
      0  

    Default

    Can you please post complete code? It seems you might be mistaking contentEl to be contentE1

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •