2012-04-16 129 views
0

我有tabpanel,其中包含一些標籤。我將專注於第6個選項卡 - navigatingPanels.js文件。在這個文件中,我有一個卡片佈局,以便用戶可以在提交時將form1 &移動到form2(滑動到form2)。我也有一個停靠的工具欄,有一個後退按鈕,以便用戶可以移回form1(如果需要)。它給出了一個錯誤 - 未捕獲的錯誤:[錯誤] [Ext.Base#callParent]給出的項目無效:未定義,必須是配置對象以生成新項目或現有組件實例。 該應用程序可以在這裏看到 - http://maalguru.in/touch/Raxa-70/MyApp/Sencha Touch2 - 卡片佈局不工作的面板

更新 - 如果我添加一個額外的卡有關面板,&刪除在Form1窗體2 &(必填板/卡),然後正常工作。在這種情況下,我必須將ActiveItem設置爲所需的卡片(form1 & form2)。更改視口 - http://pastebin.com/P4k04dBQ 是否有任何解決方案只用2個面板/卡實現?

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});  

    } 
}); 
+0

該鏈接不起作用,但是可能存在與它們的加載順序有關的問題。 – 2012-04-16 04:59:37

+0

是的,我認爲加載順序是原因,我有時也會在我的本地服務器上遇到這種情況。 – Gaurav 2012-04-16 08:10:51

回答

0

嘗試......

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 
      ] 
     } 
    }); 
+0

它沒有起作用,直到第一次按下後退按鈕時,form1上的按鈕仍然不起作用。 – Gaurav 2012-04-16 07:55:11

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' 
            } 
           ] 
          } 
        ] 
       } 
     ] 
    } 

}); 
+0

感謝Sench論壇的答案:) – Gaurav 2012-04-16 23:27:53

相關問題