Results 1 to 4 of 4

Thread: Problems with truncated content

  1. #1

    Default Problems with truncated content

    Hi,

    i have a problem with my Application. The content is truncated when i display this on a mobile device or in chrome. When the Application loads everything looks fine so far (example_normal.png), but when i try to scroll the content up to show the rest (by touching / mouse) the content seems to be truncated (example_scrolled.png). If i resize the browserwindow the rest of the content shows up, but when i try to scroll in the resized, the content is cutted off at the bottom position.

    example_scrolled.jpgexample_normal.jpg

    Here is the code loaded with the Ext.startup:

    PHP Code:
                /********* Homescreen *********/
                
    xxxx.global.home = new xxxx.app.Homescreen();         
                
                
    /********* Main tab panel *********/
                
    try {
                    var 
    tabPanel = new Ext.TabPanel({
                        
    tabBar: {
                            
    dock'bottom',
                            
    ui'light',
                            
    layout: {
                                
    pack'center'
                            
    }
                        },
                        
    dockedItems: [{
                            
    xtype'toolbar',                        dock'top',
                            
    cls'k-topbar'
                        
    }],
                        
    fullscreentrue,
                        
    layout: {
                            
    type'card',
                            
    align'stretch'
                        
    },
                        
    scroll'vertical',
                        
    items: [xxxx.global.home,xxxx.global.folderList,settings,xxxx.global.search]
                    });
                } catch(
    ex) {
                    
    console.error("Error on initializing TabPanel",ex);
                } 
    and here the definition of xxxx.app.Homescreen:

    PHP Code:
    xxxx.app.Homescreen Ext.extend(Ext.Panel, {
        
    titletrl('Overview'),
        
    iconCls'home',
        
    html'<div class="loadingscreen">' trl('Loading...') + '</div>',
        
    scroll'vertical',
        
    layout: {
            
    type'card',
            
    align'stretch'
        
    },
        
    initHomescreen: function(context) {
            
    console.log("Init homescreen");
            
    Ext.regModel('Trends', {
                
    fields: ['chart','trends','cloud']
            });
            var 
    screenWidth screen.availWidth;
            if(
    screenWidth 600) {
                
    screenWidth 680;
            }
            var 
    homeTpl = new Ext.XTemplate(
                
    '<ul class="x-list" id="homeTrendList">',
                
    '<tpl for="trends">',
                
    '  <li data-folder-id="{folder_id}"><img src="/images/trend_{trend.trend}.jpg">&nbsp;&nbsp;&nbsp;{name} ({cnt})</li>',
                
    '</tpl>',
                
    '</ul>',
                
    '<div align="center" class="k-tagcloud" id="cloud"><span style="color:orange;">Die wichtigsten Suchbegriffe von heute:</span><hr class="k-cloud-hr"/>',
                    
    '<tpl for="cloud">',
                        
    '<span class="k-cloud_tag{weight}" onclick="xxxx.global.displaytagcloudsearchresult({id});">{tag}</span> ',
                    
    '</tpl>',
                
    '</div>',
                
    '<div class="chart">',
                
    '  <img src="data:image/png;base64,{chart}" align="center" title="'+trl('Chart')+'" alt="'+trl('Chart')+'" width="'+(screenWidth-80)+'">',
                
    '</div><br />'
            
    );

            
    //var folderList = [ 1200017,1200018,1200033,1200036 ];
            
    var folderList window.localStorage.getItem('homeFolders');
            if(
    typeof folderList == "string") {
                
    folderList folderList.split(',');
            }
            
    //folderList = false;
            
            
    if (!folderList) {
                 
    console.log('No folderList');
                 
    console.debug('This',this);
                 
                 
    // activate home folder settings tab
                 
    this.ownerCt.setActiveItem(2);
                 
    this.ownerCt.items.items[2].items.items[1].ownerCt.setActiveItem(1); // wow, srsly, Sencha? I mean, really?
                 // @todo message box does not seem to support auto linebreaks (wtf?!), find solution
                 
    Ext.Msg.alert(trl("Missing Home Folder"), trl("You have not yet defined any folders to show on your homescreen. Please select at least one folder."));
            } else {
                
    me this;
                var 
    folderListCallback = function(response) {
                    
    xxxx.global.checktokenvalid(response);
                    
    console.log('AJAX response: ',response);
                    
    homeTpl.overwrite(me.body,response);
                    var 
    nodeList document.getElementById('homeTrendList').getElementsByTagName('li');
                    for(var 
    i=0nodeList.lengthi++) {
                        
    Ext.EventManager.addListener(nodeList[i], 'click', function(en) {
                            
    console.log('Item tapped');
                            
    console.dir(arguments);
                            var 
    folderId false;
                            if (
    n.dataset && n.dataset.folderId) {
                                
    folderId n.dataset.folderId;
                            } else {
                                
    folderId n.getAttribute('data-folder-id');
                            }
                            
    console.log('folderId: ' folderId);
                            
    console.debug('ownerCt: 'me.ownerCt);
                            
    me.ownerCt.setActiveItem(1);
                            var 
    listStore xxxx.global.folderList.items.items[0].store//me.ownerCt.getActiveItem();
                            
    console.debug('listStore: ',listStore);
                            
    console.log('Nestinglevel: ' xxxx.global.folderList.nestingLevel);
                            var 
    level xxxx.global.folderList.nestingLevel;
                            
    // go back to first level (folderlist)
                            
    for (var i=level0i--) {
                                
    xxxx.global.folderList.onBackTap();
                            }
                            var 
    item false;
                            for (var 
    i=0listStore.data.items.lengthi++) {
                                
    console.log('liststore.data.items['+i+']: 'listStore.data.items[i].data);
                                if (
    listStore.data.items[i].data.folder_id == folderId) {
                                    
    console.log('Found folderId: '+folderId);
                                    
    item listStore.data.items[i].data;
                                }
                            }
                            if (
    item) {
                                
    console.log('Adding level',item);
                                
    xxxx.global.folderList.addLevel(item);
                            } else {
                                
    console.log('Nah, item is falsy');
                            }
                        }, 
    context);
                    }
                    
    me.doLayout();
                    
    me.ownerCt.doLayout();
                };
                
                
    // @todo make home screen offline-aware, refresh only when folderList has changed
                
                
    console.log("Firing AJAX call for folderList: ",folderList);
                try {
                    
    Ext.util.JSONP.request({
                        
    // 8f7cd7bb0fbebb43317e14bdec019c0b22197a8a
                        
    urlwebserviceEndPoint '/homescreen/',
                        
    params: {
                            
    "token"window.localStorage.getItem('secure'),
                            
    "folder_ids"folderList folderList.join(',') : '[]'
                        
    },
                        
    callbackKey'callback',
                        
    callbackfolderListCallback
                    
    });
                } catch(
    ex) {
                    
    console.error("Error on JSONP call: ",ex);
                }
                
    this.doLayout();
                
    this.ownerCt.doLayout();
            }
        }
    }); 
    does anyone have any idea how i can fix this issue. its terribly annoying and i cant get it

    thx
    oli

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Please do not double post. If you need to edit, there is a way to edit your post. I have deleted your duplicate.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3

    Default

    sorry for that, i had problems loading the page as i created the post.

  4. #4

    Default

    so i solved the problem. this little ***** of code:

    PHP Code:
    homeTpl.overwrite(me.body,response); 
    changed to:

    PHP Code:
    me.update(homeTpl.apply(response)); 
    is the solution to all my problems. now it works, the content rendered correctly. Two and a half days from my life gone...

Posting Permissions

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