如何在默认ExtJs中显示tagfield中的所有标记

我在本地商店有一个标记字段：

{
        xtype: 'tagfield',
        fieldLabel: 'Tag field',
        id: 'myTagField',
        bind: {
            store: '{tags_store}'
        },
        displayField: 'name',
        valueField: 'id',
        queryMode: 'local',
        value: [0,1,2], // how to display all value from store           
        filterPickList: true
}

我的商店：

stores: {
               tags_store: {
                   fields: ['id','name'],
                   data: [
                          {id: 0, name: 'Battlestar Galactica'},
                          {id: 1, name: 'Doctor Who'},
                          {id: 2, name: 'Farscape'}                              
                         ]

               }
           }   

默认情况下，如何在标记域中显示store中的所有值。

只需使用要选择的ID数组定义value属性即可。大概是这样的：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var shows = Ext.create('Ext.data.Store', {
            fields: ['id','show'],
            data: [
                {id: 0, show: 'Short tag'},
                {id: 1, show: 'tag 2'},
                {id: 2, show: 'Long tag 3'}
            ]
        });

        Ext.create('Ext.window.Window', {
            //renderTo: Ext.getBody(),
            title: 'Tagfield Test',
            height: 200,
            width: 500,
            layout: 'fit',
            items: [{
                xtype: 'tagfield',
                fieldLabel: 'Pick a tag',
                //value: [0,1,2],         /// static array of ids <----
                store: shows,
                displayField: 'show',
                valueField: 'id',
                queryMode: 'local',
                filterPickList: true,
                minWidth: 300,
                maxWidth: 200,
                maxHeight: 10,
                afterRender: function(a){  // dynamically getting all store records -- the afterRender event might not be your best option
                    var ids = this.getStore().data.items.map(function(i) { return i.id});
                    alert(ids) // Debug purpose 
                    this.setValue(ids);
                }
            }]
        }).show();
    }
});

storeVar.load({
    callback: function(records, operation, success){
        ...
        ...
    }
});

或者像这样：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var shows = Ext.create('Ext.data.Store', {
            fields: ['id','show'],
            data: [
                {id: 0, show: 'Short tag'},
                {id: 1, show: 'tag 2'},
                {id: 2, show: 'Long tag 3'}
            ]
        });

        Ext.create('Ext.window.Window', {
            //renderTo: Ext.getBody(),
            title: 'Tagfield Test',
            height: 200,
            width: 500,
            layout: 'fit',
            items: [{
                xtype: 'tagfield',
                fieldLabel: 'Pick a tag',
                //value: [0,1,2],         /// static array of ids <----
                store: shows,
                displayField: 'show',
                valueField: 'id',
                queryMode: 'local',
                filterPickList: true,
                minWidth: 300,
                maxWidth: 200,
                maxHeight: 10,
                afterRender: function(a){  // dynamically getting all store records -- the afterRender event might not be your best option
                    var ids = this.getStore().data.items.map(function(i) { return i.id});
                    alert(ids) // Debug purpose 
                    this.setValue(ids);
                }
            }]
        }).show();
    }
});

storeVar.load({
    callback: function(records, operation, success){
        ...
        ...
    }
});

---

但是，当我获取阵列为空的项目时，如何加载存储？如果是动态加载的，只需将afterRender代码移动到回调函数中，也可以将其移动到afterLoad方法中。这样，当代码运行时，商店将有它的项目。我将编辑这些项目的部分代码