Bryntum Support Forums

Hello everyone,
I just wanted to use BryntumCombo component with AjaxStore that fetch all my user's emails from server. But when i use the same store for all my BryntumCombo components it cause a conflict where only my last component properly work. My components are multiselect and has the event createOnUnmatched but it only work with the last component that use my store other components follow last changes in store that caused by last component. It is an unexpected behavior.

Also v-model is not working with BryntumCombo and i have to listen to changes and update my variable with those changes like this

:onChange="({value}) => toEmails = value"

I can't use three different store. since there will be three different api calls and my stores won't share the emails that has been created on unmatched event. I need all my components be on the same page.

I share some snapshots from my code and UI.

Thanks!

Try to chain a store for other instances of your combos
https://bryntum.com/products/calendar/docs/api/Core/data/mixin/StoreChained#function-chain

store: participantStore.chain();

Also v-model is not working with BryntumCombo

Yes, "v-model" is not supported. You need to use events or bind value.

Hey Alex,
Thank you for replying. It is not working. I still see the same behavior that store is only working for the last item using it. it works if i generate a new chained store for each component but when selecting an item it goes to infinite loop.

Are you wanting all email addresses to be initially loaded into your app en masse, and then, on Combo usage, examine local data? That is your strategy now, with an autoLoad AjaxStore.

An alternative would be dynamic lookup of emails on demand, so that as you type, the store is incrementally loaded with matching email addresses? Your /all-emails handler would have to process a filterParam to return only required data.

But to the problem you are having, this should work sharing a single store. The Combos use the store for loading their dropdown lists. Many UIs can share a store so this should work fine.

The store can be shared between combos. We need more information to help you solve it.

Hey Animal,
Thank you for replying. So basically, what i am trying to do is; loadd all emails from /all-emails into store. also if some emails are not in my system i should be able to insert it into store after records loaded. user should also be able to createOnUnmatched. right now they can create on unmatched, emails being load from /all-emails, emails that are not exist being inserted on afterRequest event. But whenever i added ":value="toEmails"" my application crashes and i am not able to bind value for any of combo.

I was able to solve chaining store in each component. By just changing participantStore from constant to a function that returns me AjaxStore. But still binding value will crash my application.

Here i attach my code and what i am trying to do!

I can't understand :value="ToEmails". I can only understand Javascript.

What is the actual javascript configuration?

Those are my actual javascript configuration. And

:value="ToEmails"

Means that bind value of this component. So basically it sets Bryntum Combo value same as

const combo = new Combo({
    value:toEmails
});

.

all other configuration is also being bind from third picture that i shared.

my application crashes and i am not able to bind value for any of combo.

What error do you have?

Could you please post a runnable code that we could use to reproduce that? Also please use "code" tags to post code fragments. In that case we will be able to copy that and not retype

Unfortunately, I am unable to provide you a runnable code. Since, it is a big complex project and our policy does not allow us to share it.

Do you see any error messages in the debugger when you test this?