Let's suppose I have this code for now :
<ext:GridPanel runat="server" ID="GridPanel1" StoreID="Store1" >
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:Column ColumnID="Administrateur" Header="Nom complet" DataIndex="LastName" Sortable="true">
<Renderer Handler="return ''+record.data['NomAdministrateur']+', '+record.data['PrenomAdministrateur']" />
</ext:Column>
<ext:Column ColumnID="Details" Header="Details" Width="50" Align="Center" Fixed="true"
MenuDisabled="true" Resizable="false">
<Renderer Fn="administrateurDetailsRender" />
</ext:Column>
<ext:Column ColumnID="Delete" Header="Supprimer" Width="50" Align="Center" Fixed="true"
MenuDisabled="true" Resizable="false">
<Renderer Fn="administrateurDeleteRender" />
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<CellClick Fn="cellClick" />
</Listeners>
</ext:GridPanel>
<script type="text/javascript">
var administrateurDetailsRender = function() {
return '<img class="imgEdit" ext:qtip="random custom tool tip" style="cursor:pointer;" src="/App_Themes/Phototheque/Icones/vcard_edit.png" />';
}
var administrateurDeleteRender = function() {
return '<img class="imgEdit" ext:qtip="random custom tool tip" style="cursor:pointer;" src="/App_Themes/Phototheque/Icones/bin.png" />';
}
var cellClick = function(grid, rowIndex, columnIndex, e) {
var t = e.getTarget();
var record = grid.getStore().getAt(rowIndex); // Get the Record
var columnId = grid.getColumnModel().getColumnId(columnIndex); // Get column id
if (t.className == 'imgEdit' && columnId == 'Details') {
openAdministrateurDetails(record, t);
}
if (t.className == 'imgEdit' && columnId == 'Delete') {
confirmDelete(record, t);
}
}
var confirmDelete = function (record, animTrg) {
administrateurRecord = record;
Ext.Msg.show({
title: '<img alt=\'Suppression\' src=\'/App_Themes/Phototheque/Icones/user_delete.png\' /> Suppression',
msg: String.format('Etes-vous sûr de vouloir supprimer {0} {1}?', record.data['PrenomAdministrateur'] , record.data['NomAdministrateur']),
buttons: Ext.Msg.YESNO,
fn: processResult,
icon: Ext.MessageBox.QUESTION,
animateTarget: animTrg
});
} </script>
<script type="text/javascript">
var administrateurRecord;
var openAdministrateurDetails = function (record, animTrg) {
administrateurRecord = record;
var window = <%= AdministrateurDetailswindow.ClientID %>;
window.setTitle(String.format('Détails de l\'administrateur : {0}, {1}',record.data['NomAdministrateur'],record.data['PrenomAdministrateur']));
<%= AdministrateurID1.ClientID %>.setValue(record.id);
// Détails
<%= PrenomAdministrateur.ClientID %>.setValue(record.data['PrenomAdministrateur']);
<%= NomAdministrateur.ClientID %>.setValue(record.data['NomAdministrateur']);
<%= EmailAdministrateur.ClientID %>.setValue(record.data['EmailAdministrateur']);
<%= CompteAdministrateurActif.ClientID %>.setValue(record.data['CompteAdministrateurActif']);
window.show(animTrg);
}</script>
I would like to be able to define something like this instead :
<ext:GridPanel runat="server" ID="GridPanel1" StoreID="Store1" >
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:Column ColumnID="Administrateur" Header="Nom complet" DataIndex="LastName" Sortable="true">
<Renderer Handler="return ''+record.data['NomAdministrateur']+', '+record.data['PrenomAdministrateur']" />
</ext:Column>
<ext:CommandColumn ColumnID="Details" Header="Details" Width="50" Align="Center" Fixed="true"
MenuDisabled="true" Resizable="false">
<Command Fn="openAdministrateurDetails" activeIconUrl="/App_Themes/Phototheque/Icones/vcard_edit.png" />
<AjaxEvent />
<Listeners />
</ext:Column>
<ext:CommandColumn ColumnID="Delete" Header="Supprimer" Width="50" Align="Center" Fixed="true"
MenuDisabled="true" Resizable="false">
<Command Fn="confirmDelete" activeIconUrl="/App_Themes/Phototheque/Icones/bin.png"
inactiveIconUrl="/App_Themes/Phototheque/Icones/bin_off.png" Enabled='<%#Eval("IsActive")%>'
activeToolTip="Delete" inactiveToolTip="You can\'t delete him!" />
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
<script type="text/javascript">
var confirmDelete = function (record, animTrg) {
Ext.Msg.show({
title: '<img alt=\'Suppression\' src=\'/App_Themes/Phototheque/Icones/user_delete.png\' /> Suppression',
msg: String.format('Etes-vous sûr de vouloir supprimer {0} {1}?', record.data['PrenomAdministrateur'] , record.data['NomAdministrateur']),
buttons: Ext.Msg.YESNO,
fn: processResult,
icon: Ext.MessageBox.QUESTION,
animateTarget: animTrg
});
}
var administrateurRecord;
var openAdministrateurDetails = function (record, animTrg) {
administrateurRecord = record;
var window = <%= AdministrateurDetailswindow.ClientID %>;
window.setTitle(String.format('Détails de l\'administrateur : {0}, {1}',record.data['NomAdministrateur'],record.data['PrenomAdministrateur']));
<%= AdministrateurID1.ClientID %>.setValue(record.id);
// Détails
<%= PrenomAdministrateur.ClientID %>.setValue(record.data['PrenomAdministrateur']);
<%= NomAdministrateur.ClientID %>.setValue(record.data['NomAdministrateur']);
<%= EmailAdministrateur.ClientID %>.setValue(record.data['EmailAdministrateur']);
<%= CompteAdministrateurActif.ClientID %>.setValue(record.data['CompteAdministrateurActif']);
window.show(animTrg);
}
</script>
Plz let me know if the explanation is not good enough.