[CLOSED] Create Dynamic Store in Javascript on Expand of ComboBox

Hi,

I have a page where it fill up with more than 5 combo boxes and each have its own master data,

Inorder to improve the performance of the page first time loading, would like to load the store dynamically on expand of the ComboBox in javascript by using its expand listenr, so we no need to create static store and bind to combobox.

here is my sample code that how to achive binding data dynamically to store on expand only.

Code:

---

  <form id="form1" runat="server">
        <ext:ResourceManager ID="GeneralDashboardResourceManager" runat="server"></ext:ResourceManager>
        <div>
         
            <ext:Viewport runat="server" Margins="0 0 10 0">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
                </LayoutConfig>
                <Items>
                    <ext:TabPanel
                        runat="server"
                        Width="400"
                        Height="295"
                        Margins="0 0 20 0" DeferredRender="false">
                        <Defaults>
                            <ext:Parameter Name="bodyPadding" Value="10" Mode="Raw" />
                            <ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
                        </Defaults>
                        <Items>
                            <ext:Panel
                                runat="server"
                                Title="Active Tab"
                                AutoDataBind="true" Html="testing data for rendering controls">
                                <Items>
                                    <ext:ComboBox
                                        ID="SelectBox1"
                                        runat="server"
                                        EmptyText="Select a state...">
                                        <Listeners>
                                            <Expand Single="true" Handler="loadControl()"></Expand>
                                        </Listeners>
                                    </ext:ComboBox>
                                </Items>
                            </ext:Panel>


                        </Items>
                 
                    </ext:TabPanel>
                </Items>
            </ext:Viewport>


        </div>
    </form>

---

Code:

---

<script type="javascript">
      function loadControl() {
// this might come from one of the Direct Method
 var statesData= [
                  { label: 'Great', value: 5 },
                  { label: 'Above Average', value: 4 },
                  { label: 'Average', value: 3 },
                  { label: 'Below Average', value: 2 },
                  { label: 'Poor', value: 1 },
            ];
 var storeVal = Ext.create('Ext.data.Store', {
            fields: [{ name: 'label' }, { name: 'value', type: 'int' }],
            data: statesData
          });
App.SelectBox1.store=storeVal ;
}
</script>

---

Please advise me How to get this scenario achived. this would be much helpfull in rendering Store time from Server to Client for the unnesecary stores on load,
User may not select all the control values and click on search.

Hello @iansriley!

You want to use a remote loading store. Here's one approach -- except this one updates the store for another combo when the value changes: Linked Combo Boxes.

Another approach would be similar to the store here: Load GridPanel with DirectEvent. Exception here is, you will be calling the load() only during the first expand event instead of button click event.

So what differs from the example you provided basically is:
- you define the (empty) remote stores on markup, with autoload=false
- the expand listeners set to call the store's load() method -- this may be unnecessary and the combo box automatically load data on first expand if not loaded
- you may want to apply a mask to the dropdown to signal it is loading if it does not by default

These are at least the more usual directions for an on-demand loading combo box.

I hope this helps!

Hello @iansriley!

It's been a while since we replied you here and still no feedback from you. Do you still need help with that issue? I am hoping the instructions above were able to guide you thru your specific needs but maybe it went off.

We may mark this thread as closed if you still don't post a follow-up in the next 7+ days from now, but you'll still be able to post here whenever you are able to.