CODEWITHSUNDEEP
extjsextjs6-classic
Andriy Yushko
Andriy Yushko

Reputation: 415

How to display all tags in tagfield by default ExtJs

I have a tagfield with local store:

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

My store:

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

               }
           }

How can me display all value from store in tagfield by default.

Upvotes: 0

Views: 1311

Answers (1)

GriffoGoes
GriffoGoes

Reputation: 734

Just have the value property defined with an array of the ids to be selected. Something like this:

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();
    }
});

For non-static stores, the afterRender functionality need to be in a 'afterLoad' callback. Something like this (untested, maybe it would be better to use the records parameter):

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

Or something like this:

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

Upvotes: 2

Related Questions