如何在煎茶觸摸

Question

我有一個觀點，模型和存儲使用定義的視圖。

那麼如何在主視圖中使用定義的視圖（TripList）呢？

由於

**Update:** 

這裏是商店代碼：

Ext.define('myApp.store.Trips', { 
    extend: 'Ext.data.Store', 
    defaultRootProperty: 'Name', 
    requires: ['myApp.model.Trip'], 
    config: { 
     model: 'myApp.model.Trip', 
     storeId: 'TripStore', 
     autoLoad: true, 
     data: [ 
      { Name: 'Thailand Trip', Date: '2014.03.03', Friends: 'irene@gmail.com, franva008@gmail.com', Description: 'We will explore the hustle and bustle markets in the acient country.' }, 
      { Name: 'Malysia Trip', Date: '2014.03.03', Friends: 'irene@gmail.com, franva008@gmail.com', Description: 'We will explore the hustle and bustle markets in the acient country.' }, 
      { Name: 'U.S.A. Trip', Date: '2014.03.03', Friends: 'irene@gmail.com, franva008@gmail.com', Description: 'We will explore the hustle and bustle markets in the acient country.' }, 
      { Name: 'The Great China Trip', Date: '2014.03.03', Friends: 'irene@gmail.com, franva008@gmail.com', Description: 'We will explore the hustle and bustle markets in the acient country.' } 
     ] 
    } 
}); 

Answer 1

只需創建它的一個實例爲任何其它視圖或組件。

要麼做這個...

items: [ 
    Ext.create('myApp.view.TripList') 
] 

或者用它的別名（的xtype）...

items:[ 
    { 
     xtype: 'TripListView', 
     .... 
    } 
] 

編輯

這裏有一個小提琴：https://fiddle.sencha.com/#fiddle/3hg

這裏是代碼...

Ext.define('MyApp.model.Trip', { 
    extend: 'Ext.data.Model', 
    config: { 
     fields: [{ 
      name: 'Name', 
      type: 'auto' 
     }, { 
      name: 'Date', 
      type: 'auto' 
     }, { 
      name: 'Friends', 
      type: 'auto' 
     }, { 
      name: 'Description', 
      type: 'auto' 
     } 

     ] 
    } 
}); 

Ext.define('MyApp.store.Trips', { 
    extend: 'Ext.data.Store', 
    defaultRootProperty: 'Name', 
    requires: ['MyApp.model.Trip'], 
    config: { 
     model: 'MyApp.model.Trip', 
     storeId: 'TripStore', 
     autoLoad: true, 
     data: [{ 
      Name: 'Thailand Trip', 
      Date: '2014.03.03', 
      Friends: 'irene@gmail.com, franva008@gmail.com', 
      Description: 'We will explore the hustle and bustle markets in the acient country.' 
     }, { 
      Name: 'Malysia Trip', 
      Date: '2014.03.03', 
      Friends: 'irene@gmail.com, franva008@gmail.com', 
      Description: 'We will explore the hustle and bustle markets in the acient country.' 
     }, { 
      Name: 'U.S.A. Trip', 
      Date: '2014.03.03', 
      Friends: 'irene@gmail.com, franva008@gmail.com', 
      Description: 'We will explore the hustle and bustle markets in the acient country.' 
     }, { 
      Name: 'The Great China Trip', 
      Date: '2014.03.03', 
      Friends: 'irene@gmail.com, franva008@gmail.com', 
      Description: 'We will explore the hustle and bustle markets in the acient country.' 
     }] 
    } 
}); 

Ext.define('MyApp.view.TripList', { 
    requires: ['MyApp.store.Trips'], 
    extend: 'Ext.List', 
    xtype: 'TripListView', 
    config:{ 
     itemTpl: '{Name}', 
     fullscreen:true, 
     store: Ext.create('MyApp.store.Trips').load()   
    } 


}); 

Ext.define('MyApp.view.Main', { 
    extend: 'Ext.tab.Panel', 
    xtype: 'main', 
    requires: ['Ext.TitleBar', 'Ext.Video', 'Ext.dataview.List', 'Ext.XTemplate', 'MyAccountant.view.TripList'], 
    config: { 
     tabBarPosition: 'bottom', 

     items: [{ 
      title: 'Trip List', 
      iconCls: 'list', 
      layout:'fit', 
      items: [ 
       Ext.create('MyApp.view.TripList',{ 
        width:'100%' 
       }) 
      ] 
     }, { 
      title: 'Welcome', 
      iconCls: 'home', 

      styleHtmlContent: true, 
      scrollable: true, 

      items: { 
       docked: 'top', 
       xtype: 'titlebar', 
       title: 'Welcome to Sencha Touch 2' 
      }, 

      html: ["You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ", "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ", "and refresh to change what's rendered here."].join("") 
     }] 
    } 
}); 

/* 
    This file is generated and updated by Sencha Cmd. You can edit this file as 
    needed for your application, but these edits will have to be merged by 
    Sencha Cmd when it performs code generation tasks such as generating new 
    models, controllers or views and when running "sencha app upgrade". 

    Ideally changes to this file would be limited and most work would be done 
    in other places (such as Controllers). If Sencha Cmd cannot merge your 
    changes and its generated code, it will produce a "merge conflict" that you 
    will need to resolve manually. 
*/ 

Ext.application({ 
    name: 'MyApp', 


    controolers: ['MyApp.controller.Main'], 

    views: ['Main', 'MyApp.view.TripList'], 


    launch: function() { 
     // Destroy the #appLoadingIndicator element 


     // Initialize the main view 
     Ext.Viewport.add(Ext.create('MyApp.view.Main')); 
    }, 

    onUpdated: function() { 
     Ext.Msg.confirm("Application Update", "This application has just successfully been updated to the latest version. Reload now?", 

     function(buttonId) { 
      if (buttonId === 'yes') { 
       window.location.reload(); 
      } 
     }); 
    } 
});