1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    18
    Vote Rating
    0
    tljuenem is on a distinguished road

      0  

    Default Fill Grid Panel Row-Wise, and Not Column-Wise

    Fill Grid Panel Row-Wise, and Not Column-Wise


    Hi,
    This is my first post in the forums and my first experience using Ext JS.
    My problem is that I can't get my grid that loads in the data from my store & json file to display horizontally (row-wise).

    img.png
    I only have one "column" or field of data, the car manufacturer.

    I also want each cell in the one row to be resizable to the left and right (but not top or bottom), but this is another issue.

    Any help would be much appreciated! Thanks!

    Code:
    {
     xtype: 'gridpanel',
     hideHeaders: true,
     columnLines: true,
     store: 'CarDataStore',
     selType: 'cellmodel',
     plugins: [
      Ext.create('Ext.grid.plugin.CellEditing', {
       clicksToEdit: 1
      })
     ],
     columns: [
      {
       xtype: 'gridcolumn',
       dataIndex: 'manufacturer',
       text: 'Label text',
       editor: {
        xtype: 'textfield'
       }
      }
     ],
      viewConfig: {
      autoScroll: false,
      stripeRows: false,
      enableTextSelection: true,
      //resizable: true
     }
    }

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,357
    Vote Rating
    200
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      1  

    Default


    The grid component will layout out columns based on discrete data from your server response split out into fields. So, if all of the car manufacturers roll up under one key they'll all fall under one column. There's not a way to load the data to the grid horizontally with dynamic fields (at least not without considerable extending).

    I suspect what will meet your needs better will be a dataview:
    http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.view.View

    With that you have much more control over the structure of the layout / decoration of the items populated to the grid as you tell the view what the markup / CSS should look like.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    18
    Vote Rating
    0
    tljuenem is on a distinguished road

      0  

    Default


    Thank you for your reply! I have a few questions.

    Here is my json file with the car manufacturer data.

    Code:
    {
        "data" : [{ 
            "img" : "2004_Porsche_911_Carrera_type_997.jpg",
            "manufacturer" : "Porsche",
            "model" : "911",
            "price" : 135000
        },{ 
            "img" : "250px-Nissan_GT-R.jpg",
            "manufacturer" : "Nissan",
            "model" : "GT-R",
            "price" : 80000
        },{ 
            "img" : "250px-BMW_M3_E92.jpg",
            "manufacturer" : "BMW",
            "model" : "M3",
            "price" : 60500
        },{ 
            "img" : "250px-Audi_S5.jpg",
            "manufacturer" : "Audi",
            "model" : "S5",
            "price" : 53000
        },{ 
            "img" : "250px-2007_Audi_TT_Coupe.jpg",
            "manufacturer" : "Audi",
            "model" : "TT",
            "price" : 40000
        }]
    }
    I also don't know how many manufacturers will be in the json store so I can't rely on a specific number.

    I looked into dataviews as you suggested but I can't figure out how to get them to have a horizontal layout either. I only need one <table> and then I need each manufacturer to be in it's own <td>{manufacturer}</td>. Do you know how that can be done?

    Here is what I tried:

    Code:
    xtype: 'dataview',
    //itemSelector: 'div',
    //itemTpl: [
    //    '{manufacturer}'
    //],
    store: 'CarDataStore',
    tpl: [
    	'<table border=1 cellpadding=5><tr>',
    	'<tpl for=".">',
    	'<td><div class="word" id="{manufacturer}">',
    	'<span class="x-editable">{manufacturer}</span></div></td>',
    	'</tpl>',
    	'</tr></table>'
    ],
    multiSelect: true,
    height: 310,
    trackOver: true,
    overItemCls: 'x-item-over',
    itemSelector: 'div.word', //'div.word',
    emptyText: 'Nothing to display',
    plugins: [
    	Ext.create('Ext.ux.DataView.DragSelector', {}),
    	Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'manufacturer'})
    ],


    See example: http://dev.sencha.com/deploy/ext-4.0...data-view.html

    That is what I could come up with using dataviews. How could I get:
    1. The text to be selectable
    2. The text to be able to be saved to a file
    3. The user should be able to 'tab' to the next box
    4. Boxes should be resizable on the left and right
    img2.png
    Any help? Thanks!
    Attached Images

Thread Participants: 1

Tags for this Thread