Performance problem when using ext:CommandColumn in ext:GridPanel

  1. #1

    Performance problem when using ext:CommandColumn in ext:GridPanel

    Hi all,

    I'm new here. I got a performance problem when using ext:CommandColumn in my ext:GridPanel. My GridPanel is quite simple that contains 4 data columns and 1 command column. The requirement requires to have a menu for each row in the grid, so I added a menu with 11 menu items. I randomly creates 1000 rows of data and bind to my grid. When loading the page that contains the GridPanel, the performance is very slow!
    I tried to remove the CommandColumn from the markup file, the loading is much faster.

    I don't know whether there is a control that can be used to replace the commandcolumn or not. But anyone please advise me on how to improve performance for this case? Thanks for any comments, suggestions!

    My code:

    <ext:GridPanel ID="test" Frame="false" Height="300px" Cls="x-grid-custom"
            StripeRows="true" Header="false" runat="server" AutoWidth="true">
            <Store>
                <ext:Store ID="storeTest" runat="server">
                    <Reader>
                        <ext:JsonReader IDProperty="CustomerID">
                            <Fields>                            
                                <ext:RecordField Name="JobTitle" Type="String"/>                                
                                <ext:RecordField Name="CompanyName" Type="String"/>                            
                                <ext:RecordField Name="Email1Address" Type="String"/>                            
                                <ext:RecordField Name="HomeTelephoneNumber" Type="String"/>                                                                                    
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="clContactsSyncList" runat="server">
                <Columns>                
                    <ext:Column Header="Job Title" DataIndex="JobTitle" Width="100"/>                
                    <ext:Column Header="Company" DataIndex="CompanyName" Width="100" />
                    <ext:Column Header="Email" DataIndex="Email1Address" Width="100" />                
                    <ext:Column Header="Phone Number" DataIndex="HomeTelephoneNumber" Width="100" />
                    <ext:CommandColumn Width="80">
                        <Commands>
                            <ext:GridCommand Icon="ArrowDown">
                                <Menu EnableScrolling="false" Shared="true">
                                    <Items>
                                        <ext:MenuCommand Text="Send an Email" CommandName="SendAnEmail" />
                                        <ext:MenuCommand Text="Send a Letter" CommandName="SendALetter" />
                                        <ext:MenuCommand Text="Send a Memo" CommandName="SendAMemo" />
                                        <ext:MenuCommand Text="Send an Itinerary" CommandName="SendAItinerary" />
                                        <ext:MenuCommand Text="Send a Fax" CommandName="SendAFax" />
                                        <ext:MenuCommand Text="Add to a List" CommandName="AddToAList" />
                                        <ext:MenuCommand Text="Add to My Contacts" CommandName="AddToMyContacts" />
                                        <ext:MenuCommand Text="Add to Outlook" CommandName="AddToOutlook" />
                                        <ext:MenuCommand Text="Deactivate Contact" CommandName="DeactiveContact" />
                                        <ext:MenuCommand Text="Add Contact to Company" CommandName="AddContactToCompany" />
                                        <ext:MenuCommand Text="Depart Roles for Contact" CommandName="DepartRoles" />
                                    </Items>
                                </Menu>
                                <ToolTip Text="Menu" />
                            </ext:GridCommand>
                        </Commands>
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel ID="checkSelectionContact" runat="server">
                </ext:CheckboxSelectionModel>
            </SelectionModel>
            
        </ext:GridPanel>
    dany4446.
    Last edited by geoffrey.mcgill; Jan 12, 2012 at 5:56 AM. Reason: please use [CODE] tags
  2. #2
    Hi dany4446,

    Welcome.

    Binding a 1000 records and creating menus for each will create A LOT of overhead and processing time, which is what you're experiencing.

    A couple options to try...

    1. Reduce the number of records being bound, and use server-side paging.

    2. Try <ext:BufferView> on the GridPanel, see

    https://examples1.ext.net/#/GridPane...ered_GridView/


    Hope this helps.
    Geoffrey McGill
    Founder
  3. #3
    Hi,

    In addition we recommend to use ImageCommandColumn instead of CommandColumn, because ImageCommandColumn is much more light-weight thing.
  4. #4

    Performance problem when using ext:CommandColumn in ext:GridPanel

    Thanks geoffrey.mcgill,
    1- My requirement does not allow paging.
    2- I could not apply <ext:BufferView> on the Locking GridPanel.

    dany4446.
  5. #5

    Performance problem when using ext:CommandColumn in ext:GridPanel

    Thanks Daniil for your recommended.

    Actually, I have used ImageCommandColumn and </ext:ImageCommand> instead of CommandColumn. My solution has good performance, but the GUI is quite bad for the ImageCommandColumn icon on each row. :).

    Each time user clicks on the image on row, I will show a pre-defined menu at runtime (just one instance) instead of rendering all menu items when loading.

    Anyway, thanks for all comments.
    dany4446.

    See my code bellow:

    <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                var menu ;
                function showMenu(record)
                {                     
                    Menu1.showAt([window.event.clientX,window.event.clientY]);                             
                }
            </script>
    </ext:XScript> 
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Outlook Client Synchronization Testing</title>
    
    </head>
    <body>
        <form id="form1" runat="server">    
        <ext:ResourceManager runat="server" />
        <ext:Menu ID="Menu1" runat="server">
            <Items>
                <ext:MenuItem Text="Send an Email" CommandName="SendAnEmail" />
                <ext:MenuItem Text="Send a Letter" CommandName="SendALetter" />
                <ext:MenuItem Text="Send a Memo" CommandName="SendAMemo" />
                <ext:MenuItem Text="Send an Itinerary" CommandName="SendAItinerary" />
                <ext:MenuItem Text="Send a Fax" CommandName="SendAFax" />
                <ext:MenuItem Text="Add to a List" CommandName="AddToAList" />
                <ext:MenuItem Text="Add to My Contacts" CommandName="AddToMyContacts" />
                <ext:MenuItem Text="Add to Outlook" CommandName="AddToOutlook" />
                <ext:MenuItem Text="Deactivate Contact" CommandName="DeactiveContact" />
                <ext:MenuItem Text="Add Contact to Company" CommandName="AddContactToCompany" />
                <ext:MenuItem Text="Depart Roles for Contact" CommandName="DepartRoles" />            
            </Items>
            <CustomConfig>
                <ext:ConfigItem Name="RowId" Value="" Mode="Value"></ext:ConfigItem>
            </CustomConfig>
        </ext:Menu>
        <ext:GridPanel ID="test" Frame="false" Height="300px" Cls="x-grid-custom"
            StripeRows="true" Header="false" runat="server" AutoWidth="true">
            <Store>
                <ext:Store ID="storeTest" runat="server">
                    <Reader>
                        <ext:JsonReader IDProperty="CustomerID">
                            <Fields>                            
                                <ext:RecordField Name="JobTitle" Type="String"/>                                
                                <ext:RecordField Name="CompanyName" Type="String"/>                            
                                <ext:RecordField Name="Email1Address" Type="String"/>                            
                                <ext:RecordField Name="HomeTelephoneNumber" Type="String"/>                                                                                    
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="clContactsSyncList" runat="server">
                <Columns>                
                    <ext:Column Header="Job Title" DataIndex="JobTitle" Width="100"/>                
                    <ext:Column Header="Company" DataIndex="CompanyName" Width="100" />
                    <ext:Column Header="Email" DataIndex="Email1Address" Width="100" />                
                    <ext:Column Header="Phone Number" DataIndex="HomeTelephoneNumber" Width="100" />                                 
                    <ext:ImageCommandColumn Width="50" Align="Center">
                            <Commands>                            
                                <ext:ImageCommand CommandName="showCommandColumnMenu" Icon="BulletArrowDown" Style="border-width:medium">
                                    <ToolTip Text="Menu" />                                
                                </ext:ImageCommand>
                            </Commands>
                      </ext:ImageCommandColumn>                                     
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel ID="checkSelectionContact" runat="server">
                </ext:CheckboxSelectionModel>
            </SelectionModel>
            <Listeners>
                <Command Handler="if(command=='showCommandColumnMenu'){showMenu(record);}" />
            </Listeners>
        </ext:GridPanel>
       
        </form>    
    </body>
    </html>
  6. #6
    Thanks for the update.

    The solution with ImageCommandColumn + menu looks good.

    Please clarify is the problem solved?

Similar Threads

  1. Replies: 5
    Last Post: Jul 28, 2011, 6:30 PM
  2. Replies: 5
    Last Post: Feb 16, 2010, 6:02 PM
  3. 2 diffrent CommandColumn on gridPanel
    By yossi in forum 1.x Help
    Replies: 0
    Last Post: Oct 07, 2009, 7:06 AM
  4. [CLOSED] Performance problem in IE6
    By danielg in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 28, 2009, 11:08 AM

Tags for this Thread

Posting Permissions