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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    Thanks for the report.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch

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