Results 1 to 5 of 5

Thread: ExtJS4 GridView panel : Adding a subheader row

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
      0  

    Question ExtJS4 GridView panel : Adding a subheader row

    Hello

    We have a requirement where we need to add a row between the Grid Header row and Grid Data rows. The sub header row will contain some additional information pertaining to the column. The information may or may not be static. What is best way to insert the row in the grid?

    Any help would be highly appreaciated. Thanks in advance.

    Regards
    Kalpesh

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    You can render anything to the grid or you can insert a record into the grid at index zero. I would render my own component or just element personally.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default

    @mitchellsimoens

    Thanks for the reply. I need the functionality/behaviour across all the pages in my application, hence extending the grid component may be the solution which i need to pursue. Since i am new to ExtJS developement i am not sure how to accomplish this. I have read some articles on how to inherit components, but i am not able to find which property/method needs to be called inorder to insert the new row.
    Any suggestions would be highly appreciated.

    By the way, since this row is not part of the actual records, i am not sure whether adding to index 0 will be ideal.

    Regards
    Kalpesh

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default

    A subheader can be achieved by adding a second columns:[] configuration under each item in your columns structure. I use this for just one header in my grid (which has three subheaders) but I am sure it is applicable to each column:

    Example being:

    Code:
       columns: {
            items:[{
                header: 'First',
                sortable: false,
                dataIndex: 'fname'
            },{
                header: '# of Pets',
                id: 'numPets',
                columns:[ 
                {
                    text: 'Cats',
                    id: 'cats',
                    menuDisabled: true,
                    dataIndex: 'catsnum'
                    width: 60
                },{
                    header: 'Dogs',
                    id: 'dogs',
                    menuDisabled: true,
                    dataIndex: 'dogsnum',
                    width: 50
                },{
                    header: 'Fish',
                    id: 'fish',
                    menuDisabled: true,
                    dataIndex: 'fishnum',
                    width: 75
                }]
            },{
                header: 'Address',
                sortable: true,
                dataIndex: 'address',
                width: 30
            }]
        }

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Hello PKTRaul

    I shall check it out. Can you possibly provide a screenshot of how it would look?

    Regards

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
  •