Results 1 to 7 of 7

Thread: Colour lines in grid view

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    44
    Answers
    3

    Default Answered: Colour lines in grid view

    Hello,

    time ago i was searching how to differenciate every single line in a grid view according to some values in the record.

    So, i found a lot of helps in this forum and in some other web pages, such as
    http://skirtlesden.com/articles/styl...tjs-grid-cells
    http://www.sencha.com/forum/showthre...is-not-working

    It worked.
    Now, no more. I mean, i didn't change anything on viewConfig, neither i worked on this grid view, but at this moment the lines are no more coloured.
    this i my viewConfig.

    Code:
    {
        stripeRows: false,
        getRowClass: function (record) {
    
            /*get the status*/
            var state = record.get('Stato');
            
            console.log("ViewConfig normal GridPanel:"+state);
        
            /*select the xss class to use. default one*/
            var xssclass = 'rowopen';
            
            if( stato == 'open'){
                xssclass = 'rowopen';
            
            }else if(stato == 'close'){
                xssclass = 'rowclose';
            
            }else if(stato == 'assigned'){
                xssclass = 'rowassigned';
            
            }else if(stato == 'discussion'){
                xssclass = 'rowdiscuss';
            
            } else if(stato == 'resolved'){
                xssclass = 'rowresolve';
                
            } else if(stato == 'working'){
                xssclass = 'rowworking';
            }
         
            return  xssclass;
        
        }
    }
    Ok.
    The interesting thing is that the console.log doesn't print anything, which means that this viewConfig is no more executed.
    I checked with firebug on firefox and it doesn't show me any warnings.

    May someone of you give me some hints why this method is no more executed?
    I have, really, no idea why.

  2. I erased and recreated the object in sencha architect.
    I re-inserted the viewConfig and now it's working.

  3. #2
    Sencha Premium Member
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Where is your viewConfig? If you've put it on your class config then perhaps you've inadvertently overridden it in your instance config?

  4. #3
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    44
    Answers
    3

    Default

    Hi,
    sorry for my late answer. actually i have been very busy.

    well, i don't understand quite well yout question, sorry.

    I'm using sencha architect and my "viewconfig" has been inserted on the box of the panel labelled with "viewconfig", which creates in the code a field called "viewconfig" as:

    Code:
    items: [
                                            {
                                                xtype: 'gridpanel',
                                                viewConfig: {
                                                    stripeRows: false,
                                                    getRowClass: function (record) {
                                                
                                                        /*get the status*/
                                                        var stato = record.get('Stato');
                                                        
                                                        console.log("ViewConfig GridPanel:"+stato);
                                                    
                                                        /*select the xss class to use*/
                                                        var xssclass = 'rowopen';
                                                        
                                                        if( stato == 'open'){
                                                            xssclass = 'rowopen';
                                                        
                                                        }else if(stato == 'close'){
                                                            xssclass = 'rowclose';
                                                        
                                                        }else if(stato == 'assigned'){
                                                            xssclass = 'rowassigned';
                                                        
                                                        }else if(stato == 'discussion'){
                                                            xssclass = 'rowdiscuss';
                                                        
                                                        } else if(stato == 'resolved'){
                                                            xssclass = 'rowresolve';
                                                            
                                                        } else if(stato == 'working'){
                                                            xssclass = 'rowworking';
                                                        }
                                                     
                                                        return  xssclass;
                                                    
                                                    }
                                                },
                                                flex: 1,
                                                header: false,
    I mean, that's all. Apologise me, could you rephrase your question?

  5. #4
    Sencha Premium Member
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    What I was suggesting is that you might have a scenario like this:

    Code:
    Ext.define('MyGrid', {
        viewConfig: {
            getRowClass: ...
        }
    });
    
    Ext.create('MyGrid', {
        viewConfig: {
            ...
        }
    });
    In that case the viewConfig on the class would be replaced by the viewConfig on the instance.

    From the code you've posted it's clear that this cannot be the explanation for what you're seeing. However, it might be that items is being replaced in a similar manner.

    What I suggest is that you make some manual changes (do not use Architect) to the config of your grid to try to confirm that the grid you're seeing on screen is the same grid you think it is. Try giving it a title or something like that. My suspicion is that you're actually seeing a different grid configured elsewhere.

  6. #5
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    44
    Answers
    3

    Default

    You're totally right. The viewConfig is overwritten.

    you know where? just some few lines under.
    Indeed now that i erased my viewConfig, i've found, while looking at the code, this:

    Code:
    xtype: 'gridpanel',
    flex: 1,
    title: 'hello',
    sortableColumns: false,
    store: 'AnomaliaStore',
    viewConfig: {
     loadMask: true
    }
    What's that? there's a viewConfig: { load Mask:true }
    Actually i've no idea from where this configuration is coming. I'd like to erase it, but how could i do?

    The sencha architect doesn't allow me to delete that part, moreover because it doesn't recognize that i have a viewConfig defined.

    I am thinking about to erase manually such line, but i know that architect will complain.

    Btw, thanks for the help and the hints you gave me.

  7. #6
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    44
    Answers
    3

    Default

    no. deleting manually such lines makes sencha architect to recreate them once you reload.

    any idea how i could erase such lines?

  8. #7
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    44
    Answers
    3

    Default

    I erased and recreated the object in sencha architect.
    I re-inserted the viewConfig and now it's working.

Similar Threads

  1. Colour of Back Button in Navigation View
    By kenono in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 29 Jun 2012, 6:23 AM
  2. Change Grid Single cell Colour
    By genggeng13 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 23 May 2012, 2:16 AM
  3. grid change column colour
    By elona in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 5 Oct 2009, 5:43 AM
  4. Grid scroll bar colour
    By kckchak in forum Ext 1.x: Help & Discussion
    Replies: 9
    Last Post: 5 Oct 2007, 8:46 AM
  5. Grid scroll bar Colour change
    By vinod in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 13 Aug 2007, 7:29 AM

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
  •