PDA

View Full Version : actioncolumn, icons without html id



joaquingt
25 Jun 2012, 11:01 AM
i been playing with the actioncolumn and icons and works great with ff but not with IE 8, the problem is that i want to only show the icons when the user mouseover a row, checking with firebug i notice that the images and divs dont have an id. If i do an alert(Ext.get(item).id) inside the mouseenter i can get the id of the image but is not in the html code. this is what i get with firebug

im using extjs 4.1



<div class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-action-col-icon x-action-col-0 x-hide-display" src="/extjs/examples/shared/icons/fam/delete.gif" alt="">
</div>



this is the js, the paths are ok, it works in firefox but not on IE8, would be nice if someone could give me a hand.




Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);
Ext.onReady(function() {
//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
//the store will get the content from the .json file
url: 'json.txt'
},
folderSort: true
});
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
// renderTo: Ext.getBody(),
renderTo: 'contenedor',
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
listeners: {
itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
// show the icon
var cmp = Ext.select('#' + Ext.get(item).id +' [src~="/extjs/examples/shared/icons/fam/delete.gif"]');
cmp.removeCls('x-hide-display');
cmp.addCls('x-grid-center-icon');
},

itemmouseleave: function( view, record, item, rowIndex, e, eOpts ) {
// hide the icon
var cmp = Ext.select('#' + Ext.get(item).id +' [src~="/extjs/examples/shared/icons/fam/delete.gif"]');
cmp.removeCls('x-grid-center-icon');
cmp.addCls('x-hide-display');
}
},
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'task'
},{
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'Duration',
flex: 1,
sortable: true,
dataIndex: 'duration',
align: 'center',
//add in the custom tpl for the rows
tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
formatHours: function(v) {
if (v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true
},{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 150,
items: [{
icon: '/extjs/examples/shared/icons/fam/delete.gif',
scope: this,
getClass: function(value,meta,record,rowIx,colIx, store) {
return 'x-hide-display'; //Hide the action icon
}
}]
}
]
});
});

scottmartin
25 Jun 2012, 11:38 AM
See if this will help:



{ header: 'Name', dataIndex: 'name', itemId: 'nameid', id: 'nid' },


itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
console.log(grid.down('#nameid'));
console.log(Ext.getCmp('nid')); // using id if you simply must
},


Scott.

joaquingt
26 Jun 2012, 6:19 AM
See if this will help:



{ header: 'Name', dataIndex: 'name', itemId: 'nameid', id: 'nid' },


itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
console.log(grid.down('#nameid'));
console.log(Ext.getCmp('nid')); // using id if you simply must
},


Scott.

thx scott, that helped me a lot to understand my problem.
seems like IE has some problems referencing an item using the src, it works perfectly with FF

var cmp = Ext.select('#' + Ext.get(item).id +' [src~="/extjs/examples/shared/icons/fam/delete.gif"]');

so i ended using the code below

var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');

thx for your support.

Anyways, i remember i found and example with the id on the imgs.

Have a nice day