PDA

View Full Version : Wizard card not showing up



Jplusm
1 Nov 2013, 11:24 AM
Hello, I am pretty new to Ext JS and I am struggling with the following problem. I am trying to define a wizard with each card panel defined in a seperate file, however they do not show up. If i define the card panel in the wizard itself, it shows up fine. The following is my code.



Ext.define('SAD.view.pi.add.Add', {
extend: 'Ext.window.Window',
alias: 'widget.addPerson',
id: 'addPerson',
layout: 'fit',
width: 640,
height: 480,
items: [{
xtype: 'panel',
layout: 'card',
activeItem: 0,
items: [{
xtype: 'addPersonnelName'
}, {
xtype: 'addPersonnelGeneral'
}, {
html: '<h1>This shows up</h1>'
}],
bbar: ['->', {
xtype: 'button',
text: 'Previous',
handler: function(btn) {
var layout = this.up('panel').getLayout();


if (layout.getPrev()) {
layout.prev();
}
}
}, {
xtype: 'button',
text: 'Next',
handler: function(btn) {
var layout = this.up('panel').getLayout();


if (layout.getNext()) {
layout.next();
}
}
}]
}]
});


The following two definitions are in two seperate files under sad/view/pi/add/Name and sad/view/pi/add/General respectively.



Ext.define('SAD.view.pi.add.Name', {
extend: 'Ext.form.Panel',
alias: 'widget.addPersonnelName',
id: 'addPersonnelName',
items: [{
html: '<h1>This is the name panel</h1>'
}]
});

Ext.define('SAD.view.pi.add.General', {
extend: 'Ext.form.Panel',
alias: 'widget.addPersonnelGeneral',
id: 'addPersonnelGeneral',
items: [{
html: '<h1>This is the general panel</h1>'
}]
});



The first item, 'addPersonnelName' shows nothing, if I click next to go to 'addPersonnelGeneral', I get nothing but a horizontal scrollbar across the bottome, and lastly if I go to the third item, I do get the "This shows up". In firebug, I don't even see the last two script files holding those definitions show up, only the main Add wizard script file.

Can somebody please point out what I am doing wrong. TIA

scottmartin
4 Nov 2013, 12:59 PM
Do you have a requires:[] to include your other files for your panels?

If you are using ext-dev.js, it will show you any missing requires.

Also, you may want to stay away from using hard 'id's for your components, just not a good practice. Have you look at itemId and use Query instead to gain access to your component.

Scott.

Jplusm
5 Nov 2013, 10:13 AM
Thanks for pointing out what was wrong. I knew I was missing something simple. Also thanks for the tips.