默认情况下如何在标签字段中显示所有标签

时间:2018-10-02 14:09:30

标签: extjs extjs6-classic

我在本地商店有一个标记场:

{
        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'}                              
                         ]

               }
           }   

默认情况下,如何显示标签字段中存储的所有值。

1 个答案:

答案 0 :(得分:1)

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

对于非静态商店,afterRender功能需要位于“ afterLoad”回调中。像这样(未经测试,也许最好使用records参数):

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){
        ...
        ...
    }
});