Results 1 to 4 of 4

Thread: [solved] Grid Grouping & Renderers ... column not wrapping

  1. #1

    Default [solved] Grid Grouping & Renderers ... column not wrapping

    here is the code:
    Code:
     // espisodes grid (episodesGP)
     // columns
     var cmEP = new Ext.grid.ColumnModel([
      {id:'episodeid',header: "ID", width: 30, sortable: true, hidden: true, dataIndex: 'episodeid'},
      {header: '#', width: 30, sortable: true, dataIndex: 'episodeno'},
      {header: 'Name', width: 270,  renderer: renderEPTopic, sortable: true, dataIndex: 'episodetitle'},
      {header: 'Thumb', width: 150,  renderer: renderEPThumb, sortable: true, dataIndex: 'episodethumbpath'},
      {header: 'Season', width: 50, hidden: true, dataIndex: 'seasonno'}
     ]);
     // group view
     var vEP =  new Ext.grid.GroupingView({
      forceFit:true,
      groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Episodes" : "Episode"]})'
     });
     // episodesGP grid
     var episodesGP = new Ext.grid.GridPanel({
      store  : ds_episodes,
      cm   : cmEP,
      view  : vEP,
      sm   : new Ext.grid.RowSelectionModel({singleSelect:true}),
      stripeRows : true
     });
    here are the rendering functions:
    Code:
     //func: renderEPTopic
     function renderEPTopic(value, p, record){
            return String.format( '<span align="justify" width="270"><b>{0}</b><p>{1}</p></span>', value, record.data.episodeplot );
        };
        //func: renderEPThumb
     function renderEPThumb(value, p, record){
            return String.format( '<img src=' + '../../mylin/' + '{0} width="150" height="100" />', value );
        };
    thats the datastore:
    Code:
    var ds_episodes = new Ext.data.GroupingStore({
      proxy: new Ext.data.HttpProxy({
       url: 'general/myqueries.php?a1=302&a2=2&a3=1&a4=1&a5=0',
       method: 'POST'
      }),
      reader: new Ext.data.JsonReader({
       root: 'results',
       totalProperty: 'total'
       },[
        {name: 'episodeid', type: 'int'},
        {name: 'seasonno', type: 'int'},
        {name: 'episodeno', type: 'int'},
        {name: 'episodetitle', type: 'string'},
        {name: 'episodeplot', type: 'string'},
        {name: 'episodeaired', type: 'string'},
        {name: 'episodethumbpath', type: 'string'}
         ]),    
      sortInfo:{field: 'episodeno', direction: "ASC"},
      groupField:'seasonno' 
     });
    and attached is a screenshot of the output

    My question is, how can i get the second line in the east grid "Name" and function renderEPTopic to be wrapped and not continue in a single line?

    thank u all
    Attached Images Attached Images

  2. #2

    Default

    no one?

  3. #3

    Default

    Add this in your CSS Style
    Code:
    .x-grid3-cell-inner, .x-grid3-hd-inner {white-space: normal !important;}

  4. #4

    Default

    Quote Originally Posted by Frankx7 View Post
    Add this in your CSS Style
    Code:
    .x-grid3-cell-inner, .x-grid3-hd-inner {white-space: normal !important;}
    Thanks alot that fixed it
    Attached Images Attached Images

Posting Permissions

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