Integrated Use of Ext. grid. ColumnModel in Javascript, button addition, single sheet

Let's take a picture first. It looks like this:

 

Source code

[Javascript]
Function appgroup_message_list (mainpanel ){
 
Var checkbox = new Ext. grid. CheckboxSelectionModel (); // single vertex
Var cm = new Ext. grid. ColumnModel ([
Checkbox,
{Header: _ ("Name"), width: 80, sortable: true, dataIndex: 'appgroup '},
{Header: _ ("Description"), width: 80, sortable: true, dataIndex: 'description '},
{Header: _ ("Status"), width: 80, sortable: true, dataIndex: 'status '},
{Header: _ ("Manage"), dataIndex: "manage_button", width: 80, renderer: function () {return "<button type = 'button 'onclick =''> Manage </button> "}}, // renderer is used here, and a button is placed
{Header: _ ("Delete"), dataIndex: "delete_button", width: 80, renderer: function () {return "<button type = 'button 'onclick =''> Delete </button> "}},
]);

Var app_group_store = new Ext. data. JsonStore ({// send a url request to the backend to obtain the List data
Url: '/apply/get_application_group_list ',
Root: 'rows ',
Fields: ['appgroup'],
SuccessProperty: 'success ',
Listeners :{
Loadexception: function (obj, opts, res, e ){
Var store_response = Ext. util. JSON. decode (res. responseText );
Ext. MessageBox. alert (_ ("Error"), store_response.msg );
}
}
});
App_group_store.load ();
Var grid = new Ext. grid. GridPanel ({
Cm: cm,
SelModel: checkbox,
Store: app_group_store,
StripeRows: true,
Frame: false,
AutoExpandColumn: 1,
AutoHeight: true,
AutoExpandMax: 300,
AutoExpandMin: 150,
MaxHeight: 100,
EnableHdMenu: true
});
Grid. addListener ('cellclick', cellclick); // Add the triggered Function
Function cellclick (grid, rowIndex, columnIndex, e ){
Var record = grid. getStore (). getAt (rowIndex); // here, we get an object, that is, a whole row of data in a row you click.
// Alert (record. data. appgroup); // retrieve the value of the element appgroup
Var fieldName = grid. getColumnModel (). getDataIndex (columnIndex );
If (fieldName = 'Manage _ button ') {// when you click a list content by adding judgment conditions, it is triggered as long as you click any part of the list.
// Show_user_manager (record );
}
Else if (fieldName = 'delete _ click '){
Delete_app_group (record. data. appgroup, mainpanel );

}
}
Return grid;
}