Results 1 to 5 of 5

Thread: ExtJs 4.0 RowExpander with Ajax Request

  1. #1
    Sencha User
    Join Date
    May 2011

    Question ExtJs 4.0 RowExpander with Ajax Request

    Dear All this is my first project on ExtJs and i want to modify the Ux Rowexpander to enable for ajax call.

    I tried a lot but could not accomplish?

    Is there a way that i can modify the Xtemplate at the time of DoubleClick In toggelRow

    Please suggest some solution?

    Plugin Exist in Extjs4 ux folder
    // feature idea to enable Ajax loading and then the content
    // cache would actually make sense. Should we dictate that they use
    // data or support raw html as well?

    * @class Ext.ux.RowExpander
    * @extends Ext.AbstractPlugin
    * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
    * a second row body which expands/contracts. The expand/contract behavior is configurable to react
    * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
    * @ptype rowexpander
    Ext.define('Ext.ux.RowExpander', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.rowexpander',

    rowBodyTpl: null,

    * @cfg {Boolean} expandOnEnter
    * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
    * key is pressed (defaults to <tt>true</tt>).
    expandOnEnter: true,

    * @cfg {Boolean} expandOnDblClick
    * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
    * (defaults to <tt>true</tt>).
    expandOnDblClick: true,

    * @cfg {Boolean} selectRowOnExpand
    * <tt>true</tt> to select a row when clicking on the expander icon
    * (defaults to <tt>false</tt>).
    selectRowOnExpand: false,

    rowBodyTrSelector: '.x-grid-rowbody-tr',
    rowBodSiteIdaram {} record The record providing the data.
    * @param {HtmlElement} expandRow The &lt;tr> element containing the expanded data.
    * @event collapsebody
    * <b<Fired through the grid's View.</b>
    * @param {HtmlElement} rowNode The &lt;tr> element which owns the expanded row.
    * @param {} record The record providing the data.
    * @param {HtmlElement} expandRow The &lt;tr> element containing the expanded data.

    constructor: function() {
    var grid = this.getCmp();
    this.recordsExpanded = {};
    // <debug>
    if (!this.rowBodyTpl) {
    Ext.Error.raise("The 'rowBodyTpl' config is required and is not defined.");
    // </debug>
    // TODO: if XTemplate/Template receives a template as an arg, should
    // just return it back!
    var rowBodyTpl = Ext.create('Ext.XTemplate', this.rowBodyTpl),
    features = [{
    ftype: 'rowbody',
    columnId: this.getHeaderId(),
    recordsExpanded: this.recordsExpanded,
    rowBodyHiddenCls: this.rowBodyHiddenCls,
    rowCollapsedCls: this.rowCollapsedCls,
    getAdditionalData: this.getRowBodyFeatureData,
    getRowBodyContents: function(data) {
    return rowBodyTpl.applyTemplate(data);
    ftype: 'rowwrap'

    if (grid.features) {
    grid.features = features.concat(grid.features);
    } else {
    grid.features = features;

    grid.on('afterlayout', this.onGridAfterLayout, this, {single: true});

    getHeaderId: function() {
    if (!this.headerId) {
    this.headerId =;
    return this.headerId;

    getRowBodyFeatureData: function(data, idx, record, orig) {
    var o = Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments),
    id = this.columnId;
    o.rowBodyColspan = o.rowBodyColspan - 1;
    o.rowBody = this.getRowBodyContents(data);
    o.rowCls = this.recordsExpanded[record.internalId] ? '' : this.rowCollapsedCls;
    o.rowBodyCls = this.recordsExpanded[record.internalId] ? '' : this.rowBodyHiddenCls;
    o[id + '-tdAttr'] = ' valign="top" rowspan="2" ';
    if (orig[id+'-tdAttr']) {
    o[id+'-tdAttr'] += orig[id+'-tdAttr'];
    return o;

    onGridAfterLayout: function() {
    var grid = this.getCmp(),
    view, viewEl;

    if (!grid.hasView) {
    this.getCmp().on('afterlayout', this.onGridAfterLayout, this, {single: true});
    } else {
    view = grid.down('gridview');
    viewEl = view.getEl();

    if (this.expandOnEnter) {
    this.keyNav = Ext.create('Ext.KeyNav', viewEl, {
    'enter' : this.onEnter,
    scope: this
    if (this.expandOnDblClick) {
    view.on('itemdblclick', this.onDblClick, this);
    this.view = view;

    onEnter: function(e) {
    var view = this.view,
    ds =,
    sm = view.getSelectionModel(),
    sels = sm.getSelection(),
    ln = sels.length,
    i = 0,

    for (; i < ln; i++) {
    rowIdx = ds.indexOf(sels[i]);

    toggleRow: function(rowIdx) {
    var rowNode = this.view.getNode(rowIdx),
    row = Ext.get(rowNode),
    nextBd = Ext.get(row).down(this.rowBodyTrSelector),
    record = this.view.getRecord(rowNode);

    if (row.hasCls(this.rowCollapsedCls)) {
    this.recordsExpanded[record.internalId] = true;
    this.view.fireEvent('expandbody', rowNode, record, nextBd.dom);
    } else {
    this.recordsExpanded[record.internalId] = false;
    this.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);

    onDblClick: function(view, cell, rowIdx, cellIndex, e) {


    getHeaderConfig: function() {
    var me = this,
    toggleRow = Ext.Function.bind(me.toggleRow, me),
    selectRowOnExpand = me.selectRowOnExpand;

    return {
    id: this.getHeaderId(),
    width: 24,
    sortable: false,
    fixed: true,
    draggable: false,
    hideable: false,
    menuDisabled: true,
    cls: Ext.baseCSSPrefix + 'grid-header-special',
    renderer: function(value, metadata) {
    metadata.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';

    return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander">&#160;</div>';
    processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
    if (type == "mousedown" && e.getTarget('.x-grid-row-expander')) {
    var row = e.getTarget('.x-grid-row');
    return selectRowOnExpand;

  2. #2
    Ext JS Premium Member
    Join Date
    Apr 2008


    Need the same.
    How to do an AJAX request before expand event and show results?

  3. #3
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Denver, CO


    I think you'd have to extend it to:

    1) float the rowBodyTpl out of the constructor into an instance level variable, and change the accessor to refer to that. Then, where you need to change it, just assign it a new XTemplate instance.
    2) modify the toggleRow function to move the actual expand logic (including the expand event fire) into a callback method, and then issue your Ajax call, using that callback. The collapse part of toggleRow would not need to be changed.

    hope this helps,


  4. #4
    Sencha User
    Join Date
    Dec 2010


    Hi everybody,

    Do you have answer on the Ux Rowexpander to enable for ajax call? How to do an AJAX request before expand event and show results?

    If have,please post the solution.


  5. #5
    Sencha User nickbretz's Avatar
    Join Date
    Jul 2011
    Kansas City, MO


    I went ahead and created this component. I put it up on github. Feel free to modify it or suggest improvements.

    This allows your server to send a different template based on the record in each row. It caches the templates to minimize requests to the server.

    I included a demo in the repo.

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