Results 1 to 4 of 4

Thread: Grouped Nested grid

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    10

    Default Grouped Nested grid

    I have designed the below grouped header grid,
    How to bring about the drill down inside the grid,
    On clicking the + inside the grid header, set of columns should be loaded.
    and also the month cols should be dynamically loaded depending on the data
    Kindly help me with some samples or ideas.

    The data will be loaded from json file

    Thanks in advance

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Is this something you have already started? or just a concept?

    Scott.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    10

    Default

    Quote Originally Posted by scottmartin View Post
    Is this something you have already started? or just a concept?

    Scott.
    This is a mockup, I have designed the screen with grouped header, but not started with nesting and all, Kindly refer the screen shot below..
    In this grouping itself, to achieve as in the mockup i have added a empty col in the first half header and applied style to set the background white, and if it is set like that, if i set locked:true to all the cols b4 the months columns, its not getting locked.. refer my code n screenshot..

    Kindly suggest how to achieve
    1. This screen design
    2. Freezing of cols
    3. Nesting inside the cols

    ///// code for grid --- For now read from local store - future to be read from a flat file
    var gridPanel = Ext.create('Ext.grid.Panel', {
    store: jsonStore
    ,columnLines: true
    ,forceFit: 'true'
    ,layout:'fit'
    // ,header : false
    ,bodyBorder :false
    ,columns:[
    {
    //locked:true, // if lock is set true, im getting the first column alone visible.. refer 2nd //screen shot
    columns:[
    {
    // text : vatHeader.getName1(),
    text : 'Posting by Month',
    //width : 30,
    sortable : false,
    dataIndex: 'postingMonth'
    ,locked:true
    ,cls:'headerColorBlue'
    },
    {
    text: 'Vat by Fa piao Type'
    ,cls:'headerColorBlue'
    ,locked:true
    //flex:3,
    ,columns: [{
    text : 'Special',
    //width : 55,
    sortable : true,
    //renderer : 'spcl',
    dataIndex: 'special'
    ,color:'red'
    ,locked:true
    ,cls:'headerColorBlue'
    },
    {
    text : 'Commercial',
    //width : 55,
    sortable : true,
    // renderer : 'commercial,
    dataIndex: 'commercial'
    ,locked:true
    ,cls:'headerColorBlue'
    },
    {
    text : 'No Fa Piao',
    //width : 55,
    sortable : true,
    // renderer : pctChange,
    dataIndex: 'noFaPiao'
    ,locked:true
    ,cls:'headerColorBlue'
    },
    {
    text : 'Total',
    //width : 55,
    sortable : true,
    // renderer : pctChange,
    dataIndex: 'Total'
    ,locked:true
    ,cls:'headerColorBlue'
    }]
    }, {
    text : 'Total VAT Posted in GL',
    //width : 55,
    sortable : true,
    //renderer : Ext.util.Format.dateRenderer('m/d/Y'),
    dataIndex: 'totVatPostedinGL'
    ,cls:'headerColorBlue'
    ,locked:true
    }
    ,{
    text : 'Variance',
    //width : 25,
    sortable : true,
    //renderer : Ext.util.Format.dateRenderer('m/d/Y'),
    dataIndex: 'variance'
    ,locked:true
    ,cls:'headerColorBlue'
    },{
    text : 'PF To Issue',
    //width : 25,
    sortable : true,
    //renderer : Ext.util.Format.dateRenderer('m/d/Y'),
    dataIndex: 'fptoissue'
    ,locked:true
    ,cls:'headerColorBlue'
    },{
    text : 'PF pending/No of Request to issue',
    //flex:1,
    renderer: columnWrap,
    ////width : 25,
    sortable : true,
    //renderer : Ext.util.Format.dateRenderer('m/d/Y'),
    dataIndex: 'fppndingbynoofreqtoissue'
    ,locked:true
    ,cls:'headerColorBlue'
    },{
    text : '+ Total FP issuance',
    //width : 35,
    sortable : true,
    //renderer : Ext.util.Format.dateRenderer('m/d/Y'),
    dataIndex: 'totalfpissuance'
    ,cls:'headerColorBlue'
    ,locked:true
    }]},{
    text : 'FA Pioa Issuance By Month'
    ,cls:'headerColorBlue'
    ,columns: [
    {
    text : 'June 2012',
    columns:[{
    text:' + Total'
    ,cls:'headerColorBlue'
    ,dataIndex:'value1'}]

    },
    {
    text : 'May 2012'
    ,cls:'headerColorBlue'
    ,columns:[{
    text:' + Total'
    ,cls:'headerColorBlue'
    ,dataIndex:'value2'}]

    },
    {
    text : 'April 2012'
    ,cls:'headerColorBlue'
    ,columns:[{
    text:'+ Total'
    ,cls:'headerColorBlue'
    ,dataIndex:'value3'}]

    }
    ,
    {
    text : 'March 2012',
    columns:[{
    text:'+ Total'
    ,cls:'headerColor'
    ,dataIndex:'value3'}]

    }
    ,
    {
    text : 'Feb 2012',
    columns:[{
    text:'+ Total'
    ,cls:'headerColor'
    ,dataIndex:'value3'}]

    }]
    }

    ],

    title: 'Grouped Header Grid'
    ,region:'center'
    ,frame:true
    ,height:600
    , renderTo:'nested-json-grid-example'
    ,viewConfig: {
    stripeRows: true

    }
    });

    1stssh.jpg2nd_screen_shot.jpg

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    This could be very involved due to the grouping and column expansion with nested data.

    Here is a nested grid example that may help:
    https://github.com/mitchellsimoens/U...ionRowExpander

    Scott.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •