Home
[ExtJS] A->Z
Monday, March 16, 2020
Document: https://docs.sencha.com/extjs/7.1.0/
========================================================================
1. Grid
//create Grid Panel
var sm = Ext.create("Ext.grid.Panel) {...}
var me = sm.getCmp("<id of grid>"); // get grid component.
me.store.add(object); // object or json,... => add new row to Grid
//delete rows
var sml = me.getSelectionModel();
var rec = sml.getSelection()[0];
me.store.remove(rec);
//format data in cell.
Ext.create('Ext.grid.Grid', {
title: 'tittle',
store: Ext.data.StoreManager.lookup('sampleStore'),
columns: [
{text: 'Symbol', dataIndex: 'symbol', width: 100},
{text: 'Price', dataIndex: 'price', width: 100, formatter: 'usMoney'},
{text: 'Change', dataIndex: 'change', xtype: 'numbercolumn', format: '0.00', width: 100},
{text: 'Change', dataIndex: 'change', xtype: 'numbercolumn', format: '0,000', width: 100},
{text: 'Change', dataIndex: 'change', xtype: 'numbercolumn', format: '00.00%', width: 100},
],
})
//locked columns
add locked=true to columns.
add locked=true to columns.
{text: 'Change', dataIndex: 'change', xtype: 'numbercolumn', format: '0.00', width: 100, locked=true},
Ref: https://docs.sencha.com/extjs/4.1.1/extjs-build/examples/grid/locking-grid.html
//highlight a row in grid
// css
.your-selected-cls .x-grid-cell {
background-color: red !important;
}
.your-selected-cls .x-grid-cell {
background-color: red !important;
}
//js
var selNodes = myExtGrid.getView().getSelectedNodes();
var r = Ext.get(selNodes[0]);
//remmove css
r.removeCls("your-selected-cls");
//add css
r.addCls("your-selected-cls");
Ref: https://forum.sencha.com/forum/showthread.php?230756-add-custom-background-color-to-individual-grid-row
var r = Ext.get(selNodes[0]);
//remmove css
r.removeCls("your-selected-cls");
//add css
r.addCls("your-selected-cls");
Ref: https://forum.sencha.com/forum/showthread.php?230756-add-custom-background-color-to-individual-grid-row
//highlight a column in grid
// adding color to columnsgrid.columns[cellIndex].tdCls="your-selected-cls "; => put css there
grid.getView().refresh();
//merge two data value into one column in Grid.
{
header: "Name",
dataIndex: 'last_name',
renderer: function(value, element, record) {
return record.data['last_name'] + ', ' + record.data['first_name'];
}
}
header: "Name",
dataIndex: 'last_name',
renderer: function(value, element, record) {
return record.data['last_name'] + ', ' + record.data['first_name'];
}
}
Comments[ 0 ]
Post a Comment