Our blazing fast Grid component built with pure JavaScript


Post by lesterleong »

If there are multiple comboboxes and the same store is reused across all of them, combo filtering will fail to work for one or more of the comboboxes.

This is reproducible - the code below will render 2 combos, but only the second one will filter correctly:
var testStore = new bryntum.scheduler.Store({
    data : [
        { id: 1, name: 'foo'},
        { id: 2, name: 'bar'},
        { id: 3, name: 'baz'}
    ]
});

window.combo1 = new bryntum.scheduler.Combo({
    appendTo: document.querySelector('body'),
    store: testStore,
    valueField: 'id',
    displayField: 'name'
});

window.combo2 = new bryntum.scheduler.Combo({
    appendTo: document.querySelector('body'),
    store: testStore,
    valueField: 'id',
    displayField: 'name'
});

Post by pmiklashevich »

Hello,

To create 2 widgets that share data, please create 2 separate stores and pass records of the first store as a dataset of the second store. For example:
let combo1 = new Combo({
    appendTo : document.body,
    store    : new Store({
        data : [
            { id : 1, name : 'ABBA', country : 'Sweden' },
            { id : 2, name : 'Beatles', country : 'UK' }
        ]
    }),
    valueField   : 'id',
    displayField : 'name'
});

let combo2 = new Combo({
    appendTo : document.body,
    store    : new Store({
        data : combo1.store.records
    }),
    valueField   : 'id',
    displayField : 'name'
});
Another option to share data between widgets is to create chained stores. The easiest way to create a chained store is to call makeChained function. For example:
let combo1 = new Combo({
    appendTo : document.body,
    store    : new Store({
        data : [
            { id : 1, name : 'ABBA', country : 'Sweden' },
            { id : 2, name : 'Beatles', country : 'UK' }
        ]
    }),
    valueField   : 'id',
    displayField : 'name'
});

let combo2 = new Combo({
    appendTo : document.body,
    store    : combo1.store.makeChained(() => true),
    valueField   : 'id',
    displayField : 'name'
});
Please check out our Shared data demo in Grid for reference. We are using the first approach there.

And please check out our Drag equipment onto tasks demo (examples/drag-onto-tasks/app.js). We are using the second approach there. You can see this comment in the code:
    // Use a chained Store to avoid its filtering to interfere with Scheduler's rendering
    store      : equipmentStore.makeChained(() => true)
Best regards,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by lesterleong »

Pavel,

Thanks for these. However, both of these approaches seem to create a new store for every new combobox instance. Isn't this a lot of overhead, especially for larger stores and as the number of comboboxes increases? In Ext.JS, I believe it was sufficient to use a single shared store across multiple combobox instances.

Also, note that in the example I shared, I am not applying any filtering whatsoever to the second combobox, yet the first combobox fails to filter at all. To me, the expected behavior would have been that filtering on any one of the comboboxes would override and replace the filters of the other combobox.

Post by pmiklashevich »

Sharing store is not supported yet. I've updated the docs and created a feature request here: https://app.assembla.com/spaces/bryntum/tickets/8777-add-a-support-to-share-stores-between-widgets/details

Pavlo Miklashevych
Sr. Frontend Developer


Post by lesterleong »

Great, thanks.

Post Reply