[CLOSED] Component inside RowExpander no longer has Id in App namespace

  1. #1

    [CLOSED] Component inside RowExpander no longer has Id in App namespace

    Hi,

    Getting latest code of 2.1 I am now finding that if I have a component inside a row expander I no longer have access to that component's Id.

    For example, I was able to do this just before the row expander code was updated:

    <%@ Page Language="C#" %>
    
    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store1.DataSource = new object[]
            {
                new object[] { "3m Co", "3M" },
                new object[] { "Alcoa Inc", "ALOA" },
                new object[] { "Altria Group Inc", "ALT" },
                new object[] { "American Express Company", "AMX" }
            };
            Store1.DataBind();
        }
    }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Simple Grid - Ext.NET Examples</title>
    
        <style type="text/css">
            body { padding:10px; }
    
            .positive { color: green; }
            .negative { color: red; }
    
            .company-details { margin:3px; padding:3px; border:1px solid #ccc; background:#fff; }
            .perf { float: right; width: 170px; padding:5px; }
        </style>
    
        <script type="text/javascript">
            var onExpand = function(symbol, nestedGrid) {
                // nested grid seems to be empty - App.NestedGrid is not defined
                console.log(symbol, nestedGrid);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel ID="GridPanel1" runat="server" Title="Simple Grid" Height="310" Width="500">
            <Store>
                <ext:Store ID="Store1" runat="server" PageSize="10">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Company" />
                                <ext:ModelField Name="Symbol" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column Text="Company" DataIndex="Company" Flex="1" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowExpander runat="server" SingleExpand="false">
                    <Listeners>
                        <Expand Handler="onExpand(record.data.Symbol, #{NestedGrid});" />
                    </Listeners>
                    <Component>
                        <ext:GridPanel Id="NestedGrid" runat="server" Title="Monthly Average" Height="150" Padding="10">
                            <Store>
                                <ext:Store>
                                    <Model>
                                        <ext:Model>
                                            <Fields>
                                                <ext:ModelField Name="Price" Type="Float" />
                                                <ext:ModelField Name="PercentChange" Type="Float" />
                                                <ext:ModelField Name="Date" Type="Date" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:DateColumn Text="Last Updated" DataIndex="Date" Format="MM-yyyy" />
                                    <ext:Column Text="Price" DataIndex="Price" Width="50" />
                                    <ext:Column Text="Change" DataIndex="PercentChange" Width="50" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Component>
                </ext:RowExpander>
            </Plugins>
            <BottomBar>
                <ext:PagingToolbar runat="server" />
            </BottomBar>
        </ext:GridPanel>
    </body>
    </html>
    Notice the bit of JavaScript to handle onExpand:

            var onExpand = function(symbol, nestedGrid) {
                // nested grid seems to be empty - App.NestedGrid is not defined
                console.log(symbol, nestedGrid);
            };
    nestedGrid is null. When I look at the View Source, the Ext.NET initialization script has this bit:

    
    {expand:{fn:function(item,record,body,row,rowIndex){onExpand(record.data.Symbol, App.NestedGrid);}}
    When I type App.NestedGrid into Firebug or a console, it is not defined.

    Does this approach no longer work with the changes to RowExpander, or is it just something that accidentally slipped through? The code I have is cut down but the original was quite nice - in the onExpand handler I was calling a DirectMethod or web service in the past to get some raw data which I could then load the store with.

    Thanks!
    Last edited by Daniil; Oct 18, 2012 at 4:17 AM. Reason: [CLOSED]
  2. #2
    Yesterday, we committed RowExpander changes
    Now, if Component is used and SingleExpand=false then Component will be cloned for each row (you will be able to expand several rows at one time)
    Therefore, if SingleExpand=false then component ID will be ignore (because several such components can be created)

    You can set SingleExpand=true if you need to use component ID

    Also, RowExpander supports Loader now. All row expander samples were changed to demonstrate changes
    Last edited by geoffrey.mcgill; Oct 15, 2012 at 9:26 PM.
  3. #3
    Thanks Vladimir.

    Setting SingleExpand="true" certainly helps. However, I then get this JavaScript error:

    TypeError: this.componentsCache is undefined
    In this code:

    updateComponentsWidth : function () {
      var i, 
           grid = this.getCmp(), 
           body, 
           len = this.componentsCache.length, 
           item;
    Also, the inner grid that does open up is now half hidden behind the scrollbar. To simulate the problem you can change the above JavaScript onExpand function in my original example with this:

    var onExpand = function(symbol, nestedGrid) {
        var historyData = [
            { "Date": "2012-06-01T00:00:00", "Price": 56.5, "PercentChange": 1.0 },
            { "Date": "2012-05-01T00:00:00", "Price": 56.01, "PercentChange": 1.5 },
            { "Date": "2012-04-01T00:00:00", "Price": 53.2, "PercentChange": 0.2 },
            { "Date": "2012-03-01T00:00:00", "Price": 54.0, "PercentChange": -0.15 },
            { "Date": "2012-02-01T00:00:00", "Price": 55.01, "PercentChange": -0.1 },
            { "Date": "2012-01-01T00:00:00", "Price": 56.0, "PercentChange": 0.0}
        ];
    
        nestedGrid.getStore().loadData(historyData);
    }
    Notice the inner grid's scrollbars are partially covered by the outer grid's own scrollbars - in the past the inner grid would fit nicely inside (I happen to use a padding of 10px so it would fit even more nicely inside the outer grid).

    I tried to wrap the inner grid with a Container to try and put padding there instead (or to leave the padding on the nested GridPanel) but it made no difference. I suspect the width of the inner component is now ignoring any scrollbars of the outer component, whereas before it wasn't.

    Hope that helps reproduce the problem?
  4. #4
    Thanks for the report. Fixed in SVN

    Also, the inner grid that does open up is now half hidden behind the scrollbar.
    I guess it was after the exception is raised. After fixing the issue I cannot reproduce it
  5. #5
    Great stuff Vladimir - many thanks for such a swift response. Retested and looks fixed to me. You can mark this as Closed.

Similar Threads

  1. Replies: 2
    Last Post: Apr 21, 2012, 10:15 AM
  2. [CLOSED] Component focus problem in the rowExpander
    By albayrak in forum 1.x Legacy Premium Help
    Replies: 19
    Last Post: Jan 18, 2012, 7:42 AM
  3. [CLOSED] [1.0] RowExpander Component
    By state in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 07, 2010, 9:01 AM
  4. [CLOSED] RowExpander Component with ChecboxSelectionModel
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 20
    Last Post: Mar 25, 2010, 1:38 PM
  5. [CLOSED] Rowexpander Component Items update from Code-Behind
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 20, 2010, 3:09 AM

Posting Permissions