JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css">
JavaScript
Ext.define('GestionTableGenerique.view.Grid.GridConsultationTableGenerique', {
extend: 'Ext.grid.Panel',
alias: 'widget.gridConsultationTableGenerique',
plugins: 'bufferedrenderer',
height : 600,
initComponent: function() {
var me = this;
Ext.apply(me, {
columns: [],
forceFit: true,
store: Ext.create('Ext.data.Store', {
fields: [],
listeners: {
'metachange': function(store, meta) {
/** Remet les colonnes dans l'ordre **/
meta.columns.sort(triColonnes);
me.reconfigure(store, meta.columns);
}
},
proxy: {type: 'rest', reader: 'dynamicReaderGestionTableGenerique'}
})
});
/** Pour accéder au bouton supprimer par exemple : Ext.getCmp("ID de la grid").getDockedComponent('toolbar').getComponent('Supprimer');
* L'itemID à la place de l'ID permet d'utiliser plusieurs fois cette grid sans que les composants se chevauchent.
*/
this.dockedItems =
[{
itemId : 'toolbar',
xtype: 'toolbar',
dock: 'top',
items:
[
{
itemId: 'Actualiser',
xtype: 'button',
text: '<b>Actualiser</b>',
icon: '../natixis.common.extjs/resources/img/refresh_bleue.png',
action: 'actionRefresh',
}, '-',
{
itemId: 'Creer',
xtype: 'button',
text: '<b>Créer valeur</b>',
icon: '../natixis.common.extjs/resources/img/plus.png',
action: 'actionCreer',
}, '-',
{
itemId: 'Modifier',
xtype: 'button',
text: '<b>Modifier valeur</b>',
icon: '../natixis.common.extjs/resources/img/modifier.png',
action: 'actionModifier',
}, '-',
{
itemId: 'Supprimer',
xtype: 'button',
text: '<b>Supprimer...