[SOLVED][2.1]updating the grid expander

Filed Under mercialleasing.com |

  • Hi,

    I can't update a record's expanded area after it's been expanded.

    To duplicate the issue, open the examples and add this config
    id : 'grid1',
    to the first grid (probably around line 39).

    open the grid3.htm page and in firebug run

    Ext.getCmp('grid1').store.getAt(0).set('company',' 4m Co')


    expand the first row and run

    Ext.getCmp('grid1').store.getAt(0).set('company',' 5m Co')


    Any suggestions to solve this are very welcome

    Cheers,
    Joshua


  • Hi,

    Thanks for the response. I checked your example and the store updates the company name that appears in the record, but not the company name that is in the expanded area. See the attached image for detail explanation.

    I think that the rowexpander script needs the additional afterEdit event handler to listen on the store's edit.

    afterEdit : function(row){
    if(typeof row == 'number'){
    row = this.grid.view.getRow(row);
    }
    var record = this.grid.store.getAt(row.rowIndex);
    var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
    if(this.tpl && this.lazyRender){
    body.innerHTML = this.getBodyContent(record, row.rowIndex);
    }
    }

    but I'm not sure how to get this to fire when the store is updated.

    Any tutorials on event handling in Ext?

    Cheers,
    Joshua


  • ok, this rowexpander works for me. Maybe someone else can benefit or make it simpler.

    changes are in bold.

    Cheers,
    Joshua


    /*
    * Ext JS Library 2.1
    * (c) 2006-2008, Ext JS, LLC.
    * licensing@extjs.com
    *
    * http://extjs.com/license
    */

    Ext.grid.RowExpander = function(config){
    Ext.apply(this, config);

    this.addEvents({
    beforeexpand : true,
    expand: true,
    beforecollapse: true,
    collapse: true
    });

    Ext.grid.RowExpander.superclass.constructor.call(t his);

    if(this.tpl){
    if(typeof this.tpl == 'string'){
    this.tpl = new Ext.Template(this.tpl);
    }
    this.tpl.compile();
    }

    this.state = {};
    this.bodyContent = {};
    };

    Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
    header: "",
    width: 20,
    sortable: false,
    fixed:true,
    menuDisabled:true,
    dataIndex: '',
    id: 'expander',
    lazyRender : true,
    enableCaching: true,

    getRowClass : function(record, rowIndex, p, ds){
    p.cols = p.cols-1;
    var content = this.bodyContent[record.id];
    if(!content && !this.lazyRender){
    content = this.getBodyContent(record, rowIndex);
    }
    if(content){
    p.body = content;
    }
    return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
    },

    init : function(grid){
    this.grid = grid;

    var view = grid.getView();
    view.getRowClass = this.getRowClass.createDelegate(this);

    view.enableRowBody = true;

    grid.on('render', function(){
    view.mainBody.on('mousedown', this.onMouseDown, this);
    }, this);
    },

    getBodyContent : function(record, index){
    if(!this.enableCaching){
    return this.tpl.apply(record.data);
    }
    var content = this.bodyContent[record.id];
    // if(!content){
    content = this.tpl.apply(record.data);
    this.bodyContent[record.id] = content;
    // } // lose the caching benefit
    return content;
    },

    onMouseDown : function(e, t){
    if(t.className == 'x-grid3-row-expander'){
    e.stopEvent();
    var row = e.getTarget('.x-grid3-row');
    this.toggleRow(row);
    }
    },

    renderer : function(v, p, record){
    p.cellAttr = 'rowspan="2"';
    return '*


  • Sorry, but the code works perfectly as presented:


    var grid1 = new xg.GridPanel({
    store: new Ext.data.Store({
    reader: reader,
    data: xg.dummyData
    }),
    cm: new xg.ColumnModel([
    expander,
    {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
    {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
    {header: "Change", width: 20, sortable: true, dataIndex: 'change'},
    {header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
    {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ]),
    viewConfig: {
    forceFit:true
    },
    id: 'my-grid',
    width: 600,
    height: 300,
    plugins: expander,
    collapsible: true,
    animCollapse: false,
    title: 'Expander Rows, Collapse and Force Fit',
    iconCls: 'icon-grid',
    renderTo: document.body,
    tbar: [
    {
    text: 'Button 1',
    handler: function(){
    console.log('clicked button 1');
    Ext.getCmp('my-grid').store.getAt(0).set('company','4m Co')
    }
    },
    {
    text: 'Button 2',
    handler: function(){
    console.log('clicked button 2');
    Ext.getCmp('my-grid').store.getAt(0).set('company','5m Co')
    }
    }
    ]
    });

    You must be doing something else wrong, the record updates properly every time, whether the row is expanded or not. *shrug*







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about [SOLVED][2.1]updating the grid expander , Please add it free.

    Comments