PDA

View Full Version : [CLOSED] Sencha Touch 1.x using layout:{type:vbox} its create extra space in bottom



amitgin
20 Dec 2011, 12:11 AM
i have an issue regarding extra bottom space in sencha touch 1.x, my code is given bilow



Ext.setup({ icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
var dockedItems = [{
dock: 'top',
xtype: 'toolbar',
title: 'ABC',
items: []
}];




var incReport = new Ext.Panel({
width: Ext.is.Phone ? 300 : 688,
items:[{
xtype:'panel',
html:'abc'
},{
xtype:'form',
defaults:{labelWidth:'45%'},
id : 'incReport',
items:[{
xtype:'datepickerfield',
label : 'Date',
picker : { yearFrom: 2011 },
value : {
day : (new Date().getDate()),
month : (new Date().getMonth()+1),
year : (new Date().getFullYear())
}
},{
xtype:'datepickerfield',
label : 'Date',
picker : { yearFrom: 2011 },
value : {
day : (new Date().getDate()),
month : (new Date().getMonth()+1),
year : (new Date().getFullYear())
}
},{
xtype: 'textfield',
label: 'Client'
},{
xtype : 'textfield',
label : 'Location ID'
},{
xtype : 'textfield',
label : 'Phone'
},{
xtype : 'textfield',
label : 'Location'
},{
xtype : 'textfield',
label : 'Address'
},{
xtype : 'textfield',
label : 'Contact Name'
},{
xtype:'panel',
html:'abc'
},{
xtype:'checkboxfield',
label : 'Incident (Civil)'
},{
xtype:'checkboxfield',
label : 'Incident (Citation Issued)'
},{
xtype:'checkboxfield',
label : 'Information Only'
},{
xtype:'checkboxfield',
label : 'Other'
},{
xtype:'checkboxfield',
label : 'PSI Case'
},{
xtype:'checkboxfield',
label : 'Police Case'
},{
xtype:'checkboxfield',
label : 'Incident Arrest'
},{
xtype:'textfield',
label : 'Incident Type'
},{
xtype:'panel',
html:'abc'
},{
xtype :'textfield',
label : 'Reporting Officer'
},{
xtype:'textareafield',
label : 'Narration'
},{
xtype:'panel',
height:Ext.is.Phone ? 10 : 10
},{
xtype:'panel',
layout : {type:'hbox',align:'center'},
defaults : {xtype:'button', flex: 1, ui:'confirm'},
items:[{
text : 'Cancel'
},{
text : 'Submit'
}]
}]
}]
});

incReportMainPnl = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
layout: {
type: 'vbox',
align: 'center'
},
dockedItems: dockedItems,
items:[incReport]
});
incReportMainPnl.show();
}
});

mitchellsimoens
20 Dec 2011, 4:21 AM
Wrap you code in code tags so it's readable.
Ext.Panel adds a 1em padding around the body