1. #1
    Ext User
    Join Date
    May 2007
    Posts
    45
    Vote Rating
    0
    hui2008 is on a distinguished road

      0  

    Question How to define a grid's columns id

    How to define a grid's columns id


    Dear all,

    I create a grid, and in the columns, I want to do this:

    {id:?(I want to the value of this id equal the value of this dataIndex),header: 'title', dataIndex: 'priority',sortable:true, width: 90},
    like this, if priority=6 I want to id:'6',
    if priority=7 I want to id:'7',

    who can help me?

    thanks!

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,779
    Vote Rating
    598
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    That doesn't make sense. The column could have more than 1 priority value, so it doesn't make sense to do that.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Aug 2007
    Location
    Edinburgh
    Posts
    49
    Vote Rating
    0
    lburgess is on a distinguished road

      0  

    Default


    I assume that there is a potential for the same prority to appear in multiple rows?.. If so, you should be looking to set a class instead, as all DOM element ids should be unique.

    That aside, using a simple number (especially for DOM elements relating to a record) is probably not recommended anyway, as such I id would have a high likely hood of being prescribed again and again throughout your app.. which could get very messy

    I may get a chance to look into a possible solution, if I do (and no one else beats me to it), I'll post some code up.

  4. #4
    Ext User
    Join Date
    May 2007
    Posts
    45
    Vote Rating
    0
    hui2008 is on a distinguished road

      0  

    Default Thanks very much

    Thanks very much


    Thanks very much
    Attached Images

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,779
    Vote Rating
    598
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You need to use a renderer.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext User
    Join Date
    May 2007
    Posts
    45
    Vote Rating
    0
    hui2008 is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    You need to use a renderer.
    thanks for your reply, could you please descr detail?

  7. #7
    Ext User
    Join Date
    May 2007
    Posts
    45
    Vote Rating
    0
    hui2008 is on a distinguished road

      0  

    Default


    I do this:

    PHP Code:
    {id:'prbg',header:'mytitle',dataIndex:'priority',align:'center',sortable:true,width:90,renderer:this.bgcolor}, 
    PHP Code:
    bgcolor:function(value){
        var 
    bg;   
        if(
    value == '5'){bg="#666666"}
        else{
        
    bg="#ff0000"
        
    }
        return 
    String.format('<div style="padding:3px;background-color:{1}">{0}</div>',value,bg); 
        } 
    add css:
    PHP Code:
    .x-grid3-col-prbg{padding:0;} 
    but I think this is not a perfect solution

  8. #8
    Sencha User
    Join Date
    Aug 2007
    Location
    Edinburgh
    Posts
    49
    Vote Rating
    0
    lburgess is on a distinguished road

      0  

    Default


    That looks cool, but I would personally prefer to see a class used instead of an inline style attribute.

    JS (snippet):
    Code:
    
    return String.format('<div class="priority priority-1">{0}</div>',value,bg); 
    
    CSS:
    Code:
    
    .priority {
        padding:3px;
    }
    .priority-1 {
    background-color:#ff0000;
    }
    .priority-5 {
    background-color:#666;
     }
    Extracting the CSS would also allow you to make cosmetic changes more easily and make use CSS inheritance.. which can never be a bad thing (I think ?!?!?).

    Aside from the obvious advantages, an example where I have made use of CSS inheritance is were to localise your application. By adding a class to the body element which represents the user's locale, you can use CSS inhritance to change the colour of things like your priority.. because often different cultures will have a different association with a certain colour.. and colours are emotive.

    Code:
    ...
    <body class="lang-zh_CN">
    ...
    Ofcourse with globalisation brings a with it a degree of homogenisation, which may somewhat softened this.. and it is probably wrong to assume that with language brings cultural heritance... BUT I am certainly no expert in this area; it is probably a little off topic; and I may be wrong to even make this statement

  9. #9
    Ext User
    Join Date
    May 2007
    Posts
    45
    Vote Rating
    0
    hui2008 is on a distinguished road

      0  

    Thumbs up


    Dear lburgess,

    Cool, that's a perfect solution.

    Thank you for your information, you are right!



    Best Regards,
    hui2008

  10. #10
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


    the renderer is passed a meta object to which you can assign attributes to be used by the cell. the result is much smoother than wrapping the value with an additional unneeded div:
    PHP Code:
    function myRenderer(valuemetaData) {
      
    metaData.attr += ' class="priority priority-1"'
      
    return value