1. #1
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    130
    Vote Rating
    2
    harman is on a distinguished road

      0  

    Default Nested EXTJS 4 Grids

    Nested EXTJS 4 Grids


    Hi All,
    I am new to ExtJS.
    I need to put a Grid inside every row of another grid.
    I went through the Grid Plug in example on sencha. But i am only able to put in the text inside rowBodyTpl.
    I already have tried example at the following link.
    http://mikhailstadnik.com/ext/examples/nested-grid.htm
    but it gives an error that i am trying to add a null child to the container Id blah blah.

    Please help me out guys.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,636
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    There are several threads about this:
    http://www.sencha.com/forum/showthre...ht=nested+grid

    Perhaps this will change soon.

    Have you had a look at this:
    http://dev.sencha.com/deploy/ext-4.0.2a/examples/tree/treegrid.html

    It may help for now.

    Regards,
    Scott.

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,636
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    This may help in regards to the first link on the RowExpander issue:

    It is possible to use both the RowExpander and grouping feature in the same grid. Get 4.0.6. The RowExpander shipped with 4.0.2a does not work
    .

    Regards,
    Scott.

  4. #4
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    130
    Vote Rating
    2
    harman is on a distinguished road

      0  

    Default


    thanks for your help frnd but i already have tried those examples.

  5. #5
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    130
    Vote Rating
    2
    harman is on a distinguished road

      0  

    Default Nested grids Extjs 4

    Nested grids Extjs 4


    Seems like ExtJs 4 does not support nesting of grids.
    Sad!!
    will have to roll back to version 3 for the specific issue.
    But still if any one comes accross a solution do reply.

    Thanks

  6. #6
    Sencha User
    Join Date
    Sep 2007
    Posts
    118
    Vote Rating
    0
    stratboogie is on a distinguished road

      0  

    Default


    You can do nested grids. It is kind of tricky but can be done.

    example:
    in your parent grid's config do this:
    Code:
    plugins: [{
    		ptype: "rowexpander",
    		rowBodyTpl: ['<div id="SessionInstructionGridRow-{ClientSessionId}" ></div>']
    
    	}],
    then in your expandbody event do this:

    Code:
    var targetId = 'SessionInstructionGridRow-' + record.get('ClientSessionId');
    					if (Ext.getCmp(targetId + "_grid") == null) {
    						var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', {
    							renderTo: targetId,
    							id: targetId + "_grid"
    						});
    						rowNode.grid = sessionInstructionGrid;
    						sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
    						sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid, { ClientSessionId: record.get('ClientSessionId') });
    					}
    Thanks
    Timothy

  7. #7
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    130
    Vote Rating
    2
    harman is on a distinguished road

      0  

    Default


    Thanks Timothy,
    I will try this approarch.

  8. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    1
    Vote Rating
    0
    hadas is on a distinguished road

      0  

    Default


    you can explaine more about the trick?
    where to put it exactly and ect.
    thanks

  9. #9
    Sencha User
    Join Date
    Jan 2012
    Posts
    41
    Vote Rating
    2
    Golden.Vulture is on a distinguished road

      0  

    Exclamation Please elaborate

    Please elaborate


    It would really help if you can please elaborate on this point.
    Thanks

    Quote Originally Posted by stratboogie View Post
    You can do nested grids. It is kind of tricky but can be done.

    example:
    in your parent grid's config do this:
    Code:
    plugins: [{
            ptype: "rowexpander",
            rowBodyTpl: ['<div id="SessionInstructionGridRow-{ClientSessionId}" ></div>']
    
        }],



    then in your expandbody event do this:

    Code:
    var targetId = 'SessionInstructionGridRow-' + record.get('ClientSessionId');
                        if (Ext.getCmp(targetId + "_grid") == null) {
                            var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', {
                                renderTo: targetId,
                                id: targetId + "_grid"
                            });
                            rowNode.grid = sessionInstructionGrid;
                            sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                            sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid, { ClientSessionId: record.get('ClientSessionId') });
                        }
    Thanks
    Timothy

  10. #10
    Sencha User
    Join Date
    Jun 2012
    Posts
    1
    Vote Rating
    0
    klyde is on a distinguished road

      0  

    Default Attempting this...event handler function never reached

    Attempting this...event handler function never reached


    Hi, I'm evaluating EXTJS 4 as a possible toolkit for adoption by our team and am trying to get a nested grid working as this functionality is a requirement for our framework.

    After adding rowexpander to my grid and attempting this grid creation in the expandbody event as shown here, my expandbody handler code doesn't even seem to be getting invoked. Am I missing something? I've tried binding the event to the method in various ways and it isn't getting hit.

    Can you elaborate on what otherwise sounds like a pretty simple statement:

    then in your expandbody event do this
    And show that being done in context?

    Some of my attempts:

    Code:
       var grid = Ext.create('Ext.grid.Panel', {        id: 'grid',
    
    
            plugins: [{
                ptype: "rowexpander",
                //not sure if the name of this div id is signficant, got this from
                //http://stackoverflow.com/questions/8254113/nested-grid-with-extjs-4
                rowBodyTpl: ['<div id="NestedGridRow-{guid}" ></div>']
            /* tried it here
                listeners: {
                    expandbody : function(rowNode,record, expandbody) {
                        console.log('expandbody fired.');
                        var targetId = 'NestedGridRow-' + record.get('guid');
                        if (Ext.getCmp(targetId + "_grid") == null) {
                            //var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', { //author's grid class.  Name support presumptions above.
                            var nestedGrid = Ext.create('Ext.grid.Panel', { //replace w/ standard Ext grid
                                renderTo: targetId,
                                id: targetId + "_grid",
                                columns: getColumns()
                            });
                            rowNode.grid = nestedGrid;
                            nestedGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                            nestedGrid.fireEvent("bind", nestedGrid, { guid: record.get('guid') });
                        }
                    }
                }
                */
            }],
                /* another example I found - doesn't work...no this.view object
            initComponent: function() {
    			this.view.on('expandbody', function (rowNode, record, expandRow) {
                    console.log('expandbody fired.');
                    var targetId = 'NestedGridRow-' + record.get('guid');
                    if (Ext.getCmp(targetId + "_grid") == null) {
                        //var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', { //author's grid class.  Name support presumptions above.
                        var nestedGrid = Ext.create('Ext.grid.Panel', { //replace w/ standard Ext grid
                            renderTo: targetId,
                            id: targetId + "_grid",
                            columns: getColumns()
                        });
                        rowNode.grid = nestedGrid;
                        nestedGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                        nestedGrid.fireEvent("bind", nestedGrid, { guid: record.get('guid') });
                    }
                });
            },
            */
            listeners: {
                //perhaps the name of div id above is only significant in that it must match what is referenced
                //as a target here in the expandbody handler.  I'm unsure about the ClientSessionId...perhaps
                //this is a FK in the clicked record.
                expandbody : function(rowNode,record, expandbody) {
                    console.log('expandbody fired.');
                    var targetId = 'NestedGridRow-' + record.get('guid');
                    if (Ext.getCmp(targetId + "_grid") == null) {
                        //var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', { //author's grid class.  Name support presumptions above.
                        var nestedGrid = Ext.create('Ext.grid.Panel', { //replace w/ standard Ext grid
                            renderTo: targetId,
                            id: targetId + "_grid",
                            columns: getColumns()
                        });
                        rowNode.grid = nestedGrid;
                        nestedGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                        nestedGrid.fireEvent("bind", nestedGrid, { guid: record.get('guid') });
                    }
                }
            },
            
            store: store,
            stateful: false, 
                 
            collapsible: true,
            resizable: true,
            multiSelect: true,
            
    
    
            height: 350,
            width: 1000,
            title: 'Summary',
            renderTo: 'default_ItemCollection_Resize',
            tools: [{
                type: 'restore',
                handler: function(event, target, owner, tool){
                    owner.findParentByType('gridpanel').setSize(1000,350);
                }
            }],
            viewConfig: {
                stripeRows: true,
                enableTextSelection: true
            },
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store,   
            dock: 'bottom',
            displayInfo: true
            }],
    
    
        columns: getColumns()
            
        });
      
    });
    I didn't really expect the nesting to work on this first attempt the way I half-understand everything and am hacking through this (attempting recursive addition of record being expanded), but at least need to get the event firing so that I can properly provide the object to the newly created grid.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar