How to define a grid's columns id

**hui2008** · 27 Jul 2008 5:25 PM

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!

**evant** · 27 Jul 2008 5:32 PM

That doesn't make sense. The column could have more than 1 priority value, so it doesn't make sense to do that.

**lburgess** · 27 Jul 2008 5:48 PM

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.

**hui2008** · 27 Jul 2008 6:07 PM

Thanks very much

**evant** · 27 Jul 2008 6:22 PM

You need to use a renderer.

**hui2008** · 27 Jul 2008 7:04 PM

Originally Posted by evant

You need to use a renderer.

thanks for your reply, could you please descr detail?

**hui2008** · 27 Jul 2008 10:48 PM

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

**lburgess** · 28 Jul 2008 12:42 AM

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

**hui2008** · 28 Jul 2008 1:37 AM

Dear lburgess,

Cool, that's a perfect solution.

Thank you for your information, you are right!

Best Regards,
hui2008

**devnull** · 28 Jul 2008 7:39 AM

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(value, metaData) {

  metaData.attr += ' class="priority priority-1"'

  return value

}

How to define a grid's columns id

Thread Tools

Search Thread

Display