1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    3
    Vote Rating
    0
    PaulAlbertson is on a distinguished road

      0  

    Default Unanswered: Container scrolling problem for XTemplate (tpl) content

    Hey Sencha community,

    I cannot get the detail Container for my app to scroll. I can drag it down and it snaps back up. It seems like I am not properly setting the height of the container, or it is not adjusting with the content populated into it? The particular view is a detail container that is disclosed after a user clicks on the list item in the previous view. I am able to dynamically populate the content from the list item in the template, and attach listeners to content in the view, so everything is working up to the detail view Container.

    Help is greatly appreciated.

    Thanks in advance.

    Here is the list view that generates the detail result view
    Ext.define('xxx.view.CourseList',{
    extend: 'Ext.List',
    xtype: 'courselist',



    config:
    {
    title: 'Seach Results',
    grouped: true,
    indexBar: true,


    itemTpl:
    [
    '<div class="courseName">{courseName}</div>',
    '<div id="courseCityState">{courseCity}, {courseState}</div>',
    '<div id="listRatingImage"><img src="{RatingImgOverall}"></div>',
    '<div id="courseDistance">{distanceFromCourse} miles</div>',
    '<div id="courseAccess">{courseAccess}</div>'
    ],
    store: 'Courses',
    onItemDisclosure: true
    }
    });


    Here is the detail view

    Ext.define('xxxxx.view.Detail',{
    extend: 'Ext.Container',
    xtype: 'coursedetail',

    config:
    {
    title: 'Course Details',
    styleHtmlContent: true,

    scrollable: true,
    layout: 'fit',

    tpl:
    [
    '<div id="courseDetailHolderDiv">'+
    '<div id="courseDetailHeaderDiv">'+
    '<div id="courseName">{courseName}</div>'+
    '<div id="detailRatingImage" class="centerItem"><img src="{RatingImgOverall}">'+
    '<div id="ratingReviewCountTxt">{ratingReviewCount} C Reviews</div>'+
    '</div>'+
    '<div id="courseWeatherHolderDiv">'+
    '<div id="detailWeatherTemp">Today<br />{tempHigh}</div>'+
    '<div id="detailWeatherImage"><img src="{weatherImage}"></div>'+
    '</div>'+
    '</div>'+
    '<div id="courseFeatureImageHolder">'+
    '<img id="courseFeatureImage" src="{featureImage}"><br />'+
    '</div>'+
    '<div>{courseStreetAddress}<br />{courseCity}, {courseState} {coursezipCode}</div>'+
    '<div>{coursePhone}</div>'+
    '<div>{courseWebsite}</div>'+
    '<div>Community Rating</div>'+
    '<div></div>'+
    '</div>'
    ],


    listeners: {
    tap: {
    element: 'element',
    fn: function($e,t) {
    switch (t.id)
    {
    case 'testButton':
    break;
    }
    this.fireEvent('tap', this,t.id);
    },
    },
    },



    }
    });

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,959
    Vote Rating
    1187
    Answers
    3805
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    If the scroll snaps back to the top is usually because the container was not given a height either by the height config or by a parent layout.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    3
    Vote Rating
    0
    PaulAlbertson is on a distinguished road

      0  

    Default

    Hey Mitchell,
    I tried setting the height in the config in a previous attempt, and also in the css but that did not help. Can I give more information on this issue to you can possibly get me more details on where to set these values?

  4. #4
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    397
    Vote Rating
    15
    Answers
    4
    murrah will become famous soon enough

      0  

    Default

    I know this is an old post but this might be a the solution to this problem.

    Setting the height property is not enough when dealing with a template. I have a container that has items that are components containing templates. When I added the items to the container, the myContainer.bodyElement.dom height remained at 0 so there was "nothing to scroll". However the myContainer.bodyElement.dom.scrollHeight contained the sum of the heights of the items.

    So, after adding the items I do:
    PHP Code:
    myContainer.setHeight(myContainer.bodyElement.dom.scrollHeight); 
    and the scrolling then worked.

    FYI.

    Murray