1. #61
    Ext JS Premium Member
    Join Date
    Jul 2010
    Location
    UK
    Posts
    524
    Vote Rating
    29
    MrSparks has a spectacular aura about MrSparks has a spectacular aura about

      0  

    Default


    @Steffen,

    Do you have any plans to migrate this UX to 4.x? I've done a lot of searching around and your UX was the one to have when 3.x was current.

  2. #62
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    52
    Vote Rating
    0
    davidryan is on a distinguished road

      0  

    Default


    @Steffenk

    Any chance you would be willing to update this excellent plugin to support ExtJS4? (including editable grids)

  3. #63
    Sencha User
    Join Date
    Nov 2011
    Location
    Burlington, NC
    Posts
    9
    Vote Rating
    1
    cmadison0005 is on a distinguished road

      0  

    Default this.getRowClass.createDelegate is not a function

    this.getRowClass.createDelegate is not a function


    Where is this function defined? Or is it part of a superclass?

    This line breaks my code everytime i try to incorporate the PanelRowExpander plugin

    Any ideas? I have included the constructor code below

    Code:
    constructor: function(config)
      {
        Ext.apply(this,config);
        
        ux.grid.DocumentRowExpander.superclass.superclass.constructor.call(this, config);
        
        this.addEvents({
                        beforeexpand : true,
                        expand: true,
                        beforecollapse: true,
                        collapse: true
                       });
        
        this.state = {};
        
        this.expandingRowPanels = {};
      },,
    and the init function:
    Code:
    init : function(grid) // INIT function
      {
        console.log('Within plugin init');
        this.grid = grid;
    
        var view = grid.getView();
    //        view.getRowClass = this.getRowClass.createDelegate(this);
            view.getRowClass = Ext.Function.bind.apply(Ext.Function, arguments);
            view.enableRowBody = true;
    
        grid.on('render', function(){
                                      view.mainBody.on( 'mousedown', this.onMouseDown, this );
                                      view.on('rowupdated', this.updateRow, this);
                                    }, this);
        
        this.relayEvents(grid, ['resize']);
        
        // store
        grid.getStore().on("load", function(store, records, options){
            Ext.select('div.x-grid3-row-expanded').replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
            this.state = {};
            for (var id in this.expandingRowPanels) {
              this.expandingRowPanels[id].destroy();
            }
            this.expandingRowPanels = {};
          }, this);
        
        if (this.store) 
        {    
          this.store.load(); // load here instead of in beforeExpand cuz that would wipe out additions to store
        }
      },

    UPDATE: I found the ExtJS4 analog to createDelegate and have replaced it in the post below.
    Last edited by cmadison0005; 14 Mar 2012 at 5:52 AM. Reason: update

  4. #64
    Sencha User
    Join Date
    Nov 2011
    Location
    Burlington, NC
    Posts
    9
    Vote Rating
    1
    cmadison0005 is on a distinguished road

      0  

    Default Has this been ported to ExtJS 4 ?

    Has this been ported to ExtJS 4 ?


    Im working within an ExtJS 4 MVC acrhitecture and would like to get this plugin functioning so that i can show a child gridpanel with the expansion of a row.

    I added:
    Code:
    Ext.require(['ux.grid.DocumentRowExpander']);
    above the definition of the grid panel which will contain the plugin. Secondly, i added the following to said grid panels config:
    Code:
    plugins: [{
                    ptype: 'documentrowexpander',
                    pluginId: 'document_row_expander'
                   }],
    I have attached DocumentRowExpander.js below, which is my attempt at applying this plugin to the situation described above.

    Code:
    Ext.define('ux.grid.DocumentRowExpander', {
      extend: 'Ext.util.Observable',
      alias: 'plugin.documentrowexpander',
      // config items for rowExpander
      expandOnEnter: true,
      expandOnDblClick: true,
      header: '',
      width: 20,
      sortable: false,
      fixed: true,
      menuDisabled: true,
      dataIndex: '',
      lazyRender: true,
      enableCaching: true,
        
      constructor: function(config)
      {
        console.log('plugin constructor');
        Ext.apply(this,config);
        this.addEvents( {
          /**
           * @event beforeexpand
           * Fires before the row expands. Have the listener return false to prevent the row from expanding.
           * @param {Object} this RowExpander object.
           * @param {Object} Ext.data.Record Record for the selected row.
           * @param {Object} body body element for the secondary row.
           * @param {Number} rowIndex The current row index.
           */
          beforeexpand : true,
          /**
           * @event expand
           * Fires after the row expands.
           * @param {Object} this RowExpander object.
           * @param {Object} Ext.data.Record Record for the selected row.
           * @param {Object} body body element for the secondary row.
           * @param {Number} rowIndex The current row index.
           */
          expand : true,
          /**
           * @event beforecollapse
           * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
           * @param {Object} this RowExpander object.
           * @param {Object} Ext.data.Record Record for the selected row.
           * @param {Object} body body element for the secondary row.
           * @param {Number} rowIndex The current row index.
           */
          beforecollapse : true,
          /**
           * @event collapse
           * Fires after the row collapses.
           * @param {Object} this RowExpander object.
           * @param {Object} Ext.data.Record Record for the selected row.
           * @param {Object} body body element for the secondary row.
           * @param {Number} rowIndex The current row index.
           */
          collapse : true
        });
    
        ux.grid.DocumentRowExpander.superclass.constructor.call(this);
        
        if (this.tpl) 
        { 
          if (typeof this.tpl == 'string')
          {
            this.tpl = new Ext.Template(this.tpl);
          }
          this.tpl.compile();
        }
        this.state = {};
        this.bodyContent= {};
      },
      
      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) {
        console.log('Plugin init');
        this.grid = grid;
        var view = grid.getView();
    //    view.getRowClass = this.getRowClass.createDelegate(this);//(ORIGINAL)
    //    view.getRowClass = Ext.createDelegate(this);
        view.getRowClass = Ext.bind(this.getRowClass, this, arguments); // (My attempt for 4.0)
    
        view.enableRowBody = true;
        grid.on('render', this.onRender, this);
        view.on('refresh', this.onViewRefresh, this);
        grid.on('destroy', this.onDestroy, this);
        grid.on("beforestaterestore", this.applyState, this);
        grid.on("beforestatesave", this.saveState, this);
      },
    
    //   @private
      onRender : function() {
        console.log('Plugin onRender');
        var grid = this.grid;
       //var mainBody = grid.getView().mainBody; // ORIGINAL
        var mainBody = grid.getView().getEl(); // (My attempt for 4.0)
        mainBody.on('mousedown', this.onMouseDown, this, {
          delegate : '.x-grid3-row-expander'
        });
    
        grid.getView().on('rowremoved', this.onRowRemoved, this);
        grid.getView().on('rowupdated', this.onRowUpdated, this);
    
        if (this.expandOnEnter) {
          this.keyNav = new Ext.KeyNav(this.grid.getEl(),
              {
                'enter' : this.onEnter,
                scope : this
              });
        }
        if (this.expandOnDblClick) {
          grid.on('rowdblclick', this.onRowDblClick, this);
        }
      },
    
      /** @private */
      onViewRefresh: function(view) {
        var grid = view.grid;
        var index = -1;
        for(var key in this.state){
          if (this.state[key] === true) {
            index = grid.getStore().indexOfId(key);
            if (index > -1) {
              this.expandRow(index);
            }
          }
        }
      },
    
      /** @private */
      applyState: function(grid, state){
        this.suspendStateStore = true;
        if(state[this.id]) {
          this.state = state[this.id];
        }
        this.suspendStateStore = false;
      },
    
      /** @private */
      saveState: function(grid, state){
        return state[this.id] = this.state;
      },
    
      /** @private */
      onDestroy : function() {
        if (this.keyNav) {
          this.keyNav.disable();
          delete this.keyNav;
        }
        /*
         * A majority of the time, the plugin will be destroyed along with the grid,
         * which means the mainBody won't be available. On the off chance that the plugin
         * isn't destroyed with the grid, take care of removing the listener.
         */
        var mainBody = this.grid.getView().mainBody;
        if (mainBody) {
          mainBody.un('mousedown', this.onMouseDown, this);
        }
      },
    
      /** @private */
      onRowDblClick : function(grid, rowIdx, e) {
        this.toggleRow(rowIdx);
      },
    
        // This will not get fired for an update
      onRowRemoved: function(view, row, rec) {
        var panelItemIndex = rec.id;
    
        if (this.expandingRowPanel && this.expandingRowPanel[panelItemIndex]) {
          this.expandingRowPanel[panelItemIndex].destroy();
          this.expandingRowPanel[panelItemIndex] = null;
        }
      },
    
      onRowUpdated: function(view, row, rec) {
        if (typeof row == 'number') {
          row = this.grid.view.getRow(row);
        }
    
        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'collapseRow' : 'expandRow'](row);
      },
    
      getBodyContent : function(record, index) {
        // extend here
        if (!this.enableCaching) {
          return this.tpl.apply(record.data);
        }
        var content = this.bodyContent[record.id];
        if (!content) {
          if (this.tpl) {
            content = this.tpl.apply(record.data);
            this.bodyContent[record.id] = content;
          }
        }
        return content;
      },
    
      onMouseDown : function(e, t) {
        e.stopEvent();
        var row = e.getTarget('.x-grid3-row');
        this.toggleRow(row);
      },
    
      renderer : function(v, p, record) {
        p.cellAttr = 'rowspan="2"';
        return '<div class="x-grid3-row-expander">&#160;</div>';
      },
    
      beforeExpand : function(record, body, rowIndex) {
        if (this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false) {
          if (this.tpl && this.lazyRender) {
            body.innerHTML = this.getBodyContent(record, rowIndex);
          }
          if (body.innerHTML == '' || !this.enableCaching) {
            this.createExpandingRowPanel(record, body, rowIndex);
          }
          return true;
        } else {
          return false;
        }
      },
    
      toggleRow : function(row) {
        if (typeof row == 'number') {
          row = this.grid.view.getRow(row);
        }
        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
        this.grid.saveState();
      },
    
      expandRow : function(row) {
        if (typeof row == 'number') {
          row = this.grid.view.getRow(row);
        }
        if (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.beforeExpand(record, body, row.rowIndex)) {
            this.state[record.id] = true;
            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
            this.grid.saveState();
            this.fireEvent('expand', this, record, body, row.rowIndex);
          }
        }
      },
    
      collapseRow : function(row) {
        if (typeof row == 'number') {
          row = this.grid.view.getRow(row);
        }
        var record = this.grid.store.getAt(row.rowIndex);
        var body = Ext.fly(row).child(
            'tr:nth(1) div.x-grid3-row-body', true);
        if (this.fireEvent('beforecollapse', this, record,  body, row.rowIndex) !== false) {
          this.state[record.id] = false;
          Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
          this.grid.saveState();
          this.fireEvent('collapse', this, record, body, row.rowIndex);
        }
      },
    
        // Expand all rows
      expandAll : function() {
        var aRows = this.grid.getView().getRows();
        for (var i = 0; i < aRows.length; i++) {
          this.expandRow(aRows[i]);
        }
      },
    
        // Collapse all rows
      collapseAll : function() {
        var aRows = this.grid.getView().getRows();
        for (var i = 0; i < aRows.length; i++) {
          this.collapseRow(aRows[i]);
        }
      },
    
      createExpandingRowPanel : function(record, rowBody, rowIndex) {
        // record.id is more stable than rowIndex for panel item's key; rows can be deleted.
        var panelItemIndex = record.id;
        // var panelItemIndex = rowIndex;
    
        // init array of expanding row panels if not already inited
        if (!this.expandingRowPanel) {
          this.expandingRowPanel = [];
        }
    
        // Destroy the existing panel if present
        if (this.expandingRowPanel[panelItemIndex]) {
          this.expandingRowPanel[panelItemIndex].destroy();
        }
        this.expandingRowPanel[panelItemIndex] = new Ext.Panel({
          border : false,
          bodyBorder : false,
          layout : 'form',
          renderTo : rowBody,
          items : this.createExpandingRowPanelItems(record, rowIndex)
        });
    
      },
    
      /**
       * Override this method to put Ext form items into the expanding row panel.
       * @return Array of panel items.
       */
      createExpandingRowPanelItems : function(record, rowIndex) {
        var panelItems = [];
    
        return panelItems;
      }
    });
    When i actually try to include the plugin in the grid panel, i get an error telling me that method.apply (from ext-debug.js) is not a function. Any one care to enlighten me a bit?

    Thanks

  5. #65
    Sencha User tdikarim's Avatar
    Join Date
    Jun 2007
    Location
    Belgium - Brussel
    Posts
    142
    Vote Rating
    0
    tdikarim is an unknown quantity at this point

      0  

    Default Does exist Extjs4 version

    Does exist Extjs4 version


    Hi,

    This plugin seems great !!

    Is someone have ported this plugin on Extjs4 with success ?

    Thanks
    Karim
    Tamditi Karim

  6. #66
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    74
    Vote Rating
    0
    ajit.mankottil is on a distinguished road

      0  

    Default Renderer issue in RowPanelExpender

    Renderer issue in RowPanelExpender


    Hi,
    I am adding form panel into row panel expander but I got following error -:

    "htmlfile: Unknown runtime error"

    If I added field-set directly into tab, it is showing but rendering problem. Grid's width is very small.

    Please let's me know how I can add form panel into RowPanelExpander.

    Thanks,
    Alex

    Code:
    var expander = new Ext.ux.grid.RowPanelExpander({
            createExpandingRowPanelItems: function (record, rowIndex) {
    
    
                outportStore = new Ext.data.JsonStore({
                    loadMask: false,
                    autoLoad: false,
                    autoDestroy: true,
                    root: 'result',
                    fields: ['BusinessUnitId', 'Name', 'IsSelected'],
                    idProperty: 'BusinessUnitId'
                });
    
    
                outportStore.loadData({ "result": record.data.ContractOutportsDtos });
    
    
                var chkConducted = new Ext.grid.CheckColumn({
                    header: '',
                    id: 'chkPost',
                    dataIndex: 'IsSelected',
                    width: 1
                });
    
    
                var outportColModel = new Ext.grid.ColumnModel([
    			            new Ext.grid.RowNumberer(),
                            chkConducted, {
                                header: "Outport",
                                width: 10,
                                sortable: true,
                                dataIndex: 'Name'
                            }]);
    
    
                var grdoutport = new Ext.grid.EditorGridPanel({
                    store: outportStore,
                    colModel: outportColModel,
                    plugins: [chkConducted],
                    frame: true,
                    loadMask: false,
                    viewConfig: {
                        forceFit: true
                    },
                    style: 'margin:5px 0 5px 0',
                    autoHeight: true,
                    autoWidth: true,
                    columnLines: true,
                    enableHdMenu: false,
    
    
                    sm: new Ext.grid.RowSelectionModel({
                        singleSelect: true
                    }),
                    clicksToEdit: 1,
                    anchor: '90%'
                });
    
    
                var txtSubmittedByName = {
                    xtype: 'textfield',
                    fieldLabel: 'Submitted By Name',
                    id: 'txtSubmittedByName',
                    name: 'name',
                    anchor: '90%'
                };
    
    
                var fsOutports = {
                    xtype: 'fieldset',
                    columnWidth: 1,
                    title: 'Contract Mapping with Outports',
                    collapsible: false,
                    autoHeight: true,
                    margins: '5 5 5 5',
                    bodyStyle: {
                        padding: '10px 20px'
                    },
                    layout: 'column',
                    items: [{
                        columnWidth: 1,
                        border: false,
                        items: [txtSubmittedByName]
                    }, {
                        columnWidth: 0.40,
                        border: false,
                        items: [grdoutport]
                    }]
                };
    
    
                var formPanel = new Ext.FormPanel({
                    layout: 'anchor',
                    bodyStyle: {
                        padding: '10px 20px'
                    },
                    items: [fsOutports]
    
    
                });
    
    
                var tabPanel = new Ext.TabPanel({
                    activeTab: 0,
                    deferredRender: false,
                    items: [{
                        title: 'Testing',
                        items: [formPanel]
                    }]
                });
                
                return [tabPanel];
            }
        });
    If I added fiedset directly into tab, it is working but not renderer correctly. Please see the attached image.
    Code:
    var tabPanel = new Ext.TabPanel({
                    activeTab: 0,
                    deferredRender: false,
                    items: [{
                        title: 'Testing',
                        items: [fsOutports]
                    }]
                });
    rowexpender.jpg

  7. #67
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    74
    Vote Rating
    0
    ajit.mankottil is on a distinguished road

      0  

    Default Grid header alignment is mismatch in RowPanelExpender

    Grid header alignment is mismatch in RowPanelExpender


    Hi,
    I have added the gird into RowPanelExpender. It is working as expected but the is layout issue in grid.
    Grid Header alignment is mismatch with row. So I look at the source in IE and i have found the problem.


    The table width of the Header is 20px more than row table width.
    That 20px width is for scroll bar. The scroll bar width is missing on header but it is render in row table.


    Could you please let me know how to solved this issue.


    Thanks,
    Alex

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi