PDA

View Full Version : Layout/scroll Issue



stratboogie
7 Feb 2011, 6:04 PM
Hello, I am working on my first app with Sencha mobile. I have everything working ok, but the forms do not scroll very well. Also when you scroll down, and then hit another tab it activates a Textfield instead of loading the loading. I have posted my code, is there a better way to do the layout to handle scrolling?

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) {
ConnectFirstName.setValue("");
ConnectLastName.setValue("");
ConnectAddress.setValue("");
ConnectCity.setValue("");
ConnectState.setValue("");
ConnectZip.setValue("");
ConnectPhone.setValue("");
ConnectEmail.setValue("");
ConnectDOB.setValue("");
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.FirstName.setValue("");
EngageLastName.setValue("");
EngageAddress.setValue("");
EngageCity.setValue("");
EngageState.setValue("");
EngageZip.setValue("");
EngagePhone.setValue("");
EngageEmail.setValue("");
EngageComments.setValue("");
EngageDOB.setValue("");
EngageType.setValue("first");
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.FirstName.setValue("");
RequestLastName.setValue("");
RequestAddress.setValue("");
RequestCity.setValue("");
RequestState.setValue("");
RequestZip.setValue("");
RequestPhone.setValue("");
RequestEmail.setValue("");
RequestComments.setValue("");
RequestDOB.setValue("");
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]
});
}
});