PDA

View Full Version : Converting a Ext.Setup to a standard panel/view



tldes
8 Feb 2012, 2:12 PM
I am trying to wrap my head around Sencha and feel I am really close. I've pretty much tried to use examples I have found and extend them to what I need to do. I am down to forms and urgently need some assistance. I have the code listed below and it works great. Unfortunately, since it's using the setup method for Ext, it takes over my application. My goal is to convert this to something I can reference as an xtype from my viewport. I have listed the code for the form below as well as my viewport to show how I would like to call it.

The key point I am trying to accomplish is wrapping this is something like MyApp.views.Apptcard = " " not Ext.Setup. Pointers, suggestions would be greatly appreciated.

Code for the form (I would like this referenced as apptcard as indicated in my Viewport)


Ext.setup({
onReady: function() {


var form;


var formBase = {
scroll: 'vertical',
standardSubmit : false,
errors: [],
items: [{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name',
useClearIcon: true,
autoCapitalize : false
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}, {
xtype: 'passwordfield',
name : 'reenter',
label: 'Re-enter Password',
useClearIcon: true
}, {
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: 'you@sencha.com',
useClearIcon: true
}]
}
],
listeners : {
submit : function(form, result){

},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
}
},

dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Save',
ui: 'confirm',
handler: function() {
var isValid = true;
var errors = new Array();

var fieldValMap = form.getValues();
var email = fieldValMap['email'];
var name = fieldValMap['name'];

if (name.search(/[0-9]/) > -1) {
isValid = false;
errors.push({field : 'name',
reason : 'Name must not contain numbers'});
}

if (email.search("@") == -1) {
isValid = false;
errors.push({field : 'email',
reason : 'E-mail address must contain @'});
}

if (!isValid) {
var errStr = "";

Ext.each(errors, function(error, index){
errStr += "[" + (index+1) + "] - " + error.reason + "\n";
});

Ext.Msg.alert("Error", errStr);
} else {//form is valid
form.submit();
}
}
}
]
}
]
};

if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 385,
width: 480
});
}

form = new Ext.form.FormPanel(formBase);
form.show();
}
});


Code for my viewport


MeaMobile.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
cls: 'main',
id: 'main1',
dockedItems: [

{
dock: 'bottom',
html: '',
style: ""},


],
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'aboutcard',id:'aboutcard' },
{ xtype: 'maincard', id: 'home',title: 'Menu'},
{ xtype: 'apptcard',id:'apptcard' }, Pointing to the form
{ xtype: 'locationcard',id:'locationcard' },
]
});
MeaMobile.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});

tldes
8 Feb 2012, 8:01 PM
I did get this to work. If anyone is interested in seeing the result, send me a message.