Sencha-touch 2 - 在标签面板内形成

Question

我是新手Sencha用户。我会编写一个tab面板，并在每张表格中放入一个表格。 我尝试定义MainForm的变种，并把2标签，但如果我点击2选项卡上的按钮，我已经回到一个空白面板....

我做错了吗？ 谢谢。

//<debug> 
Ext.Loader.setPath({ 
    'Ext': '../../src' 
}); 
//</debug> 

/** 
* This is a simple example that demonstrates the Ext.TabPanel component. 
* 
* It will simply create a Ext.tab.Panel component with three children and add it to the viewport. 
*/ 
Ext.application({ 
    glossOnIcon: false, 
    icon: { 
     57: 'resources/icons/icon.png', 
     72: 'resources/icons/icon@72.png', 
     114: 'resources/icons/icon@2x.png', 
     144: 'resources/icons/icon@114.png' 
    }, 

    phoneStartupScreen: 'resources/loading/Homescreen.jpg', 
    tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg', 

    //next we require any components we are using in our application. 
    requires: [ 
     'Ext.tab.Panel', 
     'Ext.form.*', 
     'Ext.field.*', 
     'Ext.Button', 

     'Ext.data.Store' 
    ], 

    /** 
    * The launch function is called when the browser and the framework is ready 
    * for the application to launch. 
    * 
    * All we are going to do is create a simple tabpanel with 3 items, and add 
    * it to the global Ext.Viewport instance. 
    */ 
    launch: function() { 
     //we send a config block into the Ext.Viewport.add method which will 
     //create our tabpanel 
     var mainForm = Ext.create('Ext.form.Panel', { 
      fullscreen: true, 
      items: [ 
       { 
        xtype: 'textfield', 
        name : 'name', 
        label: 'Name' 
       }, 
       { 
        xtype: 'emailfield', 
        name : 'email', 
        label: 'Email' 
       }, 
       { 
        xtype: 'passwordfield', 
        name : 'password', 
        label: 'Password' 
       } 
      ] 
     }); 


     Ext.Viewport.add({ 
      //first we define the xtype, which is tabpanel for the Tab Panel component 
      xtype: 'tabpanel', 

      //next we define the items that will appear inside our tab panel 
      items: [ 
       { 
        //each item in a tabpanel requires the title configuration. this is displayed 
        //on the tab for this item 
        title: '1-tab', 

        //next we give it some simple html 
        items: { 
         html: '1', 
         centered: true 
        }, 

        //then a custom cls so we can style it 
        cls: 'card1' 
       }, 
       { 
        //title 
        title: '2-tab', 

        //the items html 
        items: [mainForm], 

        //custom cls 
        cls: 'card2' 
       }, 
       { 
        //title 
        title: '3-tabs', 

        //the items html 
        items: { 
         html: '3', 
         centered: true 
        }, 

        //custom cls 
        cls: 'card3' 
       } 
      ] 
     }); 
    } 
}); 

Answer 1

你做得不对。

您正在将mainForm嵌套在items[]阵列中。它不应该是这样。

而是分别创建每个项目并添加到TabPanel的项目数组中。

演示： -

Ext.Loader.setConfig({ 
    enabled: true 
}); 

Ext.application({ 
    name: 'SenchaFiddle', 

    launch: function() { 
     var mainForm = Ext.create('Ext.form.Panel', { 
      fullscreen: true, 
      title:'2-tab', 
      items: [ 
       { 
        xtype: 'textfield', 
        name : 'name', 
        label: 'Name' 
       }, 
       { 
        xtype: 'emailfield', 
        name : 'email', 
        label: 'Email' 
       }, 
       { 
        xtype: 'passwordfield', 
        name : 'password', 
        label: 'Password' 
       } 
      ] 
     }); 

     var htmlForm1 = Ext.create('Ext.form.Panel',{ 
       title: '1-tab', 

       //next we give it some simple html 
       items: { 
       html: '1', 
       centered: true 
       }, 

       //then a custom cls so we can style it 
       cls: 'card1' 
     }); 

     var htmlForm3 = Ext.create('Ext.form.Panel',{ 
      title: '3-tab', 

       //next we give it some simple html 
      items: { 
       html: '3', 
       centered: true 
      }, 

      //then a custom cls so we can style it 
      cls: 'card3' 
     }); 

     Ext.Viewport.add({ 
      //first we define the xtype, which is tabpanel for the Tab Panel component 
      xtype: 'tabpanel', 

      //next we define the items that will appear inside our tab panel 
      items: [htmlForm1,mainForm,htmlForm3] 
     }); 
    } 
}); 

---

输出：