如何在Sencha Touch中使用已定义的视图

Question

我有一个视图，模型和商店：

Ext.define('myApp.view.TripList', {
    fullscreen: true,
    extend: 'Ext.Container',
    xtype: 'TripListView',
    store: 'TripStore',
    displayField: 'text'

});

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

        ]
    }
});

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

        items: [
            {
                title: 'Trip List',
                iconCls: 'list',
                scrollable: true,
                xtype: 'TripListView'
                //view: 'MyAccountant.view.TripList'
            }

        ]
    }
});

我想显示一个嵌套列表。

那么如何在主视图中使用已定义的视图（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();
            }
        });
    }
});