View Full Version : Card Navigation bbar will not move to next active item.

3 Jul 2012, 7:34 AM
Hi there, I am new to the ExtJS 4 environment. I have done some work with 3.4 but for some reason I am just not getting a good grasp on the new version. The issue that I am running into is that I have my card layout set up and all my cards defined and I know that they have worked because I was using the standard navigation functionality that I found on the Documentation for Card Layout in the Sencha API documentation, but as soon as I tried to customize the bbar functionality to verify that the (allowBlank: false) fields are completed before being able to move on to the next card it will not perform any action as if the buttons are not rendering the activeItem.

Any Suggestions and help would be greatly appreicated. Thanks
Here is a snippet of my code so far:

var navigate = function(panel, direction){
var layout = Ext.getCmp('affWizard').getLayout();
var cardFrom = layout.activeItem.id.split('card-')[1];
var cardTo = parseInt(cardFrom) + direction;
var lastCard = Ext.getCmp('affWizard').items.getCount()-1;

if(direction == 1)


var buttons = function(nCard){
return {

id: 'move-prev-'+nCard,
text: '« Previous',
handler: function(){
Ext.bind(navigate, this, [-1]);

width: '(screen.availWidth - height)/2;',
disabled: (nCard == 0) ? true :false
id: 'move-next-'+nCard,
text: 'Next »',
handler: function(){
Ext.bind(navigate, this, [1]);

width: '(screen.availWidth - height)/2;',
formBind: true

var aCards = [];
var aCardDefinitions =[
title: 'Company Information',
items: [fs_company_info],
height: 500

title: 'Marketing Information',
items: [fs_marketing_info],

title: 'Contact Information',
items: [fs_contact_info],

title: 'Payment Information',
items: [fs_payment_info],

title: 'Terms & Conditions',
items: [fs_terms_and_conditions, fs_terms_agree],
height: 800,
autoScroll: true,
title: 'Finished',
items: [{
bodyStyle: 'font-size:20px;',
html: '<div align= "center">Affiliate Signup Complete</br>Thank You!</div>'
layout: 'fit',
items: [btnClose]


id: 'card-'+key,
title: card.title,
bbar: ['->', buttons(key).prev, buttons(key).next],
items: [new Ext.form.FormPanel({
id: 'affiliate_signup_form_'+key,
method: 'POST',
layout: 'form',
monitorValid: true,
//url: 'aff_signup.php',
params: {action: 'POST'},
border: false,
items: card.items,
listeners: {
clientValidation: function(form, bool){
listeners: {
'resize': function(){
setCard(card.width, card.height);

var wizard = Ext.create('Ext.panel.Panel', {
id: 'affWizard',
title: 'Affiliate Signup',
width: 900,
autoHeight: true,
layout: 'card',
activeItem: <?php echo $oExtForms->jsEscape($nActiveCard); ?>,
autoScroll: true,
defaults: {
plain: true,
border: false,
resizable: false,
layout: 'fit',
frame: true,
items: aCards

6 Jul 2012, 2:28 PM
Can you format your code surrounding it with the code tags (no space in the ending tag)


8 Jul 2012, 5:47 PM
Sorry about not having the [CODE] tags around...it was my first post and did not realize until my next post that I could format my post in such a manner. I appreciate you bringing this to my attention. If you have any suggestions to my question I would be greatly obliged to hear them. Thank you in advance.