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

  1. #1

    [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.

      <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>
    <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.
    Last edited by fabricio.murta; Dec 01, 2017 at 5:57 PM. Reason: no feedback from the user in 7+ days
  2. #2
    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!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    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.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: May 15, 2012, 7:48 AM
  2. [CLOSED] Create a new record for store by JavaScript?
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 01, 2011, 2:42 PM
  3. Replies: 12
    Last Post: Sep 20, 2011, 2:33 PM
  4. [CLOSED] Create dynamic columns grid and store.
    By stoque in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 10, 2011, 8:53 PM
  5. [CLOSED] ComboBox - How do I expand a ComboBox in Javascript?
    By wagger in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Apr 04, 2011, 2:47 PM

Posting Permissions