extjs render usage introduction_extjs

Copy code The code is as follows:

var cm = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer({ header: "", width: 20, align: 'center' }),
{ header: '', align: 'center', dataIndex: 'AccountAndRoseID', width: 50, sortable: true, hidden: true },
{ header: '', align: 'center', dataIndex: 'UserAccountId', width: 50, sortable: true, hidden: true },
{ header : 'Account', align: 'center', dataIndex: 'UserAccountName', width: 200, sortable: true },
{ header: 'Role name', align: 'center', dataIndex: 'UserRoleName', width : 200, sortable: true },
{ header: 'status', align: 'center', dataIndex: 'UserAccountStateId', width: 200, sortable: true, hidden: true, renderer: function() }
]

Renderer can format the data displayed in this column or display the final data according to your customized script (this is my current understanding)
Look at renderer first: function( ) in the parameters

Copy the code The code is as follows:

renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){

}

1.value is the value of the current cell
2.cellmeta stores the cellId cell id, id I don’t know what it does, it seems to be the column number, and the css is the css style of this cell.
3.record is all the data in this row. Whatever you want, record.data["id"] can be obtained in this way.
4. rowIndex is the row number, which does not mean counting from the beginning, but the result after paging.
5.columnIndex column number is too simple.
6.store, this is awesome. In fact, this is the ds passed when you construct the table. That is to say, you can call all the data in the table at will. Alas, it is so awesome.

I found a blog post online, which is very good and intuitive:

Copy the code The code is as follows: