Results 1 to 7 of 7

Thread: Css Help ?!

  1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    109

    Default Css Help ?!

    Hi guys!

    Here having a problem with coloring some columns. So having 2 rows from mygrid:

    aplicare_chimie
    denumire_lucrare

    With some data in it:

    aplicare_chimie denumire_lucrare
    yes lucrare1
    yes lucrare2
    no lucrare3
    yes lucrare4

    I wanna colorate second column denumire_lucrare but only the data wich coresspund to 'yes' from the first column:aplicare_chimie.
    Need to obtain this result:

    aplicare_chimie denumire_lucrare
    yes lucrare1
    yes lucrare2
    no lucrare3
    yes lucrare4


    How it's can be done?!

    Some help will be great!

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    You can do it with a custom renderer easily.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    If you are talking about grid, then look at FAQs, there is section for grids in FAQ, check the area for "appearance" which has examples for using renderers, etc.

  4. #4
    Ext User
    Join Date
    Jul 2008
    Posts
    109

    Default

    Ok thx for help guys!

    It's really was a piece of cake.
    About the row coloring here i have a problem. Here is the code:

    Code:
    var gridViewTest = new Ext.grid.GridView({ 
       //forceFit: true, 
        getRowClass : function (row, index) { 
          var cls = ''; 
          var data = row.data; 
          switch (data.volum_de_lucru) { 
             case 0 : 
                cls = 'readonlycell' 
                break;            
          }//end switch 
          return cls; 
       } 
    });  //end gridViewTest
    where the volum_de_lucru is a field(column in my grid) which contains numeric data. And i need to colorate each row where the value of volum_de_lucru is 0 (zero).

    The editorGridPanel :

    Code:
    var MainListingWindow = new Ext.grid.EditorGridPanel({
         // id: 'MainListingWindow',
          title: 'Caracteristici operaţionale',
          store: MainDataStore,
          cm: MainColumnModel,
    
          ... //some other options
    
        view: new Ext.grid.GroupingView({
              //forceFit:true,
                //groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                showGroupName: true,
                enableNoGroups:false, // REQUIRED!
                hideGroupedColumn: true
    
            }),  
    
           .... //some other options
    
    });
    Now where i'll put the gridViewTest in the EditorGridPanel, if i allredy have a view declared there?!

    And if there are other easy ways to solve the problem?!

    Of course, it can be done with sample custom renderer defined in each column of the grid, but it's dirty and having a really big grid here with many columns.

    --------
    Also, i hope someone can iluminate me with thouse css:
    i wanna colorate only the text in a specified column, how can i do this?
    i have a file style.css where is specified class: 'aplicachimie':

    .aplicachimie{
    background-color: red;
    }
    and it's works fine in my custom renderer:
    ...
    metaData.css = 'aplicachimie';
    ...
    But when i wanna colorate only the text:
    .aplicachimie{
    color: red;
    }
    and the renderer remains unchange, then no effects on text?! why?!
    Hope somebody can help me!

    Thx in advance!

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Try:


    [PHP]

    var MainListingWindow = new Ext.grid.EditorGridPanel({
    //forceFit: true,
    getRowClass : function (row, index) {
    var cls = '';
    var data = row.data;
    switch (data.volum_de_lucru) {
    case 0 :
    cls = 'readonlycell'
    break;
    }//end switch
    return cls;
    },

    // id: 'MainListingWindow',
    title: 'Caracteristici opera

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Try:


    [PHP]

    var MainListingWindow = new Ext.grid.EditorGridPanel({
    // id: 'MainListingWindow',
    title: 'Caracteristici opera

  7. #7
    Ext User
    Join Date
    Jul 2008
    Posts
    109

    Default

    Solved.

    Done it in the easy way, not very clever, only with renderer for each column, but it works good.

    Thx for the help mjlecomte, i'll try to use your hints.

Posting Permissions

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