PDA

View Full Version : List content is being cut off



robertj98
22 Jul 2010, 4:49 AM
Hi,

I have an app with card layout which are mixture of lists and static layouts and they work fine.
I am trying to put together a card which looks like the spotlight search page in iPhone, ie

toolbar => [ Back ]
search field => [ Search ]
result list => [ list ... ]

main panel definition is


var searchPanel = new Ext.Panel({
id: 'searchPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
dockedItems: {
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Go Back',
ui: 'back',
handler: function(){
main.setCard('menuPage');
}
}
]
},
scroll: false,
items: [ itemsearch ]
});

and list defintion is



var itemsearch = new Ext.List({
id: 'itemsearch',
dockedItems: {
xtype: 'toolbar',
dock: 'top',
items: [ searchForm2
] // list of items in toolbar
},
tpl: itemlistTemplate,
itemSelector: 'div.tplItems',
singleSelect: true,
grouped: true,
indexBar: false,
emptyText : '<p style="padding: 10px">No items found matching that search</p>',
store: itemsStore, // specify the store
scroll: 'both',
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
main.setCard('item_detail');
item_detail.update({
stitemtype: rec.get('stitemtype'),
stdesc: rec.get('stdesc'),
stimage: rec.get('stimage'),
setyear: rec.get('setyear'),
stdetails: rec.get('stdetails'),
stmoredetails: rec.get('stmoredetails'),
stimagedir: rec.get('stimagedir')
});
}
}
});


This displays fine , I get toolbar, followed by search field in bar, then get the results list with grouping,
BUT the scrolling does not seem to work - the content of the list seems to get cut off just below the initial window size. It does scroll up but no more content is shown.

Any ideas what I am doing wrong?

evant
22 Jul 2010, 5:11 AM
Several things, mostly related to layouts:

1) Your panel has no dimensions and it doesn't appear to be full screen. This is a problem.
2) Why use a vbox layout, you only have 1 child item? Use a 'fit' layout instead.

robertj98
22 Jul 2010, 7:04 AM
Evan,

Thanks, your suggestion of using 'fit' layout worked.
Is there a page in the API or elsewhere that explains what the config options for layout are and in what situations you should use them?

Robert

evant
22 Jul 2010, 2:11 PM
http://www.sencha.com/deploy/touch/docs/

Under layout on the tree.

blessan
22 Jul 2010, 10:55 PM
I am also having the same problem. Could u please help me. The fit layout isnt really working. I have a list of event for the day. The list for which shows on the screen only displays. The vertical scroll bar should work to show the rest but the panel shows as thought that much is only rendered. Here is my code.



Ext.setup({
icon: 'icon.png',
db:null,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var mainPanel=new Ext.Panel({
fullscreen:true,
scroll: 'vertical',
layout:'card',
activeItem:0,
items:[{
xtype:'form',
id:'mainform',
fullscreen:true,
items:[{
xtype: 'fieldset',
instructions: '',
fullscreen:false,
title: 'Calendar Demo',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype:'toolbar',
dock: 'bottom',
items: [
{xtype: 'spacer'},
{
text: 'View Demo',
ui: 'action',
centered :true,
scope:this,
maxWidth:150,
handler: function() {
var third=Ext.getCmp('thirdpanel');
mainPanel.setCard(third, 'slide');
Ext.Ajax.request({
url: 'demoCalendar.php',
method: 'POST',
success: function(responseObject) {
var data = Ext.decode(responseObject.responseText);
$('#calendar').fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
titleFormat: {
day: 'ddd, MMM d, yyyy'
},
weekMode:"fixed",
editable: true,
events: data
});
},
failure: function(responseObject) {
var data = Ext.decode(responseObject.responseText);
console.info("Error",data);
},
scope: this
});
}
}]
}]
}]
},
{
xtype:'panel',
//layout:'card',
scroll: 'vertical',
id:'thirdpanel',
html:'<div id="calendar"></div>',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'justify',
align: 'center' // align center is the default
},
items: [
{
xtype: 'button',
ui: 'action',
text: 'Month',
handler: function() {
$('#calendar').fullCalendar( 'changeView', 'month' );
Ext.getCmp('calendar_top_toolbar').setTitle($('#calendar .fc-header-center h2').html());
}
},
{
xtype: 'button',
ui: 'action',
text: 'Week',
handler: function() {
$('#calendar').fullCalendar( 'changeView', 'basicWeek' );
Ext.getCmp('calendar_top_toolbar').setTitle($('#calendar .fc-header-center h2').html());
}
},
{
xtype: 'button',
ui: 'action',
text: 'Day',
handler: function() {
//$('#calendar').fullCalendar( 'changeView', 'basicDay' );
$('#calendar').fullCalendar( 'changeView', 'agendaDay' );
Ext.getCmp('calendar_top_toolbar').setTitle($('#calendar .fc-header-center h2').html());
}
}
]
},
{
xtype: 'toolbar',
dock: 'top',
id:'calendar_top_toolbar',
title: 'Birthdate',
layout: {
pack: 'justify',
align: 'center' // align center is the default
},
items: [
{
xtype: 'button',
ui: 'action',
text: '<',
handler: function() {
$('#calendar').fullCalendar( 'prev' );
Ext.getCmp('calendar_top_toolbar').setTitle($('#calendar .fc-header-center h2').html());
},
listeners: {
"render": function() {
var d=new Date();
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
var title = month[d.getMonth()]+" "+d.getFullYear();
Ext.getCmp('calendar_top_toolbar').setTitle(title);
}
}
},
{xtype: 'component', flex: 1},
{
xtype: 'button',
ui: 'action',
text: '>',
handler: function() {
$('#calendar').fullCalendar( 'next' );
Ext.getCmp('calendar_top_toolbar').setTitle($('#calendar .fc-header-center h2').html());
}
}
]
}]
}
]

});
if (Ext.platform.isPhone||Ext.platform.isTablet) {
mainPanel.fullscreen = true;
} else {
Ext.apply(mainPanel, {
fullscreen: true,
floating: true,
modal: false,
centered: true,
hideOnMaskTap: false,
//height: 385,
//width: 550,
autoWidth:true,
autoHeight:true
});
}
mainPanel.show();
localStorage.name = "blessan";
localStorage.password = "blessan123";

}

}
);

blessan
22 Jul 2010, 10:57 PM
my applications works well on the chrome but has issues in the iphone. Dont know whats goin wrong.

evant
22 Jul 2010, 11:56 PM
Well, to start with you have 2 items that have fullscreen: true.

Also, a panel can't be floating, nor centered if it's full screen. Think about what config options mean before putting them in.

Also, your code doesn't even mention a list anywhere...

blessan
23 Jul 2010, 2:14 AM
I was able to correct it. It was a issue with my full calendar plugin. I wanted to ask, is there a scroll into view in sencha.
I have 2 panels. If I scroll midway through the first panel and then slide to the second panel, I am still scrolled midway in my second panel. I want the panel to be scrolled to top. Is there a method for that.