Как отобразить все теги в поле тегов по умолчанию ExtJs - PullRequest
Новая
       14

Как отобразить все теги в поле тегов по умолчанию ExtJs

0 голосов
/ 02 октября 2018

У меня есть поле тега с локальным хранилищем: 

{
        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 голосов
/ 02 октября 2018

Просто определите свойство 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){
        ...
        ...
    }
});
...