row expander script error

  1. #1

    row expander script error

    <ext:Panel ID="extpnlMain" runat="server" AutoScroll="true" AutoHeight="false" AutoWidth="false" Border="false" Height="598"  >
                <Body>
                   ......
                    <ext:GridPanel
                        ID="extgp" BodyBorder="false" AutoScroll="false" Border="false" Collapsible="false" Header="false" EnableColumnHide="false" HideHeaders="false"   
                        runat="server" 
                        AutoHeight="true"
                        Frame="false" 
                        StoreID="extstore" EnableDragDrop="true"  >
                        <Plugins>
                            <ext:RowExpander runat="server" ColumnPosition="1"  >
                                <Template ID="Template1" runat="server">
                                    <p>Description: {description}</p>
                                </Template>
                             </ext:RowExpander>
                        </Plugins>
                     ......
    
                    </ext:GridPanel>
               ......
            </Body>
    </ext:Panel>


    i got this grid panel that's inside a panel together with some other coolite controls, as stated here i set the Panel's AutoHeight to false and its Height to a certain value... but when i remove the Height property of the Panel or i replace the AutoHeight property value to true, i get a javascript error whenever i am expanding or collapsing a grid panel row... the row is expanding/collapsing but the error is there. it says.. Ext.fly(...) is null or is not an object. when i write it as shown here (AutoHeight = false and there is a height value) there is no script error

    i have removed other lines of code here, i only posted the code of the panel, the grid panel and the row expander to show its set properties.

    please check, thanks
  2. #2

    RE: row expander script error

    please help with this one, its still occuring in IE...
  3. #3

    RE: row expander script error

    Hi,

    I can't reproduce any error. In any way, the solution when you have auto height panel and inside one auto height is not good.

    Here is my test case:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
                {
                    new object[] {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am", "Manufacturing"},
                    new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am", "Manufacturing"},
                    new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am", "Manufacturing"},
                    new object[] {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am", "Finance"},
                    new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am", "Services"},
                    new object[] {"AT&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am", "Services"},
                    new object[] {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am", "Manufacturing"},
                    new object[] {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am", "Services"},
                    new object[] {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am", "Finance"},
                    new object[] {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am", "Manufacturing"},
                    new object[] {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am", "Manufacturing"},
                    new object[] {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am", "Manufacturing"},
                    new object[] {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am", "Automotive"},
                    new object[] {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am", "Computer"},
                    new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am", "Manufacturing"},
                    new object[] {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am", "Computer"},
                    new object[] {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am", "Computer"},
                    new object[] {"Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am", "Medical"},
                    new object[] {"JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am", "Finance"},
                    new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am", "Food"},
                    new object[] {"Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am", "Medical"},
                    new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am", "Computer"},
                    new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am", "Medical"},
                    new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am", "Food"},
                    new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am", "Retail"},
                    new object[] {"The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am", "Manufacturing"},
                    new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am", "Computer"},
                    new object[] {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am", "Services"},
                    new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am", "Retail"}
                };
    
            this.Store1.DataBind();
    
            const string desc = "this.desc = \"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, " +
                                "vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, " +
                                "iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, " +
                                "sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, " +
                                "pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. " +
                                "Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, " +
                                "nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. " +
                                "Vivamus tincidunt diam nec urna. Curabitur velit.\";";
    
            string dataID = string.Concat(this.Store1.ClientID, "_Data");
            string push = string.Format(@"for(var i = 0; i < {0}.length; i++){{{0}[i].push(desc);}}", dataID);
    
            this.ScriptManager1.RegisterClientScriptBlock("desc_data", desc);
            this.ScriptManager1.RegisterOnReadyScript(push);
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Coolite Example - Grid3 Example</title>
        <ext:ScriptContainer ID="ScriptContainer1" runat="server" />
    
        <script type="text/javascript">
            var template = '{1}';
    
            var change = function(value) {
                return String.format(template, (value > 0) ? 'green' : 'red', value);
            }
    
            var pctChange = function(value) {
                return String.format(template, (value > 0) ? 'green' : 'red', value + '%');
            }
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <h1>Row Expander Plugin</h1>
            
            <ext:Store ID="Store1" runat="server" IgnoreExtraFields="false">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Float" />
                            <ext:RecordField Name="change" Type="Float" />
                            <ext:RecordField Name="pctChange" Type="Float" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
                            <ext:RecordField Name="industry" />
                            <ext:RecordField Name="desc" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            <ext:Panel ID="extpnlMain" runat="server" AutoScroll="true" AutoHeight="true" AutoWidth="false" Border="false"  >
                <Body>
                
            
            <ext:GridPanel ID="GridPanel1" runat="server" 
                StoreID="Store1" 
                AutoHeight="true"
                Frame="false" 
                EnableDragDrop="true"
                BodyBorder="false" AutoScroll="false" Border="false" Collapsible="false" Header="false" EnableColumnHide="false" HideHeaders="false"   >
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column Header="Company" Width="40" Sortable="true" DataIndex="company" />
                        <ext:Column Header="Price" Width="20" Sortable="true" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="20" Sortable="true" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="20" Sortable="true" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:Column Header="Last Updated" Width="20" Sortable="true" DataIndex="lastChange">
                            <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server" ForceFit="true" />
                </View>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                </SelectionModel>
                <Plugins>
                    <ext:RowExpander ID="RowExpander1" runat="server" Collapsed="true">                   
                        <Template ID="Template1" runat="server">
                            <p>Company: {company}</p><br/>
                            <p>Summary: {desc}</p>
                        </Template>
                    </ext:RowExpander>
                </Plugins>
            </ext:GridPanel>
                </Body>
            </ext:Panel>
            
        </form>
    </body>
    </html>

  4. #4

    RE: row expander script error

    ok, im sorry i think i forgot to mention i have included a row expander listener here

    
    <ext:RowExpander runat="server" ColumnPosition="1"  >
                                    <Template ID="Template1" runat="server">
                                        <p>Description: {questiondesc}</p>
                                    </Template>
                                    <Listeners>
                                        <BeforeExpand PreventDefault="true" StopEvent="true" Handler="function(expander, record, body, rowIndex) {
                                                if (expandedRow != -1)
                                                {
                                                    row = expander.grid.view.getRow(expandedRow);
                                                    record = expander.grid.store.getAt(row.rowIndex);
                                                    var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
                                                    if (expander.fireEvent('beforecollapse', expander, record, body, row.rowIndex) !== false) {
                                                        expander.state[record.id] = false;
                                                        Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
                                                        expander.fireEvent('collapse', expander, record, body, row.rowIndex); }
                                                }
                                                expandedRow = rowIndex; }
                                               " />
                                        <Expand PreventDefault="true" StopEvent="true" />
                                    </Listeners>
                                </ext:RowExpander>
    basically what i need is to allow only one expanded row at a time
  5. #5

    RE: row expander script error

    Hi,


    If you *set function in listener then use Fn instead Handler

  6. #6

    RE: row expander script error

    i changed the "Handler" to "Fn" and javascript error is still there
  7. #7

    RE: row expander script error

    Hi,

    Did you define expandedRow variable anywhere?

    Your example works fine if define this variable

    <script type="text/javascript">
        var expandedRow = -1;
    </script>
    Last edited by geoffrey.mcgill; Feb 21, 2011 at 9:26 PM.
  8. #8

    RE: row expander script error

    yes, the expandedRow declaration is included in my code
  9. #9

    RE: row expander script error

    Hi,

    Can you post full code which demonstrates the problem because I can't reproduce that bug?


  10. #10

    RE: row expander script error

    problem solved after i changed the layout of the page with the grid panel according to this post

    http://forums.ext.net/showthread.php?1876

    ... Thanks
    Last edited by geoffrey.mcgill; Feb 21, 2011 at 9:22 PM.

Similar Threads

  1. Replies: 17
    Last Post: Oct 12, 2011, 4:54 PM
  2. [CLOSED] Row Expander - Expanding a row using Java Script Dynamically?
    By vedagopal2004 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 31, 2011, 10:34 AM
  3. Replies: 4
    Last Post: Jan 25, 2011, 10:39 AM
  4. Replies: 2
    Last Post: Jul 29, 2009, 1:57 PM
  5. Script Error
    By jack_jj in forum 1.x Help
    Replies: 2
    Last Post: Dec 26, 2008, 8:53 AM

Posting Permissions