Results 1 to 2 of 2

Thread: Grid panel columns as rows, help needed

  1. #1
    Sencha User meshulro's Avatar
    Join Date
    Dec 2009
    Zurich, Switzerland

    Question Grid panel columns as rows, help needed

    Hi all,

    As you know, the typical grid displays data per column, each column has its header which tells the user what is shown in that column.

    In my case, I want to create dynamic grid where each time the user clicks a button a column is added, in this case the rows are actually the data titles, i.e. instead of having "Price" column i have "Price" row. Anyone had a case like this?

    To help you visualize it, think of a mortgage calculation application where each click adds another payment:
    Year 1 Year 2 Year 3 Year 4 Year 5 Year 6
    - Add year -
    Users feel more comfortable viewing this information in this layout in case you wonder why I don't follow the typical grid where years have been the rows.

    Software developer with entrepreneur spirit,
    Roy Meshulam

  2. #2
    Sencha User walldorff's Avatar
    Join Date
    Mar 2008
    Antwerp, Belgium


    Maybe you can try this:

    You set up and load the full store. I presume the years are limited.
    Then, in the button handler, you add a column.

    First: read this and include the goodies of Condor in your code.

    Then you may do something like:
    PHP Code:
    // Placeholder for the amount of columns.
    // On initialization there are 3 columns for 3 years.
    var 3;

    // The data of all years you feed to the store. From the server or otherwise.
    var myData = [
    'principal'10002000,  3000400050006000],
    'interest',  0.290.25,],
    'total',     12902500,  3600468056506600]

    // Set up the store; in this case an ArrayStore.
    var store = new{
    fields: ['what','yr1','yr2','yr3','yr4','yr5','yr6']

    // manually load local data

    // column model with the initial 1 + 3 columns
    var colModel = new Ext.grid.ColumnModel({
    columns: [
    header 'what',   dataIndex'what'width70},
    header 'Year 1'dataIndex'yr1'},
    header 'Year 2'dataIndex'yr2'},
    header 'Year 3'dataIndex'yr3'}
    defaults: {sortablefalsemenuDisabledtruewidth50}

    // create the Grid
    var grid = new Ext.grid.GridPanel({
    title      'Array Grid',
    store      store,
    cm         colModel,
    renderTo   Ext.getBody(),
    stripeRows true,
    height     200,
    bbar       : [{
    text   'Add year',
    handler: function(btn) {
    // courtesy: Condor.
    grid.addColumn({header 'Year '+ (++t), dataIndex'yr'+ (t)});
    delete store.reader.ef;
    // disable the button when limit is reached
    if(== 6) {
    ExtJS 3.4, WAMP Apache 2.2.17, PHP 5.3.5, MySQL 5.5.8

Similar Threads

  1. Copy and paste in grid columns and rows
    By leobass in forum Ext 3.x: Help & Discussion
    Replies: 11
    Last Post: 22 May 2012, 8:23 AM
  2. Pasting Rows/Columns into Grid
    By rhedgpeth in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 16 Feb 2011, 9:08 AM
  3. Need help on multi rows columns always editable grid panel
    By just_a_kid in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 6 Sep 2010, 9:21 PM
  4. How can i merge two rows in some columns of a row using grid panel.
    By nagasesha in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 29 Jul 2008, 10:56 PM
  5. Transposed grid -- columns vs. rows
    By stheller in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 13 Dec 2007, 3:46 PM

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