Our powerful JS Calendar component


Post by ilyaskohistani »

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!

Attachments
to, cc, bcc needs the same store. only output will be different
to, cc, bcc needs the same store. only output will be different
Screenshot 2022-11-26 155409.png (9.19 KiB) Viewed 711 times
how i used bryntumCombo
how i used bryntumCombo
Screenshot 2022-11-26 155505.png (115.25 KiB) Viewed 711 times
How i generate config for BryntumCombo
How i generate config for BryntumCombo
Screenshot 2022-11-26 155532.png (160.64 KiB) Viewed 711 times

Post by alex.l »

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.

All the best,
Alex


Post by ilyaskohistani »

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.


Post by Animal »

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.


Post by ilyaskohistani »

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!

Attachments
as you see i try to chain store and listen for change but binding value would crash
as you see i try to chain store and listen for change but binding value would crash
Screenshot 2022-11-28 021447.png (135.92 KiB) Viewed 697 times
I create new store and I am trying to check if emails not exist insert them into store
I create new store and I am trying to check if emails not exist insert them into store
Screenshot 2022-11-28 021524.png (54.47 KiB) Viewed 697 times
I changed store from constant to a function to generate AjaxStore each time
I changed store from constant to a function to generate AjaxStore each time
Screenshot 2022-11-28 021606.png (155.27 KiB) Viewed 697 times

Post by Animal »

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

What is the actual javascript configuration?


Post by ilyaskohistani »

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.


Post by alex.l »

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 :)

All the best,
Alex


Post by ilyaskohistani »

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.


Post by Animal »

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


Post Reply