[CLOSED] RowExpander with more then one formpanel

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] RowExpander with more then one formpanel

    I have create a girdpanel as following example

    https://examples2.ext.net/#/GridPane...red_Component/

    Now, I want to show different formpanel to user base on the record expand.

    I have two ideas.
    First one is to create two formpanel in the component tag of rowexpander, and set the visibility where render.
    Second is create one formpanel, but add control base on the record in codebehind.

    I have try the first one, but seems it cannot add more than one formpanel in component tag.
    So which method I should use? Any example I can follow?
    And how to get the rowrecord in codebehind?

    Thank you.
    Last edited by Daniil; Oct 03, 2013 at 12:20 PM. Reason: [CLOSED]
  2. #2
    And I also need show two formpanel in same time. Is it possible?
  3. #3
    Hi @trePjt,

    If there is limited amount of different FormPanels which you can predefine, then you could put those FormPanels into a container with CardLayout and choose a respective card into a RowExpander's Expand event.

    If there is no way to predefine all FormPanel and it should be customized on the fly, then please investigate this example:
    https://examples2.ext.net/#/GridPane...ic_GridPanels/

    It renders inner GridPanels, but it is possible to render any other component inlcuding FormPanels.
  4. #4
    I have try to put two formpanel in a panel

                                                 <ext:RowExpander ID="repPrd" runat="server" SingleExpand="false">
                                                    <Component>
                                                        <ext:Panel runat="server">
                                                        <Items>
                                                            <ext:FormPanel ID="FormPanel1" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
                                                                <Items>
                                                                    <ext:TextField ID="txtLblLabel" Name="TMDITMNO" runat="server" ColumnWidth="0.25"/>
                                                                </Items>
                                                                <Listeners>
                                                                    <AfterRender Handler="this.getForm().loadRecord(this.record);" />     
                                                                </Listeners>
                                                            </ext:FormPanel>
                                                            <ext:FormPanel ID="FormPanel2" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
                                                                <Items>
                                                                    <ext:TextField ID="TextField1" Name="TMDTICKET" runat="server" ColumnWidth="0.25"/>
                                                                </Items>
                                                                <Listeners>
                                                                    <AfterRender Handler="this.getForm().loadRecord(this.record);" />    
                                                                </Listeners>
                                                            </ext:FormPanel>                                                        
                                                        </Items>
                                                        </ext:Panel>
                                                    </Component>
                                                 </ext:RowExpander>
    then is return error when the row expanding

    loadRecord:function(a){this._record=a;return this.setValues(a.getData())}
     'undefined' is null or not an object
    It seems "this.record" not work when I put the formpanel in a panel.

    Then I try do it in directmethod.
                                                 <ext:RowExpander ID="repPrd" runat="server" SingleExpand="false">
                                                    <Component>
                                                        <ext:Panel runat="server">
                                                        <Items>
                                                            <ext:FormPanel ID="FormPanel1" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
                                                                <Items>
                                                                    <ext:TextField ID="txtLblLabel" Name="TMDITMNO" runat="server" ColumnWidth="0.25"/>
                                                                </Items>
                                                            </ext:FormPanel>
                                                            <ext:FormPanel ID="FormPanel2" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
                                                                <Items>
                                                                    <ext:TextField ID="TextField1" Name="TMDTICKET" runat="server" ColumnWidth="0.25"/>
                                                                </Items>
                                                            </ext:FormPanel>                                                        
                                                        </Items>
                                                        </ext:Panel>
                                                    </Component>
                                                    <DirectEvents>
                                                        <Expand OnEvent="rowExp"></Expand>
                                                    </DirectEvents>
                                                 </ext:RowExpander>
    Codebehind

            protected void rowExp(object sender, DirectEventArgs e)
            {
                RowSelectionModel sm = (RowSelectionModel)tblPrd.GetSelectionModel();
                Store store = tblPrd.GetStore();
    
                repPrd.CollapseRow(2);
                //FormPanel fp =  (FormPanel)repPrd.Component.First();
                FormPanel fp = (FormPanel)Ext.Net.X.GetCmp("FormPanel1");
                fp.LoadRecord(store.GetAt(sm.SelectedIndex));
                //FormPanel1.LoadRecord(store.GetAt(sm.SelectedIndex));
            }
    But this time it show me

    'App.FormPanel1' is null or not an object
    I have try some alternative method to get the formpanel, but the result is same.

    Any solution??
    Last edited by trePjt; Sep 30, 2013 at 6:03 AM.
  5. #5
    Above problem I solved by setting SingleExpand="true"

    Now I recode my program

    Previously the formpanel loadrecord by listener

                                                            <ext:FormPanel ID="FormPanel1" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
                                                                <Items>
                                                                    <ext:TextField ID="txtLblLabel" Name="TMDITMNO" runat="server" ColumnWidth="0.25"/>
                                                                </Items>
                                                                <Listeners>
                                                                    <AfterRender Handler="this.getForm().loadRecord(this.record);" />     
                                                                </Listeners>
                                                            </ext:FormPanel>
    But I want to do it at Directmethod, as I want to do some more process when when the row expand.
    I change it to
                                                            <ext:FormPanel ID="FormPanel1" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
                                                                <Items>
                                                                    <ext:TextField ID="txtLblLabel" Name="TMDITMNO" runat="server" ColumnWidth="0.25"/>
                                                                </Items>
                                                                <DirectEvents>
                                                                    <AfterRender OnEvent="rowExp"></AfterRender>
                                                                </DirectEvents>
                                                            </ext:FormPanel>
    The problem is as SingleExpand="true", AfterRender will only fire on first time.

    So I add this directevent to rowexpander
                                                    <DirectEvents>
                                                        <Expand OnEvent="rowExp"></Expand>
                                                    </DirectEvents>
    and the DirectEvents in codebehind like this

            protected void hihi(object sender, DirectEventArgs e)
            {
                RowSelectionModel sm = (RowSelectionModel)tblPrd.GetSelectionModel();
                Store store = tblPrd.GetStore();
                FormPanel1.LoadRecord(store.GetAt(sm.SelectedIndex));
            }
    however it still have problem. If I double click the row, it works fine.
    If I expand the row by clicking the "+" sign on the left hand side of the record, the sm.SelectedIndex return the last row number instead of new one.
    How can I solve this?
  6. #6
    A FormPanel doesn't have the "record" property, so using this.record in its AfterRender is not an option.

    As for SelectedIndex. Well, an expanded row doesn't mean it is selected. I would not use it in a common case.

    Please investigate this example.

    Example

    <%@ 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)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var onExpand = function (rowExpander, record, body, row, rowIndex) {
                var cards = rowExpander.component.layout;
    
                if (rowIndex === 1) {
                    cards.setActiveItem(1);
                } else {
                    cards.setActiveItem(0);
                }
    
                cards.getActiveItem().loadRecord(record);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" Height="300">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                    <ext:ModelField Name="test3" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                        <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:RowExpander runat="server">
                        <Component>
                            <ext:Container runat="server" Layout="CardLayout">
                                <Items>
                                    <ext:FormPanel runat="server" Title="FormPanel1">
                                        <Items>
                                            <ext:TextField runat="server" Name="test1" />
                                            <ext:TextField runat="server" Name="test2" />
                                        </Items>
                                    </ext:FormPanel>
                                    <ext:FormPanel runat="server" Title="FormPanel2">
                                        <Items>
                                            <ext:TextField runat="server" Name="test3" />
                                        </Items>
                                    </ext:FormPanel>
                                </Items>
                            </ext:Container>
                        </Component>
                        <Listeners>
                            <Expand Fn="onExpand" />
                        </Listeners>
                    </ext:RowExpander>
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  7. #7
    Thanks for your help Daniil.

    Can the above example change to direct event?
    As I want to control the visibility of different formpanel there.
    Last edited by trePjt; Oct 02, 2013 at 1:29 AM.
  8. #8
    I tried the above example, it returns "cards.setActiveItem" is undefined
  9. #9
    Quote Originally Posted by trePjt View Post
    I tried the above example, it returns "cards.setActiveItem" is undefined
    Sorry, just ignore this. I forgot to change to cardlayout
  10. #10
    I have solved the problem now.
    I will show my code after finishing the modification.
    Thanks for help.
Page 1 of 2 12 LastLast

Similar Threads

  1. [OPEN] [#236] [2.2] Bug on RowExpander
    By Periscope in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 09, 2013, 5:18 AM
  2. GridPanel RowExpander
    By idelacruz in forum 2.x Help
    Replies: 3
    Last Post: Mar 03, 2013, 5:29 PM
  3. [CLOSED] Combine RowExpander with TransformGrid
    By CarWise in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 11, 2012, 12:14 PM
  4. Replies: 0
    Last Post: Nov 17, 2011, 10:53 AM
  5. RowExpander
    By mmiocev in forum 1.x Help
    Replies: 0
    Last Post: Apr 06, 2009, 12:56 PM

Tags for this Thread

Posting Permissions