Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2011
    Location
    Mississauga, Canada
    Posts
    38
    Vote Rating
    0
    Shehul is on a distinguished road

      0  

    Default ExtJS Grid State management not working when it has Checkbox model added

    ExtJS Grid State management not working when it has Checkbox model added


    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.1.0- RC1


    Browser versions tested against:
    • Mozilla FireFox 12.0 Google CHROME 18.0.1025.162 m


    DOCTYPE tested against:
    • ____


    Description:
    • ExtJS Grid doesnt preserver the state between postbacks when Selection(checkbox) model is added to grid.


    Steps to reproduce the problem:
    • Add The checkbox model as below
    • var selModel = Ext.create('Ext.selection.CheckboxModel',
      {
      listeners :
      {
      selectionchange : function (selModel, selections)
      {
      try
      {
      var tester="";
      }
      catch (err)
      {
      var error="";
      // console.log("Error in selModel " + err);
      }
      }
      }
      }
      );

    • add the model to grid by selModel : selModel
    • Load the page and hide some columns
    • Reload the page and you will see the columns you hide are back which shouldn't happen.


    The result that was expected:
    • Hidden column should have preserve the state.


    The result that occurs instead:
    • Grid reloaded with all columns.


    Test Case:


    Code:
        Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*'
    ]);
    
    
    Ext.define('Company', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        idProperty: 'company'
    });
    
    
    Ext.onReady(function() {
        Ext.QuickTips.init();
        
        // setup the state provider, all state information will be saved to a cookie
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    
    
        // sample static data for the store
        var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
            ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
            ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function change(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
    
    
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function pctChange(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
    
        // create the data store
        var store = Ext.create('Ext.data.ArrayStore', {
            model: 'Company',
            data: myData
        });
        
           var selModel = Ext.create('Ext.selection.CheckboxModel',
       {
          listeners :
          {
             selectionchange : function (selModel, selections)
             {
                try
                {
                  var tester="";
                }
                catch (err)
                {
                  var error="";
                   // console.log("Error in selModel " + err);
                }
             }
          }
       }
       );
    
    
        // create the Grid
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            stateful: true,
            collapsible: true,
            multiSelect: true,
            stateId: 'stateGrid',
            columns: [
                {
                    text     : 'Company',
                    flex     : 1,
                    sortable : false,
                    dataIndex: 'company'
                },
                {
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    renderer : 'usMoney',
                    dataIndex: 'price'
                },
                {
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change'
                },
                {
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                },
                {
                    text     : 'Last Updated',
                    width    : 85,
                    sortable : true,
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                },
                {
                    menuDisabled: true,
                    sortable: false,
                    xtype: 'actioncolumn',
                    width: 50,
                    items: [{
                        icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
                        tooltip: 'Sell stock',
                        handler: function(grid, rowIndex, colIndex) {
                            var rec = store.getAt(rowIndex);
                            alert("Sell " + rec.get('company'));
                        }
                    }, {
                        getClass: function(v, meta, rec) {          // Or return a class from a function
                            if (rec.get('change') < 0) {
                                this.items[1].tooltip = 'Hold stock';
                                return 'alert-col';
                            } else {
                                this.items[1].tooltip = 'Buy stock';
                                return 'buy-col';
                            }
                        },
                        handler: function(grid, rowIndex, colIndex) {
                            var rec = store.getAt(rowIndex);
                            alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
                        }
                    }]
                }
            ],
            height: 350,
            width: 600,
            title: 'Array Grid',
            renderTo: 'grid-example',
            viewConfig: {
                stripeRows: true,
                enableTextSelection: true
            }
             , selModel : selModel
        });
    });





    HELPFUL INFORMATION




    Screenshot or Video:
    • attached


    See this URL for live test case: http://




    Debugging already done:
    • none


    Possible fix:
    • not provided


    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)


    Operating System:
    • Windows 7 Prof

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,912
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Have you tested this with 4.1 final release?
    http://www.sencha.com/blog/ext-js-4-1-final-released/

    Regards,
    Scott.

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2011
    Location
    Mississauga, Canada
    Posts
    38
    Vote Rating
    0
    Shehul is on a distinguished road

      0  

    Default Session with Checkbox is working but filter data still loading everything

    Session with Checkbox is working but filter data still loading everything


    Hi Scott,

    Thanks for reply my half problem is solved.

    I just tested with final release and the column hiding is working however filtered state is still not working.

    Meaning if I do a filter on a grid than after reload the filtered data should be shown but instead I see entire grid again.

    Here is the code for you to test (again plain ArrayGrid.js example) with final release,

    Code:
    
    Ext.Loader.setConfig(
    {
       enabled : true
    }
    );
    Ext.Loader.setPath('Ext.ux', '../ux');
    Ext.require([
    'Ext.window.*',
    'Ext.ux.grid.FiltersFeature'
    ]);
    
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*'
    ]);
    
    // Define Company entity
    // Null out built in convert functions for performance *because the raw data is known to be valid*
    // Specifying defaultValue as undefined will also save code. *As long as there will always be values in the data, or the app tolerates undefined field values*
    Ext.define('Company', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float', convert: null,     defaultValue: undefined},
           {name: 'change',     type: 'float', convert: null,     defaultValue: undefined},
           {name: 'pctChange',  type: 'float', convert: null,     defaultValue: undefined},
           {name: 'lastChange', type: 'date',  dateFormat: 'n/j h:ia', defaultValue: undefined}
        ],
        idProperty: 'company'
    });
    
    Ext.onReady(function() {
        Ext.QuickTips.init();
        
        // setup the state provider, all state information will be saved to a cookie
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    
        // sample static data for the store
        var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
            ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
            ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function change(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
     var selModel = Ext.create('Ext.selection.CheckboxModel',
       {
          listeners :
          {
             selectionchange : function (selModel, selections)
             {
                try
                {
                  var tester="";
                }
                catch (err)
                {
                  var error="";
                   // console.log("Error in selModel " + err);
                }
             }
          }
       }
       );
       
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function pctChange(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
       var filters =
       {
          ftype : 'filters',
          local : true,   // defaults to false (remote filtering)
          filters : [
          {
             type : 'string',
             dataIndex : 'company'
          }
          ,     
          {
             type : 'date',
             dataIndex : 'lastChange'
          }      
          ]
       }
       ;
       
        // create the data store
        var store = Ext.create('Ext.data.ArrayStore', {
            model: 'Company',
            data: myData
        });
    
        // create the Grid
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            stateful: true,
            collapsible: true,
            multiSelect: true,
            stateId: 'stateGrid',
            features : [filters],
            columns: [
                {
                    text     : 'Company',
                    flex     : 1,
                    sortable : false,
                    dataIndex: 'company',
                    filterable : true
                },
                {
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    renderer : 'usMoney',
                    dataIndex: 'price'
                },
                {
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change',
                    filterable : true
                },
                {
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                },
                {
                    text     : 'Last Updated',
                    width    : 85,
                    sortable : true,
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                },
                {
                    menuDisabled: true,
                    sortable: false,
                    xtype: 'actioncolumn',
                    width: 50,
                    items: [{
                        icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
                        tooltip: 'Sell stock',
                        handler: function(grid, rowIndex, colIndex) {
                            var rec = store.getAt(rowIndex);
                            alert("Sell " + rec.get('company'));
                        }
                    }, {
                        getClass: function(v, meta, rec) {          // Or return a class from a function
                            if (rec.get('change') < 0) {
                                this.items[1].tooltip = 'Hold stock';
                                return 'alert-col';
                            } else {
                                this.items[1].tooltip = 'Buy stock';
                                return 'buy-col';
                            }
                        },
                        handler: function(grid, rowIndex, colIndex) {
                            var rec = store.getAt(rowIndex);
                            alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
                        }
                    }]
                }
            ],
            height: 350,
            width: 600,
            title: 'Array Grid',
            renderTo: 'grid-example',
            viewConfig: {
                stripeRows: true,
                enableTextSelection: true
            }
            , selModel : selModel
        });
    });


    Quote Originally Posted by scottmartin View Post
    Have you tested this with 4.1 final release?
    http://www.sencha.com/blog/ext-js-4-1-final-released/

    Regards,
    Scott.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,912
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this helps:
    http://www.sencha.com/forum/showthread.php?137142

    Regards,
    Scott

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi