Add a grid example first:
There is a need:
1. Add a column to the grid (or tree grid). This column is displayed as a button. You can perform some operations on this row after clicking it.
2. The buttons for each row in this column are different. Different buttons are displayed based on the data of each row, and the corresponding click operations are also different.
SolutionFor the above requirement 1, it is easy to solve.
The grid of ext JS provides columns such as Ext. Grid. Column. actionview xtype: actioncolumn.
You only need to configure xtype as actioncolumn in the columns column of the grid panel, configure icon as the displayed button chart, and configure the handler click action.
Paste a complete example:
<!-- add by oscar999 --><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">It is easy to add multiple icon buttons.
{ text: 'Actions', xtype: 'actioncolumn', items:[{ icon:'../resources/themes/images/access/grid/checked.gif',handler:function(){alert("hello")} },{ icon:'../resources/themes/images/access/grid/columns.gif',handler:function(){alert("hello")} } ] }Now the question is, how can I display different icon buttons based on the values in other columns of this row?
In the early days when ext JS 3 was used, this method was used to solve this problem: (not sure whether ext JS 3 supports the new method mentioned below)
Old method:
Put the icon into a string such as as a value in this column. This kind of transmission and control is not very good.
The following is a new method.
The new Ext. Grid. Column. actionview component provides configuration items such as getclass,
This configuration item is described as follows:getClass : FunctionA function which returns the CSS class to apply to the icon image.Available since: 3.4.0Parameters v : Object The value of the column's configured field (if any). metadata : Object An object in which you may set the following attributes: css : String A CSS class name to add to the cell's TD element. attr : String An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"'). r : Ext.data.Model The Record providing the data. rowIndex : Number The row index. colIndex : Number The column index. store : Ext.data.Store The Store which is providing the data Model.In a word, this configuration can return different iconclass values in the button row based on the values in other columns of the current row. In this way, we can solve the problem:
Paste a complete example:
<!-- add by oscar999 --><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Of course, handler can also use a similar method
handler: function(grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex), }Others
In the first example above, you can directly specify the icon position or the iconcls value.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
