PDA

View Full Version : Content Won't Scroll Full Length on Ajax Update



uxdan
12 Jul 2010, 8:09 AM
This is probably a pretty simple fix, but I'm having trouble figuring out the issue.

I have a Ext.Panel that initially contains html: 'Loading...' but right before desplaying the panel I am doing an ajax call and on success I do an .update to the panel to load in the content. I have the panel set to scroll: 'vertical', and while i can scroll vertical it is not actually letting me scroll the full length of the content. It just kind of bounces like it is at the edge.

I suspect that after the update I need to let the panel know of the new content height, but the height is correct on inspecting the .x-panel-body and .x-htmlcontent.

So not sure what to do here.

evant
12 Jul 2010, 8:38 AM
What does your code look like?

uxdan
12 Jul 2010, 8:47 AM
Echo.views.SpeakerInfo = Ext.extend(Ext.Panel, {
id: 'speaker_info',
scroll: 'vertical',
layout: 'card',
styleHtmlContent: true,
fullscreen: true,
html: 'Loading...',
initComponent: function() {

Echo.views.SpeakerInfo.superclass.initComponent.call(this);
},

getSpeakerInfo: function(id) {
Ext.Ajax.request({
url: 'http://echo.firebox.rtpcore.com/mobile_speakers/'+id,
success: function(response, opts) {
Ext.getCmp('speaker_info').update(response.responseText);

}
});
}


});


So from my main app.js file I call the getSpeakerInfo()... I get the data back successfully, but the content won't scroll the full length as described above.

Thanks for taking a look!

evant
12 Jul 2010, 8:53 AM
Works as I would expect:



Bleh = Ext.extend(Ext.Panel, {
scroll: 'vertical',
styleHtmlContent: true,
fullscreen: true,
html: 'Loading...',

getSpeakerInfo: function(id){
Ext.Ajax.request({
scope: this,
url: 'data.asp',
success: function(response, opts){
this.update(response.responseText);

}
});
}
});



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var b = new Bleh();
b.getSpeakerInfo();
}
});


The server code just prints out:


Content 1
Content 2
....
Content 100

uxdan
12 Jul 2010, 9:07 AM
Well, yes, the print out is fine. But even though the scroll: 'vertical' i can't scroll down to view the remaining content. It just does the bounce-back like when you get to the end, but there is clearly more content past that.

:-(

evant
12 Jul 2010, 9:49 AM
The scrolling ok for me, tested on the iPad

uxdan
12 Jul 2010, 10:13 AM
Does the source content have to be formatted to something specific? I have it pulling just a plain HTML file. I've run the test with more content, and now it scrolls, but the side scroll bar seems inaccurate, and it still bounces back before the content actually ends. Any ideas?

Tested on the iPad as well...

uxdan
12 Jul 2010, 11:15 AM
Ok... i think i've narrowed it down to something else. Here is my code and hopefully you can reproduce.

Main js file:

Ext.ns('Echo','Echo.views','Echo.cache','Echo.stores');

Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
statusBarStyle: 'black-translucent',

onReady: function() {
var app = new Echo.App();
}
});App.js File:


Echo.defaultAnim = Ext.platform.isAndroidOS ? false : 'slide';

Echo.App = Ext.extend(Ext.Panel, {
cls: 'app',
fullscreen: true,
layout: 'card',
activeItem: 0,
initComponent: function() {

this.speakers = new Echo.views.Speakers();
this.speakerInfo = new Echo.views.SpeakerInfo();

this.items = [this.speakers, this.speakerInfo];
Echo.App.superclass.initComponent.call(this);

this.speakers.on('itemtap', this.onSpeakerTap, this);

},

onSpeakerTap: function(dv, index, item, e) {
this.speakerInfo.getSpeakerInfo(85);
this.speakers.setCard(this.speakerInfo, Echo.defaultAnim);
}
});
Speakers.js file:


Echo.views.Speakers = Ext.extend(Ext.List, {
id: 'mobile_speakers',
scroll: 'vertical',
layout: 'card',
itemSelector: '.speakers-list-item',
singleSelect: true,
html: 'Loading...',
initComponent: function() {

//Ext.getBody().mask(false, '<div class="demos-loading">Loading&hellip;</div>');
Ext.Ajax.request({
url: 'http://echo.firebox.rtpcore.com/mobile_speakers',
success: function(response, opts) {
Ext.getCmp('mobile_speakers').update(response.responseText);
//Ext.getBody().unmask();
}
});

Echo.views.Speakers.superclass.initComponent.call(this);
}

});

Echo.views.SpeakerInfo = Ext.extend(Ext.Panel, {
id: 'speaker_info',
scroll: 'vertical',
// layout: 'card',
styleHtmlContent: true,
fullscreen: true,
html: 'Loading...',
initComponent: function() {
Echo.views.SpeakerInfo.superclass.initComponent.call(this);
},
getSpeakerInfo: function(id) {
Ext.Ajax.request({
scope: this,
url: 'http://echo.firebox.rtpcore.com/mobile_speakers/'+id,
success: function(response, opts) {
this.update(response.responseText);

}
});
}


});
Everything pulls in fine... i click on the list item and it slides over to the "details" for that speaker. But for whatever reason the scrolling is inaccurate for the details panel. I've stripped out a bunch of other code.

Also, if I call this.speakerInfo.getSpeakerInfo(85); in the initComponent function in App.js the scrolling is accurate.

Hope this helps narrow this thing down. I'm not sure its a bug or if I am just using the code incorrectly. Thanks for your help in advance!

evant
12 Jul 2010, 5:52 PM
The code you posted there is crashing.

You call this.speakers.setCard(), when it should be this.setCard(). Also, you have full screen on the SpeakerInfo, even though it's the child of a card layout.



Ext.ns('Echo', 'Echo.views', 'Echo.cache', 'Echo.stores');

Echo.defaultAnim = Ext.platform.isAndroidOS ? false : 'slide';

Echo.App = Ext.extend(Ext.Panel, {
cls: 'app',
fullscreen: true,
layout: 'card',
activeItem: 0,
initComponent: function(){

this.speakers = new Echo.views.Speakers();
this.speakerInfo = new Echo.views.SpeakerInfo();

this.items = [this.speakers, this.speakerInfo];
Echo.App.superclass.initComponent.call(this);

this.speakers.on('itemtap', this.onSpeakerTap, this);

},

onSpeakerTap: function(dv, index, item, e){
this.speakerInfo.getSpeakerInfo(85);
this.setCard(this.speakerInfo, Echo.defaultAnim);
}
});

Echo.views.Speakers = Ext.extend(Ext.List, {
id: 'mobile_speakers',
scroll: 'vertical',
itemSelector: '.speakers-list-item',
singleSelect: true,
html: 'Loading...',


afterRender: function(){
Echo.views.Speakers.superclass.afterRender.call(this);
this.update('<div class="speakers-list-item">Foo</div>');
}

});


Echo.views.SpeakerInfo = Ext.extend(Ext.Panel, {
id: 'speaker_info',
scroll: 'vertical',
styleHtmlContent: true,
html: 'Loading...',
getSpeakerInfo: function(id){
(function(){
var content = [];
for (var i = 0; i < 100; ++i) {
content.push('Content ' + i);
}
this.update(content.join('<br />'));
}).defer(1000, this);
}


});

Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
statusBarStyle: 'black-translucent',

onReady: function(){
var app = new Echo.App();
}
});

uxdan
13 Jul 2010, 4:58 AM
That was it! The this.speakers.setCard was the culprit apparently! Thanks for looking over my code... i knew it was going to be something simple.