1. #21
    Ext User
    Join Date
    Aug 2007
    Posts
    17
    Vote Rating
    1
    wolf is on a distinguished road

      0  

    Default Ext fields as content of expanded row

    Ext fields as content of expanded row


    Quote Originally Posted by ricardolowe View Post
    Only solution that comes to mind is to pass the datastore for a combobox and do <tpl for loop> over the data to build an HTML dropdown ( <select id={parentrow.id} > ), etc. That feels cheesy for some reason. Would rather use the Ext components.
    I needed something similar. My solution is exactly that. In the tpl, I gave <input type=text id="customFIeld-row{rowIndex}-field1" >.

    PHP Code:
    tpl : new Ext.XTemplate(
                    
    // TODO maybe use form.Field.applyTo on these form input items on expand?
                    
    'Account Code: <input type="text" id="customField-row{rowIndex}-field1" name="accountCode" value="{accountCode}" /><br>',
                    
    'Product Code: <input type="text" id="customField-row{rowIndex}-field2" name="projectCode" value="{projectCode}" />'
                

    To get rowIndex I had to change RowExpander.getBodyContent().
    PHP Code:
    // Also apply rowIndex in addition to record.data.
    content this.tpl.applyExt.apply( {rowIndexindex}, record.data ) ) 
    I used the RowExpander with a store provided earlier in this thread.

    PHP Code:
            expander.on("render", function( pExpanderpRecordpBodypRowIndexpStorepRecords) {
                    if ( ! 
    this.expandingPanel ) {
                        
    this.expandingPanel = [];
                    }
                    
                        
    this.expandingPanel[pRowIndex] = new Ext.Panel(
                            {
                                
    // title: 'Custom Fields',
                                
    layout:'fit'
                                
    // monitorResize: true,
                                // autoDestroy: false,
                                // height: 300,
                                
    items: [
                                    {                                
                                        
    xtype'textfield',
                                        
    applyTo'customField-row' pRowIndex '-field1',
                                            
    fieldLabel'Account Code',

    ... 
    I haven't quite worked out how to make the panel look good, that is, use the field labels, but it works for now. Still in progress...

    I had gone the Panel.renderTo approach and used a div in the tpl, but the content disappeared after the 2nd expand on each row and the data would be lost.

  2. #22
    Ext User
    Join Date
    Nov 2007
    Posts
    4
    Vote Rating
    0
    sshahdb is on a distinguished road

      0  

    Default


    Good Job, thanks for plugin - helped me alot

  3. #23
    Ext User
    Join Date
    Jul 2008
    Posts
    2
    Vote Rating
    0
    hecules is on a distinguished road

      0  

    Default good job,but i found a bug and fixed it

    good job,but i found a bug and fixed it


    Hello,everybuddy:
    I use the plugin in an pre-configured grid class. I found a bug: when I clicked the expander plugin, the icon changed but not content diplay. I inserted an alert into the remotemethod, I found that the remotemethod had been called. What happened? I check out the source code and maybe found the source of it. I fixed this bug with following code,perhaps it will help somebody.
    By the way, I use this plugin by:
    Code:
    initComponent: function(){
            this.expander = new Ext.ux.RowExpander({
                        remoteDataMethod : this.getExpanderContent
            });
            Ext.apply(this, {
                store: this.ds,
    
                columns: [
                      this.expander,
                      ............
                ]
                ,plugins:[this.cellActions,this.expander]
           });
    }
    
    
    /*
     * Ext JS Library 2.0
     * Copyright(c) 2006-2007, Ext JS, LLC.
     * licensing@extjs.com
     *
     * http://extjs.com/license
     *
     * MODIFIED: SGB [12.12.07]
     * Added support for a new config option, remoteDataMethod,
     * including getter and setter functions, and minor mods
     * to the beforeExpand and expandRow functions
     * lisihao: ****,this plugin has some bugs, so can't dispaly content when toggle the row.I fix it.RI!
     */
    
    Ext.ux.RowExpander = function(config){
        Ext.apply(this, config);
        Ext.ux.RowExpander.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 = {};
    
        this.addEvents({
            beforeexpand : true,
            expand: true,
            beforecollapse: true,
            collapse: true
        });
    };
    
    Ext.extend(Ext.ux.RowExpander, Ext.util.Observable, {
        header: "",
        width: 20,
        sortable: false,
        fixed: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;
            }
            return content;
        },
        // Setter and Getter methods for the remoteDataMethod property
        setRemoteDataMethod : function (fn){
            this.remoteDataMethod = fn;
        },
    
        getRemoteDataMethod : function (record, index){
            if(!this.remoteDataMethod){
                return;
            }
                return this.remoteDataMethod.call(this,record,index);
        },
    
        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 '<div class="x-grid3-row-expander"> </div>';
        },
    
        beforeExpand : function(record, body, rowIndex){
    
            if(this.fireEvent('beforexpand', this, record, body, rowIndex) !== false){
                // If remoteDataMethod is defined then we'll need a div, with a unique ID,
                //  to place the content
                if(this.remoteDataMethod){
                    this.tpl = new Ext.Template("<div id='remData" + rowIndex + "' class='rem-data-expand'><\div>");
                }
                if(this.tpl && this.lazyRender){
    //                body.innerHTML = this.getBodyContent(record, rowIndex);
                    body.innerHTML = '<div id="remData"' + rowIndex + '" class="rem-data-expand">'+this.getRemoteDataMethod(record, rowIndex)+'</div>';// >>>>>--- change here!!!
                }
    
                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);
        },
    
        expandRow : 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.beforeExpand(record, body, row.rowIndex)){
                this.state[record.id] = true;
                Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
                   if(this.fireEvent('expand', this, record, body, row.rowIndex) !== false){
                    //  If the expand event is successful then get the remoteDataMethod
                    this.getRemoteDataMethod(record,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('beforcollapse', this, record, body, row.rowIndex) !== false){
                this.state[record.id] = false;
                Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
                this.fireEvent('collapse', this, record, body, row.rowIndex);
            }
        }
    });
    Last edited by mystix; 10 Aug 2008 at 7:10 PM. Reason: post code in [code][/code] tags. see http://extjs.com/forum/misc.php?do=bbcode#code

  4. #24
    Ext User
    Join Date
    Jul 2008
    Posts
    2
    Vote Rating
    0
    hecules is on a distinguished road

      0  

    Default thanks, i post the reply in incorrect style. You fix it!

    thanks, i post the reply in incorrect style. You fix it!


    thanks, i post the reply in incorrect style. You fix it!

  5. #25
    Ext User
    Join Date
    Aug 2007
    Posts
    17
    Vote Rating
    1
    wolf is on a distinguished road

      1  

    Cool Ext fields as content of expanded row without Tpl

    Ext fields as content of expanded row without Tpl


    ricardolowe was asking how to put Ext fields into the expanded row. I had the same requirement. I initially thought I had it solved but found problems. See here now the working solution which allows combo boxes, text boxes, etc in the expanded row content without using a Template. Just override a method to return Ext Panel items. The overridden method has access to the grid.store record of the row OR a record of a store passed in the config parm of RowExpander.

    Here's the abstract class:

    PHP Code:
    /**
    *    RowExpander changed from RowExpander.js in the Ext examples and some ideas taken 
    *    from the forum (http://extjs.com/forum/showthread.php?t=21017&page=3).
    *
    *    Override the createExpandingRowPanelItems function to make Ext expanded row content
    *    (as opposed to using Ext.Template to make the expanded row content).
    *
    *    If config.store is passed in, pass a record for the row from that store instead 
    *    of the grid store into the createExpandingRowPanelItems function.
    */
    Ext.grid.RowExpander = function(config){
        
    Ext.apply(thisconfig);
        
    Ext.grid.RowExpander.superclass.constructor.call(this);

        
    this.state = {};

        
    this.addEvents({
            
    beforeexpand true,
            
    expandtrue,
            
    beforecollapsetrue,
            
    collapsetrue
        
    });
    };

    Ext.extend(Ext.grid.RowExpanderExt.util.Observable, {
        
    header"",
        
    width20,
        
    sortablefalse,
        
    fixed:true,
        
    dataIndex'',
        
    id'expander',
        
    lazyRender true,
        
    enableCachingtrue,

        
    getRowClass : function(recordrowIndexrowParamsds){
            
    // cols: The column count to apply to the body row's TD colspan attribute (defaults to the current column count of the grid).
            
    rowParams.cols rowParams.cols-1// make it the width of the whole row
            
    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.onMouseDownthis );
            }, 
    this);
            
            
    // store
            
    grid.getStore().on("load", function(storerecordsoptions){
                
    Ext.select('div.x-grid3-row-expanded').replaceClass('x-grid3-row-expanded''x-grid3-row-collapsed');
                
    this.state = {};
                }, 
    this);
                
            
    this.store.load(); // load here instead of in beforeExpand cuz that would wipe out additions to store
        
    },

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

        
    renderer : function(vprecord){
            
    p.cellAttr 'rowspan="2"';
            return 
    '<div class="x-grid3-row-expander"> </div>';
        },

        
    beforeExpand : function(recordrowBodyrowIndex){
            var 
    isContinue true;
            if(
    this.fireEvent('beforeexpand'thisrecordrowBodyrowIndexthis.store) !== false){
                if(
    rowBody.innerHTML == '' || !this.enableCaching) {
                    
    this.createExpandingRowPanelrecordrowBodyrowIndex );
                }
            } else {
                
    isContinue false;
            }
            
            return 
    isContinue;
        },

        
    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);
        },

        
    expandRow : function(row){
            if(
    typeof row == 'number'){
                
    row this.grid.view.getRow(row);
            }
            var 
    record this.grid.store.getAt(row.rowIndex);
            
    // if using additional store passed in config, pass record from it instead of from the grid store
            
    var recordToPass this.store this.store.getAt(row.rowIndex) : record
            var 
    rowBody Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body'row);
            if(
    this.beforeExpand(recordToPassrowBodyrow.rowIndex)){
                
    this.state[record.id] = true;
                
    Ext.fly(row).replaceClass('x-grid3-row-collapsed''x-grid3-row-expanded');
                
    this.fireEvent('expand'thisrecordToPassrowBodyrow.rowIndex);
            }
        },

        
    collapseRow : function(row){
            if(
    typeof row == 'number'){
                
    row this.grid.view.getRow(row);
            }
            var 
    record this.grid.store.getAt(row.rowIndex);
            
    // if using additional store passed in config, pass record from it instead of from the grid store
            
    var recordToPass this.store this.store.getAt(row.rowIndex) : record
            var 
    body Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body'true);
            if(
    this.fireEvent('beforcollapse'thisrecordToPassbodyrow.rowIndex) !== false){
                
    this.state[record.id] = false;
                
    Ext.fly(row).replaceClass('x-grid3-row-expanded''x-grid3-row-collapsed');
                
    this.fireEvent('collapse'thisrecordToPassbodyrow.rowIndex);
            }
        },
        
       
    createExpandingRowPanel: function( recordrowBodyrowIndex ) {
        
            
    // 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 = [];
            }
            
            
    // Add a new panel to the row body if not already there
            
    if ( !this.expandingRowPanel[panelItemIndex] ) {
                
    this.expandingRowPanel[panelItemIndex] = new Ext.Panel(
                    {
                        
    // title: 'Custom Fields',
                        // layout:'fit', // this doesn't put the labels there
                        
    borderfalse,
                        
    bodyBorderfalse,
                        
    layout:'form',
                        
    renderTorowBody,
                        
    itemsthis.createExpandingRowPanelItemsrecordrowIndex )
                    }
                );
            }
        },
        
        
    /**
        * Override this method to put Ext form items into the expanding row panel.
        * @return Array of panel items.
        */
        
    createExpandingRowPanelItems: function( recordrowIndex ) {
            var 
    panelItems = [];
            
            return 
    panelItems;
        }
        
    }); 
    Last edited by wolf; 18 Aug 2008 at 1:29 PM. Reason: remove console.log

  6. #26
    Ext User
    Join Date
    Aug 2007
    Posts
    17
    Vote Rating
    1
    wolf is on a distinguished road

      0  

    Default onChangeField

    onChangeField


    FYI, in the code in that last post, the ext fields created by the createExpandingRowPanelItems() function are not created unless the row is expanded. But the store can contain the data from those ext fields if you do something like this in your ext field:

    PHP Code:
                            listeners: {
                            
    'change' this.onChangeField,
                            
    scopethis
                        
    },
                        
    recordrecord,
                            
    fieldKey'myFieldKey'

    PHP Code:
    onChangeField: function( fieldnewValueoldValue ) {
            
    // copy the new field value into the store
            
    field.record.setfield.fieldKeynewValue );

    Also, if you do row deletion, be careful of using "rowIndex"; the rowIndex for a row would change I made a change to createExpandingRowPanel() in the above post for this reason.
    Last edited by wolf; 15 Aug 2008 at 2:27 PM. Reason: addition

  7. #27
    Ext User
    Join Date
    Aug 2008
    Posts
    3
    Vote Rating
    0
    nazextjs is on a distinguished road

      0  

    Default RowExpander does not get the values from the store

    RowExpander does not get the values from the store


    I am using a grid to display the data along with a RowExpander.
    When the expand the row it does show the fields but without values which I really want to get to. The other issue is I want to learn how to override the createExpandingRowPanelItems function in the RowExpander class. I dont think I am doing it right.

    Code:
    // row expander
      var expander = new Ext.grid.RowExpander({
          store: store,
            createExpandingRowPanelItems: 
                function( record, rowIndex ) {
              var panelItems = [{
                   id: 'form-row'+rowIndex,
                columnWidth: 0.4,
                xtype: 'fieldset',
                labelWidth: 90,
                //title:'Company details',
                defaults: {width: 140},    // Default config options for child items
                defaultType: 'textfield',
                autoHeight: true,
                bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
                border: false,
                style: {
                  "margin-left": "10px", // when you add custom margin in IE 6...
                  "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
                },
                items: [{
                  fieldLabel: 'Name',
                  name: 'barcode'
                },{
                  fieldLabel: 'Price',
                  name: 'title'
                },{
                  fieldLabel: '% Change',
                  name: 'author'
                },{
                  xtype: 'datefield',
                  fieldLabel: 'Last Updated',
                  name: 'barcode'
                }]    
              }];
              return panelItems;
              }
      });
    Last edited by mystix; 31 Aug 2008 at 7:35 PM. Reason: post code in[code][/code] tags. see http://extjs.com/forum/misc.php?do=bbcode#code

  8. #28

  9. #29
    Ext User
    Join Date
    Mar 2008
    Posts
    4
    Vote Rating
    0
    RayZ is on a distinguished road

      0  

    Default


    Quote Originally Posted by s.kerroumi View Post
    Hello, im working with the RowExpander and i m trying to find how to nest two grid inside a master grid like this :
    master grid
    ------------>slave grid
    ----------------> slave "slave" grid

    but the deepest grid has a strange behavior : it does'nt collapse correctly
    here is my code :

    Code:
    ....  
      var iexpander = new Ext.grid.RowExpander({
                    remoteDataMethod : detailedMovementGrid,
                    tpl: new Ext.Template(
                        '<div id="subRemData"></div>')
                });
    ....
    You're trying generate duplicate "slave" ID divs? It's might be wrong...?

  10. #30
    Sencha User
    Join Date
    Jan 2009
    Posts
    74
    Vote Rating
    0
    henryivy is on a distinguished road

      0  

    Default How to rectify the Ext={version:"2.2"};window["undefined"]=window["undefined"]; error

    How to rectify the Ext={version:"2.2"};window["undefined"]=window["undefined"]; error


    Hi,

    I refered the above sample and I implemented the sample nested grid using GridPanel 2.2. It is not expand the child grid. I got error from firebox during the childGrid = function(record, index) execution time.The error message is Ext={version:"2.2"};window["undefined"]=window["undefined"];Ext.apply=function(C,D,B{if({Ext.apply(C,B}if(C&&D&&typeof D=="object"){for(var A in D){C[A]=D[A]}}return C};(function(){var idSeed=0;var ua=navigator.userAgent.toLowerCase();

    I have included the my sample code.
    Code:
    Ext.onReady(function() {
        var xg = Ext.grid;
        // shared reader
        var reader = new Ext.data.ArrayReader({}, [
            { name: 'id' },
            { name: 'type' },
        ]);
        var dataType = [
            [10, 'Published'],
            [11, 'UnPublished']]
    
        // row expander
        var expander = new Ext.grid.RowExpander({
            remoteDataMethod:childGrid ,
            tpl: new Ext.Template('<div id="subRemData"></div>')
        });
        var masterGrid = new xg.GridPanel({
            store: new Ext.data.Store({
                reader: reader,
                data: dataType
            }),
            cm: new xg.ColumnModel([
                expander,
                { header: "Type", width: 200, sortable: true, dataIndex: 'type' }
            ]),
            viewConfig: {
                forceFit: true
            },
            autoHeight: true,
            hideHeaders: false,
            width: 800,
            height: 800,
            plugins: expander,
            collapsible: true,
            animCollapse: false,
            disableSelection: true,
            trackMouseOver: false,
            enableHdMenu: false,
            renderTo: document.getElementById('Div1')
        });
    
        // Child grid
    
        var dataPGName = [
            [10, 10, 'Retail Food'],
            [11, 11, 'Chemical']]
    
        var childGrid = function(record, index) {
            var id = record.get("code");
            var xg = Ext.grid;
            var detailedreader = new Ext.data.ArrayReader({}, [
                { name: 'id' },
                { name: 'code' },
                { name: 'name' },
            ]);
            var detailedstore = new Ext.data.Store({
                reader: detailedreader,
                data: dataPGName
            });
            var detailedgrid = new xg.GridPanel({
                store: detailedstore,
                cm: new xg.ColumnModel([
                    { header: 'PG ID ', width: 50, sortable: true, dataIndex: 'code' },
                    { header: 'PG Name', width: 120, sortable: true, dataIndex: 'name' }
                ]),
                autoHeight: true,
                collapsible: false,
                disableSelection: true,
                trackMouseOver: false,
                autoSizeColumns: true
            });
            detailedgrid.render(Ext.get('remData' + record.data.id));
        };
    })
    Please help me anyone how to rectify that issues.
    Last edited by mystix; 5 Mar 2009 at 7:11 PM. Reason: FORMAT YOUR CODE. post code in [code][/code] tags. see http://extjs.com/forum/misc.php?do=bbcode#code

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..."