如何使用外部存储呈现数据视图的 tpl？

Question

我正在为我的观点而苦苦挣扎，即我使用代理在我的页面内加载了一个商店，并且它工作得很好。但是，一旦我加载具有相同 srore 但外部的相同数据视图，它就不起作用了。

此示例有效：

Ext.create('Ext.data.Store',{

storeId:'employeeStore',
fields:['id', 'name', 'type','children'],
data:[
    {
        id : 1,
        name : "GEO ET 09",
        type : 1,
        children: [ 
            { id: 11, parent: 1 ,name: '0820 689 689' }, 
            { id: 12, parent: 1, name: '0820 689 689' },
            { id: 13, parent: 1 ,name: '0820 689 689' }, 
            { id: 14, parent: 1, name: '0820 689 689' },
        ]
    },
    {
        id : 2,
        name : "0800 & 0805",
        type : 2,
        children: [ 
            { id: 21, parent: 2, name: '0820 689 689' }, 
            { id: 22, parent: 2, name: '0820 689 689' }, 
            { id: 23, parent: 2, name: '0820 689 689' },
        ]
    },
],

});

Ext.define('Axiastats.view.NumbersChoicePanel', { 扩展：'Ext.FormPanel'， renderTo: 'numbersChoice', 别名：'widget.NumbersChoicePanel', id : 'numbersChoice-container',

requires : ['Ext.form.*','Ext.button.*', 'Ext.layout.container.Column', 'Ext.tab.Panel','Axiastats.store.Numbers'],

baseCls: 'numbersChoice-container',
cls: 'choice hoverBox round6',
layout: 'anchor',
bodyPadding: '0',
modal : true,
defaults: {
    border: false,
    layout: 'anchor',
},
items : [
    {
        xtype: 'box',
        autoEl: {
            tag: 'div',
            cls: 'arrow'
        }
    },
    {
        xtype: 'dataview',
        id: 'numbers-view',
        cls: 'cont round4',
        itemSelector: 'div.categNumbersRow',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        //store: 'Axiastats.store.Numbers',
        tpl: [
            '<tpl for=".">',
                '<div class="close cat0{type} categNumbersRow" id="categNumbers-{id}">',
                    '<div id="theCategNumbers-{id}" class="title">',
                        '<span class="n01">{name}</span>',
                        '<span class="n02">',
                            '<input type="checkbox" id="checkCategNumbers-{id}" name="checkCategNumbers" value={id} checked="yes"/>',
                            '<label for="checkCategNumbers-{id}">La catégorie</label>',
                        '</span>',
                        '<span id="detailCategNumbers-{id}" class="n03">Détail</span>',
                        '<div class="clear"></div>',
                    '</div>',

                    '<div id="allNumbers-{id}" class="allNumbers" style="display:none;">',
                        '<span class="sep first"></span>',
                        '<ul>',
                            '<tpl for="children">',
                                '<li><input type="checkbox" id="numbersRow-{id}" name="numbersRow-{id}" value="{id}" class ="numbersRow"/> <label for="numbersRow-{id}">{name}</label></li>',
                            '</tpl>',
                        '</ul>',
                        '<span class="sep clear"></span>',
                        '<ul class="select">',
                            '<li><input type="checkbox" id="checkAllNumbers-{id}" name="checkAllNumbers-{id}" class="checkAllNumbers" value="{id}" /> <label for="checkAllNumbers-{id}">Sélectionner tout</label></li>',
                            '<li><input type="checkbox" id="checkAllNumbersReset-{id}" name="checkAllNumbersReset-{id}" class="checkAllNumbersReset" value="{id}" /> <label for="checkAllNumbersReset-{id}">Désélectionner</label></li>',
                        '</ul>',
                        '<span class="sep clear"></span>',
                    '</div>',
                '</div>',
            '</tpl>'
        ],

],

initComponent : function() {
    this.callParent();
},

});

但如果我想将我的商店放在外部文件中：

Ext.define('Axiastats.store.Numbers', {
extend: 'Ext.data.Store',
singleton : true,
autoLoad: true,
storeId:'employeeStore',
fields:['id', 'name', 'type','children'],
data:[
    {
        id : 1,
        name : "GEO ET 09",
        type : 1,
        children: [ 
            { id: 11, parent: 1 ,name: '0820 689 689' }, 
            { id: 12, parent: 1, name: '0820 689 689' },
            { id: 13, parent: 1 ,name: '0820 689 689' }, 
            { id: 14, parent: 1, name: '0820 689 689' },
        ]
    },
    {
        id : 2,
        name : "0800 & 0805",
        type : 2,
        children: [ 
            { id: 21, parent: 2, name: '0820 689 689' }, 
            { id: 22, parent: 2, name: '0820 689 689' }, 
            { id: 23, parent: 2, name: '0820 689 689' },
        ]
    },
],  

});

我删除了商店：Ext.data.StoreManager.lookup('employeeStore')，按商店：'Axiastats.store.Numbers'，

store 已加载，但 tpl 未加载

Answer 1

您应该为数据视图显式创建存储：store: Ext.create('Axiastats.store.Numbers')。 然后删除商店中的singleton : true 配置。它将按预期工作。