[CLOSED] AutoLoad GridPanel strore inside a DropDownField

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] AutoLoad GridPanel strore inside a DropDownField

    Hi,

    We have a GridPanel inside a DropDownField. When DropDownField is expanded, GridPanel store is loaded. But we would like to get this data loaded immediatelly.

    How can this store be loaded at Page load?

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <ext:resourcemanager runat="server" />
        <ext:DropDownField ID="cmbTest" runat="server" Width="160" FieldLabel="Sample"
                LabelAlign="Top" MatchFieldWidth="false" TriggerIcon="Combo">
            <Component>
                <ext:GridPanel ID="gridTest" runat="server" Width="360" Height="315" Title="Grid" Icon="Calculator"> 
                    <View>
                        <ext:GridView runat="server" StripeRows="true" TrackOver="true" LoadMask="true" LoadingUseMsg="false" />
                    </View>
                    <Store>
                        <ext:Store ID="dsTest" runat="server" RemoteSort="true" ShowWarningOnFailure="false" AutoLoad="true">
                            <Proxy>
                                <ext:AjaxProxy Url='<%# this.Page.GetRouteUrl("Test", new { controller="Data", action="List" }) %>'
                                    AutoDataBind="true">
                                    <Reader>
                                        <ext:JsonReader IDProperty="Id" Root="data" TotalProperty="total" />
                                    </Reader>
                                </ext:AjaxProxy>
                            </Proxy>
                            <Model>
                                <ext:Model runat="server" IDProperty="Id">
                                    <Fields>
                                        <ext:ModelField Name="Name" Type="String" SortDir="ASC" />
                                        <ext:ModelField Name="Description" Type="String" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Sorters>
                                <ext:DataSorter Property="Name" Direction="ASC" />
                            </Sorters>
                            <Listeners>
                                <Load Handler="alert('Hello');" />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" DataIndex="Id" Text="Id" Hidden="true" Hideable="false" />
                            <ext:Column runat="server" DataIndex="Name" Text="Name" Width="100">
                                <Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
                            </ext:Column>
                            <ext:Column runat="server" DataIndex="Description" Text="Description" Width="200" Flex="1">
                                <Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
                            </ext:Column>
                        </Columns>
                    </ColumnModel>  
                    <SelectionModel>
                        <ext:CheckboxSelectionModel runat="server" Mode="Multi" />
                    </SelectionModel>
                    <BottomBar>
                        <ext:Toolbar runat="server" ClassicButtonStyle="true">
                            <Items>
                                <ext:ToolbarFill runat="server" />
                                <ext:Button runat="server" Text="Accept" Icon="Accept" />
                                <ext:Button runat="server" Text="Cancel" Icon="Cancel" />   
                            </Items>
                        </ext:Toolbar>
                    </BottomBar>
                </ext:GridPanel>                              
            </Component>
        </ext:DropDownField>
    </body>
    </html>
    Thanks.
    Last edited by Daniil; Jul 24, 2012 at 1:00 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please set up
    <Listeners>
        <AfterRender Handler="this.getPicker();" />
    </Listeners>
    for the DropDownField.

    It will force a picker component to be created if not yet.
    http://docs.sencha.com/ext-js/4-1/#!...thod-getPicker
  3. #3
    Thanks.

    It works, but if I try to select rows on Load's store event, something like:

    gridTest.getSelectionModel().select(records, false);
    I get an script error on toggleUiHeader method at Ext.selection.CheckboxModel:

    Can't get value of 'removeCls' property: object is null or not defined
  4. #4
    I guess it throws due to the fact that GridPanel is not rendered yet.

    I think you should check a view on "rendered" status, if yes - just select, if not - add a VewReady listener to select these records.
  5. #5
    Well, I need to select data just when store is loaded. I check Grid's "rendered" state at Load event, and it is "true".

    If I try to add some listeners at View, the view ViewReady listener is never throw if DropDownField is not expanded:

    <View>
        <ext:GridView runat="server" StripeRows="true" TrackOver="true" LoadMask="true" LoadingUseMsg="false">
            <Listeners>
                <ViewReady Handler="alert('ViewReady');" />
            </Listeners>
        </ext:GridView>
    </View>
  6. #6
    Could you please provide a sample to reproduce?
  7. #7
    Hi,

    Here is a little sample. It doesn't show the error mentioned before, but it doesn't select any record in the Grid.

    As we are using an MVC application, I suposse the store should use an AjaxProxy in order to load data dynamically introducing a delay and reproduce in this way the explained error.

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var data = this.GetData();
                var store1 = this.GridPanel1.GetStore();
     
                store1.DataSource = data;
                store1.DataBind();
            }
        }
    
        public object[] GetData()
        {
            return new object[] {
                new object[] { 1, "3m Co", 71.72, 0.02, 0.03, "01/01/2008" },
                new object[] { 2, "Alcoa Inc", 29.01, 0.42, 1.47, "02/01/2008" },
                new object[] { 3, "Altria Group Inc", 83.81, 0.28, 0.34, "03/01/2008" },
                new object[] { 4, "American Express Company", 52.55, 0.01, 0.02, "10/01/2008" },
                new object[] { 5, "American International Group, Inc.", 64.13, 0.31, 0.49, "09/01/2008" },
                new object[] { 6, "AT&T Inc.", 31.61, -0.48, -1.54, "01/03/2008" },
                new object[] { 7, "Boeing Co.", 75.43, 0.53, 0.71, "01/04/2008" },
                new object[] { 8, "Caterpillar Inc.", 67.27, 0.92, 1.39, "01/01/2008" },
                new object[] { 9, "Citigroup, Inc.", 49.37, 0.02, 0.04, "02/02/2008" },
                new object[] { 10, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "03/05/2008" },
                new object[] { 11, "Exxon Mobil Corp", 68.1, -0.43, -0.64, "01/01/2008" },
                new object[] { 12, "General Electric Company", 34.14, -0.08, -0.23, "01/01/2008" },
                new object[] { 13, "General Motors Corporation", 30.27, 1.09, 3.74, "01/01/2008" },
                new object[] { 14, "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "01/01/2008" },
                new object[] { 15, "Honeywell Intl Inc", 38.77, 0.05, 0.13, "01/01/2008" },
                new object[] { 16, "Intel Corporation", 19.88, 0.31, 1.58, "01/01/2008" },
                new object[] { 17, "International Business Machines", 81.41, 0.44, 0.54, "01/01/2008" },
                new object[] { 18, "Johnson & Johnson", 64.72, 0.06, 0.09, "01/01/2008" },
                new object[] { 19, "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "01/01/2008" },
                new object[] { 20, "McDonald\"s Corporation", 36.76, 0.86, 2.40, "01/01/2008" },
                new object[] { 21, "Merck & Co., Inc.", 40.96, 0.41, 1.01, "01/01/2008" },
                new object[] { 22, "Microsoft Corporation", 25.84, 0.14, 0.54, "01/01/2008" },
                new object[] { 23, "Pfizer Inc", 27.96, 0.4, 1.45, "01/01/2008" },
                new object[] { 24, "The Coca-Cola Company", 45.07, 0.26, 0.58, "01/01/2008" },
                new object[] { 25, "The Home Depot, Inc.", 34.64, 0.35, 1.02, "01/01/2008" },
                new object[] { 26, "The Procter & Gamble Company", 61.91, 0.01, 0.02, "01/01/2008" },
                new object[] { 27, "United Technologies Corporation", 63.26, 0.55, 0.88, "01/01/2008" },
                new object[] { 28, "Verizon Communications", 35.57, 0.39, 1.11, "01/01/2008" },
                new object[] { 29, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "01/01/2008" }
            };
        }
    </script>
     
    <!DOCTYPE html>
         
    <html>
    <head runat="server">
        <title>GridPanel with MultiHeader Row Filters - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />    
     
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
            var selectGridRows = function () {
                var array = [3, 5, 7];
                var records = [];
    
                for (var i = 0; i < array.length; i++) {
                    var id = parseInt(array[i]);
                    var record = GridPanel1.getById(id);
                    if (record) {
                        records.push(record);
                    }
                }
                GridPanel1.getSelectionModel().select(records, false);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />               
        <ext:DropDownField ID="cmbListaTerminales" runat="server" Width="160" FieldLabel="Test"
                LabelAlign="Top" MatchFieldWidth="false" TriggerIcon="Combo">
            <Listeners>     
                <AfterRender Handler="this.getPicker();" /> 
            </Listeners>
            <Component>
                <ext:GridPanel
                    ID="GridPanel1"
                    runat="server"
                    Title="Array Grid"
                    Width="600"
                    Height="350">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model runat="server" IDProperty="Id">
                                    <Fields>
                                        <ext:ModelField Name="Id" />
                                        <ext:ModelField Name="company" />
                                        <ext:ModelField Name="price" Type="Float" />
                                        <ext:ModelField Name="change" Type="Float" />
                                        <ext:ModelField Name="pctChange" Type="Float" />
                                        <ext:ModelField Name="lastChange" Type="Date" DateFormat="MM/dd/yyyy" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Listeners>
                                <Load Fn="selectGridRows" />
                            </Listeners>
                        </ext:Store>                   
                    </Store>
                    <View>
                        <ext:GridView runat="server" StripeRows="true" TrackOver="true" LoadMask="true" LoadingUseMsg="false" />
                    </View>
                    <SelectionModel>
                        <ext:CheckboxSelectionModel runat="server" Mode="Multi" />
                    </SelectionModel>
                    <ColumnModel runat="server">
                        <Columns>     
                            <ext:Column runat="server" DataIndex="Id" Text="Id" Hidden="true" Hideable="false" />              
                            <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                            <ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Changes">
                                <Columns>
                                    <ext:Column runat="server" Text="Change" Width="75" DataIndex="change" HideTitleEl="true">
                                        <Renderer Fn="change" />
                                    </ext:Column>
                                    <ext:Column runat="server" Text="Change %" Width="75" DataIndex="pctChange" HideTitleEl="true">
                                        <Renderer Fn="pctChange" />
                                    </ext:Column> 
                                </Columns>
                            </ext:Column>                                  
                            <ext:DateColumn runat="server" Text="Last Updated" Width="95" DataIndex="lastChange" />
                        </Columns>
                    </ColumnModel>            
                </ext:GridPanel>  
            </Component>
        </ext:DropDownField>
    </body>
    </html>
  8. #8
    The GridPanel has no getById method.

    Also I was wrong suggested to use "rendered", please use the "viewReady" flag.

    Example
    var selectGridRows = function () {
        var grid = App.GridPanel1,
            store = grid.getStore(),
            sm = grid.getSelectionModel(),
            ids = [3, 5, 7],
            record,
            records = [];
     
        Ext.each(ids, function (id) {
            record = store.getById(id);
            if (record) {
                records.push(record);
            }
        });
    
        if (grid.getView().viewReady) {
            sm.select(records, false);
        } else {
            grid.on("viewready", function () {
                sm.select(records, false)
            });
        }
    };
  9. #9
    Quote Originally Posted by Daniil View Post
    The GridPanel has no getById method.
    Yes, sorry. It was a Copy&Paste mistake.

    Quote Originally Posted by Daniil View Post
    Also I was wrong suggested to use "rendered", please use the "viewReady" flag.
    Ok, it works now with your sample code.

    Thanks.
  10. #10
    Hi again,

    Sorry, but it only works when I expand DropDownField. If selectGridRows methos is called, but DropDownField is not expanded, no value is returned when I try to get selected Id field:

    var selection = grid.getSelectionModel().getSelection();
    
    if (selection.length > 0) {
          return selection[0].data.Id;
    }
    return null;
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] ComboBox inside DropDownField causes it to collapse on item selection
    By Leonid_Veriga in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 13, 2014, 12:43 PM
  2. [CLOSED] DropdownField with Datefiled and Timefield inside
    By bakardi in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 15, 2011, 6:20 PM
  3. Replies: 1
    Last Post: Jun 23, 2011, 1:20 PM
  4. Replies: 3
    Last Post: Jun 15, 2011, 7:02 AM
  5. [CLOSED] Issue with a Grid render inside a ext:DropDownField
    By asztern in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 20, 2011, 9:34 PM

Posting Permissions