1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    39
    Answers
    3
    Vote Rating
    1
    Derroy is on a distinguished road

      0  

    Default Answered: Force scroller to recalculate height

    Answered: Force scroller to recalculate height


    Hello,

    I have a container with scrollable: vertical as configuration.
    After i update some labels, not all the text fits in the screen (so scrollable vertical)
    However, when scrolling down it scrolls back up because it didn't resize after setting the label's text.

    i tried : this.fireEvent('heightchange'); and a couple more but to no effect. It doesn't want to recalculate. (this = Container);

    Is there a way to force the scroller to recalculate the height of the content?

  2. Ok solved: - Flexing the containers and wanting to scroll doesn't seem possible?

  3. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    39
    Answers
    3
    Vote Rating
    1
    Derroy is on a distinguished road

      0  

    Default


    Code:
    updateWithMovie:   function(r) {
    this.down('#film_detail_duration_text').setHtml(r.get('Length'));
            this.down('#film_detail_title').setHtml(r.get('Title'));
            this.down('#film_detail_genre').setHtml(r.get('Genre').join(', '));
    this.down('#film_detail_description').setHtml(r.get('Description'));
    this.down('#film_detail_directing').setHtml(r.get('Director'));
            this.down('#film_detail_cast').setHtml(r.get('Cast').join(', '));
            this.fireEvent('heightchange');
    //get the scroller
            console.log(this.getScrollable().getScroller());
            this.getScrollable().getScroller().refreshMaxPosition();
            this.getScrollable().getScroller().refresh();
        }
    Anything along this line doesn't work either!! help

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    39
    Answers
    3
    Vote Rating
    1
    Derroy is on a distinguished road

      0  

    Default


    Bump! Really need an awnser for this as the deadline is coming near and I can't seem to fix the problem! I've even tried creating a new scroll.Scroller but that didn't help either

    I've also seen similar threads on the internet unawnsered.. is it even possible? I'll post my code here anyway

    Code:
    Ext.define('KTS.view.shared.Shared_film_detail', {    extend:     'Ext.Container',
        xtype:      'shared_film_detail',
        
        config: {
            layout: 'vbox',
            cls:    'film_detail',
            scrollable: 'vertical',
            flex:   1,
            items:  [
                {
                    xtype:  'container',
                    itemId:    'film_detail_top_container',
                    layout: 'hbox',
                    flex:   2,
                    items:  [
                        {
                            xtype:  'image',
                            itemId: 'film_detail_poster',
                            style:  '-webkit-box-ordinal-group: 1;',
                            flex:   7,
                            listeners:  {
                                tap:    function() {
                                    this.up('shared_film_detail').fireEvent('poster_tapped', this.up('shared_film_detail'),this );
                                }
                            }
                        },
                        {
                            xtype:  'container',
                            flex:   2,
                            style:  '-webkit-box-ordinal-group: 2;',
                            layout: 'vbox',
                            items:  [
                                {
                                    xtype:  'image',
                                    src:    'css/images/FilmtijdIcon.svg',
                                    style:  'background-position:   bottom center; background-size: 50%;',
                                    flex:   1,
                                },
                                {
                                    xtype:  'label',
                                    style:  'text-align:    center',
                                    itemId: 'film_detail_duration_text',
                                },
                                {
                                    xtype:  'image',
                                    id:     'film_detail_trailer_btn',
                                    src:    'css/images/FilmtrailerIcon.svg',
                                    style:  'background-position:   bottom center; background-size: 50%;',
                                    flex:   1,
                                },
                                {
                                    xtype:  'label',
                                    style:  'text-align:    center',
                                    html:   __.FILM_DETAIL_TRAILER,
                                },
                                {
                                    
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype:  'container',
                    layout: 'vbox',
                    flex:   1,
                    items:  [
                        {
                            xtype:  'label',
                            itemId: 'film_detail_title',
                            cls:    'film_detail_title'
                        },
                        {
                            xtype:  'label',
                            itemId: 'film_detail_genre',
                            cls:    'film_detail_subtitle'
                        },
                        {
                            xtype:  'label',
                            itemId: 'film_detail_description',
                            cls:    'film_detail_text'
                        },
                        {
                            xtype:  'label',
                            cls:    'film_detail_subtitle',
                            html:   __.FILM_DETAIL_DIRECTING,
                        },
                        {
                            xtype:  'label',
                            itemId: 'film_detail_directing',
                            cls:    'film_detail_text'
                        },
                        {
                            xtype:  'label',
                            cls:    'film_detail_subtitle',
                            html:   __.FILM_DETAIL_CAST
                        },
                        {
                            xtype:  'label',
                            itemId: 'film_detail_cast',
                            cls:    'film_detail_text'
                        },
                    ]
                }
            ]
        }, 
        onOrientationChange:    function(orientation) {
            if(orientation == 'portrait') {
    this.down('#film_detail_top_container').show();
            } else if(orientation == 'landscape') {
    this.down('#film_detail_top_container').hide();
            }
        },
        updateWithMovie:   function(r) {
            this.setRecord(r);
    //A whole lot to do for changing images.. damn you sencha
            var poster = this.down('#film_detail_poster');
            var config = poster.getInitialConfig();
            config.src = r.get('ImageUrl');
            this.down('#film_detail_top_container').remove(poster, true);
            poster = new Ext.Img(config);
            this.down('#film_detail_top_container').add(poster);
            
    //Set other information
    this.down('#film_detail_duration_text').setHtml(r.get('Length'));
            this.down('#film_detail_title').setHtml(r.get('Title'));
            this.down('#film_detail_genre').setHtml(r.get('Genre').join(', '));
    this.down('#film_detail_description').setHtml(r.get('Description'));
    this.down('#film_detail_directing').setHtml(r.get('Director'));
            this.down('#film_detail_cast').setHtml(r.get('Cast').join(', '));
    //get the scroller
            
            this.getScrollable().getScroller().refreshMaxPosition();
            this.getScrollable().getScroller().refresh();
            this.getScrollable().getScroller().fireEvent('maxpositionchange', this.getScrollable().getScroller());
        }
    });

  5. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    39
    Answers
    3
    Vote Rating
    1
    Derroy is on a distinguished road

      0  

    Default


    Ok solved: - Flexing the containers and wanting to scroll doesn't seem possible?

  6. #5
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Answers
    11
    Vote Rating
    16
    siebmanb will become famous soon enough

      0  

    Default


    I do not understand your answer, which is another question ! Are you saying it is not possible ?

  7. #6
    Sencha User
    Join Date
    Apr 2010
    Posts
    29
    Answers
    2
    Vote Rating
    1
    Sno is on a distinguished road

      0  

    Default


    Use minHeight, maxHeight, and flex:1 to dynamically handle a size of a label based on text.

Thread Participants: 2

Tags for this Thread