Results 1 to 2 of 2

Thread: Content inside RowExpander doesn't take all width of a row if grid has CheckboxModel

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Mar 2013
    Toronto, Canada
    Vote Rating

    Default Content inside RowExpander doesn't take all width of a row if grid has CheckboxModel


    Ext version tested:

    • Ext

    Browser versions tested against:

    • Chrome 26.0.1410.64 m
    • FF20


    • Content inside RowExpander doesn't take all width of a row if grid has CheckboxModel

    Steps to reproduce the problem:

    • Create a new GridPanel with RowExpander
    • Set the CheckboxModel for the GridPanel
    • Expand any row in GridPanel

    The result that was expected:

    • Text inside the RowExpander takes all width inside the row

    The result that occurs instead:

    • Text inside the RowExpander doesn't take all width inside the row

    Test Case:

                    Ext.define('Company', {
                        extend: '',
                        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']
                    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. ');
                    var getLocalStore = function() {
                        return Ext.create('', {
                            model: 'Company',
                            data: Ext.grid.dummyData
                    var grid1 = Ext.create('Ext.grid.Panel', {
                        store: getLocalStore(),
                        columns: [
                            {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'}
                        selModel: {
                            selType: 'checkboxmodel'
                        enableLocking: false,
                        width: 600,
                        height: 300,
                        plugins: [{
                            ptype: 'rowexpander',
                            rowBodyTpl : new Ext.XTemplate(
                                    '<p><b>Company:</b> {company}</p>',
                                    '<p><b>Change:</b> {change:this.formatChange}</p><br>',
                                    '<p><b>Summary:</b> {desc}</p>',
                                        formatChange: function(v){
                                            var color = v >= 0 ? 'green' : 'red';
                                            return '<span style="color: ' + color + ';">' + Ext.util.Format.usMoney(v) + '</span>';
                        collapsible: true,
                        animCollapse: false,
                        title: 'Expander Rows',
                        iconCls: 'icon-grid',
                        margin: '0 0 20 0',
                        renderTo: Ext.getBody()


    Screenshot or Video:

    Possible fix:

    • Disable CheckboxModel
    • Use the following overriding:

      Ext.override(Ext.ux.RowExpander, {
          getRowBodyFeatureData: function (record, idx, rowValues) {
              var me = this;
              me.self.prototype.setupRowData.apply(me, arguments);
              // If we are lockable, the expander column is moved into the locked side, so we don't have to span it
              if (!me.grid.ownerLockable) {
                  rowValues.rowBodyColspan = me.grid.getSelectionModel().selType == "checkboxmodel" ? rowValues.view.getGridColumns().length : rowValues.view.getGridColumns().length - 1;
              rowValues.rowBody = me.getRowBodyContents(record);
              rowValues.rowBodyCls = this.expander.recordsExpanded[record.internalId] ? '' : me.rowBodyHiddenCls;

    Additional CSS used:

    • only default ext-all.css

    Operating System:

    • Win7 Pro
    Daulet Urazalinov

    Twitter | LinkedIn

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    Thanks for the report.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

Tags for this Thread

Posting Permissions

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