PDA

View Full Version : Form Scrolling Issue



stratboogie
8 Feb 2011, 4:25 AM
Hello, I am developing my first app with sencha mobile and I am having some scrolling problems with the form. I have tested this on several forms, and I cant get it to scroll very well. Sometimes not at all. Also wen I do get it to scroll, if I try to change tabs, it will activate one of the tabpanels. I am posted my code to see if I am doing something wrong or If there is a better way of doing a form layout.
thx
Timothy



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function () {
var ConnectFirstName,
ConnectMiddleName,
ConnectLastName,
ConnectAddress,
ConnectCity,
ConnectState,
ConnectZip,
ConnectPhone,
ConnectEmail,
ConnectDOB;

var Connect = new Ext.form.FormPanel({
title: 'Connect',
scroll: 'vertical',
height: 700,
items: [{
xtype: 'fieldset',
id: 'loginFormSet',
title: '',
items: [ConnectFirstName = new Ext.form.Text({
name: "FirstName",
label: "First"
}), ConnectLastName = new Ext.form.Text({
name: "LastName",
label: "Last"
}), ConnectAddress = new Ext.form.Text({
name: "Address",
label: "Address"
}), ConnectCity = new Ext.form.Text({
name: "City",
label: "City"
}), ConnectState = new Ext.form.Text({
name: "State",
label: "State"
}), ConnectZip = new Ext.form.Text({
name: "Zip",
label: "Zip"
}), ConnectPhone = new Ext.form.Text({
name: "Phone",
label: "Phone"
}), ConnectEmail = new Ext.form.Email({
name: "Email",
label: "Email"
}), ConnectDOB = new Ext.form.DatePicker({
yearFrom: 1900,
yearTo: 2020,
name: "DOB",
label: "DOB"
}), {
xtype: 'button',
text: 'Connect',
ui: 'confirm',
style: 'margin:2%;',
handler: function () {
Ext.Ajax.request({
params: {
a: "IConnectCreate",
FirstName: ConnectFirstName.getValue(),
LastName: ConnectLastName.getValue(),
Address: ConnectAddress.getValue(),
City: ConnectCity.getValue(),
State: ConnectState.getValue(),
Zip: ConnectZip.getValue(),
Phone: ConnectPhone.getValue(),
Email: ConnectEmail.getValue(),
DOB: Ext.util.Format.date(ConnectDOB.getValue(), "m/d/Y")

},
success: function (response, options) {
Connect.reset();
Ext.Msg.alert("Success", "You have successfully Connected!");
},
failure: function (response, options) {
Ext.Msg.alert("Failure", "You have successfully Connected!");
},
scope: this,
url: "IConnect.aspx"
})
}
}]
}]
});

var Engage = new Ext.Panel({
title: 'Engage',
scroll: 'vertical',
height: 700,
items: [{
xtype: 'fieldset',
id: 'loginFormSet',
title: '',
items: [EngageFirstName = new Ext.form.Text({
name: "FirstName",
label: "First"
}), EngageLastName = new Ext.form.Text({
name: "LastName",
label: "Last"
}), EngageAddress = new Ext.form.Text({
name: "Address",
label: "Address"
}), EngageCity = new Ext.form.Text({
name: "City",
label: "City"
}), EngageState = new Ext.form.Text({
name: "State",
label: "State"
}), EngageZip = new Ext.form.Text({
name: "Zip",
label: "Zip"
}), EngagePhone = new Ext.form.Text({
name: "Phone",
label: "Phone"
}), EngageEmail = new Ext.form.Email({
name: "Email",
label: "Email"
}), EngageDOB = new Ext.form.DatePicker({
yearFrom: 1900,
yearTo: 2020,
name: "DOB",
label: "DOB"
}), EngageType = new Ext.form.Select({
label: "Engage In",
options: [{
text: 'First Option',
value: 'first'
}, {
text: 'Second Option',
value: 'second'
}, {
text: 'Third Option',
value: 'third'
}]
}), EngageComments = new Ext.form.TextArea({
name: "EngageComments",
label: "Comments"
}), {
xtype: 'button',
text: 'Engage',
ui: 'confirm',
style: 'margin:2%;',
handler: function () {
Ext.Ajax.request({
params: {
a: "IEngageCreate",
FirstName: EngageFirstName.getValue(),
LastName: EngageLastName.getValue(),
Address: EngageAddress.getValue(),
City: EngageCity.getValue(),
State: EngageState.getValue(),
Zip: EngageZip.getValue(),
Phone: EngagePhone.getValue(),
Email: EngageEmail.getValue(),
Comments: EngageComments.getValue(),
DOB: Ext.util.Format.date(EngageDOB.getValue(), "m/d/Y")

},
success: function (response, options) {
Engage.reset();
Ext.Msg.alert("Success", "You have successfully Engageed!");
},
scope: this,
url: "IConnect.aspx"
})
}
}]
}]
});

var Request = new Ext.Panel({
title: 'Request',
scroll: 'vertical',
height: 700,
items: [{
xtype: 'fieldset',
id: 'loginFormSet',
title: '',
items: [RequestFirstName = new Ext.form.Text({
name: "FirstName",
label: "First"
}), RequestLastName = new Ext.form.Text({
name: "LastName",
label: "Last"
}), RequestAddress = new Ext.form.Text({
name: "Address",
label: "Address"
}), RequestCity = new Ext.form.Text({
name: "City",
label: "City"
}), RequestState = new Ext.form.Text({
name: "State",
label: "State"
}), RequestZip = new Ext.form.Text({
name: "Zip",
label: "Zip"
}), RequestPhone = new Ext.form.Text({
name: "Phone",
label: "Phone"
}), RequestEmail = new Ext.form.Email({
name: "Email",
label: "Email"
}), RequestDOB = new Ext.form.DatePicker({
yearFrom: 1900,
yearTo: 2020,
name: "DOB",
label: "DOB"
}), RequestComments = new Ext.form.TextArea({
name: "Request",
label: "Request"
}), {
xtype: 'button',
text: 'Request',
ui: 'confirm',
style: 'margin:2%;',
handler: function () {
Ext.Ajax.request({
params: {
a: "IRequestCreate",
FirstName: RequestFirstName.getValue(),
LastName: RequestLastName.getValue(),
Address: RequestAddress.getValue(),
City: RequestCity.getValue(),
State: RequestState.getValue(),
Zip: RequestZip.getValue(),
Phone: RequestPhone.getValue(),
Email: RequestEmail.getValue(),
Request: RequestComments.getValue(),
DOB: Ext.util.Format.date(RequestDOB.getValue(), "m/d/Y")

},
success: function (response, options) {
Request.reset();
Ext.Msg.alert("Success", "You request has successfully been submitted!");
},
scope: this,
url: "IConnect.aspx"
})
}
}]
}]
});

var panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
sortable: true,
scroll: 'vertical',
items: [Connect, Engage, Request]
});
}
});

stratboogie
8 Feb 2011, 2:53 PM
You can load it up here an dsee what I am talking about:

http://demo.iconnect.verticalcms.com/Iconnect.aspx

thx
Timothy

stratboogie
9 Feb 2011, 7:06 AM
Any ideas?

stratboogie
14 Feb 2011, 8:41 AM
So, the issue seems to be only on HTC phones. it works beautifully on the IPhone. Is there a trick to getting the scrolling to work on the HTC's. Tested on the HTC hero and HTC desire.

thx
Timothy

stratboogie
14 Feb 2011, 8:43 AM
I updated the url above. It should now navigate to the page I am referring to

thx
Timothy