Form rendering

[GoodNewsDesign]

I am having a bit of trouble coming up to speed. I started writing an app by hand so switching over to the SDK is out at this point.
I have written a bunch of screens to render as cards. Problem happened when I realized I was going to have to write my forms as Sencha objects. Some of my code is below. Form input labels do not render. Also, if I take add layout: 'form', to the form card item, it produces an error. Help is greatly appreciated.

var Clickbid = new Ext.Application({
// Ext.require([ 'Ext.form.*']);
name:'ClickBid',
useLoadMask : true,
launch:function(){
Clickbid.views.login = new Ext.form.FormPanel({
xtype: 'container',
//layout:'form',
labelWidth: 75,
frame: true,
waitMsgTarget: true,
monitorValid: true,
items: [
{ html:'<div>'+
'<div class="center"My Organization‘s Name or Affiliation</div>'+
'<div class="center">'+big_logo+'</div>'+
'</div>'+
'<div class="main">'+
'<div class="pad centered two-seventeen">'
},
{
fieldLabel: 'Bidder Number',
xtype: 'textfield',
cls: 'gray',
layout: 'form',
name: 'bid',
anchor:'100%' // anchor width by percentage
},
{
xtype: 'textfield',
fieldLabel: 'Password',
name: 'pwd',
cls: 'gray',
layout: 'form',
anchor: '100%' // anchor width by percentage
},

{
xtype: 'field',
autoCreate: {
tag: 'input',
type: 'image',
src: 'lib/btns/login.png',
//alt: 'Login',
//size: '61,26'
},
name: 'login',
layout: 'form',
id: 'login',
value: 'login',
listeners: {
click: function(){
//get_data(1);
}
}
},

{html:'<div class="vpad">'+
'<a class="lpad aside absm" href="/forgot" rel="8" title="Forgot?">'+
'I Forgot. Help!</a>'+
'</div>'+
'<div class="vpad">'+
'<a href="#" title="Register">'+
'<img src="lib/btns/register.png" alt="Register">'+
'<span class="lpad aside absm">Get a bidder number.</span>'+
'</div>'+
'<div class="vpad">'+
'<a href="preview" title="Preview" rel="2">'+
'<img src="lib/btns/preview.png" alt="Preview"/>'+
'</a><span class="lpad aside absm">a list of our items.</span>'+
'</div>'+
'</div>'+
'</div>'}
]
});
/*
a bunch of other new Ext.form.FormPanels...
*/
Clickbid.views.viewport = new Ext.Panel({
layout : 'card',
fullscreen : true,
cardAnimation : 'slide',
items: [
Clickbid.views.index,
Clickbid.views.login,
Clickbid.views.list,
Clickbid.views.cnfrm,
Clickbid.views.history,
Clickbid.views.checkout,
Clickbid.views.details,
Clickbid.views.logout,
Clickbid.views.forgot

],
listeners:
{
afterrender: function(card){
if(uid===0){ this.setActiveItem(1); }
card.body.on('click', function(e, t){
if( a = e.getTarget("a", 2) ) {
var page = e.getTarget("a").rel;
var target = e.getTarget("a").href;
if (page!=='undefined'){
var i = parseInt(page);
Clickbid.views.viewport.setActiveItem(i);
get_data(i);
e.stopEvent();
}
}
})
}
}

});
}
});

[mitchellsimoens]

Are you sandboxing Ext JS 3 and Ext JS 4?

[GoodNewsDesign]

Just serving the app from localhost and using Web browser and emulator. Trying to open the index file in the IDE in 3.3 0r 4 yields the following: However, I have dropped out my data script so I have no idea what JSON is being referred to unless it is the actual JavaScript object notation???

You're trying to decode an invalid JSON String:
Source Class: Ext.JSON
Source Method: decode


Too bad there are no file attachments here so that I could send you a nicely formatted code file...