I have a grid panel and I'm using renderer for certain column.., I also use cellclick for handling click.
In renderer config, I return html table to place the value of a cell (I have some values in a cell).
The problem is, when I click the cell that has renderer returning html table, the cellclick event doesn't work otherwise it works.
How could this happen?
Here is my code :
// Variable For HTML Code
var renderFerrous = '<table style="text-align: left; width: 140px;" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse">'+
'<tbody>'+
'<tr>'+
'<td style="text-align: center; width: 50px;">Rating</td>'+
'<td style="text-align: center; width: 50px;">Colour</td>'+
'<td style="text-align: center; width: 50px;">Ferrous</td>'+
'</tr>'+
'<tr>'+
'<td style="text-align: center; width: 50px;">val1</td>'+
'<td style="text-align: center; width: 50px;">val2</td>'+
'<td style="text-align: center; width: 50px;">val3</td>'+
'</tr>'+
' </tbody>'+
'</table>';
ewhid.cpt.grid = Ext.extend(Ext.grid.GridPanel, {
constructor: function (config) {
config = config || {};
config.id = config.id || 'cpt_grid';
config.height = config.height || 300;
config.width = config.width || 900;
config.border = config.border || true;
config.frame = config.frame || true;
config.deferredRender = true;
config.stripeRows = true;
config.loadMask = true;
config.ds = this.store_grid;
config.ds = new newhid.cpt.store();
config.sm = new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function (smObj, rowIndex, record) {
selRecordStore = record;
record1 = record;
}
}
}),
// MY CELLCLICK HANDLER
config.listeners = {
cellclick: function(grid, rowIndex, colIndex, e) {
colIndex1 = colIndex;
el = e.getTarget();
record = grid.getStore().getAt(rowIndex).data;
record2 = grid.getStore().getAt(rowIndex);
var fieldName = grid.getColumnModel().getDataIndex(colIndex); // Get field name
var data = record2.get(fieldName); // get data in a cell
console.log(fieldName);
console.log(record2.get(fieldName));
if (grid.manage_cell != undefined && grid.manage_cell.isVisible()) {
grid.manage_cell.hide();
grid.manage_cell.destroy(this.items);
return false;
}
开发者_如何学运维 if(colIndex == 8 || colIndex == 9){
if(record.idrecordingtype == 0 || !record.idrecordingtype){
grid.manage_cell = new manage_cell({
items: new newhid.cpt.formValue({
record : record2.get(fieldName)
})
});
grid.manage_cell.show();
grid.manage_cell.getEl().alignTo(el, 'bl');
}
else if(record.idrecordingtype == 3){
grid.manage_cell = new manage_cell({
// items: new newhid.cpt.formIso()
items: new newhid.cpt.formIso2()
});
grid.manage_cell.show();
grid.manage_cell.getEl().alignTo(el, 'bl');
}
else if(record.idrecordingtype == 4){
grid.manage_cell = new manage_cell({
items: new newhid.cpt.formFerrous()
});
var val = record2.get(fieldName);
var trim = val.replace(/\s*\/\s*/g,"/");
var val2 = trim.split("/");
Ext.getCmp('id_rating').setValue(val2[0]);
Ext.getCmp('colour').setValue(val2[1]);
Ext.getCmp('id_ferrous').items.get(0).setValue(val2[2]);
var val = record2.get(fieldName);
var val2 = str.split("/");
var idrating = Ext.getCmp('id_rating');
idrating.store.removeAll();
idrating.store.load({
params: {
'idrating_type' : record.idrating_type,
'idsite': Ext.getCmp('site_id').getValue(),
'idfleet': Ext.getCmp('fleet_id').getValue()
}
})
var colour = Ext.getCmp('colour');
colour.store.removeAll();
colour.store.load()
grid.manage_cell.show();
grid.manage_cell.getEl().alignTo(el, 'bl');
}
else if(record.idrecordingtype == 5){
grid.manage_cell = new manage_cell({
items: new newhid.cpt.formFluid()
});
var val = record2.get(fieldName);
var trim = val.replace(/\s*\/\s*/g,"/");
var val2 = trim.split("/");
console.log(trim);
Ext.getCmp('id_qty').setValue(val2[1]);
Ext.getCmp('id_unit_value').setValue(val2[2]);
Ext.getCmp('id_fluid').items.get(0).setValue(val2[0]);
var idunit = Ext.getCmp('id_unit_value');
idunit.store.removeAll();
idunit.store.load({
params: {
'idunit': record.idunit
}
})
grid.manage_cell.show();
grid.manage_cell.getEl().alignTo(el, 'bl');
}
}
else if(colIndex == 10){
if(record.idrecordingtype == 0 || !record.idrecordingtype){
// console.log(formunit.items.items);
grid.manage_cell = new manage_cell({
items: new newhid.cpt.formUnit()
});
var valCmbUnit = record2.get(fieldName);
var idunit = Ext.getCmp('id_unit_value');
idunit.store.removeAll();
idunit.store.load({
params: {
'idunit': record.idunit
}
});
(valCmbUnit ? Ext.getCmp('id_unit_value').setValue(valCmbUnit): false);
grid.manage_cell.show();
grid.manage_cell.getEl().alignTo(el, 'bl');
}
else if(record.idrecordingtype == 4){
return false;
}
else if(record.idrecordingtype == 5){
return false;
}
}
}
}
// Group Grid
config.columns = [
{
header: 'Ord.',
width: 40,
align: 'center',
sortable: true,
dataIndex: 'orders',
menuDisabled: true
},
{
header: "Sub.",
width: 40,
align: 'center',
sortable: true,
dataIndex: 'suborder'
},
{
header: "CC",
width: 50,
align: 'center',
sortable: true,
dataIndex: 'idcomponent'
},
{
header: "Mod",
width: 50,
align: 'center',
sortable: true,
dataIndex: 'idmodifier'
},
{
header: "Condition",
width: 80,
align: 'center',
sortable: true,
dataIndex: 'conditions'
},
{
header: "Rec.Parameter",
width: 100,
align: 'center',
sortable: true,
dataIndex: 'idrecordparameter',
},
{
header: "Spesification",
width: 100,
align: 'center',
sortable: true,
dataIndex: 'specification',
},
{
header: "M",
width: 40,
align: 'center',
sortable: true,
dataIndex: 'mandatory',
},
{
header: "Actual Reading",
width: 220,
align: 'center',
sortable: true,
dataIndex: 'act_reading',
renderer: function(val, meta, rec){
if(val == ""){
meta.attr = 'style="color: red; cursor:pointer;"';
return 'Manage';
}
else{
return "<center>"+renderFerrous+"</center>";
}
}
},
{
header: "Adjusted Reading",
width: 220,
align: 'center',
sortable: true,
dataIndex: 'adj_reading',
renderer: function(val, meta, rec){
if(val == ""){
meta.attr = 'style="color: red; cursor:pointer;"';
return 'Manage';
}
else{
return val;
}
}
},
{
header: "Unit",
width: 80,
align: 'center',
sortable: true,
dataIndex: 'unit',
renderer: function(val, meta, rec){
if(rec.data.idrecordingtype == 4 || rec.data.idrecordingtype == 5 || rec.data.idrecordingtype == 3){
str = '';
return str;
}
else if(val == ""){
meta.attr = 'style="color: red; cursor:pointer;"';
return 'Manage';
}
else{
return val;
}
}
},
{
header: "Coment",
width: 80,
align: 'center',
sortable: true,
dataIndex: 'comments'
},
{
header : 'idcpt_template',
hidden: true,
dataIndex: 'idcpt_template'
},
{
header: 'idrecordingtype',
hidden: true,
dataIndex: 'idrecordingtype'
},
{
header: 'idunit',
hidden: true,
dataIndex: 'idunit'
},
{
header: 'idrating_type',
hidden: true,
dataIndex: 'idrating_type'
}
];
newhid.cpt.grid.superclass.constructor.call(this, config);
}
});
Can somebody help me please?
Thanks in Advance..
As I recall, Ext makes some assumptions when determining which cell is clicked. One assumption it makes is that the only tables in a grid are rendered by the grid. In other words, by using a table in your renderer, you are confusing the code that generates the click event. Luckily, you can get the same effect without a table.
Try something like this for your template:
<div>
<span>Rating</span>
<span>Color</span>
<span>Ferrous</span>
</div>
<div>
<span>val1</span>
<span>val2</span>
<span>val3</span>
</div>
Add this css to your page
.table-ish {
width: 156px;
border: 1px solid black;
overflow: auto;
}
.table-ish div span {
float: left;
width: 50px;
text-align: center;
border: 1px solid black;
}
Change your column definition to inclode:
css: 'table-ish',
Caveat: I don't have Ext working on this computer, so some of this is conjecture, but you've been waiting for a while now so I figured I'd at least post this.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论