Results 1 to 3 of 3

Thread: Wizard card not showing up

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    4

    Default Answered: Wizard card not showing up

    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.

    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.

    Code:
    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

  2. 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.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    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.

  4. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    4

    Default

    Thanks for pointing out what was wrong. I knew I was missing something simple. Also thanks for the tips.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •