[CLOSED] Scrolling ListFilter

  1. #1

    [CLOSED] Scrolling ListFilter

    I thought I saw an example of a ListFilter on a grid column that had many choices (70+) and allowed scrolling of the items in the list filter. Any ideas?
    Last edited by Daniil; Sep 05, 2012 at 6:08 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Currently, it is not supported.

    We are going to add scrolling support. Generally, it's enough to just set up Height for Menu to get scrolling.

    But there is a bug in ExtJS which breaks scrolling for all Menu subclasses. We will report it to Sencha.

    For now, we can suggest the following solution - override the ListFilter createMenu function. Please see the comments in JavaScript.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var myCreateMenu = function (config) {
                var menuCfg = config.menuItems ? {items : config.menuItems} : {},
                    menu;
    
                Ext.copyTo(menuCfg, config, "labelField,loadingText,loadOnShow,single,store,options");
                Ext.apply(menuCfg, {
                    height : 100 ///!!! to get scrolling
                });
    
                menu = Ext.create('Ext.ux.grid.menu.ListMenu', menuCfg);
                menu.self.xtype = "menu"; //!!! workaround for ExtJS bug
                menu.on('checkchange', this.onCheckChange, this);
            
                return menu;
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server" />
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <Features>
                <ext:GridFilters runat="server">
                    <Filters>
                        <ext:ListFilter DataIndex="test" Options="test1, test2, test3, test4, test5, test6">
                            <CustomConfig>
                                <ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
                            </CustomConfig>
                        </ext:ListFilter>
                    </Filters>
                </ext:GridFilters>
            </Features>
        </ext:GridPanel>
    </body>
    </html>
  3. #3
    Thanks. Works great. Please close the thread. Did you report the bug the Sencha? I couldn't find the thread last night.
  4. #4
    I have just reported:
    http://www.sencha.com/forum/showthread.php?208854

    Just spent some time to prepare a good report. A good report increases our chances ExtJS team will review it:)
  5. #5
    Thanks for the bug post to Sencha.

    Because of the number of items that are displayed in 2 out of 6 of the list filters (856 and 2976 items) I will need to come up with an alternate way to filter the grid panel for those columns. The lists take anywhere from 3 - 8 seconds to display each time and navigation is cumbersome since there is no scrollbar or the navigation keys (home, end, pageup, pagedown) don't work.
  6. #6
    Quote Originally Posted by cwolcott View Post
    cumbersome since there is no scrollbar or the navigation keys (home, end, pageup, pagedown) don't work.
    Well, it is the browser functionality and, indeed, works with the native scrollbar only.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <style type="text/css">
            .my-div {
                overflow: scroll;
                height: 200px;
            }
            
            .my-nested-div {
                height: 500px;
            }
        </style>
    </head>
    <body>
        <div class="my-div">
            <div class="my-nested-div"></div>
        </div>
    </body>
    </html>
    You could set up
    autoScroll : true
    in a menu config to get native scrolling.

    Example
    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET v2 Example</title>
     
        <script type="text/javascript">
            var myCreateMenu = function (config) {
                var menuCfg = config.menuItems ? {items : config.menuItems} : {},
                    menu;
     
                Ext.copyTo(menuCfg, config, "labelField,loadingText,loadOnShow,single,store,options");
                Ext.apply(menuCfg, {
                    height     : 100,
                    autoScroll : true
                });
     
                menu = Ext.create('Ext.ux.grid.menu.ListMenu', menuCfg);
                menu.on('checkchange', this.onCheckChange, this);
             
                return menu;
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server" />
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <Features>
                <ext:GridFilters runat="server">
                    <Filters>
                        <ext:ListFilter DataIndex="test" Options="test1, test2, test3, test4, test5, test6">
                            <CustomConfig>
                                <ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
                            </CustomConfig>
                        </ext:ListFilter>
                    </Filters>
                </ext:GridFilters>
            </Features>
        </ext:GridPanel>
    </body>
    </html>
    But the main problem in your case appears to be this one.
    Quote Originally Posted by cwolcott View Post
    The lists take anywhere from 3 - 8 seconds to display each time
    Do you use Store for ListFilter and does it load items each time you open the filter? Or do you use just Options?

    Probably, you will, indeed, have to come up with an alternative solution. Maybe, with remote paging. But before we suggest you something, I would want to sort it out why it takes too much time to show the items and why it happens each time. Maybe, we could somehow fix it. Could you provide a sample to reproduce?
  7. #7
    Quote Originally Posted by Daniil View Post
    It has been fixed. The fix is included it Ext.NET v2.1, revision #4332.

    Also we added the MenuConfig property for the ListFilter class.

    Here is the example how clear it looks now.

    Example
    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
     
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server" />
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <Features>
                <ext:GridFilters runat="server">
                    <Filters>
                        <ext:ListFilter DataIndex="test" Options="test1, test2, test3, test4, test5, test6">
                            <MenuConfig runat="server" Height="100" />
                        </ext:ListFilter>
                    </Filters>
                </ext:GridFilters>
            </Features>
        </ext:GridPanel>
    </body>
    </html>
    It produces the same result as my previous example does.
    http://forums.ext.net/showthread.php...ll=1#post82702

    Thanks for the question. It led us to improve Ext.NET!

Similar Threads

  1. [CLOSED] ListFilter values
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 23, 2012, 3:41 PM
  2. [CLOSED] How to Initialize a ListFilter with Value(s) ?
    By IT1333 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 01, 2011, 8:35 PM
  3. ListFilter with mappings
    By syncos in forum 1.x Help
    Replies: 8
    Last Post: Dec 15, 2010, 1:40 PM
  4. [CLOSED] ListFilter with a StoreID
    By SFritsche in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Oct 08, 2010, 1:51 PM

Posting Permissions