Sencha Touch2 - Панели с макетом карты не работают

Question

У меня есть tabpanel, который содержит несколько вкладок. Здесь я сосредоточусь на 6-й вкладке - файле navigatingPanels.js. В этом файле у меня есть макет карты, так что пользователь может заполнить форму 1 & переместить в форму2 при отправке (слайд к форме2). У меня также есть закрепленная панель инструментов с обратной кнопкой, чтобы пользователь мог вернуться к form1 (при необходимости). Он дает ошибку - Ошибка при отсутствии: [ERROR] [Ext.Base # callParent] Недопустимый элемент: undefined, должен быть либо конфигурационным объектом для фабрики нового элемента, либо существующим экземпляром компонента. приложение можно увидеть здесь - http://maalguru.in/touch/Raxa-70/MyApp/

Update - Если добавить одну дополнительную карту к соответствующей панели, & удалить form1 & Form2 (необходимых панелей/карты), то он работает отлично. В этом случае я должен установитьActiveItem на нужные карточки (form1 & form2). Измененный Viewport - http://pastebin.com/P4k04dBQ Есть ли решение для достижения всего двух панелей/карт?

Viewport.js

 Ext.define('MyApp.view.Viewport', { 
    extend: 'Ext.TabPanel', 
    xtype: 'my-viewport', 

    config:{ 
     fullscreen: true, 
     tabBarPosition: 'bottom', 

     items: [ 
       { 
        xclass: 'MyApp.view.navigatingPanels' 
       } 
     ] 
    } 
}); 

NavigatingPanels.js

Ext.define('MyApp.view.navigatingPanels',{ 
    extend: 'Ext.Panel', 
    id: 'navigatingPanels', 
    xtype: 'navigatingPanels', 
    config:{ 
     iconCls:'user', 
     title: 'Navigating Panels', 
     layout: 'card', 
     animation: { 
      type: 'slide', 
      direction: 'left' 
     }, 
     defaults:{ 
      styleHtmlContent: 'true' 
     }, 
    items: [ 
       { 
        docked: 'top', 
        xtype: 'toolbar', 
        title: 'Registeration Form', 
        items: [ 
         { 
          text: 'Back', 
          ui: 'back', 
          align: 'centre', 
          //back button to take the user back from form2 to form1 
          handler: function() { 
           Ext.getCmp('navigatingPanels').setActiveItem(form1); 

          } 
         } 
        ] 
       }, 
       form1, 
       form2 
     ] 
    } 

}); 


var form1 = new Ext.Panel({ 
scrollable: 'vertical', 
    items:[ 
     { 
       xtype: 'fieldset', 
       title: 'Form 1', 
       items: [ 
        { 
         xtype: 'textfield', 
         label: 'Name', 
         name: 'name', 
        }, 
        { 
         xtype:'button', 
         text:'Save Data & move to form2', 
         ui: 'confirm', 
         //TODO add some action: to store data 
         //save data & move to form2 
         handler: function() { 
          Ext.getCmp('navigatingPanels').setActiveItem(form2,{ type: 'slide', direction: 'right' }); 
          console.log("Form1"); 
         } 
        } 
       ] 
     } 
    ] 
}); 
var form2 =new Ext.Panel({ 
    scrollable: 'vertical', 
    items:[ 
     { 
       xtype: 'fieldset', 
       title: 'Form 2', 
       items: [ 
        { 
         xtype: 'textareafield', 
         label: 'Message', 
         name: 'message' 
        }, 
        { 
         xtype:'button', 
         text:'Submit Data', 
         ui: 'confirm', 
         //TODO add some action: to store data 
         //action: 'Submit Data' 
        } 
       ] 
      } 
    ] 
}); 

App.js

Ext.Loader.setConfig({ 
    enabled: true 
}); 
Ext.application({ 
    name: 'MyApp', 

    controllers:['Main'], 

    launch: function() { 
      Ext.create('MyApp.view.Viewport', {fullscreen: true});  

    } 
}); 

Answer 1

Попробуйте это ...

myNavigationPanel = Ext.create('MyApp.view.navigatingPanels'); 
myNavigationPanel.setActiveItem(0); 

Ext.define('MyApp.view.Viewport', { 
     extend: 'Ext.TabPanel', 
     xtype: 'my-viewport', 

     config:{ 
      fullscreen: true, 
      tabBarPosition: 'bottom', 

      items: [ 
        { 
         xclass: 'MyApp.view.Home' 
        }, 
        { 
         xclass: 'MyApp.view.Contact' 
        }, 
        { 
         xclass: 'MyApp.view.Products' 
        }, 
        { 
         xclass: 'MyApp.view.Forms' 
        }, 
        { 
         xclass: 'MyApp.view.NestedTabPanels' 
        }, 
        myNavigationPanel 
      ] 
     } 
    }); 

Answer 2

Наконец-то я получил ответ. Экземпляры компонента не должны указываться как элементы в Ext.define, вместо этого следует указать их конфигурацию. SetActiveItem можно назвать обычным способом - Ext.getCmp ('navigatingPanels'). SetActiveItem (0);

Ext.define('MyApp.view.navigatingPanels',{ 
    extend: 'Ext.Panel', 
    id: 'navigatingPanels', 
    xtype: 'navigatingPanels', 
    config:{ 
     iconCls:'user', 
     title: 'Navigating Panels', 
     layout: 'card', 
     animation: { 
      type: 'slide', 
      direction: 'left', 
      duration: 300 
     }, 
     defaults:{ 
      styleHtmlContent: 'true' 
     }, 
    items: [ 
       { 
        docked: 'top', 
        xtype: 'toolbar', 
        title: 'Registeration Form', 
        items: [ 
         { 
          text: 'Back', 
          ui: 'back', 
          align: 'centre', 
          //back button to take the user back from form2 to form1 
          handler: function() { 
           Ext.getCmp('navigatingPanels').setActiveItem(0, {type: 'slide', reverse: 'true',duration: '300' }); 
           console.log(Ext.getCmp('navigatingPanels')); 

          } 
         } 
        ] 
       }, 
       { 
        xtype: 'fieldset', 
        title: 'Form 1', 
        scrollable: 'vertical', 
        items: [ 
         { 
          xtype: 'textfield', 
          label: 'Name', 
          name: 'name', 
         }, 
         { 
          xtype:'button', 
          text:'Save Data & move to form2', 
          ui: 'confirm', 
          //TODO add some action: to store data 
          //save data & move to form2 
          handler: function() { 
           Ext.getCmp('navigatingPanels').setActiveItem(1,{ type: 'slide', direction: 'right' }); 
           console.log("Form1"); 
          } 
         } 
        ] 
       }, 
       { 
        scrollable: 'vertical', 
        items:[ 
         { 
           xtype: 'fieldset', 
           title: 'Form 2', 
           items: [ 
            { 
             xtype: 'textareafield', 
             label: 'Message', 
             name: 'message' 
            }, 
            { 
             xtype:'button', 
             text:'Submit Data', 
             ui: 'confirm', 
             //TODO add some action: to store data 
             //action: 'Submit Data' 
            } 
           ] 
          } 
        ] 
       } 
     ] 
    } 

});