This duplicates another bug already reported in our system: EXTJS-10820
  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    4
    Vote Rating
    1
    orbiz3 is on a distinguished road

      1  

    Default [4.2.1 GA] - FiltersFeature: No filter menu appears on initial hidden column

    [4.2.1 GA] - FiltersFeature: No filter menu appears on initial hidden column


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.1 GA (4.2.1.883)
    Browser versions tested against:
    • FF 22.0 (firebug 1.11.4 installed)
    Description:
    • A grid with filterable hidden columns (Ext.ux.grid.FiltersFeature) won't show the filter options (Filter-Menu), if you set the column visible after render (User set the column visible via column menu).
    Steps to reproduce the problem:
    • create a grid/store with sample data (with an "int" field)
    • set the filtersFeature property to grid and set filters property to the "int" column
    • set "hidden:true" to the filterable column
    • load your example in browser an click on column menu to show the hidden filterable column
    • after hidden column is visible, no filter menu appears for filterable column
    The result that was expected:
    • filter menu should be visible, if you show a hidden filterable column
    The result that occurs instead:
    • No filter menu is visible after show a hidden filterable column
    Test Case:

    test html page
    Code:
         
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="extjs/4.2.1/resources/css/ext-all.css"/>
        
        <link type="text/css" rel="stylesheet" href="extjs/4.2.1/examples/ux/grid/css/GridFilters.css">
        <link type="text/css" rel="stylesheet" href="extjs/4.2.1/examples/ux/grid/css/RangeMenu.css">
        
        <script type="text/javascript" src="extjs/4.2.1/ext-all-debug.js" charset="UTF-8"></script>
        
        <script type="text/javascript" src="extjs/4.2.1/examples/ux/grid/filter/Filter.js" charset="UTF-8"></script>
        <script type="text/javascript" src="extjs/4.2.1/examples/ux/grid/filter/BooleanFilter.js" charset="UTF-8"></script>
        <script type="text/javascript" src="extjs/4.2.1/examples/ux/grid/filter/DateFilter.js" charset="UTF-8"></script>
        <script type="text/javascript" src="extjs/4.2.1/examples/ux/grid/filter/ListFilter.js" charset="UTF-8"></script>
        <script type="text/javascript" src="extjs/4.2.1/examples/ux/grid/filter/NumericFilter.js" charset="UTF-8"></script>
        <script type="text/javascript" src="extjs/4.2.1/examples/ux/grid/filter/StringFilter.js" charset="UTF-8"></script>
        <script type="text/javascript" src="extjs/4.2.1/examples/ux/grid/menu/ListMenu.js" charset="UTF-8"></script>
        <script type="text/javascript" src="extjs/4.2.1/examples/ux/grid/menu/RangeMenu.js" charset="UTF-8"></script>
        <script type="text/javascript" src="extjs/4.2.1/examples/ux/grid/FiltersFeature.js" charset="UTF-8"></script>
    
        <script language="javascript"  type="text/javascript" charset="UTF-8">
        Ext.application({
            name: 'Test',
            launch: function() {
    
            
                Ext.create('Ext.data.Store', {
                    storeId:'simpsonsStore',
                    fields:[
                     {name: 'name',  type: 'string'},
                     {name: 'email', type: 'string'},
                     {name: 'phone', type: 'string'},
                     {name: 'age',   type: 'int'}
                    ],
                    data:{'items':[
                        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224" , "age": 8 },
                        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" , "age": 10 },
                        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244" , "age": 36 },
                        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" , "age": 34 },
                    ]},
                    proxy: {
                        type: 'memory',
                        reader: {
                            type: 'json',
                            root: 'items'
                        }
                    }
                });
               
                Ext.create('Ext.grid.Panel', {
                    title: 'Simpsons',
                    store: Ext.data.StoreManager.lookup('simpsonsStore'),
                    features: [{
                        ftype : 'filters',
                        local: true,
                        encode: false
                      }],
                    columns: [
                        {
                            text: 'Name',
                            dataIndex: 'name',
                            sortable: false,
                            hideable: false,
                            flex: 1
                        },
                        {
                            text: 'Email',
                            dataIndex: 'email',
                            hidden: true,
                            filter: {
                                type: 'string'
                            }
                        },
                        {
                            text: 'Phone',
                            dataIndex: 'phone',
                            width: 100
                        },
                        {
                            text: 'Age',
                            dataIndex: 'age',
                            width: 100,
                            hidden: true,
                            filter: {
                                type: 'numeric'
                            },
                        }
                    ],
                    height: 200,
                    width: 400,
                    renderTo: 'exampleGrid'
                });
            
            
                
            }
        });
        </script>
        </head>
        <body><div id="exampleGrid"></div></body>
    </html>
    HELPFUL INFORMATION

    Screenshot:
    • Screenshot 1 + 2 :
      Shows the problem after visible the filterable "age" column
      Column config: "hidden: true"
      No filter menu appears
    test01.png

    test02.png
    • Screenshot 3:
      Show the column menu, if you set "hidden: false" to the "age" column
      -> correct behavior
    test03.png

    Possible fix:
    • if you call the method [Your grid instance].filters.createFilters()
      on "columnshow" event, the menu appears
    • The column menu doesn't render again, after visible a hidden column
    Additional CSS used:
    • default ext-all.css
    • GridFilters.css, RangeMenu.css in "/examples/ux/grid/css/"

    Additional JS used:
    • default ext-all-debug.js
    • Filter-JS files from "/examples/ux/grid/"

    Operating System:
    • Win7

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,846
    Vote Rating
    68
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2013
    Location
    London
    Posts
    25
    Vote Rating
    0
    darkorigins is on a distinguished road

      0  

    Default


    This is still present in 4.2.1.883 ext-dev.js. Any updates?(I know title says this is a DUP but I couldn't find EXTJSIV-10820 in forums anywhere)