Page 1 of 3 123 LastLast
Results 1 to 10 of 28

Thread: [FIXED]RowExpander bug in getting gridview

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default [FIXED]RowExpander bug in getting gridview

    The RowExpander is a great plugin. However I am getting inconsistant results.

    The example for it works perfectly. However, I have created a Viewport with a center region of a GridPanel. I created my own class based on the GridPanel and specify the plugin as a config option, however I get errors. This code:

    Code:
    Ext.define("App.views.CenterRegion", {
    	extend: "Ext.grid.GridPanel",
    	alias : "widget.centerregion",
    	
    	region : "center",
    	frame : true,
    	store : Ext.grid.CompanyStore,
    	headers: [
    		new Ext.grid.RowNumberer(),
    		{text: "Company", flex: 1, dataIndex: "company"},
    		{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: "price"},
    		{text: "Change", dataIndex: "change"},
    		{text: "% Change", dataIndex: "pctChange"},
    		{text: "Last Updated", renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
    	],
    	plugins: [{
    		ptype: "rowexpander",
    		rowBodyTpl : [
    			"<p><b>Company:</b> {company}</p><br>",
    			"<p><b>Summary:</b> {desc}</p>"
    		]
    	}]
    });
    results in this error:

    Uncaught TypeError: Cannot call method 'getEl' of null
    RowExpander.js line 103
    so I made this change:

    Code:
        onGridAfterLayout: function() {
            var view = this.getCmp(),
            	viewEl = view.getEl();
            
            if (this.expandOnEnter) {
                this.keyNav = new Ext.KeyNav(viewEl, {
                    'enter' : this.onEnter,
                    scope: this
                });
            }
            if (this.expandOnDblClick) {
                view.on('dblclick', this.onDblClick, this);
            }
            viewEl.on('click', this.onMouseDown, this, {delegate: '.x-grid-row-expander'});
            this.view = view;
        },
        toggleRow: function(rowIdx) {
            var view = this.view.down("gridview"),
                rowNode = view.getNode(rowIdx),
                row = Ext.get(rowNode),
                nextBd = Ext.get(row).down(this.rowBodyTrSelector),
                record = view.getRecord(rowNode);
                
            if (row.hasCls(this.rowCollapsedCls)) {
                row.removeCls(this.rowCollapsedCls);
                nextBd.removeCls(this.rowBodyHiddenCls);
                this.recordsExpanded[record.internalId] = true;
                this.view.fireEvent('expandbody');
            } else {
                row.addCls(this.rowCollapsedCls);
                nextBd.addCls(this.rowBodyHiddenCls);
                this.recordsExpanded[record.internalId] = false;
                this.view.fireEvent('collapsebody');
            }
            view.up('gridpanel').invalidateScroller();
        },
    And now it works without errors. But why? this.getCmp() is different if you use an extended component versus just using the GridPanel by itself.

    So I tried specifying the plugin in initComponent and got this error:

    Uncaught TypeError: Object #<Object> has no method 'init'
    using this code:

    Code:
    	initComponent: function() {
    		this.plugins = [{
    			ptype: "rowexpander",
    			rowBodyTpl : [
    				"<p><b>Company:</b> {company}</p><br>",
    				"<p><b>Summary:</b> {desc}</p>"
    			]
    		}];
    		this.callParent(arguments);
    	},
    I could be using this.callParent wrong. Tried the constructor:

    Code:
    	constructor: function() {
    		this.plugins = [{
    			ptype: "rowexpander",
    			rowBodyTpl : [
    				"<p><b>Company:</b> {company}</p><br>",
    				"<p><b>Summary:</b> {desc}</p>"
    			]
    		}];
    		
    		this.callParent(arguments);
    	},
    And we are back to working but with my changes to RowExpander.js
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  2. #2
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    One big disadvantage of rowexpander is losing the info after redraw the grid, eg after sorting records.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    It's still open but the CSS is wrong.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #4
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    ah - didn't noticed that. Do you have ever fixed that?
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  5. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default




    Will have to look into that one.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  6. #6
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    - reminds me to the film i just finished looking: Clear and Present Danger
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  7. #7
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    So I think it has to do with selecting.

    Steps to reproduce your bug...

    1. Expand a row. Looks good.
    2. Click a header to sort.
    3. Find row. It is still expanded but back to white.
    4. Looks like it isn't selected anymore so try to select the expanded row. Still nothing.
    5. Select a different row, that row gets selected.
    6. Now you can select the previously expanded row and things are back to being fine for that row.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  8. #8
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    thanks, will check that.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  9. #9
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    For the initial issue:

    Can't confirm this, with both PR3 and the latest source build. Using this code:

    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    Ext.Loader.setPath('Ext.ux', '../ux');
    
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.ux.RowExpander',
        'Ext.container.*'
    ]);
    
    Ext.define("App.views.CenterRegion", {
    	extend: "Ext.grid.GridPanel",
    	alias : "widget.centerregion",
    	region : "center",
    	headers: [
    		{text: "Company", flex: 1, dataIndex: "company"},
    		{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: "price"},
    		{text: "Change", dataIndex: "change"},
    		{text: "% Change", dataIndex: "pctChange"},
    		{text: "Last Updated", renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
    	],
    	plugins: [{
    		ptype: "rowexpander",
    		rowBodyTpl : [
    			"<p><b>Company:</b> {company}</p><br>",
    			"<p><b>Summary:</b> {desc}</p>"
    		]
    	}]
    });
    
    Ext.onReady(function(){
        Ext.regModel('Company', {
            fields: [
                {name: 'company'},
                {name: 'price', type: 'float'},
                {name: 'change', type: 'float'},
                {name: 'pctChange', type: 'float'},
                {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
                {name: 'industry'},
                {name: 'desc'}
             ]
        });
        // Array data for the grids
        Ext.grid.dummyData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
            ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
            ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
            ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
            ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
            ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
            ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
            ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
            ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
            ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
            ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'],
            ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
            ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
            ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
            ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
            ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
            ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
        ];
        
        // add in some dummy descriptions
        for(var i = 0; i < Ext.grid.dummyData.length; i++){
            Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. ');
        }
    
    
        Ext.QuickTips.init();
    
        var getLocalStore = function() {
            return new Ext.data.ArrayStore({
                model: 'Company',
                data: Ext.grid.dummyData
            });
        };
        
        new Ext.container.Viewport({
            layout: 'border',
            items: {
                store: getLocalStore(),
                xtype: 'centerregion'
            }
        })
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  10. #10
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Can confirm the other issue, however it's independent of the RowExpander.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 6
    Last Post: 30 Mar 2010, 11:15 PM
  2. [CLOSED][3.??] GridView& RowExpander
    By XASD in forum Ext 3.x: Bugs
    Replies: 7
    Last Post: 26 Apr 2009, 11:45 PM
  3. [FIXED] First row doesn't expand correctly with RowExpander
    By stegro in forum Ext GWT: Bugs (1.x)
    Replies: 6
    Last Post: 29 Jan 2009, 1:33 AM
  4. [FIXED] GridView: doRender bug
    By llusetti in forum Ext GWT: Bugs (1.x)
    Replies: 4
    Last Post: 27 Jan 2009, 12:25 PM
  5. [FIXED] gridView dateformat NPE
    By yopiyop in forum Ext GWT: Bugs (1.x)
    Replies: 1
    Last Post: 2 Sep 2008, 7:53 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •