PDA

View Full Version : Problems with truncated content



oliverbaer
14 Jul 2011, 12:51 PM
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.

2700427005

Here is the code loaded with the Ext.startup:



/********* 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'
}],
fullscreen: true,
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:



xxxx.app.Homescreen = Ext.extend(Ext.Panel, {
title: trl('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=0; i < nodeList.length; i++) {
Ext.EventManager.addListener(nodeList[i], 'click', function(e, n) {
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=level; i > 0; i--) {
xxxx.global.folderList.onBackTap();
}
var item = false;
for (var i=0; i < listStore.data.items.length; i++) {
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
url: webserviceEndPoint + '/homescreen/',
params: {
"token": window.localStorage.getItem('secure'),
"folder_ids": folderList ? folderList.join(',') : '[]'
},
callbackKey: 'callback',
callback: folderListCallback
});
} 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

mitchellsimoens
14 Jul 2011, 2:58 PM
Please do not double post. If you need to edit, there is a way to edit your post. I have deleted your duplicate.

oliverbaer
14 Jul 2011, 10:31 PM
sorry for that, i had problems loading the page as i created the post.

oliverbaer
15 Jul 2011, 11:44 AM
so i solved the problem. this little of code:



homeTpl.overwrite(me.body,response);


changed to:



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...