如何默认显示标记域中的所有标签

Question

我有一个本地商店的标记域：

{
        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的值？

Answer 1

只需使用要选择的ids数组定义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();
    }
});

对于非静态存储，afterRender功能需要在“afterLoad”回调中。类似这样的内容(未经测试，也许使用记录参数会更好)：

var shows = Ext.create('Ext.data.Store', {
    fields: ['id','show'],
    afterLoad: function(records, operation, success){
        if (success){
                var ids = this.data.items.map(function(i) { return i.id});
                var tagfield = Ext.ComponentQuery.query("#tagfieldId")[0];
                tagfield.setValue(ids);
        }
    }
});

或者类似这样的东西：

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