The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

Create Dynamic Store in Javascript on Expand of ComboBox

  1. #1

    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 iansriley; Sep 12, 2017 at 2:24 PM. Reason: HTMl tags not aligned
  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

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 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 Premium Help
    Replies: 3
    Last Post: Jun 10, 2011, 8:53 PM
  5. Replies: 11
    Last Post: Apr 04, 2011, 2:47 PM

Posting Permissions